dynamic addtnlActuaryContacts form working wip

Enterprise-CMCS · Apr 13, 2024 · 1322ce3 · 1322ce3
1 parent 57809b6
commit 1322ce3
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 14 deletions.
diff --git 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
@@ -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>