Point of Contact - Phase 1 (#453)

Closes #416 

## Changes
- Integrates form into workflow
- Enables saving POC info to API
- Populates form with existing POC contact when available
- Only saves data to API if it has changed

src/api/requests/submitPointOfContact.ts

@@ -2,16 +2,22 @@ import { request } from 'api/axiosService';
 import type { SblAuthProperties } from 'api/useSblAuth';
 import type { FormattedPointOfContactSchema } from 'types/formTypes';
 
+interface Options {
+  data: FormattedPointOfContactSchema;
+  lei: string;
+  filingPeriod: string;
+}
+
 const submitPointOfContact = async (
   auth: SblAuthProperties,
-  userProfileObject: FormattedPointOfContactSchema,
+  options: Options,
 ): Promise<null> => {
+  const { data, lei, filingPeriod } = options;
+
   return request<FormattedPointOfContactSchema, null>({
-    // This will eventually be `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`
-    // CURRENTLY HARDCODED
-    url: `/v1/filing/institutions/123456789TESTBANK123/filings/2024/contact-info`,
+    url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}/contact-info`,
     method: 'put',
-    data: userProfileObject,
+    data,
     headers: { Authorization: `Bearer ${auth.user?.access_token}` },
   });
 };

src/pages/Filing/FilingApp/FilingContact.tsx

@@ -1,30 +1,17 @@
-import { Grid } from 'design-system-react';
-import { useParams } from 'react-router-dom';
-import { FilingNavButtons } from './FilingNavButtons';
+import PointOfContact from 'pages/PointOfContact';
+import { useNavigate, useParams } from 'react-router-dom';
 import { FilingSteps } from './FilingSteps';
 
 function FilingContact(): JSX.Element {
   const { lei, year } = useParams();
+  const navigate = useNavigate();
+
+  const onSubmit = (): void => navigate(`/filing/${year}/${lei}/submit`);
 
   return (
     <>
       <FilingSteps />
-      <Grid.Wrapper center>
-        <Grid.Row>
-          <Grid.Column width={8} className='u-mt15'>
-            CONTACT CONTENT GOES HERE
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row>
-          <Grid.Column width={8} className='u-mt15'>
-            <FilingNavButtons
-              hrefPrevious={`/filing/${year}/${lei}/warnings`}
-              hrefNext={`/filing/${year}/${lei}/submit`}
-              isStepComplete // TODO: Derive actual step status
-            />
-          </Grid.Column>
-        </Grid.Row>
-      </Grid.Wrapper>
+      <PointOfContact onSubmit={onSubmit} />
     </>
   );
 }

src/pages/PointOfContact/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import FieldGroup from 'components/FieldGroup';
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
@@ -17,9 +18,13 @@ import {
   formatPointOfContactObject,
   scrollToElement,
 } from 'pages/ProfileForm/ProfileFormUtils';
+import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import type { FilingType } from 'types/filingTypes';
 import type { PointOfContactSchema } from 'types/formTypes';
 import { pointOfContactSchema } from 'types/formTypes';
+import useFilingStatus from 'utils/useFilingStatus';
 import statesObject from './states.json';
 
 const defaultValuesPOC = {
@@ -34,22 +39,51 @@ const defaultValuesPOC = {
   hq_address_zip: '',
 };
 
-function PointOfContact(): JSX.Element {
+interface PointOfContactProperties {
+  onSubmit?: () => void;
+}
+
+function PointOfContact({ onSubmit }: PointOfContactProperties): JSX.Element {
   const auth = useSblAuth();
+  const { lei, year } = useParams();
   const formErrorHeaderId = 'PointOfContactFormErrors';
+  const { data: filing } = useFilingStatus(lei);
+
   const {
     register,
-    // control,
+    watch,
     reset,
     trigger,
     getValues,
     setValue,
-    formState: { errors: formErrors },
+    formState: { errors: formErrors, isDirty },
   } = useForm<PointOfContactSchema>({
     resolver: zodResolver(pointOfContactSchema),
     defaultValues: defaultValuesPOC,
   });
 
+  /** Populate form with pre-existing data, when it exists  */
+  useEffect(() => {
+    if (!filing) return;
+
+    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_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);
+  }, [filing, setValue]);
+
   const onClearform = (): void => {
     reset();
     setValue('hq_address_state', '');
@@ -65,12 +99,21 @@ function PointOfContact(): JSX.Element {
     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: Need a LEI and a PERIOD from previous forms
-        await submitPointOfContact(auth, formattedUserProfileObject);
+        // Only need to hit the API if data has changed
+        if (isDirty) {
+          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,
+          });
+        }
+
+        if (onSubmit) onSubmit();
       } catch (error) {
         // eslint-disable-next-line no-console
         console.log(error);
@@ -157,6 +200,7 @@ function PointOfContact(): JSX.Element {
                     { label: '-- select an option --', value: '' },
                     ...statesObject.states,
                   ]}
+                  value={watch('hq_address_state')}
                 />
               </div>
               <InputEntry

src/pages/ProfileForm/ProfileFormUtils.ts

@@ -35,7 +35,7 @@ export const formatPointOfContactObject = (
     //  NOTE: 'id' is not necessary
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
-    phone: userProfileObject.phone,
+    phone_number: userProfileObject.phone,
     email: userProfileObject.email,
     hq_address_street_1: userProfileObject.hq_address_street_1,
     hq_address_street_2: userProfileObject.hq_address_street_2,

src/types/filingTypes.ts

@@ -64,7 +64,7 @@ export const FilingSchema = z.object({
       hq_address_state: z.string(),
       hq_address_zip: z.string(),
       email: z.string(),
-      phone: z.string(),
+      phone_number: z.string(),
     }),
     z.null(),
   ]),

src/types/formTypes.ts

@@ -261,8 +261,9 @@ export type PointOfContactSchema = z.infer<typeof pointOfContactSchema>;
 
 export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
-  'firstName' | 'lastName'
+  'firstName' | 'lastName' | 'phone'
 > & {
   first_name: string;
   last_name: string;
+  phone_number: string;
 };