Travel/travel page LHN

src/ROUTES.ts

@@ -555,6 +555,8 @@ const ROUTES = {
     PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
 
     TRAVEL_MY_TRIPS: 'travel',
+
+    TRAVEL_HOME: 'travel-home',
 } as const;
 
 /**

src/SCREENS.ts

@@ -23,6 +23,7 @@ const SCREENS = {
     UNLINK_LOGIN: 'UnlinkLogin',
     SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
     TRAVEL: {
+        HOME: 'Travel_Home',
         MY_TRIPS: 'Travel_MyTrips',
     },
     SETTINGS: {

src/components/Icon/Expensicons.ts

@@ -134,6 +134,7 @@ import Podcast from '@assets/images/social-podcast.svg';
 import Twitter from '@assets/images/social-twitter.svg';
 import Youtube from '@assets/images/social-youtube.svg';
 import Stopwatch from '@assets/images/stopwatch.svg';
+import Suitcase from '@assets/images/suitcase.svg';
 import Sync from '@assets/images/sync.svg';
 import Task from '@assets/images/task.svg';
 import ThreeDots from '@assets/images/three-dots.svg';
@@ -280,6 +281,7 @@ export {
     Send,
     Shield,
     Stopwatch,
+    Suitcase,
     Sync,
     Task,
     ThumbsUp,

src/languages/en.ts

@@ -2427,4 +2427,7 @@
         offline:
             "You appear to be offline. Unfortunately, Expensify Classic doesn't work offline, but New Expensify does. If you prefer to use Expensify Classic, try again when you have an internet connection.",
     },
+    travel: {
+        myTrips: 'My trips',
+    },
 } satisfies TranslationBase;

src/languages/es.ts

@@ -2919,4 +2919,7 @@
         offline:
             'Parece que estás desconectado. Desafortunadamente, Expensify Classic no funciona sin conexión, pero New Expensify sí. Si prefieres utilizar Expensify Classic, inténtalo de nuevo cuando tengas conexión a internet.',
     },
+    travel: {
+        myTrips: 'Mis viajes',
+    },
 } satisfies EnglishTranslation;

src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

@@ -11,6 +11,8 @@ import ActiveRouteContext from './ActiveRouteContext';
 
 const loadWorkspaceInitialPage = () => require('../../../../pages/workspace/WorkspaceInitialPage').default as React.ComponentType;
 
+const loadTravelMenuPage = () => require('../../../../pages/Travel/TravelMenu').default as React.ComponentType;
+
 const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();
 
 const screenOptions: StackNavigationOptions = {
@@ -35,6 +37,10 @@ function BottomTabNavigator() {
                     name={SCREENS.WORKSPACE.INITIAL}
                     getComponent={loadWorkspaceInitialPage}
                 />
+                <Tab.Screen
+                    name={SCREENS.TRAVEL.HOME}
+                    getComponent={loadTravelMenuPage}
+                />
             </Tab.Navigator>
         </ActiveRouteContext.Provider>
     );

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -91,14 +91,30 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
-            <BottomTabBarFloatingActionButton />
+            <Tooltip text={translate('workspace.common.travel')}>
+                <PressableWithFeedback
+                    onPress={() => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)}
+                    role={CONST.ROLE.BUTTON}
+                    accessibilityLabel={translate('workspace.common.travel')}
+                    wrapperStyle={styles.flexGrow1}
+                    style={styles.bottomTabBarItem}
+                >
+                    <View>
+                        <Icon
+                            src={Expensicons.Suitcase}
+                            fill={currentTabName === SCREENS.TRAVEL.HOME ? theme.iconMenu : theme.icon}
+                            width={variables.iconBottomBar}
+                            height={variables.iconBottomBar}
+                        />
+                    </View>
+                </PressableWithFeedback>
+            </Tooltip>
             <Tooltip text={translate('common.settings')}>
                 <PressableWithFeedback
-                    onPress={
-                        () => Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS)
-                        // interceptAnonymousUser(() =>
-                        //     activeWorkspaceID ? Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(activeWorkspaceID)) : Navigation.navigate(ROUTES.ALL_SETTINGS),
-                        // )
+                    onPress={() =>
+                        interceptAnonymousUser(() =>
+                            activeWorkspaceID ? Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(activeWorkspaceID)) : Navigation.navigate(ROUTES.ALL_SETTINGS),
+                        )
                     }
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.settings')}
@@ -116,6 +132,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
                     </View>
                 </PressableWithFeedback>
             </Tooltip>
+            <BottomTabBarFloatingActionButton />
         </View>
     );
 }

src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts

@@ -15,6 +15,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
         SCREENS.WORKSPACE.MEMBERS,
         SCREENS.WORKSPACE.CATEGORIES,
     ],
+    [SCREENS.TRAVEL.HOME]: [SCREENS.TRAVEL.MY_TRIPS],
 };
 
 const generateCentralPaneToTabMapping = (): Record<CentralPaneName, BottomTabName> => {

src/libs/Navigation/linkingConfig/config.ts

@@ -34,6 +34,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                     path: ROUTES.WORKSPACE_INITIAL.route,
                     exact: true,
                 },
+                [SCREENS.TRAVEL.HOME]: ROUTES.TRAVEL_HOME,
             },
         },
 

src/libs/Navigation/types.ts

@@ -514,6 +514,7 @@ type BottomTabNavigatorParamList = {
     [SCREENS.HOME]: undefined;
     [SCREENS.ALL_SETTINGS]: undefined;
     [SCREENS.WORKSPACE.INITIAL]: undefined;
+    [SCREENS.TRAVEL.HOME]: undefined;
 };
 
 type PublicScreensParamList = {

src/pages/Travel/TravelMenu.tsx

@@ -0,0 +1,83 @@
+import React, {useMemo} from 'react';
+import {ScrollView} from 'react-native';
+import Breadcrumbs from '@components/Breadcrumbs';
+import * as Expensicons from '@components/Icon/Expensicons';
+import MenuItemList from '@components/MenuItemList';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWaitForNavigation from '@hooks/useWaitForNavigation';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
+
+// type TravelMenuProps = StackScreenProps<BottomTabNavigatorParamList, typeof SCREENS.TRAVEL.HOME>;
+
+function TravelMenu() {
+    const styles = useThemeStyles();
+    const waitForNavigate = useWaitForNavigation();
+    const {translate} = useLocalize();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
+    /**
+     * Retuns a list of menu items data for Travel menu
+     * @returns {Object} object with translationKey, style and items
+     */
+    const menuItems = useMemo(() => {
+        const baseMenuItems = [
+            {
+                translationKey: 'travel.myTrips',
+                icon: Expensicons.Suitcase,
+                action: () => {
+                    waitForNavigate(() => {
+                        Navigation.navigate(ROUTES.TRAVEL_MY_TRIPS);
+                    })();
+                },
+                focused: !isSmallScreenWidth,
+            },
+        ];
+        return baseMenuItems.map((item) => ({
+            key: item.translationKey,
+            title: translate(item.translationKey as TranslationPaths),
+            icon: item.icon,
+            onPress: item.action,
+            wrapperStyle: styles.sectionMenuItem,
+            isPaneMenu: true,
+            focused: item.focused,
+            hoverAndPressStyle: styles.hoveredComponentBG,
+        }));
+    }, [isSmallScreenWidth, styles.hoveredComponentBG, styles.sectionMenuItem, translate, waitForNavigate]);
+
+    return (
+        <ScreenWrapper
+            testID={TravelMenu.displayName}
+            includePaddingTop={false}
+            includeSafeAreaPaddingBottom={false}
+            style={[styles.pb0]}
+        >
+            <Breadcrumbs
+                breadcrumbs={[
+                    {
+                        type: CONST.BREADCRUMB_TYPE.ROOT,
+                    },
+                    {
+                        text: translate('workspace.common.travel'),
+                    },
+                ]}
+                style={[styles.mb5, styles.ph5]}
+            />
+            <ScrollView style={[styles.pb4, styles.mh3]}>
+                <MenuItemList
+                    menuItems={menuItems}
+                    shouldUseSingleExecution
+                />
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+TravelMenu.displayName = 'TravelMenu';
+
+export default TravelMenu;