diff --git a/src/CONST.ts b/src/CONST.ts
index d23a7f695ddc..10c1b5679a8f 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -4345,6 +4345,12 @@ const CONST = {
MAX_TAX_RATE_INTEGER_PLACES: 4,
MAX_TAX_RATE_DECIMAL_PLACES: 4,
+
+ SEARCH_QUERIES: {
+ ALL: 'all',
+ SENT: 'sent',
+ DRAFTS: 'drafts'
+ }
} as const;
type Country = keyof typeof CONST.ALL_COUNTRIES;
diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
index 5efa9592034f..3299b7e4f0c4 100644
--- a/src/components/TestToolMenu.tsx
+++ b/src/components/TestToolMenu.tsx
@@ -10,6 +10,7 @@ import * as Network from '@userActions/Network';
import * as Session from '@userActions/Session';
import * as User from '@userActions/User';
import CONFIG from '@src/CONFIG';
+import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx';
@@ -103,6 +104,16 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
}}
/>
+ {/* Navigate to the new Search Page. This button is temporary and should be removed after passing QA tests. */}
+
+
>
);
}
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
index 41d6f25f3353..404b3ba68d92 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -102,10 +102,11 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
-
+ {/** @TODO: Uncomment this code and change order of the items according to the designs once the new search tab is ready */}
+ {/*
{
- Navigation.navigate(ROUTES.SEARCH.getRoute('all'));
+ Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.ALL));
}}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.search')}
@@ -121,9 +122,9 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
/>
-
-
+ */}
+
);
}
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 135ab66276a2..971705351cd2 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -13,7 +13,7 @@ function SearchPage({route}: SearchPageProps) {
return (
-
+
);
}
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index 96b6aaf191fd..39d74a514bcc 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -7,6 +7,7 @@ import useSingleExecution from '@hooks/useSingleExecution';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as Expensicons from '@src/components/Icon/Expensicons';
+import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type IconAsset from '@src/types/utils/IconAsset';
@@ -20,23 +21,23 @@ function SearchPageBottomTab() {
const styles = useThemeStyles();
const {singleExecution} = useSingleExecution();
const activeRoute = useActiveRoute();
- const currentQuery = activeRoute?.params?.query;
+ const currentQuery = activeRoute?.params && 'query' in activeRoute.params ? activeRoute?.params?.query : '';
const searchMenuItems: SearchMenuItem[] = [
{
title: 'All',
icon: Expensicons.ExpensifyLogoNew,
- action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('all'))),
+ action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.ALL))),
},
{
title: 'Sent',
icon: Expensicons.ExpensifyLogoNew,
- action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('sent'))),
+ action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.SENT))),
},
{
title: 'Drafts',
icon: Expensicons.ExpensifyLogoNew,
- action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute('drafts'))),
+ action: singleExecution(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH_QUERIES.DRAFTS))),
},
];
diff --git a/src/pages/Search/SearchResults.tsx b/src/pages/Search/SearchResults.tsx
index b0d4c3bede39..261484bc13ec 100644
--- a/src/pages/Search/SearchResults.tsx
+++ b/src/pages/Search/SearchResults.tsx
@@ -1,12 +1,15 @@
import React from 'react';
import Text from '@components/Text';
+import useThemeStyles from '@hooks/useThemeStyles';
type SearchResultsProps = {
- filter: string;
+ query: string;
};
-function SearchResults({filter}: SearchResultsProps) {
- return Search results for: |{filter}| filter;
+function SearchResults({query}: SearchResultsProps) {
+ const styles = useThemeStyles();
+
+ return Search results for: |{query}| filter;
}
SearchResults.displayName = 'SearchResults';