[Filing] Upload - Adjust when we render the 'Unable to continue' mess…

…aging (#767)

src/pages/Filing/FilingApp/FileSubmission.data.tsx

@@ -1,4 +1,5 @@
 import AlertApiUnavailable from 'components/AlertApiUnavailable';
+import FormParagraph from 'components/FormParagraph';
 import { Link } from 'components/Link';
 import { Alert, Paragraph } from 'design-system-react';
 import { FileSubmissionState } from 'types/filingTypes';
@@ -117,6 +118,23 @@ export function IncorrectFileTypeAlert(): JSX.Element {
   );
 }
 
+export function MustUploadFirstAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mt-[1.875rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      status='error'
+      aria-live='polite'
+      aria-atomic='true'
+      message={
+        <FormParagraph>
+          File upload and validation checks must be completed to save and
+          continue.
+        </FormParagraph>
+      }
+    />
+  );
+}
+
 export const fileSubmissionStateAlert: Record<
   Exclude<
     FileSubmissionState,

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -11,12 +11,7 @@ import InlineStatus from 'components/InlineStatus';
 import Input from 'components/Input';
 import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
-import {
-  Alert,
-  Heading,
-  Paragraph,
-  TextIntroduction,
-} from 'design-system-react';
+import { Heading, Paragraph, TextIntroduction } from 'design-system-react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -39,6 +34,7 @@ import {
 import useInstitutionDetails from 'utils/useInstitutionDetails';
 import FileDetailsUpload from './FileDetailsUpload';
 import FileDetailsValidation from './FileDetailsValidation';
+import { MustUploadFirstAlert } from './FileSubmission.data';
 import FileSubmissionAlert from './FileSubmissionAlert';
 import { getErrorsWarningsSummary } from './FilingErrors/FilingErrors.helpers';
 import { FilingNavButtons } from './FilingNavButtons';
@@ -56,7 +52,7 @@ export function FileSubmission(): JSX.Element {
     pathname: Location['pathname'];
   };
   // Button is always 'enabled', instead of a disabled button, this alert will appear when the user cannot 'save and continue'
-  const [showMustUploadAlert, setShowMustUploadAlert] = useState(false);
+  const [enableMustUploadAlert, setEnableMustUploadAlert] = useState(false);
 
   // controls the data that is shown to the user
   const [dataGetSubmissionLatest, setDataGetSubmissionLatest] = useState<
@@ -119,6 +115,10 @@ export function FileSubmission(): JSX.Element {
     });
   }
 
+  async function disableMustUploadAlert(): Promise<void> {
+    setEnableMustUploadAlert(false);
+  }
+
   const {
     mutate: mutateUpload,
     // NOTE: isLoading will be `isPending` in Tanstack React-Query V5
@@ -132,6 +132,7 @@ export function FileSubmission(): JSX.Element {
     // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
     period_code: year,
     onSuccessCallback: handleAfterUpload,
+    onSettledCallback: disableMustUploadAlert,
   });
 
   const onHandleSelectFile = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -150,11 +151,11 @@ export function FileSubmission(): JSX.Element {
     // NOTE: Workaround to allow uploading the same named file twice in a row
     // eslint-disable-next-line no-param-reassign
     event.currentTarget.value = '';
+    setEnableMustUploadAlert(false);
   };
 
   const fileInputReference = useRef<HTMLInputElement>(null);
   const onHandleUploadClick = (): void => {
-    setShowMustUploadAlert(false);
     if (fileInputReference.current?.click) {
       fileInputReference.current.click();
     }
@@ -250,15 +251,18 @@ export function FileSubmission(): JSX.Element {
     redirect500,
   ]);
   const onNextClick = (): void => {
-    setShowMustUploadAlert(false);
-
     if (disableButtonCriteria) {
-      setShowMustUploadAlert(true);
+      setEnableMustUploadAlert(true);
       setTimeout(() => scrollToElement('must-upload-first'), 0);
-    } else navigate(`/filing/${year}/${lei}/errors`);
+      return;
+    }
+
+    navigate(`/filing/${year}/${lei}/errors`);
   };
   const onPreviousClick = (): void => navigate(`/filing`);
 
+  const showMustUploadAlert = enableMustUploadAlert && disableButtonCriteria;
+
   return (
     <div id='file-submission'>
       <WrapperPageContent className='my-[1.875rem]'>
@@ -287,15 +291,6 @@ export function FileSubmission(): JSX.Element {
             }
           />
         </FormHeaderWrapper>
-        {showMustUploadAlert ? (
-          <div className='u-mb30'>
-            <Alert
-              id='must-upload-first'
-              status='error'
-              message='You must upload a file to save and continue'
-            />
-          </div>
-        ) : null}
         {/* initialGetSubmissionLatestFetched use for the initial query to see if there was a previous upload during a previous user's session */}
         {initialGetSubmissionLatestFetched ? null : <LoadingContent />}
         {/* Display Upload Section -- only if initial getSubmissionLatest succeeds */}
@@ -579,6 +574,7 @@ export function FileSubmission(): JSX.Element {
                 onPreviousClick={onPreviousClick}
               />
             </FormButtonGroup>
+            {showMustUploadAlert ? <MustUploadFirstAlert /> : null}
           </>
         ) : null}
       </FormWrapper>

src/utils/useUploadMutation.tsx

@@ -20,12 +20,14 @@ interface UseUploadMutationProperties {
   period_code: FilingPeriodType;
   // onSuccessCallback?: () => Promise<QueryObserverResult<SubmissionResponse>>;
   onSuccessCallback?: (data: SubmissionResponse) => Promise<void>;
+  onSettledCallback?: () => Promise<void>;
 }
 
 const useUploadMutation = ({
   lei,
   period_code,
   onSuccessCallback,
+  onSettledCallback,
 }: UseUploadMutationProperties): UseMutationResult<
   SubmissionResponse,
   AxiosError,
@@ -43,9 +45,9 @@ const useUploadMutation = ({
     onSuccess: (data: SubmissionResponse) => {
       if (onSuccessCallback) void onSuccessCallback(data);
     },
-    // Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onError: error => {},
+    onSettled: () => {
+      if (onSettledCallback) void onSettledCallback();
+    },
     retry: UPLOAD_SUBMIT_MAX_RETRIES,
   });
 };