[DEMO] RSSD ID, Phone Extension changes

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/Filing/UpdateFinancialProfile/UfpForm.tsx

@@ -45,6 +45,7 @@ export default function UFPForm({
     register,
     reset,
     setValue,
+    getValues,
     formState: { errors: formErrors, dirtyFields },
     watch,
   } = useForm<UpdateInstitutionType>({

src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx

@@ -12,14 +12,16 @@ import type {
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { formatFederalRegulator } from 'utils/formatting';
 import { FormSectionWrapper } from '../../../components/FormSectionWrapper';
-import { DisplayField } from '../ViewInstitutionProfile/DisplayField';
+import {
+  DisplayField,
+  NOT_APPLICABLE,
+} from '../ViewInstitutionProfile/DisplayField';
 import InstitutionDataLabels, { InstitutionHelperText } from '../formHelpers';
 import TypesFinancialInstitutionSection from './TypesFinancialInstitutionSection';
-import { processRssdId } from './processRssdId';
 import type { UpdateInstitutionType } from './types';
 
 const taxID = 'tax_id';
-const rssdID = 'rssd_id';
+// const rssdID = 'rssd_id';
 
 function FieldFederalPrudentialRegulator({
   data,
@@ -33,6 +35,7 @@ function FieldFederalPrudentialRegulator({
       <DisplayField
         label='Federal prudential regulator'
         value={formatFederalRegulator(data)}
+        fallbackValue={NOT_APPLICABLE}
       />
       <input
         hidden
@@ -64,18 +67,20 @@ function UpdateIdentifyingInformation({
   watch: UseFormWatch<UpdateInstitutionType>;
 }): JSXElement {
   // setValueAs leaves displayed value out of sync with saved value
-  const rssdIdValue = watch(rssdID);
+  // const rssdIdValue = watch(rssdID);
 
   return (
     <FormSectionWrapper>
       <SectionIntro heading='Update your financial institution identifying information'>
-        If your financial institution has a Research, Statistics, Supervision,
-        Discount Identification (RSSD ID) number, provide it here and we will
-        pull your Federal Taxpayer Identification Number (TIN) and Federal
-        prudential regulator from NIC. If not, provide your TIN.
+        If your financial institution does not have an RSSD ID, provide your TIN
+        below. If your financial institution has an RSSD ID number and “Not
+        applicable” is shown below, contact your primary federal regulator,
+        state regulator, or reserve bank to link your LEI to your RSSD ID in
+        NIC. Once updated in NIC, we will populate the data in our system
+        accordingly.
       </SectionIntro>
       <WellContainer className='u-mt30'>
-        <InputEntry
+        {/* <InputEntry
           id={rssdID}
           label={InstitutionDataLabels.rssd}
           helperText={InstitutionHelperText.rssd}
@@ -85,7 +90,8 @@ function UpdateIdentifyingInformation({
           value={rssdIdValue}
           errorMessage={formErrors[rssdID]?.message}
           showError
-        />
+        /> */}
+
         <InputEntry
           id={taxID}
           label={InstitutionDataLabels.tin}
@@ -94,12 +100,17 @@ function UpdateIdentifyingInformation({
           errorMessage={formErrors[taxID]?.message}
           showError
         />
+        <DisplayField
+          label={InstitutionDataLabels.rssd}
+          value={data.rssd_id}
+          fallbackValue='Not Applicable'
+        />
         <FieldFederalPrudentialRegulator {...{ register, data }} />
       </WellContainer>
       <SectionIntro className='mb-[1.875rem] mt-[2.8125rem]'>
         Select all applicable types of financial institutions from the list
         below. If the enumerated types do not appropriately describe your
-        institution, or if you wish to add additional types, select
+        financial institution, or if you wish to add additional types, select
         &quot;Other&quot; and add your entry to the text field. Separate
         multiple entries with a comma.
       </SectionIntro>

src/pages/Filing/ViewInstitutionProfile/DisplayField.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import './DisplayField.less';
 
 export const NOT_AVAILABLE = 'Not available';
+export const NOT_APPLICABLE = 'Not applicable';
 
 export interface DisplayFieldProperties {
   label?: ReactNode;

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)
@@ -51,6 +56,7 @@ export const institutionDetailsApiTypeSchema = z.object({
       }),
       z.string().regex(/^\d+$|^$/, { message: IdZodSchemaErrors.rssd_idRegex }),
     ])
+    .nullable()
     .optional(),
   primary_federal_regulator: z.object({
     id: z.string().nullable(),
@@ -338,8 +344,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/formatting.tsx

@@ -1,4 +1,7 @@
-import { NOT_AVAILABLE } from 'pages/Filing/ViewInstitutionProfile/DisplayField';
+import {
+  NOT_APPLICABLE,
+  NOT_AVAILABLE,
+} from 'pages/Filing/ViewInstitutionProfile/DisplayField';
 import type { DomainType, InstitutionDetailsApiType } from 'types/formTypes';
 
 export const buildEmailDomainString = (
@@ -19,4 +22,4 @@ export const formatFederalRegulator = (
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   data.primary_federal_regulator
     ? `${data.primary_federal_regulator.name} (${data.primary_federal_regulator.id})`
-    : NOT_AVAILABLE;
+    : NOT_APPLICABLE;

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;