Align device and in-app back navigation in "Paid" filter section

src/CONST/index.ts

@@ -7587,6 +7587,9 @@ const CONST = {
             AFTER: 'After',
             BEFORE: 'Before',
         },
+        DATE_FILTER_SUB_PAGE: {
+            MAIN: 'main',
+        },
         AMOUNT_MODIFIERS: {
             LESS_THAN: 'LessThan',
             GREATER_THAN: 'GreaterThan',

src/ROUTES.ts

@@ -108,9 +108,13 @@ const ROUTES = {
     },
     SEARCH_COLUMNS: 'search/columns',
     SEARCH_ADVANCED_FILTERS: {
-        route: 'search/filters/:filterKey?',
-        getRoute: (filterKey?: SearchFilterKey | UserFriendlyKey) => {
-            return `search/filters/${filterKey ?? ''}` as const;
+        route: 'search/filters/:filterKey?/:subPage?',
+        getRoute: (filterKey?: SearchFilterKey | UserFriendlyKey, subPage?: string) => {
+            const baseRoute = `search/filters/${filterKey ?? ''}` as const;
+            if (!subPage || !filterKey) {
+                return baseRoute;
+            }
+            return `${baseRoute}/${encodeURIComponent(subPage)}` as const;
         },
     },
     SEARCH_REPORT: {

src/components/Search/FilterComponents/DateFilterBase.tsx

@@ -20,16 +20,30 @@ type DateFilterBaseProps = {
     dateKey: SearchDateFilterKeys;
     back: () => void;
     onSubmit: (values: Record<string, string | null>) => void;
+    selectedDateModifier?: SearchDateModifier | null;
+    onSelectDateModifier?: (dateModifier: SearchDateModifier | null) => void;
 };
 
-function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
+function DateFilterBase({title, dateKey, back, onSubmit, selectedDateModifier: selectedDateModifierProp, onSelectDateModifier}: DateFilterBaseProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const searchDatePresetFilterBaseRef = useRef<SearchDatePresetFilterBaseHandle>(null);
     const [searchAdvancedFiltersForm, searchAdvancedFiltersFormMetadata] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true});
     const isSearchAdvancedFiltersFormLoading = isLoadingOnyxValue(searchAdvancedFiltersFormMetadata);
-    const [selectedDateModifier, setSelectedDateModifier] = useState<SearchDateModifier | null>(null);
+    const [selectedDateModifierState, setSelectedDateModifierState] = useState<SearchDateModifier | null>(null);
+    const isDateModifierControlled = selectedDateModifierProp !== undefined;
+    const selectedDateModifier = isDateModifierControlled ? selectedDateModifierProp : selectedDateModifierState;
+    const setSelectedDateModifier = useCallback(
+        (dateModifier: SearchDateModifier | null) => {
+            if (isDateModifierControlled) {
+                onSelectDateModifier?.(dateModifier);
+                return;
+            }
+            setSelectedDateModifierState(dateModifier);
+        },
+        [isDateModifierControlled, onSelectDateModifier],
+    );
 
     const dateOnKey = dateKey.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)
         ? (dateKey.replace(CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX, CONST.SEARCH.REPORT_FIELD.ON_PREFIX) as ReportFieldDateKey)
@@ -81,7 +95,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
         }
 
         searchDatePresetFilterBaseRef.current.clearDateValues();
