[Design Review] [Resolve Errors] [Review Warnings]

src/index.css

@@ -51,4 +51,9 @@ td:last-child{
 
 /* td {
   word-break: break-all;
-} */
+} */
+
+/* Gets rids of the every other Table Row being a different color */
+td {
+  background-color: transparent !important;
+}

src/pages/Filing/FilingApp/FieldEntry.tsx

@@ -55,7 +55,7 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
       ],
       [],
     );
-    return [object.record_no, object.uid, ...fieldValues];
+    return [object.record_no + One, object.uid, ...fieldValues];
   });
 
   const totalItems = rows.length;
@@ -94,7 +94,12 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
     <div className='mb-[2.8125rem]'>
       <div className='validation-info-section mb-[1.875rem] max-w-[41.875rem]'>
         <Link target='_blank' href={validationLink}>
-          <Heading type='3'>{validationId}</Heading>
+          <Heading
+            className='inline-block border-x-0 border-b-[1px] border-t-0 border-dotted hover:border-solid focus:border-solid focus:outline-dotted focus:outline-1'
+            type='3'
+          >
+            {validationId}
+          </Heading>
         </Link>
         <Heading type='4'>{validationName}</Heading>
         <Markdown>{validationDescription}</Markdown>
@@ -111,13 +116,9 @@ function FieldEntry({ fieldObject }: FieldEntryProperties): JSX.Element {
         {/* NOTE: Table used to create space */}
         {isHiddenTableAdded ? (
           <Table
-            className='invisible w-full max-w-full table-auto [&_thead]:hidden'
+            className='w-full max-w-full table-auto border-separate !border-t-0 outline-none [&>tbody>tr:not(:last-child)]:border-b-transparent [&_thead]:hidden [&_tr]:invisible'
             aria-hidden='true'
-            columns={[
-              'Row',
-              'Unique identifier (uid)',
-              ...additionalColumnHeaders,
-            ]}
+            columns={columns}
             // @ts-expect-error TypeScript error needs to be resolved within DSR
             rows={previousItemsToShow}
             isScrollableHorizontal

src/pages/Filing/FilingApp/FileSubmission.tsx

@@ -11,7 +11,7 @@ import InlineStatus from 'components/InlineStatus';
 import Input from 'components/Input';
 import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
-import { Heading, TextIntroduction } from 'design-system-react';
+import { Heading, Paragraph, TextIntroduction } from 'design-system-react';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
@@ -192,15 +192,15 @@ export function FileSubmission(): JSX.Element {
             heading='Upload file'
             subheading={`Our system performs error and warning validation checks on your data to ensure that data entries are correct and ready to submit. Each record must pass all error validations to continue with the filing process. Warning validations must be verified for accuracy. `}
             description={
-              <>
+              <Paragraph>
                 Your file must be submitted in a comma-separated values (CSV)
                 file format and must not exceed 2GB in size. For detailed filing
                 specifications reference the{' '}
                 <Link href={filingInstructionsPage}>
                   Filing instructions guide for small business lending data
                 </Link>
                 .
-              </>
+              </Paragraph>
             }
           />
         </FormHeaderWrapper>

src/pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts.tsx

@@ -1,7 +1,7 @@
 import { Link } from 'components/Link';
 import { Alert } from 'design-system-react';
 import { ValidationInitialFetchFailAlert } from 'pages/Filing/FilingApp/FileSubmission.data';
-import { dataValidationLink, sblHelpMail } from 'utils/common';
+import { dataValidationLink } from 'utils/common';
 
 function SuccessAlert({ isStep2 }: { isStep2: boolean }): JSX.Element {
   return (
@@ -15,24 +15,46 @@ function SuccessAlert({ isStep2 }: { isStep2: boolean }): JSX.Element {
   );
 }
 
-function ErrorsAlert(): JSX.Element {
+function SyntaxErrorsAlert(): JSX.Element {
   return (
     <Alert
       className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
-      message='Errors were found in your register'
+      message='Your register contains syntax errors'
       status='error'
     >
       There may be an issue with the data type or format of one or more values
       in your file. Make sure your register meets the requirements detailed in
       the filing instructions guide (
-      <Link target='_blank' href={dataValidationLink}>
+      <Link
+        className='border-b-[1px] border-dotted'
+        target='_blank'
+        href={dataValidationLink}
+      >
         section 4, &quot;Data validation&quot;
       </Link>
-      ) and try again. If this issue persists,{' '}
-      <Link target='_blank' href={sblHelpMail}>
-        email our support staff
+      ), make the corrections, and upload a new file.
+    </Alert>
+  );
+}
+
+function LogicErrorsAlert(): JSX.Element {
+  return (
+    <Alert
+      className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+      message='Your register contains logic errors'
+      status='error'
+    >
+      There may be missing data, incorrect data, or conflicting information in
+      your file. Make sure your register meets the requirements detailed in the
+      filing instructions guide (
+      <Link
+        className='border-b-[1px] border-dotted'
+        target='_blank'
+        href={dataValidationLink}
+      >
+        section 4, &quot;Data validation&quot;
       </Link>
-      .
+      ), make the corrections, and upload a new file.
     </Alert>
   );
 }
@@ -50,8 +72,10 @@ function FilingErrorsAlerts({
 }: FilingErrorsAlertsProperties): JSX.Element {
   return errorGetSubmissionLatest ? (
     <ValidationInitialFetchFailAlert />
-  ) : errorState ? (
-    <ErrorsAlert />
+  ) : errorState && isStep2 ? (
+    <LogicErrorsAlert />
+  ) : errorState && !isStep2 ? (
+    <SyntaxErrorsAlert />
   ) : (
     <SuccessAlert isStep2={isStep2} />
   );

src/pages/Filing/FilingApp/FilingErrors/index.tsx

@@ -3,7 +3,12 @@ import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
-import { TextIntroduction } from 'design-system-react';
+import {
+  Alert,
+  AlertFieldLevel,
+  Paragraph,
+  TextIntroduction,
+} from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
 import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts';
@@ -106,29 +111,41 @@ function FilingErrors(): JSX.Element {
             subheading={
               isStep2 ? (
                 <>
-                  Next, our system checks your register to confirm that there
-                  are no inconsistencies or mistakes in how the information is
-                  organized or represented. Your register must pass these logic
-                  checks to continue to the next step.
+                  Your register successfully passed syntax checks. If
+                  applicable, review and correct errors related to inconsistent
+                  or inaccurate values in your register. Your register must pass
+                  these logic checks to continue to the next step.
                 </>
               ) : (
                 <>
-                  First, our system checks that each value in your register
-                  meets data type and format requirements. We are unable to
-                  accurately detect consequent errors or warnings until each
-                  record in your register passes these syntax checks.
+                  Your register was successfully uploaded and validation checks
+                  were performed. If applicable, review and correct errors
+                  related to data type and format. We are unable to detect
+                  errors or warnings related to logic until your register passes
+                  these syntax checks.
                 </>
               )
             }
             description={
               <>
-                If applicable, review the tables below or download the
-                validation report to identify the specific issues that caused
-                the validation to fail. Once you’ve identified the underlying
-                problems, make the corrections to your register, and upload a
-                new file.
-                {!errorGetSubmissionLatest &&
-                actualDataGetSubmissionLatest?.id ? (
+                {isStep2 ? (
+                  <Paragraph>
+                    If logic errors were found, review the tables below or
+                    download the validation report to identify the specific
+                    issues that caused the validations to fail. Once you’ve
+                    identified the underlying problems, make the corrections to
+                    your register, and upload a new file.
+                  </Paragraph>
+                ) : (
+                  <Paragraph>
+                    If syntax errors were found, review the tables below or
+                    download the validation report to identify the specific
+                    issues that caused the validations to fail. Once you’ve
+                    identified the underlying problems, make the corrections to
+                    your register, and upload a new file.
+                  </Paragraph>
+                )}
+                {errorState && actualDataGetSubmissionLatest?.id ? (
                   <FilingFieldLinks
                     id='resolve-errors-listlinks'
                     lei={lei}
@@ -158,9 +175,9 @@ function FilingErrors(): JSX.Element {
                 fieldArray={singleFieldErrorsUsed}
                 bottomMargin={!!isStep2}
               >
-                Each single-field error pertains to only one specific field in
-                each record. These error validations check that the data held in
-                an individual field match the values that are expected.
+                Each single-field validation pertains to only one specific field
+                in each record. These validations check that the data held in an
+                individual field match the values that are expected.
               </FieldSummary>
             ) : null}
             {isStep2 && errorState ? (
@@ -172,7 +189,7 @@ function FilingErrors(): JSX.Element {
                   fieldArray={logicErrorsMulti}
                   bottomMargin
                 >
-                  Multi-field error validations check that the values of certain
+                  Multi-field validations check that the values of certain
                   fields make sense in combination with other values in the same
                   record.
                 </FieldSummary>
@@ -223,6 +240,23 @@ function FilingErrors(): JSX.Element {
             ) : null}
           </>
         )}
+        {errorState ? (
+          <>
+            <AlertFieldLevel
+              message={`You must resolve ${
+                isStep2 ? 'logic errors' : 'syntax errors'
+              } to continue with the filing process`}
+              status='error'
+            />
+            <Alert
+              className='mb-[2.8125rem] [&_div]:max-w-[41.875rem] [&_p]:max-w-[41.875rem]'
+              message={`You must resolve ${
+                isStep2 ? 'logic errors' : 'syntax errors'
+              } to continue with the filing process`}
+              status='error'
+            />
+          </>
+        ) : null}
       </FormWrapper>
     </div>
   );

src/pages/Filing/FilingApp/FilingFieldLinks.tsx

@@ -26,11 +26,9 @@ function FilingFieldLinks({
   };
   return (
     <div id={id} className={`mt-[1.875rem] ${className}`} {...others}>
-      <List isLinks>
+      <List className='flex items-center gap-[0.9375rem]' isLinks>
         <Button
-          asLink
-          className='m-list_link mb-2'
-          label='Download validation report'
+          label='Download report'
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={onHandleDownloadClick}
         />

src/pages/Filing/FilingApp/FilingWarnings/FilingWarningsAlerts.tsx

@@ -21,13 +21,17 @@ function WarningsAlert(): JSX.Element {
       message='Warnings were found in your register'
       status='warning'
     >
-      There were unexpected values in your file that may require action. Review
-      these warnings and make sure your register meets the requirements detailed
-      in the filing instructions guide (
-      <Link target='_blank' href={dataValidationLink}>
+      Unexpected values were found in your register that may require action.
+      Make sure your register meets the requirements detailed in the filing
+      instructions guide (
+      <Link
+        className='border-b-[1px] border-dotted'
+        target='_blank'
+        href={dataValidationLink}
+      >
         section 4, &quot;Data validation&quot;
       </Link>
-      ). If necessary, make the corrections and re-upload your file.
+      ). If necessary, make the corrections, and upload a new file.
     </Alert>
   );
 }

src/pages/Filing/FilingApp/FilingWarnings/index.tsx

@@ -2,17 +2,19 @@ import submitWarningsAccept from 'api/requests/submitWarningsVerified';
 import useSblAuth from 'api/useSblAuth';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormWrapper from 'components/FormWrapper';
+import { Link } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
 import {
   Alert,
   Button,
   Checkbox,
   Heading,
+  Paragraph,
   TextIntroduction,
   WellContainer,
 } from 'design-system-react';
 import { useMemo, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import type { SubmissionResponse } from 'types/filingTypes';
 import { FileSubmissionState } from 'types/filingTypes';
 import { sblHelpMail } from 'utils/common';
@@ -122,14 +124,14 @@ function FilingWarnings(): JSX.Element {
         </div>
         <TextIntroduction
           heading='Review warnings'
-          subheading='Warning validations check for unexpected values that could indicate a mistake in your register. You must verify the accuracy of all register values flagged by warning validations to continue to the next step.'
+          subheading='Warning validations check for unexpected values that could indicate a mistake in your register. If applicable, review and verify the accuracy of all register values flagged by warning validations to continue to the next step.'
           description={
-            <>
-              If applicable, review the tables below or download the validation
-              report to determine if the values flagged with warning validations
-              require action. If there are underlying problems, make the
-              corrections, and upload a new file.
-              {!errorSubmissionFetch &&
+            <Paragraph>
+              If warnings were found, review the tables below or download the
+              validation report to determine if the values flagged with warning
+              validations require action. If there are underlying problems, make
+              the corrections to your register, and upload a new file.
+              {hasWarnings &&
               // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition, @typescript-eslint/prefer-optional-chain
               submission?.id ? (
                 <FilingFieldLinks
@@ -139,7 +141,7 @@ function FilingWarnings(): JSX.Element {
                   submissionId={submission.id}
                 />
               ) : null}
-            </>
+            </Paragraph>
           }
         />
         <InstitutionFetchFailAlert isVisible={Boolean(errorInstitutionFetch)} />
@@ -158,7 +160,7 @@ function FilingWarnings(): JSX.Element {
               fieldArray={logicWarningsSingle}
               bottomMargin
             >
-              Each single-field validation pertains to only one specific field
+              Each single-field validation pertains to only one specific field
               in each record. These validations check that the data held in an
               individual field match the values that are expected.
             </FieldSummary>
@@ -175,10 +177,10 @@ function FilingWarnings(): JSX.Element {
             </FieldSummary>
 
             <WellContainer className='u-mt30'>
-              <Heading type='3'>Verify all warnings to continue</Heading>
+              <Heading type='3'>Verify flagged register values</Heading>
               <Checkbox
                 id='verify-warnings'
-                label='All data are accurate, no corrections required. I have verified the accuracy of all data fields referenced by the warning validations.'
+                label='In order to continue you must correct or verify the accuracy of register values flagged by warning validations.'
                 onChange={onClickCheckbox}
                 checked={isVerified}
                 disabled={formSubmitLoading || isSubmissionAccepted(submission)}
@@ -196,7 +198,10 @@ function FilingWarnings(): JSX.Element {
           There was an issue saving your Submission verification. Please click
           the &quot;Save and continue&quot; button to try again. If this issue
           persists,
-          <Link href={sblHelpMail}>contact our support staff</Link>.
+          <Link className='border-b-[1px] border-dotted' href={sblHelpMail}>
+            contact our support staff
+          </Link>
+          .
         </Alert>
 
         <FormButtonGroup isFilingStep>