From 4624eb47376e33a505c6cdb1308c0c56b06b0f8c Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Wed, 27 Nov 2024 14:05:21 +0100 Subject: [PATCH 01/26] fix #53003 on room invite sms shown --- src/pages/RoomMemberDetailsPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/RoomMemberDetailsPage.tsx b/src/pages/RoomMemberDetailsPage.tsx index 3a9d51a251a1..43dbce181815 100644 --- a/src/pages/RoomMemberDetailsPage.tsx +++ b/src/pages/RoomMemberDetailsPage.tsx @@ -17,6 +17,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; 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 & StackScreenPro 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; From f9927db77abfc92da742e71e27fd9edb3bc8762a Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 02:25:31 +0100 Subject: [PATCH 02/26] generalize the usage of phone number formatting --- src/components/ArchivedReportFooter.tsx | 8 ++++---- src/libs/OptionsListUtils.ts | 16 ++++++++-------- src/libs/ReportUtils.ts | 10 +++++----- src/libs/actions/Task.ts | 2 +- src/pages/ProfilePage.tsx | 2 +- src/pages/ReportParticipantDetailsPage.tsx | 4 ++-- src/pages/home/report/ReportActionItem.tsx | 3 ++- src/pages/settings/Profile/ProfileAvatar.tsx | 3 ++- .../WorkspaceCompanyCardDetailsPage.tsx | 4 ++-- .../WorkspaceCompanyCardsListRow.tsx | 3 ++- .../expensifyCard/WorkspaceCardListRow.tsx | 4 ++-- .../WorkspaceExpensifyCardDetailsPage.tsx | 4 ++-- 12 files changed, 33 insertions(+), 30 deletions(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index af77a20b4caa..ab5c41a4f1ce 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -28,12 +28,12 @@ type ArchivedReportFooterProps = ArchivedReportFooterOnyxProps & { function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}}: ArchivedReportFooterProps) { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); const originalMessage = ReportActionsUtils.isClosedAction(reportClosedAction) ? ReportActionsUtils.getOriginalMessage(reportClosedAction) : null; const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; const actorPersonalDetails = personalDetails?.[reportClosedAction?.actorAccountID ?? -1]; - let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(actorPersonalDetails); + let displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(actorPersonalDetails)); let oldDisplayName: string | undefined; if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) { @@ -59,8 +59,8 @@ function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}} const text = shouldRenderHTML ? translate(`reportArchiveReasons.${archiveReason}`, { - displayName: `${displayName}`, - oldDisplayName: `${oldDisplayName}`, + displayName: `${formatPhoneNumber(displayName)}`, + oldDisplayName: `${formatPhoneNumber(oldDisplayName??'')}`, policyName: `${policyName}`, shouldUseYou: actorPersonalDetails?.accountID === getCurrentUserAccountID(), }) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index e8bbe392e9aa..3d322739bf13 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -358,7 +358,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), @@ -408,7 +408,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)) : ''; } @@ -506,7 +506,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; @@ -1394,20 +1394,20 @@ function getShareLogOptions(options: OptionList, searchValue = '', betas: Beta[] * 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, - name: personalDetail?.login ?? '', + name: LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? ''), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, ], descriptiveText: amountText ?? '', - login: personalDetail?.login ?? '', + login: LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? ''), accountID: personalDetail?.accountID ?? -1, keyForList: String(personalDetail?.accountID ?? -1), }; diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index f2228636bddb..d3d45461b003 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2150,11 +2150,11 @@ 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; - return shouldUseShortForm ? shortName : longName; + return LocalePhoneNumber.formatPhoneNumber(shouldUseShortForm ? shortName : longName); } function getParticipantsAccountIDsForDisplay(report: OnyxEntry, shouldExcludeHidden = false, shouldExcludeDeleted = false, shouldForceExcludeCurrentUser = false): number[] { @@ -2338,7 +2338,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, }; @@ -3797,7 +3797,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}`]); @@ -3889,7 +3889,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 ea87f5dd5cc6..43af15327a91 100644 --- a/src/libs/actions/Task.ts +++ b/src/libs/actions/Task.ts @@ -907,7 +907,7 @@ function getAssignee(assigneeAccountID: number, personalDetails: OnyxEntry { diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 399550069c0a..eeab0e91fba5 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'; @@ -609,7 +610,7 @@ function ReportActionItem({ const missingPaymentMethod = ReportUtils.getIndicatedMissingPaymentMethod(userWallet, linkedReport?.reportID ?? '-1', action); children = ( <> {missingPaymentMethod === 'bankAccount' && ( diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 977719f63879..b10b375b74a6 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -3,6 +3,7 @@ import React, {useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -37,7 +38,7 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi return ( { diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index cc1649b51c89..da89b241fb2c 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -46,7 +46,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID); const policy = usePolicy(policyID); const [isUnassignModalVisible, setIsUnassignModalVisible] = useState(false); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); const {isOffline} = useNetwork(); @@ -59,7 +59,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const cardBank = card?.bank ?? ''; const cardholder = personalDetails?.[card?.accountID ?? -1]; - const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); + const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)); const exportMenuItem = getExportMenuItem(connectedIntegration, policyID, translate, policy, card); const unassignCard = () => { diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx index 5c85d2e40ae0..2783758c978b 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import Avatar from '@components/Avatar'; import Text from '@components/Text'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import {getDefaultAvatarURL} from '@libs/UserUtils'; import CONST from '@src/CONST'; @@ -21,7 +22,7 @@ type WorkspaceCompanyCardsListRowProps = { function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceCompanyCardsListRowProps) { const styles = useThemeStyles(); - const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]); + const cardholderName = useMemo(() => LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index 0d59d5d9c762..0b7394c72d95 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -34,9 +34,9 @@ type WorkspacesListRowProps = { function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, isVirtual}: WorkspacesListRowProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); - const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]); + const cardholderName = useMemo(() => formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); const cardType = isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical'); return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index 0189f4a7e3c0..6762a70a715d 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -41,7 +41,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const [isDeactivateModalVisible, setIsDeactivateModalVisible] = useState(false); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); - const {translate} = useLocalize(); + const {formatPhoneNumber, translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type for the decision modal // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); @@ -55,7 +55,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const isVirtual = !!card?.nameValuePairs?.isVirtual; const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(card?.availableSpend); const formattedLimit = CurrencyUtils.convertToDisplayString(card?.nameValuePairs?.unapprovedExpenseLimit); - const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); + const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)); const translationForLimitType = CardUtils.getTranslationKeyForLimitType(card?.nameValuePairs?.limitType); const fetchCardDetails = useCallback(() => { From 079e8c3a3c7e9a10a5faaec39313f61d93cb906a Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 02:42:26 +0100 Subject: [PATCH 03/26] generalize the usage of phone number formatting --- src/pages/home/report/ReportActionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index eeab0e91fba5..7ad501d72cb7 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -604,13 +604,13 @@ 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); children = ( <> {missingPaymentMethod === 'bankAccount' && ( From b10f5fbe295d3807633923ae546801367dbe6823 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 07:44:12 +0100 Subject: [PATCH 04/26] run prettier --- src/components/ArchivedReportFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index ab5c41a4f1ce..0d5b291b2571 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -60,7 +60,7 @@ function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}} const text = shouldRenderHTML ? translate(`reportArchiveReasons.${archiveReason}`, { displayName: `${formatPhoneNumber(displayName)}`, - oldDisplayName: `${formatPhoneNumber(oldDisplayName??'')}`, + oldDisplayName: `${formatPhoneNumber(oldDisplayName ?? '')}`, policyName: `${policyName}`, shouldUseYou: actorPersonalDetails?.accountID === getCurrentUserAccountID(), }) From 423332ce09d92be9c91fc8bf39f3ac9bde3f64c2 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 09:25:39 +0100 Subject: [PATCH 05/26] usememo dependency fix --- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index 0b7394c72d95..619e55486cab 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -7,6 +7,7 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; import type {PersonalDetails} from '@src/types/onyx'; @@ -34,9 +35,9 @@ type WorkspacesListRowProps = { function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, isVirtual}: WorkspacesListRowProps) { const {shouldUseNarrowLayout} = useResponsiveLayout(); const styles = useThemeStyles(); - const {formatPhoneNumber, translate} = useLocalize(); + const {translate} = useLocalize(); - const cardholderName = useMemo(() => formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); + const cardholderName = useMemo(() => LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); const cardType = isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical'); return ( From 3e28287f36a6f17a4b8ea2fc3299abe80454eda8 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 15:06:47 +0100 Subject: [PATCH 06/26] update some tests with no-break space character --- tests/unit/OptionsListUtilsTest.ts | 76 +++++++++++++++--------------- tests/unit/ReportUtilsTest.ts | 20 ++++---- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/tests/unit/OptionsListUtilsTest.ts b/tests/unit/OptionsListUtilsTest.ts index 0e66993bc2cf..2c9a9f3d9b17 100644 --- a/tests/unit/OptionsListUtilsTest.ts +++ b/tests/unit/OptionsListUtilsTest.ts @@ -428,14 +428,14 @@ describe('OptionsListUtils', () => { // All personal details including those that have reports should be returned // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); - expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'); - expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'); - expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'); - expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'.replace(/ /g, '\u00A0')); expect(results.personalDetails.at(8)?.text).toBe('Thor'); // Then the result which has an existing report should also have the reportID attached @@ -446,10 +446,10 @@ describe('OptionsListUtils', () => { results = OptionsListUtils.getFilteredOptions({personalDetails: OPTIONS.personalDetails}); // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); // When we don't include personal detail to the result results = OptionsListUtils.getFilteredOptions({ @@ -515,14 +515,14 @@ describe('OptionsListUtils', () => { // All personal details including those that have reports should be returned // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); - expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'); - expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'); - expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'); - expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'.replace(/ /g, '\u00A0')); expect(results.personalDetails.at(8)?.text).toBe('Thor'); // And none of our personalDetails should include any of the users with recent reports @@ -631,10 +631,10 @@ describe('OptionsListUtils', () => { const results = OptionsListUtils.getMemberInviteOptions(OPTIONS.personalDetails, [], ''); // We should expect personal details to be sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); }); it('formatMemberForList()', () => { @@ -669,10 +669,10 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText, {sortByReportTypeInSearch: true}); expect(filteredOptions.recentReports.length).toBe(4); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Invisible Woman'); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Spider-Man'); - expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Widow'); - expect(filteredOptions.recentReports.at(3)?.text).toBe('Mister Fantastic, Invisible Woman'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(3)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); }); it('should filter users by email', () => { @@ -682,7 +682,7 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText); expect(filteredOptions.recentReports.length).toBe(1); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mr Sinister'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); }); it('should find archived chats', () => { @@ -743,8 +743,8 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText); expect(filteredOptions.recentReports.length).toBe(2); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic, Invisible Woman'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); }); it('should return the user to invite when the search value is a valid, non-existent email', () => { @@ -867,7 +867,7 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, '.com'); expect(filteredOptions.recentReports.length).toBe(5); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); expect(filteredOptions.personalDetails.length).toBe(4); expect(filteredOptions.personalDetails.at(0)?.login).toBe('natasharomanoff@expensify.com'); @@ -960,9 +960,9 @@ describe('OptionsListUtils', () => { expect(filteredOptions.personalDetails.length).toBe(4); expect(filteredOptions.recentReports.length).toBe(5); expect(filteredOptions.personalDetails.at(0)?.login).toBe('natasharomanoff@expensify.com'); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mr Sinister'); - expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Panther'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); }); it('should return matching option when searching (getSearchOptions)', () => { @@ -978,8 +978,8 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, 'fantastic'); expect(filteredOptions.recentReports.length).toBe(2); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic, Invisible Woman'); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); return waitForBatchedUpdates() .then(() => Onyx.set(ONYXKEYS.PERSONAL_DETAILS_LIST, PERSONAL_DETAILS_WITH_PERIODS)) @@ -989,7 +989,7 @@ describe('OptionsListUtils', () => { const filteredResults = OptionsListUtils.filterOptions(results, 'barry.allen@expensify.com', {sortByReportTypeInSearch: true}); expect(filteredResults.recentReports.length).toBe(1); - expect(filteredResults.recentReports.at(0)?.text).toBe('The Flash'); + expect(filteredResults.recentReports.at(0)?.text).toBe('The Flash'.replace(/ /g, '\u00A0')); }); }); }); diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index dc752ae73b1c..818e1e8e6ae3 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -98,15 +98,15 @@ describe('ReportUtils', () => { const participants = ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false); expect(participants).toHaveLength(5); - expect(participants.at(0)?.displayName).toBe('(833) 240-3627'); + expect(participants.at(0)?.displayName).toBe('(833) 240-3627'.replace(/ /g, '\u00A0')); expect(participants.at(0)?.login).toBe('+18332403627@expensify.sms'); - expect(participants.at(2)?.displayName).toBe('Lagertha Lothbrok'); + expect(participants.at(2)?.displayName).toBe('Lagertha Lothbrok'.replace(/ /g, '\u00A0')); expect(participants.at(2)?.login).toBe('lagertha@vikings.net'); expect(participants.at(2)?.accountID).toBe(3); expect(participants.at(2)?.pronouns).toBe('She/her'); - expect(participants.at(4)?.displayName).toBe('Ragnar Lothbrok'); + expect(participants.at(4)?.displayName).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); expect(participants.at(4)?.login).toBe('ragnar@vikings.net'); expect(participants.at(4)?.accountID).toBe(1); expect(participants.at(4)?.pronouns).toBeUndefined(); @@ -121,7 +121,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1]), }), - ).toBe('Ragnar Lothbrok'); + ).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); }); test('no displayName', () => { @@ -139,7 +139,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 4]), }), - ).toBe('(833) 240-3627'); + ).toBe('(833) 240-3627'.replace(/ /g, '\u00A0')); }); }); @@ -149,7 +149,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1, 2, 3, 4]), }), - ).toBe('Ragnar, floki@vikings.net, Lagertha, (833) 240-3627'); + ).toBe('Ragnar, floki@vikings.net, Lagertha, ' + '(833) 240-3627'.replace(/ /g, '\u00A0')); }); describe('Default Policy Room', () => { @@ -227,7 +227,7 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, ownerAccountID: 1, }), - ).toBe('Ragnar Lothbrok'); + ).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); }); }); @@ -263,10 +263,10 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, }; - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok (archived)'); + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0') + ' (archived)'); return Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES).then(() => - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok (archivado)'), + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0') + ' (archivado)'), ); }); }); @@ -1114,7 +1114,7 @@ describe('ReportUtils', () => { it('Should use correct display name for participants', async () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, participantsPersonalDetails); - expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual('(833) 240-3627, floki@vikings.net, Lagertha, Ragnar'); + expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual('(833) 240-3627'.replace(/ /g, '\u00A0') + ', floki@vikings.net, Lagertha, Ragnar'); }); }); From 30912b1a2dbf05b12e7686fd73663b9804c73dce Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 15:49:31 +0100 Subject: [PATCH 07/26] lint update --- tests/unit/OptionsListUtilsTest.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/unit/OptionsListUtilsTest.ts b/tests/unit/OptionsListUtilsTest.ts index 2c9a9f3d9b17..ff519ae8ab84 100644 --- a/tests/unit/OptionsListUtilsTest.ts +++ b/tests/unit/OptionsListUtilsTest.ts @@ -672,7 +672,7 @@ describe('OptionsListUtils', () => { expect(filteredOptions.recentReports.at(0)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); expect(filteredOptions.recentReports.at(1)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(3)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(3)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); }); it('should filter users by email', () => { @@ -744,7 +744,7 @@ describe('OptionsListUtils', () => { expect(filteredOptions.recentReports.length).toBe(2); expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); }); it('should return the user to invite when the search value is a valid, non-existent email', () => { @@ -979,7 +979,7 @@ describe('OptionsListUtils', () => { expect(filteredOptions.recentReports.length).toBe(2); expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0') + ', ' + 'Invisible Woman'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); return waitForBatchedUpdates() .then(() => Onyx.set(ONYXKEYS.PERSONAL_DETAILS_LIST, PERSONAL_DETAILS_WITH_PERIODS)) From b004644b8fd84b03e3b0882c7d14363b0b056d62 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 28 Nov 2024 15:50:01 +0100 Subject: [PATCH 08/26] lint update --- tests/unit/ReportUtilsTest.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index 818e1e8e6ae3..4eb268df2138 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -149,7 +149,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1, 2, 3, 4]), }), - ).toBe('Ragnar, floki@vikings.net, Lagertha, ' + '(833) 240-3627'.replace(/ /g, '\u00A0')); + ).toBe(`Ragnar, floki@vikings.net, Lagertha, ${'(833) 240-3627'.replace(/ /g, '\u00A0')}`); }); describe('Default Policy Room', () => { @@ -263,10 +263,10 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, }; - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0') + ' (archived)'); + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'.replace(/ /g, '\u00A0')} (archived)`); return Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES).then(() => - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0') + ' (archivado)'), + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'.replace(/ /g, '\u00A0')} (archivado)`), ); }); }); @@ -1114,7 +1114,7 @@ describe('ReportUtils', () => { it('Should use correct display name for participants', async () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, participantsPersonalDetails); - expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual('(833) 240-3627'.replace(/ /g, '\u00A0') + ', floki@vikings.net, Lagertha, Ragnar'); + expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual(`${'(833) 240-3627'.replace(/ /g, '\u00A0')}, floki@vikings.net, Lagertha, Ragnar`); }); }); From ab4b111cfedc2927d3f40f5fed792376e37aeb0c Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Sat, 30 Nov 2024 15:39:51 +0100 Subject: [PATCH 09/26] remove an extra formatting --- src/components/ArchivedReportFooter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index 0d5b291b2571..7c199e28bca8 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -33,7 +33,7 @@ function ArchivedReportFooter({report, reportClosedAction, personalDetails = {}} const originalMessage = ReportActionsUtils.isClosedAction(reportClosedAction) ? ReportActionsUtils.getOriginalMessage(reportClosedAction) : null; const archiveReason = originalMessage?.reason ?? CONST.REPORT.ARCHIVE_REASON.DEFAULT; const actorPersonalDetails = personalDetails?.[reportClosedAction?.actorAccountID ?? -1]; - let displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(actorPersonalDetails)); + let displayName = PersonalDetailsUtils.getDisplayNameOrDefault(actorPersonalDetails); let oldDisplayName: string | undefined; if (archiveReason === CONST.REPORT.ARCHIVE_REASON.ACCOUNT_MERGED) { From 55e9738de4f134f8290316e3d59753c668638ca6 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Wed, 4 Dec 2024 00:01:57 +0100 Subject: [PATCH 10/26] update on iou confirmation options --- src/libs/OptionsListUtils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 477f5f201f4e..fa66d631eb17 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1340,13 +1340,13 @@ function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail: OnyxEn icons: [ { source: personalDetail?.avatar ?? FallbackAvatar, - name: LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? ''), + name: personalDetail?.login ?? '', type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, ], descriptiveText: amountText ?? '', - login: LocalePhoneNumber.formatPhoneNumber(personalDetail?.login ?? ''), + login: personalDetail?.login ?? '', accountID: personalDetail?.accountID ?? -1, keyForList: String(personalDetail?.accountID ?? -1), }; From e308a4b41e4e6a8a19b554879d881cb57f1fbf04 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Wed, 4 Dec 2024 23:27:44 +0100 Subject: [PATCH 11/26] revert changes on cards --- .../companyCards/WorkspaceCompanyCardDetailsPage.tsx | 4 ++-- .../workspace/companyCards/WorkspaceCompanyCardsListRow.tsx | 3 +-- src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx | 3 +-- .../expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx | 4 ++-- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx index dcb7d629de37..015d018afb76 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx @@ -46,7 +46,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID); const policy = usePolicy(policyID); const [isUnassignModalVisible, setIsUnassignModalVisible] = useState(false); - const {formatPhoneNumber, translate} = useLocalize(); + const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); const {isOffline} = useNetwork(); @@ -59,7 +59,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag const cardBank = card?.bank ?? ''; const cardholder = personalDetails?.[card?.accountID ?? -1]; - const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)); + const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); const exportMenuItem = getExportMenuItem(connectedIntegration, policyID, translate, policy, card); const unassignCard = () => { diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx index 2783758c978b..5c85d2e40ae0 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native'; import Avatar from '@components/Avatar'; import Text from '@components/Text'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import {getDefaultAvatarURL} from '@libs/UserUtils'; import CONST from '@src/CONST'; @@ -22,7 +21,7 @@ type WorkspaceCompanyCardsListRowProps = { function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceCompanyCardsListRowProps) { const styles = useThemeStyles(); - const cardholderName = useMemo(() => LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); + const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]); return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx index 619e55486cab..0d59d5d9c762 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceCardListRow.tsx @@ -7,7 +7,6 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import * as CurrencyUtils from '@libs/CurrencyUtils'; -import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; import type {PersonalDetails} from '@src/types/onyx'; @@ -37,7 +36,7 @@ function WorkspaceCardListRow({limit, cardholder, lastFourPAN, name, currency, i const styles = useThemeStyles(); const {translate} = useLocalize(); - const cardholderName = useMemo(() => LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)), [cardholder]); + const cardholderName = useMemo(() => PersonalDetailsUtils.getDisplayNameOrDefault(cardholder), [cardholder]); const cardType = isVirtual ? translate('workspace.expensifyCard.virtual') : translate('workspace.expensifyCard.physical'); return ( diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx index fb6f0a5b82ca..5451c65e16a6 100644 --- a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx +++ b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx @@ -41,7 +41,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const [isDeactivateModalVisible, setIsDeactivateModalVisible] = useState(false); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); - const {formatPhoneNumber, translate} = useLocalize(); + const {translate} = useLocalize(); // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to use the correct modal type for the decision modal // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); @@ -55,7 +55,7 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail const isVirtual = !!card?.nameValuePairs?.isVirtual; const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(card?.availableSpend); const formattedLimit = CurrencyUtils.convertToDisplayString(card?.nameValuePairs?.unapprovedExpenseLimit); - const displayName = formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(cardholder)); + const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder); const translationForLimitType = CardUtils.getTranslationKeyForLimitType(card?.nameValuePairs?.limitType); const fetchCardDetails = useCallback(() => { From 864293c3bf382f23c3f624985acaab2208be1ba1 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 5 Dec 2024 15:09:48 +0100 Subject: [PATCH 12/26] migrate some files from withOnyx to useOnyx --- src/components/ArchivedReportFooter.tsx | 30 +++++--------------- src/pages/ReportParticipantDetailsPage.tsx | 23 ++++----------- src/pages/settings/Profile/ProfileAvatar.tsx | 29 +++++-------------- 3 files changed, 19 insertions(+), 63 deletions(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index 7c199e28bca8..43c9b63fb505 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 {formatPhoneNumber, 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/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx index 50edc272296c..3f2255758f37 100644 --- a/src/pages/ReportParticipantDetailsPage.tsx +++ b/src/pages/ReportParticipantDetailsPage.tsx @@ -1,7 +1,6 @@ import React, {useCallback} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Avatar from '@components/Avatar'; import Button from '@components/Button'; import ConfirmModal from '@components/ConfirmModal'; @@ -31,19 +30,13 @@ import NotFoundPage from './ErrorPage/NotFoundPage'; import withReportOrNotFound from './home/report/withReportOrNotFound'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; -type ReportParticipantDetailsOnyxProps = { - /** Personal details of all users */ - 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 {formatPhoneNumber, translate} = useLocalize(); const StyleUtils = useStyleUtils(); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = React.useState(false); @@ -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/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index c295984fb3ef..74b88f419e1d 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,6 +1,5 @@ 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'; @@ -12,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'); @@ -53,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; From 63e30c3509b12ded5387f8906e5b468e44bf3261 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Thu, 5 Dec 2024 15:15:15 +0100 Subject: [PATCH 13/26] migrate some files from withOnyx to useOnyx --- src/pages/ReportParticipantDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx index 3f2255758f37..bfc4506818d1 100644 --- a/src/pages/ReportParticipantDetailsPage.tsx +++ b/src/pages/ReportParticipantDetailsPage.tsx @@ -25,7 +25,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx'; +import type {PersonalDetails} from '@src/types/onyx'; import NotFoundPage from './ErrorPage/NotFoundPage'; import withReportOrNotFound from './home/report/withReportOrNotFound'; import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound'; From 3b39a328e37002f00258d6e8c03789d9a527b807 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 10:03:23 +0100 Subject: [PATCH 14/26] format phone number and display names --- src/components/ArchivedReportFooter.tsx | 6 +++--- src/pages/ReportParticipantsPage.tsx | 2 +- src/pages/RoomMembersPage.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx | 7 ++++--- 5 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index 43c9b63fb505..f8276603c875 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -19,7 +19,7 @@ type ArchivedReportFooterProps = { function ArchivedReportFooter({report}: ArchivedReportFooterProps) { const styles = useThemeStyles(); - const {formatPhoneNumber, translate} = useLocalize(); + 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}); @@ -52,8 +52,8 @@ function ArchivedReportFooter({report}: ArchivedReportFooterProps) { const text = shouldRenderHTML ? translate(`reportArchiveReasons.${archiveReason}`, { - displayName: `${formatPhoneNumber(displayName)}`, - oldDisplayName: `${formatPhoneNumber(oldDisplayName ?? '')}`, + displayName: `${displayName}`, + oldDisplayName: `${oldDisplayName ?? ''}`, policyName: `${policyName}`, shouldUseYou: actorPersonalDetails?.accountID === getCurrentUserAccountID(), }) 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/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index 71f3117be927..f1aafee230a4 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/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 18961a979c93..7e1b60c60948 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -110,7 +110,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: 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; From 6d9369080886a7a217e1ceffcb271b28e193275f Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 10:13:08 +0100 Subject: [PATCH 15/26] format phone number and display names --- src/pages/workspace/WorkspaceMembersPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 7e1b60c60948..7e16ba18e2cc 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -30,6 +30,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as FormActions from '@libs/actions/FormActions'; +import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import Log from '@libs/Log'; @@ -110,7 +111,7 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson if (!approverAccountID) { return translate('workspace.people.removeMembersPrompt', { count: selectedEmployees.length, - memberName: formatPhoneNumber(PersonalDetailsUtils.getPersonalDetailsByIDs(selectedEmployees, currentUserAccountID).at(0)?.displayName ?? ''), + memberName: LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getPersonalDetailsByIDs(selectedEmployees, currentUserAccountID).at(0)?.displayName ?? ''), }); } return translate('workspace.people.removeMembersWarningPrompt', { From e79c9070ea224863a3fc5b7595fb1f826b6509b0 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 10:22:07 +0100 Subject: [PATCH 16/26] format phone number and display names --- src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 7e16ba18e2cc..cb702cfd48df 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -30,9 +30,9 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as FormActions from '@libs/actions/FormActions'; -import * as LocalePhoneNumber from '@libs/LocalePhoneNumber'; 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'; From 3e216f83cecf0f104a30baf04ff5f5dbf2c8a8fe Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 16:30:02 +0100 Subject: [PATCH 17/26] use of formatphonenumber --- src/components/ArchivedReportFooter.tsx | 2 +- src/libs/ReportUtils.ts | 2 +- tests/unit/OptionsListUtilsTest.ts | 76 ++++++++++++------------- tests/unit/ReportUtilsTest.ts | 20 +++---- 4 files changed, 50 insertions(+), 50 deletions(-) diff --git a/src/components/ArchivedReportFooter.tsx b/src/components/ArchivedReportFooter.tsx index f8276603c875..fc5c77958635 100644 --- a/src/components/ArchivedReportFooter.tsx +++ b/src/components/ArchivedReportFooter.tsx @@ -53,7 +53,7 @@ function ArchivedReportFooter({report}: ArchivedReportFooterProps) { const text = shouldRenderHTML ? translate(`reportArchiveReasons.${archiveReason}`, { displayName: `${displayName}`, - oldDisplayName: `${oldDisplayName ?? ''}`, + oldDisplayName: `${oldDisplayName}`, policyName: `${policyName}`, shouldUseYou: actorPersonalDetails?.accountID === getCurrentUserAccountID(), }) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index fc2a48aa323b..93e8f362acbd 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2165,7 +2165,7 @@ function getDisplayNameForParticipant( } const shortName = personalDetails.firstName ? personalDetails.firstName : longName; - return LocalePhoneNumber.formatPhoneNumber(shouldUseShortForm ? shortName : longName); + return shouldUseShortForm ? shortName : longName; } function getParticipantsAccountIDsForDisplay(report: OnyxEntry, shouldExcludeHidden = false, shouldExcludeDeleted = false, shouldForceExcludeCurrentUser = false): number[] { diff --git a/tests/unit/OptionsListUtilsTest.ts b/tests/unit/OptionsListUtilsTest.ts index 43798f6c40cf..6018d2448812 100644 --- a/tests/unit/OptionsListUtilsTest.ts +++ b/tests/unit/OptionsListUtilsTest.ts @@ -427,14 +427,14 @@ describe('OptionsListUtils', () => { // All personal details including those that have reports should be returned // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); + expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'); + expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'); + expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'); + expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'); expect(results.personalDetails.at(8)?.text).toBe('Thor'); // Then the result which has an existing report should also have the reportID attached @@ -445,10 +445,10 @@ describe('OptionsListUtils', () => { results = OptionsListUtils.getOptions({personalDetails: OPTIONS.personalDetails, reports: []}); // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); // When we don't include personal detail to the result results = OptionsListUtils.getOptions( @@ -525,14 +525,14 @@ describe('OptionsListUtils', () => { // All personal details including those that have reports should be returned // We should expect personal details sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); + expect(results.personalDetails.at(4)?.text).toBe('Mister Fantastic'); + expect(results.personalDetails.at(5)?.text).toBe('Mr Sinister'); + expect(results.personalDetails.at(6)?.text).toBe('Spider-Man'); + expect(results.personalDetails.at(7)?.text).toBe('The Incredible Hulk'); expect(results.personalDetails.at(8)?.text).toBe('Thor'); // And none of our personalDetails should include any of the users with recent reports @@ -649,10 +649,10 @@ describe('OptionsListUtils', () => { const results = OptionsListUtils.getMemberInviteOptions(OPTIONS.personalDetails, []); // We should expect personal details to be sorted alphabetically - expect(results.personalDetails.at(0)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(1)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(2)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); - expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); + expect(results.personalDetails.at(0)?.text).toBe('Black Panther'); + expect(results.personalDetails.at(1)?.text).toBe('Black Widow'); + expect(results.personalDetails.at(2)?.text).toBe('Captain America'); + expect(results.personalDetails.at(3)?.text).toBe('Invisible Woman'); }); it('formatMemberForList()', () => { @@ -687,10 +687,10 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText, {sortByReportTypeInSearch: true}); expect(filteredOptions.recentReports.length).toBe(4); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Invisible Woman'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Spider-Man'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Widow'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(3)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Invisible Woman'); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Spider-Man'); + expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Widow'); + expect(filteredOptions.recentReports.at(3)?.text).toBe('Mister Fantastic, Invisible Woman'); }); it('should filter users by email', () => { @@ -700,7 +700,7 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText); expect(filteredOptions.recentReports.length).toBe(1); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mr Sinister'); }); it('should find archived chats', () => { @@ -761,8 +761,8 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, searchText); expect(filteredOptions.recentReports.length).toBe(2); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'); + expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'}, ${'Invisible Woman'}`); }); it('should return the user to invite when the search value is a valid, non-existent email', () => { @@ -885,7 +885,7 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, '.com'); expect(filteredOptions.recentReports.length).toBe(5); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'); // We expect that only personal details that are not in the reports are included here expect(filteredOptions.personalDetails.length).toBe(4); @@ -979,9 +979,9 @@ describe('OptionsListUtils', () => { expect(filteredOptions.personalDetails.length).toBe(4); expect(filteredOptions.recentReports.length).toBe(5); expect(filteredOptions.personalDetails.at(0)?.login).toBe('natasharomanoff@expensify.com'); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe('Mr Sinister'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Panther'.replace(/ /g, '\u00A0')); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mr Sinister'); + expect(filteredOptions.recentReports.at(2)?.text).toBe('Black Panther'); }); it('should return matching option when searching (getSearchOptions)', () => { @@ -997,8 +997,8 @@ describe('OptionsListUtils', () => { const filteredOptions = OptionsListUtils.filterOptions(options, 'fantastic'); expect(filteredOptions.recentReports.length).toBe(2); - expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'.replace(/ /g, '\u00A0')); - expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'.replace(/ /g, '\u00A0')}, ${'Invisible Woman'.replace(/ /g, '\u00A0')}`); + expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic, Invisible Woman'); return waitForBatchedUpdates() .then(() => Onyx.set(ONYXKEYS.PERSONAL_DETAILS_LIST, PERSONAL_DETAILS_WITH_PERIODS)) @@ -1008,7 +1008,7 @@ describe('OptionsListUtils', () => { const filteredResults = OptionsListUtils.filterOptions(results, 'barry.allen@expensify.com', {sortByReportTypeInSearch: true}); expect(filteredResults.recentReports.length).toBe(1); - expect(filteredResults.recentReports.at(0)?.text).toBe('The Flash'.replace(/ /g, '\u00A0')); + expect(filteredResults.recentReports.at(0)?.text).toBe('The Flash'); }); }); }); diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index 4eb268df2138..49532e84b8ba 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -98,15 +98,15 @@ describe('ReportUtils', () => { const participants = ReportUtils.getDisplayNamesWithTooltips(participantsPersonalDetails, false); expect(participants).toHaveLength(5); - expect(participants.at(0)?.displayName).toBe('(833) 240-3627'.replace(/ /g, '\u00A0')); + expect(participants.at(0)?.displayName).toBe('(833) 240-3627'); expect(participants.at(0)?.login).toBe('+18332403627@expensify.sms'); - expect(participants.at(2)?.displayName).toBe('Lagertha Lothbrok'.replace(/ /g, '\u00A0')); + expect(participants.at(2)?.displayName).toBe('Lagertha Lothbrok'); expect(participants.at(2)?.login).toBe('lagertha@vikings.net'); expect(participants.at(2)?.accountID).toBe(3); expect(participants.at(2)?.pronouns).toBe('She/her'); - expect(participants.at(4)?.displayName).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); + expect(participants.at(4)?.displayName).toBe('Ragnar Lothbrok'); expect(participants.at(4)?.login).toBe('ragnar@vikings.net'); expect(participants.at(4)?.accountID).toBe(1); expect(participants.at(4)?.pronouns).toBeUndefined(); @@ -121,7 +121,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1]), }), - ).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); + ).toBe('Ragnar Lothbrok'); }); test('no displayName', () => { @@ -139,7 +139,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 4]), }), - ).toBe('(833) 240-3627'.replace(/ /g, '\u00A0')); + ).toBe('(833) 240-3627'); }); }); @@ -149,7 +149,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1, 2, 3, 4]), }), - ).toBe(`Ragnar, floki@vikings.net, Lagertha, ${'(833) 240-3627'.replace(/ /g, '\u00A0')}`); + ).toBe(`Ragnar, floki@vikings.net, Lagertha, ${'(833) 240-3627'}`); }); describe('Default Policy Room', () => { @@ -227,7 +227,7 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, ownerAccountID: 1, }), - ).toBe('Ragnar Lothbrok'.replace(/ /g, '\u00A0')); + ).toBe('Ragnar Lothbrok'); }); }); @@ -263,10 +263,10 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, }; - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'.replace(/ /g, '\u00A0')} (archived)`); + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'} (archived)`); return Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES).then(() => - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'.replace(/ /g, '\u00A0')} (archivado)`), + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'} (archivado)`), ); }); }); @@ -1114,7 +1114,7 @@ describe('ReportUtils', () => { it('Should use correct display name for participants', async () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, participantsPersonalDetails); - expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual(`${'(833) 240-3627'.replace(/ /g, '\u00A0')}, floki@vikings.net, Lagertha, Ragnar`); + expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual(`${'(833) 240-3627'}, floki@vikings.net, Lagertha, Ragnar`); }); }); From de3750f2dc01487e7035cc4e27b3b605bbc14f6d Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 16:47:42 +0100 Subject: [PATCH 18/26] use of formatphonenumber --- tests/unit/OptionsListUtilsTest.ts | 2 +- tests/unit/ReportUtilsTest.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/unit/OptionsListUtilsTest.ts b/tests/unit/OptionsListUtilsTest.ts index 6018d2448812..747ae2cf1cda 100644 --- a/tests/unit/OptionsListUtilsTest.ts +++ b/tests/unit/OptionsListUtilsTest.ts @@ -762,7 +762,7 @@ describe('OptionsListUtils', () => { expect(filteredOptions.recentReports.length).toBe(2); expect(filteredOptions.recentReports.at(0)?.text).toBe('Mister Fantastic'); - expect(filteredOptions.recentReports.at(1)?.text).toBe(`${'Mister Fantastic'}, ${'Invisible Woman'}`); + expect(filteredOptions.recentReports.at(1)?.text).toBe('Mister Fantastic, Invisible Woman'); }); it('should return the user to invite when the search value is a valid, non-existent email', () => { diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index 49532e84b8ba..e0eb8dcbc7a8 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -263,10 +263,10 @@ describe('ReportUtils', () => { isOwnPolicyExpenseChat: false, }; - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'} (archived)`); + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok (archived)'); return Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES).then(() => - expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe(`${'Ragnar Lothbrok'} (archivado)`), + expect(ReportUtils.getReportName(adminArchivedPolicyExpenseChat)).toBe('Ragnar Lothbrok (archivado)'), ); }); }); @@ -1114,7 +1114,7 @@ describe('ReportUtils', () => { it('Should use correct display name for participants', async () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, participantsPersonalDetails); - expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual(`${'(833) 240-3627'}, floki@vikings.net, Lagertha, Ragnar`); + expect(ReportUtils.getGroupChatName(fourParticipants, true)).toEqual('(833) 240-3627, floki@vikings.net, Lagertha, Ragnar'); }); }); From e36f20c20c2a3ea469d94702986be2f8c8c42421 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Fri, 6 Dec 2024 16:56:24 +0100 Subject: [PATCH 19/26] use of formatphonenumber --- tests/unit/OptionsListUtilsTest.ts | 1 - tests/unit/ReportUtilsTest.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/unit/OptionsListUtilsTest.ts b/tests/unit/OptionsListUtilsTest.ts index 747ae2cf1cda..cad6c010bb67 100644 --- a/tests/unit/OptionsListUtilsTest.ts +++ b/tests/unit/OptionsListUtilsTest.ts @@ -884,7 +884,6 @@ describe('OptionsListUtils', () => { const options = OptionsListUtils.getOptions({reports: OPTIONS.reports, personalDetails: OPTIONS.personalDetails}, {maxRecentReportsToShow: 5}); const filteredOptions = OptionsListUtils.filterOptions(options, '.com'); - expect(filteredOptions.recentReports.length).toBe(5); expect(filteredOptions.recentReports.at(0)?.text).toBe('Captain America'); // We expect that only personal details that are not in the reports are included here diff --git a/tests/unit/ReportUtilsTest.ts b/tests/unit/ReportUtilsTest.ts index e0eb8dcbc7a8..dc752ae73b1c 100644 --- a/tests/unit/ReportUtilsTest.ts +++ b/tests/unit/ReportUtilsTest.ts @@ -149,7 +149,7 @@ describe('ReportUtils', () => { reportID: '', participants: ReportUtils.buildParticipantsFromAccountIDs([currentUserAccountID, 1, 2, 3, 4]), }), - ).toBe(`Ragnar, floki@vikings.net, Lagertha, ${'(833) 240-3627'}`); + ).toBe('Ragnar, floki@vikings.net, Lagertha, (833) 240-3627'); }); describe('Default Policy Room', () => { From b05d47b541d3627451378dfc33de94da54fc88c0 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Sat, 7 Dec 2024 01:01:00 +0100 Subject: [PATCH 20/26] resolve conflict on profileavatar --- src/pages/settings/Profile/ProfileAvatar.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 91976214a718..08d953311876 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -19,7 +19,7 @@ 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 +37,6 @@ function ProfileAvatar({route}: ProfileAvatarProps) { { setTimeout(() => { From fa48b459840a759529ab48cf1287fda46cbb927f Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Sat, 7 Dec 2024 01:05:39 +0100 Subject: [PATCH 21/26] resolve conflict on profileavatar --- src/pages/settings/Profile/ProfileAvatar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 08d953311876..8c66f592d0d0 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -19,7 +19,7 @@ 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'); @@ -35,8 +35,8 @@ function ProfileAvatar({route}: ProfileAvatarProps) { return ( { setTimeout(() => { From 21da67d809020071722423ff4a93056e6382f150 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Sat, 7 Dec 2024 01:10:18 +0100 Subject: [PATCH 22/26] resolve conflict on profileavatar --- src/pages/settings/Profile/ProfileAvatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 8c66f592d0d0..661b44a6a653 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -19,7 +19,7 @@ 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'); From 6bdeffb19345640c311fce870a9ad2d918959d84 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Mon, 9 Dec 2024 17:02:34 +0100 Subject: [PATCH 23/26] fix phone number formatting issue --- .../settings/Profile/Contacts/ContactMethodDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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()} From b705118ebead590f2688e94da5fd7fc9ddebc5be Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Mon, 9 Dec 2024 18:44:15 +0100 Subject: [PATCH 24/26] fix phone number formatting issue --- src/libs/ReportActionsUtils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 { From 8e43fe113a2aeebed7bd1e95e542c7fba5bb0dd2 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Tue, 10 Dec 2024 18:53:02 +0100 Subject: [PATCH 25/26] fix phone number formatting issue --- src/pages/settings/Profile/ProfileAvatar.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index aa271ca3297a..74b88f419e1d 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,6 +1,5 @@ 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'; @@ -12,9 +11,8 @@ 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 ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps; +type ProfileAvatarProps = PlatformStackScreenProps; function ProfileAvatar({route}: ProfileAvatarProps) { const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); @@ -50,14 +48,4 @@ function ProfileAvatar({route}: ProfileAvatarProps) { 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; From d8cf63415184b591e6a1c14f062d3ffb210a7ab2 Mon Sep 17 00:00:00 2001 From: Kalydosos Date: Wed, 11 Dec 2024 08:58:57 +0100 Subject: [PATCH 26/26] fix phone number formatting --- src/pages/home/report/ReportActionItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 6a83920bb808..1ee361b45224 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -604,7 +604,7 @@ function ReportActionItem({ ); } else if (ReportActionsUtils.isReimbursementQueuedAction(action)) { const linkedReport = ReportUtils.isChatThread(report) ? parentReport : report; - const submitterDisplayName = LocalePhoneNumber.formatPhoneNumber(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);