Merge pull request #40293 from Expensify/georgia-search-bottomTabBar

[Search v1] Implement Bottom Tab Bar Changes
Expensify · Jun 7, 2024 · c03552b · c03552b
2 parents 6709359 + 0854c52
commit c03552b
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 21 deletions.
diff --git a/assets/images/inbox.svg b/assets/images/inbox.svg
diff --git a/assets/images/money-search.svg b/assets/images/money-search.svg
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -96,6 +96,7 @@ import Home from '@assets/images/home.svg';
 import Hourglass from '@assets/images/hourglass.svg';
 import ImageCropCircleMask from '@assets/images/image-crop-circle-mask.svg';
 import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
+import Inbox from '@assets/images/inbox.svg';
 import Info from '@assets/images/info.svg';
 import QBOSquare from '@assets/images/integrationicons/qbo-icon-square.svg';
 import XeroSquare from '@assets/images/integrationicons/xero-icon-square.svg';
@@ -116,6 +117,7 @@ import Menu from '@assets/images/menu.svg';
 import Meter from '@assets/images/meter.svg';
 import MoneyBag from '@assets/images/money-bag.svg';
 import MoneyCircle from '@assets/images/money-circle.svg';
+import MoneySearch from '@assets/images/money-search.svg';
 import MoneyWaving from '@assets/images/money-waving.svg';
 import Monitor from '@assets/images/monitor.svg';
 import Mute from '@assets/images/mute.svg';
@@ -270,6 +272,7 @@ export {
     History,
     Home,
     Hourglass,
+    Inbox,
     ImageCropCircleMask,
     ImageCropSquareMask,
     Info,
@@ -290,6 +293,7 @@ export {
     Megaphone,
     MoneyBag,
     MoneyCircle,
+    MoneySearch,
     MoneyWaving,
     Monitor,
     Mute,

diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx
@@ -5,14 +5,11 @@ import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ApiUtils from '@libs/ApiUtils';
 import compose from '@libs/compose';
-import Navigation from '@libs/Navigation/Navigation';
 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';
 import Button from './Button';
 import {withNetwork} from './OnyxProvider';
@@ -92,17 +89,6 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
                     onPress={() => Session.invalidateCredentials()}
                 />
             </TestToolRow>
-
-            {/* Navigate to the new Search Page. This button is temporary and should be removed after passing QA tests. */}
-            <TestToolRow title="New Search Page">
-                <Button
-                    small
-                    text="Navigate"
-                    onPress={() => {
-                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
-                    }}
-                />
-            </TestToolRow>
         </>
     );
 }

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -148,7 +148,7 @@ export default {
         magicCode: 'Magic code',
         twoFactorCode: 'Two-factor code',
         workspaces: 'Workspaces',
-        chats: 'Chats',
+        inbox: 'Inbox',
         group: 'Group',
         profile: 'Profile',
         referral: 'Referral',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -139,7 +139,7 @@ export default {
         magicCode: 'Código mágico',
         twoFactorCode: 'Autenticación de dos factores',
         workspaces: 'Espacios de trabajo',
-        chats: 'Chats',
+        inbox: 'Bandeja de entrada',
         group: 'Grupo',
         profile: 'Perfil',
         referral: 'Remisión',

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -70,19 +70,19 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
 
     return (
         <View style={styles.bottomTabBarContainer}>
-            <Tooltip text={translate('common.chats')}>
+            <Tooltip text={translate('common.inbox')}>
                 <PressableWithFeedback
                     onPress={() => {
                         Navigation.navigate(ROUTES.HOME);
                     }}
                     role={CONST.ROLE.BUTTON}
-                    accessibilityLabel={translate('common.chats')}
+                    accessibilityLabel={translate('common.inbox')}
                     wrapperStyle={styles.flex1}
                     style={styles.bottomTabBarItem}
                 >
                     <View>
                         <Icon
-                            src={Expensicons.ChatBubble}
+                            src={Expensicons.Inbox}
                             fill={currentTabName === SCREENS.HOME ? theme.iconMenu : theme.icon}
                             width={variables.iconBottomBar}
                             height={variables.iconBottomBar}
@@ -93,8 +93,30 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-            <BottomTabBarFloatingActionButton />
+            <Tooltip text={translate('common.search')}>
+                <PressableWithFeedback
+                    onPress={() => {
+                        Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+                    }}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('common.search')}
+                    wrapperStyle={styles.flex1}
+                    style={styles.bottomTabBarItem}
+                >
+                    <View>
+                        <Icon
+                            src={Expensicons.MoneySearch}
+                            fill={currentTabName === SCREENS.SEARCH.BOTTOM_TAB || currentTabName === SCREENS.SEARCH.CENTRAL_PANE ? theme.iconMenu : theme.icon}
+                            width={variables.iconBottomBar}
+                            height={variables.iconBottomBar}
+                        />
+                    </View>
+                </PressableWithFeedback>
+            </Tooltip>
             <BottomTabAvatar isSelected={currentTabName === SCREENS.SETTINGS.ROOT} />
+            <View style={[styles.flex1, styles.bottomTabBarItem]}>
+                <BottomTabBarFloatingActionButton />
+            </View>
         </View>
     );
 }

diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx
@@ -40,7 +40,7 @@ function BaseSidebarScreen() {
             {({insets}) => (
                 <>
                     <TopBar
-                        breadcrumbLabel={translate('common.chats')}
+                        breadcrumbLabel={translate('common.inbox')}
                         activeWorkspaceID={activeWorkspaceID}
                     />
                     <View style={[styles.flex1]}>