[Search v2.1] Create In filter #46030

src/CONST.ts

@@ -5323,6 +5323,7 @@ const CONST = {
             CARD_ID: 'cardID',
             REPORT_ID: 'reportID',
             KEYWORD: 'keyword',
+            IN: 'in',
             HAS: 'has',
         },
     },

src/ROUTES.ts

@@ -52,6 +52,7 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_TAG: 'search/filters/tag',
     SEARCH_ADVANCED_FILTERS_FROM: 'search/filters/from',
     SEARCH_ADVANCED_FILTERS_TO: 'search/filters/to',
+    SEARCH_ADVANCED_FILTERS_IN: 'search/filters/in',
     SEARCH_ADVANCED_FILTERS_HAS: 'search/filters/has',
 
     SEARCH_REPORT: {

src/SCREENS.ts

@@ -46,6 +46,7 @@ const SCREENS = {
         ADVANCED_FILTERS_TAG_RHP: 'Search_Advanced_Filters_Tag_RHP',
         ADVANCED_FILTERS_FROM_RHP: 'Search_Advanced_Filters_From_RHP',
         ADVANCED_FILTERS_TO_RHP: 'Search_Advanced_Filters_To_RHP',
+        ADVANCED_FILTERS_IN_RHP: 'Search_Advanced_Filters_In_RHP',
         ADVANCED_FILTERS_HAS_RHP: 'Search_Advanced_Filters_Has_RHP',
         TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         BOTTOM_TAB: 'Search_Bottom_Tab',

src/components/Search/SearchFiltersChatsSelector.tsx

@@ -0,0 +1,188 @@
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import {useOptionsList} from '@components/OptionListContextProvider';
+import SelectionList from '@components/SelectionList';
+import InviteMemberListItem from '@components/SelectionList/InviteMemberListItem';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import type {Option} from '@libs/OptionsListUtils';
+import type {OptionData} from '@libs/ReportUtils';
+import Navigation from '@navigation/Navigation';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+const defaultListOptions = {
+    recentReports: [],
+    personalDetails: [],
+    userToInvite: null,
+    currentUserOption: null,
+    categoryOptions: [],
+    tagOptions: [],
+    taxRatesOptions: [],
+    headerMessage: '',
+};
+
+function getSelectedOptionData(option: Option): OptionData {
+    return {...option, isSelected: true, reportID: option.reportID ?? '-1'};
+}
+
+type SearchFiltersParticipantsSelectorProps = {
+    initialReportIDs: string[];
+    onFiltersUpdate: (initialReportIDs: string[]) => void;
+    isScreenTransitionEnd: boolean;
+};
+
+function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreenTransitionEnd}: SearchFiltersParticipantsSelectorProps) {
+    const {translate} = useLocalize();
+    const personalDetails = usePersonalDetails();
+    const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
+    const {options, areOptionsInitialized} = useOptionsList({
+        shouldInitialize: didScreenTransitionEnd,
+    });
+
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
+    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
+    const [selectedReportIDs, setSelectedReportIDs] = useState<string[]>(initialReportIDs);
+    const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
+    const cleanSearchTerm = useMemo(() => searchTerm.trim().toLowerCase(), [searchTerm]);
+
+    const selectedOptions = useMemo<OptionData[]>(() => {
+        return selectedReportIDs.map((id) => {
+            const report = getSelectedOptionData(OptionsListUtils.createOptionFromReport({...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id}, personalDetails));
+            const alternateText = OptionsListUtils.getAlternateText(report, {showChatPreviewLine: true});
+            return {...report, alternateText};
+        });
+    }, [personalDetails, reports, selectedReportIDs]);
+
+    const defaultOptions = useMemo(() => {
+        if (!areOptionsInitialized || !isScreenTransitionEnd) {
+            return defaultListOptions;
+        }
+        return OptionsListUtils.getSearchOptions(options);
+    }, [areOptionsInitialized, isScreenTransitionEnd, options]);
+
+    const chatOptions = useMemo(() => {
+        return OptionsListUtils.filterOptions(defaultOptions, cleanSearchTerm, {
+            selectedOptions,
+            excludeLogins: CONST.EXPENSIFY_EMAILS,
+            maxRecentReportsToShow: 0,
+        });
+    }, [defaultOptions, cleanSearchTerm, selectedOptions]);
+
+    const {sections, headerMessage} = useMemo(() => {
+        const newSections: OptionsListUtils.CategorySection[] = [];
+        if (!areOptionsInitialized) {
+            return {sections: [], headerMessage: undefined};
+        }
+
+        const formattedResults = OptionsListUtils.formatSectionsFromSearchTerm(
+            cleanSearchTerm,
+            selectedOptions,
+            chatOptions.recentReports,
+            chatOptions.personalDetails,
+            personalDetails,
+            false,
+        );
+
+        newSections.push(formattedResults.section);
+
+        const visibleReportsWhenSearchTermNonEmpty = chatOptions.recentReports.map((report) => (selectedReportIDs.includes(report.reportID) ? getSelectedOptionData(report) : report));
+        const visibleReportsWhenSearchTermEmpty = chatOptions.recentReports.filter((report) => !selectedReportIDs.includes(report.reportID));
+        const reportsFiltered = cleanSearchTerm === '' ? visibleReportsWhenSearchTermEmpty : visibleReportsWhenSearchTermNonEmpty;
+
+        newSections.push({
+            title: undefined,
+            data: reportsFiltered,
+            shouldShow: chatOptions.recentReports.length > 0,
+        });
+
+        const areResultsFound = didScreenTransitionEnd && formattedResults.section.data.length === 0 && reportsFiltered.length === 0;
+        const message = areResultsFound ? translate('common.noResultsFound') : undefined;
+
+        return {
+            sections: newSections,
+            headerMessage: message,
+        };
+    }, [
+        areOptionsInitialized,
+        chatOptions.personalDetails,
+        chatOptions.recentReports,
+        cleanSearchTerm,
+        didScreenTransitionEnd,
+        personalDetails,
+        selectedOptions,
+        selectedReportIDs,
+        translate,
+    ]);
+
+    useEffect(() => {
+        Report.searchInServer(debouncedSearchTerm.trim());
+    }, [debouncedSearchTerm]);
+
+    const handleParticipantSelection = useCallback(
+        (selectedOption: Option) => {
+            const optionReportID = selectedOption.reportID;
+            if (!optionReportID) {
+                return;
+            }
+            const foundOptionIndex = selectedReportIDs.findIndex((reportID: string) => {
+                return reportID && reportID !== '' && selectedOption.reportID === reportID;
+            });
+
+            if (foundOptionIndex < 0) {
+                setSelectedReportIDs([...selectedReportIDs, optionReportID]);
+            } else {
+                const newSelectedReports = [...selectedReportIDs.slice(0, foundOptionIndex), ...selectedReportIDs.slice(foundOptionIndex + 1)];
+                setSelectedReportIDs(newSelectedReports);
+            }
+        },
+        [selectedReportIDs],
+    );
+
+    const footerContent = (
+        <Button
+            success
+            text={translate('common.save')}
+            pressOnEnter
+            onPress={() => {
+                onFiltersUpdate(selectedReportIDs);
+                Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+            }}
+            large
+        />
+    );
+
+    const isLoadingNewOptions = !!isSearchingForReports;
+    const showLoadingPlaceholder = !didScreenTransitionEnd || !areOptionsInitialized || !initialReportIDs || !personalDetails;
+
+    return (
+        <SelectionList
+            canSelectMultiple
+            sections={sections}
+            ListItem={InviteMemberListItem}
+            textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
+            headerMessage={headerMessage}
+            textInputValue={searchTerm}
+            footerContent={footerContent}
+            showScrollIndicator
+            shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
+            onChangeText={(value) => {
+                setSearchTerm(value);
+            }}
+            onSelectRow={handleParticipantSelection}
+            isLoadingNewOptions={isLoadingNewOptions}
+            showLoadingPlaceholder={showLoadingPlaceholder}
+        />
+    );
+}
+
+SearchFiltersChatsSelector.displayName = 'SearchFiltersChatsSelector';
+
+export default SearchFiltersChatsSelector;

