diff --git a/src/components/FormErrorHeader.tsx b/src/components/FormErrorHeader.tsx index bf41c1af0..449eb1069 100644 --- a/src/components/FormErrorHeader.tsx +++ b/src/components/FormErrorHeader.tsx @@ -2,6 +2,7 @@ import { Alert, List, ListItem } from 'design-system-react'; import type { PropsWithChildren } from 'react'; import type { FieldErrors, FieldValues } from 'react-hook-form'; import { Element, Link } from 'react-scroll'; +import { One } from 'utils/constants'; import getAllProperties from 'utils/getAllProperties'; import type { FormErrorKeyType } from 'utils/getFormErrorKeyLogic'; @@ -15,6 +16,7 @@ interface FormErrorHeaderProperties< errors?: FieldErrors; alertHeading?: string; formErrorHeaderObject: T; + showKeyIndexNumber?: boolean; } /** @@ -30,6 +32,7 @@ function FormErrorHeader< id, keyLogicFunc, formErrorHeaderObject, + showKeyIndexNumber, }: PropsWithChildren>): JSX.Element | null { if (!errors || Object.keys(errors).length === 0) return null; @@ -100,7 +103,9 @@ function FormErrorHeader< : 'Missing entry' }${ // eslint-disable-next-line @typescript-eslint/no-magic-numbers - typeof keyIndex === 'number' ? ` (${keyIndex + 1})` : '' + showKeyIndexNumber && typeof keyIndex === 'number' + ? ` (${keyIndex + One})` + : '' }`} @@ -116,6 +121,7 @@ function FormErrorHeader< FormErrorHeader.defaultProps = { alertHeading: 'There was a problem completing your user profile', errors: null, + showKeyIndexNumber: false, }; export default FormErrorHeader; diff --git a/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx b/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx index 03e07f733..ce12aeaad 100644 --- a/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx +++ b/src/pages/ProfileForm/CreateProfileForm/AddFinancialInstitution.tsx @@ -9,15 +9,17 @@ interface AddFinancialInstitutionProperties { index: number; register: UseFormRegister; formErrors: FieldErrors; + isLast?: boolean; } function AddFinancialInstitution({ index, register, formErrors, + isLast, }: AddFinancialInstitutionProperties): JSX.Element { return ( -
+
@@ -123,11 +127,12 @@ function CreateProfileForm(): JSX.Element { Provide the name and LEI of the financial institution for which you are authorized to file. If you are authorized to file for an - additional financial institution, click “Add a financial - institution.” + additional financial institution,{' '} + email our support staff. {fields.map((field, index) => { const onRemoveThisInstitution = (): void => remove(index); + const isLast = fields.length - One === index; return (
{index !== 0 && ( @@ -141,15 +146,18 @@ function CreateProfileForm(): JSX.Element { index={index} register={register} formErrors={formErrors} + isLast={isLast} />
); })} -
+ {/* TODO: Re-enable button post-mvp */} + {/* https://github.com/cfpb/sbl-frontend/issues/596 */} + {/*
- Add a financial institution + Add an additional financial institution -
+
*/}