From 02f114408669aa0c28eaa70a322dd0c13e1729e3 Mon Sep 17 00:00:00 2001
From: Jason Lin <98117700+JasonLin0991@users.noreply.github.com>
Date: Tue, 30 Apr 2024 14:18:19 -0400
Subject: [PATCH] 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.
---
 .../Contacts/ActuaryContactFields.tsx         | 14 +++++++++----
 .../RateDetails/RateDetails.tsx               | 21 +++++++++++++++++++
 .../RateDetails/SingleRateCert.tsx            | 10 +++------
 .../RateDetails/V2/RateDetailsV2.tsx          | 21 +++++++++++++++++++
 .../RateDetails/V2/SingleRateFormFields.tsx   | 10 +++------
 .../StateSubmissionForm.module.scss           |  6 +++---
 6 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/services/app-web/src/pages/StateSubmission/Contacts/ActuaryContactFields.tsx b/services/app-web/src/pages/StateSubmission/Contacts/ActuaryContactFields.tsx
index e8cf6c1ab6..bc6e04698a 100644
--- 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
index 89eff57fdc..235f4ee493 100644
--- 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
index 7f68e9cada..7f7cfb5fba 100644
--- 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
index ab8bbce07a..d3d946f276 100644
--- 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
index bdd19522e6..b913c0e7f7 100644
--- 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
index 0ec0911930..c9582be711 100644
--- 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);
     }
 }