[AB#301335]-local names

src/frontend/src/components/grievances/FlagDetails.tsx

@@ -8,6 +8,7 @@ import {
   TableRow,
   Typography,
 } from '@mui/material';
+import { displayNameWithLocal } from '@utils/utils';
 import styled from 'styled-components';
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
@@ -132,7 +133,7 @@ export const FlagDetails = ({
             </TableCell>
             <TableCell align="left">-</TableCell>
             <TableCell align="left">
-              {details.goldenRecordsIndividual.fullName}
+              {displayNameWithLocal(details.goldenRecordsIndividual, 'fullName')}
             </TableCell>
             <TableCell align="left">
               <UniversalMoment>

src/frontend/src/components/grievances/LookUps/LookUpDelegate/LookUpDelegateDisplay.tsx

@@ -3,6 +3,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import { useTranslation } from 'react-i18next';
 import { BlueText, DarkGrey, LightGrey, StyledBox } from '../LookUpStyles';
+import { displayNameWithLocal } from '@utils/utils';
 import { ReactElement } from 'react';
 
 interface LookUpDelegateDisplayProps {
@@ -32,7 +33,7 @@ export const LookUpDelegateDisplay = ({
             {t('Delegate')}:
             <BlueText data-cy="delegate-individual">
               {values.selectedDelegate?.unicefId ||
-                values.selectedDelegate?.fullName ||
+                displayNameWithLocal(values.selectedDelegate, 'fullName') ||
                 '-'}
             </BlueText>
           </Box>

src/frontend/src/components/grievances/LookUps/LookUpIndividualTable/LookUpIndividualTableRow.tsx

@@ -5,7 +5,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import { Radio } from '@mui/material';
 import TableCell from '@mui/material/TableCell';
 import { IndividualList } from '@restgenerated/models/IndividualList';
-import { sexToCapitalize } from '@utils/utils';
+import { displayNameWithLocal, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useProgramContext } from 'src/programContext';
 
@@ -54,7 +54,7 @@ export function LookUpIndividualTableRow({
           <span>{individual.unicefId || '-'}</span>
         )}
       </TableCell>
-      <TableCell align="left">{individual.fullName}</TableCell>
+      <TableCell align="left">{displayNameWithLocal(individual, 'fullName')}</TableCell>
       {!isSocialDctType && (
         <TableCell align="left">
           {individual.household ? individual.household.unicefId : '-'}

src/frontend/src/components/grievances/NeedsAdjudication/NeedsAdjudicationTable.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent } from 'react';
 import { BlackLink } from '@core/BlackLink';
+import { displayNameWithLocal } from '@utils/utils';
 import { UniversalMoment } from '@core/UniversalMoment';
 import PeopleIcon from '@mui/icons-material/People';
 import PersonIcon from '@mui/icons-material/Person';
@@ -157,7 +158,7 @@ export const NeedsAdjudicationTable = ({
         </TableCell>
       )}
       <TableCell align="left" data-cy="full-name-cell">
-        {possibleDuplicate?.fullName}
+        {displayNameWithLocal(possibleDuplicate, 'fullName')}
       </TableCell>
       <TableCell align="left" data-cy="sex-cell">
         {possibleDuplicate?.sex}

src/frontend/src/components/payments/IndividualDetails.tsx

@@ -3,7 +3,7 @@ import { Overview } from '@components/payments/Overview';
 import { Title } from '@core/Title';
 import { Grid, Typography } from '@mui/material';
 import { LabelizedField } from '@core/LabelizedField';
-import { getPhoneNoLabel } from '@utils/utils';
+import { displayNameWithLocal, getPhoneNoLabel } from '@utils/utils';
 import { useProgramContext } from 'src/programContext';
 import { ReactElement } from 'react';
 
@@ -29,7 +29,7 @@ export const IndividualDetails = ({ individual }): ReactElement => {
         <Grid size={{ xs: 3 }}>
           <LabelizedField
             label={t(`${beneficiaryGroup?.memberLabel.toUpperCase()} ID`)}
-            value={individual.fullName}
+            value={displayNameWithLocal(individual, 'fullName')}
           />
         </Grid>
         <Grid size={{ xs: 3 }}>

src/frontend/src/components/people/PeopleBioData/PeopleBioData.tsx

@@ -6,6 +6,7 @@ import { DisabilityEnum } from '@restgenerated/models/DisabilityEnum';
 import { IndividualDetail } from '@restgenerated/models/IndividualDetail';
 import {
   choicesToDict,
+  displayNameWithLocal,
   formatAge,
   getPhoneNoLabel,
   renderBoolean,
@@ -285,22 +286,22 @@ export const PeopleBioData = ({
       <Grid container spacing={6}>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Full Name')}>
-            {individual?.fullName}
+            {displayNameWithLocal(individual, 'fullName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Given Name')}>
-            {individual?.givenName}
+            {displayNameWithLocal(individual, 'givenName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Middle Name')}>
-            {individual?.middleName}
+            {displayNameWithLocal(individual, 'middleName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Family Name')}>
-            {individual?.familyName}
+            {displayNameWithLocal(individual, 'familyName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>

src/frontend/src/components/population/HouseholdDetails/HouseholdDetails.tsx

@@ -5,7 +5,7 @@ import { Title } from '@core/Title';
 import { Box, Grid, Theme, Typography } from '@mui/material';
 import { GrievanceChoices } from '@restgenerated/models/GrievanceChoices';
 import { HouseholdDetail } from '@restgenerated/models/HouseholdDetail';
-import { formatCurrencyWithSymbol } from '@utils/utils';
+import { displayNameWithLocal, formatCurrencyWithSymbol } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -72,7 +72,7 @@ export function HouseholdDetails({
               <ContentLink
                 href={`/${baseUrl}/population/individuals/${household?.headOfHousehold?.id}`}
               >
-                {household?.headOfHousehold?.fullName}
+                {displayNameWithLocal(household?.headOfHousehold, 'fullName')}
               </ContentLink>
             </LabelizedField>
           </Grid>

src/frontend/src/components/population/IndividualBioData/IndividualBioData.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import {
   choicesToDict,
+  displayNameWithLocal,
   formatAge,
   getPhoneNoLabel,
   renderBoolean,
@@ -203,22 +204,22 @@ export const IndividualBioData = ({
       <Grid container spacing={6}>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Full Name')}>
-            {individual?.fullName}
+            {displayNameWithLocal(individual, 'fullName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Given Name')}>
-            {individual?.givenName}
+            {displayNameWithLocal(individual, 'givenName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Middle Name')}>
-            {individual?.middleName}
+            {displayNameWithLocal(individual, 'middleName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>
           <LabelizedField label={t('Family Name')}>
-            {individual?.familyName}
+            {displayNameWithLocal(individual, 'familyName')}
           </LabelizedField>
         </Grid>
         <Grid size={{ xs: 3 }}>

src/frontend/src/components/rdi/details/individual/RegistrationIndividualBioData/RegistrationIndividualBioData.tsx

@@ -8,6 +8,7 @@ import { IndividualChoices } from '@restgenerated/models/IndividualChoices';
 import { IndividualDetail } from '@restgenerated/models/IndividualDetail';
 import {
   choicesToDict,
+  displayNameWithLocal,
   formatAge,
   getPhoneNoLabel,
   renderBoolean,
@@ -101,22 +102,22 @@ export function RegistrationIndividualBioData({
       <Grid container spacing={6}>
         <Grid size={3}>
           <LabelizedField label={t('Full Name')}>
-            {individual.fullName}
+            {displayNameWithLocal(individual, 'fullName')}
           </LabelizedField>
         </Grid>
         <Grid size={3}>
           <LabelizedField label={t('Given Name')}>
-            {individual.givenName}
+            {displayNameWithLocal(individual, 'givenName')}
           </LabelizedField>
         </Grid>
         <Grid size={3}>
           <LabelizedField label={t('Middle Name')}>
-            {individual.middleName}
+            {displayNameWithLocal(individual, 'middleName')}
           </LabelizedField>
         </Grid>
         <Grid size={3}>
           <LabelizedField label={t('Family Name')}>
-            {individual.familyName}
+            {displayNameWithLocal(individual, 'familyName')}
           </LabelizedField>
         </Grid>
         <Grid size={3}>

src/frontend/src/containers/tables/Communication/RecipientsTable/RecipientsTableRow.tsx

@@ -7,7 +7,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import TableCell from '@mui/material/TableCell';
 import { HeadOfHousehold } from '@restgenerated/models/HeadOfHousehold';
 import { Recipient } from '@restgenerated/models/Recipient';
-import { householdStatusToColor } from '@utils/utils';
+import { displayNameWithLocal, householdStatusToColor } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -45,7 +45,7 @@ export const RecipientsTableRow = ({
           statusToColor={householdStatusToColor}
         />
       </TableCell>
-      <AnonTableCell>{headOfHousehold.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(headOfHousehold, 'fullName')}</AnonTableCell>
       <TableCell align="left">{household.size}</TableCell>
       <TableCell align="left">{household.admin2?.name || '-'}</TableCell>
       <TableCell align="left">{household.residenceStatus}</TableCell>

src/frontend/src/containers/tables/Surveys/RecipientsTable/RecipientsTableRow.tsx

@@ -7,7 +7,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import TableCell from '@mui/material/TableCell';
 import { HeadOfHousehold } from '@restgenerated/models/HeadOfHousehold';
 import { Recipient } from '@restgenerated/models/Recipient';
-import { householdStatusToColor } from '@utils/utils';
+import { displayNameWithLocal, householdStatusToColor } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -46,7 +46,7 @@ export const RecipientsTableRow = ({
           statusToColor={householdStatusToColor}
         />
       </TableCell>
-      <AnonTableCell>{headOfHousehold.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(headOfHousehold, 'fullName')}</AnonTableCell>
       <TableCell align="left">{household.size}</TableCell>
       <TableCell align="left">{household.admin2?.name || '-'}</TableCell>
       <TableCell align="left">{household.residenceStatus}</TableCell>

src/frontend/src/containers/tables/paymentmodule/PaymentsTable/PaymentsTableRow.tsx

@@ -8,6 +8,7 @@ import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
 import TableCell from '@mui/material/TableCell';
 import { PaymentList } from '@restgenerated/models/PaymentList';
 import {
+  displayNameWithLocal,
   formatCurrencyWithSymbol,
   opacityToHex,
   paymentStatusDisplayMap,
@@ -152,10 +153,10 @@ export function PaymentsTableRow({
           <TableCell align="left">
             {canViewDetails ? (
               <BlackLink to={individualDetailsPath}>
-                {payment.peopleIndividual?.fullName}
+                {displayNameWithLocal(payment.peopleIndividual, 'fullName')}
               </BlackLink>
             ) : (
-              payment.peopleIndividual?.fullName
+              displayNameWithLocal(payment.peopleIndividual, 'fullName')
             )}
           </TableCell>
         </>

src/frontend/src/containers/tables/people/PeopleListTable/PeopleListTableRow.tsx

@@ -7,7 +7,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import TableCell from '@mui/material/TableCell';
 import { IndividualList } from '@restgenerated/models/IndividualList';
 import { RelationshipEnum } from '@restgenerated/models/RelationshipEnum';
-import { individualStatusToColor, sexToCapitalize } from '@utils/utils';
+import { displayNameWithLocal, individualStatusToColor, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -44,7 +44,7 @@ export const PeopleListTableRow = ({
       <TableCell align="left">
         <BlackLink to={individualDetailsPath}>{individual.unicefId}</BlackLink>
       </TableCell>
-      <AnonTableCell>{individual.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(individual, 'fullName')}</AnonTableCell>
       <TableCell align="left">
         <StatusBox
           status={individual.status}

src/frontend/src/containers/tables/population/CollectorsTable/CollectorsTable.tsx

@@ -12,7 +12,7 @@ import { IndividualSimple } from '@restgenerated/models/IndividualSimple';
 import { PaginatedHouseholdMemberList } from '@restgenerated/models/PaginatedHouseholdMemberList';
 import { RestService } from '@restgenerated/services/RestService';
 import { useQuery } from '@tanstack/react-query';
-import { adjustHeadCells, choicesToDict } from '@utils/utils';
+import { adjustHeadCells, choicesToDict, displayNameWithLocal } from '@utils/utils';
 import { ReactElement, ReactNode, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useProgramContext } from 'src/programContext';
@@ -179,7 +179,7 @@ export const CollectorsTable = ({
             key={row.id}
           >
             <TableCell align="left">{roleChoicesDict[row.role]}</TableCell>
-            <TableCell align="left">{row.fullName}</TableCell>
+            <TableCell align="left">{displayNameWithLocal(row, 'fullName')}</TableCell>
             <TableCell align="left">{renderRelationship()}</TableCell>
           </ClickableTableRow>
         );

src/frontend/src/containers/tables/population/HouseholdMembersTable/HouseholdMembersTable.tsx

@@ -17,6 +17,7 @@ import { useQuery } from '@tanstack/react-query';
 import {
   adjustHeadCells,
   choicesToDict,
+  displayNameWithLocal,
   populationStatusToColor,
   sexToCapitalize,
 } from '@utils/utils';
@@ -160,7 +161,7 @@ export const HouseholdMembersTable = ({
               )}
             </TableCell>
             <TableCell align="left">
-              {renderTableCellContent(row.fullName)}
+              {renderTableCellContent(displayNameWithLocal(row, 'fullName'))}
             </TableCell>
             <TableCell align="left">
               <StatusBox

src/frontend/src/containers/tables/population/IndividualsListTable/IndividualsListTableRow.tsx

@@ -6,7 +6,7 @@ import { useBaseUrl } from '@hooks/useBaseUrl';
 import TableCell from '@mui/material/TableCell';
 import { IndividualChoices } from '@restgenerated/models/IndividualChoices';
 import { IndividualList } from '@restgenerated/models/IndividualList';
-import { choicesToDict, sexToCapitalize } from '@utils/utils';
+import { choicesToDict, displayNameWithLocal, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -47,7 +47,7 @@ export function IndividualsListTableRow({
       <TableCell align="left">
         <BlackLink to={individualDetailsPath}>{individual.unicefId}</BlackLink>
       </TableCell>
-      <AnonTableCell>{individual.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(individual, 'fullName')}</AnonTableCell>
       <TableCell align="left">
         {individual.household ? individual.household.unicefId : ''}
       </TableCell>

src/frontend/src/containers/tables/rdi/ImportedIndividualsTable/ImportedIndividualsTableRow.tsx

@@ -5,7 +5,7 @@ import { AnonTableCell } from '@components/core/Table/AnonTableCell';
 import { ClickableTableRow } from '@components/core/Table/ClickableTableRow';
 import { UniversalMoment } from '@components/core/UniversalMoment';
 import { useBaseUrl } from '@hooks/useBaseUrl';
-import { sexToCapitalize } from '@utils/utils';
+import { displayNameWithLocal, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { DedupeBiographicalBiometricResults } from '@components/rdi/details/DedupeBiographicalBiometricResults';
 import { IndividualList } from '@restgenerated/models/IndividualList';
@@ -96,7 +96,7 @@ export function ImportedIndividualsTableRow({
       <TableCell align="left">
         <BlackLink to={individualDetailsPath}>{individual.unicefId}</BlackLink>
       </TableCell>
-      <AnonTableCell>{individual.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(individual, 'fullName')}</AnonTableCell>
       <TableCell align="left">{individual.role}</TableCell>
       <TableCell align="left">{individual.relationshipDisplay}</TableCell>
       <TableCell align="left">

src/frontend/src/containers/tables/rdi/ImportedPeopleTable/ImportedPeopleTableRow.tsx

@@ -5,7 +5,7 @@ import { AnonTableCell } from '@components/core/Table/AnonTableCell';
 import { ClickableTableRow } from '@components/core/Table/ClickableTableRow';
 import { UniversalMoment } from '@components/core/UniversalMoment';
 import { useBaseUrl } from '@hooks/useBaseUrl';
-import { choicesToDict, sexToCapitalize } from '@utils/utils';
+import { choicesToDict, displayNameWithLocal, sexToCapitalize } from '@utils/utils';
 import { ReactElement } from 'react';
 import { DedupeBiographicalBiometricResults } from '@components/rdi/details/DedupeBiographicalBiometricResults';
 import { IndividualList } from '@restgenerated/models/IndividualList';
@@ -81,7 +81,7 @@ export function ImportedPeopleTableRow({
       <TableCell align="left">
         <BlackLink to={peopleDetailsPath}>{individual.unicefId}</BlackLink>
       </TableCell>
-      <AnonTableCell>{individual.fullName}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(individual, 'fullName')}</AnonTableCell>
       <TableCell align="left">{roleChoicesDict[individual.role]}</TableCell>
       <TableCell align="left">
         {relationshipChoicesDict[individual.relationship]}

src/frontend/src/containers/tables/targeting/TargetPopulationHouseholdTable/TargetPopulationHouseholdRow.tsx

@@ -5,6 +5,7 @@ import { BlackLink } from '@components/core/BlackLink';
 import { useBaseUrl } from '@hooks/useBaseUrl';
 import { ReactElement } from 'react';
 import { PendingPayment } from '@restgenerated/models/PendingPayment';
+import { displayNameWithLocal } from '@utils/utils';
 
 interface TargetPopulationHouseholdTableRowProps {
   payment: PendingPayment;
@@ -41,7 +42,7 @@ export function TargetPopulationHouseholdTableRow({
           payment.householdUnicefId
         )}
       </TableCell>
-      <AnonTableCell>{payment.headOfHousehold.fullName || '-'}</AnonTableCell>
+      <AnonTableCell>{displayNameWithLocal(payment.headOfHousehold, 'fullName') || '-'}</AnonTableCell>
       <TableCell align="left">{payment.householdSize}</TableCell>
       <TableCell align="left">{payment.householdAdmin2 || '-'}</TableCell>
       <TableCell align="left">