diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index af77a20b4caa..fc5c77958635 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -1,7 +1,6 @@ import lodashEscape from 'lodash/escape'; import React from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCurrentUserAccountID} from '@libs/actions/Report'; @@ -10,26 +9,20 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {PersonalDetailsList, Report, ReportAction} from '@src/types/onyx'; +import type {Report} from '@src/types/onyx'; import Banner from './Banner'; -type ArchivedReportFooterOnyxProps = { - /** The reason this report was archived */ - reportClosedAction: OnyxEntry; - - /** Personal details of all users */ - personalDetails: OnyxEntry; -}; - -type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & { +type ArchivedReportFooterProps = { /** The archived report */ report: Report; }; -function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}}: ArchivedReportFooterProps) { +function ArchivedReportFooter({report}: ArchivedReportFooterProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {initialValue: {}}); + const [reportClosedAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false, selector: ReportActionsUtils.getLastClosedReportAction}); const originalMessage = ReportActionsUtils.isClosedAction(reportClosedAction) ? ReportActionsUtils.getOriginalMessage(reportClosedAction) : null; const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; const actorPersonalDetails = personalDetails?.[reportClosedAction?.actorAccountID ?? -1]; @@ -78,13 +71,4 @@ function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}} ArchivedReportFooter.displayName = 'ArchivedReportFooter'; -export default withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - reportClosedAction: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, - canEvict: false, - selector: ReportActionsUtils.getLastClosedReportAction, - }, -})(ArchivedReportFooter); +export default ArchivedReportFooter; diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index fc8c16754cb4..a7f738790f92 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -351,7 +351,7 @@ function getParticipantsOption(participant: ReportUtils.OptionData | Participant const detail = getPersonalDetailsForAccountIDs([participant.accountID ?? -1], personalDetails)[participant.accountID ?? -1]; // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const login = detail?.login || participant.login || ''; - const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(detail, LocalePhoneNumber.formatPhoneNumber(login) || participant.text); + const displayName = LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(detail, login || participant.text)); return { keyForList: String(detail?.accountID), @@ -401,7 +401,7 @@ function uniqFast(items: string[]): string[] { function getLastActorDisplayName(lastActorDetails: Partial | null, hasMultipleParticipants: boolean) { return hasMultipleParticipants && lastActorDetails && lastActorDetails.accountID !== currentUserAccountID ? // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - lastActorDetails.firstName || PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails) + lastActorDetails.firstName || LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails)) : ''; } @@ -499,7 +499,7 @@ function getLastMessageTextForReport(report: OnyxEntry, lastActorDetails case CONST.REPORT.ARCHIVE_REASON.REMOVED_FROM_POLICY: case CONST.REPORT.ARCHIVE_REASON.POLICY_DELETED: { lastMessageTextFromReport = Localize.translate(preferredLocale, `reportArchiveReasons.${archiveReason}`, { - displayName: PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails), + displayName: LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(lastActorDetails)), policyName: ReportUtils.getPolicyName(report, false, policy), }); break; @@ -1351,10 +1351,10 @@ function getShareLogOptions(options: OptionList, betas: Beta[] = []): Options { * Build the IOUConfirmation options for showing the payee personalDetail */ function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail: OnyxEntry, amountText?: string): PayeePersonalDetails { - const formattedLogin = LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? ''); + const login = personalDetail?.login ?? ''; return { - text: PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail, formattedLogin), - alternateText: formattedLogin || PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail, '', false), + text: LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail, login)), + alternateText: LocalePhoneNumber.formatPhoneNumber(login || PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail, '', false)), icons: [ { source: personalDetail?.avatar ?? FallbackAvatar, diff --git a/src/libs/ReportActionsUtils.ts b/src/libs/ReportActionsUtils.ts index 8d828f457ece..c181ae37cc22 100644 --- a/src/libs/ReportActionsUtils.ts +++ b/src/libs/ReportActionsUtils.ts @@ -20,6 +20,7 @@ import DateUtils from './DateUtils'; import * as Environment from './Environment/Environment'; import getBase62ReportID from './getBase62ReportID'; import isReportMessageAttachment from './isReportMessageAttachment'; +import {formatPhoneNumber} from './LocalePhoneNumber'; import * as Localize from './Localize'; import Log from './Log'; import type {MessageElementBase, MessageTextElement} from './MessageElement'; @@ -1697,7 +1698,8 @@ function getPolicyChangeLogAddEmployeeMessage(reportAction: OnyxInputOrEntry): reportAction is ReportAction { diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index a304ee800131..4c2a1e831d4c 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2160,7 +2160,7 @@ function getDisplayNameForParticipant( // If the user's personal details (first name) should be hidden, make sure we return "hidden" instead of the short name if (shouldFallbackToHidden && longName === hiddenTranslation) { - return longName; + return LocalePhoneNumber.formatPhoneNumber(longName); } const shortName = personalDetails.firstName ? personalDetails.firstName : longName; @@ -2348,7 +2348,7 @@ function getIcons( const actorIcon = { id: actorAccountID, source: personalDetails?.[actorAccountID ?? -1]?.avatar ?? FallbackAvatar, - name: actorDisplayName, + name: LocalePhoneNumber.formatPhoneNumber(actorDisplayName), type: CONST.ICON_TYPE_AVATAR, fallbackIcon: personalDetails?.[parentReportAction?.actorAccountID ?? -1]?.fallbackIcon, }; @@ -3810,7 +3810,7 @@ function getInvoicePayerName(report: OnyxEntry, invoiceReceiverPolicy?: const isIndividual = invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL; if (isIndividual) { - return PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiver.accountID]); + return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiver.accountID])); } return getPolicyName(report, false, invoiceReceiverPolicy ?? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiver?.policyID}`]); @@ -3902,7 +3902,7 @@ function getInvoicesChatName(report: OnyxEntry, receiverPolicy: OnyxEntr } if (isIndividual) { - return PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiverAccountID]); + return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiverAccountID])); } return getPolicyName(report, false, invoiceReceiverPolicy); diff --git a/src/libs/actions/Task.ts b/src/libs/actions/Task.ts index de0f963596d2..595ad97a7f51 100644 --- a/src/libs/actions/Task.ts +++ b/src/libs/actions/Task.ts @@ -923,7 +923,7 @@ function getAssignee(assigneeAccountID: number, personalDetails: OnyxEntry; -}; +type ReportParticipantDetailsPageProps = WithReportOrNotFoundProps & PlatformStackScreenProps; -type ReportParticipantDetailsPageProps = WithReportOrNotFoundProps & - PlatformStackScreenProps & - ReportParticipantDetailsOnyxProps; - -function ReportParticipantDetails({personalDetails, report, route}: ReportParticipantDetailsPageProps) { +function ReportParticipantDetails({report, route}: ReportParticipantDetailsPageProps) { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); const StyleUtils = useStyleUtils(); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = React.useState(false); @@ -54,7 +47,7 @@ function ReportParticipantDetails({personalDetails, report, route}: ReportPartic const member = report?.participants?.[accountID]; const details = personalDetails?.[accountID] ?? ({} as PersonalDetails); const fallbackIcon = details.fallbackIcon ?? ''; - const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(details); + const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)); const isCurrentUserAdmin = ReportUtils.isGroupChatAdmin(report, currentUserPersonalDetails?.accountID); const isSelectedMemberCurrentUser = accountID === currentUserPersonalDetails?.accountID; const removeUser = useCallback(() => { @@ -149,10 +142,4 @@ function ReportParticipantDetails({personalDetails, report, route}: ReportPartic ReportParticipantDetails.displayName = 'ReportParticipantDetails'; -export default withReportOrNotFound()( - withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - })(ReportParticipantDetails), -); +export default withReportOrNotFound()(ReportParticipantDetails); diff --git a/src/pages/ReportParticipantsPage.tsx b/src/pages/ReportParticipantsPage.tsx index 31931aa45544..4c63cc4b4492 100755 --- a/src/pages/ReportParticipantsPage.tsx +++ b/src/pages/ReportParticipantsPage.tsx @@ -391,7 +391,7 @@ function ReportParticipantsPage({report, route}: ReportParticipantsPageProps) { onCancel={() => setRemoveMembersConfirmModalVisible(false)} prompt={translate('workspace.people.removeMembersPrompt', { count: selectedMembers.length, - memberName: PersonalDetailsUtils.getPersonalDetailsByIDs(selectedMembers, currentUserAccountID).at(0)?.displayName ?? '', + memberName: formatPhoneNumber(PersonalDetailsUtils.getPersonalDetailsByIDs(selectedMembers, currentUserAccountID).at(0)?.displayName ?? ''), })} confirmText={translate('common.remove')} cancelText={translate('common.cancel')} diff --git a/src/pages/RoomMemberDetailsPage.tsx b/src/pages/RoomMemberDetailsPage.tsx index 7ec586fae9a4..e10dd09b206a 100644 --- a/src/pages/RoomMemberDetailsPage.tsx +++ b/src/pages/RoomMemberDetailsPage.tsx @@ -17,6 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {RoomMembersNavigatorParamList} from '@libs/Navigation/types'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import Navigation from '@navigation/Navigation'; @@ -33,7 +34,7 @@ type RoomMemberDetailsPagePageProps = WithReportOrNotFoundProps & PlatformStackS function RoomMemberDetailsPage({report, route}: RoomMemberDetailsPagePageProps) { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); const StyleUtils = useStyleUtils(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); @@ -47,7 +48,7 @@ function RoomMemberDetailsPage({report, route}: RoomMemberDetailsPagePageProps) const member = report?.participants?.[accountID]; const details = personalDetails?.[accountID] ?? ({} as PersonalDetails); const fallbackIcon = details.fallbackIcon ?? ''; - const displayName = details.displayName ?? ''; + const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)); const isSelectedMemberCurrentUser = accountID === currentUserPersonalDetails?.accountID; const isSelectedMemberOwner = accountID === report.ownerAccountID; const shouldDisableRemoveUser = (ReportUtils.isPolicyExpenseChat(report) && PolicyUtils.isUserPolicyAdmin(policy, details.login)) || isSelectedMemberCurrentUser || isSelectedMemberOwner; diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index 16c10fb69116..0f29f1d00ba9 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -373,7 +373,7 @@ function RoomMembersPage({report, policies}: RoomMembersPageProps) { onCancel={() => setRemoveMembersConfirmModalVisible(false)} prompt={translate('roomMembersPage.removeMembersPrompt', { count: selectedMembers.length, - memberName: PersonalDetailsUtils.getPersonalDetailsByIDs(selectedMembers, currentUserAccountID).at(0)?.displayName ?? '', + memberName: formatPhoneNumber(PersonalDetailsUtils.getPersonalDetailsByIDs(selectedMembers, currentUserAccountID).at(0)?.displayName ?? ''), })} confirmText={translate('common.remove')} cancelText={translate('common.cancel')} diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 8c71c14cdae5..1ee361b45224 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -43,6 +43,7 @@ import ControlSelection from '@libs/ControlSelection'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as ErrorUtils from '@libs/ErrorUtils'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import ModifiedExpenseMessage from '@libs/ModifiedExpenseMessage'; import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; @@ -603,7 +604,7 @@ function ReportActionItem({ ); } else if (ReportActionsUtils.isReimbursementQueuedAction(action)) { const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report; - const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails?.[linkedReport?.ownerAccountID ?? -1]); + const submitterDisplayName = LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails?.[linkedReport?.ownerAccountID ?? -1])); const paymentType = ReportActionsUtils.getOriginalMessage(action)?.paymentType ?? ''; const missingPaymentMethod = ReportUtils.getIndicatedMissingPaymentMethod(userWallet, linkedReport?.reportID ?? '-1', action); diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx index 4870591bcad5..e94042b25e68 100644 --- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx +++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx @@ -272,7 +272,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) { setIsValidateCodeActionModalVisible(false); }} sendValidateCode={() => User.requestContactMethodValidateCode(contactMethod)} - descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod})} + descriptionPrimary={translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})} /> {!isValidateCodeActionModalVisible && getMenuItems()} diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index a80db51580ba..74b88f419e1d 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; @@ -11,17 +11,13 @@ import * as ValidationUtils from '@libs/ValidationUtils'; import * as PersonalDetails from '@userActions/PersonalDetails'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {PersonalDetailsList, PersonalDetailsMetadata} from '@src/types/onyx'; -type ProfileAvatarOnyxProps = { - personalDetails: OnyxEntry; - personalDetailsMetadata: OnyxEntry>; - isLoadingApp: OnyxEntry; -}; +type ProfileAvatarProps = PlatformStackScreenProps; -type ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps; - -function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadingApp = true}: ProfileAvatarProps) { +function ProfileAvatar({route}: ProfileAvatarProps) { + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA); + const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true}); const personalDetail = personalDetails?.[route.params.accountID]; const avatarURL = personalDetail?.avatar ?? ''; const accountID = Number(route.params.accountID ?? '-1'); @@ -37,7 +33,7 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi return ( { @@ -52,14 +48,4 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi ProfileAvatar.displayName = 'ProfileAvatar'; -export default withOnyx({ - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - personalDetailsMetadata: { - key: ONYXKEYS.PERSONAL_DETAILS_METADATA, - }, - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, -})(ProfileAvatar); +export default ProfileAvatar; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 231550dc0454..00fb559263b7 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -32,6 +32,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as FormActions from '@libs/actions/FormActions'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -110,7 +111,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson if (!approverAccountID) { return translate('workspace.people.removeMembersPrompt', { count: selectedEmployees.length, - memberName: PersonalDetailsUtils.getPersonalDetailsByIDs(selectedEmployees, currentUserAccountID).at(0)?.displayName ?? '', + memberName: LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getPersonalDetailsByIDs(selectedEmployees, currentUserAccountID).at(0)?.displayName ?? ''), }); } return translate('workspace.people.removeMembersWarningPrompt', { diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx index 6d667d786d5d..85a5d2372ee9 100644 --- a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx +++ b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx @@ -23,6 +23,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as CardUtils from '@libs/CardUtils'; import * as CurrencyUtils from '@libs/CurrencyUtils'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; +import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import * as PolicyUtils from '@libs/PolicyUtils'; import shouldRenderTransferOwnerButton from '@libs/shouldRenderTransferOwnerButton'; import Navigation from '@navigation/Navigation'; @@ -58,7 +59,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM const styles = useThemeStyles(); const {isOffline} = useNetwork(); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); const StyleUtils = useStyleUtils(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [cards] = useOnyx(`${ONYXKEYS.CARD_LIST}`); @@ -75,13 +76,13 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM const prevMember = usePrevious(member); const details = personalDetails?.[accountID] ?? ({} as PersonalDetails); const fallbackIcon = details.fallbackIcon ?? ''; - const displayName = details.displayName ?? ''; + const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(details)); const isSelectedMemberOwner = policy?.owner === details.login; const isSelectedMemberCurrentUser = accountID === currentUserPersonalDetails?.accountID; const isCurrentUserAdmin = policy?.employeeList?.[personalDetails?.[currentUserPersonalDetails?.accountID]?.login ?? '']?.role === CONST.POLICY.ROLE.ADMIN; const isCurrentUserOwner = policy?.owner === currentUserPersonalDetails?.login; const ownerDetails = personalDetails?.[policy?.ownerAccountID ?? -1] ?? ({} as PersonalDetails); - const policyOwnerDisplayName = ownerDetails.displayName ?? policy?.owner ?? ''; + const policyOwnerDisplayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)) ?? policy?.owner ?? ''; const hasMultipleFeeds = Object.values(CardUtils.getCompanyFeeds(cardFeeds)).filter((feed) => !feed.pending).length > 0; const paymentAccountID = cardSettings?.paymentBankAccountID ?? 0;