[Design Review] Upload

src/api/requests/fetchFilingSubmissionLatest.ts

@@ -70,24 +70,28 @@ async function retryRequestWithDelay(
   // eslint-disable-next-line no-param-reassign
   axiosInstance.defaults.retryCount += One;
 
-  // TODO: Remove console.logs once retry adjustments have been fully accepted
-  console.log(
-    'Validation STILL in-progress - Long Polling - RETRYING',
-    response,
-  );
+  if (import.meta.env.DEV) {
+    // eslint-disable-next-line no-console
+    console.log(
+      'Validation STILL in-progress - Long Polling - RETRYING',
+      response,
+    );
 
-  console.log(
-    'retry delay time:',
-    // getRetryDelay(axiosInstance.defaults.retryCount),
-  );
+    // eslint-disable-next-line no-console
+    console.log(
+      'retry delay time:',
+      getRetryDelay(axiosInstance.defaults.retryCount),
+    );
+  }
 
   return new Promise(resolve => {
-    setTimeout(
-      () => resolve(axiosInstance(response.config)),
-      // getRetryDelay(axiosInstance.defaults.retryCount),
-      // NOTE: Set to one second for AWS load testing
-      STANDARD_TIMEOUT,
-    );
+    // NOTE: Set to one second for AWS load testing, will revert before mvp
+    // https://github.com/cfpb/sbl-frontend/issues/497
+    // setTimeout(
+    //   () => resolve(axiosInstance(response.config)),
+    //   getRetryDelay(axiosInstance.defaults.retryCount),
+    // );
+    setTimeout(() => resolve(axiosInstance(response.config)), STANDARD_TIMEOUT);
   });
 }
 

src/components/AlertApiUnavailable.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
+import type { ComponentProps } from 'react';
 import { sblHelpMail } from 'utils/common';
 
 interface AlertApiUnavailableProperties {
@@ -14,18 +15,20 @@ export function AlertApiUnavailable({
   message,
   href = sblHelpMail,
   ...others
-}: AlertApiUnavailableProperties & Partial<typeof Alert>): JSX.Element {
+}: AlertApiUnavailableProperties & ComponentProps<typeof Alert>): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
       message={message}
       status='error'
       {...others}
     >
-      There was a connection issue or our service may be temporarily
-      unavailable. Make sure your computer is connected to the internet, and try
-      again. If this issue persists,{' '}
-      <Link href={href}>contact our support staff</Link>.
+      <Paragraph>
+        There was a connection issue or our service may be temporarily
+        unavailable. Make sure your computer is connected to the internet, and
+        try again. If this issue persists,{' '}
+        <Link href={href}>contact our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }

src/components/Button.tsx

@@ -6,7 +6,7 @@ type ButtonProperties = ComponentProps<typeof ButtonDSR>;
 /* Handles new secondary styling */
 
 const newSecondaryStyle =
-  'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-transparent disabled:cursor-not-allowed disabled:border-none';
+  'cursor-pointer border-[1px] border-solid border-pacific bg-white text-pacific hover:border-[#0050B4] hover:bg-white hover:text-[#0050B4] focus:bg-white disabled:cursor-not-allowed disabled:border-none';
 
 export function Button({
   children,

src/pages/Filing/FilingApp/FileDetailsValidation.tsx

@@ -6,27 +6,32 @@ import { fileSubmissionValidationStatus } from './FileSubmission.data';
 interface FileDetailsProperties {
   dataGetSubmissionLatest: SubmissionResponse | undefined;
   errorGetSubmissionLatest: unknown;
+  hasWarnings: boolean;
 }
 
 function FileDetailsValidation({
   dataGetSubmissionLatest,
   errorGetSubmissionLatest,
+  hasWarnings,
 }: FileDetailsProperties): JSX.Element | null {
   // Should only show once an validation has completed
   if (
-    !dataGetSubmissionLatest?.filename &&
-    !dataGetSubmissionLatest?.submission_time
+    errorGetSubmissionLatest ||
+    (!dataGetSubmissionLatest?.filename &&
+      !dataGetSubmissionLatest?.submission_time)
   )
     return null;
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const validationStatusMessage: string = errorGetSubmissionLatest
-    ? fileSubmissionValidationStatus[FileSubmissionState.VALIDATION_ERROR]
-    : // @ts-expect-error key in
-      dataGetSubmissionLatest.state in fileSubmissionValidationStatus
-      ? // @ts-expect-error use key
-        fileSubmissionValidationStatus[dataGetSubmissionLatest.state]
-      : '';
+  const validationStatusMessage: string =
+    hasWarnings &&
+    dataGetSubmissionLatest.state === FileSubmissionState.SUBMISSION_ACCEPTED
+      ? 'Your file contains no errors and warnings have been verified'
+      : // @ts-expect-error key in
+        dataGetSubmissionLatest.state in fileSubmissionValidationStatus
+        ? // @ts-expect-error use key
+          fileSubmissionValidationStatus[dataGetSubmissionLatest.state]
+        : '';
 
   return (
     <div id='file-details-validation'>

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

@@ -1,14 +1,18 @@
 import AlertApiUnavailable from 'components/AlertApiUnavailable';
 import { Link } from 'components/Link';
-import { Alert } from 'design-system-react';
+import { Alert, Paragraph } from 'design-system-react';
 import { FileSubmissionState } from 'types/filingTypes';
 import { fileFormatLink, sblHelpMail } from 'utils/common';
 
+const uploadErrorSubheading = 'There was a problem uploading your file';
+const validationErrorSubheading =
+  'There was a problem performing validation checks on your file';
+
 function SuccessAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='File successfully uploaded and validation check completed'
+      message='Your file was successfully uploaded and validation checks were performed'
       status='success'
     />
   );
@@ -18,26 +22,49 @@ export function ValidationInitialFetchFailAlert(): JSX.Element {
   return <AlertApiUnavailable message='The filing service is unavailable' />;
 }
 
-function ValidationErrorGeneralAlert(): JSX.Element {
+export function UploadErrorGeneralAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={uploadErrorSubheading}
       status='error'
-    />
+    >
+      <Paragraph>
+        An unknown error occurred during file upload. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
+    </Alert>
+  );
+}
+
+export function ValidationErrorGeneralAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      message={validationErrorSubheading}
+      status='error'
+    >
+      <Paragraph>
+        An unknown error occurred while performing validation checks on your
+        file. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
+    </Alert>
   );
 }
 
 function ValidationErrorTimeoutAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={validationErrorSubheading}
       status='error'
     >
