Design Review - Point of Contact

src/pages/Filing/FilingApp/FilingContact.tsx

@@ -1,6 +1,5 @@
 import PointOfContact from 'pages/PointOfContact';
 import { useNavigate, useParams } from 'react-router-dom';
-import { FilingSteps } from './FilingSteps';
 
 function FilingContact(): JSX.Element {
   const { lei, year } = useParams();
@@ -14,7 +13,7 @@ function FilingContact(): JSX.Element {
 
   return (
     <>
-      <FilingSteps />
+      {/* <FilingSteps /> */}
       <PointOfContact onSubmit={onSubmit} />
     </>
   );

src/pages/PointOfContact/index.tsx

@@ -4,9 +4,9 @@ import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
 import InputEntry from 'components/InputEntry';
+import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
 import { Paragraph, Select, TextIntroduction } from 'design-system-react';
-
 import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -16,6 +16,8 @@ import FormErrorHeader from 'components/FormErrorHeader';
 import FormMain from 'components/FormMain';
 import { LoadingContent } from 'components/Loading';
 import FilingNavButtons from 'pages/Filing/FilingApp/FilingNavButtons';
+import FilingSteps from 'pages/Filing/FilingApp/FilingSteps';
+import InstitutionHeading from 'pages/Filing/FilingApp/InstitutionHeading';
 import {
   formatPointOfContactObject,
   scrollToElement,
@@ -24,9 +26,11 @@ import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import type { FilingType } from 'types/filingTypes';
-import type { PointOfContactSchema } from 'types/formTypes';
-import { pointOfContactSchema } from 'types/formTypes';
+import type { ContactInfoKeys, PointOfContactSchema } from 'types/formTypes';
+import { ContactInfoMap, pointOfContactSchema } from 'types/formTypes';
+import { contactInfoLink } from 'utils/common';
 import useFilingStatus from 'utils/useFilingStatus';
+import useInstitutionDetails from 'utils/useInstitutionDetails';
 import statesObject from './states.json';
 
 const defaultValuesPOC = {
@@ -56,7 +60,14 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
     lei,
     year,
   );
-  const [isLoading, setIsLoading] = useState(false);
+  const {
+    data: institution,
+    isLoading: isLoadingInstitution,
+    isError: isErrorInstitution,
+  } = useInstitutionDetails(lei);
+
+  const isLoading = [isLoadingInstitution, isFilingLoading].some(Boolean);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
   const {
     register,
@@ -77,24 +88,14 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
 
     const contactInfo = (filing as FilingType).contact_info;
 
-    if (contactInfo?.first_name) setValue('firstName', contactInfo.first_name);
-    if (contactInfo?.last_name) setValue('lastName', contactInfo.last_name);
-    if (contactInfo?.phone_number) setValue('phone', contactInfo.phone_number);
-    if (contactInfo?.email) setValue('email', contactInfo.email);
-    if (contactInfo?.hq_address_street_1)
-      setValue('hq_address_street_1', contactInfo.hq_address_street_1);
-    if (contactInfo?.hq_address_street_2)
-      setValue('hq_address_street_2', contactInfo.hq_address_street_2);
-    if (contactInfo?.hq_address_street_3)
-      setValue('hq_address_street_3', contactInfo.hq_address_street_3);
-    if (contactInfo?.hq_address_street_4)
-      setValue('hq_address_street_4', contactInfo.hq_address_street_4);
-    if (contactInfo?.hq_address_city)
-      setValue('hq_address_city', contactInfo.hq_address_city);
-    if (contactInfo?.hq_address_state)
-      setValue('hq_address_state', contactInfo.hq_address_state);
-    if (contactInfo?.hq_address_zip)
-      setValue('hq_address_zip', contactInfo.hq_address_zip);
+    if (contactInfo) {
+      for (const property of Object.keys(ContactInfoMap) as ContactInfoKeys[]) {
+        const mappedProperty = ContactInfoMap[property];
+        if (typeof property === 'string' && contactInfo[property]) {
+          setValue(mappedProperty, contactInfo[property]);
+        }
+      }
+    }
   }, [filing, setValue]);
 
   const onClearform = (): void => {
@@ -116,52 +117,63 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
   ): Promise<void> => {
     event.preventDefault();
     const passesValidation = await trigger();
-    if (passesValidation) {
+    // Only need to hit API if the form passes validation and the data has changed
+    if (passesValidation && isDirty) {
       try {
-        // Only need to hit the API if data has changed
-        if (isDirty) {
-          setIsLoading(true);
-          const preFormattedData = getValues();
-          // 1.) Sending First Name and Last Name to the backend
-          const formattedUserProfileObject =
-            formatPointOfContactObject(preFormattedData);
-
-          await submitPointOfContact(auth, {
-            data: formattedUserProfileObject,
-            lei,
-            filingPeriod: year,
-          });
+        setIsSubmitting(true);
+        const preFormattedData = getValues();
+        // 1.) Sending First Name and Last Name to the backend
+        const formattedUserProfileObject =
+          formatPointOfContactObject(preFormattedData);
 
-          setIsLoading(false);
-        }
+        await submitPointOfContact(auth, {
+          data: formattedUserProfileObject,
+          lei,
+          filingPeriod: year,
+        });
 
         if (onSubmit) onSubmit(true);
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
-        setIsLoading(false);
         if (onSubmit) onSubmit(false);
+      } finally {
+        setIsSubmitting(false);
       }
     } else {
       scrollToElement(formErrorHeaderId);
     }
   };
 
-  if (isFilingLoading)
-    return <LoadingContent message='Loading Filing data...' />;
+  // TODO: Redirect the user if the filing period or lei are not valid
+
+  if (isLoading) return <LoadingContent message='Loading Filing data...' />;
 
   return (
     <div id='point-of-contact'>
+      <FilingSteps />
       <FormWrapper>
         <FormHeaderWrapper>
+          <div className='mb-[0.9375rem]'>
+            <InstitutionHeading
+              eyebrow
+              name={institution?.name}
+              filingPeriod={year}
+            />
+          </div>
           <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.'
+            heading='Provide point of contact'
+            subheading="Provide the name and business contact information of a person that the Bureau or other regulators may contact with questions about your financial institution's data submission."
             description={
               <Paragraph>
-                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.
+                Your financial institution&apos;s point of contact information
+                will not be published with your financial institution&apos;s
+                data and pursuant to the rule will not be available to the
+                general public. This information is required pursuant to{' '}
+                <Link target='_blank' href={contactInfoLink}>
+                  § 1002.109(b)(3)
+                </Link>
+                .
               </Paragraph>
             }
           />
@@ -172,10 +184,11 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
           keyLogicFunc={normalKeyLogic}
         />
         <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 heading='Provide contact information for your submission'>
+            You are required to complete all fields with the exception of the
+            street address lines labeled optional. Your point of contact
+            information will not be saved until you provide all required
+            information and click &quot;Save and continue.&quot;
           </SectionIntro>
         </div>
         {/*  eslint-disable-next-line @typescript-eslint/no-misused-promises */}
@@ -254,7 +267,7 @@ function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
               onNextClick={onSubmitButtonAction}
               onPreviousClick={onPreviousClick}
               onClearClick={onClearform}
-              isLoading={isLoading}
+              isLoading={isSubmitting}
             />
           </FormButtonGroup>
         </FormMain>

src/types/filingTypes.ts

@@ -105,7 +105,6 @@ export interface SubmissionResponse {
   validation_results: ValidationResults | null;
   submission_time: Date | null;
   filename: string;
-  total_records: number;
   submitter: UserActionDTO;
   accepter: UserActionDTO | null;
   total_records: number;

src/types/formTypes.ts

@@ -263,6 +263,24 @@ export const pointOfContactSchema = basicInfoSchema.extend({
 
 export type PointOfContactSchema = z.infer<typeof pointOfContactSchema>;
 
+export const ContactInfoMap = {
+  first_name: 'firstName',
+  last_name: 'lastName',
+  phone_number: 'phone',
+  email: 'email',
+  hq_address_street_1: 'hq_address_street_1',
+  hq_address_street_2: 'hq_address_street_2',
+  hq_address_street_3: 'hq_address_street_3',
+  hq_address_street_4: 'hq_address_street_4',
+  hq_address_city: 'hq_address_city',
+  hq_address_state: 'hq_address_state',
+  hq_address_zip: 'hq_address_zip',
+} as const;
+
+export type ContactInfoMapType = typeof ContactInfoMap;
+export type ContactInfoKeys = keyof typeof ContactInfoMap;
+export type ContactInfoValues = (typeof ContactInfoMap)[ContactInfoKeys];
+
 export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
   'firstName' | 'lastName' | 'phone'

src/utils/common.ts

@@ -11,6 +11,8 @@ export const fileFormatLink =
   'https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/#2.2';
 export const dataValidationLink =
   'https://www.consumerfinance.gov/data-research/small-business-lending/filing-instructions-guide/2024-guide/#4';
+export const contactInfoLink =
+  'https://www.federalregister.gov/documents/2023/05/31/2023-07230/small-business-lending-under-the-equal-credit-opportunity-act-regulation-b#p-4309';
 export const sblHelpMail =
   'mailto:[email protected]?subject=[BETA] Upload: Questions on File Formatting';
 

src/utils/getZodKeys.ts

@@ -1,25 +1,24 @@
 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 [];
+export const getZodKeys = (schema: z.ZodType): string[] => {
+  // Adjusted: Signature now uses Zod.ZodType to eliminate null& undefined check
   // check if schema is nullable or optional
-  if (schema instanceof z.ZodNullable || schema instanceof z.ZodOptional)
-    return zodKeys(schema.unwrap());
+  if (schema instanceof z.ZodNullable || schema instanceof z.ZodOptional) {
+    return getZodKeys(schema.unwrap());
+  }
   // check if schema is an array
-  if (schema instanceof z.ZodArray) return zodKeys(schema.element);
+  if (schema instanceof z.ZodArray) {
+    return getZodKeys(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);
+    const entries = Object.entries<Zod.ZodType>(schema.shape); // Adjusted: Uses Zod.ZodType as generic to remove instanceof check. Since .shape returns ZodRawShape which has Zod.ZodType as type for each key.
     // 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}`)
-          : [];
+      const nested = getZodKeys(value).map(subKey => `${key}.${subKey}`);
       // return nested keys
       return nested.length > 0 ? nested : key;
     });
@@ -28,4 +27,4 @@ const zodKeys = <T extends z.ZodTypeAny>(schema: T): string[] => {
   return [];
 };
 
-export default zodKeys;
+export default getZodKeys;