[View Institution Profile] Language updates

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<HTMLInputElement, InputEntryProperties>(
+const InputEntry = forwardRef<
+  HTMLInputElement,
+  DisplayFieldProperties & InputEntryProperties
+>(
   (
     {
       className = '',
@@ -40,6 +44,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
       isOptional = false,
       type = 'text',
       helperText,
+      fallbackValue,
       ...properties
     },
     reference,
@@ -78,7 +83,13 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
               />
             </>
           )}
-          {hideInput ? <DisplayField label={label} value={children} /> : null}
+          {hideInput ? (
+            <DisplayField
+              label={label}
+              value={children}
+              fallbackValue={fallbackValue}
+            />
+          ) : null}
           {handleError ? (
             <div>
               <InputErrorMessage>{errorMessage}</InputErrorMessage>

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({
         />
         <DisplayField
           label={InstitutionDataLabels.lei}
-          value={data.parent_lei}
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          value={data.parent_lei || NOT_APPLICABLE}
         />
         <DisplayField
           label={InstitutionDataLabels.rssd}
@@ -58,7 +59,8 @@ export function AffiliateInformation({
         />
         <DisplayField
           label={InstitutionDataLabels.lei}
-          value={data.top_holder_lei}
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          value={data.top_holder_lei || NOT_APPLICABLE}
         />
         <DisplayField
           label={InstitutionDataLabels.rssd}

src/pages/Filing/ViewInstitutionProfile/DisplayField.tsx

@@ -4,6 +4,8 @@ import type { ReactNode } from 'react';
 import './DisplayField.less';
 
 export const NOT_AVAILABLE = 'Not available';
+export const NOT_APPLICABLE = 'Not applicable';
+export const FALLBACK_BLANK = '';
 
 export interface DisplayFieldProperties {
   label?: ReactNode;
@@ -32,7 +34,7 @@ export function DisplayField({
 
 DisplayField.defaultProps = {
   className: undefined,
-  fallbackValue: NOT_AVAILABLE,
+  fallbackValue: NOT_APPLICABLE,
   label: undefined,
   value: undefined,
 };

src/pages/Filing/ViewInstitutionProfile/FinancialInstitutionDetails.tsx

@@ -78,7 +78,7 @@ export function FinancialInstitutionDetails({
           label={InstitutionDataLabels.leiStatus}
           value={
             <span className='capitalize'>
-              {data.is_active ? 'Active' : 'Inactive'}
+              {data.is_active ? 'Issued' : 'Lapsed'}
             </span>
           }
         />

src/pages/Filing/ViewInstitutionProfile/IdentifyingInformation.tsx

@@ -5,9 +5,9 @@ import SectionIntro from 'components/SectionIntro';
 import { WellContainer } from 'design-system-react';
 import type { ReactNode } from 'react';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
-import { formatFederalRegulator, valueOrNotavailable } from 'utils/formatting';
+import { formatFederalRegulator } from 'utils/formatting';
 import InstitutionDataLabels from '../formHelpers';
-import { DisplayField } from './DisplayField';
+import { DisplayField, FALLBACK_BLANK } from './DisplayField';
 
 const defaultDescription = (
   <>
@@ -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,19 @@ export function IdentifyingInformation({
     },
   );
 
-  const institutionTypeNamesString = valueOrNotavailable(
-    institutionTypeNamesArray.join(', '),
-  );
+  const institutionTypeNamesString =
+    institutionTypeNamesArray?.join(', ') || FALLBACK_BLANK;
 
   return (
     <FormSectionWrapper>
       <SectionIntro heading={heading}>{description}</SectionIntro>
 
       <WellContainer className='u-mt30'>
-        <DisplayField label={InstitutionDataLabels.tin} value={data.tax_id} />
+        <DisplayField
+          label={InstitutionDataLabels.tin}
+          value={data.tax_id}
+          fallbackValue={FALLBACK_BLANK}
+        />
         <DisplayField label={InstitutionDataLabels.rssd} value={data.rssd_id} />
         <DisplayField
           label={InstitutionDataLabels.regName}
@@ -70,6 +73,7 @@ export function IdentifyingInformation({
         <DisplayField
           label={InstitutionDataLabels.fiType}
           value={institutionTypeNamesString}
+          fallbackValue={FALLBACK_BLANK}
         />
       </WellContainer>
     </FormSectionWrapper>

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/useHeaderAuthLinks.tsx

@@ -38,7 +38,7 @@ export const useHeaderAuthLinks = (): ReactElement[] => {
             'User profile'}
         </span>
       </NavLink>,
-      <Button label='LOG OUT' asLink onClick={onLogout} />,
+      <Button key='logout' label='LOG OUT' asLink onClick={onLogout} />,
     );
   }