From 48949ca63cd154c7b91fd1761e6f0d8cc92c2f61 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 8 Feb 2024 12:46:17 -0700
Subject: [PATCH 01/54] fix: [CrumbTrail] Allow conditional entries

---
 src/components/CrumbTrail.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/CrumbTrail.tsx b/src/components/CrumbTrail.tsx
index 0e4a2ce86..da8f0497f 100644
--- a/src/components/CrumbTrail.tsx
+++ b/src/components/CrumbTrail.tsx
@@ -26,6 +26,8 @@ function CrumbTrail({ children }: CrumbTrailProperties): JSX.Element | null {
         items.length > 0 ? 'ml-[10px]' : null,
       );
 
+      if (!child) return;
+
       items.push(
         <span key={separatorKeys[current]} className={separatorStyle}>
           /

From 240aff4b8896bf1c8d9290783591a818486e50a8 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 8 Feb 2024 12:58:52 -0700
Subject: [PATCH 02/54] fix: [UpdateInstitutionProfile] - [Add] Fetch
 Institution data - [Add] Breadcrumb to return to View page

---
 .../Filing/UpdateFinancialProfile/index.tsx   | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 09b44603a..2a39104da 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -1,20 +1,29 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { submitUpdateFinancialProfile } from 'api/requests';
+import {
+  submitUpdateFinancialProfile,
+  fetchInstitutionDetails,
+} from 'api/requests';
+import { useQuery } from '@tanstack/react-query';
 import useSblAuth from 'api/useSblAuth';
+import CrumbTrail from 'components/CrumbTrail';
 import FieldGroup from 'components/FieldGroup';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormErrorHeader from 'components/FormErrorHeader';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import InputEntry from 'components/InputEntry';
+import { LoadingContent } from 'components/Loading';
 import SectionIntro from 'components/SectionIntro';
 import {
   Button,
   Checkbox,
+  Link,
   List,
   ListItem,
   TextIntroduction,
 } from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import { useError500 } from 'pages/Error/Error500';
 import type {
   CheckboxOption,
   UFPSchema,
@@ -27,6 +36,7 @@ import {
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 
 import { Controller as FormController, useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -41,8 +51,15 @@ const defaultValues: UFPSchema = {
 
 // TODO: Decide on properties to use
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function UpdateFinancialProfile(properties: Properties): JSX.Element {
+function UpdateFinancialProfile(properties: Properties): JSXElement {
   const auth = useSblAuth();
+  const { lei } = useParams();
+  const redirect500 = useError500();
+
+  const { isLoading, isError, data } = useQuery(
+    [`institution-details-${lei}`],
+    async () => fetchInstitutionDetails(auth, lei),
+  );
 
   const {
     register,
@@ -58,6 +75,14 @@ function UpdateFinancialProfile(properties: Properties): JSX.Element {
 
   // Used for error scrolling
   const formErrorHeaderId = 'UFPFormErrorHeader';
+  if (isLoading) return <LoadingContent />;
+  if (isError)
+    return redirect500({
+      message: 'Unable to fetch institution details.',
+    });
+
+  // TODO: use data
+  console.log('Institution data:', data);
 
   // NOTE: This function is used for submitting the multipart/formData
   const onSubmitButtonAction = async (): Promise<void> => {
@@ -94,6 +119,16 @@ function UpdateFinancialProfile(properties: Properties): JSX.Element {
     <FormWrapper>
       <div id='update-financial-profile'>
         <FormHeaderWrapper>
+          <CrumbTrail>
+            <Link href='/landing' key='home'>
+              Platform home
+            </Link>
+            {lei ? (
+              <Link href={`/institution/${lei}`} key='view-instition'>
+                View Institution
+              </Link>
+            ) : null}
+          </CrumbTrail>
           <TextIntroduction
             heading='Update your financial institution profile'
             subheading='This profile reflects the most current data available to the CFPB for your financial institution. Most updates to your financial institution profile details must be handled at the source (GLEIF or NIC). For  all other update requests, fill out the form below.'

From adf4a1806b4e3fb235d05ff300def59e00148377 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 8 Feb 2024 13:14:53 -0700
Subject: [PATCH 03/54] fix: [UpdateInstitutionProfile] - [Add] Review FI
 details

---
 src/pages/Filing/UpdateFinancialProfile/index.tsx   | 13 +++++--------
 .../FinancialInstitutionDetails.tsx                 | 12 ++++++++++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 2a39104da..eeb44cff2 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -37,6 +37,7 @@ import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 
 import { Controller as FormController, useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
+import FinancialInstitutionDetails from '../ViewInstitutionProfile/FinancialInstitutionDetails';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -81,9 +82,6 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
       message: 'Unable to fetch institution details.',
     });
 
-  // TODO: use data
-  console.log('Institution data:', data);
-
   // NOTE: This function is used for submitting the multipart/formData
   const onSubmitButtonAction = async (): Promise<void> => {
     const passesValidation = await trigger();
@@ -141,11 +139,10 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
           />
         </FormHeaderWrapper>
         <FormErrorHeader errors={formErrors} id='UFPFormErrorHeader' />
-        <SectionIntro heading='Review your financial institution details'>
-          To update the email domains for your financial institution, contact
-          our support staff. To update any other data in this section, visit
-          GLEIF.
-        </SectionIntro>
+        <FinancialInstitutionDetails
+          heading='Review your financial institution details'
+          data={data}
+        />
 
         <form>
           <FieldGroup>
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index ffc566bdd..777d3f44e 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -20,8 +20,10 @@ const formatAddressStreet = (street: string): ReactElement | undefined => {
 
 export function FinancialInstitutionDetails({
   data,
+  heading,
 }: {
   data: InstitutionDetailsApiType;
+  heading?: ReactNode;
 }): JSX.Element {
   const domains = data.domains ?? [];
   const domainString = domains
@@ -31,7 +33,7 @@ export function FinancialInstitutionDetails({
   return (
     <>
       <Heading type='2' className='u-mt60'>
-        Financial institution details
+        {heading}
       </Heading>
       <Paragraph>
         To make a change to the email domains for your financial institution,{' '}
@@ -57,7 +59,9 @@ export function FinancialInstitutionDetails({
         <DisplayField
           label='LEI status'
           value={
-            <span className='capitalize'>{data.is_active?.toString()}</span>
+            <span className='capitalize'>
+              {data.is_active ? 'Active' : 'Inactive'}
+            </span>
           }
         />
         <DisplayField label='Email domain(s)' value={domainString} />
@@ -66,4 +70,8 @@ export function FinancialInstitutionDetails({
   );
 }
 
+FinancialInstitutionDetails.defaultProps = {
+  heading: 'Financial institution details',
+};
+
 export default FinancialInstitutionDetails;

From d0a4a628279abd7cff0c649fec6889dea40122aa Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 22 Feb 2024 12:49:41 -0700
Subject: [PATCH 04/54] feat: [UpdateFinancialProfile] Display
 FinancialInstitutionDetails

---
 .../Filing/UpdateFinancialProfile/index.tsx   | 84 ++++---------------
 .../FinancialInstitutionDetails.tsx           |  2 +-
 2 files changed, 15 insertions(+), 71 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index eeb44cff2..068b5d0f6 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -1,33 +1,20 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
 import {
-  submitUpdateFinancialProfile,
   fetchInstitutionDetails,
+  submitUpdateFinancialProfile,
 } from 'api/requests';
-import { useQuery } from '@tanstack/react-query';
 import useSblAuth from 'api/useSblAuth';
 import CrumbTrail from 'components/CrumbTrail';
-import FieldGroup from 'components/FieldGroup';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormErrorHeader from 'components/FormErrorHeader';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
-import InputEntry from 'components/InputEntry';
 import { LoadingContent } from 'components/Loading';
-import SectionIntro from 'components/SectionIntro';
-import {
-  Button,
-  Checkbox,
-  Link,
-  List,
-  ListItem,
-  TextIntroduction,
-} from 'design-system-react';
+import { Button, Link, TextIntroduction } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
-import type {
-  CheckboxOption,
-  UFPSchema,
-} from 'pages/Filing/UpdateFinancialProfile/types';
+import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import {
   checkboxOptions,
   ufpSchema,
@@ -35,9 +22,9 @@ import {
 
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 
-import { Controller as FormController, useForm } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
-import FinancialInstitutionDetails from '../ViewInstitutionProfile/FinancialInstitutionDetails';
+import { FinancialInstitutionDetails } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -63,9 +50,9 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
   );
 
   const {
-    register,
-    control,
-    setValue,
+    // register,
+    // control,
+    // setValue,
     trigger,
     getValues,
     formState: { errors: formErrors },
@@ -122,7 +109,11 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
               Platform home
             </Link>
             {lei ? (
-              <Link href={`/institution/${lei}`} key='view-instition'>
+              <Link
+                isRouterLink
+                href={`/institution/${lei}`}
+                key='view-instition'
+              >
                 View Institution
               </Link>
             ) : null}
@@ -144,53 +135,6 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
           data={data}
         />
 
-        <form>
-          <FieldGroup>
-            <List isUnstyled>
-              {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
-                const onChange = (
-                  event: React.ChangeEvent<HTMLInputElement>,
-                ): void => {
-                  setValue(`checkboxes.${option.id}`, event.target.checked);
-                };
-                return (
-                  <ListItem key={option.id}>
-                    <FormController
-                      render={({ field }) => (
-                        // @ts-expect-error TS error should be fixed in DSR Repo
-                        <Checkbox
-                          id={option.id}
-                          label={option.label}
-                          {...field}
-                          onChange={onChange}
-                          checked={Boolean(
-                            getValues(`checkboxes.${option.id}`),
-                          )}
-                        />
-                      )}
-                      control={control}
-                      name={`checkboxes.${option.id}`}
-                      // TODO: Add special rules or remove this comment
-                      // rules={{ required: 'This field is required' }}
-                    />
-                  </ListItem>
-                );
-              })}
-            </List>
-          </FieldGroup>
-          <SectionIntro heading=''>Break</SectionIntro>
-
-          <FieldGroup>
-            <InputEntry
-              label='Federal Taxpayer Identification Number (TIN)'
-              id='tin'
-              {...register('tin')}
-              errorMessage={formErrors.tin?.message}
-              showError
-            />
-          </FieldGroup>
-        </form>
-
         <FormButtonGroup>
           <Button
             appearance='primary'
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index 777d3f44e..04b8217f4 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -1,6 +1,6 @@
 import Links from 'components/CommonLinks';
 import { Heading, Link, Paragraph, WellContainer } from 'design-system-react';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { sblHelpLink } from 'utils/common';
 import { DisplayField } from './DisplayField';
 import type {

From 661ae593ae78836bf8e7b0ae3215bb2aa0c30eb9 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 22 Feb 2024 13:32:17 -0700
Subject: [PATCH 05/54] feat: [UpdateFinancialProfile] Display
 FinancialInstitutionDetails and include in submitted DTO

---
 .../FinancialInstitutionDetailsForm.tsx       | 48 +++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   | 14 +++---
 .../FinancialInstitutionDetails.tsx           | 15 +++---
 3 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx

diff --git a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
new file mode 100644
index 000000000..f11c5fee0
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import FinancialInstitutionDetails, {
+  formatDomains,
+} from '../ViewInstitutionProfile/FinancialInstitutionDetails';
+import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
+
+const fields: string[] = [
+  'name',
+  'hq_address_street_1',
+  'hq_address_street_2',
+  'hq_address_city',
+  'hq_address_state_code',
+  'hq_address_zip',
+  'lei',
+  'is_active',
+  'domains',
+];
+
+export default function FinancialInstitutionDetailsForm({
+  data,
+  register,
+}: {
+  data: InstitutionDetailsApiType;
+  register: any;
+}): JSXElement {
+  return (
+    <>
+      <FinancialInstitutionDetails
+        heading='Review your financial institution details'
+        data={data}
+      />
+      <form>
+        {fields.map(field => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const value =
+            field === 'domains' ? formatDomains(data[field]) : data[field];
+
+          return (
+            <input hidden key={field} value={value} {...register(field)} />
+          );
+        })}
+      </form>
+    </>
+  );
+}
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 068b5d0f6..a2e18eacb 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -21,10 +21,9 @@ import {
 } from 'pages/Filing/UpdateFinancialProfile/types';
 
 import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
-
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
-import { FinancialInstitutionDetails } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
+import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -50,7 +49,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
   );
 
   const {
-    // register,
+    register,
     // control,
     // setValue,
     trigger,
@@ -86,6 +85,8 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
       const response = await submitUpdateFinancialProfile(
         auth,
         preFormattedData,
+      ).catch(() =>
+        console.log('[API Error] Failed to submit UpdateFinancialProfile'),
       );
     } else {
       scrollToElement(formErrorHeaderId);
@@ -129,11 +130,8 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
             }
           />
         </FormHeaderWrapper>
-        <FormErrorHeader errors={formErrors} id='UFPFormErrorHeader' />
-        <FinancialInstitutionDetails
-          heading='Review your financial institution details'
-          data={data}
-        />
+        <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
+        <FinancialInstitutionDetailsForm {...{ data, register }} />
 
         <FormButtonGroup>
           <Button
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index 04b8217f4..ec2f43517 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -18,18 +18,16 @@ const formatAddressStreet = (street: string): ReactElement | undefined => {
   );
 };
 
-export function FinancialInstitutionDetails({
+export const formatDomains = (domains?: Domain[]): string =>
+  (domains ?? []).map((domain: Domain) => domain.domain).join(', ');
+
+function FinancialInstitutionDetails({
   data,
   heading,
 }: {
   data: InstitutionDetailsApiType;
   heading?: ReactNode;
 }): JSX.Element {
-  const domains = data.domains ?? [];
-  const domainString = domains
-    .map((domain: Domain) => domain.domain)
-    .join(', ');
-
   return (
     <>
       <Heading type='2' className='u-mt60'>
@@ -64,7 +62,10 @@ export function FinancialInstitutionDetails({
             </span>
           }
         />
-        <DisplayField label='Email domain(s)' value={domainString} />
+        <DisplayField
+          label='Email domain(s)'
+          value={formatDomains(data.domains)}
+        />
       </WellContainer>
     </>
   );

From 3b3233b42aea9122eec3c068aac45e88d918d601 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 9 Feb 2024 13:55:14 -0700
Subject: [PATCH 06/54] feat: [UpdateFinancialProfile] Display
 UpdateIdentifyingInformation and include in submitted DTO

---
 .../UpdateIdentifyingInformation.tsx          | 165 ++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   |  65 ++++---
 .../Filing/UpdateFinancialProfile/types.ts    |  69 +++++++-
 3 files changed, 259 insertions(+), 40 deletions(-)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx

diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
new file mode 100644
index 000000000..5f302e9e7
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -0,0 +1,165 @@
+// TODO: Fix all of these ANY calls/assignments
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import CommonLinks from 'components/CommonLinks';
+import FieldGroup from 'components/FieldGroup';
+import SectionIntro from 'components/SectionIntro';
+import {
+  Checkbox,
+  Heading,
+  Label,
+  List,
+  ListItem,
+  Paragraph,
+  TextInput,
+  WellContainer,
+} from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import { Controller as FormController } from 'react-hook-form';
+import InputEntry from '../../../components/InputEntry';
+import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
+import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
+import type { CheckboxOption } from './types';
+import { checkboxOptions } from './types';
+
+export function SectionWrapper({
+  children,
+}: {
+  children: JSXElement[];
+}): JSXElement {
+  return <div className='u-mt60'>{children}</div>;
+}
+
+const elements = {
+  taxID: 'tax_id',
+  rssdID: 'rssd_id',
+};
+
+function FieldFederalPrudentialRegulator({
+  data,
+  register,
+}: {
+  data: InstitutionDetailsApiType;
+  register: any; // TODO: Fix all of these "any" types for the Zod functions
+}): JSXElement {
+  return (
+    <>
+      <DisplayField
+        label='Federal prudential regulator'
+        value={`${data.primary_federal_regulator?.name} (${data.primary_federal_regulator?.id})`}
+      />
+      <input
+        hidden
+        {...register('primary_federal_regulator.name')}
+        value={data.primary_federal_regulator?.name}
+      />
+      <input
+        hidden
+        {...register('primary_federal_regulator.id')}
+        value={data.primary_federal_regulator?.id}
+      />
+    </>
+  );
+}
+
+function UpdateIdentifyingInformation({
+  data,
+  register,
+  setValue,
+  getValues,
+  control,
+  formErrors,
+}: {
+  data: InstitutionDetailsApiType;
+  register: any;
+  setValue: any;
+  getValues: any;
+  control: any;
+  formErrors: any;
+}): JSXElement {
+  return (
+    <SectionWrapper>
+      <SectionIntro heading='Update your financial institution identifying information'>
+        If your financial institution has an RSSD ID, provide it here and we
+        will pull your Federal prudential regulator and TIN from{' '}
+        <CommonLinks.NIC />. If your financial institution does not have an RSSD
+        ID, provide your Federal Taxpayer Identification Number (TIN).
+      </SectionIntro>
+      <WellContainer className='u-mt30'>
+        <Label htmlFor={elements.taxID}>
+          Federal Taxpayer Identification Number (TIN)
+        </Label>
+        <TextInput
+          id={elements.taxID}
+          {...register(elements.taxID)}
+          defaultValue={data[elements.taxID]}
+          isFullWidth
+        />
+        <Label className='u-mt30' htmlFor={elements.rssdID}>
+          Research, Statistics, Supervision, Discount (RSSD) ID
+        </Label>
+        <TextInput
+          id={elements.rssdID}
+          {...register(elements.rssdID)}
+          defaultValue={data[elements.rssdID]}
+          isFullWidth
+        />
+        <FieldFederalPrudentialRegulator {...{ register, data }} />
+      </WellContainer>
+      <Paragraph className='u-mt30 u-mb30'>
+        Select all applicable options that describe your financial institution.
+        If you wish to provide additional types of financial institutions add
+        them to “Other” and check the box.{' '}
+      </Paragraph>
+      <form>
+        <FieldGroup>
+          <Heading type='4'>Type of financial institution</Heading>
+          <List isUnstyled>
+            {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
+              const onChange = (
+                event: React.ChangeEvent<HTMLInputElement>,
+              ): void => {
+                setValue(
+                  `sbl_institution_types.${option.id}`,
+                  event.target.checked,
+                );
+              };
+              return (
+                <ListItem key={option.id}>
+                  <FormController
+                    render={({ field }) => (
+                      // @ts-expect-error TS error should be fixed in DSR Repo
+                      <Checkbox
+                        id={option.id}
+                        label={option.label}
+                        {...field}
+                        onChange={onChange}
+                        checked={Boolean(
+                          getValues(`sbl_institution_types.${option.id}`),
+                        )}
+                      />
+                    )}
+                    control={control}
+                    name={`sbl_institution_types.${option.id}`}
+                    // TODO: Add special rules or remove this comment
+                    // rules={{ required: 'This field is required' }}
+                  />
+                </ListItem>
+              );
+            })}
+          </List>
+          <InputEntry
+            label=''
+            id='institutionTypeOther'
+            {...register('sbl_institution_types_other')}
+            errors={formErrors}
+            showError
+          />
+        </FieldGroup>
+      </form>
+    </SectionWrapper>
+  );
+}
+
+export default UpdateIdentifyingInformation;
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index a2e18eacb..0dc7698d2 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -1,9 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
-import {
-  fetchInstitutionDetails,
-  submitUpdateFinancialProfile,
-} from 'api/requests';
+import { fetchInstitutionDetails } from 'api/requests';
 import useSblAuth from 'api/useSblAuth';
 import CrumbTrail from 'components/CrumbTrail';
 import FormButtonGroup from 'components/FormButtonGroup';
@@ -15,26 +12,25 @@ import { Button, Link, TextIntroduction } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
 import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
-import {
-  checkboxOptions,
-  ufpSchema,
-} from 'pages/Filing/UpdateFinancialProfile/types';
+import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 
-import { scrollToElement } from 'pages/ProfileForm/ProfileFormUtils';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
+import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Properties {}
 
-const defaultValues: UFPSchema = {
-  tin: '',
-  checkboxes: Object.fromEntries(
-    checkboxOptions.map(option => [option.id, false]),
-  ),
-};
+// TODO: defaultValues was causing the `value` provided to `<input>` fields to get wiped out.
+//   Figure out a smart way to combine them.
+// const defaultValues: UFPSchema = {
+//   tin: '',
+//   checkboxes: Object.fromEntries(
+//     checkboxOptions.map(option => [option.id, false]),
+//   ),
+// };
 
 // TODO: Decide on properties to use
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -50,14 +46,14 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
 
   const {
     register,
-    // control,
-    // setValue,
+    control,
+    setValue,
     trigger,
     getValues,
     formState: { errors: formErrors },
   } = useForm<UFPSchema>({
     resolver: zodResolver(ufpSchema),
-    defaultValues,
+    // defaultValues,
   });
 
   // Used for error scrolling
@@ -74,23 +70,19 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
     // TODO: Will be used for debugging after clicking 'Submit'
     // eslint-disable-next-line no-console
     console.log('passes validation?', passesValidation);
-    if (passesValidation) {
-      const preFormattedData = getValues();
-      // TODO: Will be used for debugging after clicking 'Submit'
-      // eslint-disable-next-line no-console
-      console.log('data to be submitted (before format):', preFormattedData);
-      // POST formData
-      // TODO: Will be used for debugging after clicking 'Submit'
-      // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
-      const response = await submitUpdateFinancialProfile(
-        auth,
-        preFormattedData,
-      ).catch(() =>
-        console.log('[API Error] Failed to submit UpdateFinancialProfile'),
-      );
-    } else {
-      scrollToElement(formErrorHeaderId);
-    }
+    // if (passesValidation) {
+    const preFormattedData = getValues();
+    // TODO: Will be used for debugging after clicking 'Submit'
+    // eslint-disable-next-line no-console
+    console.log('data to be submitted (before format):', preFormattedData);
+    // POST formData
+    // TODO: Will be used for debugging after clicking 'Submit'
+    // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
+    // const response = await submitUpdateFinancialProfile(
+    //   auth,
+    //   preFormattedData,
+    // )
+    // }
   };
 
   // TODO: Clear all checkboxes and inputs -- use setValue(defaultValues)
@@ -132,6 +124,9 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
         </FormHeaderWrapper>
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
         <FinancialInstitutionDetailsForm {...{ data, register }} />
+        <UpdateIdentifyingInformation
+          {...{ data, register, setValue, getValues, control, formErrors }}
+        />
 
         <FormButtonGroup>
           <Button
diff --git a/src/pages/Filing/UpdateFinancialProfile/types.ts b/src/pages/Filing/UpdateFinancialProfile/types.ts
index d0cbd698e..887cebf34 100644
--- a/src/pages/Filing/UpdateFinancialProfile/types.ts
+++ b/src/pages/Filing/UpdateFinancialProfile/types.ts
@@ -5,6 +5,21 @@ export interface CheckboxOption {
   label: string;
 }
 
+// TODO: Send checkboxes values as {'1': true }?
+// {id: 1, label: "Bank or savings association"},
+// {id: 2, label: "Minority depository institution"},
+// {id: 3, label: "Credit union"},
+// {id: 4, label: "Nondepository institution"},
+// {id: 5, label: "Community development financial institution (CDFI)"},
+// {id: 6, label: "Other nonprofit financial institution"},
+// {id: 7, label: "Farm Credit System institution"},
+// {id: 8, label: "Government lender"},
+// {id: 9, label: "Commercial finance company"},
+// {id: 10, label: "Equipment finance company"},
+// {id: 11, label: "Industrial loan company"},
+// {id: 12, label: "Online lender"},
+// {id: 13, label: "Other"},
+
 export const checkboxOptions: CheckboxOption[] = [
   {
     id: 'bankSavings',
@@ -14,27 +29,71 @@ export const checkboxOptions: CheckboxOption[] = [
     id: 'minorityDepository',
     label: 'Minority depository institution',
   },
+  {
+    id: 'creditUnion',
+    label: 'Credit union',
+  },
+  {
+    id: 'nonDepository',
+    label: 'Nondepository institution',
+  },
+  {
+    id: 'communityDevelopment',
+    label: 'Community development financial institution (CDFI)',
+  },
+  {
+    id: 'otherNonprofit',
+    label: 'Other nonprofit financial institution',
+  },
+  {
+    id: 'farmCredit',
+    label: 'Farm Credit System institution',
+  },
+  {
+    id: 'governmentLender',
+    label: 'Government lender',
+  },
+  {
+    id: 'commercialFinance',
+    label: 'Commercial finance company',
+  },
+  {
+    id: 'equipmentFinance',
+    label: 'Equipment finance company',
+  },
+  {
+    id: 'industrialLoan',
+    label: 'Industrial loan company',
+  },
+  {
+    id: 'onlineLender',
+    label: 'Online lender',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+  },
 ];
 
 // eslint-disable-next-line unicorn/no-array-reduce
 const checkboxOptionsZod = checkboxOptions.reduce((accumulator, option) => {
-  return { ...accumulator, [option.id]: z.boolean() };
+  return { ...accumulator, [option.id]: z.boolean().optional() };
 }, {});
 
 export const minimumCharacters = 1;
 
 export const ufpSchema = z.object({
-  tin: z.string().trim().min(minimumCharacters, {
+  tax_id: z.string().trim().min(minimumCharacters, {
     message: 'You must enter your TIN.',
   }),
-  checkboxes: z.object(checkboxOptionsZod),
+  sbl_institution_types: z.object(checkboxOptionsZod),
 });
 
 // export type UFPSchema = z.infer<typeof ufpSchema>;
 
 interface ExpectedObject {
-  checkboxes: Record<string, boolean>;
-  tin: string;
+  sbl_institution_types: Record<string, boolean>;
+  tax_id: string;
 }
 
 export type UFPSchema = ExpectedObject;

From 1d4415f171f7a3ef185fffd0172bddb8dc4d79e2 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 09:09:39 -0700
Subject: [PATCH 07/54] feat: [InputEntry] Support display of (optional) label

---
 src/components/InputEntry.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index 95bcb7fb0..8650eabc5 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -5,6 +5,7 @@ import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Heading, TextInput } from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import isString from 'utils/isString';
 
 interface InputEntryProperties
@@ -17,6 +18,17 @@ interface InputEntryProperties
   hideInput?: boolean;
   showError?: boolean;
   children?: ReactNode;
+  isOptional?: boolean;
+}
+
+function LabelOptional({ isOptional }: { isOptional?: boolean }): JSXElement {
+  if (!isOptional) return null;
+  return (
+    <span style={{ color: '#43484E', fontSize: '16px', fontWeight: '400' }}>
+      {' '}
+      (optional)
+    </span>
+  );
 }
 
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
@@ -30,6 +42,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
       isLast = false,
       showError = true,
       children,
+      isOptional,
       ...properties
     },
     reference,
@@ -40,14 +53,20 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
         <Element name={id}>
           <label htmlFor={id}>
             {isString(label) ? (
-              <Heading
-                type='4'
-                className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
-              >
-                {label}
-              </Heading>
+              <div>
+                <Heading
+                  type='4'
+                  className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
+                >
+                  {label}
+                  <LabelOptional {...{ isOptional }} />
+                </Heading>
+              </div>
             ) : (
-              <div>{label}</div>
+              <div>
+                {label}
+                <LabelOptional {...{ isOptional }} />
+              </div>
             )}
           </label>
           {children}

From c527d560cc5fd9648738f6134e26ad0382547192 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 09:11:04 -0700
Subject: [PATCH 08/54] fix: Lint error

---
 .../UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx | 3 ++-
 .../ViewInstitutionProfile/FinancialInstitutionDetails.tsx     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
index f11c5fee0..e36c39e2d 100644
--- a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
@@ -2,7 +2,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
-import FinancialInstitutionDetails, {
+import {
+  FinancialInstitutionDetails,
   formatDomains,
 } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index ec2f43517..0d8e7a97c 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -21,7 +21,7 @@ const formatAddressStreet = (street: string): ReactElement | undefined => {
 export const formatDomains = (domains?: Domain[]): string =>
   (domains ?? []).map((domain: Domain) => domain.domain).join(', ');
 
-function FinancialInstitutionDetails({
+export function FinancialInstitutionDetails({
   data,
   heading,
 }: {

From de66307ad0416ae99b029273ed9cf666e0b01a86 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 09:15:08 -0700
Subject: [PATCH 09/54] feat: [UpdateFinancialProfile] Display
 AffiliateInformation and include in submitted DTO

---
 .../UpdateAffiliateInformation.tsx            | 108 ++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   |   3 +-
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx

diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
new file mode 100644
index 000000000..aa215397a
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
@@ -0,0 +1,108 @@
+// TODO: vv Revisit these exceptions vv
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import Links from 'components/CommonLinks';
+import {
+  Divider,
+  Heading,
+  Paragraph,
+  WellContainer,
+} from 'design-system-react';
+import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { ReactNode } from 'react';
+import InputEntry from '../../../components/InputEntry';
+
+function UpdateAffiliateInformation({
+  data,
+  heading,
+  register,
+}: {
+  data: InstitutionDetailsApiType;
+  heading?: ReactNode;
+  // TODO: vv Revisit these exceptions vv
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, react/require-default-props
+  register?: any;
+}): JSX.Element {
+  return (
+    <div className='affiliate-information'>
+      <Heading type='2' className='u-mt60'>
+        {heading}
+      </Heading>
+      <Paragraph>
+        To request changes to an LEI-based affiliate, visit <Links.GLIEF />. To
+        request changes to an RSSD ID- based affiliate, visit <Links.NIC />. If
+        you wish to provide only your affiliate&apos;s name, where no LEI or
+        RSSD ID exists, <Links.UpdateInstitutionProfile />.
+      </Paragraph>
+
+      <WellContainer className='u-mt30'>
+        <Heading type='5' className='u-mb30'>
+          Parent entity
+        </Heading>
+        <InputEntry
+          label='Name'
+          id='parent_legal_name'
+          {...register('parent_legal_name', {
+            value: data.parent_legal_name,
+          })}
+          errors={{}}
+          showError
+        />
+        <InputEntry
+          label='Legal Entity Identifier (LEI)'
+          id='parent_lei'
+          {...register('parent_lei', { value: data.parent_lei })}
+          errors={{}}
+          showError
+          isOptional
+        />
+        <InputEntry
+          label='Research, Statistics, Supervision, Discount (RSSD) ID'
+          id='parent_rssd_id'
+          {...register('parent_rssd_id', { value: data.parent_rssd_id })}
+          errors={{}}
+          showError
+          isOptional
+        />
+
+        <Divider className='u-mt45' />
+
+        <Heading type='5' className='u-mt45 u-mb30'>
+          Top Holder
+        </Heading>
+        <InputEntry
+          label='Name'
+          id='top_holder_legal_name'
+          {...register('top_holder_legal_name', {
+            value: data.top_holder_legal_name,
+          })}
+          errors={{}}
+          showError
+        />
+        <InputEntry
+          label='Legal Entity Identifier (LEI)'
+          id='top_holder_lei'
+          {...register('top_holder_lei', { value: data.top_holder_lei })}
+          errors={{}}
+          showError
+          isOptional
+        />
+        <InputEntry
+          label='Research, Statistics, Supervision, Discount (RSSD) ID'
+          id='top_holder_rssd_id'
+          {...register('top_holder_rssd_id', {
+            value: data.top_holder_rssd_id,
+          })}
+          errors={{}}
+          showError
+          isOptional
+        />
+      </WellContainer>
+    </div>
+  );
+}
+
+UpdateAffiliateInformation.defaultProps = {
+  heading: 'Update your financial institution affiliate information',
+};
+
+export default UpdateAffiliateInformation;
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 0dc7698d2..c117a5e41 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -13,10 +13,10 @@ import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
 import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
-
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
+import UpdateAffiliateInformation from './UpdateAffiliateInformation';
 import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
 
 // TODO: Decide on properties to inherit
@@ -127,6 +127,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
         <UpdateIdentifyingInformation
           {...{ data, register, setValue, getValues, control, formErrors }}
         />
+        <UpdateAffiliateInformation {...{ data, register }} />
 
         <FormButtonGroup>
           <Button

From b926c51006e6a98bb6c7658f8db14a22154ec1bd Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 09:28:56 -0700
Subject: [PATCH 10/54] feat: [LabelOptional] Extract to a reusable component

---
 src/components/InputEntry.tsx    | 14 ++------------
 src/components/LabelOptional.tsx | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 src/components/LabelOptional.tsx

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index 8650eabc5..d74daf959 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -5,8 +5,8 @@ import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Heading, TextInput } from 'design-system-react';
-import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import isString from 'utils/isString';
+import LabelOptional from './LabelOptional';
 
 interface InputEntryProperties
   extends PropsWithoutRef<JSX.IntrinsicElements['input']> {
@@ -21,16 +21,6 @@ interface InputEntryProperties
   isOptional?: boolean;
 }
 
-function LabelOptional({ isOptional }: { isOptional?: boolean }): JSXElement {
-  if (!isOptional) return null;
-  return (
-    <span style={{ color: '#43484E', fontSize: '16px', fontWeight: '400' }}>
-      {' '}
-      (optional)
-    </span>
-  );
-}
-
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
@@ -42,7 +32,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
       isLast = false,
       showError = true,
       children,
-      isOptional,
+      isOptional = false,
       ...properties
     },
     reference,
diff --git a/src/components/LabelOptional.tsx b/src/components/LabelOptional.tsx
new file mode 100644
index 000000000..90cfee25e
--- /dev/null
+++ b/src/components/LabelOptional.tsx
@@ -0,0 +1,17 @@
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+
+function LabelOptional({ isOptional }: { isOptional?: boolean }): JSXElement {
+  if (!isOptional) return null;
+  return (
+    <span style={{ color: '#43484E', fontSize: '16px', fontWeight: '400' }}>
+      {' '}
+      (optional)
+    </span>
+  );
+}
+
+LabelOptional.defaultProps = {
+  isOptional: true,
+};
+
+export default LabelOptional;

From 190eb161b33f5a2dea79eb0b6eb14036eec3a4c8 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 09:29:12 -0700
Subject: [PATCH 11/54] feat: [UpdateFinancialProfile] Display
 AffiliateInformation and include in submitted DTO

---
 .../AdditionalDetails.tsx                     | 35 +++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   |  2 ++
 2 files changed, 37 insertions(+)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx

diff --git a/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
new file mode 100644
index 000000000..c80e21f88
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
@@ -0,0 +1,35 @@
+// TODO: vv Revisit these exceptions vv
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import LabelOptional from 'components/LabelOptional';
+import SectionIntro from 'components/SectionIntro';
+import { Label, TextArea, WellContainer } from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import { SectionWrapper } from './UpdateIdentifyingInformation';
+
+function AdditionalDetails({ register }: { register: any }): JSXElement {
+  return (
+    <SectionWrapper>
+      <SectionIntro heading='Provide any additional details'>
+        Do not include personal identifiable information (PII) or other
+        sensitive information in the field below, such as your personal address,
+        Social Security number, or passwords.
+      </SectionIntro>
+      <WellContainer className='u-mt30'>
+        <Label htmlFor='stuff'>
+          Additional details
+          <LabelOptional />
+        </Label>
+        <TextArea
+          id='stuff'
+          isFullWidth
+          {...register('additional_details')}
+          placeholder=''
+          rows='5'
+        />
+      </WellContainer>
+    </SectionWrapper>
+  );
+}
+
+export default AdditionalDetails;
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index c117a5e41..134d7b14c 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -15,6 +15,7 @@ import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import { useForm } from 'react-hook-form';
 import { useParams } from 'react-router-dom';
+import AdditionalDetails from './AdditionalDetails';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 import UpdateAffiliateInformation from './UpdateAffiliateInformation';
 import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
@@ -128,6 +129,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
           {...{ data, register, setValue, getValues, control, formErrors }}
         />
         <UpdateAffiliateInformation {...{ data, register }} />
+        <AdditionalDetails {...{ register }} />
 
         <FormButtonGroup>
           <Button

From 3373a31a4e8ca78f3f2f1e3109b97002ee142cfc Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 12:38:14 -0700
Subject: [PATCH 12/54] fix: [UpdateAffiliateInformation] Display initial
 checkbox state and "Other" details text

---
 .../UpdateIdentifyingInformation.tsx          | 63 ++++++++++++-------
 .../Filing/UpdateFinancialProfile/types.ts    | 29 +++++++++
 2 files changed, 69 insertions(+), 23 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 5f302e9e7..8e001125b 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -21,7 +21,7 @@ import InputEntry from '../../../components/InputEntry';
 import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import type { CheckboxOption } from './types';
-import { checkboxOptions } from './types';
+import { checkboxOptions, sblInstitutionTypeMap } from './types';
 
 export function SectionWrapper({
   children,
@@ -78,6 +78,11 @@ function UpdateIdentifyingInformation({
   control: any;
   formErrors: any;
 }): JSXElement {
+  const typeOtherData = data.sbl_institution_types?.find(item => {
+    if (typeof item === 'string') return false;
+    return item.sbl_type.id === sblInstitutionTypeMap.other;
+  });
+
   return (
     <SectionWrapper>
       <SectionIntro heading='Update your financial institution identifying information'>
@@ -92,8 +97,7 @@ function UpdateIdentifyingInformation({
         </Label>
         <TextInput
           id={elements.taxID}
-          {...register(elements.taxID)}
-          defaultValue={data[elements.taxID]}
+          {...register(elements.taxID, { value: data[elements.taxID] })}
           isFullWidth
         />
         <Label className='u-mt30' htmlFor={elements.rssdID}>
@@ -101,8 +105,7 @@ function UpdateIdentifyingInformation({
         </Label>
         <TextInput
           id={elements.rssdID}
-          {...register(elements.rssdID)}
-          defaultValue={data[elements.rssdID]}
+          {...register(elements.rssdID, { value: data[elements.rssdID] })}
           isFullWidth
         />
         <FieldFederalPrudentialRegulator {...{ register, data }} />
@@ -117,31 +120,40 @@ function UpdateIdentifyingInformation({
           <Heading type='4'>Type of financial institution</Heading>
           <List isUnstyled>
             {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
+              const optionId = `sbl_institution_types.${option.id}`;
+
               const onChange = (
                 event: React.ChangeEvent<HTMLInputElement>,
               ): void => {
-                setValue(
-                  `sbl_institution_types.${option.id}`,
-                  event.target.checked,
-                );
+                setValue(optionId, event.target.checked);
               };
+
+              const defaultChecked = data.sbl_institution_types?.some(item => {
+                const apiTypeId = sblInstitutionTypeMap[option.id];
+                if (typeof item === 'string') return item === apiTypeId;
+                return item.sbl_type.id === apiTypeId;
+              });
+
               return (
                 <ListItem key={option.id}>
                   <FormController
-                    render={({ field }) => (
-                      // @ts-expect-error TS error should be fixed in DSR Repo
-                      <Checkbox
-                        id={option.id}
-                        label={option.label}
-                        {...field}
-                        onChange={onChange}
-                        checked={Boolean(
-                          getValues(`sbl_institution_types.${option.id}`),
-                        )}
-                      />
-                    )}
+                    render={({ field }) => {
+                      return (
+                        <Checkbox
+                          id={option.id}
+                          label={option.label}
+                          {...field}
+                          onChange={onChange}
+                          checked={
+                            getValues(optionId) === undefined
+                              ? defaultChecked
+                              : getValues(optionId)
+                          }
+                        />
+                      );
+                    }}
                     control={control}
-                    name={`sbl_institution_types.${option.id}`}
+                    name={optionId}
                     // TODO: Add special rules or remove this comment
                     // rules={{ required: 'This field is required' }}
                   />
@@ -152,7 +164,12 @@ function UpdateIdentifyingInformation({
           <InputEntry
             label=''
             id='institutionTypeOther'
-            {...register('sbl_institution_types_other')}
+            {...register('sbl_institution_types_other', {
+              value:
+                typeof typeOtherData === 'string' || !typeOtherData
+                  ? ''
+                  : typeOtherData.details,
+            })}
             errors={formErrors}
             showError
           />
diff --git a/src/pages/Filing/UpdateFinancialProfile/types.ts b/src/pages/Filing/UpdateFinancialProfile/types.ts
index 887cebf34..3328fa942 100644
--- a/src/pages/Filing/UpdateFinancialProfile/types.ts
+++ b/src/pages/Filing/UpdateFinancialProfile/types.ts
@@ -20,6 +20,35 @@ export interface CheckboxOption {
 // {id: 12, label: "Online lender"},
 // {id: 13, label: "Other"},
 
+export const sblInstitutionTypeMap: Record<string, string> = {
+  '1': 'bankSavings',
+  '2': 'minorityDepository',
+  '3': 'creditUnion',
+  '4': 'nonDepository',
+  '5': 'communityDevelopment',
+  '6': 'otherNonprofit',
+  '7': 'farmCredit',
+  '8': 'governmentLender',
+  '9': 'commercialFinance',
+  '10': 'equipmentFinance',
+  '11': 'industrialLoan',
+  '12': 'onlineLender',
+  '13': 'other',
+  bankSavings: '1',
+  minorityDepository: '2',
+  creditUnion: '3',
+  nonDepository: '4',
+  communityDevelopment: '5',
+  otherNonprofit: '6',
+  farmCredit: '7',
+  governmentLender: '8',
+  commercialFinance: '9',
+  equipmentFinance: '10',
+  industrialLoan: '11',
+  onlineLender: '12',
+  other: '13',
+};
+
 export const checkboxOptions: CheckboxOption[] = [
   {
     id: 'bankSavings',

From 6b5187ecbf3c23f6a154172041b85a527c0f20d3 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Fri, 23 Feb 2024 13:36:29 -0700
Subject: [PATCH 13/54] feat: [UpdateFinancialProfile] Simulated success upon
 form submission

---
 .../Filing/UpdateFinancialProfile/index.tsx   | 21 +++++++++++++++++-
 src/pages/Summary/Summary.data.tsx            | 22 ++++++++++++++++++-
 src/pages/Summary/SummaryHeader.tsx           |  8 +++++++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 134d7b14c..9e70a5b12 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -13,8 +13,11 @@ import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
 import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
 import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
+import { scenarios } from 'pages/Summary/Summary.data';
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { useParams } from 'react-router-dom';
+import { Navigate, useParams } from 'react-router-dom';
+import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
 import AdditionalDetails from './AdditionalDetails';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 import UpdateAffiliateInformation from './UpdateAffiliateInformation';
@@ -39,6 +42,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
   const auth = useSblAuth();
   const { lei } = useParams();
   const redirect500 = useError500();
+  const [submitted, setSubmitted] = useState(false);
 
   const { isLoading, isError, data } = useQuery(
     [`institution-details-${lei}`],
@@ -57,6 +61,19 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
     // defaultValues,
   });
 
+  const isRoutingEnabled = getIsRoutingEnabled();
+
+  // TODO: Render this based on the actual API call result
+  if (isRoutingEnabled && submitted) {
+    return (
+      <Navigate
+        replace
+        to='/summary'
+        state={{ scenario: scenarios.SuccessInstitutionProfileUpdate }}
+      />
+    );
+  }
+
   // Used for error scrolling
   const formErrorHeaderId = 'UFPFormErrorHeader';
   if (isLoading) return <LoadingContent />;
@@ -76,6 +93,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
     // TODO: Will be used for debugging after clicking 'Submit'
     // eslint-disable-next-line no-console
     console.log('data to be submitted (before format):', preFormattedData);
+
     // POST formData
     // TODO: Will be used for debugging after clicking 'Submit'
     // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
@@ -84,6 +102,7 @@ function UpdateFinancialProfile(properties: Properties): JSXElement {
     //   preFormattedData,
     // )
     // }
+    setSubmitted(true);
   };
 
   // TODO: Clear all checkboxes and inputs -- use setValue(defaultValues)
diff --git a/src/pages/Summary/Summary.data.tsx b/src/pages/Summary/Summary.data.tsx
index 8e51babe2..0c5149c2d 100644
--- a/src/pages/Summary/Summary.data.tsx
+++ b/src/pages/Summary/Summary.data.tsx
@@ -1,16 +1,19 @@
 import { Link } from 'components/Link';
 import type { ReactNode } from 'react';
-import { loginGovAccountPage } from 'utils/common';
+import { loginGovAccountPage, sblHelpLink } from 'utils/common';
 
 export const scenarioHeaders = {
   Error: 'Unable to complete your user profile',
   Status: 'User profile submission status',
+  SuccessInstitutionProfileUpdate:
+    'Your update request has been submitted [Simulated]',
 } as const;
 
 export type ScenarioHeader =
   (typeof scenarioHeaders)[keyof typeof scenarioHeaders];
 
 export const scenarios = {
+  SuccessInstitutionProfileUpdate: 'SuccessInstitutionProfileUpdate',
   // Success1,
   // Warning1,
   // Warning2,
@@ -89,6 +92,16 @@ function ChildrenError1(): JSX.Element {
   );
 }
 
+function ChildrenSuccessInstitutionProfileUpdate(): JSX.Element {
+  return (
+    <>
+      Please allow 24-48 hours for a response during normal business hours. If
+      you need further assistance please{' '}
+      <Link href={sblHelpLink}>contact our support staff</Link>
+    </>
+  );
+}
+
 // TODO: These items may be commented out but not removed till post-MVP
 export const SummaryFormHeaderMessages: ScenarioFieldType = {
   // [Scenario.Success1]: {
@@ -114,6 +127,13 @@ export const SummaryFormHeaderMessages: ScenarioFieldType = {
   //     'Your selection has been submitted to our technical support staff for review',
   //   children: <ChildrenWarning3 />,
   // },
+  [scenarios.SuccessInstitutionProfileUpdate]: {
+    type: 'success',
+    header: scenarioHeaders.SuccessInstitutionProfileUpdate,
+    message:
+      'Your update request has been submitted to our support staff for review',
+    children: <ChildrenSuccessInstitutionProfileUpdate />,
+  },
   [scenarios.Error1]: {
     type: 'error',
     header: scenarioHeaders.Error,
diff --git a/src/pages/Summary/SummaryHeader.tsx b/src/pages/Summary/SummaryHeader.tsx
index f5d596570..a27c47938 100644
--- a/src/pages/Summary/SummaryHeader.tsx
+++ b/src/pages/Summary/SummaryHeader.tsx
@@ -1,3 +1,6 @@
+import useSblAuth from 'api/useSblAuth';
+import CrumbTrail from 'components/CrumbTrail';
+import { Link } from 'components/Link';
 import { Alert } from 'design-system-react';
 import type { Scenario } from './Summary.data';
 import { SummaryFormHeaderMessages, scenarios } from './Summary.data';
@@ -13,8 +16,13 @@ interface SummaryProperties {
 function SummaryHeader({
   scenario = scenarios.Error1,
 }: SummaryProperties): JSX.Element {
+  const user = useSblAuth();
+
   return (
     <div id='Summary' className='mb-[2.8125rem] max-w-[41.875rem]'>
+      <CrumbTrail>
+        <Link href={user.emailAddress ? '/landing' : '/'}>Platform home</Link>
+      </CrumbTrail>
       <h1 className='mb-[1.875rem]'>
         {SummaryFormHeaderMessages[scenario as Scenario].header}
       </h1>

From c20b8c6a6bd43cd0b6c8013b7f6032bfd55b6847 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 26 Feb 2024 17:43:11 -0700
Subject: [PATCH 14/54] fix: [UpdateAffiliateInformation] Extract UFPForm in
 prep for generation of defaultValues

---
 .../Filing/UpdateFinancialProfile/UFPForm.tsx | 156 ++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   | 148 +----------------
 2 files changed, 159 insertions(+), 145 deletions(-)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx

diff --git a/src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx b/src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx
new file mode 100644
index 000000000..2e2ded038
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx
@@ -0,0 +1,156 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import CrumbTrail from 'components/CrumbTrail';
+import FormButtonGroup from 'components/FormButtonGroup';
+import FormErrorHeader from 'components/FormErrorHeader';
+import FormHeaderWrapper from 'components/FormHeaderWrapper';
+import FormWrapper from 'components/FormWrapper';
+import { Button, Link, TextIntroduction } from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
+import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
+import { scenarios } from 'pages/Summary/Summary.data';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { Navigate, useParams } from 'react-router-dom';
+import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
+import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
+import AdditionalDetails from './AdditionalDetails';
+import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
+import UpdateAffiliateInformation from './UpdateAffiliateInformation';
+import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
+
+// TODO: defaultValues was causing the `value` provided to `<input>` fields to get wiped out.
+//   Figure out a smart way to combine them.
+// const defaultValues: UFPSchema = {
+//   tin: '',
+//   checkboxes: Object.fromEntries(
+//     checkboxOptions.map(option => [option.id, false]),
+//   ),
+// };
+export default function UFPForm({
+  data,
+}: {
+  data: InstitutionDetailsApiType;
+}): JSXElement {
+  const [submitted, setSubmitted] = useState(false);
+  const { lei } = useParams();
+  const isRoutingEnabled = getIsRoutingEnabled();
+
+  // TODO: Generate default values from `data`
+  const {
+    register,
+    control,
+    setValue,
+    trigger,
+    getValues,
+    formState: { errors: formErrors },
+  } = useForm<UFPSchema>({
+    resolver: zodResolver(ufpSchema),
+    // defaultValues,
+  });
+
+  // TODO: Render this based on the actual API call result
+  if (isRoutingEnabled && submitted) {
+    return (
+      <Navigate
+        replace
+        to='/summary'
+        state={{ scenario: scenarios.SuccessInstitutionProfileUpdate }}
+      />
+    );
+  }
+
+  // Used for error scrolling
+  const formErrorHeaderId = 'UFPFormErrorHeader';
+
+  // NOTE: This function is used for submitting the multipart/formData
+  const onSubmitButtonAction = async (): Promise<void> => {
+    const passesValidation = await trigger();
+    // TODO: Will be used for debugging after clicking 'Submit'
+    // eslint-disable-next-line no-console
+    console.log('passes validation?', passesValidation);
+    // if (passesValidation) {
+    const preFormattedData = getValues();
+    // TODO: Will be used for debugging after clicking 'Submit'
+    // eslint-disable-next-line no-console
+    console.log('data to be submitted (before format):', preFormattedData);
+
+    // POST formData
+    // TODO: Will be used for debugging after clicking 'Submit'
+    // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
+    // const response = await submitUpdateFinancialProfile(
+    //   auth,
+    //   preFormattedData,
+    // )
+    // }
+    setSubmitted(true);
+  };
+
+  // TODO: Clear all checkboxes and inputs -- use setValue(defaultValues)
+  // eslint-disable-next-line no-console
+  const onClearform = (): void => console.log('onClearform clicked');
+
+  // TODO: Will be used for debugging errors after clicking 'Submit'
+  // eslint-disable-next-line no-console
+  console.log('formErrors:', formErrors);
+
+  return (
+    <FormWrapper>
+      <div id='update-financial-profile'>
+        <FormHeaderWrapper>
+          <CrumbTrail>
+            <Link href='/landing' key='home'>
+              Platform home
+            </Link>
+            {lei ? (
+              <Link
+                isRouterLink
+                href={`/institution/${lei}`}
+                key='view-instition'
+              >
+                View Institution
+              </Link>
+            ) : null}
+          </CrumbTrail>
+          <TextIntroduction
+            heading='Update your financial institution profile'
+            subheading='This profile reflects the most current data available to the CFPB for your financial institution. Most updates to your financial institution profile details must be handled at the source (GLEIF or NIC). For  all other update requests, fill out the form below.'
+            description={
+              <>
+                Requested updates are processed by our support staff. Please
+                allow 24-48 hours for a response during normal business hours.
+              </>
+            }
+          />
+        </FormHeaderWrapper>
+        <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
+        <FinancialInstitutionDetailsForm {...{ data, register }} />
+        <UpdateIdentifyingInformation
+          {...{ data, register, setValue, getValues, control, formErrors }}
+        />
+        <UpdateAffiliateInformation {...{ data, register }} />
+        <AdditionalDetails {...{ register }} />
+
+        <FormButtonGroup>
+          <Button
+            appearance='primary'
+            // TODO: Resolve this TypeScript Error
+            // https://github.com/cfpb/sbl-frontend/issues/237
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            onClick={onSubmitButtonAction}
+            label='Submit'
+            aria-label='Submit User Profile'
+            size='default'
+            type='submit'
+          />
+          <Button
+            label='Clear form'
+            onClick={onClearform}
+            appearance='warning'
+            asLink
+          />
+        </FormButtonGroup>
+      </div>
+    </FormWrapper>
+  );
+}
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index f412e7ea7..4d6cae045 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -1,177 +1,35 @@
-import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { fetchInstitutionDetails } from 'api/requests';
 import useSblAuth from 'api/useSblAuth';
-import CrumbTrail from 'components/CrumbTrail';
-import FormButtonGroup from 'components/FormButtonGroup';
-import FormErrorHeader from 'components/FormErrorHeader';
-import FormHeaderWrapper from 'components/FormHeaderWrapper';
-import FormWrapper from 'components/FormWrapper';
 import { LoadingContent } from 'components/Loading';
-import { Button, Link, TextIntroduction } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
-import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
-import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
-import { scenarios } from 'pages/Summary/Summary.data';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Navigate, useParams } from 'react-router-dom';
-import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
-import AdditionalDetails from './AdditionalDetails';
-import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
-import UpdateAffiliateInformation from './UpdateAffiliateInformation';
-import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
+import { useParams } from 'react-router-dom';
+import UFPForm from './UfpForm';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Properties {}
 
-// TODO: defaultValues was causing the `value` provided to `<input>` fields to get wiped out.
-//   Figure out a smart way to combine them.
-// const defaultValues: UFPSchema = {
-//   tin: '',
-//   checkboxes: Object.fromEntries(
-//     checkboxOptions.map(option => [option.id, false]),
-//   ),
-// };
-
 // TODO: Decide on properties to use
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function UpdateFinancialProfile(properties: Properties): JSXElement {
   const auth = useSblAuth();
   const { lei } = useParams();
   const redirect500 = useError500();
-  const [submitted, setSubmitted] = useState(false);
 
   const { isLoading, isError, data } = useQuery(
     [`institution-details-${lei}`],
     async () => fetchInstitutionDetails(auth, lei),
   );
 
-  const {
-    register,
-    control,
-    setValue,
-    trigger,
-    getValues,
-    formState: { errors: formErrors },
-  } = useForm<UFPSchema>({
-    resolver: zodResolver(ufpSchema),
-    // defaultValues,
-  });
-
-  const isRoutingEnabled = getIsRoutingEnabled();
-
-  // TODO: Render this based on the actual API call result
-  if (isRoutingEnabled && submitted) {
-    return (
-      <Navigate
-        replace
-        to='/summary'
-        state={{ scenario: scenarios.SuccessInstitutionProfileUpdate }}
-      />
-    );
-  }
-
-  // Used for error scrolling
-  const formErrorHeaderId = 'UFPFormErrorHeader';
   if (isLoading) return <LoadingContent />;
   if (isError)
     return redirect500({
       message: 'Unable to fetch institution details.',
     });
 
-  // NOTE: This function is used for submitting the multipart/formData
-  const onSubmitButtonAction = async (): Promise<void> => {
-    const passesValidation = await trigger();
-    // TODO: Will be used for debugging after clicking 'Submit'
-    // eslint-disable-next-line no-console
-    console.log('passes validation?', passesValidation);
-    // if (passesValidation) {
-    const preFormattedData = getValues();
-    // TODO: Will be used for debugging after clicking 'Submit'
-    // eslint-disable-next-line no-console
-    console.log('data to be submitted (before format):', preFormattedData);
-
-    // POST formData
-    // TODO: Will be used for debugging after clicking 'Submit'
-    // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
-    // const response = await submitUpdateFinancialProfile(
-    //   auth,
-    //   preFormattedData,
-    // )
-    // }
-    setSubmitted(true);
-  };
-
-  // TODO: Clear all checkboxes and inputs -- use setValue(defaultValues)
-  // eslint-disable-next-line no-console
-  const onClearform = (): void => console.log('onClearform clicked');
-
-  // TODO: Will be used for debugging errors after clicking 'Submit'
-  // eslint-disable-next-line no-console
-  console.log('formErrors:', formErrors);
-
-  return (
-    <FormWrapper>
-      <div id='update-financial-profile'>
-        <FormHeaderWrapper>
-          <CrumbTrail>
-            <Link href='/landing' key='home'>
-              Platform home
-            </Link>
-            {lei ? (
-              <Link
-                isRouterLink
-                href={`/institution/${lei}`}
-                key='view-instition'
-              >
-                View Institution
-              </Link>
-            ) : null}
-          </CrumbTrail>
-          <TextIntroduction
-            heading='Update your financial institution profile'
-            subheading='This profile reflects the most current data available to the CFPB for your financial institution. Most updates to your financial institution profile details must be handled at the source (GLEIF or NIC). For  all other update requests, fill out the form below.'
-            description={
-              <>
-                Requested updates are processed by our support staff. Please
-                allow 24-48 hours for a response during normal business hours.
-              </>
-            }
-          />
-        </FormHeaderWrapper>
-        <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
-        <FinancialInstitutionDetailsForm {...{ data, register }} />
-        <UpdateIdentifyingInformation
-          {...{ data, register, setValue, getValues, control, formErrors }}
-        />
-        <UpdateAffiliateInformation {...{ data, register }} />
-        <AdditionalDetails {...{ register }} />
-
-        <FormButtonGroup>
-          <Button
-            appearance='primary'
-            // TODO: Resolve this TypeScript Error
-            // https://github.com/cfpb/sbl-frontend/issues/237
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onClick={onSubmitButtonAction}
-            label='Submit'
-            aria-label='Submit User Profile'
-            size='default'
-            type='submit'
-          />
-          <Button
-            label='Clear form'
-            onClick={onClearform}
-            appearance='warning'
-            asLink
-          />
-        </FormButtonGroup>
-      </div>
-    </FormWrapper>
-  );
+  return <UFPForm {...{ data }} />;
 }
 
 export default UpdateFinancialProfile;

From eb770a8e73277592bd7040a78ab91647f08b1dca Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 27 Feb 2024 09:15:12 -0700
Subject: [PATCH 15/54] fix: [UpdateAffiliateInformation] Change filename case

---
 .../Filing/UpdateFinancialProfile/{UFPForm.tsx => UfpForm.tsx}    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/pages/Filing/UpdateFinancialProfile/{UFPForm.tsx => UfpForm.tsx} (100%)

diff --git a/src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
similarity index 100%
rename from src/pages/Filing/UpdateFinancialProfile/UFPForm.tsx
rename to src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx

From 323682485830d4a1ed122a60f6655f304ef38e53 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 27 Feb 2024 13:44:01 -0500
Subject: [PATCH 16/54] fix: removed double reference

---
 src/pages/Summary/Summary.data.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Summary/Summary.data.tsx b/src/pages/Summary/Summary.data.tsx
index b3bef1959..ed8e2152e 100644
--- a/src/pages/Summary/Summary.data.tsx
+++ b/src/pages/Summary/Summary.data.tsx
@@ -3,8 +3,6 @@ import type { ReactNode } from 'react';
 import { loginGovAccountPage, sblHelpLink } from 'utils/common';
 
 export const scenarioHeaders = {
-  Error: 'Unable to complete your user profile',
-  Status: 'User profile submission status',
   SuccessInstitutionProfileUpdate:
     'Your update request has been submitted [Simulated]',
   Error: 'Your email domain is not authorized',

From 47534364e3924377706ccc9f8f15389dd88e6204 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 27 Feb 2024 16:00:58 -0700
Subject: [PATCH 17/54] Update src/components/LabelOptional.tsx

Co-authored-by: S T <shindigira@gmail.com>
---
 src/components/LabelOptional.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LabelOptional.tsx b/src/components/LabelOptional.tsx
index 90cfee25e..445b02ac1 100644
--- a/src/components/LabelOptional.tsx
+++ b/src/components/LabelOptional.tsx
@@ -3,7 +3,7 @@ import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 function LabelOptional({ isOptional }: { isOptional?: boolean }): JSXElement {
   if (!isOptional) return null;
   return (
-    <span style={{ color: '#43484E', fontSize: '16px', fontWeight: '400' }}>
+    <span className='text-[#43484e] text-base font-normal'>
       {' '}
       (optional)
     </span>

From 650828560a6874def916187cfe21631066ef9752 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Tue, 27 Feb 2024 17:07:30 -0700
Subject: [PATCH 18/54] [UpdateInstitutionProfile] -  Improved population of
 existing form data - Temp fix for TextArea resizing issue - Implements `Clear
 form` functionality

---
 .../AdditionalDetails.tsx                     |  5 +-
 .../FinancialInstitutionDetailsForm.tsx       | 40 ++---------
 .../Filing/UpdateFinancialProfile/UfpForm.tsx | 37 +++++-----
 .../UpdateAffiliateInformation.tsx            | 18 ++---
 .../UpdateIdentifyingInformation.tsx          | 25 ++-----
 .../buildUfpDefaults.tsx                      | 70 +++++++++++++++++++
 .../Filing/UpdateFinancialProfile/index.tsx   |  1 +
 .../Filing/UpdateFinancialProfile/types.ts    | 25 ++++++-
 .../updateFinancialProfile.less               |  4 ++
 9 files changed, 136 insertions(+), 89 deletions(-)
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/updateFinancialProfile.less

diff --git a/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
index c80e21f88..e8b44f73a 100644
--- a/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
@@ -16,15 +16,14 @@ function AdditionalDetails({ register }: { register: any }): JSXElement {
         Social Security number, or passwords.
       </SectionIntro>
       <WellContainer className='u-mt30'>
-        <Label htmlFor='stuff'>
+        <Label htmlFor='additional_details'>
           Additional details
           <LabelOptional />
         </Label>
         <TextArea
-          id='stuff'
+          id='additional_details'
           isFullWidth
           {...register('additional_details')}
-          placeholder=''
           rows='5'
         />
       </WellContainer>
diff --git a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
index e36c39e2d..76e3224a2 100644
--- a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
@@ -2,48 +2,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
-import {
-  FinancialInstitutionDetails,
-  formatDomains,
-} from '../ViewInstitutionProfile/FinancialInstitutionDetails';
+import { FinancialInstitutionDetails } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 
-const fields: string[] = [
-  'name',
-  'hq_address_street_1',
-  'hq_address_street_2',
-  'hq_address_city',
-  'hq_address_state_code',
-  'hq_address_zip',
-  'lei',
-  'is_active',
-  'domains',
-];
-
 export default function FinancialInstitutionDetailsForm({
   data,
-  register,
 }: {
   data: InstitutionDetailsApiType;
-  register: any;
 }): JSXElement {
   return (
-    <>
-      <FinancialInstitutionDetails
-        heading='Review your financial institution details'
-        data={data}
-      />
-      <form>
-        {fields.map(field => {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          const value =
-            field === 'domains' ? formatDomains(data[field]) : data[field];
-
-          return (
-            <input hidden key={field} value={value} {...register(field)} />
-          );
-        })}
-      </form>
-    </>
+    <FinancialInstitutionDetails
+      heading='Review your financial institution details'
+      data={data}
+    />
   );
 }
diff --git a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
index 2e2ded038..8ca30c90a 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
@@ -12,21 +12,15 @@ import { scenarios } from 'pages/Summary/Summary.data';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Navigate, useParams } from 'react-router-dom';
+import { Five } from 'utils/constants';
 import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import AdditionalDetails from './AdditionalDetails';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 import UpdateAffiliateInformation from './UpdateAffiliateInformation';
 import UpdateIdentifyingInformation from './UpdateIdentifyingInformation';
+import buildUfpDefaults from './buildUfpDefaults';
 
-// TODO: defaultValues was causing the `value` provided to `<input>` fields to get wiped out.
-//   Figure out a smart way to combine them.
-// const defaultValues: UFPSchema = {
-//   tin: '',
-//   checkboxes: Object.fromEntries(
-//     checkboxOptions.map(option => [option.id, false]),
-//   ),
-// };
 export default function UFPForm({
   data,
 }: {
@@ -34,19 +28,21 @@ export default function UFPForm({
 }): JSXElement {
   const [submitted, setSubmitted] = useState(false);
   const { lei } = useParams();
+
+  const defaultValues = buildUfpDefaults(data);
   const isRoutingEnabled = getIsRoutingEnabled();
 
-  // TODO: Generate default values from `data`
   const {
     register,
     control,
     setValue,
     trigger,
     getValues,
-    formState: { errors: formErrors },
+    reset,
+    formState: { errors: formErrors, dirtyFields },
   } = useForm<UFPSchema>({
     resolver: zodResolver(ufpSchema),
-    // defaultValues,
+    defaultValues,
   });
 
   // TODO: Render this based on the actual API call result
@@ -73,11 +69,13 @@ export default function UFPForm({
     const preFormattedData = getValues();
     // TODO: Will be used for debugging after clicking 'Submit'
     // eslint-disable-next-line no-console
-    console.log('data to be submitted (before format):', preFormattedData);
+    console.log(
+      'data to be submitted (before format):',
+      JSON.stringify(preFormattedData, null, Five),
+    );
 
+    // TODO: Send data in human readable format
     // POST formData
-    // TODO: Will be used for debugging after clicking 'Submit'
-    // eslint-disable-next-line no-console, @typescript-eslint/no-unused-vars
     // const response = await submitUpdateFinancialProfile(
     //   auth,
     //   preFormattedData,
@@ -86,14 +84,17 @@ export default function UFPForm({
     setSubmitted(true);
   };
 
-  // TODO: Clear all checkboxes and inputs -- use setValue(defaultValues)
-  // eslint-disable-next-line no-console
-  const onClearform = (): void => console.log('onClearform clicked');
+  // Reset form data to the defaultValues
+  const onClearform = (): void => reset();
 
   // TODO: Will be used for debugging errors after clicking 'Submit'
   // eslint-disable-next-line no-console
   console.log('formErrors:', formErrors);
 
+  // TODO: Use dirtyFields to determine which data to send to SBL Help
+  // TODO: Nested fields (sbl_institution_types) do not register as dirty when content changes, will need to always check those values
+  console.log('dirtyFields:', dirtyFields);
+
   return (
     <FormWrapper>
       <div id='update-financial-profile'>
@@ -124,7 +125,7 @@ export default function UFPForm({
           />
         </FormHeaderWrapper>
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
-        <FinancialInstitutionDetailsForm {...{ data, register }} />
+        <FinancialInstitutionDetailsForm {...{ data }} />
         <UpdateIdentifyingInformation
           {...{ data, register, setValue, getValues, control, formErrors }}
         />
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
index aa215397a..0e55de905 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
@@ -41,16 +41,14 @@ function UpdateAffiliateInformation({
         <InputEntry
           label='Name'
           id='parent_legal_name'
-          {...register('parent_legal_name', {
-            value: data.parent_legal_name,
-          })}
+          {...register('parent_legal_name')}
           errors={{}}
           showError
         />
         <InputEntry
           label='Legal Entity Identifier (LEI)'
           id='parent_lei'
-          {...register('parent_lei', { value: data.parent_lei })}
+          {...register('parent_lei')}
           errors={{}}
           showError
           isOptional
@@ -58,7 +56,7 @@ function UpdateAffiliateInformation({
         <InputEntry
           label='Research, Statistics, Supervision, Discount (RSSD) ID'
           id='parent_rssd_id'
-          {...register('parent_rssd_id', { value: data.parent_rssd_id })}
+          {...register('parent_rssd_id')}
           errors={{}}
           showError
           isOptional
@@ -72,16 +70,14 @@ function UpdateAffiliateInformation({
         <InputEntry
           label='Name'
           id='top_holder_legal_name'
-          {...register('top_holder_legal_name', {
-            value: data.top_holder_legal_name,
-          })}
+          {...register('top_holder_legal_name')}
           errors={{}}
           showError
         />
         <InputEntry
           label='Legal Entity Identifier (LEI)'
           id='top_holder_lei'
-          {...register('top_holder_lei', { value: data.top_holder_lei })}
+          {...register('top_holder_lei')}
           errors={{}}
           showError
           isOptional
@@ -89,9 +85,7 @@ function UpdateAffiliateInformation({
         <InputEntry
           label='Research, Statistics, Supervision, Discount (RSSD) ID'
           id='top_holder_rssd_id'
-          {...register('top_holder_rssd_id', {
-            value: data.top_holder_rssd_id,
-          })}
+          {...register('top_holder_rssd_id')}
           errors={{}}
           showError
           isOptional
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 8e001125b..7c192b131 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -67,7 +67,6 @@ function UpdateIdentifyingInformation({
   data,
   register,
   setValue,
-  getValues,
   control,
   formErrors,
 }: {
@@ -97,7 +96,7 @@ function UpdateIdentifyingInformation({
         </Label>
         <TextInput
           id={elements.taxID}
-          {...register(elements.taxID, { value: data[elements.taxID] })}
+          {...register(elements.taxID)}
           isFullWidth
         />
         <Label className='u-mt30' htmlFor={elements.rssdID}>
@@ -105,7 +104,7 @@ function UpdateIdentifyingInformation({
         </Label>
         <TextInput
           id={elements.rssdID}
-          {...register(elements.rssdID, { value: data[elements.rssdID] })}
+          {...register(elements.rssdID)}
           isFullWidth
         />
         <FieldFederalPrudentialRegulator {...{ register, data }} />
@@ -122,18 +121,12 @@ function UpdateIdentifyingInformation({
             {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
               const optionId = `sbl_institution_types.${option.id}`;
 
-              const onChange = (
+              const onCheckboxChange = (
                 event: React.ChangeEvent<HTMLInputElement>,
               ): void => {
                 setValue(optionId, event.target.checked);
               };
 
-              const defaultChecked = data.sbl_institution_types?.some(item => {
-                const apiTypeId = sblInstitutionTypeMap[option.id];
-                if (typeof item === 'string') return item === apiTypeId;
-                return item.sbl_type.id === apiTypeId;
-              });
-
               return (
                 <ListItem key={option.id}>
                   <FormController
@@ -142,20 +135,14 @@ function UpdateIdentifyingInformation({
                         <Checkbox
                           id={option.id}
                           label={option.label}
-                          {...field}
-                          onChange={onChange}
-                          checked={
-                            getValues(optionId) === undefined
-                              ? defaultChecked
-                              : getValues(optionId)
-                          }
+                          {...register(optionId)}
+                          checked={field.value}
+                          onChange={onCheckboxChange}
                         />
                       );
                     }}
                     control={control}
                     name={optionId}
-                    // TODO: Add special rules or remove this comment
-                    // rules={{ required: 'This field is required' }}
                   />
                 </ListItem>
               );
diff --git a/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx b/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
new file mode 100644
index 000000000..160bc067d
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
@@ -0,0 +1,70 @@
+import { formatDomains } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
+import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
+import type { UFPSchema } from './types';
+import { sblInstitutionTypeMap } from './types';
+
+const defaultsId = new Set(['primary_federal_regulator']);
+
+const defaultsCode = new Set(['hq_address_state']);
+
+const defaultsPlain = new Set([
+  'hq_address_street_1',
+  'hq_address_street_2',
+  'hq_address_city',
+  'hq_address_state_code',
+  'hq_address_zip',
+  'parent_lei',
+  'parent_legal_name',
+  'parent_rssd_id',
+  'top_holder_lei',
+  'top_holder_legal_name',
+  'top_holder_rssd_id',
+  'lei',
+  'name',
+  'is_active',
+  'tax_id',
+  'rssd_id',
+  'primary_federal_regulator_id',
+  'hmda_institution_type_id',
+]);
+
+// TODO:
+const buildUfpDefaults = (data: InstitutionDetailsApiType): UFPSchema => {
+  const formDefaults: UFPSchema = { additional_details: '' };
+  const keys: string[] = Object.keys(data);
+
+  for (const keyTemporary of keys) {
+    const key = keyTemporary as keyof typeof data;
+    if (defaultsPlain.has(key)) {
+      formDefaults[key] = data[key];
+    }
+
+    if (defaultsId.has(key)) {
+      formDefaults[key] = data[key].id;
+    }
+
+    if (defaultsCode.has(key)) {
+      formDefaults[key] = data[key].code;
+    }
+
+    if (key === 'sbl_institution_types') {
+      formDefaults[key] = {};
+
+      for (const sblType of data[key]) {
+        if (typeof sblType === 'string')
+          formDefaults[key][sblInstitutionTypeMap[sblType]] = true;
+        else {
+          formDefaults[key][sblInstitutionTypeMap[sblType.sbl_type.id]] = true;
+          if (sblType.sbl_type.id === '13')
+            formDefaults.sbl_institution_type_other = sblType.details;
+        }
+      }
+    }
+
+    if (key === 'domains') formDefaults[key] = formatDomains(data[key]);
+  }
+
+  return formDefaults;
+};
+
+export default buildUfpDefaults;
diff --git a/src/pages/Filing/UpdateFinancialProfile/index.tsx b/src/pages/Filing/UpdateFinancialProfile/index.tsx
index 4d6cae045..a20fbcac3 100644
--- a/src/pages/Filing/UpdateFinancialProfile/index.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/index.tsx
@@ -6,6 +6,7 @@ import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { useError500 } from 'pages/Error/Error500';
 import { useParams } from 'react-router-dom';
 import UFPForm from './UfpForm';
+import './updateFinancialProfile.less';
 
 // TODO: Decide on properties to inherit
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/src/pages/Filing/UpdateFinancialProfile/types.ts b/src/pages/Filing/UpdateFinancialProfile/types.ts
index 3328fa942..2c4af2975 100644
--- a/src/pages/Filing/UpdateFinancialProfile/types.ts
+++ b/src/pages/Filing/UpdateFinancialProfile/types.ts
@@ -121,8 +121,29 @@ export const ufpSchema = z.object({
 // export type UFPSchema = z.infer<typeof ufpSchema>;
 
 interface ExpectedObject {
-  sbl_institution_types: Record<string, boolean>;
-  tax_id: string;
+  sbl_institution_types?: Record<string, boolean>;
+  tax_id?: string;
+  hq_address_street_1?: string;
+  hq_address_street_2?: string;
+  hq_address_city?: string;
+  hq_address_state_code?: string;
+  hq_address_zip?: string;
+  parent_lei?: string;
+  parent_legal_name?: string;
+  parent_rssd_id?: string;
+  top_holder_lei?: string;
+  top_holder_legal_name?: string;
+  top_holder_rssd_id?: string;
+  lei?: string;
+  name?: string;
+  is_active?: boolean | string;
+  rssd_id?: string;
+  primary_federal_regulator_id?: string;
+  hmda_institution_type_id?: string;
+  hq_address_state?: string;
+  primary_federal_regulator?: string;
+  additional_details?: string;
+  domains?: string;
 }
 
 export type UFPSchema = ExpectedObject;
diff --git a/src/pages/Filing/UpdateFinancialProfile/updateFinancialProfile.less b/src/pages/Filing/UpdateFinancialProfile/updateFinancialProfile.less
new file mode 100644
index 000000000..3ab27c6b9
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/updateFinancialProfile.less
@@ -0,0 +1,4 @@
+// TODO: Fix this in DSR: https://github.com/cfpb/design-system-react/issues/315
+#additional_details {
+  resize: vertical;
+}
\ No newline at end of file

From 8cb40cf70cd2331f402bfddfd99080dc3b3f643f Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 08:05:02 -0500
Subject: [PATCH 19/54] refactor(InputEntry): InputEntry's label prop only
 expects string

---
 src/components/InputEntry.tsx    | 24 ++++++++----------------
 src/components/LabelOptional.tsx | 10 ++--------
 src/utils/isString.tsx           |  5 -----
 3 files changed, 10 insertions(+), 29 deletions(-)
 delete mode 100644 src/utils/isString.tsx

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index d74daf959..5366f16c1 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -5,7 +5,6 @@ import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Heading, TextInput } from 'design-system-react';
-import isString from 'utils/isString';
 import LabelOptional from './LabelOptional';
 
 interface InputEntryProperties
@@ -42,22 +41,15 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
       <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
         <Element name={id}>
           <label htmlFor={id}>
-            {isString(label) ? (
-              <div>
-                <Heading
-                  type='4'
-                  className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
-                >
-                  {label}
-                  <LabelOptional {...{ isOptional }} />
-                </Heading>
-              </div>
-            ) : (
-              <div>
+            <div>
+              <Heading
+                type='4'
+                className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
+              >
                 {label}
-                <LabelOptional {...{ isOptional }} />
-              </div>
-            )}
+                {isOptional ? <LabelOptional /> : null}
+              </Heading>
+            </div>
           </label>
           {children}
           {/* TODO: Will put in a prop to style the email input as a regular text */}
diff --git a/src/components/LabelOptional.tsx b/src/components/LabelOptional.tsx
index 445b02ac1..9c89eb1d4 100644
--- a/src/components/LabelOptional.tsx
+++ b/src/components/LabelOptional.tsx
@@ -1,12 +1,6 @@
-import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
-
-function LabelOptional({ isOptional }: { isOptional?: boolean }): JSXElement {
-  if (!isOptional) return null;
+function LabelOptional(): JSX.Element {
   return (
-    <span className='text-[#43484e] text-base font-normal'>
-      {' '}
-      (optional)
-    </span>
+    <span className='text-base font-normal text-[#43484e]'> (optional)</span>
   );
 }
 
diff --git a/src/utils/isString.tsx b/src/utils/isString.tsx
deleted file mode 100644
index c4fba7972..000000000
--- a/src/utils/isString.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const isString = (item: JSX.Element | string): item is string => {
-  return typeof item === 'string';
-};
-
-export default isString;

From f212854e664fc3a6d0b8d250f0414e01c20f1af8 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 14:50:18 -0500
Subject: [PATCH 20/54] feat(poc): Point of Contact - start

---
 src/App.tsx                        | 9 +++++++++
 src/pages/PointOfContact/index.tsx | 7 +++++++
 2 files changed, 16 insertions(+)
 create mode 100644 src/pages/PointOfContact/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3752135e0..c742f3453 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,6 +43,7 @@ const PaperworkNotice = lazy(
   async () => import('pages/Filing/PaperworkNotice'),
 );
 const Summary = lazy(async () => import('pages/Summary/Summary'));
+const PointOfContact = lazy(async () => import('pages/PointOfContact'));
 
 // allow developers to toggle routing in development
 const isRoutingEnabled = getIsRoutingEnabled();
@@ -228,6 +229,14 @@ export default function App(): ReactElement {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path='/point-of-contact'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <PointOfContact />
+                </ProtectedRoute>
+              }
+            />
             <Route path='/privacy-act-notice' element={<PrivacyActNotice />} />
             <Route
               path='/paperwork-reduction-act-notice'
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
new file mode 100644
index 000000000..be1f90a51
--- /dev/null
+++ b/src/pages/PointOfContact/index.tsx
@@ -0,0 +1,7 @@
+import FormWrapper from 'components/FormWrapper';
+
+function PointOfContact(): JSX.Element {
+  return <FormWrapper>Point of Contact</FormWrapper>;
+}
+
+export default PointOfContact;

From 9b693677392dbe7bc6673f662038e384b5046c0d Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:20:54 -0500
Subject: [PATCH 21/54] feat(poc): point of contact wip2

---
 src/pages/PointOfContact/index.tsx            |  56 ++++++++-
 .../ProfileForm/CreateProfileForm/index.tsx   | 106 +++++++++---------
 2 files changed, 111 insertions(+), 51 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index be1f90a51..8bc18edea 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -1,7 +1,61 @@
+import FieldGroup from 'components/FieldGroup';
+import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
+import InputEntry from 'components/InputEntry';
+import SectionIntro from 'components/SectionIntro';
+import { TextIntroduction } from 'design-system-react';
 
 function PointOfContact(): JSX.Element {
-  return <FormWrapper>Point of Contact</FormWrapper>;
+  return (
+    <FormWrapper>
+      <div id='point-of-contact'>
+        <FormHeaderWrapper crumbTrailMarginTop={false}>
+          <TextIntroduction
+            heading='Provide the point of contact'
+            subheading='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
+            description={
+              <>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation.
+              </>
+            }
+          />
+        </FormHeaderWrapper>
+
+        <div className='mb-[1.875rem]'>
+          <SectionIntro heading='Provide the point of contact for your submission'>
+            Enter the name and business contact information of a person who may
+            be contacted by the Bureau or other regulators with questions about
+            your financial institution&apos;s submission.
+          </SectionIntro>
+        </div>
+
+        <div className='mb-[3.75rem]'>
+          <FieldGroup>
+            <InputEntry label='First name' id='firstName' />
+            <InputEntry label='Last name' id='lastName' />
+            <InputEntry label='Phone Number' id='phoneNumber' />
+            <InputEntry label='Email Address' id='email' />
+            <InputEntry
+              label='Street address line 1'
+              id='street_address_line_1'
+            />
+            <InputEntry
+              label='Street address line 2'
+              id='street_address_line_2'
+              isOptional
+            />
+            <InputEntry label='City' id='city' />
+            <div className='flex gap-[1.875rem]'>
+              <InputEntry className='flex-1' label='State' id='state' />
+              <InputEntry className='flex-1' label='Zip' id='zip' />
+            </div>
+          </FieldGroup>
+        </div>
+      </div>
+    </FormWrapper>
+  );
 }
 
 export default PointOfContact;
diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
index b25e4f63e..edf2fa4f1 100644
--- a/src/pages/ProfileForm/CreateProfileForm/index.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -105,57 +105,63 @@ function CreateProfileForm(): JSX.Element {
         </FormHeaderWrapper>
         <Step1FormInfoHeader />
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
-        <Step1FormInfoFieldGroup formErrors={formErrors} register={register} />
-        <SectionIntro heading='Provide your financial institution details'>
-          Provide the name and LEI of the financial institution for which you
-          are authorized to file. If you are authorized to file for an
-          additional financial institution, click “Add a financial institution".
-        </SectionIntro>
-        {fields.map((field, index) => {
-          const onRemoveThisInstitution = (): void => remove(index);
-          return (
-            <div className='flex flex-col' key={`${field.id}`}>
-              {index !== 0 && (
-                <LinkButton
-                  className='ml-auto'
-                  icon='minus'
-                  onClick={onRemoveThisInstitution}
-                >
-                  Remove this financial institution
-                </LinkButton>
-              )}
-              <AddFinancialInstitution
-                index={index}
-                register={register}
-                formErrors={formErrors}
-              />
-            </div>
-          );
-        })}
-        <div className='mb-[3.75rem]'>
-          <LinkButton onClick={onAppendFinancialInstitutions} icon='plus'>
-            Add a financial institution
-          </LinkButton>
-        </div>
-        <FormButtonGroup>
-          <Button
-            appearance='primary'
-            // TODO: Resolve this TypeScript Error
-            // https://github.com/cfpb/sbl-frontend/issues/237
-            // eslint-disable-next-line @typescript-eslint/no-misused-promises
-            onClick={onSubmitButtonAction}
-            label='Submit'
-            aria-label='Submit User Profile'
-            size='default'
-            type='submit'
+        <form>
+          <Step1FormInfoFieldGroup
+            formErrors={formErrors}
+            register={register}
           />
-          <Button
-            label='Clear form'
-            onClick={onClearform}
-            appearance='warning'
-            asLink
-          />
-        </FormButtonGroup>
+          <SectionIntro heading='Provide your financial institution details'>
+            Provide the name and LEI of the financial institution for which you
+            are authorized to file. If you are authorized to file for an
+            additional financial institution, click &ldquo;Add a financial
+            institution&rdquo;.
+          </SectionIntro>
+          {fields.map((field, index) => {
+            const onRemoveThisInstitution = (): void => remove(index);
+            return (
+              <div className='flex flex-col' key={`${field.id}`}>
+                {index !== 0 && (
+                  <LinkButton
+                    className='ml-auto'
+                    icon='minus'
+                    onClick={onRemoveThisInstitution}
+                  >
+                    Remove this financial institution
+                  </LinkButton>
+                )}
+                <AddFinancialInstitution
+                  index={index}
+                  register={register}
+                  formErrors={formErrors}
+                />
+              </div>
+            );
+          })}
+          <div className='mb-[3.75rem]'>
+            <LinkButton onClick={onAppendFinancialInstitutions} icon='plus'>
+              Add a financial institution
+            </LinkButton>
+          </div>
+          <FormButtonGroup>
+            <Button
+              appearance='primary'
+              // TODO: Resolve this TypeScript Error
+              // https://github.com/cfpb/sbl-frontend/issues/237
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
+              onClick={onSubmitButtonAction}
+              label='Submit'
+              aria-label='Submit User Profile'
+              size='default'
+              type='submit'
+            />
+            <Button
+              label='Clear form'
+              onClick={onClearform}
+              appearance='warning'
+              asLink
+            />
+          </FormButtonGroup>
+        </form>
       </div>
     </FormWrapper>
   );

From 0dc2371972e442d436dd73453475345c0c40c867 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:21:21 -0500
Subject: [PATCH 22/54] style: InputEntry accepts a className prop

---
 src/components/InputEntry.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index 95bcb7fb0..166883d7b 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -22,6 +22,7 @@ interface InputEntryProperties
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
+      className,
       id,
       errorMessage,
       label,
@@ -36,7 +37,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   ) => {
     const handleError = Boolean(showError && errorMessage);
     return (
-      <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
+      <div className={`${isLast ? '' : 'mb-[0.9375rem]'} ${className}`}>
         <Element name={id}>
           <label htmlFor={id}>
             {isString(label) ? (

From 240fbb2ea609309262acb956482290f2b692cc07 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:26:10 -0500
Subject: [PATCH 23/54] feat(poc): added button group

---
 src/pages/PointOfContact/index.tsx | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 8bc18edea..a36c43b1c 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -1,9 +1,10 @@
 import FieldGroup from 'components/FieldGroup';
+import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import InputEntry from 'components/InputEntry';
 import SectionIntro from 'components/SectionIntro';
-import { TextIntroduction } from 'design-system-react';
+import { Button, TextIntroduction } from 'design-system-react';
 
 function PointOfContact(): JSX.Element {
   return (
@@ -31,7 +32,7 @@ function PointOfContact(): JSX.Element {
           </SectionIntro>
         </div>
 
-        <div className='mb-[3.75rem]'>
+        <form className='mb-[3.75rem]'>
           <FieldGroup>
             <InputEntry label='First name' id='firstName' />
             <InputEntry label='Last name' id='lastName' />
@@ -52,7 +53,23 @@ function PointOfContact(): JSX.Element {
               <InputEntry className='flex-1' label='Zip' id='zip' />
             </div>
           </FieldGroup>
-        </div>
+          <FormButtonGroup>
+            <Button
+              appearance='primary'
+              // onClick={() => {}}
+              label='Save and Continue'
+              aria-label='Save and continue'
+              size='default'
+              type='submit'
+            />
+            <Button
+              label='Clear form'
+              // onClick={() => {}}
+              appearance='warning'
+              asLink
+            />
+          </FormButtonGroup>
+        </form>
       </div>
     </FormWrapper>
   );

From 05c7b707d2c8fe97a4a6acd29f122783a1408a38 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:35:43 -0500
Subject: [PATCH 24/54] feat(poc): use of Select for states

---
 src/pages/PointOfContact/index.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index a36c43b1c..6da1e9883 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -4,7 +4,7 @@ import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import InputEntry from 'components/InputEntry';
 import SectionIntro from 'components/SectionIntro';
-import { Button, TextIntroduction } from 'design-system-react';
+import { Button, Select, TextIntroduction } from 'design-system-react';
 
 function PointOfContact(): JSX.Element {
   return (
@@ -49,7 +49,31 @@ function PointOfContact(): JSX.Element {
             />
             <InputEntry label='City' id='city' />
             <div className='flex gap-[1.875rem]'>
-              <InputEntry className='flex-1' label='State' id='state' />
+              <div className='flex-1'>
+                <Select
+                  id='states'
+                  label='States'
+                  onChange={() => {}}
+                  options={[
+                    {
+                      label: 'Alabama',
+                      value: 'alabama',
+                    },
+                    {
+                      label: 'Alaska',
+                      value: 'alaska',
+                    },
+                    {
+                      label: 'Arizona',
+                      value: 'arizona',
+                    },
+                    {
+                      label: 'Arkansas',
+                      value: 'arkansas',
+                    },
+                  ]}
+                />
+              </div>
               <InputEntry className='flex-1' label='Zip' id='zip' />
             </div>
           </FieldGroup>

From 431bb877f1d233eba89cab5c27a5db593560e1c9 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:44:47 -0500
Subject: [PATCH 25/54] style: FieldGroup box-border at 770px

---
 src/components/FieldGroup.tsx      | 4 +++-
 src/components/InputEntry.tsx      | 2 +-
 src/pages/PointOfContact/index.tsx | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/FieldGroup.tsx b/src/components/FieldGroup.tsx
index 86502ed5e..4987fe523 100644
--- a/src/components/FieldGroup.tsx
+++ b/src/components/FieldGroup.tsx
@@ -1,10 +1,12 @@
+import type { ReactNode } from 'react';
+
 interface FieldGroupProperties {
   children: ReactNode;
 }
 
 function FieldGroup({ children }: FieldGroupProperties): JSX.Element {
   return (
-    <div className='max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
+    <div className='box-border max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
       {children}
     </div>
   );
diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index 166883d7b..b93372f8b 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -22,7 +22,7 @@ interface InputEntryProperties
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
-      className,
+      className = '',
       id,
       errorMessage,
       label,
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 6da1e9883..dd95a8fbb 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -32,7 +32,7 @@ function PointOfContact(): JSX.Element {
           </SectionIntro>
         </div>
 
-        <form className='mb-[3.75rem]'>
+        <form className='mb-[3.75rem] w-full'>
           <FieldGroup>
             <InputEntry label='First name' id='firstName' />
             <InputEntry label='Last name' id='lastName' />

From 0060dd5fc5af5d5adb9d3ba83761a63fccf5adcb Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:47:31 -0500
Subject: [PATCH 26/54] feat: LabelOptional - Street Address line 2

---
 src/components/InputEntry.tsx    | 14 +++++++-------
 src/components/LabelOptional.tsx | 11 +++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 src/components/LabelOptional.tsx

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index b93372f8b..91ff55a5b 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -4,8 +4,8 @@ import { forwardRef } from 'react';
 import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
+import LabelOptional from 'components/LabelOptional';
 import { Heading, TextInput } from 'design-system-react';
-import isString from 'utils/isString';
 
 interface InputEntryProperties
   extends PropsWithoutRef<JSX.IntrinsicElements['input']> {
@@ -17,12 +17,12 @@ interface InputEntryProperties
   hideInput?: boolean;
   showError?: boolean;
   children?: ReactNode;
+  isOptional?: boolean;
 }
 
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
-      className = '',
       id,
       errorMessage,
       label,
@@ -31,25 +31,25 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
       isLast = false,
       showError = true,
       children,
+      isOptional = false,
       ...properties
     },
     reference,
   ) => {
     const handleError = Boolean(showError && errorMessage);
     return (
-      <div className={`${isLast ? '' : 'mb-[0.9375rem]'} ${className}`}>
+      <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
         <Element name={id}>
           <label htmlFor={id}>
-            {isString(label) ? (
+            <div>
               <Heading
                 type='4'
                 className={`${hideInput ? 'mb-[0.5rem]' : 'mb-[0.625rem]'}`}
               >
                 {label}
+                {isOptional ? <LabelOptional /> : null}
               </Heading>
-            ) : (
-              <div>{label}</div>
-            )}
+            </div>
           </label>
           {children}
           {/* TODO: Will put in a prop to style the email input as a regular text */}
diff --git a/src/components/LabelOptional.tsx b/src/components/LabelOptional.tsx
new file mode 100644
index 000000000..9c89eb1d4
--- /dev/null
+++ b/src/components/LabelOptional.tsx
@@ -0,0 +1,11 @@
+function LabelOptional(): JSX.Element {
+  return (
+    <span className='text-base font-normal text-[#43484e]'> (optional)</span>
+  );
+}
+
+LabelOptional.defaultProps = {
+  isOptional: true,
+};
+
+export default LabelOptional;

From fbab6122f8cc480c87c3af58f448a574e609abd2 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 1 Mar 2024 15:50:22 -0500
Subject: [PATCH 27/54] style: fixed InputEntry's custom className

---
 src/components/InputEntry.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx
index 91ff55a5b..ccba12e48 100644
--- a/src/components/InputEntry.tsx
+++ b/src/components/InputEntry.tsx
@@ -23,6 +23,7 @@ interface InputEntryProperties
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
+      className = '',
       id,
       errorMessage,
       label,
@@ -38,7 +39,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   ) => {
     const handleError = Boolean(showError && errorMessage);
     return (
-      <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
+      <div className={`${isLast ? '' : 'mb-[0.9375rem]'} ${className}`}>
         <Element name={id}>
           <label htmlFor={id}>
             <div>

From 64b66c4e44e0dc98a79a0ee9dd08636f01ffe490 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 4 Mar 2024 10:44:59 -0700
Subject: [PATCH 28/54] [Update FI] New TODO - Navigate based on validation
 success

---
 src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
index 2e2ded038..b25e7a5a6 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
@@ -50,10 +50,11 @@ export default function UFPForm({
   });
 
   // TODO: Render this based on the actual API call result
+  // TODO: No need to track "submitted" state once we implement validations
+  //     https://github.com/cfpb/sbl-frontend/pull/276/files#r1509023108
   if (isRoutingEnabled && submitted) {
     return (
       <Navigate
-        replace
         to='/summary'
         state={{ scenario: scenarios.SuccessInstitutionProfileUpdate }}
       />

From 6b802dbf8da520e4b56545f16a2fc8929a98fc57 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 4 Mar 2024 10:51:48 -0700
Subject: [PATCH 29/54] [Update FI] Add placeholder for InputEntry prop
 errorMessage

---
 .../UpdateAffiliateInformation.tsx                   | 12 ++++++------
 .../UpdateIdentifyingInformation.tsx                 |  5 +++--
 src/utils/constants.ts                               |  1 +
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
index aa215397a..9e54355a3 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
@@ -44,14 +44,14 @@ function UpdateAffiliateInformation({
           {...register('parent_legal_name', {
             value: data.parent_legal_name,
           })}
-          errors={{}}
+          errorMessage={undefined}
           showError
         />
         <InputEntry
           label='Legal Entity Identifier (LEI)'
           id='parent_lei'
           {...register('parent_lei', { value: data.parent_lei })}
-          errors={{}}
+          errorMessage={undefined}
           showError
           isOptional
         />
@@ -59,7 +59,7 @@ function UpdateAffiliateInformation({
           label='Research, Statistics, Supervision, Discount (RSSD) ID'
           id='parent_rssd_id'
           {...register('parent_rssd_id', { value: data.parent_rssd_id })}
-          errors={{}}
+          errorMessage={undefined}
           showError
           isOptional
         />
@@ -75,14 +75,14 @@ function UpdateAffiliateInformation({
           {...register('top_holder_legal_name', {
             value: data.top_holder_legal_name,
           })}
-          errors={{}}
+          errorMessage={undefined}
           showError
         />
         <InputEntry
           label='Legal Entity Identifier (LEI)'
           id='top_holder_lei'
           {...register('top_holder_lei', { value: data.top_holder_lei })}
-          errors={{}}
+          errorMessage={undefined}
           showError
           isOptional
         />
@@ -92,7 +92,7 @@ function UpdateAffiliateInformation({
           {...register('top_holder_rssd_id', {
             value: data.top_holder_rssd_id,
           })}
-          errors={{}}
+          errorMessage={undefined}
           showError
           isOptional
         />
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 8e001125b..56a9fb5af 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -17,6 +17,7 @@ import {
 } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { Controller as FormController } from 'react-hook-form';
+import { Zero } from 'utils/constants';
 import InputEntry from '../../../components/InputEntry';
 import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
@@ -76,7 +77,7 @@ function UpdateIdentifyingInformation({
   setValue: any;
   getValues: any;
   control: any;
-  formErrors: any;
+  formErrors: string[];
 }): JSXElement {
   const typeOtherData = data.sbl_institution_types?.find(item => {
     if (typeof item === 'string') return false;
@@ -170,7 +171,7 @@ function UpdateIdentifyingInformation({
                   ? ''
                   : typeOtherData.details,
             })}
-            errors={formErrors}
+            errorMessage={formErrors[Zero]}
             showError
           />
         </FieldGroup>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index aa06d7188..aad8ec9da 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,4 +1,5 @@
 // Needed due to ESLint rule: @typescript-eslint/no-magic-numbers
 
+export const Zero = 0;
 export const One = 1;
 export const Five = 5;

From 926e1544c7fae10b4983a5c6b17792cc2d99e757 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Mon, 4 Mar 2024 11:24:52 -0700
Subject: [PATCH 30/54] [FormSectionWrapper] Extract to shared, reusable
 component

---
 src/components/FormSectionWrapper.tsx               | 11 +++++++++++
 .../UpdateFinancialProfile/AdditionalDetails.tsx    |  6 +++---
 .../UpdateAffiliateInformation.tsx                  |  9 ++++-----
 .../UpdateIdentifyingInformation.tsx                | 13 +++----------
 .../FinancialInstitutionDetails.tsx                 |  9 ++++-----
 5 files changed, 25 insertions(+), 23 deletions(-)
 create mode 100644 src/components/FormSectionWrapper.tsx

diff --git a/src/components/FormSectionWrapper.tsx b/src/components/FormSectionWrapper.tsx
new file mode 100644
index 000000000..c1f31a5ef
--- /dev/null
+++ b/src/components/FormSectionWrapper.tsx
@@ -0,0 +1,11 @@
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+
+export function FormSectionWrapper({
+  children,
+}: {
+  children: JSXElement[];
+}): JSXElement {
+  return <div className='u-mt60'>{children}</div>;
+}
+
+export default FormSectionWrapper;
diff --git a/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
index c80e21f88..e532d3aca 100644
--- a/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/AdditionalDetails.tsx
@@ -5,11 +5,11 @@ import LabelOptional from 'components/LabelOptional';
 import SectionIntro from 'components/SectionIntro';
 import { Label, TextArea, WellContainer } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
-import { SectionWrapper } from './UpdateIdentifyingInformation';
+import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 
 function AdditionalDetails({ register }: { register: any }): JSXElement {
   return (
-    <SectionWrapper>
+    <FormSectionWrapper>
       <SectionIntro heading='Provide any additional details'>
         Do not include personal identifiable information (PII) or other
         sensitive information in the field below, such as your personal address,
@@ -28,7 +28,7 @@ function AdditionalDetails({ register }: { register: any }): JSXElement {
           rows='5'
         />
       </WellContainer>
-    </SectionWrapper>
+    </FormSectionWrapper>
   );
 }
 
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
index 9e54355a3..fa1287386 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
@@ -9,6 +9,7 @@ import {
 } from 'design-system-react';
 import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
 import type { ReactNode } from 'react';
+import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 import InputEntry from '../../../components/InputEntry';
 
 function UpdateAffiliateInformation({
@@ -23,10 +24,8 @@ function UpdateAffiliateInformation({
   register?: any;
 }): JSX.Element {
   return (
-    <div className='affiliate-information'>
-      <Heading type='2' className='u-mt60'>
-        {heading}
-      </Heading>
+    <FormSectionWrapper>
+      <Heading type='2'>{heading}</Heading>
       <Paragraph>
         To request changes to an LEI-based affiliate, visit <Links.GLIEF />. To
         request changes to an RSSD ID- based affiliate, visit <Links.NIC />. If
@@ -97,7 +96,7 @@ function UpdateAffiliateInformation({
           isOptional
         />
       </WellContainer>
-    </div>
+    </FormSectionWrapper>
   );
 }
 
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 56a9fb5af..c7359a391 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -18,20 +18,13 @@ import {
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { Controller as FormController } from 'react-hook-form';
 import { Zero } from 'utils/constants';
+import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 import InputEntry from '../../../components/InputEntry';
 import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
 import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import type { CheckboxOption } from './types';
 import { checkboxOptions, sblInstitutionTypeMap } from './types';
 
-export function SectionWrapper({
-  children,
-}: {
-  children: JSXElement[];
-}): JSXElement {
-  return <div className='u-mt60'>{children}</div>;
-}
-
 const elements = {
   taxID: 'tax_id',
   rssdID: 'rssd_id',
@@ -85,7 +78,7 @@ function UpdateIdentifyingInformation({
   });
 
   return (
-    <SectionWrapper>
+    <FormSectionWrapper>
       <SectionIntro heading='Update your financial institution identifying information'>
         If your financial institution has an RSSD ID, provide it here and we
         will pull your Federal prudential regulator and TIN from{' '}
@@ -176,7 +169,7 @@ function UpdateIdentifyingInformation({
           />
         </FieldGroup>
       </form>
-    </SectionWrapper>
+    </FormSectionWrapper>
   );
 }
 
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index 0d8e7a97c..75a9f30c2 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -2,6 +2,7 @@ import Links from 'components/CommonLinks';
 import { Heading, Link, Paragraph, WellContainer } from 'design-system-react';
 import type { ReactElement, ReactNode } from 'react';
 import { sblHelpLink } from 'utils/common';
+import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 import { DisplayField } from './DisplayField';
 import type {
   DomainType as Domain,
@@ -29,10 +30,8 @@ export function FinancialInstitutionDetails({
   heading?: ReactNode;
 }): JSX.Element {
   return (
-    <>
-      <Heading type='2' className='u-mt60'>
-        {heading}
-      </Heading>
+    <FormSectionWrapper>
+      <Heading type='2'>{heading}</Heading>
       <Paragraph>
         To make a change to the email domains for your financial institution,{' '}
         <Link href={sblHelpLink}>contact our support staff</Link>. To make a
@@ -67,7 +66,7 @@ export function FinancialInstitutionDetails({
           value={formatDomains(data.domains)}
         />
       </WellContainer>
-    </>
+    </FormSectionWrapper>
   );
 }
 

From 86ed9d45b2150f8c85387f50c15d65c4da8d6cd2 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Wed, 6 Mar 2024 11:50:02 -0700
Subject: [PATCH 31/54] [LabelOptional] Remove dead code

---
 src/components/LabelOptional.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/LabelOptional.tsx b/src/components/LabelOptional.tsx
index 9c89eb1d4..b510c7f4c 100644
--- a/src/components/LabelOptional.tsx
+++ b/src/components/LabelOptional.tsx
@@ -4,8 +4,4 @@ function LabelOptional(): JSX.Element {
   );
 }
 
-LabelOptional.defaultProps = {
-  isOptional: true,
-};
-
 export default LabelOptional;

From f5fb4d6dccaaa0d8377924bfec842b46293ab59d Mon Sep 17 00:00:00 2001
From: S T <shindigira@gmail.com>
Date: Wed, 6 Mar 2024 14:54:09 -0500
Subject: [PATCH 32/54] feat: Zod Schema Update - Centralize form types, Regex
 checks to TIN, LEI (#290)

closes #273

### Changes
- feat: Moved `ProfileForm` types to `types/formTypes`.
- feat: Addressed the extra _approval_ field on `Get Associated
Institution` request.
- feat: Adds the `getZodKeys` function to extract flattened fields from
Zod Schemas
- todo: Added TODO for handling the edge case of where fetched financial
institutions fail input validation -
https://github.com/cfpb/sbl-frontend/issues/292

### Notes
@meissadia This should be used in Phase 4 of Update your Financial
Institution - Zod and TypeScript handling


### Reference
- getZodKeys: https://github.com/colinhacks/zod/discussions/2134
---
 .../requests/fetchAssociatedInstitutions.ts   |   6 +-
 src/api/requests/fetchInstitutionDetails.ts   |   2 +-
 src/api/requests/fetchInstitutions.ts         |   2 +-
 src/api/requests/submitUserProfile.ts         |   2 +-
 src/api/requests/submitUserProfileFi.ts       |   2 +-
 src/components/AssociatedInstitution.tsx      |   2 +-
 src/components/FieldGroup.tsx                 |   4 +-
 src/components/FormErrorHeader.tsx            |   2 +-
 .../ReviewInstitutions.tsx                    |   2 +-
 .../FinancialInstitutionDetailsForm.tsx       |   2 +-
 .../Filing/UpdateFinancialProfile/UfpForm.tsx |   2 +-
 .../UpdateAffiliateInformation.tsx            |   2 +-
 .../UpdateIdentifyingInformation.tsx          |  10 +-
 .../buildUfpDefaults.tsx                      |   2 +-
 .../AffiliateInformation.tsx                  |   2 +-
 .../FinancialInstitutionDetails.tsx           |   8 +-
 .../IdentifyingInformation.tsx                |   2 +-
 .../institutionDetails.type.ts                |   6 -
 .../AssociatedInstitutions.tsx                |   4 +-
 .../AddFinancialInstitution.tsx               |   2 +-
 .../ProfileForm/CreateProfileForm/index.tsx   |   4 +-
 src/pages/ProfileForm/ProfileForm.data.ts     |   5 +-
 src/pages/ProfileForm/ProfileFormUtils.ts     |   2 +-
 .../AssociatedFinancialInstitutions.tsx       |  73 +++++----
 src/pages/ProfileForm/Step1Form/Step1Form.tsx |   6 +-
 .../Step1Form/Step1FormInfoFieldGroup.tsx     |   2 +-
 .../types.ts => types/formTypes.ts}           | 146 +++++++++++-------
 src/utils/getZodKeys.ts                       |  31 ++++
 28 files changed, 208 insertions(+), 127 deletions(-)
 delete mode 100644 src/pages/Filing/ViewInstitutionProfile/institutionDetails.type.ts
 rename src/{pages/ProfileForm/types.ts => types/formTypes.ts} (55%)
 create mode 100644 src/utils/getZodKeys.ts

diff --git a/src/api/requests/fetchAssociatedInstitutions.ts b/src/api/requests/fetchAssociatedInstitutions.ts
index ed2d61623..0a029b8ac 100644
--- a/src/api/requests/fetchAssociatedInstitutions.ts
+++ b/src/api/requests/fetchAssociatedInstitutions.ts
@@ -1,11 +1,11 @@
 import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { GetAssociatedApiType } from 'types/formTypes';
 
 const fetchAssociatedInstitutions = async (
   auth: SblAuthProperties,
-): Promise<InstitutionDetailsApiType[]> => {
-  return request<InstitutionDetailsApiType[]>({
+): Promise<GetAssociatedApiType[]> => {
+  return request<GetAssociatedApiType[]>({
     url: `/v1/institutions/associated`,
     method: 'get',
     headers: { Authorization: `Bearer ${auth.user?.access_token}` },
diff --git a/src/api/requests/fetchInstitutionDetails.ts b/src/api/requests/fetchInstitutionDetails.ts
index 65712f892..c3ab0b710 100644
--- a/src/api/requests/fetchInstitutionDetails.ts
+++ b/src/api/requests/fetchInstitutionDetails.ts
@@ -1,6 +1,6 @@
 import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 
 const fetchInstitutionDetails = async (
   auth: SblAuthProperties,
diff --git a/src/api/requests/fetchInstitutions.ts b/src/api/requests/fetchInstitutions.ts
index f6dedb181..3785617b9 100644
--- a/src/api/requests/fetchInstitutions.ts
+++ b/src/api/requests/fetchInstitutions.ts
@@ -1,6 +1,6 @@
 import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 
 const fetchInstitutions = async (
   auth: SblAuthProperties,
diff --git a/src/api/requests/submitUserProfile.ts b/src/api/requests/submitUserProfile.ts
index b2177e5d3..efba3fc1b 100644
--- a/src/api/requests/submitUserProfile.ts
+++ b/src/api/requests/submitUserProfile.ts
@@ -1,6 +1,6 @@
 import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { FormattedUserProfileObjectType } from 'pages/ProfileForm/types';
+import type { FormattedUserProfileObjectType } from 'types/formTypes';
 
 const submitUserProfile = async (
   auth: SblAuthProperties,
diff --git a/src/api/requests/submitUserProfileFi.ts b/src/api/requests/submitUserProfileFi.ts
index 62512220c..04cbb5617 100644
--- a/src/api/requests/submitUserProfileFi.ts
+++ b/src/api/requests/submitUserProfileFi.ts
@@ -3,7 +3,7 @@ import { request } from 'api/axiosService';
 import type { CaseType } from 'api/common';
 import { caseTypes } from 'api/common';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { ValidationSchemaCPF } from 'pages/ProfileForm/types';
+import type { ValidationSchemaCPF } from 'types/formTypes';
 import { One } from 'utils/constants';
 
 const formatformFieldsObject = (
diff --git a/src/components/AssociatedInstitution.tsx b/src/components/AssociatedInstitution.tsx
index 524dd53b0..737c0c718 100644
--- a/src/components/AssociatedInstitution.tsx
+++ b/src/components/AssociatedInstitution.tsx
@@ -1,6 +1,6 @@
 import { Link } from 'components/Link';
 import { Icon, ListItem } from 'design-system-react';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 
 export function AssociatedInstitution({
   name,
diff --git a/src/components/FieldGroup.tsx b/src/components/FieldGroup.tsx
index 86502ed5e..0ed929efe 100644
--- a/src/components/FieldGroup.tsx
+++ b/src/components/FieldGroup.tsx
@@ -1,10 +1,12 @@
+import type { ReactNode } from 'react';
+
 interface FieldGroupProperties {
   children: ReactNode;
 }
 
 function FieldGroup({ children }: FieldGroupProperties): JSX.Element {
   return (
-    <div className='max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
+    <div className='field-group max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
       {children}
     </div>
   );
diff --git a/src/components/FormErrorHeader.tsx b/src/components/FormErrorHeader.tsx
index 752d6f676..cea505b38 100644
--- a/src/components/FormErrorHeader.tsx
+++ b/src/components/FormErrorHeader.tsx
@@ -2,7 +2,7 @@ import { Alert, List, ListItem } from 'design-system-react';
 import type { FieldErrors } from 'react-hook-form';
 import { Element, Link } from 'react-scroll';
 
-import { FormFieldsHeaderError as formFieldsHeaderError } from 'pages/ProfileForm/types';
+import { FormFieldsHeaderError as formFieldsHeaderError } from 'types/formTypes';
 import { formDelimiter } from 'utils/common';
 import getAllProperties from 'utils/getAllProperties';
 
diff --git a/src/pages/AuthenticatedLanding/ReviewInstitutions.tsx b/src/pages/AuthenticatedLanding/ReviewInstitutions.tsx
index 1bc9b6c49..648ddb1fb 100644
--- a/src/pages/AuthenticatedLanding/ReviewInstitutions.tsx
+++ b/src/pages/AuthenticatedLanding/ReviewInstitutions.tsx
@@ -1,6 +1,6 @@
 import AssociatedInstitution from 'components/AssociatedInstitution';
 import { Alert, Heading, List, Paragraph } from 'design-system-react';
-import type { InstitutionDetailsApiType } from 'pages/ProfileForm/types';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { SubsectionWrapper } from './SubsectionWrapper';
 
 export function ReviewInstitutions({
diff --git a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
index 76e3224a2..e81ad6d0b 100644
--- a/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/FinancialInstitutionDetailsForm.tsx
@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { FinancialInstitutionDetails } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
-import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 
 export default function FinancialInstitutionDetailsForm({
   data,
diff --git a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
index 6cdf23469..c440ac429 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UfpForm.tsx
@@ -12,9 +12,9 @@ import { scenarios } from 'pages/Summary/Summary.data';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { Navigate, useParams } from 'react-router-dom';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { Five } from 'utils/constants';
 import getIsRoutingEnabled from 'utils/getIsRoutingEnabled';
-import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import AdditionalDetails from './AdditionalDetails';
 import FinancialInstitutionDetailsForm from './FinancialInstitutionDetailsForm';
 import UpdateAffiliateInformation from './UpdateAffiliateInformation';
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
index fa1287386..7ff2e0c28 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateAffiliateInformation.tsx
@@ -7,8 +7,8 @@ import {
   Paragraph,
   WellContainer,
 } from 'design-system-react';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
 import type { ReactNode } from 'react';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 import InputEntry from '../../../components/InputEntry';
 
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index d7e7d8e4d..ac2025929 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -17,11 +17,11 @@ import {
 } from 'design-system-react';
 import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
 import { Controller as FormController } from 'react-hook-form';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { Zero } from 'utils/constants';
 import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
 import InputEntry from '../../../components/InputEntry';
 import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
-import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import type { CheckboxOption } from './types';
 import { checkboxOptions, sblInstitutionTypeMap } from './types';
 
@@ -41,17 +41,17 @@ function FieldFederalPrudentialRegulator({
     <>
       <DisplayField
         label='Federal prudential regulator'
-        value={`${data.primary_federal_regulator?.name} (${data.primary_federal_regulator?.id})`}
+        value={`${data.primary_federal_regulator.name} (${data.primary_federal_regulator.id})`}
       />
       <input
         hidden
         {...register('primary_federal_regulator.name')}
-        value={data.primary_federal_regulator?.name}
+        value={data.primary_federal_regulator.name}
       />
       <input
         hidden
         {...register('primary_federal_regulator.id')}
-        value={data.primary_federal_regulator?.id}
+        value={data.primary_federal_regulator.id}
       />
     </>
   );
@@ -71,7 +71,7 @@ function UpdateIdentifyingInformation({
   control: any;
   formErrors: string[];
 }): JSXElement {
-  const typeOtherData = data.sbl_institution_types?.find(item => {
+  const typeOtherData = data.sbl_institution_types.find(item => {
     if (typeof item === 'string') return false;
     return item.sbl_type.id === sblInstitutionTypeMap.other;
   });
diff --git a/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx b/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
index 160bc067d..b906a58e4 100644
--- a/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/buildUfpDefaults.tsx
@@ -1,5 +1,5 @@
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { formatDomains } from '../ViewInstitutionProfile/FinancialInstitutionDetails';
-import type { InstitutionDetailsApiType } from '../ViewInstitutionProfile/institutionDetails.type';
 import type { UFPSchema } from './types';
 import { sblInstitutionTypeMap } from './types';
 
diff --git a/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx b/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx
index 182eaac66..b8fc9c63a 100644
--- a/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx
@@ -1,8 +1,8 @@
 import Links from 'components/CommonLinks';
 import { Heading, Paragraph, WellContainer } from 'design-system-react';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import './AffiliateInformation.less';
 import { DisplayField } from './DisplayField';
-import type { InstitutionDetailsApiType } from './institutionDetails.type';
 
 const sharedClassnames = 'u-w33pct inline';
 
diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
index 75a9f30c2..76126ae4a 100644
--- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx
@@ -1,13 +1,13 @@
 import Links from 'components/CommonLinks';
 import { Heading, Link, Paragraph, WellContainer } from 'design-system-react';
 import type { ReactElement, ReactNode } from 'react';
-import { sblHelpLink } from 'utils/common';
-import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
-import { DisplayField } from './DisplayField';
 import type {
   DomainType as Domain,
   InstitutionDetailsApiType,
-} from './institutionDetails.type';
+} from 'types/formTypes';
+import { sblHelpLink } from 'utils/common';
+import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
+import { DisplayField } from './DisplayField';
 
 const formatAddressStreet = (street: string): ReactElement | undefined => {
   if (street.length === 0) return undefined;
diff --git a/src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx b/src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx
index 954757519..e15ec2a0c 100644
--- a/src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx
+++ b/src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx
@@ -1,7 +1,7 @@
 import Links from 'components/CommonLinks';
 import { Heading, Paragraph, WellContainer } from 'design-system-react';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { DisplayField } from './DisplayField';
-import type { InstitutionDetailsApiType } from './institutionDetails.type';
 
 export function IdentifyingInformation({
   data,
diff --git a/src/pages/Filing/ViewInstitutionProfile/institutionDetails.type.ts b/src/pages/Filing/ViewInstitutionProfile/institutionDetails.type.ts
deleted file mode 100644
index fd36e0d41..000000000
--- a/src/pages/Filing/ViewInstitutionProfile/institutionDetails.type.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// Zod to TypeScript conversion in 'pages/ProfileForm/types.ts'
-
-export {
-  type DomainType,
-  type InstitutionDetailsApiType,
-} from 'pages/ProfileForm/types';
diff --git a/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx b/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx
index 71db08914..4b15c7931 100644
--- a/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx
+++ b/src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx
@@ -1,8 +1,8 @@
+import { AssociatedInstitution } from 'components/AssociatedInstitution';
 import { Link } from 'components/Link';
 import { Heading, List, Paragraph, WellContainer } from 'design-system-react';
-import type { InstitutionDetailsApiType } from 'pages/Filing/ViewInstitutionProfile/institutionDetails.type';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { sblHelpLink } from 'utils/common';
-import { AssociatedInstitution } from '../../../components/AssociatedInstitution';
 
 export default function AssociatedInstitutions({
   data: associatedInstitutions,
diff --git a/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx b/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx
index 96475753d..a212f7259 100644
--- a/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx
@@ -1,8 +1,8 @@
 import FieldGroup from 'components/FieldGroup';
 import InputEntry from 'components/InputEntry';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
+import type { ValidationSchemaCPF } from 'types/formTypes';
 import { formDelimiter } from 'utils/common';
-import type { ValidationSchemaCPF } from '../types';
 
 interface AddFinancialInstitutionProperties {
   index: number;
diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
index 2296db5b6..473f29dc4 100644
--- a/src/pages/ProfileForm/CreateProfileForm/index.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -19,9 +19,9 @@ import {
 } from 'pages/ProfileForm/ProfileFormUtils';
 import Step1FormHeader from 'pages/ProfileForm/Step1Form/Step1FormHeader';
 import Step1FormInfoHeader from 'pages/ProfileForm/Step1Form/Step1FormInfoHeader';
-import type { ValidationSchemaCPF } from 'pages/ProfileForm/types';
-import { validationSchemaCPF } from 'pages/ProfileForm/types';
 import { useFieldArray, useForm } from 'react-hook-form';
+import type { ValidationSchemaCPF } from 'types/formTypes';
+import { validationSchemaCPF } from 'types/formTypes';
 import Step1FormInfoFieldGroup from '../Step1Form/Step1FormInfoFieldGroup';
 import AddFinancialInstitution from './AddFinancialInstitution';
 
diff --git a/src/pages/ProfileForm/ProfileForm.data.ts b/src/pages/ProfileForm/ProfileForm.data.ts
index d221c438e..2165aefcd 100644
--- a/src/pages/ProfileForm/ProfileForm.data.ts
+++ b/src/pages/ProfileForm/ProfileForm.data.ts
@@ -1,7 +1,4 @@
-import type {
-  FiDataType,
-  FinancialInstitutionRS,
-} from 'pages/ProfileForm/types';
+import type { FiDataType, FinancialInstitutionRS } from 'types/formTypes';
 
 const fiData: FiDataType[] = [
   {
diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index a9a27e5a8..391202759 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -6,7 +6,7 @@ import type {
   InstitutionDetailsApiCheckedType,
   InstitutionDetailsApiType,
   ValidationSchema,
-} from 'pages/ProfileForm/types';
+} from 'types/formTypes';
 
 export const formatUserProfileObject = (
   userProfileObject: ValidationSchema,
diff --git a/src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx b/src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx
index a2b95306b..116d2823c 100644
--- a/src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx
+++ b/src/pages/ProfileForm/Step1Form/AssociatedFinancialInstitutions.tsx
@@ -1,11 +1,17 @@
 import FormParagraph from 'components/FormParagraph';
 import InputErrorMessage from 'components/InputErrorMessage';
 import { Checkbox, Paragraph } from 'design-system-react';
+import type { FieldErrors } from 'react-hook-form';
+import { Element } from 'react-scroll';
 
-import type { InstitutionDetailsApiCheckedType } from 'pages/ProfileForm/types';
+import type {
+  InstitutionDetailsApiCheckedType,
+  ValidationSchema,
+} from 'types/formTypes';
+import { One } from 'utils/constants';
 
 interface AssociatedFinancialInstitutionProperties {
-  key: string;
+  scrollId: string;
   fiObject: InstitutionDetailsApiCheckedType;
   onCheckHandler: () => void;
   hasError: boolean;
@@ -13,15 +19,16 @@ interface AssociatedFinancialInstitutionProperties {
 
 function AssociatedFinancialInstitution({
   onCheckHandler,
+  scrollId,
   fiObject,
   hasError,
   ...rest
 }: AssociatedFinancialInstitutionProperties &
   JSX.IntrinsicElements['input']): JSX.Element {
   return (
-    <div key={fiObject.lei}>
+    <Element name={scrollId}>
       <Checkbox
-        id={`${fiObject.name} ${fiObject.lei}`}
+        id={scrollId}
         className={`${hasError ? 'm-form-field__checkbox__error' : ''}`}
         label={
           <div>
@@ -40,12 +47,12 @@ function AssociatedFinancialInstitution({
         onChange={onCheckHandler}
         {...rest}
       />
-    </div>
+    </Element>
   );
 }
 
 interface AssociatedFinancialInstitutionsProperties {
-  errors: object;
+  errors: FieldErrors<ValidationSchema>;
   checkedListState: InstitutionDetailsApiCheckedType[];
   setCheckedListState: (
     callbackFunction: (
@@ -69,29 +76,41 @@ function AssociatedFinancialInstitutions({
         </FormParagraph>
       </div>
       <div>
-        {checkedListState.map((fiObject: InstitutionDetailsApiCheckedType) => {
-          const onCheckHandler = (): void => {
-            setCheckedListState(
-              (
-                previous: InstitutionDetailsApiCheckedType[],
-              ): InstitutionDetailsApiCheckedType[] =>
-                previous.map((object: InstitutionDetailsApiCheckedType) => {
-                  if (object.lei !== fiObject.lei) return object;
-                  return { ...fiObject, checked: !fiObject.checked };
-                }),
+        {checkedListState.map(
+          (fiObject: InstitutionDetailsApiCheckedType, index: number) => {
+            // used for react-scroll Element id
+            // TODO: Discussion - handle instances where financial institutions already in the database -- fail input validations
+            // https://github.com/cfpb/sbl-frontend/issues/292
+            const scrollId = `financialInstitutions-${index}-lei`;
+            const isLast: boolean = index === checkedListState.length - One;
+            const onCheckHandler = (): void => {
+              setCheckedListState(
+                (
+                  previous: InstitutionDetailsApiCheckedType[],
+                ): InstitutionDetailsApiCheckedType[] =>
+                  previous.map((object: InstitutionDetailsApiCheckedType) => {
+                    if (object.lei !== fiObject.lei) return object;
+                    return { ...fiObject, checked: !fiObject.checked };
+                  }),
+              );
+            };
+            return (
+              <div
+                key={fiObject.lei}
+                className={`${isLast ? '' : 'mb-[0.9375rem]'}`}
+              >
+                <AssociatedFinancialInstitution
+                  hasError={Boolean(errors.financialInstitutions)}
+                  scrollId={scrollId}
+                  fiObject={fiObject}
+                  onCheckHandler={onCheckHandler}
+                />
+              </div>
             );
-          };
-          return (
-            <AssociatedFinancialInstitution
-              hasError={Boolean(errors.financialInstitutions)}
-              key={fiObject.lei}
-              fiObject={fiObject}
-              onCheckHandler={onCheckHandler}
-            />
-          );
-        })}
+          },
+        )}
       </div>
-      {errors.financialInstitutions ? (
+      {errors.financialInstitutions?.message ? (
         <InputErrorMessage>
           {errors.financialInstitutions.message}
         </InputErrorMessage>
diff --git a/src/pages/ProfileForm/Step1Form/Step1Form.tsx b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
index 025102cb5..9022ac090 100644
--- a/src/pages/ProfileForm/Step1Form/Step1Form.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
@@ -21,8 +21,8 @@ import type {
   InstitutionDetailsApiCheckedType,
   InstitutionDetailsApiType,
   ValidationSchema,
-} from 'pages/ProfileForm/types';
-import { validationSchema } from 'pages/ProfileForm/types';
+} from 'types/formTypes';
+import { validationSchema } from 'types/formTypes';
 
 import { useQuery } from '@tanstack/react-query';
 
@@ -173,6 +173,8 @@ function Step1Form(): JSX.Element {
   if (isLoading) return <>Loading Institutions!</>;
   if (isError) return <>Error on loading institutions!</>;
 
+  console.log(formErrors);
+
   return (
     <FormWrapper>
       <div id='step1form'>
diff --git a/src/pages/ProfileForm/Step1Form/Step1FormInfoFieldGroup.tsx b/src/pages/ProfileForm/Step1Form/Step1FormInfoFieldGroup.tsx
index 4c0a72342..b2a27dba7 100644
--- a/src/pages/ProfileForm/Step1Form/Step1FormInfoFieldGroup.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1FormInfoFieldGroup.tsx
@@ -3,7 +3,7 @@ import FieldGroup from 'components/FieldGroup';
 import InputEntry from 'components/InputEntry';
 import { Paragraph } from 'design-system-react';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
-import type { BasicInfoSchema, ValidationSchema } from '../types';
+import type { BasicInfoSchema, ValidationSchema } from 'types/formTypes';
 
 type FormSchema = BasicInfoSchema | ValidationSchema;
 
diff --git a/src/pages/ProfileForm/types.ts b/src/types/formTypes.ts
similarity index 55%
rename from src/pages/ProfileForm/types.ts
rename to src/types/formTypes.ts
index 5ac644460..cb392e65b 100644
--- a/src/pages/ProfileForm/types.ts
+++ b/src/types/formTypes.ts
@@ -5,12 +5,13 @@ export enum FormFieldsHeaderError {
   firstName = 'Enter your first name',
   lastName = 'Enter your last name',
   email = 'Invalid email address',
-  financialInstitutions = ' Select the institution for which you are authorized to file',
+  financialInstitutions = 'Select the institution for which you are authorized to file',
   tin = 'Enter your Federal Taxpayer Identification Number (TIN)',
   name = "Enter your financial institution's name",
   lei = "Enter your financial institution's Legal Entity Identifier (LEI)",
 }
 
+// Used in react-select format (potentially can be removed)
 const financialInstitutionsSchema = z.object({
   label: z.string(),
   value: z.string(),
@@ -20,71 +21,89 @@ export type FinancialInstitutionRS = z.infer<
   typeof financialInstitutionsSchema
 >;
 
+// Used in Axios Responses
 export const domainSchema = z.object({
   domain: z.string(),
   lei: z.string(),
 });
 
-// Used in Step1Form
+// Used in most forms
 export const institutionDetailsApiTypeSchema = z.object({
-  lei: z.string().optional(),
-  is_active: z.boolean().optional(),
-  name: z.string().optional(),
-  tax_id: z.string().optional(),
-  rssd_id: z.number().optional(),
-  primary_federal_regulator: z
-    .object({
-      id: z.string(),
-      name: z.string(),
-    })
-    .optional(),
-  hmda_institution_type_id: z
-    .object({
-      id: z.string(),
-      name: z.string(),
-    })
-    .optional(),
+  lei: z
+    .string()
+    .trim()
+    .regex(/([\dA-Za-z]{20})/, {
+      message:
+        'Must be 20 characters and only contain a-z, A-Z, and 0-9 (no special characters)',
+    }),
+  is_active: z.boolean(),
+  name: z.string().trim().min(One, {
+    message: "You must enter the financial institution's name.",
+  }),
+  tax_id: z
+    .string()
+    .trim()
+    .regex(/^(\d{2}-\d{7})/, {
+      message: 'Must be 2 digits, followed by a dash, followed by 7 digits.',
+    }),
+  rssd_id: z.number(),
+  primary_federal_regulator: z.object({
+    id: z.string(),
+    name: z.string(),
+  }),
+  hmda_institution_type_id: z.object({
+    id: z.string(),
+    name: z.string(),
+  }),
   sbl_institution_types: z
-    .union([
-      z.string(),
-      z.object({
-        sbl_type: z.object({
-          id: z.string(),
-          name: z.string(),
-        }),
-        details: z.string().optional(),
+    .object({
+      sbl_type: z.object({
+        id: z.string(),
+        name: z.string(),
       }),
-    ])
-    .array()
-    .optional(),
-  hq_address_street_1: z.string().optional(),
-  hq_address_street_2: z.string().optional(),
-  hq_address_city: z.string().optional(),
+      details: z.string(),
+    })
+    .array(),
+  hq_address_street_1: z.string(),
+  hq_address_street_2: z.string(),
+  hq_address_city: z.string(),
   // Do we still need hq_address_state_code in addition to this hq_address_state object? See:
   // TODO: Ask Le about why this type name ends with a period, see:
   // https://github.com/cfpb/sbl-frontend/issues/137
-  hq_address_state: z
-    .object({
-      code: z.string(),
-      name: z.string(),
-    })
-    .optional(),
-  hq_address_state_code: z.string().optional(),
-  hq_address_zip: z.string().optional(),
-  parent_lei: z.string().optional(),
-  parent_legal_name: z.string().optional(),
-  parent_rssd_id: z.number().optional(),
-  top_holder_lei: z.string().optional(),
-  top_holder_legal_name: z.string().optional(),
-  top_holder_rssd_id: z.number().optional(),
-  domains: z.array(domainSchema).optional(),
+  hq_address_state: z.object({
+    code: z.string(),
+    name: z.string(),
+  }),
+  hq_address_state_code: z.string(),
+  hq_address_zip: z.string(),
+  parent_lei: z.string(),
+  parent_legal_name: z.string(),
+  parent_rssd_id: z.number(),
+  top_holder_lei: z.string(),
+  top_holder_legal_name: z.string(),
+  top_holder_rssd_id: z.number(),
+  domains: z.array(domainSchema),
 });
 
 export type DomainType = z.infer<typeof domainSchema>;
+
+// Used in Axios Requests
 export type InstitutionDetailsApiType = z.infer<
   typeof institutionDetailsApiTypeSchema
 >;
 
+// Get Associated -- has extra 'approved' field
+export const institutionDetailsApiTypeExtraSchema = z.object({
+  approved: z.boolean(),
+});
+
+export const getAssociatedApiSchema = institutionDetailsApiTypeSchema.merge(
+  institutionDetailsApiTypeExtraSchema,
+);
+
+// Get Associated - Axios Request
+export type GetAssociatedApiType = z.infer<typeof getAssociatedApiSchema>;
+
 // TODO: add additional institution object validation post-pvp see:
 // https://github.com/cfpb/sbl-frontend/issues/106
 const mvpFormPartialInstitutionDetailsApiTypeSchema =
@@ -99,6 +118,7 @@ export interface CheckedState {
 export type InstitutionDetailsApiCheckedType = CheckedState &
   InstitutionDetailsApiType;
 
+// Used in both CompleteYourUserProfile and CompleteYourUserProfile(no associated institution) forms
 export const basicInfoSchema = z.object({
   firstName: z.string().trim().min(One, {
     message:
@@ -131,14 +151,10 @@ export const validationSchema = basicInfoSchema.extend({
 
 export type ValidationSchema = z.infer<typeof validationSchema>;
 
-// Used in Complete Your User Profile - Salesform variant - CreateProfileForm
+// Used in Complete Your User Profile - No associated Financial Institutions - CreateProfileForm
 export const baseInstitutionDetailsSFSchema = z.object({
-  name: z.string().trim().min(One, {
-    message: "You must enter the financial institution's name.",
-  }),
-  lei: z.string().trim().min(One, {
-    message: "You must enter the financial institution's lei.",
-  }),
+  name: institutionDetailsApiTypeSchema.shape.name,
+  lei: institutionDetailsApiTypeSchema.shape.lei,
 });
 
 export const validationSchemaCPF = basicInfoSchema.extend({
@@ -156,3 +172,23 @@ export interface FormattedUserProfileObjectType {
   last_name: ValidationSchema['lastName'];
   leis?: InstitutionDetailsApiType['lei'][];
 }
+
+const phoneNumberRegex =
+  // eslint-disable-next-line unicorn/no-unsafe-regex
+  /\+(9[679]\d|8[0357-9]\d|6[7-9]\d|5[09]\d|42\d|3[578]\d|2[1-689]\d|9[0-58]|8[1246]|6[0-6]|5[1-8]|4[013-9]|3[0-469]|2[07]|7|1)(?:\W*\d){8}\W*(\d{1,2})$/;
+
+/* Matches the following regex patterns */
+// +1-234-567-8901
+// +61-234-567-89-01
+// +46-234 5678901
+// +1 (234) 56 89 901
+// +1 (234) 56-89 901
+// +46.234.567.8901
+// +1/234/567/8901
+
+// Point of Contact
+export const pocTypeSchema = z.object({
+  phoneNumber: z.string().trim().regex(phoneNumberRegex, {
+    message: "Must in '+(999)-999-9999' format",
+  }),
+});
diff --git a/src/utils/getZodKeys.ts b/src/utils/getZodKeys.ts
new file mode 100644
index 000000000..5592930c0
--- /dev/null
+++ b/src/utils/getZodKeys.ts
@@ -0,0 +1,31 @@
+import { z } from 'zod';
+
+// get zod object keys recursively
+const zodKeys = <T extends z.ZodTypeAny>(schema: T): string[] => {
+  // make sure schema is not null or undefined
+  if (schema === null || schema === undefined) return [];
+  // check if schema is nullable or optional
+  if (schema instanceof z.ZodNullable || schema instanceof z.ZodOptional)
+    return zodKeys(schema.unwrap());
+  // check if schema is an array
+  if (schema instanceof z.ZodArray) return zodKeys(schema.element);
+  // check if schema is an object
+  if (schema instanceof z.ZodObject) {
+    // get key/value pairs from schema
+    const entries = Object.entries(schema.shape);
+    // loop through key/value pairs
+    return entries.flatMap(([key, value]) => {
+      // get nested keys
+      const nested =
+        value instanceof z.ZodType
+          ? zodKeys(value).map(subKey => `${key}.${subKey}`)
+          : [];
+      // return nested keys
+      return nested.length > 0 ? nested : key;
+    });
+  }
+  // return empty array
+  return [];
+};
+
+export default zodKeys;

From 9ae4515bee7c1d5da599bd4cb7ccd2ed6d57b70c Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Wed, 6 Mar 2024 16:38:13 -0500
Subject: [PATCH 33/54] style: Remove financial institution button - bottom
 15px padding

---
 src/pages/ProfileForm/CreateProfileForm/index.tsx | 14 ++++++--------
 src/pages/ProfileForm/Step1Form/Step1Form.tsx     |  5 +++--
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
index 2296db5b6..d3f7476be 100644
--- a/src/pages/ProfileForm/CreateProfileForm/index.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -117,13 +117,11 @@ function CreateProfileForm(): JSX.Element {
           return (
             <div className='flex flex-col' key={`${field.id}`}>
               {index !== 0 && (
-                <LinkButton
-                  className='ml-auto'
-                  icon='minus'
-                  onClick={onRemoveThisInstitution}
-                >
-                  Remove this financial institution
-                </LinkButton>
+                <div className='ml-auto pb-[0.9375rem]'>
+                  <LinkButton icon='minus' onClick={onRemoveThisInstitution}>
+                    Remove this financial institution
+                  </LinkButton>
+                </div>
               )}
               <AddFinancialInstitution
                 index={index}
@@ -148,7 +146,7 @@ function CreateProfileForm(): JSX.Element {
             label='Submit'
             aria-label='Submit User Profile'
             size='default'
-            type='submit'
+            type='button'
           />
           <Button
             label='Clear form'
diff --git a/src/pages/ProfileForm/Step1Form/Step1Form.tsx b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
index 025102cb5..574fe6bed 100644
--- a/src/pages/ProfileForm/Step1Form/Step1Form.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
@@ -134,7 +134,7 @@ function Step1Form(): JSX.Element {
   // const navigate = useNavigate();
 
   // 'Clear Form' function
-  function clearForm(): void {
+  function onClearForm(): void {
     setValue('firstName', '');
     setValue('lastName', '');
     setSelectedFI([]);
@@ -204,6 +204,7 @@ function Step1Form(): JSX.Element {
           <FormButtonGroup>
             <Button
               appearance='primary'
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onClick={onSubmitButtonAction}
               label='Submit'
               aria-label='Submit User Profile'
@@ -213,7 +214,7 @@ function Step1Form(): JSX.Element {
 
             <Button
               label='Clear form'
-              onClick={clearForm}
+              onClick={onClearForm}
               appearance='warning'
               asLink
             />

From f60916388dbdd4b3a92fa2b5dc1d4637c2f5f646 Mon Sep 17 00:00:00 2001
From: Meis <meissadia@gmail.com>
Date: Thu, 7 Mar 2024 09:23:32 -0700
Subject: [PATCH 34/54] Update src/pages/ProfileForm/Step1Form/Step1Form.tsx

Co-authored-by: S T <shindigira@gmail.com>
---
 src/pages/ProfileForm/Step1Form/Step1Form.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ProfileForm/Step1Form/Step1Form.tsx b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
index 9022ac090..0f0d5e155 100644
--- a/src/pages/ProfileForm/Step1Form/Step1Form.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
@@ -173,7 +173,6 @@ function Step1Form(): JSX.Element {
   if (isLoading) return <>Loading Institutions!</>;
   if (isError) return <>Error on loading institutions!</>;
 
-  console.log(formErrors);
 
   return (
     <FormWrapper>

From d7bd40200244866800f56a2b1050edde891081f1 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Thu, 7 Mar 2024 12:19:52 -0500
Subject: [PATCH 35/54] feat(poc): added states.json

---
 src/pages/PointOfContact/index.tsx   | 24 ++++---------
 src/pages/PointOfContact/states.json | 54 ++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 17 deletions(-)
 create mode 100644 src/pages/PointOfContact/states.json

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index dd95a8fbb..fe2beb79b 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -6,6 +6,8 @@ import InputEntry from 'components/InputEntry';
 import SectionIntro from 'components/SectionIntro';
 import { Button, Select, TextIntroduction } from 'design-system-react';
 
+import statesObject from './states.json';
+
 function PointOfContact(): JSX.Element {
   return (
     <FormWrapper>
@@ -53,24 +55,12 @@ function PointOfContact(): JSX.Element {
                 <Select
                   id='states'
                   label='States'
-                  onChange={() => {}}
+                  onChange={selected => {
+                    console.log('selected', selected);
+                  }}
                   options={[
-                    {
-                      label: 'Alabama',
-                      value: 'alabama',
-                    },
-                    {
-                      label: 'Alaska',
-                      value: 'alaska',
-                    },
-                    {
-                      label: 'Arizona',
-                      value: 'arizona',
-                    },
-                    {
-                      label: 'Arkansas',
-                      value: 'arkansas',
-                    },
+                    { label: '-- select an option --', value: '' },
+                    ...statesObject.states,
                   ]}
                 />
               </div>
diff --git a/src/pages/PointOfContact/states.json b/src/pages/PointOfContact/states.json
new file mode 100644
index 000000000..44ebf6612
--- /dev/null
+++ b/src/pages/PointOfContact/states.json
@@ -0,0 +1,54 @@
+{
+  "states": [
+  { "label": "Alabama", "value": "alabama" },
+  { "label": "Alaska", "value": "alaska" },
+  { "label": "Arizona", "value": "arizona" },
+  { "label": "Arkansas", "value": "arkansas" },
+  { "label": "California", "value": "california" },
+  { "label": "Colorado", "value": "colorado" },
+  { "label": "Connecticut", "value": "connecticut" },
+  { "label": "Delaware", "value": "delaware" },
+  { "label": "Florida", "value": "florida" },
+  { "label": "Georgia", "value": "georgia" },
+  { "label": "Hawaii", "value": "hawaii" },
+  { "label": "Idaho", "value": "idaho" },
+  { "label": "Illinois", "value": "illinois" },
+  { "label": "Indiana", "value": "indiana" },
+  { "label": "Iowa", "value": "iowa" },
+  { "label": "Kansas", "value": "kansas" },
+  { "label": "Kentucky", "value": "kentucky" },
+  { "label": "Louisiana", "value": "louisiana" },
+  { "label": "Maine", "value": "maine" },
+  { "label": "Maryland", "value": "maryland" },
+  { "label": "Massachusetts", "value": "massachusetts" },
+  { "label": "Michigan", "value": "michigan" },
+  { "label": "Minnesota", "value": "minnesota" },
+  { "label": "Mississippi", "value": "mississippi" },
+  { "label": "Missouri", "value": "missouri" },
+  { "label": "Montana", "value": "montana" },
+  { "label": "Nebraska", "value": "nebraska" },
+  { "label": "Nevada", "value": "nevada" },
+  { "label": "New Hampshire", "value": "newhampshire" },
+  { "label": "New Jersey", "value": "newjersey" },
+  { "label": "New Mexico", "value": "newmexico" },
+  { "label": "New York", "value": "newyork" },
+  { "label": "North Carolina", "value": "northcarolina" },
+  { "label": "North Dakota", "value": "northdakota" },
+  { "label": "Ohio", "value": "ohio" },
+  { "label": "Oklahoma", "value": "oklahoma" },
+  { "label": "Oregon", "value": "oregon" },
+  { "label": "Pennsylvania", "value": "pennsylvania" },
+  { "label": "Rhode Island", "value": "rhodeisland" },
+  { "label": "South Carolina", "value": "southcarolina" },
+  { "label": "South Dakota", "value": "southdakota" },
+  { "label": "Tennessee", "value": "tennessee" },
+  { "label": "Texas", "value": "texas" },
+  { "label": "Utah", "value": "utah" },
+  { "label": "Vermont", "value": "vermont" },
+  { "label": "Virginia", "value": "virginia" },
+  { "label": "Washington", "value": "washington" },
+  { "label": "West Virginia", "value": "westvirginia" },
+  { "label": "Wisconsin", "value": "wisconsin" },
+  { "label": "Wyoming", "value": "wyoming" }
+]
+}
\ No newline at end of file

From 9592dc88ae671850581237ade7eed2a434c1cb8e Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Thu, 7 Mar 2024 13:45:39 -0500
Subject: [PATCH 36/54] chore: updated label items on PoC

---
 src/pages/PointOfContact/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index fe2beb79b..d1e02e32e 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -38,8 +38,8 @@ function PointOfContact(): JSX.Element {
           <FieldGroup>
             <InputEntry label='First name' id='firstName' />
             <InputEntry label='Last name' id='lastName' />
-            <InputEntry label='Phone Number' id='phoneNumber' />
-            <InputEntry label='Email Address' id='email' />
+            <InputEntry label='Phone number' id='phoneNumber' />
+            <InputEntry label='Email address' id='email' />
             <InputEntry
               label='Street address line 1'
               id='street_address_line_1'
@@ -53,8 +53,8 @@ function PointOfContact(): JSX.Element {
             <div className='flex gap-[1.875rem]'>
               <div className='flex-1'>
                 <Select
-                  id='states'
-                  label='States'
+                  id='state'
+                  label='State'
                   onChange={selected => {
                     console.log('selected', selected);
                   }}
@@ -64,17 +64,17 @@ function PointOfContact(): JSX.Element {
                   ]}
                 />
               </div>
-              <InputEntry className='flex-1' label='Zip' id='zip' />
+              <InputEntry className='flex-1' label='ZIP code' id='zip' />
             </div>
           </FieldGroup>
           <FormButtonGroup>
             <Button
               appearance='primary'
               // onClick={() => {}}
-              label='Save and Continue'
+              label='Save and continue'
               aria-label='Save and continue'
               size='default'
-              type='submit'
+              type='button'
             />
             <Button
               label='Clear form'

From 6c4b9271beea0c26d5a01a03a2dcd8767fe73e0c Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 12:21:08 -0400
Subject: [PATCH 37/54] feat(tfi): Provide Types of Financial Institutions --
 start

---
 src/App.tsx                                   | 11 ++++
 .../TypesFinancialInstitutions/index.tsx      | 53 +++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 src/pages/TypesFinancialInstitutions/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c742f3453..d61f9d3c4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,6 +44,9 @@ const PaperworkNotice = lazy(
 );
 const Summary = lazy(async () => import('pages/Summary/Summary'));
 const PointOfContact = lazy(async () => import('pages/PointOfContact'));
+const TypesFinancialInstitutions = lazy(
+  async () => import('pages/TypesFinancialInstitutions'),
+);
 
 // allow developers to toggle routing in development
 const isRoutingEnabled = getIsRoutingEnabled();
@@ -237,6 +240,14 @@ export default function App(): ReactElement {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path='/types-financial-institutions'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <TypesFinancialInstitutions />
+                </ProtectedRoute>
+              }
+            />
             <Route path='/privacy-act-notice' element={<PrivacyActNotice />} />
             <Route
               path='/paperwork-reduction-act-notice'
diff --git a/src/pages/TypesFinancialInstitutions/index.tsx b/src/pages/TypesFinancialInstitutions/index.tsx
new file mode 100644
index 000000000..807b0d48f
--- /dev/null
+++ b/src/pages/TypesFinancialInstitutions/index.tsx
@@ -0,0 +1,53 @@
+import CrumbTrail from 'components/CrumbTrail';
+import FieldGroup from 'components/FieldGroup';
+import FormButtonGroup from 'components/FormButtonGroup';
+import FormHeaderWrapper from 'components/FormHeaderWrapper';
+import FormWrapper from 'components/FormWrapper';
+import { Button, Link, TextIntroduction } from 'design-system-react';
+
+function TypesFinancialInstitutions(): JSX.Element {
+  return (
+    <FormWrapper>
+      <div id='types-financial-institutions'>
+        <FormHeaderWrapper>
+          <CrumbTrail>
+            <Link href='/'>Filing Home</Link>
+          </CrumbTrail>
+          <TextIntroduction
+            heading='Provide your type of financial institution'
+            subheading='Select all applicable options that describe your financial institution. If you wish to provide additional types of financial institutions please add them to “Other” and check the box.'
+            description={
+              <>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation.
+              </>
+            }
+          />
+        </FormHeaderWrapper>
+        {/* TODO: Create a Form component where all form elements use the following classes */}
+        <form className='mb-[3.75rem] w-full'>
+          <FieldGroup>FieldGroup</FieldGroup>
+          <FormButtonGroup>
+            <Button
+              appearance='primary'
+              // onClick={() => {}}
+              label='Save and continue'
+              aria-label='Save and continue'
+              size='default'
+              type='button'
+            />
+            <Button
+              label='Clear form'
+              // onClick={() => {}}
+              appearance='warning'
+              asLink
+            />
+          </FormButtonGroup>
+        </form>
+      </div>
+    </FormWrapper>
+  );
+}
+
+export default TypesFinancialInstitutions;

From dc1d04cff92781b87c373f74bbc328f4675b8a09 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 12:47:23 -0400
Subject: [PATCH 38/54] feat: created a Form component

---
 src/components/Form.tsx                        | 18 ++++++++++++++++++
 src/components/Uploader.tsx                    |  5 +++--
 .../TypesFinancialInstitutionForm.tsx          |  5 +++++
 .../UpdateIdentifyingInformation.tsx           |  6 ++++--
 src/pages/PointOfContact/index.tsx             |  5 +++--
 .../ProfileForm/CreateProfileForm/index.tsx    |  6 ++++--
 src/pages/ProfileForm/Step1Form/Step1Form.tsx  |  6 +++---
 src/pages/TypesFinancialInstitutions/index.tsx |  5 +++--
 8 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Form.tsx
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
new file mode 100644
index 000000000..84ae336d4
--- /dev/null
+++ b/src/components/Form.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+interface FormProperties {
+  children: ReactNode;
+}
+
+/**
+ *
+ * @returns FormParagraph
+ */
+function Form({
+  children,
+  className = '',
+}: FormProperties & React.ComponentPropsWithoutRef<'form'>): JSX.Element {
+  return <form className={`mb-[3.75rem] w-full ${className}`}>{children}</form>;
+}
+
+export default Form;
diff --git a/src/components/Uploader.tsx b/src/components/Uploader.tsx
index 86e5d8792..5f66670f0 100644
--- a/src/components/Uploader.tsx
+++ b/src/components/Uploader.tsx
@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import Form from 'components/Form';
 import { Label } from 'design-system-react';
 import type { ChangeEvent, ReactElement } from 'react';
 import upload from '../api/upload';
@@ -22,7 +23,7 @@ export default function Uploader({
     }
   };
   return (
-    <form>
+    <Form>
       <Label htmlFor='file-input-specific'>Upload your files</Label>
       <div id='file-input-specific-hint'>Select one or more CSV files</div>
       <FileInput
@@ -33,6 +34,6 @@ export default function Uploader({
         multiple
         onChange={onChange}
       />
-    </form>
+    </Form>
   );
 }
diff --git a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx
new file mode 100644
index 000000000..6fec79185
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx
@@ -0,0 +1,5 @@
+function TypesFinancialInstitutionForm({}): JSX.Element {
+  return <>TypesFinancialInstitutionForm</>;
+}
+
+export default TypesFinancialInstitutionForm;
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index ac2025929..399ad34a4 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -4,7 +4,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import CommonLinks from 'components/CommonLinks';
 import FieldGroup from 'components/FieldGroup';
+import Form from 'components/Form';
 import SectionIntro from 'components/SectionIntro';
+
 import {
   Checkbox,
   Heading,
@@ -108,7 +110,7 @@ function UpdateIdentifyingInformation({
         If you wish to provide additional types of financial institutions add
         them to “Other” and check the box.{' '}
       </Paragraph>
-      <form>
+      <Form>
         <FieldGroup>
           <Heading type='4'>Type of financial institution</Heading>
           <List isUnstyled>
@@ -155,7 +157,7 @@ function UpdateIdentifyingInformation({
             showError
           />
         </FieldGroup>
-      </form>
+      </Form>
     </FormSectionWrapper>
   );
 }
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index d1e02e32e..79f4b8ad1 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -1,4 +1,5 @@
 import FieldGroup from 'components/FieldGroup';
+import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
@@ -34,7 +35,7 @@ function PointOfContact(): JSX.Element {
           </SectionIntro>
         </div>
 
-        <form className='mb-[3.75rem] w-full'>
+        <Form>
           <FieldGroup>
             <InputEntry label='First name' id='firstName' />
             <InputEntry label='Last name' id='lastName' />
@@ -83,7 +84,7 @@ function PointOfContact(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </form>
+        </Form>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
index 861b1a909..a866d6263 100644
--- a/src/pages/ProfileForm/CreateProfileForm/index.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -8,6 +8,7 @@ import FormErrorHeader from 'components/FormErrorHeader';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 
+import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import LinkButton from 'components/LinkButton';
 import SectionIntro from 'components/SectionIntro';
@@ -17,6 +18,7 @@ import {
   formatUserProfileObject,
   scrollToElement,
 } from 'pages/ProfileForm/ProfileFormUtils';
+
 import Step1FormHeader from 'pages/ProfileForm/Step1Form/Step1FormHeader';
 import Step1FormInfoHeader from 'pages/ProfileForm/Step1Form/Step1FormInfoHeader';
 import { useFieldArray, useForm } from 'react-hook-form';
@@ -105,7 +107,7 @@ function CreateProfileForm(): JSX.Element {
         </FormHeaderWrapper>
         <Step1FormInfoHeader />
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
-        <form>
+        <Form>
           <Step1FormInfoFieldGroup
             formErrors={formErrors}
             register={register}
@@ -161,7 +163,7 @@ function CreateProfileForm(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </form>
+        </Form>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/ProfileForm/Step1Form/Step1Form.tsx b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
index 89e54645e..397546652 100644
--- a/src/pages/ProfileForm/Step1Form/Step1Form.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
@@ -27,6 +27,7 @@ import { validationSchema } from 'types/formTypes';
 import { useQuery } from '@tanstack/react-query';
 
 import { fetchInstitutions, submitUserProfile } from 'api/requests';
+import Form from 'components/Form';
 import FormWrapper from 'components/FormWrapper';
 import {
   formatDataCheckedState,
@@ -173,14 +174,13 @@ function Step1Form(): JSX.Element {
   if (isLoading) return <>Loading Institutions!</>;
   if (isError) return <>Error on loading institutions!</>;
 
-
   return (
     <FormWrapper>
       <div id='step1form'>
         <Step1FormHeader crumbTrailMarginTop={false} />
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
         <Step1FormInfoHeader />
-        <form>
+        <Form>
           <Step1FormInfoFieldGroup
             formErrors={formErrors}
             register={register}
@@ -220,7 +220,7 @@ function Step1Form(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </form>
+        </Form>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/TypesFinancialInstitutions/index.tsx b/src/pages/TypesFinancialInstitutions/index.tsx
index 807b0d48f..e5c8a92b1 100644
--- a/src/pages/TypesFinancialInstitutions/index.tsx
+++ b/src/pages/TypesFinancialInstitutions/index.tsx
@@ -1,5 +1,6 @@
 import CrumbTrail from 'components/CrumbTrail';
 import FieldGroup from 'components/FieldGroup';
+import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
@@ -26,7 +27,7 @@ function TypesFinancialInstitutions(): JSX.Element {
           />
         </FormHeaderWrapper>
         {/* TODO: Create a Form component where all form elements use the following classes */}
-        <form className='mb-[3.75rem] w-full'>
+        <Form>
           <FieldGroup>FieldGroup</FieldGroup>
           <FormButtonGroup>
             <Button
@@ -44,7 +45,7 @@ function TypesFinancialInstitutions(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </form>
+        </Form>
       </div>
     </FormWrapper>
   );

From bd301be21f7642b08dd8d2433868853492180eed Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 13:31:39 -0400
Subject: [PATCH 39/54] feat: started TypesFinancialInstitutionSection

---
 src/components/FormWrapper.tsx                |  4 +-
 .../TypesFinancialInstitutionForm.tsx         |  5 --
 .../TypesFinancialInstitutionSection.tsx      | 67 +++++++++++++++++++
 .../UpdateIdentifyingInformation.tsx          |  2 +-
 .../TypesFinancialInstitutions/index.tsx      | 62 ++++++++++++++++-
 5 files changed, 130 insertions(+), 10 deletions(-)
 delete mode 100644 src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx
 create mode 100644 src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx

diff --git a/src/components/FormWrapper.tsx b/src/components/FormWrapper.tsx
index ff22dd9b6..db2539522 100644
--- a/src/components/FormWrapper.tsx
+++ b/src/components/FormWrapper.tsx
@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 
-interface Properties {
+interface FormWrapperProperties {
   children: ReactNode;
 }
 
-function FormWrapper({ children }: Properties): JSX.Element {
+function FormWrapper({ children }: FormWrapperProperties): JSX.Element {
   return (
     <div className='ml-5 mr-5 mt-[2.813rem]'>
       <div className='mx-auto mb-12 max-w-[75rem]'>
diff --git a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx
deleted file mode 100644
index 6fec79185..000000000
--- a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionForm.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-function TypesFinancialInstitutionForm({}): JSX.Element {
-  return <>TypesFinancialInstitutionForm</>;
-}
-
-export default TypesFinancialInstitutionForm;
diff --git a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx
new file mode 100644
index 000000000..63e4d153f
--- /dev/null
+++ b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx
@@ -0,0 +1,67 @@
+import FieldGroup from 'components/FieldGroup';
+import InputEntry from 'components/InputEntry';
+import { Checkbox, Heading, List, ListItem } from 'design-system-react';
+import { Controller as FormController } from 'react-hook-form';
+import { Zero } from 'utils/constants';
+import type { CheckboxOption } from './types';
+import { checkboxOptions } from './types';
+
+interface TypesFinancialInstitutionSectionProperties {
+  register: any;
+  setValue: any;
+  formErrors: any;
+  control: any;
+}
+
+function TypesFinancialInstitutionSection({
+  register,
+  setValue,
+  formErrors,
+  control,
+}: TypesFinancialInstitutionSectionProperties): JSX.Element {
+  return (
+    <FieldGroup>
+      <Heading type='4'>Types of financial institution</Heading>
+      <List isUnstyled>
+        {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
+          const optionId = `sbl_institution_types.${option.id}`;
+
+          const onCheckboxChange = (
+            event: React.ChangeEvent<HTMLInputElement>,
+          ): void => {
+            setValue(optionId, event.target.checked);
+          };
+
+          return (
+            <ListItem key={option.id}>
+              <FormController
+                render={({ field }) => {
+                  return (
+                    <Checkbox
+                      id={option.id}
+                      label={option.label}
+                      {...register(optionId)}
+                      checked={field.value}
+                      onChange={onCheckboxChange}
+                    />
+                  );
+                }}
+                control={control}
+                name={optionId}
+              />
+            </ListItem>
+          );
+        })}
+      </List>
+      <InputEntry
+        label=''
+        id='institutionTypeOther'
+        {...register('sbl_institution_types_other')}
+        errorMessage={formErrors[Zero]}
+        showError
+      />
+    </FieldGroup>
+  );
+}
+
+export default TypesFinancialInstitutionSection;
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 399ad34a4..3f1ff7047 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -112,7 +112,7 @@ function UpdateIdentifyingInformation({
       </Paragraph>
       <Form>
         <FieldGroup>
-          <Heading type='4'>Type of financial institution</Heading>
+          <Heading type='4'>Types of financial institutions</Heading>
           <List isUnstyled>
             {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
               const optionId = `sbl_institution_types.${option.id}`;
diff --git a/src/pages/TypesFinancialInstitutions/index.tsx b/src/pages/TypesFinancialInstitutions/index.tsx
index e5c8a92b1..425a0fffa 100644
--- a/src/pages/TypesFinancialInstitutions/index.tsx
+++ b/src/pages/TypesFinancialInstitutions/index.tsx
@@ -4,7 +4,20 @@ import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
-import { Button, Link, TextIntroduction } from 'design-system-react';
+import InputEntry from 'components/InputEntry';
+import {
+  Button,
+  Checkbox,
+  Heading,
+  Link,
+  List,
+  ListItem,
+  TextIntroduction,
+} from 'design-system-react';
+import type { CheckboxOption } from 'pages/Filing/UpdateFinancialProfile/types';
+import { checkboxOptions } from 'pages/Filing/UpdateFinancialProfile/types';
+import { register } from 'react-scroll/modules/mixins/scroller';
+import { Zero } from 'utils/constants';
 
 function TypesFinancialInstitutions(): JSX.Element {
   return (
@@ -28,7 +41,52 @@ function TypesFinancialInstitutions(): JSX.Element {
         </FormHeaderWrapper>
         {/* TODO: Create a Form component where all form elements use the following classes */}
         <Form>
-          <FieldGroup>FieldGroup</FieldGroup>
+          <FieldGroup>
+            <Heading type='4'>Types of financial institutions</Heading>
+            <List isUnstyled>
+              {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
+                const optionId = `sbl_institution_types.${option.id}`;
+
+                const onCheckboxChange = (
+                  event: React.ChangeEvent<HTMLInputElement>,
+                ): void => {
+                  setValue(optionId, event.target.checked);
+                };
+
+                return (
+                  <ListItem key={option.id}>
+                    <FormController
+                      render={({ field }) => {
+                        return (
+                          <Checkbox
+                            id={option.id}
+                            label={option.label}
+                            {...register(optionId)}
+                            checked={field.value}
+                            onChange={onCheckboxChange}
+                          />
+                        );
+                      }}
+                      control={control}
+                      name={optionId}
+                    />
+                  </ListItem>
+                );
+              })}
+            </List>
+            <InputEntry
+              label=''
+              id='institutionTypeOther'
+              {...register('sbl_institution_types_other', {
+                value:
+                  typeof typeOtherData === 'string' || !typeOtherData
+                    ? ''
+                    : typeOtherData.details,
+              })}
+              errorMessage={formErrors[Zero]}
+              showError
+            />
+          </FieldGroup>
           <FormButtonGroup>
             <Button
               appearance='primary'

From 2096aacc2aa6e01085f1ba1e11e0bf5215739c34 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 13:57:53 -0400
Subject: [PATCH 40/54] feat: functional skeleton

---
 .../TypesFinancialInstitutions/index.tsx      | 85 +++++--------------
 1 file changed, 23 insertions(+), 62 deletions(-)

diff --git a/src/pages/TypesFinancialInstitutions/index.tsx b/src/pages/TypesFinancialInstitutions/index.tsx
index 425a0fffa..ff91c6ad0 100644
--- a/src/pages/TypesFinancialInstitutions/index.tsx
+++ b/src/pages/TypesFinancialInstitutions/index.tsx
@@ -1,25 +1,25 @@
+import { zodResolver } from '@hookform/resolvers/zod';
 import CrumbTrail from 'components/CrumbTrail';
-import FieldGroup from 'components/FieldGroup';
 import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
-import InputEntry from 'components/InputEntry';
-import {
-  Button,
-  Checkbox,
-  Heading,
-  Link,
-  List,
-  ListItem,
-  TextIntroduction,
-} from 'design-system-react';
-import type { CheckboxOption } from 'pages/Filing/UpdateFinancialProfile/types';
-import { checkboxOptions } from 'pages/Filing/UpdateFinancialProfile/types';
-import { register } from 'react-scroll/modules/mixins/scroller';
-import { Zero } from 'utils/constants';
+import { Button, Link, TextIntroduction } from 'design-system-react';
+import TypesFinancialInstitutionSection from 'pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection';
+import type { UFPSchema } from 'pages/Filing/UpdateFinancialProfile/types';
+import { ufpSchema } from 'pages/Filing/UpdateFinancialProfile/types';
+import { useForm } from 'react-hook-form';
 
 function TypesFinancialInstitutions(): JSX.Element {
+  const {
+    register,
+    control,
+    setValue,
+    formState: { errors: formErrors },
+  } = useForm<UFPSchema>({
+    resolver: zodResolver(ufpSchema),
+    // defaultValues,
+  });
   return (
     <FormWrapper>
       <div id='types-financial-institutions'>
@@ -39,54 +39,15 @@ function TypesFinancialInstitutions(): JSX.Element {
             }
           />
         </FormHeaderWrapper>
-        {/* TODO: Create a Form component where all form elements use the following classes */}
         <Form>
-          <FieldGroup>
-            <Heading type='4'>Types of financial institutions</Heading>
-            <List isUnstyled>
-              {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
-                const optionId = `sbl_institution_types.${option.id}`;
-
-                const onCheckboxChange = (
-                  event: React.ChangeEvent<HTMLInputElement>,
-                ): void => {
-                  setValue(optionId, event.target.checked);
-                };
-
-                return (
-                  <ListItem key={option.id}>
-                    <FormController
-                      render={({ field }) => {
-                        return (
-                          <Checkbox
-                            id={option.id}
-                            label={option.label}
-                            {...register(optionId)}
-                            checked={field.value}
-                            onChange={onCheckboxChange}
-                          />
-                        );
-                      }}
-                      control={control}
-                      name={optionId}
-                    />
-                  </ListItem>
-                );
-              })}
-            </List>
-            <InputEntry
-              label=''
-              id='institutionTypeOther'
-              {...register('sbl_institution_types_other', {
-                value:
-                  typeof typeOtherData === 'string' || !typeOtherData
-                    ? ''
-                    : typeOtherData.details,
-              })}
-              errorMessage={formErrors[Zero]}
-              showError
-            />
-          </FieldGroup>
+          <TypesFinancialInstitutionSection
+            {...{
+              register,
+              control,
+              setValue,
+              formErrors,
+            }}
+          />
           <FormButtonGroup>
             <Button
               appearance='primary'

From 102770ed158e26cdc0481e06290dfd763dfb2996 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 17:43:53 -0400
Subject: [PATCH 41/54] chore: renamed Form to FormMain, typescript in
 TypesFinancialInstitutionSection

---
 src/components/{Form.tsx => FormMain.tsx}     |  4 +-
 src/components/Uploader.tsx                   |  5 +-
 .../TypesFinancialInstitutionSection.tsx      | 27 +++++++---
 .../UpdateIdentifyingInformation.tsx          |  6 +--
 .../Filing/UpdateFinancialProfile/types.ts    | 54 +++++++++----------
 src/pages/PointOfContact/index.tsx            |  6 +--
 .../ProfileForm/CreateProfileForm/index.tsx   |  6 +--
 src/pages/ProfileForm/Step1Form/Step1Form.tsx |  6 +--
 .../TypesFinancialInstitutions/index.tsx      |  8 +--
 9 files changed, 66 insertions(+), 56 deletions(-)
 rename src/components/{Form.tsx => FormMain.tsx} (87%)

diff --git a/src/components/Form.tsx b/src/components/FormMain.tsx
similarity index 87%
rename from src/components/Form.tsx
rename to src/components/FormMain.tsx
index 84ae336d4..f5b50b939 100644
--- a/src/components/Form.tsx
+++ b/src/components/FormMain.tsx
@@ -8,11 +8,11 @@ interface FormProperties {
  *
  * @returns FormParagraph
  */
-function Form({
+function FormMain({
   children,
   className = '',
 }: FormProperties & React.ComponentPropsWithoutRef<'form'>): JSX.Element {
   return <form className={`mb-[3.75rem] w-full ${className}`}>{children}</form>;
 }
 
-export default Form;
+export default FormMain;
diff --git a/src/components/Uploader.tsx b/src/components/Uploader.tsx
index 5f66670f0..86e5d8792 100644
--- a/src/components/Uploader.tsx
+++ b/src/components/Uploader.tsx
@@ -1,5 +1,4 @@
 import { useMutation } from '@tanstack/react-query';
-import Form from 'components/Form';
 import { Label } from 'design-system-react';
 import type { ChangeEvent, ReactElement } from 'react';
 import upload from '../api/upload';
@@ -23,7 +22,7 @@ export default function Uploader({
     }
   };
   return (
-    <Form>
+    <form>
       <Label htmlFor='file-input-specific'>Upload your files</Label>
       <div id='file-input-specific-hint'>Select one or more CSV files</div>
       <FileInput
@@ -34,6 +33,6 @@ export default function Uploader({
         multiple
         onChange={onChange}
       />
-    </Form>
+    </form>
   );
 }
diff --git a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx
index 63e4d153f..27086b7e0 100644
--- a/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx
@@ -1,16 +1,22 @@
 import FieldGroup from 'components/FieldGroup';
 import InputEntry from 'components/InputEntry';
 import { Checkbox, Heading, List, ListItem } from 'design-system-react';
+import type {
+  Control,
+  FieldErrors,
+  UseFormRegister,
+  UseFormSetValue,
+} from 'react-hook-form';
 import { Controller as FormController } from 'react-hook-form';
 import { Zero } from 'utils/constants';
-import type { CheckboxOption } from './types';
-import { checkboxOptions } from './types';
+import type { CheckboxOption, UFPSchema } from './types';
+import { checkboxOptions, sblInstitutionTypeMap } from './types';
 
 interface TypesFinancialInstitutionSectionProperties {
-  register: any;
-  setValue: any;
-  formErrors: any;
-  control: any;
+  register: UseFormRegister<UFPSchema>;
+  setValue: UseFormSetValue<UFPSchema>;
+  formErrors: FieldErrors<UFPSchema>;
+  control: Control<UFPSchema>;
 }
 
 function TypesFinancialInstitutionSection({
@@ -19,9 +25,12 @@ function TypesFinancialInstitutionSection({
   formErrors,
   control,
 }: TypesFinancialInstitutionSectionProperties): JSX.Element {
+  const typeOtherData = data.sbl_institution_types.find(item => {
+    return item.sbl_type.id === sblInstitutionTypeMap.other;
+  });
   return (
     <FieldGroup>
-      <Heading type='4'>Types of financial institution</Heading>
+      <Heading type='4'>Type(s) of financial institution</Heading>
       <List isUnstyled>
         {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
           const optionId = `sbl_institution_types.${option.id}`;
@@ -56,7 +65,9 @@ function TypesFinancialInstitutionSection({
       <InputEntry
         label=''
         id='institutionTypeOther'
-        {...register('sbl_institution_types_other')}
+        {...register('sbl_institution_types_other', {
+          value: typeOtherData?.details,
+        })}
         errorMessage={formErrors[Zero]}
         showError
       />
diff --git a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
index 3f1ff7047..fe532b50c 100644
--- a/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
+++ b/src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx
@@ -4,7 +4,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import CommonLinks from 'components/CommonLinks';
 import FieldGroup from 'components/FieldGroup';
-import Form from 'components/Form';
+import FormMain from 'components/FormMain';
 import SectionIntro from 'components/SectionIntro';
 
 import {
@@ -110,7 +110,7 @@ function UpdateIdentifyingInformation({
         If you wish to provide additional types of financial institutions add
         them to “Other” and check the box.{' '}
       </Paragraph>
-      <Form>
+      <FormMain>
         <FieldGroup>
           <Heading type='4'>Types of financial institutions</Heading>
           <List isUnstyled>
@@ -157,7 +157,7 @@ function UpdateIdentifyingInformation({
             showError
           />
         </FieldGroup>
-      </Form>
+      </FormMain>
     </FormSectionWrapper>
   );
 }
diff --git a/src/pages/Filing/UpdateFinancialProfile/types.ts b/src/pages/Filing/UpdateFinancialProfile/types.ts
index 2c4af2975..a649579aa 100644
--- a/src/pages/Filing/UpdateFinancialProfile/types.ts
+++ b/src/pages/Filing/UpdateFinancialProfile/types.ts
@@ -118,32 +118,32 @@ export const ufpSchema = z.object({
   sbl_institution_types: z.object(checkboxOptionsZod),
 });
 
-// export type UFPSchema = z.infer<typeof ufpSchema>;
+export type UFPSchema = z.infer<typeof ufpSchema>;
 
-interface ExpectedObject {
-  sbl_institution_types?: Record<string, boolean>;
-  tax_id?: string;
-  hq_address_street_1?: string;
-  hq_address_street_2?: string;
-  hq_address_city?: string;
-  hq_address_state_code?: string;
-  hq_address_zip?: string;
-  parent_lei?: string;
-  parent_legal_name?: string;
-  parent_rssd_id?: string;
-  top_holder_lei?: string;
-  top_holder_legal_name?: string;
-  top_holder_rssd_id?: string;
-  lei?: string;
-  name?: string;
-  is_active?: boolean | string;
-  rssd_id?: string;
-  primary_federal_regulator_id?: string;
-  hmda_institution_type_id?: string;
-  hq_address_state?: string;
-  primary_federal_regulator?: string;
-  additional_details?: string;
-  domains?: string;
-}
+// interface ExpectedObject {
+//   sbl_institution_types?: Record<string, boolean>;
+//   tax_id?: string;
+//   hq_address_street_1?: string;
+//   hq_address_street_2?: string;
+//   hq_address_city?: string;
+//   hq_address_state_code?: string;
+//   hq_address_zip?: string;
+//   parent_lei?: string;
+//   parent_legal_name?: string;
+//   parent_rssd_id?: string;
+//   top_holder_lei?: string;
+//   top_holder_legal_name?: string;
+//   top_holder_rssd_id?: string;
+//   lei?: string;
+//   name?: string;
+//   is_active?: boolean | string;
+//   rssd_id?: string;
+//   primary_federal_regulator_id?: string;
+//   hmda_institution_type_id?: string;
+//   hq_address_state?: string;
+//   primary_federal_regulator?: string;
+//   additional_details?: string;
+//   domains?: string;
+// }
 
-export type UFPSchema = ExpectedObject;
+// export type UFPSchema = ExpectedObject;
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 79f4b8ad1..2eaa5d0cb 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -1,5 +1,4 @@
 import FieldGroup from 'components/FieldGroup';
-import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
@@ -7,6 +6,7 @@ import InputEntry from 'components/InputEntry';
 import SectionIntro from 'components/SectionIntro';
 import { Button, Select, TextIntroduction } from 'design-system-react';
 
+import FormMain from 'components/FormMain';
 import statesObject from './states.json';
 
 function PointOfContact(): JSX.Element {
@@ -35,7 +35,7 @@ function PointOfContact(): JSX.Element {
           </SectionIntro>
         </div>
 
-        <Form>
+        <FormMain>
           <FieldGroup>
             <InputEntry label='First name' id='firstName' />
             <InputEntry label='Last name' id='lastName' />
@@ -84,7 +84,7 @@ function PointOfContact(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </Form>
+        </FormMain>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/ProfileForm/CreateProfileForm/index.tsx b/src/pages/ProfileForm/CreateProfileForm/index.tsx
index a866d6263..563791a2b 100644
--- a/src/pages/ProfileForm/CreateProfileForm/index.tsx
+++ b/src/pages/ProfileForm/CreateProfileForm/index.tsx
@@ -8,8 +8,8 @@ import FormErrorHeader from 'components/FormErrorHeader';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 
-import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
+import FormMain from 'components/FormMain';
 import LinkButton from 'components/LinkButton';
 import SectionIntro from 'components/SectionIntro';
 import { Button, Link } from 'design-system-react';
@@ -107,7 +107,7 @@ function CreateProfileForm(): JSX.Element {
         </FormHeaderWrapper>
         <Step1FormInfoHeader />
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
-        <Form>
+        <FormMain>
           <Step1FormInfoFieldGroup
             formErrors={formErrors}
             register={register}
@@ -163,7 +163,7 @@ function CreateProfileForm(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </Form>
+        </FormMain>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/ProfileForm/Step1Form/Step1Form.tsx b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
index 397546652..56378226f 100644
--- a/src/pages/ProfileForm/Step1Form/Step1Form.tsx
+++ b/src/pages/ProfileForm/Step1Form/Step1Form.tsx
@@ -27,7 +27,7 @@ import { validationSchema } from 'types/formTypes';
 import { useQuery } from '@tanstack/react-query';
 
 import { fetchInstitutions, submitUserProfile } from 'api/requests';
-import Form from 'components/Form';
+import FormMain from 'components/FormMain';
 import FormWrapper from 'components/FormWrapper';
 import {
   formatDataCheckedState,
@@ -180,7 +180,7 @@ function Step1Form(): JSX.Element {
         <Step1FormHeader crumbTrailMarginTop={false} />
         <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
         <Step1FormInfoHeader />
-        <Form>
+        <FormMain>
           <Step1FormInfoFieldGroup
             formErrors={formErrors}
             register={register}
@@ -220,7 +220,7 @@ function Step1Form(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </Form>
+        </FormMain>
       </div>
     </FormWrapper>
   );
diff --git a/src/pages/TypesFinancialInstitutions/index.tsx b/src/pages/TypesFinancialInstitutions/index.tsx
index ff91c6ad0..f204d1836 100644
--- a/src/pages/TypesFinancialInstitutions/index.tsx
+++ b/src/pages/TypesFinancialInstitutions/index.tsx
@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import CrumbTrail from 'components/CrumbTrail';
-import Form from 'components/Form';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
+import FormMain from 'components/FormMain';
 import FormWrapper from 'components/FormWrapper';
 import { Button, Link, TextIntroduction } from 'design-system-react';
 import TypesFinancialInstitutionSection from 'pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection';
@@ -28,7 +28,7 @@ function TypesFinancialInstitutions(): JSX.Element {
             <Link href='/'>Filing Home</Link>
           </CrumbTrail>
           <TextIntroduction
-            heading='Provide your type of financial institution'
+            heading='Provide your type(s) of financial institution'
             subheading='Select all applicable options that describe your financial institution. If you wish to provide additional types of financial institutions please add them to “Other” and check the box.'
             description={
               <>
@@ -39,7 +39,7 @@ function TypesFinancialInstitutions(): JSX.Element {
             }
           />
         </FormHeaderWrapper>
-        <Form>
+        <FormMain>
           <TypesFinancialInstitutionSection
             {...{
               register,
@@ -64,7 +64,7 @@ function TypesFinancialInstitutions(): JSX.Element {
               asLink
             />
           </FormButtonGroup>
-        </Form>
+        </FormMain>
       </div>
     </FormWrapper>
   );

From 8984026974ce15329dac5cfe06a16de879066cf9 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 18:54:49 -0400
Subject: [PATCH 42/54] feat: Point of Contact - Zod Schema & TypeScript

---
 src/pages/PointOfContact/index.tsx        | 103 +++++++++++++++++++---
 src/pages/ProfileForm/ProfileFormUtils.ts |  28 ++++++
 src/types/formTypes.ts                    |  34 +++++--
 3 files changed, 148 insertions(+), 17 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 2eaa5d0cb..06bd8fcb9 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -6,10 +6,64 @@ import InputEntry from 'components/InputEntry';
 import SectionIntro from 'components/SectionIntro';
 import { Button, Select, TextIntroduction } from 'design-system-react';
 
+import { zodResolver } from '@hookform/resolvers/zod';
+import { submitUserProfile } from 'api/requests';
 import FormMain from 'components/FormMain';
+import { formatPointOfContactObject } from 'pages/ProfileForm/ProfileFormUtils';
+import { useForm } from 'react-hook-form';
+import type { PointOfContactSchema } from 'types/formTypes';
+import { pointOfContactSchema } from 'types/formTypes';
 import statesObject from './states.json';
 
 function PointOfContact(): JSX.Element {
+  const {
+    register,
+    // control,
+    reset,
+    trigger,
+    getValues,
+    setValue,
+    formState: { errors: formErrors },
+  } = useForm<PointOfContactSchema>({
+    resolver: zodResolver(pointOfContactSchema),
+    // defaultValues,
+  });
+
+  const onSelectState = ({
+    label,
+    value,
+  }: {
+    label: string;
+    value: string;
+  }): void => {
+    console.log('selected', label);
+    setValue('hq_address_state', value);
+  };
+
+  window.getValues = getValues;
+  console.log('point of contact form errors:', formErrors);
+
+  // NOTE: This function is used for submitting the multipart/formData
+  const onSubmitButtonAction = async (): Promise<void> => {
+    const passesValidation = await trigger();
+    if (passesValidation) {
+      try {
+        const preFormattedData = getValues();
+        // 1.) Sending First Name and Last Name to the backend
+        const formattedUserProfileObject =
+          formatPointOfContactObject(preFormattedData);
+        // TODO: Create a Point of Contact API Request
+        await submitUserProfile(auth, formattedUserProfileObject);
+        console.log('Point of Contact Submitted');
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    } else {
+      // scrollToElement('point-of-contact');
+    }
+  };
+
   return (
     <FormWrapper>
       <div id='point-of-contact'>
@@ -37,41 +91,66 @@ function PointOfContact(): JSX.Element {
 
         <FormMain>
           <FieldGroup>
-            <InputEntry label='First name' id='firstName' />
-            <InputEntry label='Last name' id='lastName' />
-            <InputEntry label='Phone number' id='phoneNumber' />
-            <InputEntry label='Email address' id='email' />
+            <InputEntry
+              label='First name'
+              id='firstName'
+              {...register('firstName')}
+            />
+            <InputEntry
+              label='Last name'
+              id='lastName'
+              {...register('lastName')}
+            />
+            <InputEntry
+              label='Phone number'
+              id='phone'
+              {...register('phone')}
+            />
+            <InputEntry
+              label='Email address'
+              id='email'
+              {...register('email')}
+            />
             <InputEntry
               label='Street address line 1'
-              id='street_address_line_1'
+              id='hq_address_street_1'
+              {...register('hq_address_street_1')}
             />
             <InputEntry
               label='Street address line 2'
-              id='street_address_line_2'
+              id='hq_address_street_1'
+              {...register('hq_address_street_2')}
               isOptional
             />
-            <InputEntry label='City' id='city' />
+            <InputEntry
+              label='City'
+              id='hq_address_city'
+              {...register('hq_address_city')}
+            />
             <div className='flex gap-[1.875rem]'>
               <div className='flex-1'>
                 <Select
                   id='state'
                   label='State'
-                  onChange={selected => {
-                    console.log('selected', selected);
-                  }}
+                  onChange={onSelectState}
                   options={[
                     { label: '-- select an option --', value: '' },
                     ...statesObject.states,
                   ]}
                 />
               </div>
-              <InputEntry className='flex-1' label='ZIP code' id='zip' />
+              <InputEntry
+                className='flex-1'
+                label='ZIP code'
+                id='zip'
+                {...register('hq_address_zip')}
+              />
             </div>
           </FieldGroup>
           <FormButtonGroup>
             <Button
               appearance='primary'
-              // onClick={() => {}}
+              onClick={onSubmitButtonAction}
               label='Save and continue'
               aria-label='Save and continue'
               size='default'
diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index 391202759..21c4cd2fe 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -5,6 +5,7 @@ import type {
   FormattedUserProfileObjectType,
   InstitutionDetailsApiCheckedType,
   InstitutionDetailsApiType,
+  PointOfContactSchema,
   ValidationSchema,
 } from 'types/formTypes';
 
@@ -26,6 +27,33 @@ export const formatUserProfileObject = (
   return formattedObject;
 };
 
+export const formatPointOfContactObject = (
+  userProfileObject: PointOfContactSchema,
+): Omit<PointOfContactSchema, 'firstName' | 'lastName'> & {
+  first_name: string;
+  last_name: string;
+} => {
+  const formattedObject: Omit<
+    PointOfContactSchema,
+    'firstName' | 'lastName'
+  > & {
+    first_name: string;
+    last_name: string;
+  } = {
+    first_name: userProfileObject.firstName,
+    last_name: userProfileObject.lastName,
+    phone: userProfileObject.phone,
+    email: userProfileObject.email,
+    hq_address_street_1: userProfileObject.hq_address_street_1,
+    hq_address_street_2: userProfileObject.hq_address_street_2,
+    hq_address_city: userProfileObject.hq_address_city,
+    hq_address_state: userProfileObject.hq_address_state,
+    hq_address_zip: userProfileObject.hq_address_zip,
+  };
+
+  return formattedObject;
+};
+
 // Set Checkbox of associated financial institutions to `false`/unchecked
 export const formatDataCheckedState = (
   fiDataInput: InstitutionDetailsApiType[] = [],
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index cb392e65b..d6522acd9 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -171,13 +171,15 @@ export interface FormattedUserProfileObjectType {
   first_name: ValidationSchema['firstName'];
   last_name: ValidationSchema['lastName'];
   leis?: InstitutionDetailsApiType['lei'][];
+  hq_address_zip?: string;
 }
 
-const phoneNumberRegex =
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const internationalPhoneNumberRegex =
   // eslint-disable-next-line unicorn/no-unsafe-regex
   /\+(9[679]\d|8[0357-9]\d|6[7-9]\d|5[09]\d|42\d|3[578]\d|2[1-689]\d|9[0-58]|8[1246]|6[0-6]|5[1-8]|4[013-9]|3[0-469]|2[07]|7|1)(?:\W*\d){8}\W*(\d{1,2})$/;
 
-/* Matches the following regex patterns */
+/* International Phone Number - Matches the following regex patterns */
 // +1-234-567-8901
 // +61-234-567-89-01
 // +46-234 5678901
@@ -186,9 +188,31 @@ const phoneNumberRegex =
 // +46.234.567.8901
 // +1/234/567/8901
 
+// "Must in '+(999)-999-9999' format",
+
+// eslint-disable-next-line unicorn/no-unsafe-regex
+const usPhoneNumberRegex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;
+
+/* US Phone Number - Matches the following regex patterns */
+// 123-456-7890
+// (123) 456-7890
+// 123 456 7890
+// 123.456.7890
+// +91 (123) 456-7890
+
 // Point of Contact
-export const pocTypeSchema = z.object({
-  phoneNumber: z.string().trim().regex(phoneNumberRegex, {
-    message: "Must in '+(999)-999-9999' format",
+
+export const pointOfContactSchema = basicInfoSchema.extend({
+  phone: z.string().trim().regex(usPhoneNumberRegex, {
+    message: "Must in '999-999-9999' format",
+  }),
+  hq_address_street_1: z.string().trim(),
+  hq_address_street_2: z.string().trim().optional(),
+  hq_address_city: z.string().trim(),
+  hq_address_state: z.string().trim(),
+  hq_address_zip: z.string().trim().length(Five, {
+    message: 'The ZIP code must be 5 numbers exactly.',
   }),
 });
+
+export type PointOfContactSchema = z.infer<typeof pointOfContactSchema>;

From 6cd333261bb205ad844bee36876fec97cd6cc4e6 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 19:06:16 -0400
Subject: [PATCH 43/54] feat: poc API request WIP

---
 src/api/requests/submitPointOfContact.ts  | 17 +++++++++++++++++
 src/pages/PointOfContact/index.tsx        |  8 +++++---
 src/pages/ProfileForm/ProfileFormUtils.ts | 14 +++-----------
 src/types/formTypes.ts                    |  8 ++++++++
 4 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 src/api/requests/submitPointOfContact.ts

diff --git a/src/api/requests/submitPointOfContact.ts b/src/api/requests/submitPointOfContact.ts
new file mode 100644
index 000000000..1c67cede2
--- /dev/null
+++ b/src/api/requests/submitPointOfContact.ts
@@ -0,0 +1,17 @@
+import { request } from 'api/axiosService';
+import type { SblAuthProperties } from 'api/useSblAuth';
+import type { FormattedPointOfContactShema } from 'types/formTypes';
+
+const submitPointOfContact = async (
+  auth: SblAuthProperties,
+  userProfileObject: FormattedPointOfContactShema,
+): Promise<null> => {
+  return request<null>({
+    url: `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`,
+    method: 'post',
+    body: userProfileObject,
+    headers: { Authorization: `Bearer ${auth.user?.access_token}` },
+  });
+};
+
+export default submitPointOfContact;
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 06bd8fcb9..e6e123dda 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -7,7 +7,8 @@ import SectionIntro from 'components/SectionIntro';
 import { Button, Select, TextIntroduction } from 'design-system-react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { submitUserProfile } from 'api/requests';
+import submitPointOfContact from 'api/requests/submitPointOfContact';
+import useSblAuth from 'api/useSblAuth';
 import FormMain from 'components/FormMain';
 import { formatPointOfContactObject } from 'pages/ProfileForm/ProfileFormUtils';
 import { useForm } from 'react-hook-form';
@@ -16,6 +17,7 @@ import { pointOfContactSchema } from 'types/formTypes';
 import statesObject from './states.json';
 
 function PointOfContact(): JSX.Element {
+  const auth = useSblAuth();
   const {
     register,
     // control,
@@ -52,8 +54,8 @@ function PointOfContact(): JSX.Element {
         // 1.) Sending First Name and Last Name to the backend
         const formattedUserProfileObject =
           formatPointOfContactObject(preFormattedData);
-        // TODO: Create a Point of Contact API Request
-        await submitUserProfile(auth, formattedUserProfileObject);
+        // TODO: Need to link a LEI and a PERIOD
+        await submitPointOfContact(auth, formattedUserProfileObject);
         console.log('Point of Contact Submitted');
       } catch (error) {
         // eslint-disable-next-line no-console
diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index 21c4cd2fe..1de1b548d 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -2,6 +2,7 @@
 import { scroller } from 'react-scroll';
 
 import type {
+  FormattedPointOfContactShema,
   FormattedUserProfileObjectType,
   InstitutionDetailsApiCheckedType,
   InstitutionDetailsApiType,
@@ -29,17 +30,8 @@ export const formatUserProfileObject = (
 
 export const formatPointOfContactObject = (
   userProfileObject: PointOfContactSchema,
-): Omit<PointOfContactSchema, 'firstName' | 'lastName'> & {
-  first_name: string;
-  last_name: string;
-} => {
-  const formattedObject: Omit<
-    PointOfContactSchema,
-    'firstName' | 'lastName'
-  > & {
-    first_name: string;
-    last_name: string;
-  } = {
+): FormattedPointOfContactShema => {
+  const formattedObject: FormattedPointOfContactShema = {
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
     phone: userProfileObject.phone,
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index d6522acd9..5c058653c 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -216,3 +216,11 @@ export const pointOfContactSchema = basicInfoSchema.extend({
 });
 
 export type PointOfContactSchema = z.infer<typeof pointOfContactSchema>;
+
+export type FormattedPointOfContactShema = Omit<
+  PointOfContactSchema,
+  'firstName' | 'lastName'
+> & {
+  first_name: string;
+  last_name: string;
+};

From 18daed9d7b11eec719a325bac535c8717397d8ca Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 19:06:37 -0400
Subject: [PATCH 44/54] feat: modified proxy to handle the sbl filing app

---
 ENV-GUIDE.md   |  1 +
 vite.config.ts | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/ENV-GUIDE.md b/ENV-GUIDE.md
index ea106764e..20ae9f4b9 100644
--- a/ENV-GUIDE.md
+++ b/ENV-GUIDE.md
@@ -10,6 +10,7 @@ SBL_OIDC_AUTHORITY="http://localhost:8880/realms/regtech"
 SBL_OIDC_CLIENT_ID="regtech-client"
 SBL_OIDC_REDIRECT_URI="http://localhost:${SBL_DEV_PORT}/filing"
 SBL_REGTECH_BASE_URL="http://localhost:8881"
+SBL_FILING_BASE_URL="http://localhost:8882"
 SBL_MAIL_BASE_URL="http://localhost:8765"
 ```
 
diff --git a/vite.config.ts b/vite.config.ts
index 8d97d543e..5b42a7bbd 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -50,12 +50,22 @@ export default async ({ mode }) => {
         ? Number(environment.SBL_DEV_PORT)
         : 8899,
       proxy: {
-        // TODO: Add Proxy settings to api calls on the backend here
-        '/v1': {
+        // NOTE: Add Proxy settings to api calls on the backend here
+        "/v1/admin": {
           target: `${environment.SBL_REGTECH_BASE_URL}`,
           changeOrigin: true,
           secure: false,
         },
+        "/v1/institutions": {
+          target: `${environment.SBL_REGTECH_BASE_URL}`,
+          changeOrigin: true,
+          secure: false,
+        },
+        "/v1/filing": {
+          target: `${environment.SBL_FILING_BASE_URL}`,
+          changeOrigin: true,
+          secure: false,
+        },
         "/send": {
           target: `${environment.SBL_MAIL_BASE_URL}`,
           changeOrigin: true,

From ac42b44f6313406b2799683ba1ab138625f90860 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Tue, 12 Mar 2024 19:25:54 -0400
Subject: [PATCH 45/54] chore: added comment related to the international phone
 number regex

---
 src/types/formTypes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index 5c058653c..ccd10236f 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -171,10 +171,10 @@ export interface FormattedUserProfileObjectType {
   first_name: ValidationSchema['firstName'];
   last_name: ValidationSchema['lastName'];
   leis?: InstitutionDetailsApiType['lei'][];
-  hq_address_zip?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// NOTE: Placeholder for possible future use
 const internationalPhoneNumberRegex =
   // eslint-disable-next-line unicorn/no-unsafe-regex
   /\+(9[679]\d|8[0357-9]\d|6[7-9]\d|5[09]\d|42\d|3[578]\d|2[1-689]\d|9[0-58]|8[1246]|6[0-6]|5[1-8]|4[013-9]|3[0-469]|2[07]|7|1)(?:\W*\d){8}\W*(\d{1,2})$/;

From 9c91bb530ded721defd79ca49d65535b717ee0ab Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Thu, 14 Mar 2024 12:26:48 -0400
Subject: [PATCH 46/54] chore: added Washington DC as a 'state'

---
 src/pages/PointOfContact/states.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/PointOfContact/states.json b/src/pages/PointOfContact/states.json
index 44ebf6612..0d32b271b 100644
--- a/src/pages/PointOfContact/states.json
+++ b/src/pages/PointOfContact/states.json
@@ -47,6 +47,7 @@
   { "label": "Vermont", "value": "vermont" },
   { "label": "Virginia", "value": "virginia" },
   { "label": "Washington", "value": "washington" },
+  { "label": "Washington D.C.", "value": "dc"},
   { "label": "West Virginia", "value": "westvirginia" },
   { "label": "Wisconsin", "value": "wisconsin" },
   { "label": "Wyoming", "value": "wyoming" }

From a323131ccfcbc978e1fe94f54444715d2ab6d456 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Thu, 14 Mar 2024 15:50:01 -0400
Subject: [PATCH 47/54] comment: added phone number regex comment

---
 src/types/formTypes.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index ccd10236f..d81bf2cb1 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -173,8 +173,8 @@ export interface FormattedUserProfileObjectType {
   leis?: InstitutionDetailsApiType['lei'][];
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 // NOTE: Placeholder for possible future use
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const internationalPhoneNumberRegex =
   // eslint-disable-next-line unicorn/no-unsafe-regex
   /\+(9[679]\d|8[0357-9]\d|6[7-9]\d|5[09]\d|42\d|3[578]\d|2[1-689]\d|9[0-58]|8[1246]|6[0-6]|5[1-8]|4[013-9]|3[0-469]|2[07]|7|1)(?:\W*\d){8}\W*(\d{1,2})$/;

From 9dadc052e7f6170683df298d21779cc98d159690 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 00:24:29 -0400
Subject: [PATCH 48/54] chore: renamed variable

---
 src/api/requests/submitPointOfContact.ts  | 4 ++--
 src/pages/ProfileForm/ProfileFormUtils.ts | 6 +++---
 src/types/formTypes.ts                    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/requests/submitPointOfContact.ts b/src/api/requests/submitPointOfContact.ts
index 1c67cede2..24ebe3ceb 100644
--- a/src/api/requests/submitPointOfContact.ts
+++ b/src/api/requests/submitPointOfContact.ts
@@ -1,10 +1,10 @@
 import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
-import type { FormattedPointOfContactShema } from 'types/formTypes';
+import type { FormattedPointOfContactSchema } from 'types/formTypes';
 
 const submitPointOfContact = async (
   auth: SblAuthProperties,
-  userProfileObject: FormattedPointOfContactShema,
+  userProfileObject: FormattedPointOfContactSchema,
 ): Promise<null> => {
   return request<null>({
     url: `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`,
diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index 1de1b548d..66bac1eae 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -2,7 +2,7 @@
 import { scroller } from 'react-scroll';
 
 import type {
-  FormattedPointOfContactShema,
+  FormattedPointOfContactSchema,
   FormattedUserProfileObjectType,
   InstitutionDetailsApiCheckedType,
   InstitutionDetailsApiType,
@@ -30,8 +30,8 @@ export const formatUserProfileObject = (
 
 export const formatPointOfContactObject = (
   userProfileObject: PointOfContactSchema,
-): FormattedPointOfContactShema => {
-  const formattedObject: FormattedPointOfContactShema = {
+): FormattedPointOfContactSchema => {
+  const formattedObject: FormattedPointOfContactSchema = {
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
     phone: userProfileObject.phone,
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index d81bf2cb1..4e4db4b4b 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -217,7 +217,7 @@ export const pointOfContactSchema = basicInfoSchema.extend({
 
 export type PointOfContactSchema = z.infer<typeof pointOfContactSchema>;
 
-export type FormattedPointOfContactShema = Omit<
+export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
   'firstName' | 'lastName'
 > & {

From 86360b4f4744d85fb872d7074a80032da62dc66e Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 00:46:07 -0400
Subject: [PATCH 49/54] feat(poc api): hardcoded api request

---
 src/api/requests/submitPointOfContact.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/api/requests/submitPointOfContact.ts b/src/api/requests/submitPointOfContact.ts
index 24ebe3ceb..f4cf9fba9 100644
--- a/src/api/requests/submitPointOfContact.ts
+++ b/src/api/requests/submitPointOfContact.ts
@@ -7,7 +7,9 @@ const submitPointOfContact = async (
   userProfileObject: FormattedPointOfContactSchema,
 ): Promise<null> => {
   return request<null>({
-    url: `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`,
+    // This will eventually be `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`
+    // currently hardcoded
+    url: `/v1/filing/institutions/123456789TESTBANK123/filings/2024/contact-info`,
     method: 'post',
     body: userProfileObject,
     headers: { Authorization: `Bearer ${auth.user?.access_token}` },

From da170eedf02c1f25226197cbf04593ce23279acd Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 00:46:27 -0400
Subject: [PATCH 50/54] updated point of contact regex in zod schema

---
 src/pages/PointOfContact/index.tsx |  1 -
 src/types/formTypes.ts             | 25 +++++++++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index e6e123dda..05283b0ec 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -38,7 +38,6 @@ function PointOfContact(): JSX.Element {
     label: string;
     value: string;
   }): void => {
-    console.log('selected', label);
     setValue('hq_address_state', value);
   };
 
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index 4e4db4b4b..0577efa31 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -200,18 +200,31 @@ const usPhoneNumberRegex = /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/;
 // 123.456.7890
 // +91 (123) 456-7890
 
-// Point of Contact
+// Regular ZIP code regex
+// eslint-disable-next-line unicorn/no-unsafe-regex, @typescript-eslint/no-unused-vars
+const zipCodeRegex = /^\d{5}(?:[\s-]\d{4})?$/;
+
+// No ALL Zeroes ZIP code regex
+// eslint-disable-next-line unicorn/no-unsafe-regex
+const noZeroesZipCodeRegex = /^(?!0{5})\d{5}(?:[\s-](?!0{4})\d{4})?$/;
 
+// Point of Contact
 export const pointOfContactSchema = basicInfoSchema.extend({
   phone: z.string().trim().regex(usPhoneNumberRegex, {
     message: "Must in '999-999-9999' format",
   }),
-  hq_address_street_1: z.string().trim(),
+  hq_address_street_1: z.string().trim().min(One, {
+    message: 'You must enter your street address.',
+  }),
   hq_address_street_2: z.string().trim().optional(),
-  hq_address_city: z.string().trim(),
-  hq_address_state: z.string().trim(),
-  hq_address_zip: z.string().trim().length(Five, {
-    message: 'The ZIP code must be 5 numbers exactly.',
+  hq_address_city: z.string().trim().min(One, {
+    message: 'You must enter your city.',
+  }),
+  hq_address_state: z.string().trim().min(One, {
+    message: 'You must enter your state.',
+  }),
+  hq_address_zip: z.string().trim().regex(noZeroesZipCodeRegex, {
+    message: 'The ZIP code must be in 99999 or 99999-3333 format.',
   }),
 });
 

From 67bdd6f04f00fc805fa1633d757da0e8f8c9837b Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 01:47:33 -0400
Subject: [PATCH 51/54] feat(submitPointOfContact): API Request using hardcoded
 values, wip

---
 src/api/requests/submitPointOfContact.ts  |  4 +-
 src/components/FormErrorHeader.tsx        |  5 ++-
 src/pages/PointOfContact/index.tsx        | 49 +++++++++++++++--------
 src/pages/ProfileForm/ProfileFormUtils.ts |  2 +
 src/types/formTypes.ts                    |  9 +++--
 5 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/api/requests/submitPointOfContact.ts b/src/api/requests/submitPointOfContact.ts
index f4cf9fba9..837778380 100644
--- a/src/api/requests/submitPointOfContact.ts
+++ b/src/api/requests/submitPointOfContact.ts
@@ -8,9 +8,9 @@ const submitPointOfContact = async (
 ): Promise<null> => {
   return request<null>({
     // This will eventually be `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`
-    // currently hardcoded
+    // CURRENTLY HARDCODED
     url: `/v1/filing/institutions/123456789TESTBANK123/filings/2024/contact-info`,
-    method: 'post',
+    method: 'put',
     body: userProfileObject,
     headers: { Authorization: `Bearer ${auth.user?.access_token}` },
   });
diff --git a/src/components/FormErrorHeader.tsx b/src/components/FormErrorHeader.tsx
index cea505b38..d70f7f91f 100644
--- a/src/components/FormErrorHeader.tsx
+++ b/src/components/FormErrorHeader.tsx
@@ -20,6 +20,7 @@ function FormErrorHeader({
   id,
 }: FormErrorHeaderProperties): JSX.Element | null {
   if (!errors || Object.keys(errors).length === 0) return null;
+
   return (
     <div className='mb-[2.8125rem] mt-[2.8125rem] w-full'>
       <Element name={id} id={id}>
@@ -76,7 +77,9 @@ function FormErrorHeader({
                     {`${
                       formFieldsHeaderError[
                         keyUsed as keyof typeof formFieldsHeaderError
-                      ]
+                      ] ??
+                      errors[keyUsed]?.message ??
+                      'Missing entry'
                     }${
                       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
                       typeof keyIndex === 'number' ? ` (${keyIndex + 1})` : ''
diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx
index 05283b0ec..defce87a5 100644
--- a/src/pages/PointOfContact/index.tsx
+++ b/src/pages/PointOfContact/index.tsx
@@ -9,15 +9,32 @@ import { Button, Select, TextIntroduction } from 'design-system-react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import submitPointOfContact from 'api/requests/submitPointOfContact';
 import useSblAuth from 'api/useSblAuth';
+import FormErrorHeader from 'components/FormErrorHeader';
 import FormMain from 'components/FormMain';
-import { formatPointOfContactObject } from 'pages/ProfileForm/ProfileFormUtils';
+import {
+  formatPointOfContactObject,
+  scrollToElement,
+} from 'pages/ProfileForm/ProfileFormUtils';
 import { useForm } from 'react-hook-form';
 import type { PointOfContactSchema } from 'types/formTypes';
 import { pointOfContactSchema } from 'types/formTypes';
 import statesObject from './states.json';
 
+const defaultValuesPOC = {
+  firstName: '',
+  lastName: '',
+  phone: '',
+  email: '',
+  hq_address_street_1: '',
+  hq_address_street_2: '',
+  hq_address_city: '',
+  hq_address_state: '',
+  hq_address_zip: '',
+};
+
 function PointOfContact(): JSX.Element {
   const auth = useSblAuth();
+  const formErrorHeaderId = 'PointOfContactFormErrors';
   const {
     register,
     // control,
@@ -28,21 +45,18 @@ function PointOfContact(): JSX.Element {
     formState: { errors: formErrors },
   } = useForm<PointOfContactSchema>({
     resolver: zodResolver(pointOfContactSchema),
-    // defaultValues,
+    defaultValues: defaultValuesPOC,
   });
 
-  const onSelectState = ({
-    label,
-    value,
-  }: {
-    label: string;
-    value: string;
-  }): void => {
-    setValue('hq_address_state', value);
+  const onClearform = (): void => {
+    reset();
+    setValue('hq_address_state', '');
+    scrollToElement('firstName');
   };
 
-  window.getValues = getValues;
-  console.log('point of contact form errors:', formErrors);
+  const onSelectState = ({ value }: { value: string }): void => {
+    setValue('hq_address_state', value);
+  };
 
   // NOTE: This function is used for submitting the multipart/formData
   const onSubmitButtonAction = async (): Promise<void> => {
@@ -53,7 +67,7 @@ function PointOfContact(): JSX.Element {
         // 1.) Sending First Name and Last Name to the backend
         const formattedUserProfileObject =
           formatPointOfContactObject(preFormattedData);
-        // TODO: Need to link a LEI and a PERIOD
+        // TODO: Need a LEI and a PERIOD from previous forms
         await submitPointOfContact(auth, formattedUserProfileObject);
         console.log('Point of Contact Submitted');
       } catch (error) {
@@ -61,7 +75,7 @@ function PointOfContact(): JSX.Element {
         console.log(error);
       }
     } else {
-      // scrollToElement('point-of-contact');
+      scrollToElement(formErrorHeaderId);
     }
   };
 
@@ -81,7 +95,7 @@ function PointOfContact(): JSX.Element {
             }
           />
         </FormHeaderWrapper>
-
+        <FormErrorHeader errors={formErrors} id={formErrorHeaderId} />
         <div className='mb-[1.875rem]'>
           <SectionIntro heading='Provide the point of contact for your submission'>
             Enter the name and business contact information of a person who may
@@ -89,7 +103,6 @@ function PointOfContact(): JSX.Element {
             your financial institution&apos;s submission.
           </SectionIntro>
         </div>
-
         <FormMain>
           <FieldGroup>
             <InputEntry
@@ -133,6 +146,7 @@ function PointOfContact(): JSX.Element {
                 <Select
                   id='state'
                   label='State'
+                  // @ts-expect-error Select TypeScript error -- needs to be fixed in DSR
                   onChange={onSelectState}
                   options={[
                     { label: '-- select an option --', value: '' },
@@ -151,6 +165,7 @@ function PointOfContact(): JSX.Element {
           <FormButtonGroup>
             <Button
               appearance='primary'
+              // eslint-disable-next-line @typescript-eslint/no-misused-promises
               onClick={onSubmitButtonAction}
               label='Save and continue'
               aria-label='Save and continue'
@@ -159,7 +174,7 @@ function PointOfContact(): JSX.Element {
             />
             <Button
               label='Clear form'
-              // onClick={() => {}}
+              onClick={onClearform}
               appearance='warning'
               asLink
             />
diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index 66bac1eae..56e536cd9 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -32,6 +32,8 @@ export const formatPointOfContactObject = (
   userProfileObject: PointOfContactSchema,
 ): FormattedPointOfContactSchema => {
   const formattedObject: FormattedPointOfContactSchema = {
+    //  NOTE: for now id is hardcoded, will come from another form
+    id: 0,
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
     phone: userProfileObject.phone,
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index 0577efa31..995807031 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -214,17 +214,17 @@ export const pointOfContactSchema = basicInfoSchema.extend({
     message: "Must in '999-999-9999' format",
   }),
   hq_address_street_1: z.string().trim().min(One, {
-    message: 'You must enter your street address.',
+    message: 'You must enter your street address',
   }),
   hq_address_street_2: z.string().trim().optional(),
   hq_address_city: z.string().trim().min(One, {
-    message: 'You must enter your city.',
+    message: 'You must enter your city',
   }),
   hq_address_state: z.string().trim().min(One, {
-    message: 'You must enter your state.',
+    message: 'You must enter your state',
   }),
   hq_address_zip: z.string().trim().regex(noZeroesZipCodeRegex, {
-    message: 'The ZIP code must be in 99999 or 99999-3333 format.',
+    message: 'The ZIP code must be in 99999 or 99999-3333 format',
   }),
 });
 
@@ -234,6 +234,7 @@ export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
   'firstName' | 'lastName'
 > & {
+  id: number;
   first_name: string;
   last_name: string;
 };

From 5b762a8f709a3029787adb7bfa02e463c08f1679 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 11:35:03 -0400
Subject: [PATCH 52/54] chore: removed 'id' as it is not needed in the request

---
 src/pages/ProfileForm/ProfileFormUtils.ts | 3 +--
 src/types/formTypes.ts                    | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/ProfileForm/ProfileFormUtils.ts b/src/pages/ProfileForm/ProfileFormUtils.ts
index 56e536cd9..f671f3b44 100644
--- a/src/pages/ProfileForm/ProfileFormUtils.ts
+++ b/src/pages/ProfileForm/ProfileFormUtils.ts
@@ -32,8 +32,7 @@ export const formatPointOfContactObject = (
   userProfileObject: PointOfContactSchema,
 ): FormattedPointOfContactSchema => {
   const formattedObject: FormattedPointOfContactSchema = {
-    //  NOTE: for now id is hardcoded, will come from another form
-    id: 0,
+    //  NOTE: 'id' is not necessary
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
     phone: userProfileObject.phone,
diff --git a/src/types/formTypes.ts b/src/types/formTypes.ts
index 995807031..f788edbf0 100644
--- a/src/types/formTypes.ts
+++ b/src/types/formTypes.ts
@@ -234,7 +234,6 @@ export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
   'firstName' | 'lastName'
 > & {
-  id: number;
   first_name: string;
   last_name: string;
 };

From a545bd39d76e2efa21f9fd22fdd584a7a142c4af Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 13:48:37 -0400
Subject: [PATCH 53/54] style(SectionIntro): 670px max-width and box-border
 (includes padding/margins/etc)

---
 src/components/SectionIntro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SectionIntro.tsx b/src/components/SectionIntro.tsx
index b2e59dbb8..b187fca19 100644
--- a/src/components/SectionIntro.tsx
+++ b/src/components/SectionIntro.tsx
@@ -12,7 +12,7 @@ function SectionIntro({
   children = '',
 }: SectionIntroProperties): JSX.Element {
   return (
-    <div className='mb-[1.625rem] max-w-[48.125rem]'>
+    <div className='mb-[1.625rem] box-border max-w-[41.875rem]'>
       <Heading type='2'>{heading}</Heading>
       <FormParagraph>{children}</FormParagraph>
     </div>

From 06ecfb41fca05c4d61311c2d2b6a3650b257d763 Mon Sep 17 00:00:00 2001
From: shindigira <shindigira@gmail.com>
Date: Fri, 15 Mar 2024 15:50:28 -0400
Subject: [PATCH 54/54] style: SectionIntro 30px margin-bottom

---
 src/components/SectionIntro.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SectionIntro.tsx b/src/components/SectionIntro.tsx
index b187fca19..e5104fdc8 100644
--- a/src/components/SectionIntro.tsx
+++ b/src/components/SectionIntro.tsx
@@ -12,7 +12,7 @@ function SectionIntro({
   children = '',
 }: SectionIntroProperties): JSX.Element {
   return (
-    <div className='mb-[1.625rem] box-border max-w-[41.875rem]'>
+    <div className='mb-[1.875rem] box-border max-w-[41.875rem]'>
       <Heading type='2'>{heading}</Heading>
       <FormParagraph>{children}</FormParagraph>
     </div>