diff --git a/src/components/FormErrorHeader.data.ts b/src/components/FormErrorHeader.data.ts index 9cea9a43e..1419ab10e 100644 --- a/src/components/FormErrorHeader.data.ts +++ b/src/components/FormErrorHeader.data.ts @@ -181,6 +181,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.', @@ -214,6 +215,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 dc51a995a..5a589701d 100644 --- a/src/pages/PointOfContact/index.tsx +++ b/src/pages/PointOfContact/index.tsx @@ -31,6 +31,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'; @@ -155,6 +156,13 @@ function PointOfContact(): 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, @@ -276,26 +284,31 @@ function PointOfContact(): JSX.Element { errorMessage={formErrors.lastName?.message} showError /> -
- - -
+ {/* Note: Phone and Phone Extension styling saved till a final decision */} + {/*
*/} + + + {/*
*/}