[Sign and submit] Update Beta design and content (#490)

Close #476 ## Changes - Disables all checkboxes - Disables `Submit` button - Removes `Clear form` button - Adds top/bottom alerts - Updates section headings and descriptions ## Screenshots - Updated May 14, 12:35am ET ![screencapture-localhost-8899-filing-2024-123456TESTBANKSUB456-submit-2024-05-14-10_37_11](https://github.com/cfpb/sbl-frontend/assets/2592907/d86e4075-9f89-45ea-8b59-1da8988b38e6)
cfpb · May 15, 2024 · 2e398a6 · 2e398a6
1 parent 1bcc852
commit 2e398a6
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 62 deletions.
diff --git a/src/components/CommonLinks.tsx b/src/components/CommonLinks.tsx
@@ -1,6 +1,7 @@
 import { Link } from 'components/Link';
+import { Button } from 'design-system-react';
 import type { ReactElement } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 function GLIEF(): ReactElement {
   return <Link href='https://www.gleif.org/'>GLEIF</Link>;
@@ -12,25 +13,86 @@ function NIC(): ReactElement {
 
 interface UpdateInstitutionProfileProperties {
   isCallToAction?: boolean;
+  // eslint-disable-next-line react/require-default-props
+  className?: string;
 }
 
 function UpdateInstitutionProfile({
   isCallToAction,
+  className = 'font-normal',
 }: UpdateInstitutionProfileProperties): ReactElement {
   const { lei } = useParams();
+  const navigate = useNavigate();
+  const onClick = (): void => navigate(`/institution/${lei}/update`);
+
   return (
-    <Link href={`/institution/${lei}/update`}>
-      {isCallToAction
-        ? 'Update your financial institution profile'
-        : 'update financial institution profile'}
-    </Link>
+    <Button
+      asLink
+      className={className}
+      onClick={onClick}
+      label={
+        isCallToAction
+          ? 'Update your financial institution profile'
+          : 'update financial institution profile'
+      }
+    />
   );
 }
 
 UpdateInstitutionProfile.defaultProps = { isCallToAction: false };
 
+interface UpdatePointOfContactProperties {
+  // eslint-disable-next-line react/require-default-props
+  label?: string;
+  // eslint-disable-next-line react/require-default-props, react/no-unused-prop-types
+  className?: string;
+}
+
+function UpdatePointOfContact({
+  label = 'update your point of contact information',
+  className = 'font-normal',
+}: UpdatePointOfContactProperties): ReactElement {
+  const { lei, year } = useParams();
+  const navigate = useNavigate();
+
+  const onClick = (): void => navigate(`/filing/${year}/${lei}/contact`);
+  return (
+    <Button className={className} asLink onClick={onClick} label={label} />
+  );
+}
+
+function UploadANewFile({
+  label = 'upload a new file',
+  className = 'font-normal',
+}: UpdatePointOfContactProperties): ReactElement {
+  const { lei, year } = useParams();
+  const navigate = useNavigate();
+
+  const onClick = (): void => navigate(`/filing/${year}/${lei}/upload`);
+  return (
+    <Button className={className} asLink onClick={onClick} label={label} />
+  );
+}
+
+const FigSectionUrls: Record<string, string> = {
+  '§ 1002.109(a)(1)(ii)':
+    '2023/05/31/2023-07230/small-business-lending-under-the-equal-credit-opportunity-act-regulation-b#p-4302',
+  '§ 1002.109(b)(10)':
+    '2023/05/31/2023-07230/small-business-lending-under-the-equal-credit-opportunity-act-regulation-b#p-4322',
+};
+
+function FIG({ section }: { section: string }): React.ReactNode {
+  const baseUrl = 'https://www.federalregister.gov/documents/';
+  const sectionUrl = FigSectionUrls[section];
+  if (!sectionUrl) return section;
+  return <Link href={baseUrl + sectionUrl}>{section}</Link>;
+}
+
 export default {
+  FIG,
   GLIEF,
   NIC,
   UpdateInstitutionProfile,
+  UpdatePointOfContact,
+  UploadANewFile,
 };
diff --git a/src/pages/Filing/FilingApp/FilingSubmit.helpers.tsx b/src/pages/Filing/FilingApp/FilingSubmit.helpers.tsx
@@ -1,27 +1,38 @@
+import Links from 'components/CommonLinks';
 import FormSectionWrapper from 'components/FormSectionWrapper';
-import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
 import { Checkbox, WellContainer } from 'design-system-react';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import type { FilingType, SubmissionResponse } from 'types/filingTypes';
 import { formatDateTimeShort } from 'utils/formatDateTime';
 import AddressStreetOptional from '../ViewInstitutionProfile/AddressStreetOptional';
 import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
 
+const pocDefaultDescription = (
+  <>
+    If the information in this section is incorrect{' '}
+    <Links.UpdatePointOfContact />. Otherwise, check the box to confirm that the
+    information is accurate and complete.
+  </>
+);
+
 export function PointOfContactConfirm({
   data,
+  heading = 'Confirm your filing point of contact',
+  description = pocDefaultDescription,
 }: {
   data: FilingType;
+  // eslint-disable-next-line react/require-default-props
+  heading?: string;
+  // eslint-disable-next-line react/require-default-props
+  description?: ReactNode;
 }): JSX.Element {
   const poc = data.contact_info;
 
   return (
     <FormSectionWrapper>
-      <SectionIntro heading='Confirm your filing point of contact'>
-        To make a change to your financial institution point of contact for this
-        filing return to Provide point of contact.
-      </SectionIntro>
+      <SectionIntro heading={heading}>{description}</SectionIntro>
 
       <WellContainer className='u-mt30'>
         <DisplayField label='First name' value={poc?.first_name} />
@@ -47,12 +58,26 @@ export function PointOfContactConfirm({
   );
 }
 
+const fileInfoDefaultDescription = (
+  <>
+    If the information in this section is incorrect <Links.UploadANewFile /> and
+    repeat the validation process. Otherwise, check the box to confirm that the
+    information is accurate and complete.
+  </>
+);
+
 export function FileInformation({
   data,
+  heading = 'Confirm your register information',
+  description = fileInfoDefaultDescription,
 }: {
   data: SubmissionResponse;
+  // eslint-disable-next-line react/require-default-props
+  heading?: string;
+  // eslint-disable-next-line react/require-default-props
+  description?: ReactNode;
 }): JSX.Element {
-  const { year, lei } = useParams();
+  const { year } = useParams();
 
   const warningCount = data.validation_results?.logic_warnings.count as number;
 
@@ -62,10 +87,7 @@ export function FileInformation({
 
   return (
     <FormSectionWrapper>
-      <SectionIntro heading='Confirm your register information'>
-        To make a change to your official file return to{' '}
-        <Link href={`/filing/${year}/${lei}/upload`}>Upload file.</Link>
-      </SectionIntro>
+      <SectionIntro heading={heading}>{description}</SectionIntro>
 
       <WellContainer className='u-mt30'>
         <DisplayField label='Filing year' value={year} />
@@ -91,6 +113,35 @@ export function FileInformation({
   );
 }
 
+export function VoluntaryReportingStatus({
+  onChange,
+  value,
+}: {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  value: boolean;
+}): JSX.Element {
+  return (
+    <FormSectionWrapper className='u-mt45'>
+      <SectionIntro heading='Indicate voluntary reporting status'>
+        Pursuant to <Links.FIG section='§ 1002.109(b)(10)' />, indicate whether
+        your financial institution is voluntarily reporting covered applications
+        from small businesses. Leave the box unchecked if you are not a
+        voluntary reporter.
+      </SectionIntro>
+
+      <WellContainer className='u-mt30'>
+        <Checkbox
+          id='voluntary-reporting-status'
+          label='My financial institution is voluntarily reporting covered applications from small businesses, and I am not required to file.'
+          checked={value}
+          onChange={onChange}
+          disabled
+        />
+      </WellContainer>
+    </FormSectionWrapper>
+  );
+}
+
 export function SignCertify({
   name,
   onChange,
@@ -102,18 +153,23 @@ export function SignCertify({
 }): JSX.Element {
   return (
     <FormSectionWrapper>
-      <SectionIntro heading='Sign and certify'>
-        To complete your official regulatory submission, select the checkbox
-        below to certify the accuracy and completeness of the data submitted,
-        then, click the “Submit filing” button.
+      <SectionIntro heading='Sign and certify your filing'>
+        <p>
+          An authorized representative of your financial institution with
+          knowledge of the data must certify the accuracy and completeness of
+          the data reported pursuant to{' '}
+          <Links.FIG section='§ 1002.109(a)(1)(ii)' />. To complete your
+          official regulatory submission, check the box and submit your filing.
+        </p>
       </SectionIntro>
 
       <WellContainer className='u-mt30'>
         <Checkbox
           id='sign-and-certify'
-          label={`I, ${name}, am an authorized representative of my institution with knowledge of the data submitted and I am certifying the accuracy and completeness of the data submitted.`}
+          label={`I, ${name}, am an authorized representative of my institution with knowledge of the data submitted certify the accuracy and completeness of the data submitted.`}
           checked={value}
           onChange={onChange}
+          disabled
         />
       </WellContainer>
     </FormSectionWrapper>