Merge pull request #46799 from software-mansion-labs/289Adam289/46027…

…-advanced-filters-keyword

Add keyword advanced filter for Search

src/ROUTES.ts

@@ -56,6 +56,7 @@ const ROUTES = {
  SEARCH_ADVANCED_FILTERS_REPORT_ID: 'search/filters/reportID',
 
  SEARCH_ADVANCED_FILTERS_CATEGORY: 'search/filters/category',
+ SEARCH_ADVANCED_FILTERS_KEYWORD: 'search/filters/keyword',
  SEARCH_ADVANCED_FILTERS_CARD: 'search/filters/card',
 
  SEARCH_REPORT: {

src/SCREENS.ts

@@ -40,6 +40,7 @@ const SCREENS = {
  ADVANCED_FILTERS_MERCHANT_RHP: 'Search_Advanced_Filters_Merchant_RHP',
  ADVANCED_FILTERS_REPORT_ID_RHP: 'Search_Advanced_Filters_ReportID_RHP',
  ADVANCED_FILTERS_CATEGORY_RHP: 'Search_Advanced_Filters_Category_RHP',
+ ADVANCED_FILTERS_KEYWORD_RHP: 'Search_Advanced_Filters_Keyword_RHP',
  ADVANCED_FILTERS_CARD_RHP: 'Search_Advanced_Filters_Card_RHP',
  TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
  BOTTOM_TAB: 'Search_Bottom_Tab',

src/languages/en.ts

@@ -3662,6 +3662,8 @@ export default {
  after: (date?: string) => `After ${date ?? ''}`,
  },
  status: 'Status',
+ keyword: 'Keyword',
+ hasKeywords: 'Has keywords',
  currency: 'Currency',
  },
  },

src/languages/es.ts

@@ -3716,6 +3716,8 @@ export default {
  after: (date?: string) => `Después de ${date ?? ''}`,
  },
  status: 'Estado',
+ keyword: 'Palabra clave',
+ hasKeywords: 'Tiene palabras clave',
  currency: 'Divisa',
  },
  },

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

@@ -520,6 +520,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<Searc
  [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,
  [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCategoryPage').default,
+ [SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersKeywordPage').default,
  [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCardPage').default,
 });
 

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -50,6 +50,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
  SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP,
  SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP,
  SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP,
+ SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP,
  ],
  [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [
  SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD,

src/libs/Navigation/linkingConfig/config.ts

@@ -1023,6 +1023,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
  [SCREENS.SEARCH.ADVANCED_FILTERS_DESCRIPTION_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DESCRIPTION,
  [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_REPORT_ID,
  [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CATEGORY,
+ [SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_KEYWORD,
  [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CARD,
  },
  },

src/libs/SearchUtils.ts

@@ -465,6 +465,10 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
  return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID}:${cardIDs.join(',')}`;
  }
 
+ if (filterKey === INPUT_IDS.KEYWORD && filterValue) {
+ return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD}:${filterValue as string}`;
+ }
+
  return undefined;
  })
  .filter(Boolean)
@@ -521,7 +525,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 += `,${sanitizeString(queryFilter.value.toString())}`;
+ filterValueString += ` ${sanitizeString(queryFilter.value.toString())}`;
  } else {
  filterValueString += ` ${filterName}${operatorToSignMap[queryFilter.operator]}${queryFilter.value}`;
  }

src/pages/Search/AdvancedSearchFilters.tsx

@@ -119,6 +119,11 @@ function AdvancedSearchFilters() {
  description: 'common.category' as const,
  route: ROUTES.SEARCH_ADVANCED_FILTERS_CATEGORY,
  },
+ {
+ title: getFilterDisplayTitle(searchAdvancedFilters, CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, translate),
+ description: 'search.filters.hasKeywords' as const,
+ route: ROUTES.SEARCH_ADVANCED_FILTERS_KEYWORD,
+ },
  {
  title: getFilterCardDisplayTitle(searchAdvancedFilters, cardList),
  description: 'common.card' as const,

src/pages/Search/SearchFiltersKeywordPage.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {updateAdvancedFilters} from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm';
+
+function SearchFiltersKeywordPage() {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+
+ const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+ const keyword = searchAdvancedFiltersForm?.[INPUT_IDS.KEYWORD];
+ const {inputCallbackRef} = useAutoFocusInput();
+
+ const updateKeywordFilter = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM>) => {
+ updateAdvancedFilters(values);
+ Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+ };
+
+ return (
+ <ScreenWrapper
+ testID={SearchFiltersKeywordPage.displayName}
+ shouldShowOfflineIndicatorInWideScreen
+ offlineIndicatorStyle={styles.mtAuto}
+ >
+ <FullPageNotFoundView shouldShow={false}>
+ <HeaderWithBackButton
+ title={translate('search.filters.keyword')}
+ onBackButtonPress={() => {
+ Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+ }}
+ />
+ <FormProvider
+ style={[styles.flex1, styles.ph5]}
+ formID={ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}
+ onSubmit={updateKeywordFilter}
+ submitButtonText={translate('common.save')}
+ enabledWhenOffline
+ >
+ <View style={styles.mb4}>
+ <InputWrapper
+ InputComponent={TextInput}
+ inputID={INPUT_IDS.KEYWORD}
+ name={INPUT_IDS.KEYWORD}
+ defaultValue={keyword}
+ label={translate('search.filters.keyword')}
+ accessibilityLabel={translate('search.filters.keyword')}
+ role={CONST.ROLE.PRESENTATION}
+ ref={inputCallbackRef}
+ />
+ </View>
+ </FormProvider>
+ </FullPageNotFoundView>
+ </ScreenWrapper>
+ );
+}
+
+SearchFiltersKeywordPage.displayName = 'SearchFiltersKeywordPage';
+
+export default SearchFiltersKeywordPage;

src/types/form/SearchAdvancedFiltersForm.ts

@@ -13,6 +13,7 @@ const INPUT_IDS = {
  MERCHANT: 'merchant',
  DESCRIPTION: 'description',
  REPORT_ID: 'reportID',
+ KEYWORD: 'keyword',
 } as const;
 
 type InputID = ValueOf<typeof INPUT_IDS>;
@@ -31,6 +32,7 @@ type SearchAdvancedFiltersForm = Form<
  [INPUT_IDS.MERCHANT]: string;
  [INPUT_IDS.DESCRIPTION]: string;
  [INPUT_IDS.REPORT_ID]: string;
+ [INPUT_IDS.KEYWORD]: string;
  }
 >;