[Upload file] Adjust Alert positioning; Adjust Alert display conditions

cfpb · Jun 26, 2024 · a730b24 · a730b24
1 parent 14f446b
commit a730b24
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/pages/Filing/FilingApp/FileSubmission.tsx b/src/pages/Filing/FilingApp/FileSubmission.tsx
@@ -118,6 +118,10 @@ export function FileSubmission(): JSX.Element {
     });
   }
 
+  async function handleErrorUpload(): Promise<void> {
+    setShowMustUploadAlert(false);
+  }
+
   const {
     mutate: mutateUpload,
     // NOTE: isLoading will be `isPending` in Tanstack React-Query V5
@@ -131,6 +135,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,
+    onErrorCallback: handleErrorUpload,
   });
 
   const onHandleSelectFile = (event: ChangeEvent<HTMLInputElement>): void => {
@@ -149,11 +154,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 = '';
+    setShowMustUploadAlert(false);
   };
 
   const fileInputReference = useRef<HTMLInputElement>(null);
   const onHandleUploadClick = (): void => {
-    setShowMustUploadAlert(false);
     if (fileInputReference.current?.click) {
       fileInputReference.current.click();
     }
@@ -286,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 */}
@@ -578,6 +574,15 @@ export function FileSubmission(): JSX.Element {
                 onPreviousClick={onPreviousClick}
               />
             </FormButtonGroup>
+            {showMustUploadAlert && disableButtonCriteria ? (
+              <div className='u-mt30'>
+                <Alert
+                  id='must-upload-first'
+                  status='error'
+                  message='File upload and validation checks must be completed to save and continue.'
+                />
+              </div>
+            ) : null}
           </>
         ) : null}
       </FormWrapper>

diff --git a/src/utils/useUploadMutation.tsx b/src/utils/useUploadMutation.tsx
@@ -20,12 +20,14 @@ interface UseUploadMutationProperties {
   period_code: FilingPeriodType;
   // onSuccessCallback?: () => Promise<QueryObserverResult<SubmissionResponse>>;
   onSuccessCallback?: (data: SubmissionResponse) => Promise<void>;
+  onErrorCallback?: (error: AxiosError) => Promise<void>;
 }
 
 const useUploadMutation = ({
   lei,
   period_code,
   onSuccessCallback,
+  onErrorCallback,
 }: UseUploadMutationProperties): UseMutationResult<
   SubmissionResponse,
   AxiosError,
@@ -46,7 +48,7 @@ const useUploadMutation = ({
     },
     // 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 => {},
+    onError: onErrorCallback,
     retry: UPLOAD_CSV_MAX_RETRIES,
   });
 };