perf: Filter options in Request Money and Send Money

src/libs/OptionsListUtils.ts

@@ -193,6 +193,8 @@ type Options = {
 
 type PreviewConfig = {showChatPreviewLine?: boolean; forcePolicyNamePreview?: boolean; showPersonalDetails?: boolean};
 
+type FilterOptionsConfig = Pick<GetOptionsConfig, 'sortByReportTypeInSearch' | 'canInviteUser' | 'betas' | 'selectedOptions' | 'excludeUnknownUsers' | 'excludeLogins'>;
+
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
  * be configured to display different results based on the options passed to the private getOptions() method. Public
@@ -1529,6 +1531,42 @@ function orderOptions(options: ReportUtils.OptionData[], searchValue: string | u
     );
 }
 
+/**
+ * Builds the option with optimistic personal details
+ */
+function createOptimisticPersonalDetailOption(searchValue: string, {reportActions = {}, showChatPreviewLine = false}) {
+    const optimisticAccountID = UserUtils.generateAccountID(searchValue);
+    const personalDetailsExtended = {
+        ...allPersonalDetails,
+        [optimisticAccountID]: {
+            accountID: optimisticAccountID,
+            login: searchValue,
+            avatar: UserUtils.getDefaultAvatar(optimisticAccountID),
+        },
+    };
+    const optimisticUser = createOption([optimisticAccountID], personalDetailsExtended, null, reportActions, {
+        showChatPreviewLine,
+    });
+
+    optimisticUser.isOptimisticAccount = true;
+    optimisticUser.login = searchValue;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    optimisticUser.text = optimisticUser.text || searchValue;
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    optimisticUser.alternateText = optimisticUser.alternateText || searchValue;
+
+    // If user doesn't exist, use a default avatar
+    optimisticUser.icons = [
+        {
+            source: UserUtils.getAvatar('', optimisticAccountID),
+            name: searchValue,
+            type: CONST.ICON_TYPE_AVATAR,
+        },
+    ];
+
+    return optimisticUser;
+}
+
 /**
  * filter options based on specific conditions
  */
@@ -1827,6 +1865,7 @@ function getOptions(
         currentUserOption = undefined;
     }
 
+    // TODO: creating user to invite can be removed once we implement filtering in all search pages. This logic will be handled in filtering instead.
     let userToInvite: ReportUtils.OptionData | null = null;
     const noOptions = recentReportOptions.length + personalDetailsOptions.length === 0 && !currentUserOption;
     const noOptionsMatchExactly = !personalDetailsOptions
@@ -1845,33 +1884,7 @@ function getOptions(
         !excludeUnknownUsers
     ) {
         // Generates an optimistic account ID for new users not yet saved in Onyx
-        const optimisticAccountID = UserUtils.generateAccountID(searchValue);
-        const personalDetailsExtended = {
-            ...allPersonalDetails,
-            [optimisticAccountID]: {
-                accountID: optimisticAccountID,
-                login: searchValue,
-                avatar: UserUtils.getDefaultAvatar(optimisticAccountID),
-            },
-        };
-        userToInvite = createOption([optimisticAccountID], personalDetailsExtended, null, reportActions, {
-            showChatPreviewLine,
-        });
-        userToInvite.isOptimisticAccount = true;
-        userToInvite.login = searchValue;
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        userToInvite.text = userToInvite.text || searchValue;
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        userToInvite.alternateText = userToInvite.alternateText || searchValue;
-
-        // If user doesn't exist, use a default avatar
-        userToInvite.icons = [
-            {
-                source: UserUtils.getAvatar('', optimisticAccountID),
-                name: searchValue,
-                type: CONST.ICON_TYPE_AVATAR,
-            },
-        ];
+        userToInvite = createOptimisticPersonalDetailOption(searchValue, {reportActions, showChatPreviewLine});
     }
 
     // If we are prioritizing 1:1 chats in search, do it only once we started searching
