From a697d31d284c73f86d4de24bcbd90c68bc0ede69 Mon Sep 17 00:00:00 2001 From: Meis Date: Tue, 5 Nov 2024 12:18:36 -0700 Subject: [PATCH] [View Institution Profile] Language updates (#1024) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #1013 ## Completed Changes - Updated the fallback values for most fields to "Not applicable" - Ensured `Type of Financial Institution`, `Federal Taxpayer Identification Number (TIN)` show as "Not provided" when missing - Updated language for `LEI Status` from "Active/Inactive" to "Issued/Lapsed" - Display alert for `Type of Financial Institution`, `Federal Taxpayer Identification Number (TIN)`, or `LEI Status` when missing/lapsed. ## How to test this PR ### Language updates ``` const testBlankValues = { lei: 'FI_LEI', name: 'FI_INSTITUTION_NAME', hq_address_street_1: 'HQ_ADDRESS_STREET_1', hq_address_city: 'HQ_ADDRESS_CITY', hq_address_state: 'HQ_ADDRESS_STATE', hq_address_state_code: 'HQ_ADDRESS_STATE_CODE', hq_address_zip: 'HQ_ADDRESS_ZIP', }; ``` 1. [ViewInstitutionProfile > index.tsx] Replace the `data` param highlighted in the screenshot below with the following. Screenshot 2024-10-22 at 2 03 45 PM 2. Visit the Institution profile page - ex. http://localhost:8899/institution/123456789TESTBANK123 3. Confirm fields display the correct fallback value (blank or "Not applicable"). ## Screenshots ### Language updates - Fields marked as `Always populated` in the reference table are populated with their fieldname (i.e FI_INSTITUTION_NAME) - Field that were previously "blank" are displayed as "Not populated" (TIN, Types of Financial Institution). - Others are populated with the appropriate fallback value.
![screencapture-localhost-8899-institution-123456789TESTBANK123-2024-11-01-10_20_28](https://github.com/user-attachments/assets/2f979f9d-ebef-46b5-a5d7-0cee72e60cec) --- src/components/CommonLinks.tsx | 10 ++-- src/components/InputEntry.tsx | 19 +++++-- .../AffiliateInformation.tsx | 8 +-- .../ViewInstitutionProfile/DisplayField.tsx | 54 +++++++++++++++++-- .../FinancialInstitutionDetails.tsx | 8 +-- .../IdentifyingInformation.tsx | 17 +++--- src/utils/formatting.tsx | 7 ++- src/utils/useHeaderAuthLinks.tsx | 2 +- 8 files changed, 96 insertions(+), 29 deletions(-) diff --git a/src/components/CommonLinks.tsx b/src/components/CommonLinks.tsx index 2da63c544..a51c89652 100644 --- a/src/components/CommonLinks.tsx +++ b/src/components/CommonLinks.tsx @@ -1,10 +1,14 @@ import { Link } from 'components/Link'; import { Button } from 'design-system-react'; -import type { ReactElement } from 'react'; +import type { ComponentProps, ReactElement } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; -function GLIEF(): ReactElement { - return GLEIF; +function GLIEF(arguments_: ComponentProps): ReactElement { + return ( + + GLEIF + + ); } function GetAnLEI(): ReactElement { diff --git a/src/components/InputEntry.tsx b/src/components/InputEntry.tsx index 01946a385..6d87df2ac 100644 --- a/src/components/InputEntry.tsx +++ b/src/components/InputEntry.tsx @@ -5,10 +5,11 @@ import { Element } from 'react-scroll'; import InputErrorMessage from 'components/InputErrorMessage'; import LabelOptional from 'components/LabelOptional'; -import { Heading } from 'design-system-react'; import { TextInput } from 'components/TextInput'; -import { DisplayField } from 'pages/Filing/ViewInstitutionProfile/DisplayField'; +import { Heading } from 'design-system-react'; import type { InputType } from 'design-system-react/dist/components/TextInput/TextInput'; +import type { DisplayFieldProperties } from 'pages/Filing/ViewInstitutionProfile/DisplayField'; +import { DisplayField } from 'pages/Filing/ViewInstitutionProfile/DisplayField'; interface InputEntryProperties extends ComponentPropsWithoutRef<'input'> { id: string; @@ -24,7 +25,10 @@ interface InputEntryProperties extends ComponentPropsWithoutRef<'input'> { helperText?: string; } -const InputEntry = forwardRef( +const InputEntry = forwardRef< + HTMLInputElement, + DisplayFieldProperties & InputEntryProperties +>( ( { className = '', @@ -40,6 +44,7 @@ const InputEntry = forwardRef( isOptional = false, type = 'text', helperText, + fallbackValue, ...properties }, reference, @@ -78,7 +83,13 @@ const InputEntry = forwardRef( /> )} - {hideInput ? : null} + {hideInput ? ( + + ) : null} {handleError ? (
{errorMessage} diff --git a/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx b/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx index 37cded1ae..5d60517dd 100644 --- a/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx +++ b/src/pages/Filing/ViewInstitutionProfile/AffiliateInformation.tsx @@ -7,7 +7,7 @@ import type { ReactNode } from 'react'; import type { InstitutionDetailsApiType } from 'types/formTypes'; import InstitutionDataLabels from '../formHelpers'; import './AffiliateInformation.less'; -import { DisplayField } from './DisplayField'; +import { DisplayField, NOT_APPLICABLE } from './DisplayField'; const defaultDescription = ( <> @@ -41,7 +41,8 @@ export function AffiliateInformation({ /> + update your financial institution profile + + ); +} + +const NotProvidedAlertMessage = { + [InstitutionDataLabels.leiStatus]: ( +

+ Your financial institution must have an active LEI to file. Visit{' '} + for instructions on how to + reactivate your LEI or{' '} + for + assistance. +

+ ), + [InstitutionDataLabels.tin]: ( +

+ You must provide your TIN to file. Visit {' '} + for instructions on how to update this information. +

+ ), + [InstitutionDataLabels.fiType]: ( +

+ You must provide your type of financial institution to file. Visit{' '} + to provide this information. +

+ ), +}; export interface DisplayFieldProperties { label?: ReactNode; @@ -18,6 +58,9 @@ export function DisplayField({ className, fallbackValue, }: DisplayFieldProperties): JSX.Element { + const resultingValue = value ?? fallbackValue; + const showAlert = [LAPSED, NOT_PROVIDED].includes(resultingValue as string); + return (
{label ? ( @@ -25,14 +68,19 @@ export function DisplayField({ {label} ) : undefined} -

{value ?? fallbackValue}

+

{resultingValue}

+
); } DisplayField.defaultProps = { className: undefined, - fallbackValue: NOT_AVAILABLE, + fallbackValue: NOT_APPLICABLE, label: undefined, value: undefined, }; diff --git a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx index c7312eb24..f22885fbc 100644 --- a/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx +++ b/src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx @@ -12,7 +12,7 @@ import { valueOrNotavailable } from 'utils/formatting'; import { FormSectionWrapper } from '../../../components/FormSectionWrapper'; import InstitutionDataLabels from '../formHelpers'; import AddressStreetOptional from './AddressStreetOptional'; -import { DisplayField, NOT_AVAILABLE } from './DisplayField'; +import { DisplayField, LAPSED, NOT_AVAILABLE } from './DisplayField'; export const formatDomains = (domains?: Domain[]): string => { if (!domains || domains.length === 0) return NOT_AVAILABLE; @@ -76,11 +76,7 @@ export function FinancialInstitutionDetails({ - {data.is_active ? 'Active' : 'Inactive'} - - } + value={data.is_active ? 'Issued' : LAPSED} /> {isDomainsVisible ? ( @@ -29,7 +29,7 @@ export function IdentifyingInformation({ }): JSX.Element { // TODO: Asking Le about 'Other' institution type/detail in mock data and the ending period // https://github.com/cfpb/sbl-frontend/issues/137 - const institutionTypeNamesArray = data.sbl_institution_types.map( + const institutionTypeNamesArray = data.sbl_institution_types?.map( institutionType => { let name = ''; if (typeof institutionType === 'string') name = institutionType; @@ -45,16 +45,18 @@ export function IdentifyingInformation({ }, ); - const institutionTypeNamesString = valueOrNotavailable( - institutionTypeNamesArray.join(', '), - ); + const institutionTypeNamesString = institutionTypeNamesArray?.join(', '); return ( {description} - + diff --git a/src/utils/formatting.tsx b/src/utils/formatting.tsx index 85a75527b..503b3d23b 100644 --- a/src/utils/formatting.tsx +++ b/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; diff --git a/src/utils/useHeaderAuthLinks.tsx b/src/utils/useHeaderAuthLinks.tsx index 4da0b4755..32e6f2697 100644 --- a/src/utils/useHeaderAuthLinks.tsx +++ b/src/utils/useHeaderAuthLinks.tsx @@ -38,7 +38,7 @@ export const useHeaderAuthLinks = (): ReactElement[] => { 'User profile'} , -