[Point of Contact] Phone Extension - Limit to 9 digits, 0-9 in string (…

…#1001)

closes #997

## Changes

- style(Point of Contact): Phone Extension always gets its own line
- content(Point of Contact): Change the helper and error text to match
the figma
- feat(Point of Contact): Phone Extension validation


## How to test this PR

1. Navigate to Point of Contact
2. Enter valid phone extension - ex. 00757
3. Enter invalid phone extension - ex ukhi778ih89h98h9h9h89h

## Screenshots
<img width="534" alt="Screenshot 2024-10-15 at 3 08 40 PM"
src="https://github.com/user-attachments/assets/7ed7bae8-9bc0-489f-9e63-a7748e8b9582">

---------

Co-authored-by: Tanner Ricks <182143365+tanner-ricks@users.noreply.github.com>

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',

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<HTMLInputElement>,
+  // ): 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
             />
-            <div className='flex flex-col items-stretch bpMED:flex-row bpMED:gap-[0.9375rem]'>
-              <InputEntry
-                className='w-full bpMED:flex-[2]'
-                label='Phone number'
-                id='phone'
-                {...register('phone')}
-                helperText='Phone number must be in 555-555-5555 format.'
-                errorMessage={formErrors.phone?.message}
-                showError
-              />
-              <InputEntry
-                className='w-full bpMED:flex-[1]'
-                label='Extension'
-                id='phoneExtension'
-                helperText='Extension should be a number.'
-                {...register('phoneExtension')}
-                maxLength={inputCharLimit}
-                isOptional
-              />
-            </div>
+            {/* Note: Phone and Phone Extension styling saved till a final decision */}
+            {/* <div className='flex flex-col items-stretch bpMED:flex-row bpMED:gap-[0.9375rem]'> */}
+            <InputEntry
+              className='w-full bpMED:flex-[2]'
+              label='Phone number'
+              id='phone'
+              {...register('phone')}
+              helperText='Phone number must be in 555-555-5555 format.'
+              errorMessage={formErrors.phone?.message}
+              showError
+            />
+            <InputEntry
+              className='w-full bpMED:flex-[1]'
+              label='Phone extension'
+              id='phoneExtension'
+              helperText='Phone extension must not exceed 9 digits.'
+              {...register('phoneExtension', {
+                // onChange: handlePhoneExtensionInput,
+              })}
+              maxLength={inputCharLimit}
+              isOptional
+              errorMessage={formErrors.phoneExtension?.message}
+              showError
+            />
+            {/* </div> */}
 
             <InputEntry
               label='Email address'

src/types/formTypes.ts

@@ -4,7 +4,12 @@ import {
   IdZodSchemaErrors,
   PocZodSchemaErrors,
 } from 'components/FormErrorHeader.data';
-import { Five, One, inputCharLimit } from 'utils/constants';
+import {
+  Five,
+  One,
+  inputCharLimit,
+  phoneExtensionNumberLimit,
+} from 'utils/constants';
 import { z } from 'zod';
 
 // Used in react-select format (potentially can be removed)
@@ -338,8 +343,11 @@ export const pointOfContactSchema = z.object({
     }),
   phoneExtension: z
     .string()
-    .max(inputCharLimit, {
-      message: "The phone number extension's maximum character limit is 255",
+    .max(phoneExtensionNumberLimit, {
+      message: PocZodSchemaErrors.phoneExtension,
+    })
+    .regex(/^\d+$/, {
+      message: PocZodSchemaErrors.phoneExtension,
     })
     .optional(),
   email: z

src/utils/constants.ts

@@ -12,6 +12,7 @@ export const ITEMS_PER_PAGE = 20;
 export const Thirty = 30;
 export const Hundred = 100;
 export const inputCharLimit = 254;
+export const phoneExtensionNumberLimit = 9;
 export const EightHundred = 800;
 export const Thousand = 1000;
 export const CACHE_TIME = 600_000;

src/utils/processNumbersOnlyString.ts

@@ -0,0 +1,9 @@
+/* 
+  Ensure only 0-9; strips non-digits
+*/
+export function processNumbersOnlyString(input: string): string {
+  if (input == null || Number.isNaN(input)) return '';
+  return input.replaceAll(/\D/g, '');
+}
+
+export default processNumbersOnlyString;