src/languages/en.ts

@@ -148,6 +148,7 @@ export default {
         center: 'Center',
         from: 'From',
         to: 'To',
+        in: 'In',
         optional: 'Optional',
         new: 'New',
         search: 'Search',

src/languages/es.ts

@@ -137,6 +137,7 @@ export default {
         attachment: 'Archivo adjunto',
         from: 'De',
         to: 'A',
+        in: 'En',
         optional: 'Opcional',
         new: 'Nuevo',
         center: 'Centrar',

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -533,6 +533,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<Searc
     [SCREENS.SEARCH.ADVANCED_FILTERS_TAG_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersTagPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_FROM_RHP]: () => require<ReactComponentModule>('@pages/Search/SearchAdvancedFiltersPage/SearchFiltersFromPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_TO_RHP]: () => require<ReactComponentModule>('@pages/Search/SearchAdvancedFiltersPage/SearchFiltersToPage').default,
+    [SCREENS.SEARCH.ADVANCED_FILTERS_IN_RHP]: () => require<ReactComponentModule>('@pages/Search/SearchAdvancedFiltersPage/SearchFiltersInPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_HAS_RHP]: () => require<ReactComponentModule>('@pages/Search/SearchAdvancedFiltersPage/SearchFiltersHasPage').default,
 });
 

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -58,6 +58,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SEARCH.ADVANCED_FILTERS_TAG_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_FROM_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_TO_RHP,
+        SCREENS.SEARCH.ADVANCED_FILTERS_IN_RHP,
     ],
     [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [
         SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD,

src/libs/Navigation/linkingConfig/config.ts

@@ -1053,6 +1053,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_TAG_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TAG,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_FROM_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_FROM,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_TO_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TO,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_IN_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_IN,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_HAS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_HAS,
                     },
                 },

src/libs/OptionsListUtils.ts

@@ -2542,6 +2542,7 @@ export {
     getCurrentUserSearchTerms,
     getEmptyOptions,
     shouldUseBoldText,
+    getAlternateText,
 };
 
 export type {MemberForList, CategorySection, CategoryTreeSection, Options, OptionList, SearchOption, PayeePersonalDetails, Category, Tax, TaxRatesOption, Option, OptionTree};

src/libs/SearchUtils.ts

@@ -464,6 +464,7 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
                 filterKey === FILTER_KEYS.CURRENCY ||
                 filterKey === FILTER_KEYS.FROM ||
                 filterKey === FILTER_KEYS.TO ||
+                filterKey === FILTER_KEYS.IN ||
                 filterKey === FILTER_KEYS.HAS) &&
             Array.isArray(filterValue) &&
             filterValue.length > 0