diff --git a/src/components/FormErrorHeader.data.ts b/src/components/FormErrorHeader.data.ts index f86a9ce4b..02f31e5d1 100644 --- a/src/components/FormErrorHeader.data.ts +++ b/src/components/FormErrorHeader.data.ts @@ -200,6 +200,7 @@ export const PocZodSchemaErrors = { phoneMin: 'You must enter the phone number of the point of contact for your filing.', phoneRegex: 'You must enter a valid phone number.', + phoneExtension: 'You must enter a valid phone extension.', emailMin: 'You must enter the email address of the point of contact for your filing.', emailRegex: 'You must enter a valid email address.', @@ -233,6 +234,7 @@ export const PocFormHeaderErrors: PocFormHeaderErrorsType = { [PocZodSchemaErrors.phoneMin]: 'Enter the phone number of the point of contact', [PocZodSchemaErrors.phoneRegex]: 'Enter a valid phone number', + [PocZodSchemaErrors.phoneExtension]: 'Enter a valid phone extension', [PocZodSchemaErrors.emailMin]: 'Enter the email address of the point of contact', [PocZodSchemaErrors.emailRegex]: 'Enter a valid email address', diff --git a/src/pages/PointOfContact/index.tsx b/src/pages/PointOfContact/index.tsx index 860cece12..540f4e98d 100644 --- a/src/pages/PointOfContact/index.tsx +++ b/src/pages/PointOfContact/index.tsx @@ -37,6 +37,7 @@ import { formatPointOfContactObject, scrollToElement, } from 'pages/ProfileForm/ProfileFormUtils'; +import type React from 'react'; import { useEffect, useState } from 'react'; import { useForm } from 'react-hook-form'; import { useNavigate, useParams } from 'react-router-dom'; @@ -171,6 +172,13 @@ function FilingDetails(): JSX.Element { const navigateSignSubmit = (): void => navigate(`/filing/${year}/${lei}/submit`); + // Note: Design Choice to be made: ignore non-number input or just rely on error handling + // const handlePhoneExtensionInput = ( + // event: React.ChangeEvent, + // ): void => { + // setValue('phoneExtension', processNumbersOnlyString(event.target.value)); + // }; + const { mutateAsync: mutateSubmitPointOfContact } = useSubmitPointOfContact({ // @ts-expect-error Part of code cleanup for post-mvp see: https://github.com/cfpb/sbl-frontend/issues/717 lei, @@ -307,26 +315,31 @@ function FilingDetails(): JSX.Element { errorMessage={formErrors.lastName?.message} showError /> -
- - -
+ {/* Note: Phone and Phone Extension styling saved till a final decision */} + {/*
*/} + + + {/*
*/}