From 854f4d9d04c9c8fa481bdb31d6db822f8bee91dd Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:39:44 +0530 Subject: [PATCH 01/19] update WorkspaceWorkflowsPayerPage to move away from onyx.connect --- .../workflows/WorkspaceWorkflowsPayerPage.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx index 1095f4dad122b..d4693fbe76ec5 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx @@ -11,7 +11,8 @@ import type {ListItem, Section} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import useOnyx from '@hooks/useOnyx'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -25,6 +26,7 @@ import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullsc import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; import {setWorkspacePayer} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type {PersonalDetailsList, PolicyEmployee} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -44,6 +46,7 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR const {translate} = useLocalize(); const policyName = policy?.name ?? ''; const {isOffline} = useNetwork(); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [searchTerm, setSearchTerm] = useState(''); @@ -83,13 +86,13 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR accountID, isSelected: isAuthorizedPayer, isDisabled: policyEmployee.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || !isEmptyObject(policyEmployee.errors), - text: formatPhoneNumber(getDisplayNameOrDefault(details)), - alternateText: formatPhoneNumber(details?.login ?? ''), + text: formatPhoneNumberWithCountryCode(getDisplayNameOrDefault(details), countryCodeByIP), + alternateText: formatPhoneNumberWithCountryCode(details?.login ?? '', countryCodeByIP), rightElement: roleBadge, icons: [ { source: details.avatar ?? FallbackAvatar, - name: formatPhoneNumber(details?.login ?? ''), + name: formatPhoneNumberWithCountryCode(details?.login ?? '', countryCodeByIP), type: CONST.ICON_TYPE_AVATAR, id: accountID, }, @@ -105,7 +108,7 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR } }); return [policyAdminDetails, authorizedPayerDetails]; - }, [personalDetails, policy?.employeeList, translate, policy?.achAccount?.reimburser, isDeletedPolicyEmployee, policy?.owner, policy?.pendingFields?.reimburser]); + }, [personalDetails, policy?.employeeList, translate, policy?.achAccount?.reimburser, isDeletedPolicyEmployee, policy?.owner, policy?.pendingFields?.reimburser, countryCodeByIP]); const sections: MembersSection[] = useMemo(() => { const sectionsArray: MembersSection[] = []; From 65db4438c13c81f15486dd3036dd6731118a88d4 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:40:01 +0530 Subject: [PATCH 02/19] Update Expensify card page to pass countryCodeByIP --- src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index 26db8f748638d..e53dc440f2850 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -11,7 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getHeaderMessage, getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils'; import {getPersonalDetailByEmail, getUserNameByEmail} from '@libs/PersonalDetailsUtils'; import {isDeletedPolicyEmployee} from '@libs/PolicyUtils'; @@ -34,6 +34,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const policyID = policy?.id; const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); @@ -92,7 +93,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { icons: [ { source: personalDetail?.avatar ?? Expensicons.FallbackAvatar, - name: formatPhoneNumber(email), + name: formatPhoneNumberWithCountryCode(email, countryCodeByIP), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, From 7f6d9e403442f6e3a13a841b37207fa5d13df96a Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:40:29 +0530 Subject: [PATCH 03/19] Update Comapny card page to pass countryCodeByIP --- src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index 42c302f98143b..b6d39f5245359 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -16,7 +16,7 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {getDefaultCardName, getFilteredCardList, hasOnlyOneCardToAssign} from '@libs/CardUtils'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getHeaderMessage, getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import {isDeletedPolicyEmployee} from '@libs/PolicyUtils'; @@ -42,6 +42,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true}); const [list] = useCardsList(policy?.id, feed); const [cardFeeds] = useCardFeeds(policy?.id); @@ -130,7 +131,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { icons: [ { source: personalDetail?.avatar ?? Expensicons.FallbackAvatar, - name: formatPhoneNumber(email), + name: formatPhoneNumberWithCountryCode(email, countryCodeByIP), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, From bb9dcae1aab9ec2e6c6b4faf5be779bb2ef545fc Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:41:10 +0530 Subject: [PATCH 04/19] update members page to use countryCodeByIP --- src/pages/workspace/WorkspaceMembersPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 3c702ec0542c9..f6a6211f7081c 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -45,7 +45,7 @@ import { } from '@libs/actions/Policy/Member'; import {removeApprovalWorkflow as removeApprovalWorkflowAction, updateApprovalWorkflow} from '@libs/actions/Workflow'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; -import {formatPhoneNumber as formatPhoneNumberUtil} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -111,7 +111,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers const prevPersonalDetails = usePrevious(personalDetails); const {translate, formatPhoneNumber} = useLocalize(); const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const filterEmployees = useCallback( (employee?: PolicyEmployee) => { if (!employee?.email) { @@ -165,7 +165,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers if (!approverAccountID) { return translate('workspace.people.removeMembersPrompt', { count: selectedEmployees.length, - memberName: formatPhoneNumberUtil(getPersonalDetailsByIDs({accountIDs: selectedEmployees, currentUserAccountID}).at(0)?.displayName ?? ''), + memberName: formatPhoneNumberWithCountryCode(getPersonalDetailsByIDs({accountIDs: selectedEmployees, currentUserAccountID}).at(0)?.displayName ?? '', countryCodeByIP), }); } return translate('workspace.people.removeMembersWarningPrompt', { From 0e64758a03d099c3495a73cb6e44b1fd633fa45f Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:41:46 +0530 Subject: [PATCH 05/19] update new task page to use countryCodeByIP --- src/pages/tasks/NewTaskPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/tasks/NewTaskPage.tsx b/src/pages/tasks/NewTaskPage.tsx index 391750de3717c..08f9f862000a1 100644 --- a/src/pages/tasks/NewTaskPage.tsx +++ b/src/pages/tasks/NewTaskPage.tsx @@ -15,7 +15,7 @@ import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useThemeStyles from '@hooks/useThemeStyles'; import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import {createTaskAndNavigate, dismissModalAndClearOutTaskInfo, getAssignee, getShareDestination, setShareDestinationValue} from '@libs/actions/Task'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; @@ -33,6 +33,7 @@ function NewTaskPage({route}: NewTaskPageProps) { const [task] = useOnyx(ONYXKEYS.TASK, {canBeMissing: true}); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const styles = useThemeStyles(); const {translate} = useLocalize(); const assignee = useMemo(() => getAssignee(task?.assigneeAccountID ?? CONST.DEFAULT_NUMBER_ID, personalDetails), [task?.assigneeAccountID, personalDetails]); @@ -151,7 +152,7 @@ function NewTaskPage({route}: NewTaskPageProps) { Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE.getRoute(backTo))} shouldShowRightIcon From 1ecf91139d4fd1d1e8600effe72f8b00662d29f9 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:42:21 +0530 Subject: [PATCH 06/19] update security settings page to use countryCodeByIP --- src/pages/settings/Security/SecuritySettingsPage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 5765a69e6e569..8fd6dda33fbdc 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -32,7 +32,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegateErrorsByField, openSecuritySettingsPage, removeDelegate} from '@libs/actions/Delegate'; import {getLatestError} from '@libs/ErrorUtils'; import getClickedTargetLocation from '@libs/getClickedTargetLocation'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import type {AnchorPosition} from '@styles/index'; @@ -61,7 +61,7 @@ function SecuritySettingsPage() { const {shouldUseNarrowLayout} = useResponsiveLayout(); const {windowWidth} = useWindowDimensions(); const personalDetails = usePersonalDetails(); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION, {canBeMissing: true}); @@ -229,7 +229,7 @@ function SecuritySettingsPage() { Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(email, role, true)); }; - const formattedEmail = formatPhoneNumber(email); + const formattedEmail = formatPhoneNumberWithCountryCode(email, countryCodeByIP); return { title: personalDetail?.displayName ?? formattedEmail, description: personalDetail?.displayName ? formattedEmail : '', From 0b58194dbb71a0b899974411abeac5c61a65de67 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:42:41 +0530 Subject: [PATCH 07/19] update security settings page to use countryCodeByIP --- src/pages/settings/Security/SecuritySettingsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 8fd6dda33fbdc..2b97a1120aa62 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -257,7 +257,7 @@ function SecuritySettingsPage() { () => delegators.map(({email, role}) => { const personalDetail = getPersonalDetailByEmail(email); - const formattedEmail = formatPhoneNumber(email); + const formattedEmail = formatPhoneNumberWithCountryCode(email, countryCodeByIP); return { title: personalDetail?.displayName ?? formattedEmail, From 13362c858f840f3820dce528c5701d8f648ee3ed Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:43:40 +0530 Subject: [PATCH 08/19] update delegate confirmation page to use countryCodeByIP --- .../settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index ec4c275a7f0ac..0cab8ed7231d0 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -12,7 +12,7 @@ import useBeforeRemove from '@hooks/useBeforeRemove'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {useCustomHistoryParam} from '@libs/Navigation/AppNavigator/customHistory'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -22,6 +22,8 @@ import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import DelegateMagicCodeModal from './DelegateMagicCodeModal'; +import useOnyx from '@hooks/useOnyx'; +import ONYXKEYS from '@src/ONYXKEYS'; type ConfirmDelegatePageProps = PlatformStackScreenProps; @@ -33,13 +35,13 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { const role = route.params.role as ValueOf; const {isOffline} = useNetwork(); const [shouldDisableModalAnimation, setShouldDisableModalAnimation] = useState(true); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useCustomHistoryParam(); const [shouldShowLoading, setShouldShowLoading] = useState(isValidateCodeActionModalVisible ?? false); const personalDetails = getPersonalDetailByEmail(login); const avatarIcon = personalDetails?.avatar ?? FallbackAvatar; - const formattedLogin = formatPhoneNumber(login ?? ''); + const formattedLogin = formatPhoneNumberWithCountryCode(login ?? '', countryCodeByIP); const displayName = personalDetails?.displayName ?? formattedLogin; useBeforeRemove(() => setIsValidateCodeActionModalVisible(false)); From a3ddf11eb127486a85524d2740c5e8bc24f4722f Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:44:26 +0530 Subject: [PATCH 09/19] update profile page to use countryCodeByIP --- src/pages/settings/Profile/ProfilePage.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx index 7c4184d049913..d157b60942db3 100755 --- a/src/pages/settings/Profile/ProfilePage.tsx +++ b/src/pages/settings/Profile/ProfilePage.tsx @@ -23,7 +23,7 @@ import useScrollEnabled from '@hooks/useScrollEnabled'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsSplitNavigatorParamList} from '@libs/Navigation/types'; @@ -50,7 +50,7 @@ function ProfilePage() { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const route = useRoute>(); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: false}); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const getPronouns = (): string => { const pronounsKey = currentUserPersonalDetails?.pronouns?.replace(CONST.PRONOUNS.PREFIX, '') ?? ''; return pronounsKey ? translate(`pronouns.${pronounsKey}` as TranslationPaths) : translate('profilePage.selectYourPronouns'); @@ -73,7 +73,7 @@ function ProfilePage() { }, { description: translate('contacts.contactMethod'), - title: formatPhoneNumber(currentUserPersonalDetails?.login ?? ''), + title: formatPhoneNumberWithCountryCode(currentUserPersonalDetails?.login ?? '', countryCodeByIP), pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route, brickRoadIndicator: contactMethodBrickRoadIndicator, }, From 191670b3938e0258c31d4912a27ea46ac77e2b1c Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:45:10 +0530 Subject: [PATCH 10/19] fix profile avatar to use countryCodeByIP --- src/pages/settings/Profile/ProfileAvatar.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 34327a2e98b73..00e4fa66f0273 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; import AttachmentModal from '@components/AttachmentModal'; import useOnyx from '@hooks/useOnyx'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; @@ -24,7 +24,7 @@ function ProfileAvatar({route}: ProfileAvatarProps) { const accountID = Number(route.params.accountID ?? CONST.DEFAULT_NUMBER_ID); const isLoading = personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length); const displayName = getDisplayNameOrDefault(personalDetail); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); useEffect(() => { if (!isValidAccountRoute(Number(accountID)) ?? !!avatarURL) { return; @@ -34,7 +34,7 @@ function ProfileAvatar({route}: ProfileAvatarProps) { return ( Navigation.goBack(route.params?.backTo)} From 2dd48be03cbef1ffdf74616ef169b086151d6bad Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:45:51 +0530 Subject: [PATCH 11/19] fix profile avatar modal content to use countryCodeByIP --- .../routes/ProfileAvatarModalContent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx index ef2c2182af516..9b7087b171783 100644 --- a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useMemo} from 'react'; import useOnyx from '@hooks/useOnyx'; import {openPublicProfilePage} from '@libs/actions/PersonalDetails'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; import {getFullSizeAvatar} from '@libs/UserUtils'; import {isValidAccountRoute} from '@libs/ValidationUtils'; @@ -20,7 +20,7 @@ function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenPro const avatarURL = personalDetail?.avatar ?? ''; const displayName = getDisplayNameOrDefault(personalDetail); const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); - + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); useEffect(() => { if (!isValidAccountRoute(accountID)) { return; @@ -33,7 +33,7 @@ function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenPro ({ source: getFullSizeAvatar(avatarURL, accountID), isLoading: !!(personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length)), - headerTitle: formatPhoneNumber(displayName), + headerTitle: formatPhoneNumberWithCountryCode(displayName, countryCodeByIP), originalFileName: personalDetail?.originalFileName ?? '', shouldShowNotFoundPage: !avatarURL, maybeIcon: true, From 0f8a595124b3954f398d73e4fa2761e6f02285e1 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:52:31 +0530 Subject: [PATCH 12/19] fix prettier --- src/pages/settings/Profile/ProfilePage.tsx | 2 +- .../settings/Security/AddDelegate/ConfirmDelegatePage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx index d157b60942db3..747d5de0811ef 100755 --- a/src/pages/settings/Profile/ProfilePage.tsx +++ b/src/pages/settings/Profile/ProfilePage.tsx @@ -50,7 +50,7 @@ function ProfilePage() { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const route = useRoute>(); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: false}); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const getPronouns = (): string => { const pronounsKey = currentUserPersonalDetails?.pronouns?.replace(CONST.PRONOUNS.PREFIX, '') ?? ''; return pronounsKey ? translate(`pronouns.${pronounsKey}` as TranslationPaths) : translate('profilePage.selectYourPronouns'); diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index 0cab8ed7231d0..fb9d970fe1470 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -11,6 +11,7 @@ import Text from '@components/Text'; import useBeforeRemove from '@hooks/useBeforeRemove'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {useCustomHistoryParam} from '@libs/Navigation/AppNavigator/customHistory'; @@ -19,11 +20,10 @@ import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavig import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import DelegateMagicCodeModal from './DelegateMagicCodeModal'; -import useOnyx from '@hooks/useOnyx'; -import ONYXKEYS from '@src/ONYXKEYS'; type ConfirmDelegatePageProps = PlatformStackScreenProps; From 4f7ec32a26bf4aa76f8f29369263ecdd2dcb14fd Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 01:54:42 +0530 Subject: [PATCH 13/19] fix failing esLint --- .../AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx | 2 +- src/pages/workspace/WorkspaceMembersPage.tsx | 2 +- src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx | 2 +- src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx index 9b7087b171783..a33db6162c12b 100644 --- a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx @@ -38,7 +38,7 @@ function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenPro shouldShowNotFoundPage: !avatarURL, maybeIcon: true, }) satisfies Partial, - [accountID, avatarURL, displayName, isLoadingApp, personalDetail, personalDetailsMetadata], + [accountID, avatarURL, displayName, isLoadingApp, personalDetail, personalDetailsMetadata, countryCodeByIP], ); return ( diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index f6a6211f7081c..3f72b42931381 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -172,7 +172,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers memberName: getDisplayNameForParticipant({accountID: approverAccountID}), ownerName: getDisplayNameForParticipant({accountID: policy?.ownerAccountID}), }); - }, [selectedEmployees, translate, policy, currentUserAccountID]); + }, [selectedEmployees, translate, policy, currentUserAccountID, countryCodeByIP]); /** * Get filtered personalDetails list with current employeeList */ diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index b6d39f5245359..500a79387630b 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -142,7 +142,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { membersList = sortAlphabetically(membersList, 'text'); return membersList; - }, [isOffline, policy?.employeeList, selectedMember]); + }, [isOffline, policy?.employeeList, selectedMember, countryCodeByIP]); const sections = useMemo(() => { if (!debouncedSearchTerm) { diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index e53dc440f2850..6ee8d7f841fdd 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -104,7 +104,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { membersList = sortAlphabetically(membersList, 'text'); return membersList; - }, [isOffline, policy?.employeeList]); + }, [isOffline, policy?.employeeList, countryCodeByIP]); const sections = useMemo(() => { if (!debouncedSearchTerm) { From 190bfe4a70d03e35b2e326defd3821af87b4ab92 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 11:51:12 +0530 Subject: [PATCH 14/19] optimise: make use of formatPhoneNumber from useLocalize() function and revert previous usage of useOnyx --- src/components/LocaleContextProvider.tsx | 5 +++-- .../routes/ProfileAvatarModalContent.tsx | 9 ++++----- src/pages/settings/Profile/ProfileAvatar.tsx | 6 +++--- src/pages/settings/Profile/ProfilePage.tsx | 6 ++---- .../Security/AddDelegate/ConfirmDelegatePage.tsx | 8 ++------ .../settings/Security/SecuritySettingsPage.tsx | 8 +++----- src/pages/tasks/NewTaskPage.tsx | 6 ++---- src/pages/workspace/WorkspaceMembersPage.tsx | 6 ++---- .../companyCards/assignCard/AssigneeStep.tsx | 8 +++----- .../expensifyCard/issueNew/AssigneeStep.tsx | 8 +++----- .../workflows/WorkspaceWorkflowsPayerPage.tsx | 14 +++++--------- 11 files changed, 32 insertions(+), 52 deletions(-) diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index e29e6ecc84d88..555bfd78dd165 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -3,7 +3,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails' import useOnyx from '@hooks/useOnyx'; import DateUtils from '@libs/DateUtils'; import {fromLocaleDigit as fromLocaleDigitLocaleDigitUtils, toLocaleDigit as toLocaleDigitLocaleDigitUtils, toLocaleOrdinal as toLocaleOrdinalLocaleDigitUtils} from '@libs/LocaleDigitUtils'; -import {formatPhoneNumber as formatPhoneNumberLocalePhoneNumber} from '@libs/LocalePhoneNumber'; +import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {translate as translateLocalize} from '@libs/Localize'; import {format} from '@libs/NumberFormatUtils'; import IntlStore from '@src/languages/IntlStore'; @@ -66,6 +66,7 @@ const LocaleContext = createContext({ function LocaleContextProvider({children}: LocaleContextProviderProps) { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [areTranslationsLoading = true] = useOnyx(ONYXKEYS.ARE_TRANSLATIONS_LOADING, {initWithStoredValues: false, canBeMissing: true}); + const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [currentLocale, setCurrentLocale] = useState(() => IntlStore.getCurrentLocale()); useEffect(() => { @@ -106,7 +107,7 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) { [currentLocale, selectedTimezone], ); - const formatPhoneNumber = useMemo(() => (phoneNumber) => formatPhoneNumberLocalePhoneNumber(phoneNumber), []); + const formatPhoneNumber = useMemo(() => (phoneNumber) => formatPhoneNumberWithCountryCode(phoneNumber, countryCodeByIP), [countryCodeByIP]); const toLocaleDigit = useMemo(() => (digit) => toLocaleDigitLocaleDigitUtils(currentLocale, digit), [currentLocale]); diff --git a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx index a33db6162c12b..0e94e91de5ee9 100644 --- a/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx +++ b/src/pages/media/AttachmentModalScreen/routes/ProfileAvatarModalContent.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useMemo} from 'react'; +import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import {openPublicProfilePage} from '@libs/actions/PersonalDetails'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; import {getFullSizeAvatar} from '@libs/UserUtils'; import {isValidAccountRoute} from '@libs/ValidationUtils'; @@ -13,14 +13,13 @@ import ONYXKEYS from '@src/ONYXKEYS'; function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenProps) { const {accountID = CONST.DEFAULT_NUMBER_ID} = route.params; - + const {formatPhoneNumber} = useLocalize(); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}); const personalDetail = personalDetails?.[accountID]; const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA, {canBeMissing: false}); const avatarURL = personalDetail?.avatar ?? ''; const displayName = getDisplayNameOrDefault(personalDetail); const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); useEffect(() => { if (!isValidAccountRoute(accountID)) { return; @@ -33,12 +32,12 @@ function ProfileAvatarModalContent({navigation, route}: AttachmentModalScreenPro ({ source: getFullSizeAvatar(avatarURL, accountID), isLoading: !!(personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length)), - headerTitle: formatPhoneNumberWithCountryCode(displayName, countryCodeByIP), + headerTitle: formatPhoneNumber(displayName), originalFileName: personalDetail?.originalFileName ?? '', shouldShowNotFoundPage: !avatarURL, maybeIcon: true, }) satisfies Partial, - [accountID, avatarURL, displayName, isLoadingApp, personalDetail, personalDetailsMetadata, countryCodeByIP], + [accountID, avatarURL, displayName, isLoadingApp, personalDetail, personalDetailsMetadata, formatPhoneNumber], ); return ( diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx index 00e4fa66f0273..fbfd9b2b02f40 100644 --- a/src/pages/settings/Profile/ProfileAvatar.tsx +++ b/src/pages/settings/Profile/ProfileAvatar.tsx @@ -1,7 +1,7 @@ import React, {useEffect} from 'react'; import AttachmentModal from '@components/AttachmentModal'; +import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {AuthScreensParamList} from '@libs/Navigation/types'; @@ -24,7 +24,7 @@ function ProfileAvatar({route}: ProfileAvatarProps) { const accountID = Number(route.params.accountID ?? CONST.DEFAULT_NUMBER_ID); const isLoading = personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length); const displayName = getDisplayNameOrDefault(personalDetail); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); + const {formatPhoneNumber} = useLocalize(); useEffect(() => { if (!isValidAccountRoute(Number(accountID)) ?? !!avatarURL) { return; @@ -34,7 +34,7 @@ function ProfileAvatar({route}: ProfileAvatarProps) { return ( Navigation.goBack(route.params?.backTo)} diff --git a/src/pages/settings/Profile/ProfilePage.tsx b/src/pages/settings/Profile/ProfilePage.tsx index 747d5de0811ef..d2b3b05d54afc 100755 --- a/src/pages/settings/Profile/ProfilePage.tsx +++ b/src/pages/settings/Profile/ProfilePage.tsx @@ -23,7 +23,6 @@ import useScrollEnabled from '@hooks/useScrollEnabled'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsSplitNavigatorParamList} from '@libs/Navigation/types'; @@ -41,7 +40,7 @@ function ProfilePage() { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {safeAreaPaddingBottomStyle} = useSafeAreaPaddings(); const scrollEnabled = useScrollEnabled(); @@ -50,7 +49,6 @@ function ProfilePage() { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const route = useRoute>(); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: false}); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const getPronouns = (): string => { const pronounsKey = currentUserPersonalDetails?.pronouns?.replace(CONST.PRONOUNS.PREFIX, '') ?? ''; return pronounsKey ? translate(`pronouns.${pronounsKey}` as TranslationPaths) : translate('profilePage.selectYourPronouns'); @@ -73,7 +71,7 @@ function ProfilePage() { }, { description: translate('contacts.contactMethod'), - title: formatPhoneNumberWithCountryCode(currentUserPersonalDetails?.login ?? '', countryCodeByIP), + title: formatPhoneNumber(currentUserPersonalDetails?.login ?? ''), pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route, brickRoadIndicator: contactMethodBrickRoadIndicator, }, diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx index fb9d970fe1470..bdd9b735b61bc 100644 --- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx +++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx @@ -11,16 +11,13 @@ import Text from '@components/Text'; import useBeforeRemove from '@hooks/useBeforeRemove'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {useCustomHistoryParam} from '@libs/Navigation/AppNavigator/customHistory'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import DelegateMagicCodeModal from './DelegateMagicCodeModal'; @@ -28,20 +25,19 @@ import DelegateMagicCodeModal from './DelegateMagicCodeModal'; type ConfirmDelegatePageProps = PlatformStackScreenProps; function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) { - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const login = route.params.login; const role = route.params.role as ValueOf; const {isOffline} = useNetwork(); const [shouldDisableModalAnimation, setShouldDisableModalAnimation] = useState(true); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useCustomHistoryParam(); const [shouldShowLoading, setShouldShowLoading] = useState(isValidateCodeActionModalVisible ?? false); const personalDetails = getPersonalDetailByEmail(login); const avatarIcon = personalDetails?.avatar ?? FallbackAvatar; - const formattedLogin = formatPhoneNumberWithCountryCode(login ?? '', countryCodeByIP); + const formattedLogin = formatPhoneNumber(login ?? ''); const displayName = personalDetails?.displayName ?? formattedLogin; useBeforeRemove(() => setIsValidateCodeActionModalVisible(false)); diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx index 2b97a1120aa62..3ec9239379683 100644 --- a/src/pages/settings/Security/SecuritySettingsPage.tsx +++ b/src/pages/settings/Security/SecuritySettingsPage.tsx @@ -32,7 +32,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegateErrorsByField, openSecuritySettingsPage, removeDelegate} from '@libs/actions/Delegate'; import {getLatestError} from '@libs/ErrorUtils'; import getClickedTargetLocation from '@libs/getClickedTargetLocation'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import type {AnchorPosition} from '@styles/index'; @@ -56,12 +55,11 @@ type BaseMenuItemType = { function SecuritySettingsPage() { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const waitForNavigate = useWaitForNavigation(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {windowWidth} = useWindowDimensions(); const personalDetails = usePersonalDetails(); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const [privateSubscription] = useOnyx(ONYXKEYS.NVP_PRIVATE_SUBSCRIPTION, {canBeMissing: true}); @@ -229,7 +227,7 @@ function SecuritySettingsPage() { Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(email, role, true)); }; - const formattedEmail = formatPhoneNumberWithCountryCode(email, countryCodeByIP); + const formattedEmail = formatPhoneNumber(email); return { title: personalDetail?.displayName ?? formattedEmail, description: personalDetail?.displayName ? formattedEmail : '', @@ -257,7 +255,7 @@ function SecuritySettingsPage() { () => delegators.map(({email, role}) => { const personalDetail = getPersonalDetailByEmail(email); - const formattedEmail = formatPhoneNumberWithCountryCode(email, countryCodeByIP); + const formattedEmail = formatPhoneNumber(email); return { title: personalDetail?.displayName ?? formattedEmail, diff --git a/src/pages/tasks/NewTaskPage.tsx b/src/pages/tasks/NewTaskPage.tsx index 08f9f862000a1..3e2808292ea1a 100644 --- a/src/pages/tasks/NewTaskPage.tsx +++ b/src/pages/tasks/NewTaskPage.tsx @@ -15,7 +15,6 @@ import useSafeAreaPaddings from '@hooks/useSafeAreaPaddings'; import useThemeStyles from '@hooks/useThemeStyles'; import blurActiveElement from '@libs/Accessibility/blurActiveElement'; import {createTaskAndNavigate, dismissModalAndClearOutTaskInfo, getAssignee, getShareDestination, setShareDestinationValue} from '@libs/actions/Task'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {NewTaskNavigatorParamList} from '@libs/Navigation/types'; @@ -33,9 +32,8 @@ function NewTaskPage({route}: NewTaskPageProps) { const [task] = useOnyx(ONYXKEYS.TASK, {canBeMissing: true}); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false}); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const assignee = useMemo(() => getAssignee(task?.assigneeAccountID ?? CONST.DEFAULT_NUMBER_ID, personalDetails), [task?.assigneeAccountID, personalDetails]); const assigneeTooltipDetails = getDisplayNamesWithTooltips(getPersonalDetailsForAccountIDs(task?.assigneeAccountID ? [task.assigneeAccountID] : [], personalDetails), false); const shareDestination = useMemo( @@ -152,7 +150,7 @@ function NewTaskPage({route}: NewTaskPageProps) { Navigation.navigate(ROUTES.NEW_TASK_ASSIGNEE.getRoute(backTo))} shouldShowRightIcon diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index 3f72b42931381..abdc93026994d 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -45,7 +45,6 @@ import { } from '@libs/actions/Policy/Member'; import {removeApprovalWorkflow as removeApprovalWorkflowAction, updateApprovalWorkflow} from '@libs/actions/Workflow'; import {canUseTouchScreen} from '@libs/DeviceCapabilities'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -111,7 +110,6 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers const prevPersonalDetails = usePrevious(personalDetails); const {translate, formatPhoneNumber} = useLocalize(); const {isAccountLocked, showLockedAccountModal} = useContext(LockedAccountContext); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const filterEmployees = useCallback( (employee?: PolicyEmployee) => { if (!employee?.email) { @@ -165,14 +163,14 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers if (!approverAccountID) { return translate('workspace.people.removeMembersPrompt', { count: selectedEmployees.length, - memberName: formatPhoneNumberWithCountryCode(getPersonalDetailsByIDs({accountIDs: selectedEmployees, currentUserAccountID}).at(0)?.displayName ?? '', countryCodeByIP), + memberName: formatPhoneNumber(getPersonalDetailsByIDs({accountIDs: selectedEmployees, currentUserAccountID}).at(0)?.displayName ?? ''), }); } return translate('workspace.people.removeMembersWarningPrompt', { memberName: getDisplayNameForParticipant({accountID: approverAccountID}), ownerName: getDisplayNameForParticipant({accountID: policy?.ownerAccountID}), }); - }, [selectedEmployees, translate, policy, currentUserAccountID, countryCodeByIP]); + }, [selectedEmployees, translate, policy, currentUserAccountID, formatPhoneNumber]); /** * Get filtered personalDetails list with current employeeList */ diff --git a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx index 500a79387630b..23096bedd24ec 100644 --- a/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx +++ b/src/pages/workspace/companyCards/assignCard/AssigneeStep.tsx @@ -16,7 +16,6 @@ import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {getDefaultCardName, getFilteredCardList, hasOnlyOneCardToAssign} from '@libs/CardUtils'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getHeaderMessage, getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import {isDeletedPolicyEmployee} from '@libs/PolicyUtils'; @@ -39,10 +38,9 @@ type AssigneeStepProps = { }; function AssigneeStep({policy, feed}: AssigneeStepProps) { - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [assignCard] = useOnyx(ONYXKEYS.ASSIGN_CARD, {canBeMissing: true}); const [list] = useCardsList(policy?.id, feed); const [cardFeeds] = useCardFeeds(policy?.id); @@ -131,7 +129,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { icons: [ { source: personalDetail?.avatar ?? Expensicons.FallbackAvatar, - name: formatPhoneNumberWithCountryCode(email, countryCodeByIP), + name: formatPhoneNumber(email), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, @@ -142,7 +140,7 @@ function AssigneeStep({policy, feed}: AssigneeStepProps) { membersList = sortAlphabetically(membersList, 'text'); return membersList; - }, [isOffline, policy?.employeeList, selectedMember, countryCodeByIP]); + }, [isOffline, policy?.employeeList, selectedMember, formatPhoneNumber]); const sections = useMemo(() => { if (!debouncedSearchTerm) { diff --git a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx index 6ee8d7f841fdd..701ce32219953 100644 --- a/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx +++ b/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx @@ -11,7 +11,6 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import {getHeaderMessage, getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils'; import {getPersonalDetailByEmail, getUserNameByEmail} from '@libs/PersonalDetailsUtils'; import {isDeletedPolicyEmployee} from '@libs/PolicyUtils'; @@ -31,10 +30,9 @@ type AssigneeStepProps = { }; function AssigneeStep({policy}: AssigneeStepProps) { - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const policyID = policy?.id; const [issueNewCard] = useOnyx(`${ONYXKEYS.COLLECTION.ISSUE_NEW_EXPENSIFY_CARD}${policyID}`, {canBeMissing: true}); @@ -93,7 +91,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { icons: [ { source: personalDetail?.avatar ?? Expensicons.FallbackAvatar, - name: formatPhoneNumberWithCountryCode(email, countryCodeByIP), + name: formatPhoneNumber(email), type: CONST.ICON_TYPE_AVATAR, id: personalDetail?.accountID, }, @@ -104,7 +102,7 @@ function AssigneeStep({policy}: AssigneeStepProps) { membersList = sortAlphabetically(membersList, 'text'); return membersList; - }, [isOffline, policy?.employeeList, countryCodeByIP]); + }, [isOffline, policy?.employeeList, formatPhoneNumber]); const sections = useMemo(() => { if (!debouncedSearchTerm) { diff --git a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx index d4693fbe76ec5..379aef8bc4e0a 100644 --- a/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx +++ b/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx @@ -11,8 +11,6 @@ import type {ListItem, Section} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; -import useOnyx from '@hooks/useOnyx'; -import {formatPhoneNumberWithCountryCode} from '@libs/LocalePhoneNumber'; import Log from '@libs/Log'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; @@ -26,7 +24,6 @@ import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullsc import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading'; import {setWorkspacePayer} from '@userActions/Policy/Policy'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; import type {PersonalDetailsList, PolicyEmployee} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -43,10 +40,9 @@ type MemberOption = Omit & {accountID: number}; type MembersSection = SectionListData>; function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingReportData = true}: WorkspaceWorkflowsPayerPageProps) { - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const policyName = policy?.name ?? ''; const {isOffline} = useNetwork(); - const [countryCodeByIP = 1] = useOnyx(ONYXKEYS.COUNTRY_CODE, {canBeMissing: true}); const [searchTerm, setSearchTerm] = useState(''); @@ -86,13 +82,13 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR accountID, isSelected: isAuthorizedPayer, isDisabled: policyEmployee.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || !isEmptyObject(policyEmployee.errors), - text: formatPhoneNumberWithCountryCode(getDisplayNameOrDefault(details), countryCodeByIP), - alternateText: formatPhoneNumberWithCountryCode(details?.login ?? '', countryCodeByIP), + text: formatPhoneNumber(getDisplayNameOrDefault(details)), + alternateText: formatPhoneNumber(details?.login ?? ''), rightElement: roleBadge, icons: [ { source: details.avatar ?? FallbackAvatar, - name: formatPhoneNumberWithCountryCode(details?.login ?? '', countryCodeByIP), + name: formatPhoneNumber(details?.login ?? ''), type: CONST.ICON_TYPE_AVATAR, id: accountID, }, @@ -108,7 +104,7 @@ function WorkspaceWorkflowsPayerPage({route, policy, personalDetails, isLoadingR } }); return [policyAdminDetails, authorizedPayerDetails]; - }, [personalDetails, policy?.employeeList, translate, policy?.achAccount?.reimburser, isDeletedPolicyEmployee, policy?.owner, policy?.pendingFields?.reimburser, countryCodeByIP]); + }, [personalDetails, policy?.employeeList, translate, policy?.achAccount?.reimburser, isDeletedPolicyEmployee, policy?.owner, policy?.pendingFields?.reimburser, formatPhoneNumber]); const sections: MembersSection[] = useMemo(() => { const sectionsArray: MembersSection[] = []; From 79afefe7db9bfa2686bd4f21148cee846c4c8789 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 11:57:04 +0530 Subject: [PATCH 15/19] extract formatPhoneNumber from useLocalize --- src/components/AccountSwitcher.tsx | 3 +-- .../HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx | 3 ++- src/components/SelectionList/Search/CardListItemHeader.tsx | 3 +-- src/components/SelectionList/Search/MemberListItemHeader.tsx | 3 +-- .../UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx | 3 +-- 5 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 149856430d8a5..834cf97e5d36b 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -12,7 +12,6 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import {clearDelegatorErrors, connect, disconnect} from '@libs/actions/Delegate'; import {close} from '@libs/actions/Modal'; import {getLatestError} from '@libs/ErrorUtils'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils'; import TextWithEmojiFragment from '@pages/home/report/comment/TextWithEmojiFragment'; import variables from '@styles/variables'; @@ -41,7 +40,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const styles = useThemeStyles(); const theme = useTheme(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx index 027e735e6b80d..d42e55a326838 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx @@ -11,10 +11,10 @@ import Text from '@components/Text'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; +import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import {getAccountIDsByLogins, getDisplayNameOrDefault, getShortMentionIfFound} from '@libs/PersonalDetailsUtils'; import {isArchivedNonExpenseReport} from '@libs/ReportUtils'; @@ -30,6 +30,7 @@ type MentionUserRendererProps = WithCurrentUserPersonalDetailsProps & CustomRend function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersonalDetails, ...defaultRendererProps}: MentionUserRendererProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {formatPhoneNumber} = useLocalize(); const htmlAttribAccountID = tnode.attributes.accountid; const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); const htmlAttributeAccountID = tnode.attributes.accountid; diff --git a/src/components/SelectionList/Search/CardListItemHeader.tsx b/src/components/SelectionList/Search/CardListItemHeader.tsx index 15f0b818a844f..cf895df1d9298 100644 --- a/src/components/SelectionList/Search/CardListItemHeader.tsx +++ b/src/components/SelectionList/Search/CardListItemHeader.tsx @@ -11,7 +11,6 @@ import useTheme from '@hooks/useTheme'; import useThemeIllustrations from '@hooks/useThemeIllustrations'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCardFeedIcon} from '@libs/CardUtils'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -42,7 +41,7 @@ function CardListItemHeader({card: cardItem, onCheckboxP const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const illustrations = useThemeIllustrations(); const formattedDisplayName = useMemo(() => formatPhoneNumber(getDisplayNameOrDefault(cardItem)), [cardItem]); diff --git a/src/components/SelectionList/Search/MemberListItemHeader.tsx b/src/components/SelectionList/Search/MemberListItemHeader.tsx index b33177d1855d4..f243fda4169bb 100644 --- a/src/components/SelectionList/Search/MemberListItemHeader.tsx +++ b/src/components/SelectionList/Search/MemberListItemHeader.tsx @@ -7,7 +7,6 @@ import TextWithTooltip from '@components/TextWithTooltip'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; import CONST from '@src/CONST'; @@ -27,7 +26,7 @@ type MemberListItemHeaderProps = { function MemberListItemHeader({member: memberItem, onCheckboxPress, isDisabled, canSelectMultiple}: MemberListItemHeaderProps) { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const [formattedDisplayName, formattedLogin] = useMemo(() => [formatPhoneNumber(getDisplayNameOrDefault(memberItem)), formatPhoneNumber(memberItem.login ?? '')], [memberItem]); diff --git a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx index fbb6d01264d36..380149c1235d8 100644 --- a/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx +++ b/src/components/UserDetailsTooltip/BaseUserDetailsTooltip/index.tsx @@ -10,14 +10,13 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import {isAnonymousUser} from '@libs/actions/Session'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import {getUserDetailTooltipText} from '@libs/ReportUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; function BaseUserDetailsTooltip({accountID, fallbackUserDetails, icon, delegateAccountID, shiftHorizontal, children}: UserDetailsTooltipProps) { const styles = useThemeStyles(); - const {translate} = useLocalize(); + const {translate, formatPhoneNumber} = useLocalize(); const personalDetails = usePersonalDetails(); const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true}); const isCurrentUserAnonymous = session?.accountID === accountID && isAnonymousUser(session); From 5779a1840cc260c7839e80d20a6b7e3c8669251b Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 12:06:31 +0530 Subject: [PATCH 16/19] add dependency to useMemo --- src/components/SelectionList/Search/CardListItemHeader.tsx | 2 +- src/components/SelectionList/Search/MemberListItemHeader.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/SelectionList/Search/CardListItemHeader.tsx b/src/components/SelectionList/Search/CardListItemHeader.tsx index cf895df1d9298..3d5f1149da1d5 100644 --- a/src/components/SelectionList/Search/CardListItemHeader.tsx +++ b/src/components/SelectionList/Search/CardListItemHeader.tsx @@ -44,7 +44,7 @@ function CardListItemHeader({card: cardItem, onCheckboxP const {translate, formatPhoneNumber} = useLocalize(); const illustrations = useThemeIllustrations(); - const formattedDisplayName = useMemo(() => formatPhoneNumber(getDisplayNameOrDefault(cardItem)), [cardItem]); + const formattedDisplayName = useMemo(() => formatPhoneNumber(getDisplayNameOrDefault(cardItem)), [cardItem, formatPhoneNumber]); const [memberAvatar, cardIcon] = useMemo(() => { const avatar: Icon = { diff --git a/src/components/SelectionList/Search/MemberListItemHeader.tsx b/src/components/SelectionList/Search/MemberListItemHeader.tsx index f243fda4169bb..941853fdd528b 100644 --- a/src/components/SelectionList/Search/MemberListItemHeader.tsx +++ b/src/components/SelectionList/Search/MemberListItemHeader.tsx @@ -28,7 +28,10 @@ function MemberListItemHeader({member: memberItem, onChe const styles = useThemeStyles(); const {translate, formatPhoneNumber} = useLocalize(); - const [formattedDisplayName, formattedLogin] = useMemo(() => [formatPhoneNumber(getDisplayNameOrDefault(memberItem)), formatPhoneNumber(memberItem.login ?? '')], [memberItem]); + const [formattedDisplayName, formattedLogin] = useMemo( + () => [formatPhoneNumber(getDisplayNameOrDefault(memberItem)), formatPhoneNumber(memberItem.login ?? '')], + [memberItem, formatPhoneNumber], + ); // s77rt add total cell, action cell and collapse/expand button From ee6090d17bcc373b38252b33ef8649ab969a0d65 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 12:08:12 +0530 Subject: [PATCH 17/19] fix formatPhoneNumber for report actions --- src/pages/home/report/PureReportActionItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index cb4af099ff569..3bd50f3bb21c3 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -51,7 +51,6 @@ import type {OnyxDataWithErrors} from '@libs/ErrorUtils'; import {getLatestErrorMessageField, isReceiptError} from '@libs/ErrorUtils'; import focusComposerWithDelay from '@libs/focusComposerWithDelay'; import {isReportMessageAttachment} from '@libs/isReportMessageAttachment'; -import {formatPhoneNumber} from '@libs/LocalePhoneNumber'; import Navigation from '@libs/Navigation/Navigation'; import Permissions from '@libs/Permissions'; import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; @@ -425,7 +424,7 @@ function PureReportActionItem({ shouldShowBorder, }: PureReportActionItemProps) { const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext); - const {translate, datetimeToCalendarTime} = useLocalize(); + const {translate, datetimeToCalendarTime, formatPhoneNumber} = useLocalize(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const reportID = report?.reportID ?? action?.reportID; const theme = useTheme(); From 47c625561123fbe85b54f55cc4c07a25dee41434 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Sat, 19 Jul 2025 13:03:35 +0530 Subject: [PATCH 18/19] export `countryCodeByIP` to use in hook --- src/components/LocaleContextProvider.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index 555bfd78dd165..e8c5a1e718765 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -48,6 +48,9 @@ type LocaleContextProps = { /** The user's preferred locale e.g. 'en', 'es' */ preferredLocale: Locale | undefined; + + /** The country code by IP */ + countryCodeByIP: number; }; const LocaleContext = createContext({ @@ -61,6 +64,7 @@ const LocaleContext = createContext({ toLocaleOrdinal: () => '', fromLocaleDigit: () => '', preferredLocale: undefined, + countryCodeByIP: 1, }); function LocaleContextProvider({children}: LocaleContextProviderProps) { @@ -132,8 +136,21 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) { toLocaleOrdinal, fromLocaleDigit, preferredLocale: currentLocale, + countryCodeByIP, }), - [translate, numberFormat, getLocalDateFromDatetime, datetimeToRelative, datetimeToCalendarTime, formatPhoneNumber, toLocaleDigit, toLocaleOrdinal, fromLocaleDigit, currentLocale], + [ + translate, + numberFormat, + getLocalDateFromDatetime, + datetimeToRelative, + datetimeToCalendarTime, + formatPhoneNumber, + toLocaleDigit, + toLocaleOrdinal, + fromLocaleDigit, + currentLocale, + countryCodeByIP, + ], ); return {children}; From 7bf4f6204ffa219f0b906553a3e9f2a854e9bd40 Mon Sep 17 00:00:00 2001 From: Gandalf Date: Tue, 22 Jul 2025 21:12:11 +0530 Subject: [PATCH 19/19] Update src/components/LocaleContextProvider.tsx Co-authored-by: Shubham Agrawal <58412969+shubham1206agra@users.noreply.github.com> --- src/components/LocaleContextProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/LocaleContextProvider.tsx b/src/components/LocaleContextProvider.tsx index 684d8017618b2..4ef2453a60052 100644 --- a/src/components/LocaleContextProvider.tsx +++ b/src/components/LocaleContextProvider.tsx @@ -51,7 +51,6 @@ type LocaleContextProps = { /** The user's preferred locale e.g. 'en', 'es' */ preferredLocale: Locale | undefined; - }; const LocaleContext = createContext({