-    }, [selectedDateModifier]);
+    }, [selectedDateModifier, setSelectedDateModifier]);
 
     const save = useCallback(() => {
         if (!searchDatePresetFilterBaseRef.current) {
@@ -101,7 +115,7 @@ function DateFilterBase({title, dateKey, back, onSubmit}: DateFilterBaseProps) {
             [dateBeforeKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.BEFORE] ?? null,
             [dateAfterKey]: dateValues[CONST.SEARCH.DATE_MODIFIERS.AFTER] ?? null,
         });
-    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, onSubmit]);
+    }, [selectedDateModifier, dateOnKey, dateBeforeKey, dateAfterKey, onSubmit, setSelectedDateModifier]);
 
     const goBack = () => {
         if (selectedDateModifier) {

src/components/Search/SearchDatePresetFilterBasePage.tsx

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, {useCallback, useMemo} from 'react';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
+import useSubPage from '@hooks/useSubPage';
+import type {PageConfig, SubPageProps} from '@hooks/useSubPage/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {updateAdvancedFilters} from '@libs/actions/Search';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SearchDateModifier} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ROUTES from '@src/ROUTES';
 import DateFilterBase from './FilterComponents/DateFilterBase';
-import type {SearchDateFilterKeys} from './types';
+import type {SearchDateFilterKeys, SearchFilterKey} from './types';
+
+function EmptySubPageComponent() {
+    return null;
+}
+
+const DATE_FILTER_SUB_PAGES: Array<PageConfig<SubPageProps>> = [
+    {pageName: CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN, component: EmptySubPageComponent},
+    {pageName: CONST.SEARCH.DATE_MODIFIERS.ON, component: EmptySubPageComponent},
+    {pageName: CONST.SEARCH.DATE_MODIFIERS.AFTER, component: EmptySubPageComponent},
+    {pageName: CONST.SEARCH.DATE_MODIFIERS.BEFORE, component: EmptySubPageComponent},
+];
 
 type SearchDatePresetFilterBasePageProps = {
     /** Key used for the date filter */
-    dateKey: SearchDateFilterKeys;
+    dateKey: Extract<SearchDateFilterKeys, SearchFilterKey>;
 
     /** The translation key for the page title */
     titleKey: TranslationPaths;
@@ -21,9 +37,42 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const goBack = () => {
+    const goBack = useCallback(() => {
         Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());
-    };
+    }, []);
+
+    const buildSubPageRoute = useCallback((subPage: string) => ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(dateKey, subPage), [dateKey]);
+
+    const {currentPageName, resetToPage, isRedirecting} = useSubPage<SubPageProps>({
+        pages: DATE_FILTER_SUB_PAGES,
+        startFrom: 0,
+        onFinished: goBack,
+        buildRoute: buildSubPageRoute,
+    });
+
+    const selectedDateModifier = useMemo<SearchDateModifier | null>(() => {
+        if (currentPageName === CONST.SEARCH.DATE_MODIFIERS.ON || currentPageName === CONST.SEARCH.DATE_MODIFIERS.AFTER || currentPageName === CONST.SEARCH.DATE_MODIFIERS.BEFORE) {
+            return currentPageName;
+        }
+
+        return null;
+    }, [currentPageName]);
+
+    const selectDateModifier = useCallback(
+        (dateModifier: SearchDateModifier | null) => {
+            if (!dateModifier) {
+                Navigation.goBack(buildSubPageRoute(CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN));
+                return;
+            }
+
+            resetToPage(dateModifier);
+        },
+        [buildSubPageRoute, resetToPage],
+    );
+
+    if (isRedirecting) {
+        return <FullScreenLoadingIndicator />;
+    }
 
     return (
         <ScreenWrapper
@@ -37,6 +86,8 @@ function SearchDatePresetFilterBasePage({dateKey, titleKey}: SearchDatePresetFil
                 title={translate(titleKey)}
                 dateKey={dateKey}
                 back={goBack}
+                selectedDateModifier={selectedDateModifier}
+                onSelectDateModifier={selectDateModifier}
                 onSubmit={(values) => {
                     updateAdvancedFilters(values);
                     Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute());

src/libs/Navigation/linkingConfig/config.ts

@@ -1871,13 +1871,13 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_GROUP_BY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.GROUP_BY),
                         [SCREENS.SEARCH.ADVANCED_FILTERS_VIEW_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.VIEW),
                         [SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_SUBMITTED_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_APPROVED_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.APPROVED),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_PAID_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_EXPORTED_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTED),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_POSTED_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED),
-                        [SCREENS.SEARCH.ADVANCED_FILTERS_WITHDRAWN_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN),
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_SUBMITTED_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_APPROVED_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.APPROVED)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_PAID_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_EXPORTED_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTED)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_POSTED_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED)}/:subPage?`,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_WITHDRAWN_RHP]: `${ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN)}/:subPage?`,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_CURRENCY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY),
                         [SCREENS.SEARCH.ADVANCED_FILTERS_GROUP_CURRENCY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.GROUP_CURRENCY),
                         [SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT),

src/pages/Search/AdvancedSearchFilters.tsx

@@ -82,37 +82,37 @@ const baseFilterConfig = {
     date: {
         getTitle: getFilterDisplayTitle,
         description: 'common.date' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     submitted: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.submitted' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     approved: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.approved' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.APPROVED),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.APPROVED, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     paid: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.paid' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.PAID, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     exported: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.exported' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTED),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPORTED, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     posted: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.posted' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     withdrawn: {
         getTitle: getFilterDisplayTitle,
         description: 'search.filters.withdrawn' as const,
-        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN),
+        route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWN, CONST.SEARCH.DATE_FILTER_SUB_PAGE.MAIN),
     },
     currency: {
         getTitle: getFilterDisplayTitle,