[HomePage] Foundation: Add Home Navigation (1/2) - Core

contributingGuides/NAVIGATION.md

@@ -64,7 +64,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 
 // Basic navigation to a route
-Navigation.navigate(ROUTES.HOME);
+Navigation.navigate(ROUTES.INBOX);
 
 // Navigation with parameters
 Navigation.navigate(
@@ -1344,7 +1344,7 @@ import {ROUTES} from '@src/ROUTES';
 Navigation.goBack();
 
 // Back navigation with fallback
-Navigation.goBack(ROUTES.HOME);
+Navigation.goBack(ROUTES.INBOX);
 
 const reportID = 123;
 // Back navigation to a route with specific params

src/CONST/index.ts

@@ -7944,6 +7944,7 @@ const CONST = {
             REPORTS: 'NavigationTabBar-Reports',
             WORKSPACES: 'NavigationTabBar-Workspaces',
             ACCOUNT: 'NavigationTabBar-Account',
+            HOME: 'NavigationTabBar-Home',
             FLOATING_ACTION_BUTTON: 'NavigationTabBar-FloatingActionButton',
             FLOATING_RECEIPT_BUTTON: 'NavigationTabBar-FloatingReceiptButton',
         },

src/ROUTES.ts

@@ -60,7 +60,9 @@ const MULTIFACTOR_AUTHENTICATION_PROTECTED_ROUTES = {
 const ROUTES = {
     ...PUBLIC_SCREENS_ROUTES,
     // This route renders the list of reports.
-    HOME: 'home',
+    INBOX: 'home',
+    // @TODO: Rename it to 'home' and INBOX to 'inbox' when removing the newDotHome beta
+    HOME: 'home-page',
 
     // eslint-disable-next-line no-restricted-syntax -- Legacy route generation
     WORKSPACES_LIST: {route: 'workspaces', getRoute: (backTo?: string) => getUrlWithBackToParam('workspaces', backTo)},

src/SCREENS.ts

@@ -6,6 +6,7 @@ import type DeepValueOf from './types/utils/DeepValueOf';
 
 const PROTECTED_SCREENS = {
     HOME: 'Home',
+    INBOX: 'Inbox',
     CONCIERGE: 'Concierge',
     REPORT_ATTACHMENTS: 'ReportAttachments',
     REPORT_ADD_ATTACHMENT: 'ReportAddAttachment',

src/components/FloatingActionButton.tsx

@@ -6,6 +6,7 @@
 import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useLocalize from '@hooks/useLocalize';
+import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -14,7 +15,7 @@
 import CONST from '@src/CONST';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
 import Icon from './Icon';
 import {PlusCircle} from './Icon/Expensicons';
 import {PressableWithFeedback, PressableWithoutFeedback} from './Pressable';
 import Text from './Text';
 import Tooltip from './Tooltip';
@@ -53,6 +54,8 @@
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isLHBVisible = !shouldUseNarrowLayout;
     const {translate} = useLocalize();
+    const {isBetaEnabled} = usePermissions();
+    const isNewDotHomeEnabled = isBetaEnabled(CONST.BETAS.NEW_DOT_HOME);
 
     const fabSize = isLHBVisible ? variables.iconSizeSmall : variables.iconSizeNormal;
 
@@ -94,7 +97,7 @@
         onLongPress?.(event);
     };
 
-    if (isLHBVisible) {
+    if (isLHBVisible || isNewDotHomeEnabled) {
         return (
             <Tooltip text={translate('common.create')}>
                 <PressableWithoutFeedback
@@ -106,7 +109,7 @@
                     }}
                     style={[
                         styles.navigationTabBarFABItem,
-
+                        styles.ph0,
                         // Prevent text selection on touch devices (e.g. on long press)
                         canUseTouchScreen() && styles.userSelectNone,
                         styles.flex1,
@@ -124,7 +127,7 @@
 
                         return (
                             <Animated.View
-                                style={[styles.floatingActionButton, {borderRadius}, styles.floatingActionButtonSmall, animatedStyle]}
+                                style={[styles.floatingActionButton, {borderRadius}, isLHBVisible && styles.floatingActionButtonSmall, animatedStyle]}
                                 testID="fab-animated-container"
                             >
                                 <Svg

src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx

@@ -5,6 +5,7 @@ import Icon from '@components/Icon';
 import {PressableWithoutFeedback} from '@components/Pressable';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePermissions from '@hooks/usePermissions';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {startMoneyRequest} from '@libs/actions/IOU';
@@ -39,6 +40,9 @@ function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
     const [allTransactionDrafts] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {canBeMissing: true});
     const reportID = useMemo(() => generateReportID(), []);
 
+    const {isBetaEnabled} = usePermissions();
+    const isNewDotHomeEnabled = isBetaEnabled(CONST.BETAS.NEW_DOT_HOME);
+
     const policyChatForActivePolicySelector = useCallback(
         (reports: OnyxCollection<OnyxTypes.Report>) => {
             if (isEmptyObject(activePolicy) || !activePolicy?.isPolicyExpenseChatEnabled) {
@@ -71,7 +75,7 @@ function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
                 styles.ph0,
                 // Prevent text selection on touch devices (e.g. on long press)
                 canUseTouchScreen() && styles.userSelectNone,
-                styles.floatingCameraButton,
+                isNewDotHomeEnabled ? styles.floatingCameraButtonAboveFab : styles.floatingCameraButton,
             ]}
             accessibilityLabel={translate('sidebarScreen.fabScanReceiptExplained')}
             onPress={onPress}

src/components/FloatingGPSButton/index.native.tsx

@@ -5,6 +5,7 @@ import {PressableWithoutFeedback} from '@components/Pressable';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import usePermissions from '@hooks/usePermissions';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
@@ -22,6 +23,9 @@ function FloatingGpsButton() {
     const {textMutedReversed} = useTheme();
     const styles = useThemeStyles();
 
+    const {isBetaEnabled} = usePermissions();
+    const isNewDotHomeEnabled = isBetaEnabled(CONST.BETAS.NEW_DOT_HOME);
+
     if (!gpsDraftDetails?.isTracking) {
         return null;
     }
@@ -33,7 +37,7 @@ function FloatingGpsButton() {
 
     return (
         <PressableWithoutFeedback
-            style={[styles.navigationTabBarFABItem, styles.ph0, styles.userSelectNone, styles.floatingGpsButton]}
+            style={[styles.navigationTabBarFABItem, styles.ph0, styles.userSelectNone, isNewDotHomeEnabled ? styles.floatingGpsButtonAboveFab : styles.floatingGpsButton]}
             accessibilityLabel={translate('gps.fabGpsTripExplained')}
             onPress={navigateToGpsScreen}
             role={CONST.ROLE.BUTTON}

src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts

@@ -5,7 +5,7 @@ import SCREENS from '@src/SCREENS';
  * focus trap when rendered on a wide screen to allow navigation between them using the keyboard
  */
 const WIDE_LAYOUT_INACTIVE_SCREENS: string[] = [
-    SCREENS.HOME,
+    SCREENS.INBOX,
     SCREENS.SETTINGS.ROOT,
     SCREENS.REPORT,
     SCREENS.SETTINGS.PROFILE.ROOT,

src/components/ImportOnyxState/index.native.tsx

@@ -45,7 +45,7 @@ export default function ImportOnyxState({setIsLoading}: ImportOnyxStateProps) {
             })
             .then(() => {
                 setIsUsingImportedState(true);
-                Navigation.navigate(ROUTES.HOME);
+                Navigation.navigate(ROUTES.INBOX);
             })
             .catch((error) => {
                 console.error('Error importing state:', error);

src/components/ImportOnyxState/index.tsx

@@ -42,7 +42,7 @@ export default function ImportOnyxState({setIsLoading}: ImportOnyxStateProps) {
             })
             .then(() => {
                 setIsUsingImportedState(true);
-                Navigation.navigate(ROUTES.HOME);
+                Navigation.navigate(ROUTES.INBOX);
             })
             .catch((error) => {
                 console.error('Error importing state:', error);

src/components/KYCWall/BaseKYCWall.tsx

@@ -135,7 +135,7 @@ function KYCWall({
             if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
                 openPersonalBankAccountSetupView({shouldSetUpUSBankAccount: isIOUReport(iouReport)});
             } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-                Navigation.navigate(addDebitCardRoute ?? ROUTES.HOME);
+                Navigation.navigate(addDebitCardRoute ?? ROUTES.INBOX);
             } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT || policy) {
                 if (iouReport && isIOUReport(iouReport)) {
                     const adminPolicy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policy?.id}`];

src/components/Navigation/DebugTabView.tsx

@@ -5,7 +5,7 @@
 import type {ValueOf} from 'type-fest';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import Text from '@components/Text';
 import useIndicatorStatus from '@hooks/useIndicatorStatus';
 import useLocalize from '@hooks/useLocalize';
@@ -110,7 +110,7 @@
     const {orderedReportIDs} = useSidebarOrderedReports();
 
     const message = useMemo((): TranslationPaths | undefined => {
-        if (selectedTab === NAVIGATION_TABS.HOME) {
+        if (selectedTab === NAVIGATION_TABS.INBOX) {
             if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) {
                 return 'debug.indicatorStatus.theresAReportAwaitingAction';
             }
@@ -124,7 +124,7 @@
     }, [selectedTab, chatTabBrickRoad, status]);
 
     const indicator = useMemo(() => {
-        if (selectedTab === NAVIGATION_TABS.HOME) {
+        if (selectedTab === NAVIGATION_TABS.INBOX) {
             if (chatTabBrickRoad === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO) {
                 return theme.success;
             }
@@ -140,7 +140,7 @@
     }, [selectedTab, chatTabBrickRoad, theme.success, theme.danger, status, indicatorColor]);
 
     const navigateTo = useCallback(() => {
-        if (selectedTab === NAVIGATION_TABS.HOME && !!chatTabBrickRoad) {
+        if (selectedTab === NAVIGATION_TABS.INBOX && !!chatTabBrickRoad) {
             const reportID = getChatTabBrickRoadReportID(orderedReportIDs, reportAttributes);
 
             if (reportID) {
@@ -156,7 +156,7 @@
         }
     }, [selectedTab, chatTabBrickRoad, orderedReportIDs, reportAttributes, status, reimbursementAccount, policyIDWithErrors]);
 
-    if (!([NAVIGATION_TABS.HOME, NAVIGATION_TABS.SETTINGS, NAVIGATION_TABS.WORKSPACES] as string[]).includes(selectedTab ?? '') || !indicator) {
+    if (!([NAVIGATION_TABS.INBOX, NAVIGATION_TABS.SETTINGS, NAVIGATION_TABS.WORKSPACES] as string[]).includes(selectedTab ?? '') || !indicator) {
         return null;
     }