[Search v2] [App] Create Currency filter

src/ROUTES.ts

@@ -47,6 +47,8 @@ const ROUTES = {
 
     SEARCH_ADVANCED_FILTERS_STATUS: 'search/filters/status',
 
+    SEARCH_ADVANCED_FILTERS_CURRENCY: 'search/filters/currency',
+
     SEARCH_ADVANCED_FILTERS_MERCHANT: 'search/filters/merchant',
 
     SEARCH_ADVANCED_FILTERS_DESCRIPTION: 'search/filters/description',

src/SCREENS.ts

@@ -35,6 +35,7 @@ const SCREENS = {
         ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP',
         ADVANCED_FILTERS_TYPE_RHP: 'Search_Advanced_Filters_Type_RHP',
         ADVANCED_FILTERS_STATUS_RHP: 'Search_Advanced_Filters_Status_RHP',
+        ADVANCED_FILTERS_CURRENCY_RHP: 'Search_Advanced_Filters_Currency_RHP',
         ADVANCED_FILTERS_DESCRIPTION_RHP: 'Search_Advanced_Filters_Description_RHP',
         ADVANCED_FILTERS_MERCHANT_RHP: 'Search_Advanced_Filters_Merchant_RHP',
         ADVANCED_FILTERS_REPORT_ID_RHP: 'Search_Advanced_Filters_ReportID_RHP',

src/components/CurrencySelectionList/index.tsx

@@ -3,18 +3,19 @@ import React, {useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
+import SelectableListItem from '@components/SelectionList/SelectableListItem';
 import useLocalize from '@hooks/useLocalize';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {CurrencyListItem, CurrencySelectionListOnyxProps, CurrencySelectionListProps} from './types';
 
-function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode, onSelect, currencyList}: CurrencySelectionListProps) {
+function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode, onSelect, currencyList, selectedCurrencies = [], canSelectMultiple = false}: CurrencySelectionListProps) {
     const [searchValue, setSearchValue] = useState('');
     const {translate} = useLocalize();
 
     const {sections, headerMessage} = useMemo(() => {
         const currencyOptions: CurrencyListItem[] = Object.entries(currencyList ?? {}).map(([currencyCode, currencyInfo]) => {
-            const isSelectedCurrency = currencyCode === initiallySelectedCurrencyCode;
+            const isSelectedCurrency = currencyCode === initiallySelectedCurrencyCode || selectedCurrencies.includes(currencyCode);
             return {
                 currencyName: currencyInfo?.name ?? '',
                 text: `${currencyCode} - ${CurrencyUtils.getCurrencySymbol(currencyCode)}`,
@@ -28,6 +29,16 @@ function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode,
         const filteredCurrencies = currencyOptions.filter((currencyOption) => searchRegex.test(currencyOption.text ?? '') || searchRegex.test(currencyOption.currencyName));
         const isEmpty = searchValue.trim() && !filteredCurrencies.length;
 
+        if (canSelectMultiple) {
+            filteredCurrencies.sort((currencyA, currencyB) => {
+                if (currencyA.isSelected === currencyB.isSelected) {
+                    return 0;
+                }
+
+                return currencyA.isSelected ? -1 : 1;
+            });
+        }
+
         return {
             sections: isEmpty
                 ? []
@@ -38,12 +49,12 @@ function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode,
                   ],
             headerMessage: isEmpty ? translate('common.noResultsFound') : '',
         };
-    }, [currencyList, searchValue, translate, initiallySelectedCurrencyCode]);
+    }, [currencyList, searchValue, canSelectMultiple, translate, initiallySelectedCurrencyCode, selectedCurrencies]);
 
     return (
         <SelectionList
             sections={sections}
-            ListItem={RadioListItem}
+            ListItem={canSelectMultiple ? SelectableListItem : RadioListItem}
             textInputLabel={searchInputLabel}
             textInputValue={searchValue}
             onChangeText={setSearchValue}
@@ -52,6 +63,7 @@ function CurrencySelectionList({searchInputLabel, initiallySelectedCurrencyCode,
             headerMessage={headerMessage}
             initiallyFocusedOptionKey={initiallySelectedCurrencyCode}
             showScrollIndicator
+            canSelectMultiple={canSelectMultiple}
         />
     );
 }

src/components/CurrencySelectionList/types.ts

@@ -21,6 +21,12 @@ type CurrencySelectionListProps = CurrencySelectionListOnyxProps & {
 
     /** Callback to fire when a currency is selected */
     onSelect: (item: CurrencyListItem) => void;
+
+    /** The array of selected currencies. This prop should be used when multiple currencies can be selected */
+    selectedCurrencies?: string[];
+
+    /** Whether this is a multi-select list */
+    canSelectMultiple?: boolean;
 };
 
 export type {CurrencyListItem, CurrencySelectionListProps, CurrencySelectionListOnyxProps};

src/languages/en.ts

@@ -3621,6 +3621,7 @@ export default {
                 after: (date?: string) => `After ${date ?? ''}`,
             },
             status: 'Status',
+            currency: 'Currency',
         },
     },
     genericErrorPage: {

src/languages/es.ts

@@ -3675,6 +3675,7 @@ export default {
                 after: (date?: string) => `Después de ${date ?? ''}`,
             },
             status: 'Estado',
+            currency: 'Divisa',
         },
     },
     genericErrorPage: {

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

@@ -514,6 +514,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<Searc
     [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersDatePage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersTypePage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersStatusPage').default,
+    [SCREENS.SEARCH.ADVANCED_FILTERS_CURRENCY_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCurrencyPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_DESCRIPTION_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersDescriptionPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersMerchantPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersReportIDPage').default,

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -42,6 +42,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SEARCH.REPORT_RHP,
         SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_RHP,
+        SCREENS.SEARCH.ADVANCED_FILTERS_CURRENCY_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP,

src/libs/Navigation/linkingConfig/config.ts

@@ -1017,6 +1017,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_STATUS,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_CURRENCY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CURRENCY,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_MERCHANT,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_DESCRIPTION_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DESCRIPTION,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_REPORT_ID,

src/libs/SearchUtils.ts

@@ -424,6 +424,9 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
                 return `${CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS}:${filterValue as string}`;
             }
 
+            if (filterKey === INPUT_IDS.CURRENCY && Array.isArray(filterValue) && filterValue.length > 0) {
+                return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY}:${filterValue.join(',')}`;
+            }
             if (filterKey === INPUT_IDS.MERCHANT && filterValue) {
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT}:${filterValue as string}`;
             }
@@ -497,7 +500,7 @@ function buildFilterString(filterName: string, queryFilters: QueryFilter[]) {
     queryFilters.forEach((queryFilter, index) => {
         // If the previous queryFilter has the same operator (this rule applies only to eq and neq operators) then append the current value
         if ((queryFilter.operator === 'eq' && queryFilters[index - 1]?.operator === 'eq') || (queryFilter.operator === 'neq' && queryFilters[index - 1]?.operator === 'neq')) {
-            filterValueString += `,${filterName}:${queryFilter.value}`;
+            filterValueString += `,${sanitizeString(queryFilter.value.toString())}`;
         } else {
             filterValueString += ` ${filterName}${operatorToSignMap[queryFilter.operator]}${queryFilter.value}`;
         }

src/pages/Search/AdvancedSearchFilters.tsx

@@ -5,6 +5,7 @@ import {useOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import ScrollView from '@components/ScrollView';
 import type {AdvancedFiltersKeys} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -36,9 +37,13 @@ function getFilterDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, fiel
         return dateValue;
     }
 
-    if (fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY && filters[fieldName]) {
-        const categories = filters[fieldName] ?? [];
-        return categories.join(', ');
+    if ((fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY || fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY) && filters[fieldName]) {
+        const filterArray = filters[fieldName] ?? [];
+        return filterArray.join(', ');
+    }
+
+    if (fieldName === CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION) {
+        return filters[fieldName];
     }
 
     // Todo Once all Advanced filters are implemented this line can be cleaned up. See: https://github.com/Expensify/App/issues/45026
@@ -73,6 +78,11 @@ function AdvancedSearchFilters() {
                 description: 'common.date' as const,
                 route: ROUTES.SEARCH_ADVANCED_FILTERS_DATE,
             },
+            {
+                title: getFilterDisplayTitle(searchAdvancedFilters, CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY, translate),
+                description: 'common.currency' as const,
+                route: ROUTES.SEARCH_ADVANCED_FILTERS_CURRENCY,
+            },
             {
                 title: getFilterDisplayTitle(searchAdvancedFilters, CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT, translate),
                 description: 'common.merchant' as const,
@@ -109,7 +119,7 @@ function AdvancedSearchFilters() {
     };
 
     return (
-        <View style={[styles.flex1, styles.justifyContentBetween]}>
+        <ScrollView contentContainerStyle={[styles.flexGrow1, styles.justifyContentBetween]}>
             <View>
                 {advancedFilters.map((item) => {
                     const onPress = singleExecution(waitForNavigate(() => Navigation.navigate(item.route)));
@@ -127,11 +137,11 @@ function AdvancedSearchFilters() {
             </View>
             <FormAlertWithSubmitButton
                 buttonText={translate('search.viewResults')}
-                containerStyles={[styles.m4]}
+                containerStyles={[styles.m4, styles.mb5]}
                 onSubmit={onFormSubmit}
                 enabledWhenOffline
             />
-        </View>
+        </ScrollView>
     );
 }
 

src/pages/Search/SearchAdvancedFiltersPage.tsx

@@ -15,6 +15,7 @@ function SearchAdvancedFiltersPage() {
             testID={SearchAdvancedFiltersPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton title={translate('search.filtersHeader')} />

src/pages/Search/SearchFiltersCategoryPage.tsx

@@ -126,6 +126,7 @@ function SearchFiltersCategoryPage() {
             testID={SearchFiltersCategoryPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton
@@ -134,7 +135,7 @@ function SearchFiltersCategoryPage() {
                         Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
                     }}
                 />
-                <View style={[styles.flex1]}>
+                <View style={[styles.flex1, styles.pb5]}>
                     <SelectionList
                         sections={sections}
                         textInputValue={searchTerm}

src/pages/Search/SearchFiltersCurrencyPage.tsx

@@ -0,0 +1,71 @@
+import React, {useState} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import CurrencySelectionList from '@components/CurrencySelectionList';
+import type {CurrencyListItem} from '@components/CurrencySelectionList/types';
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchActions from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+function SearchFiltersCurrencyPage() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const [selectedCurrencies, setSelectedCurrencies] = useState<string[]>(searchAdvancedFiltersForm?.currency ?? []);
+
+    const handleOnSelectOption = (option: CurrencyListItem) => {
+        if (selectedCurrencies.includes(option.currencyCode)) {
+            setSelectedCurrencies(selectedCurrencies.filter((currency) => currency !== option.currencyCode));
+            return;
+        }
+
+        setSelectedCurrencies([option.currencyCode, ...selectedCurrencies]);
+    };
+
+    const handleOnSubmit = () => {
+        SearchActions.updateAdvancedFilters({...searchAdvancedFiltersForm, currency: selectedCurrencies});
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
+
+    return (
+        <ScreenWrapper
+            testID={SearchFiltersCurrencyPage.displayName}
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
+        >
+            {({didScreenTransitionEnd}) => (
+                <FullPageNotFoundView shouldShow={false}>
+                    <HeaderWithBackButton title={translate('search.filters.currency')} />
+                    <CurrencySelectionList
+                        canSelectMultiple
+                        selectedCurrencies={selectedCurrencies}
+                        searchInputLabel={translate('common.search')}
+                        onSelect={(option: CurrencyListItem) => {
+                            if (!didScreenTransitionEnd) {
+                                return;
+                            }
+                            handleOnSelectOption(option);
+                        }}
+                    />
+                    <FormAlertWithSubmitButton
+                        buttonText={translate('common.save')}
+                        containerStyles={[styles.m4, styles.mb5]}
+                        onSubmit={handleOnSubmit}
+                        enabledWhenOffline
+                    />
+                </FullPageNotFoundView>
+            )}
+        </ScreenWrapper>
+    );
+}
+
+SearchFiltersCurrencyPage.displayName = 'SearchFiltersCurrencyPage';
+
+export default SearchFiltersCurrencyPage;

src/pages/Search/SearchFiltersDatePage.tsx

@@ -34,6 +34,7 @@ function SearchFiltersDatePage() {
             testID={SearchFiltersDatePage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton

src/pages/Search/SearchFiltersDescriptionPage.tsx

@@ -36,6 +36,7 @@ function SearchFiltersDescriptionPage() {
             testID={SearchFiltersDescriptionPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton
@@ -51,7 +52,7 @@ function SearchFiltersDescriptionPage() {
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
-                    <View style={styles.mb4}>
+                    <View style={styles.mb5}>
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.DESCRIPTION}

src/pages/Search/SearchFiltersMerchantPage.tsx

@@ -36,6 +36,7 @@ function SearchFiltersMerchantPage() {
             testID={SearchFiltersMerchantPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton
@@ -51,7 +52,7 @@ function SearchFiltersMerchantPage() {
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
-                    <View style={styles.mb4}>
+                    <View style={styles.mb5}>
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.MERCHANT}

src/pages/Search/SearchFiltersReportIDPage.tsx

@@ -36,6 +36,7 @@ function SearchFiltersReportIDPage() {
             testID={SearchFiltersReportIDPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
+            includeSafeAreaPaddingBottom={false}
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton
@@ -51,7 +52,7 @@ function SearchFiltersReportIDPage() {
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                 >
-                    <View style={styles.mb4}>
+                    <View style={styles.mb5}>
                         <InputWrapper
                             InputComponent={TextInput}
                             inputID={INPUT_IDS.REPORT_ID}