Add keyword advanced filter for Search

src/ROUTES.ts

@@ -55,6 +55,8 @@ const ROUTES = {
 
     SEARCH_ADVANCED_FILTERS_CATEGORY: 'search/filters/category',
 
+    SEARCH_ADVANCED_FILTERS_KEYWORD: 'search/filters/keyword',
+
     SEARCH_REPORT: {
         route: 'search/view/:reportID',
         getRoute: (reportID: string) => `search/view/${reportID}` as const,

src/SCREENS.ts

@@ -39,6 +39,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',
         TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         BOTTOM_TAB: 'Search_Bottom_Tab',
     },

src/languages/en.ts

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

src/languages/es.ts

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

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

@@ -518,6 +518,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,
 });
 
 const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchReportParamList>({

src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts

@@ -49,6 +49,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

@@ -1021,6 +1021,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.RIGHT_MODAL.RESTRICTED_ACTION]: {

src/libs/SearchUtils.ts

@@ -441,6 +441,10 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY}:${categories.map(sanitizeString).join(',')}`;
             }
 
+            if (filterKey === INPUT_IDS.KEYWORD && filterValue) {
+                return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD}:${filterValue as string}`;
+            }
+
             return undefined;
         })
         .filter(Boolean)

src/pages/Search/AdvancedSearchFilters.tsx

@@ -93,6 +93,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,
+            },
         ],
         [searchAdvancedFilters, translate],
     );

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

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