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