-      Our system was not able to process your file within the allotted
-      timeframe. Try re-uploading the file. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.{' '}
+      <Paragraph>
+        Our system was not able to process your file within the allotted
+        timeframe. Try re-uploading the file. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -46,12 +73,14 @@ export function UploadMaxSizeAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem uploading your file'
+      message={uploadErrorSubheading}
       status='error'
     >
-      The file you tried to upload exceeds the file size requirement or contains
-      no data. Check your file and try again. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        The file you tried to upload exceeds the file size requirement or
+        contains no data. Check your file and try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -60,12 +89,14 @@ export function IncorrectFileTypeAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem uploading your file'
+      message={uploadErrorSubheading}
       status='error'
     >
-      The file you uploaded is an unsupported media type. Check your file and
-      try again. If this issue persists,{' '}
-      <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        The file you uploaded is an unsupported media type. Check your file and
+        try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   );
 }
@@ -80,23 +111,27 @@ export const fileSubmissionStateAlert: Record<
   JSX.Element
 > = {
   [FileSubmissionState.VALIDATION_SUCCESSFUL]: <SuccessAlert />,
+  [FileSubmissionState.SUBMISSION_ACCEPTED]: <SuccessAlert />,
   [FileSubmissionState.VALIDATION_WITH_WARNINGS]: <SuccessAlert />,
   [FileSubmissionState.VALIDATION_WITH_ERRORS]: <SuccessAlert />,
   [FileSubmissionState.UPLOAD_FAILED]: (
-    <AlertApiUnavailable message='There was a problem uploading your file' />
+    <AlertApiUnavailable message={uploadErrorSubheading} />
   ),
   [FileSubmissionState.VALIDATION_ERROR]: <ValidationErrorGeneralAlert />,
   [FileSubmissionState.VALIDATION_EXPIRED]: <ValidationErrorTimeoutAlert />,
   [FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED]: (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='There was a problem validating your file'
+      message={validationErrorSubheading}
       status='error'
     >
-      There may be an issue with the formatting of your file. Make sure your
-      file meets the <Link href={fileFormatLink}>requirements</Link> detailed in
-      section 2.2 of the Filing instructions guide and try again. If this issue
-      persists, <Link href={sblHelpMail}>email our support staff</Link>.
+      <Paragraph>
+        There may be an issue with the formatting of your file. Make sure your
+        file meets the requirements detailed in the filing instructions guide (
+        <Link href={fileFormatLink}>section 2.2, &quot;File format&quot;</Link>)
+        and try again. If this issue persists,{' '}
+        <Link href={sblHelpMail}>email our support staff</Link>.
+      </Paragraph>
     </Alert>
   ),
 };
@@ -105,22 +140,21 @@ export const fileSubmissionValidationStatus: Record<
   Exclude<
     FileSubmissionState,
     | FileSubmissionState.SUBMISSION_STARTED
+    | FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED
     | FileSubmissionState.SUBMISSION_UPLOADED
     | FileSubmissionState.UPLOAD_FAILED
+    | FileSubmissionState.VALIDATION_ERROR
+    | FileSubmissionState.VALIDATION_EXPIRED
     | FileSubmissionState.VALIDATION_IN_PROGRESS
   >,
   string
 > = {
   [FileSubmissionState.VALIDATION_SUCCESSFUL]:
-    'No errors or warnings were found in your file',
+    'The validation checks returned no errors or warnings',
+  [FileSubmissionState.SUBMISSION_ACCEPTED]:
+    'The validation checks returned no errors or warnings',
   [FileSubmissionState.VALIDATION_WITH_WARNINGS]:
-    'Warnings were found in your file',
+    'The validation checks returned warnings',
   [FileSubmissionState.VALIDATION_WITH_ERRORS]:
-    'Errors were found in your file',
-  [FileSubmissionState.SUBMISSION_UPLOAD_MALFORMED]:
-    'There may be an issue with the formatting of your file',
-  [FileSubmissionState.VALIDATION_ERROR]:
-    'There may be an issue with the validation of your file',
-  [FileSubmissionState.VALIDATION_EXPIRED]:
-    'There may be an issue with the validation of your file',
+    'The validation checks returned errors',
 };