Advanced date filter view

src/ONYXKEYS.ts

@@ -593,6 +593,8 @@ const ONYXKEYS = {
         NETSUITE_CUSTOM_FORM_ID_FORM_DRAFT: 'netsuiteCustomFormIDFormDraft',
         SAGE_INTACCT_DIMENSION_TYPE_FORM: 'sageIntacctDimensionTypeForm',
         SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft',
+        SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersForm',
+        SEARCH_ADVANCED_FILTERS_FORM_DRAFT: 'searchAdvancedFiltersFormDraft',
     },
 } as const;
 
@@ -665,6 +667,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.NETSUITE_TOKEN_INPUT_FORM]: FormTypes.NetSuiteTokenInputForm;
     [ONYXKEYS.FORMS.NETSUITE_CUSTOM_FORM_ID_FORM]: FormTypes.NetSuiteCustomFormIDForm;
     [ONYXKEYS.FORMS.SAGE_INTACCT_DIMENSION_TYPE_FORM]: FormTypes.SageIntacctDimensionForm;
+    [ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM]: FormTypes.SearchAdvancedFiltersForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/libs/actions/Search.ts

@@ -1,5 +1,6 @@
 import Onyx from 'react-native-onyx';
 import type {OnyxUpdate} from 'react-native-onyx';
+import type {FormOnyxValues} from '@components/Form/types';
 import * as API from '@libs/API';
 import type {SearchParams} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
@@ -108,4 +109,12 @@ function exportSearchItemsToCSV(query: string, reportIDList: Array<string | unde
 
     fileDownload(ApiUtils.getCommandURL({command: WRITE_COMMANDS.EXPORT_SEARCH_ITEMS_TO_CSV}), 'Expensify.csv', '', false, formData, CONST.NETWORK.METHOD.POST, onDownloadFailed);
 }
-export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV};
+
+/**
+ * Updates the form values for the advanced search form.
+ */
+function updateAdvancedFilters(values: FormOnyxValues<typeof ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM>) {
+    Onyx.merge(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, values);
+}
+
+export {search, createTransactionThread, deleteMoneyRequestOnSearch, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch, exportSearchItemsToCSV, updateAdvancedFilters};

src/pages/Search/SearchFiltersDatePage.tsx

@@ -1,16 +1,34 @@
 import React from 'react';
-import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import DatePicker from '@components/DatePicker';
+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 useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import Text from '@src/components/Text';
+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 SearchFiltersDatePage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const dateAfter = searchAdvancedFiltersForm?.[INPUT_IDS.DATE_AFTER];
+    const dateBefore = searchAdvancedFiltersForm?.[INPUT_IDS.DATE_BEFORE];
+
+    const updateDateFilter = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM>) => {
+        updateAdvancedFilters(values);
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
+
     return (
         <ScreenWrapper
             testID={SearchFiltersDatePage.displayName}
@@ -19,10 +37,30 @@ function SearchFiltersDatePage() {
         >
             <FullPageNotFoundView shouldShow={false}>
                 <HeaderWithBackButton title={translate('common.date')} />
-                <View style={[styles.flex1, styles.ph3]}>
-                    {/* temporary placeholder, will be implemented in https://github.com/Expensify/App/issues/45026 */}
-                    <Text>Advanced filters Date form</Text>
-                </View>
+                <FormProvider
+                    style={[styles.flex1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}
+                    onSubmit={updateDateFilter}
+                    submitButtonText={translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <InputWrapper
+                        InputComponent={DatePicker}
+                        inputID={INPUT_IDS.DATE_AFTER}
+                        label={translate('search.filters.date.after')}
+                        defaultValue={dateAfter}
+                        maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                        minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+                    />
+                    <InputWrapper
+                        InputComponent={DatePicker}
+                        inputID={INPUT_IDS.DATE_BEFORE}
+                        label={translate('search.filters.date.before')}
+                        defaultValue={dateBefore}
+                        maxDate={CONST.CALENDAR_PICKER.MAX_DATE}
+                        minDate={CONST.CALENDAR_PICKER.MIN_DATE}
+                    />
+                </FormProvider>
             </FullPageNotFoundView>
         </ScreenWrapper>
     );

src/types/form/SearchAdvancedFiltersForm.ts

@@ -0,0 +1,22 @@
+import type {ValueOf} from 'type-fest';
+import type Form from './Form';
+
+const INPUT_IDS = {
+    TYPE: 'type',
+    DATE_AFTER: 'dateAfter',
+    DATE_BEFORE: 'dateBefore',
+} as const;
+
+type InputID = ValueOf<typeof INPUT_IDS>;
+
+type SearchAdvancedFiltersForm = Form<
+    InputID,
+    {
+        [INPUT_IDS.TYPE]: string;
+        [INPUT_IDS.DATE_AFTER]: string;
+        [INPUT_IDS.DATE_BEFORE]: string;
+    }
+>;
+
+export type {SearchAdvancedFiltersForm};
+export default INPUT_IDS;

src/types/form/index.ts

@@ -62,5 +62,6 @@ export type {SageIntactCredentialsForm} from './SageIntactCredentialsForm';
 export type {NetSuiteCustomFieldForm} from './NetSuiteCustomFieldForm';
 export type {NetSuiteTokenInputForm} from './NetSuiteTokenInputForm';
 export type {NetSuiteCustomFormIDForm} from './NetSuiteCustomFormIDForm';
+export type {SearchAdvancedFiltersForm} from './SearchAdvancedFiltersForm';
 export type {EditExpensifyCardLimitForm} from './EditExpensifyCardLimitForm';
 export type {default as Form} from './Form';