[Part 20] Remove Onyx.connect from LocalePhoneNumber

src/components/MoneyRequestConfirmationList/hooks/useConfirmationSections.ts

@@ -64,14 +64,14 @@ function useConfirmationSections({
     selectedParticipants,
     getSplitSectionHeader,
 }: UseConfirmationSectionsParams) {
-    const {translate} = useLocalize();
+    const {translate, formatPhoneNumber} = useLocalize();
 
     const options: Array<Section<MoneyRequestConfirmationListItem>> = [];
     if (isTypeSplit) {
         options.push(
             {
                 title: translate('moneyRequestConfirmationList.paidBy'),
-                data: [getIOUConfirmationOptionsFromPayeePersonalDetail(payeePersonalDetails, translate)],
+                data: [getIOUConfirmationOptionsFromPayeePersonalDetail(payeePersonalDetails, translate, formatPhoneNumber)],
                 sectionIndex: 0,
             },
             {

src/components/MoneyRequestConfirmationList/hooks/useSplitParticipants.tsx

@@ -70,7 +70,7 @@ function useSplitParticipants({
     currentUserAccountID,
 }: UseSplitParticipantsParams) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, formatPhoneNumber} = useLocalize();
     const {convertToDisplayString, convertToDisplayStringWithoutCurrency, getCurrencySymbol} = useCurrencyListActions();
 
     const transactionID = transaction?.transactionID;
@@ -86,7 +86,7 @@ function useSplitParticipants({
             return [];
         }
 
-        const payeeOption = getIOUConfirmationOptionsFromPayeePersonalDetail(payeePersonalDetails, translate);
+        const payeeOption = getIOUConfirmationOptionsFromPayeePersonalDetail(payeePersonalDetails, translate, formatPhoneNumber);
         if (shouldShowReadOnlySplits) {
             return [payeeOption, ...selectedParticipants].map((participantOption: Participant) => {
                 const isPayer = participantOption.accountID === payeeOption.accountID;

src/libs/OptionsListUtils/index.ts

@@ -2967,13 +2967,16 @@ function getSearchOptions({
 /**
  * Build the IOUConfirmation options for showing the payee personalDetail
  */
-function getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail: OnyxEntry<PersonalDetails>, translate: LocalizedTranslate, amountText?: string): PayeePersonalDetails {
+function getIOUConfirmationOptionsFromPayeePersonalDetail(
+    personalDetail: OnyxEntry<PersonalDetails>,
+    translate: LocalizedTranslate,
+    formatPhoneNumber: LocaleContextProps['formatPhoneNumber'],
+    amountText?: string,
+): PayeePersonalDetails {
     const login = personalDetail?.login ?? '';
     return {
-        text: formatPhoneNumberPhoneUtils(temporaryGetDisplayNameOrDefault({passedPersonalDetails: personalDetail, defaultValue: login, translate})),
-        alternateText: formatPhoneNumberPhoneUtils(
-            login || temporaryGetDisplayNameOrDefault({passedPersonalDetails: personalDetail, defaultValue: '', shouldFallbackToHidden: false, translate}),
-        ),
+        text: formatPhoneNumber(temporaryGetDisplayNameOrDefault({passedPersonalDetails: personalDetail, defaultValue: login, translate})),
+        alternateText: formatPhoneNumber(login || temporaryGetDisplayNameOrDefault({passedPersonalDetails: personalDetail, defaultValue: '', shouldFallbackToHidden: false, translate})),
         icons: [
             {
                 source: personalDetail?.avatar ?? FallbackAvatar,

tests/unit/OptionsListUtilsTest.tsx

@@ -25,6 +25,7 @@ import {
     filterWorkspaceChats,
     formatMemberForList,
     formatSectionsFromSearchTerm,
+    getIOUConfirmationOptionsFromPayeePersonalDetail,
     getLastActorDisplayName,
     getLastActorDisplayNameFromLastVisibleActions,
     getLastMessageTextForReport,
@@ -94,7 +95,7 @@ import {createRandomReport, createRegularChat} from '../utils/collections/report
 import createRandomTransaction from '../utils/collections/transaction';
 import createMock from '../utils/createMock';
 import {getFakeAdvancedReportAction} from '../utils/LHNTestUtils';
-import {localeCompare, translateLocal} from '../utils/TestHelper';
+import {formatPhoneNumber, localeCompare, translateLocal} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 jest.mock('@rnmapbox/maps', () => {
@@ -4479,6 +4480,22 @@ describe('OptionsListUtils', () => {
         });
     });
 
+    describe('getIOUConfirmationOptionsFromPayeePersonalDetail', () => {
+        it('formats payee text and alternate text with the injected phone-number formatter', () => {
+            const personalDetail = {
+                accountID: 42,
+                login: '+18332403627@expensify.sms',
+                keyForList: '+18332403627@expensify.sms',
+                reportID: '',
+            };
+
+            const result = getIOUConfirmationOptionsFromPayeePersonalDetail(personalDetail, translateLocal, formatPhoneNumber);
+
+            expect(result.text).toBe('(833) 240-3627');
+            expect(result.alternateText).toBe('(833) 240-3627');
+        });
+    });
+
     describe('getLastMessageTextForReport', () => {
         describe('getReportPreviewMessage', () => {
             it('should format report preview message correctly for non-policy expense chat with IOU action', async () => {

tests/unit/hooks/useConfirmationSections.test.tsx

@@ -18,6 +18,7 @@ import waitForBatchedUpdatesWithAct from '../../utils/waitForBatchedUpdatesWithA
 type Params = Parameters<typeof useConfirmationSections>[0];
 
 const payee = {accountID: 1, login: 'me@test.com'} as CurrentUserPersonalDetails;
+const smsPayee = {accountID: 3, login: '+18332403627@expensify.sms'} as CurrentUserPersonalDetails;
 const otherParticipant = {accountID: 2, login: 'other@test.com', keyForList: '2'} as unknown as Participant;
 const splitParticipant = {accountID: 2, keyForList: '2', login: 'other@test.com'} as Participant & {keyForList: string};
 
@@ -56,6 +57,11 @@ describe('useConfirmationSections', () => {
         expect(result.current.at(1)?.data).toHaveLength(1);
     });
 
+    it('formats split payee SMS login using the localized phone-number formatter', () => {
+        const {result} = renderHook(() => useConfirmationSections(makeBase({isTypeSplit: true, payeePersonalDetails: smsPayee as OnyxTypes.PersonalDetails})), {wrapper: Wrapper});
+        expect(result.current.at(0)?.data.at(0)?.text).toBe('(833) 240-3627');
+    });
+
     it('produces a single "to" section for non-split types', () => {
         const {result} = renderHook(() => useConfirmationSections(makeBase()), {wrapper: Wrapper});
         expect(result.current).toHaveLength(1);

tests/unit/hooks/useSplitParticipants.test.tsx

@@ -48,6 +48,7 @@ jest.mock('@components/MoneyRequestAmountInput', () => {
 type Params = Parameters<typeof useSplitParticipants>[0];
 
 const payee = {accountID: 1, login: 'me@test.com'} as CurrentUserPersonalDetails;
+const smsPayee = {accountID: 3, login: '+18332403627@expensify.sms'} as CurrentUserPersonalDetails;
 const otherParticipant = {accountID: 2, login: 'other@test.com', keyForList: '2'} as unknown as Participant;
 
 function makeBase(overrides: Partial<Params> = {}): Params {
@@ -104,6 +105,11 @@ describe('useSplitParticipants', () => {
         expect(result.current.splitParticipants.at(1)?.accountID).toBe(otherParticipant.accountID);
     });
 
+    it('formats payee SMS login using the localized phone-number formatter', () => {
+        const {result} = renderHook(() => useSplitParticipants(makeBase({isTypeSplit: true, payeePersonalDetails: smsPayee as OnyxTypes.PersonalDetails})), {wrapper: Wrapper});
+        expect(result.current.splitParticipants.at(0)?.text).toBe('(833) 240-3627');
+    });
+
     it('marks split rows as non-interactive', () => {
         const {result} = renderHook(() => useSplitParticipants(makeBase({isTypeSplit: true})), {wrapper: Wrapper});
         for (const row of result.current.splitParticipants) {