@@ -2235,8 +2248,10 @@ function getFirstKeyForList(data?: Option[] | null) {
 /**
  * Filters options based on the search input value
  */
-function filterOptions(options: Options, searchInputValue: string): Options {
-    const searchValue = getSearchValueForPhoneOrEmail(searchInputValue);
+function filterOptions(options: Options, searchInputValue: string, config?: FilterOptionsConfig): Options {
+    const {sortByReportTypeInSearch = false, canInviteUser = true, betas = [], selectedOptions = [], excludeUnknownUsers = false, excludeLogins = []} = config ?? {};
+    const parsedPhoneNumber = PhoneNumber.parsePhoneNumber(LoginUtils.appendCountryCode(Str.removeSMSDomain(searchInputValue)));
+    const searchValue = parsedPhoneNumber.possible ? parsedPhoneNumber.number?.e164 ?? '' : searchInputValue.toLowerCase();
     const searchTerms = searchValue ? searchValue.split(' ') : [];
 
     // The regex below is used to remove dots only from the local part of the user email (local-part@domain)
@@ -2279,12 +2294,14 @@ function filterOptions(options: Options, searchInputValue: string): Options {
                 if (item.alternateText) {
                     values.push(item.alternateText);
                 }
+                values = values.concat(getParticipantsLoginsArray(item));
             } else if (!!item.isChatRoom || !!item.isPolicyExpenseChat) {
                 if (item.subtitle) {
                     values.push(item.subtitle);
                 }
+            } else {
+                values = values.concat(getParticipantsLoginsArray(item));
             }
-            values = values.concat(getParticipantsLoginsArray(item));
 
             return uniqFast(values);
         });
@@ -2303,12 +2320,39 @@ function filterOptions(options: Options, searchInputValue: string): Options {
         };
     }, options);
 
-    const recentReports = matchResults.recentReports.concat(matchResults.personalDetails);
+    let {recentReports, personalDetails} = matchResults;
+
+    if (sortByReportTypeInSearch) {
+        recentReports = recentReports.concat(matchResults.personalDetails);
+        personalDetails = [];
+        recentReports = orderOptions(recentReports, searchValue);
+    }
+
+    let userToInvite = null;
+    if (canInviteUser) {
+        const noOptions = recentReports.length + personalDetails.length === 0;
+        const noOptionsMatchExactly = !personalDetails
+            .concat(recentReports)
+            .find((option) => option.login === PhoneNumber.addSMSDomainIfPhoneNumber(searchValue ?? '').toLowerCase() || option.login === searchValue?.toLowerCase());
+        if (
+            searchValue &&
+            (noOptions || noOptionsMatchExactly) &&
+            !isCurrentUser({login: searchValue} as PersonalDetails) &&
+            selectedOptions.every((option) => 'login' in option && option.login !== searchValue) &&
+            ((Str.isValidEmail(searchValue) && !Str.isDomainEmail(searchValue) && !Str.endsWith(searchValue, CONST.SMS.DOMAIN)) ||
+                (parsedPhoneNumber.possible && Str.isValidE164Phone(LoginUtils.getPhoneNumberWithoutSpecialChars(parsedPhoneNumber.number?.input ?? '')))) &&
+            !excludeLogins.find((optionToExclude) => optionToExclude === PhoneNumber.addSMSDomainIfPhoneNumber(searchValue).toLowerCase()) &&
+            (searchValue !== CONST.EMAIL.CHRONOS || Permissions.canUseChronos(betas)) &&
+            !excludeUnknownUsers
+        ) {
+            userToInvite = createOptimisticPersonalDetailOption(searchValue, {});
+        }
+    }
 
     return {
-        personalDetails: [],
-        recentReports: orderOptions(recentReports, searchValue),
-        userToInvite: null,
+        personalDetails,
+        recentReports,
+        userToInvite,
         currentUserOption: null,
         categoryOptions: [],
         tagOptions: [],

src/pages/SearchPage/index.tsx

@@ -101,12 +101,12 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps)
             };
         }
 
-        const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedSearchValue);
-        const header = OptionsListUtils.getHeaderMessage(newOptions.recentReports.length > 0, false, debouncedSearchValue);
+        const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedSearchValue, {sortByReportTypeInSearch: true});
+        const header = OptionsListUtils.getHeaderMessage(newOptions.recentReports.length > 0, Boolean(newOptions.userToInvite), debouncedSearchValue);
         return {
             recentReports: newOptions.recentReports,
             personalDetails: newOptions.personalDetails,
-            userToInvite: null,
+            userToInvite: newOptions.userToInvite,
             headerMessage: header,
         };
     }, [debouncedSearchValue, searchOptions]);

