[Part 30] Remove Onyx.connect from LocalePhoneNumber

src/components/Search/FilterComponents/InSelector.tsx

@@ -48,7 +48,7 @@ function getSelectedOptionData(option: Option & Pick<OptionData, 'reportID'>): O
 }
 
 function InSelector({value = [], selectionListTextInputStyle, selectionListStyle, autoFocus, ready = true, footer, onChange}: InSelectorProps) {
-    const {translate, dateFnsLocale} = useLocalize();
+    const {translate, dateFnsLocale, formatPhoneNumber} = useLocalize();
     const personalDetails = usePersonalDetails();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const {options, isLoading} = useFilteredOptions({
@@ -93,6 +93,7 @@ function InSelector({value = [], selectionListTextInputStyle, selectionListStyle
                     conciergeReportID,
                     reportAttributesDerived,
                     isTrackIntentUser,
+                    formatPhoneNumber,
                 }),
             ),
             isSelected,
@@ -103,7 +104,7 @@ function InSelector({value = [], selectionListTextInputStyle, selectionListStyle
         const alternateText = getAlternateText(
             report,
             {},
-            {dateFnsLocale, isReportArchived, personalDetails, policy, reportAttributesDerived, policyTags: reportPolicyTags, conciergeReportID, isTrackIntentUser},
+            {dateFnsLocale, isReportArchived, personalDetails, policy, reportAttributesDerived, policyTags: reportPolicyTags, conciergeReportID, isTrackIntentUser, formatPhoneNumber},
         );
         return {...report, alternateText};
     };
@@ -134,9 +135,10 @@ function InSelector({value = [], selectionListTextInputStyle, selectionListStyle
                   conciergeReportID,
                   isTrackIntentUser,
                   translate,
+                  formatPhoneNumber,
               }).options;
 
-    const chatOptions = filterAndOrderOptions(defaultOptions, cleanSearchTerm, countryCode, loginList, currentUserEmail, currentUserAccountID, personalDetails, {
+    const chatOptions = filterAndOrderOptions(defaultOptions, cleanSearchTerm, countryCode, formatPhoneNumber, loginList, currentUserEmail, currentUserAccountID, personalDetails, {
         dateFnsLocale,
         selectedOptions,
         excludeLogins: CONST.EXPENSIFY_EMAILS_OBJECT,

src/components/Search/SearchAutocompleteList.tsx

@@ -282,6 +282,7 @@ function SearchAutocompleteList({
             conciergeReportID,
             isTrackIntentUser,
             translate,
+            formatPhoneNumber,
         }).options;
     }, [
         listOptions,
@@ -300,6 +301,7 @@ function SearchAutocompleteList({
         isTrackIntentUser,
         translate,
         dateFnsLocale,
+        formatPhoneNumber,
     ]);
 
     const [isInitialRender, setIsInitialRender] = useState(true);

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -229,6 +229,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                         showPersonalDetails: isOneOnOneChat(contextualReport),
                     },
                     isTrackIntentUser,
+                    formatPhoneNumber,
                 });
                 reportForContextualSearch = option;
             }
@@ -299,6 +300,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
             reportAttributes,
             isTrackIntentUser,
             dateFnsLocale,
+            formatPhoneNumber,
         ],
     );
 

src/hooks/useAutocompleteSuggestions.ts

@@ -120,7 +120,7 @@ function useAutocompleteSuggestions({
     translate,
     autocompleteSubstitutions,
 }: UseAutocompleteSuggestionsParams): AutocompleteItemData[] {
-    const {localeCompare, dateFnsLocale} = useLocalize();
+    const {localeCompare, dateFnsLocale, formatPhoneNumber} = useLocalize();
     const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
     const [allRecentCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES);
     const [recentCurrencyAutocompleteList] = useOnyx(ONYXKEYS.RECENTLY_USED_CURRENCIES);
@@ -270,6 +270,7 @@ function useAutocompleteSuggestions({
                 excludeFromSuggestionsOnly: memberExclusions,
                 isTrackIntentUser,
                 translate,
+                formatPhoneNumber,
             }).options.personalDetails.filter((participant) => participant.text && !alreadyAutocompletedKeys.has(participant.text.toLowerCase()));
 
             return participants.map((participant) => ({
@@ -310,6 +311,7 @@ function useAutocompleteSuggestions({
                 conciergeReportID,
                 isTrackIntentUser,
                 translate,
+                formatPhoneNumber,
             }).options.recentReports.filter((chat) => {
                 if (!chat.text) {
                     return false;

src/hooks/useFilteredOptions.ts

@@ -89,7 +89,7 @@ function useFilteredOptions(config: UseFilteredOptionsConfig): UseFilteredOption
     const [isTrackIntentUser] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {selector: isTrackIntentUserSelector});
 
     // Option building is locale-dependent, so a consumer that stays mounted through a language switch recomputes.
-    const {preferredLocale, dateFnsLocale} = useLocalize();
+    const {preferredLocale, dateFnsLocale, formatPhoneNumber} = useLocalize();
 
     // Sorted report actions from the RAM_ONLY_SORTED_REPORT_ACTIONS derived value; a new reference on
     // every recompute, so it doubles as the report-actions invalidation signal for the option-list cache.
@@ -110,7 +110,17 @@ function useFilteredOptions(config: UseFilteredOptionsConfig): UseFilteredOption
                       reportAttributesDerived,
                       privateIsArchivedMap,
                       allPolicies,
-                      {currentUserAccountID, dateFnsLocale, conciergeReportID, maxRecentReports: reportsLimit, includeP2P, isSearching, deferContactsUntilSearch, locale: preferredLocale},
+                      {
+                          currentUserAccountID,
+                          dateFnsLocale,
+                          conciergeReportID,
+                          maxRecentReports: reportsLimit,
+                          includeP2P,
+                          isSearching,
+                          deferContactsUntilSearch,
+                          locale: preferredLocale,
+                          formatPhoneNumber,
+                      },
                       undefined,
                       undefined,
                       isTrackIntentUser,
@@ -130,6 +140,7 @@ function useFilteredOptions(config: UseFilteredOptionsConfig): UseFilteredOption
             isSearching,
             deferContactsUntilSearch,
             preferredLocale,
+            formatPhoneNumber,
             isTrackIntentUser,
             sortedActions,
             currentUserAccountID,

src/hooks/useMoneyRequestParticipantsPolicyTags.ts

@@ -28,6 +28,7 @@ type UseMoneyRequestParticipantsPolicyTagsParams = {
     reportAttributesDerived: ReportAttributesDerivedValue['reports'] | undefined;
     reportDraft: OnyxEntry<Report> | undefined;
     translate: LocaleContextProps['translate'];
+    formatPhoneNumber: LocaleContextProps['formatPhoneNumber'];
 };
 
 type UseMoneyRequestParticipantsPolicyTagsResult = {
@@ -46,19 +47,13 @@ function useMoneyRequestParticipantsPolicyTags({
     reportDraft,
     translate,
     dateFnsLocale,
+    formatPhoneNumber,
 }: UseMoneyRequestParticipantsPolicyTagsParams): UseMoneyRequestParticipantsPolicyTagsResult {
-    const participants = getMoneyRequestParticipantOptions(
-        currentUserAccountID,
-        report,
-        policy,
-        personalDetails,
-        conciergeReportID,
-        isArchived,
-        reportAttributesDerived,
-        reportDraft,
+    const participants = getMoneyRequestParticipantOptions(currentUserAccountID, report, policy, personalDetails, conciergeReportID, isArchived, reportAttributesDerived, reportDraft, {
         translate,
         dateFnsLocale,
-    );
+        formatPhoneNumber,
+    });
     const participantsPolicyTags = useParticipantsPolicyTags(participants);
 
     return {participants, participantsPolicyTags};

src/hooks/useSearchSelector/base.ts

@@ -195,7 +195,7 @@ function useSearchSelectorBase({
     shouldKeepSelectedInAvailableOptions = false,
     shouldSeparateNonExistingSelectedOptions = false,
 }: UseSearchSelectorConfig): UseSearchSelectorReturn {
-    const {translate, dateFnsLocale} = useLocalize();
+    const {translate, dateFnsLocale, formatPhoneNumber} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [reportAttributesDerived] = useOnyx(ONYXKEYS.DERIVED.REPORT_ATTRIBUTES);
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
@@ -308,6 +308,7 @@ function useSearchSelectorBase({
                     conciergeReportID,
                     isTrackIntentUser,
                     translate,
+                    formatPhoneNumber,
                 });
             case CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_GENERAL:
                 return getValidOptions(
@@ -343,6 +344,7 @@ function useSearchSelectorBase({
                         ...appliedGetValidOptionsConfig,
                     },
                     translate,
+                    formatPhoneNumber,
                 );
             case CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_SHARE_DESTINATION:
                 return getValidOptions(
@@ -380,6 +382,7 @@ function useSearchSelectorBase({
                         ...appliedGetValidOptionsConfig,
                     },
                     translate,
+                    formatPhoneNumber,
                 );
             case CONST.SEARCH_SELECTOR.SEARCH_CONTEXT_ATTENDEES:
                 return getValidOptions(
@@ -415,6 +418,7 @@ function useSearchSelectorBase({
                         ...appliedGetValidOptionsConfig,
                     },
                     translate,
+                    formatPhoneNumber,
                 );
             default:
                 return getEmptyOptions();

src/libs/IOUAmountSubmission.ts

@@ -243,7 +243,19 @@ function buildSubmitAmountContext(args: SubmitAmountArgs): SubmitAmountContext {
 }
 
 function buildReportParticipants(args: SubmitAmountArgs) {
-    const {report, policy, currentUserPersonalDetails, reportAttributesDerivedValue, allReportDrafts, allReportNVPs, allPersonalDetails, conciergeReportID, translate, dateFnsLocale} = args;
+    const {
+        report,
+        policy,
+        currentUserPersonalDetails,
+        reportAttributesDerivedValue,
+        allReportDrafts,
+        allReportNVPs,
+        allPersonalDetails,
+        conciergeReportID,
+        translate,
+        dateFnsLocale,
+        formatPhoneNumber,
+    } = args;
     const selectedParticipants = getMoneyRequestParticipantsFromReport(report, currentUserPersonalDetails.accountID);
     const reportAttributesReports = reportAttributesDerivedValue?.reports;
     const reportIDToCheck = isMoneyRequestReport(report) ? report?.chatReportID : report?.reportID;
@@ -252,10 +264,11 @@ function buildReportParticipants(args: SubmitAmountArgs) {
         const participantAccountID = participant?.accountID ?? CONST.DEFAULT_NUMBER_ID;
         const privateIsArchived = !!allReportNVPs?.[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${participant.reportID}`]?.private_isArchived;
         return participantAccountID
-            ? getParticipantsOption(participant, allPersonalDetails, translate)
+            ? getParticipantsOption(participant, allPersonalDetails, translate, formatPhoneNumber)
             : getReportOption(participant, privateIsArchived, policy, allPersonalDetails, conciergeReportID, reportAttributesReports, reportDraft, currentUserPersonalDetails.accountID, {
                   translate,
                   dateFnsLocale,
+                  formatPhoneNumber,
               });
     });
 }