[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}