Add natural language filter entry point to Spend page

src/ROUTES.ts

@@ -1574,6 +1574,7 @@ const ROUTES = {
         getRoute: ({name, jsonQuery}: {name: string; jsonQuery: SearchQueryString}) => `search/saved-search/rename?name=${name}&q=${encodeURIComponent(jsonQuery)}` as const,
     },
     SEARCH_COLUMNS: 'search/columns',
+    SEARCH_ADVANCED_FILTERS_DESCRIBE: 'search/filters/describe',
     SEARCH_ADVANCED_FILTERS: 'search/filters',
     SEARCH_ADVANCED_FILTERS_CONTENT: {
         route: 'search/filters/:filterKey',

src/SCREENS.ts

@@ -49,6 +49,7 @@ const SCREENS = {
         COLUMNS_RHP: 'Search_Columns_RHP',
         ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP',
         ADVANCED_FILTERS_CONTENT_RHP: 'Search_Advanced_Filters_Content_RHP',
+        ADVANCED_FILTERS_DESCRIBE_RHP: 'Search_Advanced_Filters_Describe_RHP',
         SAVED_SEARCH_RENAME_RHP: 'Search_Saved_Search_Rename_RHP',
         TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         TRANSACTION_HOLD_REASON_SEARCH: 'Search_Transaction_Hold_Reason_Search',

src/components/Search/FilterComponents/AdvancedFilters/SearchNLFilterContent.tsx

@@ -0,0 +1,106 @@
+/**
+ * Renders the natural-language ("Describe your search") input that parses a plain-English
+ * query into a structured search URL and navigates the user to the results.
+ */
+import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
+import {useSearchQueryContext} from '@components/Search/SearchContext';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+import {parseExpenseFilters} from '@libs/actions/Search';
+import {getFilterFromQuery} from '@libs/SearchQueryUtils';
+
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {Route} from '@src/ROUTES';
+
+import type {StyleProp, ViewStyle} from 'react-native';
+
+import React, {useState} from 'react';
+import {View} from 'react-native';
+
+type SearchNLFilterContentProps = {
+    /** Called with the destination route once the query is successfully parsed */
+    onSuccess: (route: Route) => void;
+
+    /** Optional style override for the input container */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /** Optional style override for the submit button container */
+    buttonContainerStyle?: StyleProp<ViewStyle>;
+};
+
+function SearchNLFilterContent({onSuccess, containerStyle, buttonContainerStyle}: SearchNLFilterContentProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+    const [nlQuery, setNlQuery] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const {currentSearchQueryJSON} = useSearchQueryContext();
+    const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
+
+    const handleSubmit = () => {
+        const trimmedQuery = nlQuery.trim();
+        if (!trimmedQuery) {
+            return;
+        }
+        setIsLoading(true);
+        setErrorMessage('');
+        const queryPolicyID = getFilterFromQuery(currentSearchQueryJSON, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID).value?.at(0);
+        const policyID = queryPolicyID ?? activePolicyID;
+        parseExpenseFilters(trimmedQuery, policyID)
+            .then((result) => {
+                setIsLoading(false);
+                if (!result) {
+                    return;
+                }
+                if (result.success) {
+                    const searchQuery = new URL(result.searchURL).searchParams.get('q') ?? '';
+                    onSuccess(ROUTES.SEARCH_ROOT.getRoute({query: searchQuery}));
+                } else {
+                    setErrorMessage(result.message);
+                }
+            })
+            .catch(() => {
+                setIsLoading(false);
+                setErrorMessage(translate('common.genericErrorMessage'));
+            });
+    };
+
+    return (
+        <>
+            <View style={[styles.flex1, styles.ph5, styles.pt4, containerStyle]}>
+                <Text style={styles.mb5}>{translate('search.filters.describeSearch.description')}</Text>
+                <TextInput
+                    label={translate('search.filters.describeSearch.inputLabel')}
+                    accessibilityLabel={translate('search.filters.describeSearch.inputLabel')}
+                    role={CONST.ROLE.PRESENTATION}
+                    value={nlQuery}
+                    onChangeText={setNlQuery}
+                    autoFocus
+                    multiline
+                    containerStyles={[styles.flex1]}
+                    touchableInputWrapperStyle={[styles.flex1]}
+                    textInputContainerStyles={[styles.flex1]}
+                    inputStyle={[styles.flex1]}
+                />
+            </View>
+            <FormAlertWithSubmitButton
+                buttonText={translate('search.filters.describeSearch.buttonText')}
+                containerStyles={buttonContainerStyle ?? [styles.m4, styles.mb5]}
+                isLoading={isLoading}
+                isAlertVisible={!!errorMessage}
+                message={errorMessage}
+                onSubmit={handleSubmit}
+                isDisabled={!nlQuery.trim() || isLoading}
+            />
+        </>
+    );
+}
+
+export default SearchNLFilterContent;

src/components/Search/FilterDropdowns/SearchAdvancedFiltersPopup/index.tsx

@@ -1,19 +1,32 @@
+import Icon from '@components/Icon';
+import {PressableWithFeedback} from '@components/Pressable';
 import SafeTriangle from '@components/SafeTriangle';
 import FilterList from '@components/Search/FilterComponents/AdvancedFilters/FilterList';
 import SearchAdvancedFiltersContent from '@components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent';
+import SearchNLFilterContent from '@components/Search/FilterComponents/AdvancedFilters/SearchNLFilterContent';
 import useUpdateFilterQuery from '@components/Search/hooks/useUpdateFilterQuery';
 import type {SearchQueryJSON} from '@components/Search/types';
+import SpacerView from '@components/SpacerView';
+import Text from '@components/Text';
 
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
+import getButtonState from '@libs/getButtonState';
+import Navigation from '@libs/Navigation/Navigation';
 import {getFilterNegatableValue} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 
+import variables from '@styles/variables';
+
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
 
 import React, {useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -25,46 +38,110 @@ import ReportFieldFilterContentPopupWrapper from './ReportFieldFilterContentPopu
 import TextInputFilterContentPopupWrapper from './TextInputFilterContentPopupWrapper';
 
 type SearchAdvancedFiltersPopupProps = {
+    /** Query JSON to build the current filter state */
     queryJSON: SearchQueryJSON;
+
+    /** Closes the filters popover overlay */
+    closeOverlay: () => void;
 };
 
-function SearchAdvancedFiltersPopup({queryJSON}: SearchAdvancedFiltersPopupProps) {
+function SearchAdvancedFiltersPopup({queryJSON, closeOverlay}: SearchAdvancedFiltersPopupProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+    const {translate} = useLocalize();
     const {windowHeight} = useWindowDimensions();
     const [selectedFilter, setSelectedFilter] = useState<SearchFilter['key']>(CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE);
+    const [isDescribeMode, setIsDescribeMode] = useState(false);
     const filterContentRef = useRef<View>(null);
     const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const icons = useMemoizedLazyExpensifyIcons(['Sparkles', 'ArrowRight']);
 
     const {updateFilterQueryParams} = useUpdateFilterQuery(queryJSON);
 
+    const selectFilter = (key: SearchFilter['key']) => {
+        setIsDescribeMode(false);
+        setSelectedFilter(key);
+    };
+
+    const getDescribeButtonBackground = (pressed: boolean) => {
+        if (pressed) {
+            return styles.buttonHoveredBG;
+        }
+        if (isDescribeMode) {
+            return styles.hoveredComponentBG;
+        }
+        return undefined;
+    };
+
+    const handleNLSuccess = (route: Route) => {
+        closeOverlay();
+        Navigation.navigate(route);
+    };
+
     return (
         <SafeTriangle submenuRef={filterContentRef}>
             <View style={[styles.flexRow, StyleUtils.getHeight(Math.min(windowHeight, CONST.ADVANCED_FILTERS_POPOVER_HEIGHT))]}>
-                <FilterList
-                    style={[styles.typeFiltersPopupContainer]}
-                    type={searchAdvancedFiltersForm?.type}
-                    policyID={getFilterNegatableValue(CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID, searchAdvancedFiltersForm)}
-                    selectedFilter={selectedFilter}
-                    onHoverIn={setSelectedFilter}
-                    onFocus={setSelectedFilter}
-                />
+                <View style={[styles.typeFiltersPopupContainer]}>
+                    <PressableWithFeedback
+                        style={({pressed}) => [styles.typeFilterMenu, getDescribeButtonBackground(pressed)]}
+                        accessible
+                        accessibilityLabel={translate('search.filters.describeSearch.title')}
+                        role={CONST.ROLE.BUTTON}
+                        sentryLabel="SearchAdvancedFiltersPopup-DescribeSearch"
+                        onHoverIn={() => setIsDescribeMode(true)}
+                        onPress={() => setIsDescribeMode(true)}
+                    >
+                        {({pressed}) => (
+                            <>
+                                <Icon
+                                    src={icons.Sparkles}
+                                    fill={theme.icon}
+                                    width={variables.iconSizeSmall}
+                                    height={variables.iconSizeSmall}
+                                />
+                                <Text style={[styles.flex1]}>{translate('search.filters.describeSearch.title')}</Text>
+                                <Icon
+                                    src={icons.ArrowRight}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(isDescribeMode, pressed))}
+                                    width={variables.iconSizeNormal}
+                                    height={variables.iconSizeNormal}
+                                />
+                            </>
+                        )}
+                    </PressableWithFeedback>
+                    <SpacerView
+                        shouldShow
+                        style={[styles.reportHorizontalRule]}
+                    />
+                    <FilterList
+                        type={searchAdvancedFiltersForm?.type}
+                        policyID={getFilterNegatableValue(CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID, searchAdvancedFiltersForm)}
+                        selectedFilter={isDescribeMode ? undefined : selectedFilter}
+                        onHoverIn={selectFilter}
+                        onFocus={selectFilter}
+                    />
+                </View>
                 <View
                     ref={filterContentRef}
                     style={[styles.filterContentContainer]}
                 >
-                    <SearchAdvancedFiltersContent
-                        values={searchAdvancedFiltersForm}
-                        baseFilterKey={selectedFilter}
-                        components={{
-                            List: ListFilterContentPopupWrapper,
-                            Text: TextInputFilterContentPopupWrapper,
-                            Amount: AmountFilterContentPopupWrapper,
-                            Date: DateFilterContentPopupWrapper,
-                            ReportField: ReportFieldFilterContentPopupWrapper,
-                        }}
-                        onChange={updateFilterQueryParams}
-                    />
+                    {isDescribeMode ? (
+                        <SearchNLFilterContent onSuccess={handleNLSuccess} />
+                    ) : (
+                        <SearchAdvancedFiltersContent
+                            values={searchAdvancedFiltersForm}
+                            baseFilterKey={selectedFilter}
+                            components={{
+                                List: ListFilterContentPopupWrapper,
+                                Text: TextInputFilterContentPopupWrapper,
+                                Amount: AmountFilterContentPopupWrapper,
+                                Date: DateFilterContentPopupWrapper,
+                                ReportField: ReportFieldFilterContentPopupWrapper,
+                            }}
+                            onChange={updateFilterQueryParams}
+                        />
+                    )}
                 </View>
             </View>
         </SafeTriangle>

src/components/Search/SearchPageHeader/SearchAdvancedFiltersButton.tsx

@@ -92,7 +92,12 @@ function SearchAdvancedFiltersButton({queryJSON}: SearchAdvancedFiltersButtonPro
               />
           );
 
-    const filtersPopup = () => <SearchAdvancedFiltersPopup queryJSON={queryJSON} />;
+    const filtersPopup = ({closeOverlay}: {closeOverlay: () => void}) => (
+        <SearchAdvancedFiltersPopup
+            queryJSON={queryJSON}
+            closeOverlay={closeOverlay}
+        />
+    );
 
     return (
         <FilterPopupButton

src/languages/de.ts

@@ -9081,6 +9081,12 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
                 [CONST.SEARCH.ACTION_FILTERS.PAY]: 'Bezahlen',
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Export',
             },
+            describeSearch: {
+                title: 'Beschreiben Sie Ihre Suche',
+                inputLabel: 'Ihre Suche',
+                description: 'Beschreiben Sie in einfachem Englisch, wonach Sie suchen, zum Beispiel „meals over $50 last month”.',
+                buttonText: 'Filter erstellen',
+            },
             filterType: {label: 'Filtertyp', has: {positive: 'hat', negative: 'hat nicht'}, is: {positive: 'ist', negative: 'ist nicht'}},
         },
         display: {

src/languages/el.ts

@@ -9304,6 +9304,12 @@ ${reportName}`,
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Εξαγωγή',
             },
             has: {submittedViolation: 'Υποβληθείσα παράβαση'},
+            describeSearch: {
+                title: 'Describe your search',
+                inputLabel: 'Your search',
+                description: 'Use plain English to describe what you\'re looking for, like "meals over $50 last month."',
+                buttonText: 'Create filters',
+            },
             filterType: {
                 label: 'Τύπος φίλτρου',
                 has: {positive: 'έχει', negative: 'δεν έχει'},

src/languages/en.ts

@@ -9223,6 +9223,12 @@ const translations = {
                 [CONST.SEARCH.ACTION_FILTERS.PAY]: 'Pay',
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Export',
             },
+            describeSearch: {
+                title: 'Describe your search',
+                inputLabel: 'Your search',
+                description: 'Use plain English to describe what you\'re looking for, like "meals over $50 last month."',
+                buttonText: 'Create filters',
+            },
             filterType: {
                 label: 'Filter type',
                 has: {

src/languages/es.ts

@@ -8944,6 +8944,12 @@ El plan Controlar empieza en 9 $ por miembro activo al mes.`,
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Exportar',
             },
             reportField: (name, value) => `${name} es ${value}`,
+            describeSearch: {
+                title: 'Describe tu búsqueda',
+                inputLabel: 'Tu búsqueda',
+                description: 'Usa un inglés sencillo para describir lo que buscas, como "comidas de más de 50 $ el mes pasado".',
+                buttonText: 'Crear filtros',
+            },
             filterType: {label: 'Tipo de filtro', has: {positive: 'tiene', negative: 'no tiene'}, is: {positive: 'es', negative: 'no es'}},
         },
         chartTitles: {

src/languages/fr.ts

@@ -9117,6 +9117,12 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
                 [CONST.SEARCH.ACTION_FILTERS.PAY]: 'Payer',
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Exporter',
             },
+            describeSearch: {
+                title: 'Décrivez votre recherche',
+                inputLabel: 'Votre recherche',
+                description: 'Décrivez en anglais simple ce que vous recherchez, par exemple « repas de plus de 50 $ le mois dernier ».',
+                buttonText: 'Créer des filtres',
+            },
             filterType: {label: 'Type de filtre', has: {positive: 'a', negative: 'n’a pas'}, is: {positive: 'est', negative: 'n’est pas'}},
         },
         display: {

src/languages/it.ts

@@ -9053,6 +9053,12 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
                 [CONST.SEARCH.ACTION_FILTERS.PAY]: 'Paga',
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'Esporta',
             },
+            describeSearch: {
+                title: 'Descrivi la tua ricerca',
+                inputLabel: 'La tua ricerca',
+                description: 'Usa un inglese semplice per descrivere cosa stai cercando, ad esempio: "pasti oltre 50 $ lo scorso mese".',
+                buttonText: 'Crea filtri',
+            },
             filterType: {label: 'Tipo di filtro', has: {positive: 'ha', negative: 'non ha'}, is: {positive: 'è', negative: 'non è'}},
         },
         display: {

src/languages/ja.ts

@@ -8941,6 +8941,12 @@ ${reportName}`,
                 [CONST.SEARCH.ACTION_FILTERS.PAY]: '支払う',
                 [CONST.SEARCH.ACTION_FILTERS.EXPORT]: 'エクスポート',
             },
+            describeSearch: {
+                title: '検索内容を入力してください',
+                inputLabel: '検索結果',
+                description: '「先月50ドルを超えた食事代」のように、探したい内容を平易な英語で入力してください。',
+                buttonText: 'フィルターを作成',
+            },
             filterType: {label: 'フィルタータイプ', has: {positive: '持っています', negative: '持っていません'}, is: {positive: 'は', negative: 'ではありません'}},
         },
         display: {