[Point of Contact] Phone extension field

e2e/example.spec.demo.ts

@@ -100,6 +100,9 @@ test('proof of concept', async ({ page }) => {
       await page
         .getByLabel('Work phone numberPhone number')
         .fill(pointOfContactJson.phone_number);
+      await page
+        .getByLabel('Extension (optional)Extension')
+        .fill(pointOfContactJson.phone_ext);
       await page
         .getByLabel('Email addressEmail address')
         .fill(pointOfContactJson.email);

e2e/fixtures/testFixture.ts

@@ -258,6 +258,7 @@ export const test = baseTest.extend<{
       await page.getByRole('button', { name: 'Continue to next step' }).click();
       await expect(page.locator('h1')).toContainText(
         'Provide point of contact',
+        { timeout: 30_000 },
       );
     });
     await use(page);
@@ -275,6 +276,9 @@ export const test = baseTest.extend<{
         await page
           .getByLabel('Work phone numberPhone number')
           .fill(pointOfContactJson.phone_number);
+        await page
+          .getByLabel('Extension (optional)Extension')
+          .fill(pointOfContactJson.phone_ext);
         await page
           .getByLabel('Email addressEmail address')
           .fill(pointOfContactJson.email);

e2e/test-data/point-of-contact/point-of-contact-data-1.json

@@ -9,5 +9,6 @@
   "hq_address_state": "CA",
   "hq_address_zip": "55555",
   "phone_number": "555-555-5555",
+  "phone_ext": "8942",
   "email": "[email protected]"
 }

src/components/LabelOptional.tsx

@@ -1,6 +1,6 @@
 function LabelOptional(): JSX.Element {
   return (
-    <span className='text-base font-normal text-grayDark'> (optional)</span>
+    <span className='text-[1rem] font-normal text-grayDark'> (optional)</span>
   );
 }
 

src/pages/Filing/FilingApp/FilingSubmit.helpers.tsx

@@ -53,6 +53,7 @@ export function PointOfContactConfirm({
         <DisplayField label='Last name' value={poc?.last_name} />
         <DisplayField label='Email address' value={poc?.email} />
         <DisplayField label='Work phone number' value={poc?.phone_number} />
+        <DisplayField label='Extension' value={poc?.phone_ext} />
         <DisplayField
           label='Business address'
           value={

src/pages/Filing/ViewInstitutionProfile/DisplayField.tsx

@@ -21,11 +21,11 @@ export function DisplayField({
   return (
     <div className={classNames('display-field', className)}>
       {label ? (
-        <Heading className='h4' type='3'>
+        <Heading className='h4 break-all' type='3'>
           {label}
         </Heading>
       ) : undefined}
-      <p className='u-mt10'>{value ?? fallbackValue}</p>
+      <p className='u-mt10 break-all'>{value ?? fallbackValue}</p>
     </div>
   );
 }

src/pages/PointOfContact/index.tsx

@@ -13,6 +13,8 @@ import {
 } from 'design-system-react';
 import { normalKeyLogic } from 'utils/getFormErrorKeyLogic';
 
+import useWidthMatch from 'utils/useWidthMatch';
+
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import WrapperPageContent from 'WrapperPageContent';
@@ -41,6 +43,7 @@ import type {
   PointOfContactSchema,
 } from 'types/formTypes';
 import { ContactInfoMap, pointOfContactSchema } from 'types/formTypes';
+import { inputCharLimit } from 'utils/constants';
 import useAddressStates from 'utils/useAddressStates';
 import useFilingStatus from 'utils/useFilingStatus';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
@@ -199,6 +202,9 @@ function PointOfContact(): JSX.Element {
     }
   };
 
+  // Determine if width is above the mobile breakpoint
+  const isLargeWidth = useWidthMatch('(min-width: 901px)');
+
   // TODO: Redirect the user if the filing period or lei are not valid
 
   if (isLoading) return <LoadingContent />;
@@ -263,26 +269,39 @@ function PointOfContact(): JSX.Element {
               label='First name'
               id='firstName'
               {...register('firstName')}
-              maxLength={255}
+              maxLength={inputCharLimit}
               errorMessage={formErrors.firstName?.message}
               showError
             />
             <InputEntry
               label='Last name'
               id='lastName'
               {...register('lastName')}
-              maxLength={255}
+              maxLength={inputCharLimit}
               errorMessage={formErrors.lastName?.message}
               showError
             />
-            <InputEntry
-              label='Work phone number'
-              id='phone'
-              {...register('phone')}
-              helperText='Phone number must be in 555-555-5555 format.'
-              errorMessage={formErrors.phone?.message}
-              showError
-            />
+            <div className='flex flex-col items-stretch bpMED:flex-row bpMED:gap-[0.9375rem]'>
+              <InputEntry
+                className='w-full bpMED:flex-[5]'
+                label='Work 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-[3]'
+                label='Extension'
+                id='phoneExtension'
+                helperText='Extension should be a number.'
+                {...register('phoneExtension')}
+                maxLength={inputCharLimit}
+                isOptional
+              />
+            </div>
+
             <InputEntry
               label='Email address'
               id='email'

src/pages/ProfileForm/ProfileFormUtils.ts

@@ -36,6 +36,7 @@ export const formatPointOfContactObject = (
     first_name: userProfileObject.firstName,
     last_name: userProfileObject.lastName,
     phone_number: userProfileObject.phone,
+    phone_ext: userProfileObject.phoneExtension,
     email: userProfileObject.email,
     hq_address_street_1: userProfileObject.hq_address_street_1,
     hq_address_street_2: userProfileObject.hq_address_street_2,

src/pages/ProfileForm/Step1Form/Step1FormInfoFieldGroup.tsx

@@ -4,6 +4,7 @@ import InputEntry from 'components/InputEntry';
 import { Link } from 'components/Link';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import type { BasicInfoSchema, ValidationSchema } from 'types/formTypes';
+import { inputCharLimit } from 'utils/constants';
 
 // TODO: Refactor to take a generic and pass these TS schemas in
 type FormSchema = BasicInfoSchema | ValidationSchema;
@@ -31,15 +32,15 @@ function Step1FormInfoFieldGroup({
             label='First name'
             id='firstName'
             {...register('firstName')}
-            maxLength={255}
+            maxLength={inputCharLimit}
             errorMessage={formErrors.firstName?.message}
             showError
           />
           <InputEntry
             label='Last name'
             id='lastName'
             {...register('lastName')}
-            maxLength={255}
+            maxLength={inputCharLimit}
             errorMessage={formErrors.lastName?.message}
             showError
           />

src/types/filingTypes.ts

@@ -79,6 +79,7 @@ export const FilingSchema = z.object({
       hq_address_zip: z.string(),
       email: z.string(),
       phone_number: z.string(),
+      phone_ext: z.string(),
     }),
     z.null(),
   ]),

src/types/formTypes.ts

@@ -336,6 +336,12 @@ export const pointOfContactSchema = z.object({
     .regex(usPhoneNumberRegex, {
       message: PocZodSchemaErrors.phoneRegex,
     }),
+  phoneExtension: z
+    .string()
+    .max(inputCharLimit, {
+      message: "The phone number extension's maximum character limit is 255",
+    })
+    .optional(),
   email: z
     .string()
     .trim()
@@ -374,6 +380,7 @@ export const ContactInfoMap = {
   first_name: 'firstName',
   last_name: 'lastName',
   phone_number: 'phone',
+  phone_ext: 'phoneExtension',
   email: 'email',
   hq_address_street_1: 'hq_address_street_1',
   hq_address_street_2: 'hq_address_street_2',
@@ -390,9 +397,10 @@ export type ContactInfoValues = (typeof ContactInfoMap)[ContactInfoKeys];
 
 export type FormattedPointOfContactSchema = Omit<
   PointOfContactSchema,
-  'firstName' | 'lastName' | 'phone'
+  'firstName' | 'lastName' | 'phone' | 'phoneExtension'
 > & {
   first_name: string;
   last_name: string;
   phone_number: string;
+  phone_ext: string | undefined;
 };

src/utils/constants.ts

@@ -11,7 +11,7 @@ export const Ten = 10;
 export const ITEMS_PER_PAGE = 20;
 export const Thirty = 30;
 export const Hundred = 100;
-export const inputCharLimit = 255;
+export const inputCharLimit = 254;
 export const EightHundred = 800;
 export const Thousand = 1000;
 export const CACHE_TIME = 600_000;

src/utils/useWidthMatch.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+function useWidthMatch(query: string): boolean {
+  const [matches, setMatches] = useState<boolean>(false);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches); // Initial check
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query]);
+
+  return matches;
+}
+
+export default useWidthMatch;

tailwind.config.js

@@ -25,6 +25,15 @@ const config = {
       fontFamily: {
         inter: ['Inter', ...defaultConfig.theme.fontFamily.sans],
       },
+      // See `vars-breakpoints.js` of the `design-system` repo
+      screens: {
+        bpXS: '0px',
+        bpSM: '601px',
+        bpMED: '901px',
+        bpLG: '1021px',
+        bpXL: '1201px'
+
+      }
     },
   },
   experimental: { optimizeUniversalDefaults: true },