From 1322ce3ef31ef22617816fa864e7fe0237a83f7a Mon Sep 17 00:00:00 2001
From: ruizajtruss <ruizaj@truss.works>
Date: Sat, 13 Apr 2024 00:35:56 +0000
Subject: [PATCH] dynamic addtnlActuaryContacts form working wip

---
 .../app-web/src/formHelpers/formatters.ts     | 10 +--
 .../RateDetails/V2/SingleRateFormFields.tsx   | 67 +++++++++++++++++--
 2 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/services/app-web/src/formHelpers/formatters.ts b/services/app-web/src/formHelpers/formatters.ts
index 8f51d08f37..a396533ace 100644
--- a/services/app-web/src/formHelpers/formatters.ts
+++ b/services/app-web/src/formHelpers/formatters.ts
@@ -51,15 +51,7 @@ const formatActuaryContactsForForm = (actuaryContacts?: ActuaryContact[] | GQLAc
                     actuarialFirm: actuarialFirm ?? undefined,
                 }
         })
-        : [
-              {
-                  name: '',
-                  titleRole: '',
-                  email: '',
-                  actuarialFirm: undefined,
-                  actuarialFirmOther: '',
-              },
-          ]
+        : []
 }
 
 
diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx
index 2995cfb465..bdf56a4c73 100644
--- a/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx
+++ b/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import {
+    Button,
     DatePicker,
     DateRangePicker,
     Fieldset,
@@ -23,9 +24,16 @@ import {
 } from '../../../../components/FileUpload'
 import { useS3 } from '../../../../contexts/S3Context'
 
-import { FieldArray, FormikErrors, getIn, useFormikContext } from 'formik'
+import {
+    FieldArray,
+    FieldArrayRenderProps,
+    FormikErrors,
+    getIn,
+    useFormikContext,
+} from 'formik'
 import { ActuaryContactFields } from '../../Contacts'
 import { FormikRateForm, RateDetailFormConfig } from './RateDetailsV2'
+import { useFocus } from '../../../../hooks/useFocus'
 const isRateTypeEmpty = (rateForm: FormikRateForm): boolean =>
     rateForm.rateType === undefined
 const isRateTypeAmendment = (rateForm: FormikRateForm): boolean =>
@@ -75,6 +83,14 @@ const RateDatesErrorMessage = ({
     return <PoliteErrorMessage>{validationErrorMessage}</PoliteErrorMessage>
 }
 
+const emptyActuaryContact = {
+    name: '',
+    titleRole: '',
+    email: '',
+    actuarialFirm: undefined,
+    actuarialFirmOther: '',
+}
+
 export const SingleRateFormFields = ({
     rateForm,
     shouldValidate,
@@ -85,6 +101,20 @@ export const SingleRateFormFields = ({
     // page level setup
     const { handleDeleteFile, handleUploadFile, handleScanFile } = useS3()
     const { errors, setFieldValue } = useFormikContext<RateDetailFormConfig>()
+    const [focusNewActuaryContact, setFocusNewActuaryContact] = useState(false)
+
+    const newActuaryContactNameRef = useRef<HTMLInputElement | null>(null)
+    const [newActuaryContactButtonRef, setNewActuaryContactButtonFocus] =
+        useFocus()
+
+    useEffect(() => {
+        if (focusNewActuaryContact) {
+            newActuaryContactNameRef.current &&
+                newActuaryContactNameRef.current.focus()
+            setFocusNewActuaryContact(false)
+            newActuaryContactNameRef.current = null
+        }
+    }, [focusNewActuaryContact])
 
     const showFieldErrors = (
         fieldName: keyof FormikRateForm
@@ -471,11 +501,11 @@ export const SingleRateFormFields = ({
                     fieldSetLegend="Certifying Actuary"
                 />
                 <FieldArray name={`${fieldNamePrefix}.addtlActuaryContacts`}>
-                    {() => (
+                    {({ remove, push }: FieldArrayRenderProps) => (
                         <div
                             style={{ marginTop: '40px' }}
                             className={styles.actuaryContacts}
-                            data-testid="state-contacts"
+                            data-testid="actuary-contacts"
                         >
                             {rateForm.addtlActuaryContacts.length > 0 &&
                                 rateForm.addtlActuaryContacts.map(
@@ -488,12 +518,39 @@ export const SingleRateFormFields = ({
                                             <ActuaryContactFields
                                                 shouldValidate={shouldValidate}
                                                 fieldNamePrefix={`${fieldNamePrefix}.addtlActuaryContacts.${index}`}
-                                                fieldSetLegend="Additional Actuary Contract"
+                                                fieldSetLegend="Certifying actuary"
                                                 electivity="Optional"
+                                                inputRef={
+                                                    newActuaryContactNameRef
+                                                }
                                             />
+                                            <Button
+                                                type="button"
+                                                unstyled
+                                                className={
+                                                    styles.removeContactBtn
+                                                }
+                                                onClick={() => {
+                                                    remove(index)
+                                                    setNewActuaryContactButtonFocus()
+                                                }}
+                                            >
+                                                Remove
+                                            </Button>
                                         </div>
                                     )
                                 )}
+                            <Button
+                                type="button"
+                                unstyled
+                                onClick={() => {
+                                    push(emptyActuaryContact)
+                                    setFocusNewActuaryContact(true)
+                                }}
+                                ref={newActuaryContactButtonRef}
+                            >
+                                Add a certifying actuary
+                            </Button>
                         </div>
                     )}
                 </FieldArray>