Fix form errors and styling on rate details page (#2395)

* Only show other firm input on validation. * Update link to `Remove certifying actuary` * Add addtl actuary errors to summary. * Add addtl actuary errors to summary for v1. * Fix styling of additional actuary UI.
Enterprise-CMCS · Apr 30, 2024 · 02f1144 · 02f1144
1 parent 9c1ebd3
commit 02f1144
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 21 deletions.
diff --git a/services/app-web/src/pages/StateSubmission/Contacts/ActuaryContactFields.tsx b/services/app-web/src/pages/StateSubmission/Contacts/ActuaryContactFields.tsx
@@ -168,10 +168,16 @@ export const ActuaryContactFields = ({
                             Other actuarial firm
                         </label>
                         <PoliteErrorMessage>
-                            {getIn(
-                                errors,
-                                `${fieldNamePrefix}.actuarialFirmOther`
-                            )}
+                            {showFieldErrors(
+                                getIn(
+                                    errors,
+                                    `${fieldNamePrefix}.actuarialFirmOther`
+                                )
+                            ) &&
+                                getIn(
+                                    errors,
+                                    `${fieldNamePrefix}.actuarialFirmOther`
+                                )}
                         </PoliteErrorMessage>
                         <Field
                             name={`${fieldNamePrefix}.actuarialFirmOther`}

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/RateDetails.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/RateDetails.tsx
@@ -299,6 +299,27 @@ export const RateDetails = ({
                             }
                         )
                     }
+
+                    // If the field is addtlActuaryContacts, then it should be an array.
+                    if (
+                        field === 'addtlActuaryContacts' &&
+                        Array.isArray(value)
+                    ) {
+                        // Loops through every additional certifying actuary and adds each actuary field with an error to
+                        // the errorObject.
+                        value.forEach((contact, contactIndex) => {
+                            if (!contact) return
+
+                            Object.entries(contact).forEach(
+                                ([field, value]) => {
+                                    const errorKey = `rateInfos.${index}.addtlActuaryContacts.${contactIndex}.${field}`
+                                    if (typeof value === 'string') {
+                                        errorObject[errorKey] = value
+                                    }
+                                }
+                            )
+                        })
+                    }
                 })
             })
         }

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/SingleRateCert.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/SingleRateCert.tsx
@@ -584,11 +584,7 @@ export const SingleRateCert = ({
                         name={`${fieldNamePrefix}.addtlActuaryContacts`}
                     >
                         {({ remove, push }: FieldArrayRenderProps) => (
-                            <div
-                                style={{ marginTop: '40px' }}
-                                className={styles.actuaryContacts}
-                                data-testid="actuary-contacts"
-                            >
+                            <FormGroup data-testid="actuary-contacts">
                                 {rateInfo.addtlActuaryContacts.length > 0 &&
                                     rateInfo.addtlActuaryContacts.map(
                                         (_actuaryContact, index) => (
@@ -621,7 +617,7 @@ export const SingleRateCert = ({
                                                     }}
                                                     data-testid="removeContactBtn"
                                                 >
-                                                    Remove
+                                                    Remove certifying actuary
                                                 </Button>
                                             </div>
                                         )
@@ -637,7 +633,7 @@ export const SingleRateCert = ({
                                 >
                                     Add a certifying actuary
                                 </Button>
-                            </div>
+                            </FormGroup>
                         )}
                     </FieldArray>
                 </FormGroup>

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/RateDetailsV2.tsx
@@ -358,6 +358,27 @@ const RateDetailsV2 = ({
                             }
                         )
                     }
+
+                    // If the field is addtlActuaryContacts, then it should be an array.
+                    if (
+                        field === 'addtlActuaryContacts' &&
+                        Array.isArray(value)
+                    ) {
+                        // Loops through every additional certifying actuary and adds each actuary field with an error to
+                        // the errorObject.
+                        value.forEach((contact, contactIndex) => {
+                            if (!contact) return
+
+                            Object.entries(contact).forEach(
+                                ([field, value]) => {
+                                    const errorKey = `rateForms.${index}.addtlActuaryContacts.${contactIndex}.${field}`
+                                    if (typeof value === 'string') {
+                                        errorObject[errorKey] = value
+                                    }
+                                }
+                            )
+                        })
+                    }
                 })
             })
         }

diff --git a/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx b/services/app-web/src/pages/StateSubmission/RateDetails/V2/SingleRateFormFields.tsx
@@ -502,11 +502,7 @@ export const SingleRateFormFields = ({
                 />
                 <FieldArray name={`${fieldNamePrefix}.addtlActuaryContacts`}>
                     {({ remove, push }: FieldArrayRenderProps) => (
-                        <div
-                            style={{ marginTop: '40px' }}
-                            className={styles.actuaryContacts}
-                            data-testid="actuary-contacts"
-                        >
+                        <FormGroup data-testid="actuary-contacts">
                             {rateForm.addtlActuaryContacts.length > 0 &&
                                 rateForm.addtlActuaryContacts.map(
                                     (_actuaryContact, index) => (
@@ -535,7 +531,7 @@ export const SingleRateFormFields = ({
                                                 }}
                                                 data-testid="removeContactBtn"
                                             >
-                                                Remove
+                                                Remove certifying actuary
                                             </Button>
                                         </div>
                                     )
@@ -551,7 +547,7 @@ export const SingleRateFormFields = ({
                             >
                                 Add a certifying actuary
                             </Button>
-                        </div>
+                        </FormGroup>
                     )}
                 </FieldArray>
             </FormGroup>

diff --git a/services/app-web/src/pages/StateSubmission/StateSubmissionForm.module.scss b/services/app-web/src/pages/StateSubmission/StateSubmissionForm.module.scss
@@ -105,10 +105,10 @@
 
 .stateContact,
 .actuaryContact {
-    margin-bottom: uswds.units(5);
+    margin-bottom: uswds.units(2);
 
     .removeContactBtn {
-        margin-top: 0.5rem;
+        margin-top: uswds.units(3);
         @include uswds.u-text('secondary');
     }
 }
@@ -128,7 +128,7 @@
     }
 
     .removeContactBtn {
-        margin-top: uswds.units(4);
+        margin-top: uswds.units(3);
     }
 }