merged with main

src/App.tsx

@@ -55,6 +55,9 @@ const PointOfContact = lazy(async () => import('pages/PointOfContact'));
 const TypesFinancialInstitutions = lazy(
   async () => import('pages/TypesFinancialInstitutions'),
 );
+const FilingCreate = lazy(
+  async () => import('pages/Filing/FilingApp/FilingCreate'),
+);
 
 // allow developers to toggle routing in development
 const isRoutingEnabled = getIsRoutingEnabled();
@@ -200,6 +203,14 @@ export default function App(): ReactElement {
                 }
               />
             ) : null}
+            <Route
+              path='/filing/:year/:lei/create'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <FilingCreate />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path='/filing/:year/:lei/upload'
               element={
@@ -313,7 +324,15 @@ export default function App(): ReactElement {
               }
             />
             <Route
-              path='/types-financial-institutions'
+              path='/institution/:lei/type'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <TypesFinancialInstitutions />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path='/institution/:lei/type/:year'
               element={
                 <ProtectedRoute {...ProtectedRouteAuthorizations}>
                   <TypesFinancialInstitutions />

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,
 };

src/pages/Filing/FilingApp/FilingCreate.tsx

@@ -0,0 +1,50 @@
+import AlertApiUnavailable from 'components/AlertApiUnavailable';
+import { LoadingContent } from 'components/Loading';
+import { Button } from 'design-system-react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { FILING_STATUS_CODE_FILING_EXISTS } from 'utils/constants';
+import useCreateFiling from 'utils/useCreateFiling';
+
+export function FilingCreate(): JSX.Element | null | undefined {
+  const { lei, year } = useParams();
+  const navigate = useNavigate();
+
+  const { isLoading, error, data: filing } = useCreateFiling(lei, year);
+
+  /** Missing required param, cannot continue */
+  if (!lei || !year) {
+    navigate('/filing');
+    return null;
+  }
+
+  if (isLoading) return <LoadingContent message='Loading filing data...' />;
+
+  /** Filing exists */
+  if (
+    filing ??
+    Number(error?.response?.status) === FILING_STATUS_CODE_FILING_EXISTS
+  ) {
+    // Note: React was complaining about setState during render. This setTimeout seems to resolve the issue.
+    setTimeout(() => navigate(`/filing/${year}/${lei}/upload`), 0);
+    return <LoadingContent message='Loading filing data...' />;
+  }
+
+  const onReturnToFiling = (): void => navigate('/filing');
+
+  if (error)
+    return (
+      <div className='u-mt45 u-mb45 mx-3'>
+        <AlertApiUnavailable
+          message={`Unable to create a ${year} Filing for ${lei}`}
+        />
+        <div>
+          <Button
+            label='Return to Filing overview'
+            onClick={onReturnToFiling}
+          />
+        </div>
+      </div>
+    );
+}
+
+export default FilingCreate;

src/pages/Filing/FilingApp/FilingSubmit.helpers.tsx

@@ -1,43 +1,55 @@
+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} />
         <DisplayField label='Last name' value={poc?.last_name} />
         <DisplayField label='Email address' value={poc?.email} />
-        <DisplayField label='Phone number' value={poc?.phone} />
+        <DisplayField label='Phone number' value={poc?.phone_number} />
         <DisplayField
           label='Business address'
           value={
             poc ? (
               <>
-                {poc.hq_address_street_1}
-                {poc.hq_address_street_1 ? <br /> : null}
+                <AddressStreetOptional street={poc.hq_address_street_1} />
                 <AddressStreetOptional street={poc.hq_address_street_2} />
+                <AddressStreetOptional street={poc.hq_address_street_3} />
+                <AddressStreetOptional street={poc.hq_address_street_4} />
                 {poc.hq_address_city ? <>{poc.hq_address_city},&nbsp;</> : null}
-                {poc.hq_address_state_code} {poc.hq_address_zip}
+                {poc.hq_address_state} {poc.hq_address_zip}
               </>
             ) : null
           }
@@ -47,12 +59,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 +88,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 +114,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 +154,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>