Enhance bottom navigation inbox tooltip with additional content and i…

…mprove tooltip rendering logic
Expensify · Dec 12, 2024 · cd4d450 · cd4d450
1 parent b74ab71
commit cd4d450
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/src/components/ProductTrainingContext/TOOLTIPS.ts b/src/components/ProductTrainingContext/TOOLTIPS.ts
@@ -95,6 +95,7 @@ const TOOLTIPS: Record<ProductTrainingTooltipName, TooltipData> = {
         content: [
             {text: 'productTrainingTooltip.bottomNavInboxTooltip.part1', isBold: true},
             {text: 'productTrainingTooltip.bottomNavInboxTooltip.part2', isBold: false},
+            {text: 'productTrainingTooltip.bottomNavInboxTooltip.part3', isBold: false},
         ],
         onHideTooltip: () => dismissProductTraining(BOTTOM_NAV_INBOX_TOOLTIP),
         name: BOTTOM_NAV_INBOX_TOOLTIP,

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -5473,7 +5473,8 @@ const translations = {
         },
         bottomNavInboxTooltip: {
             part1: 'Your to-do list',
-            part2: ' comes with 🟢 for actions to take and 🔴 for errors',
+            part2: ' comes with 🟢 for',
+            part3: '\n actions to take and 🔴 for errors',
         },
         workspaceChatTooltip: {
             part1: 'Review submitted expenses and chat',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -5987,13 +5987,14 @@ const translations = {
             part2: ' gastos',
             part3: ' aquí',
         },
-        searchFilterButtonTooltip: {
+        ssearchFilterButtonTooltip: {
             part1: 'Customize your search',
             part2: ' here!',
         },
         bottomNavInboxTooltip: {
             part1: 'Your to-do list',
-            part2: ' comes with 🟢 for actions to take and 🔴 for errors',
+            part2: ' comes with 🟢 for',
+            part3: '\n actions to take and 🔴 for errors',
         },
         workspaceChatTooltip: {
             part1: 'Review submitted expenses and chat',

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -12,7 +12,6 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useBottomTabIsFocused from '@hooks/useBottomTabIsFocused';
 import useCurrentReportID from '@hooks/useCurrentReportID';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import interceptAnonymousUser from '@libs/interceptAnonymousUser';
@@ -78,14 +77,13 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
     const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS);
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [chatTabBrickRoad, setChatTabBrickRoad] = useState<BrickRoad>(() =>
         getChatTabBrickRoad(activeWorkspaceID, currentReportID, reports, betas, policies, priorityMode, transactionViolations),
     );
     const isFocused = useBottomTabIsFocused();
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.BOTTOM_NAV_INBOX_TOOLTIP,
-        isFocused,
+        selectedTab === SCREENS.HOME && isFocused,
     );
 
     useEffect(() => {
@@ -149,11 +147,9 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
                 <EducationalTooltip
                     shouldRender={shouldShowProductTrainingTooltip}
                     anchorAlignment={{
-                        horizontal: shouldUseNarrowLayout ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER,
                         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                     }}
-                    shiftVertical={variables.composerTooltipShiftVertical}
-                    shiftHorizontal={shouldUseNarrowLayout ? 0 : -15}
                     shouldUseOverlay
                     renderTooltipContent={renderProductTrainingTooltip}
                     wrapperStyle={styles.quickActionTooltipWrapper}