src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

@@ -89,21 +89,16 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
         Report.searchInServer(debouncedSearchTerm.trim());
     }, [debouncedSearchTerm]);
 
-    /**
-     * Returns the sections needed for the OptionsSelector
-     *
-     * @returns {Array}
-     */
-    const [sections, newChatOptions] = useMemo(() => {
-        const newSections = [];
+    const chatOptions = useMemo(() => {
         if (!areOptionsInitialized || !didScreenTransitionEnd) {
-            return [newSections, {}];
+            return {};
         }
-        const chatOptions = OptionsListUtils.getFilteredOptions(
+
+        const optionList = OptionsListUtils.getFilteredOptions(
             options.reports,
             options.personalDetails,
             betas,
-            debouncedSearchTerm,
+            '',
             participants,
             CONST.EXPENSIFY_EMAILS,
 
@@ -122,11 +117,38 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
             false,
         );
 
+        return optionList;
+    }, [action, areOptionsInitialized, betas, canUseP2PDistanceRequests, didScreenTransitionEnd, iouRequestType, iouType, options.personalDetails, options.reports, participants]);
+
+    const filteredOptions = useMemo(() => {
+        if (!areOptionsInitialized || debouncedSearchTerm.trim() === '') {
+            return {};
+        }
+
+        const newOptions = OptionsListUtils.filterOptions(chatOptions, debouncedSearchTerm, {
+            betas,
+            selectedOptions: participants,
+            excludeLogins: CONST.EXPENSIFY_EMAILS,
+        });
+        return newOptions;
+    }, [areOptionsInitialized, betas, chatOptions, debouncedSearchTerm, participants]);
+
+    /**
+     * Returns the sections needed for the OptionsSelector
+     * @returns {Array}
+     */
+    const [sections, header] = useMemo(() => {
+        const requestMoneyOptions = debouncedSearchTerm.trim() !== '' ? filteredOptions : chatOptions;
+        const newSections = [];
+        if (!areOptionsInitialized || !didScreenTransitionEnd) {
+            return [newSections, ''];
+        }
+
         const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(
             debouncedSearchTerm,
             participants,
-            chatOptions.recentReports,
-            chatOptions.personalDetails,
+            requestMoneyOptions.recentReports,
+            requestMoneyOptions.personalDetails,
             maxParticipantsReached,
             personalDetails,
             true,
@@ -140,45 +162,50 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
 
         newSections.push({
             title: translate('common.recents'),
-            data: chatOptions.recentReports,
-            shouldShow: !_.isEmpty(chatOptions.recentReports),
+            data: requestMoneyOptions.recentReports,
+            shouldShow: !_.isEmpty(options.recentReports),
         });
 
         if (![CONST.IOU.ACTION.CATEGORIZE, CONST.IOU.ACTION.SHARE].includes(action)) {
             newSections.push({
                 title: translate('common.contacts'),
-                data: chatOptions.personalDetails,
+                data: requestMoneyOptions.personalDetails,
                 shouldShow: !_.isEmpty(chatOptions.personalDetails),
             });
         }
 
-        if (chatOptions.userToInvite && !OptionsListUtils.isCurrentUser(chatOptions.userToInvite)) {
+        if (requestMoneyOptions.userToInvite && !OptionsListUtils.isCurrentUser(requestMoneyOptions.userToInvite)) {
             newSections.push({
                 title: undefined,
-                data: _.map([chatOptions.userToInvite], (participant) => {
+                data: _.map([requestMoneyOptions.userToInvite], (participant) => {
                     const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
                     return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
                 }),
                 shouldShow: true,
             });
         }
 
-        return [newSections, chatOptions];
+        const headerMessage = OptionsListUtils.getHeaderMessage(
+            _.get(requestMoneyOptions, 'personalDetails', []).length + _.get(requestMoneyOptions, 'recentReports', []).length !== 0,
+            Boolean(requestMoneyOptions.userToInvite),
+            debouncedSearchTerm.trim(),
+            maxParticipantsReached,
+            _.some(participants, (participant) => participant.searchText.toLowerCase().includes(debouncedSearchTerm.trim().toLowerCase())),
+        );
+
+        return [newSections, headerMessage];
     }, [
-        areOptionsInitialized,
-        options.reports,
-        options.personalDetails,
-        betas,
         debouncedSearchTerm,
+        filteredOptions,
+        chatOptions,
+        areOptionsInitialized,
+        didScreenTransitionEnd,
         participants,
-        iouType,
         action,
-        canUseP2PDistanceRequests,
-        iouRequestType,
         maxParticipantsReached,
         personalDetails,
         translate,
-        didScreenTransitionEnd,
+        options.recentReports,
     ]);
 
     /**
@@ -244,18 +271,6 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
         [participants, onParticipantsAdded],
     );
 
-    const headerMessage = useMemo(
-        () =>
-            OptionsListUtils.getHeaderMessage(
-                _.get(newChatOptions, 'personalDetails', []).length + _.get(newChatOptions, 'recentReports', []).length !== 0,
-                Boolean(newChatOptions.userToInvite),
-                debouncedSearchTerm.trim(),
-                maxParticipantsReached,
-                _.some(participants, (participant) => participant.searchText.toLowerCase().includes(debouncedSearchTerm.trim().toLowerCase())),
-            ),
-        [maxParticipantsReached, newChatOptions, participants, debouncedSearchTerm],
-    );
-
     // Right now you can't split a request with a workspace and other additional participants
     // This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent
     // the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants
@@ -394,7 +409,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({participants, onF
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             onSelectRow={addSingleParticipant}
             footerContent={footerContent}
-            headerMessage={headerMessage}
+            headerMessage={header}
             showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd}
             rightHandSideComponent={itemRightSideComponent}
         />

tests/unit/OptionsListUtilsTest.ts

@@ -2601,20 +2601,19 @@ describe('OptionsListUtils', () => {
             const options = OptionsListUtils.getSearchOptions(OPTIONS, '', [CONST.BETAS.ALL]);
             const filteredOptions = OptionsListUtils.filterOptions(options, '');
 
-            expect(options.recentReports.length + options.personalDetails.length).toBe(filteredOptions.recentReports.length);
+            expect(options.recentReports.length + options.personalDetails.length).toBe(filteredOptions.recentReports.length + filteredOptions.personalDetails.length);
         });
 
         it('should return filtered options in correct order', () => {
             const searchText = 'man';
             const options = OptionsListUtils.getSearchOptions(OPTIONS, '', [CONST.BETAS.ALL]);
 
-            const filteredOptions = OptionsListUtils.filterOptions(options, searchText);
-            expect(filteredOptions.recentReports.length).toBe(5);
+            const filteredOptions = OptionsListUtils.filterOptions(options, searchText, {sortByReportTypeInSearch: true});
+            expect(filteredOptions.recentReports.length).toBe(4);
             expect(filteredOptions.recentReports[0].text).toBe('Invisible Woman');
             expect(filteredOptions.recentReports[1].text).toBe('Spider-Man');
             expect(filteredOptions.recentReports[2].text).toBe('Black Widow');
             expect(filteredOptions.recentReports[3].text).toBe('Mister Fantastic');
-            expect(filteredOptions.recentReports[4].text).toBe("SHIELD's workspace (archived)");
         });
 
         it('should filter users by email', () => {
@@ -2641,7 +2640,7 @@ describe('OptionsListUtils', () => {
             const OPTIONS_WITH_PERIODS = OptionsListUtils.createOptionList(PERSONAL_DETAILS_WITH_PERIODS, REPORTS);
             const options = OptionsListUtils.getSearchOptions(OPTIONS_WITH_PERIODS, '', [CONST.BETAS.ALL]);
 
-            const filteredOptions = OptionsListUtils.filterOptions(options, searchText);
+            const filteredOptions = OptionsListUtils.filterOptions(options, searchText, {sortByReportTypeInSearch: true});
 
             expect(filteredOptions.recentReports.length).toBe(1);
             expect(filteredOptions.recentReports[0].login).toBe('[email protected]');