From 6174a6dd262d5f633f7c837d116d8e559eccad09 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 17 Dec 2024 15:41:16 +0100
Subject: [PATCH 01/30] Make it possible to click the element the product
 training tooltip is pointing to

---
 src/components/FloatingActionButton.tsx       |  3 +-
 .../LHNOptionsList/OptionRowLHN.tsx           | 18 ++++----
 src/components/MenuItem.tsx                   |  6 ---
 .../ProductTrainingContext/index.tsx          | 15 ++++---
 src/components/Search/SearchPageHeader.tsx    | 19 ++++----
 .../BaseEducationalTooltip.tsx                | 43 +++----------------
 .../EducationalTooltip/TooltipManager.ts      | 30 -------------
 src/components/Tooltip/GenericTooltip.tsx     |  4 +-
 src/components/Tooltip/types.ts               |  6 ---
 src/hooks/useBottomTabIsFocused.ts            |  7 +++
 .../Navigation/AppNavigator/AuthScreens.tsx   |  2 -
 .../BottomTabBar.tsx                          |  3 +-
 src/libs/actions/Modal.ts                     |  3 --
 src/pages/Search/SearchPage.tsx               |  7 ++-
 src/pages/Search/SearchTypeMenuNarrow.tsx     | 12 +++---
 .../ReportActionCompose.tsx                   |  5 +--
 src/pages/home/report/ReportFooter.tsx        |  6 ++-
 17 files changed, 64 insertions(+), 125 deletions(-)
 delete mode 100644 src/components/Tooltip/EducationalTooltip/TooltipManager.ts

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
index e0f0ff4e6dcd..f503fcc187e3 100644
--- a/src/components/FloatingActionButton.tsx
+++ b/src/components/FloatingActionButton.tsx
@@ -105,6 +105,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     );
 
     const toggleFabAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
+        hideProductTrainingTooltip();
         // Drop focus to avoid blue focus ring.
         fabPressable.current?.blur();
         onPress(event);
@@ -117,11 +118,9 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
                 horizontal: isNarrowScreenOnWeb ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                 vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
             }}
-            shouldUseOverlay
             shiftHorizontal={isNarrowScreenOnWeb ? 0 : variables.fabTooltipShiftHorizontal}
             renderTooltipContent={renderProductTrainingTooltip}
             wrapperStyle={styles.productTrainingTooltipWrapper}
-            onHideTooltip={hideProductTrainingTooltip}
         >
             <PressableWithoutFeedback
                 ref={(el) => {
diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index efdd9659c845..368c89de83a5 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -1,5 +1,5 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import React, {useCallback, useRef, useState} from 'react';
 import type {GestureResponderEvent, ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -44,6 +44,8 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const StyleUtils = useStyleUtils();
     const [isScreenFocused, setIsScreenFocused] = useState(false);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID || -1}`);
@@ -54,12 +56,11 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const isOnboardingGuideAssigned = introSelected?.choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
 
-    const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
-        const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
+    const tooltipToRender = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
 
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        return {tooltipToRender: tooltip, shouldShowTooltip: shouldUseNarrowLayout ? isScreenFocused : true};
-    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout]);
+    const isFocusedHookResult = useIsFocused();
+
+    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused && !isModalVisible && isFocusedHookResult : !isModalVisible && isFocusedHookResult;
 
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
     const {translate} = useLocalize();
@@ -165,10 +166,8 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                     horizontal: isActiveWorkspaceChat ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
-                shouldUseOverlay
                 shiftHorizontal={isActiveWorkspaceChat ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}
                 shiftVertical={isActiveWorkspaceChat ? 0 : variables.composerTooltipShiftVertical}
-                onHideTooltip={hideProductTrainingTooltip}
                 wrapperStyle={styles.productTrainingTooltipWrapper}
             >
                 <View>
@@ -183,6 +182,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
                                     event?.preventDefault();
                                     // Enable Composer to focus on clicking the same chat after opening the context menu.
                                     ReportActionComposeFocusManager.focus();
+                                    hideProductTrainingTooltip();
                                     onSelectRow(optionItem, popoverAnchor);
                                 }}
                                 onMouseDown={(event) => {
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 19703f7a3c92..1c6234031898 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -340,9 +340,6 @@ type MenuItemBaseProps = {
     /** Should selected item be marked with checkmark */
     shouldShowSelectedItemCheck?: boolean;
 
-    /** Handles what to do when hiding the tooltip */
-    onHideTooltip?: () => void;
-
     /** Should use auto width for the icon container. */
     shouldIconUseAutoWidthStyle?: boolean;
 
@@ -458,7 +455,6 @@ function MenuItem(
         renderTooltipContent,
         additionalIconStyles,
         shouldShowSelectedItemCheck = false,
-        onHideTooltip,
         shouldIconUseAutoWidthStyle = false,
         shouldBreakWord = false,
     }: MenuItemProps,
@@ -596,8 +592,6 @@ function MenuItem(
                 wrapperStyle={tooltipWrapperStyle}
                 shiftHorizontal={tooltipShiftHorizontal}
                 shiftVertical={tooltipShiftVertical}
-                shouldAutoDismiss
-                onHideTooltip={onHideTooltip}
             >
                 <View>
                     <Hoverable>
diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index 7cfcf4d3bfa7..f7abbfad6204 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -39,6 +39,9 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
     const [activeTooltips, setActiveTooltips] = useState<Set<ProductTrainingTooltipName>>(new Set());
 
+    useEffect(() => {
+        console.log('activeTooltips', activeTooltips);
+    }, [activeTooltips]);
     const unregisterTooltip = useCallback(
         (tooltipName: ProductTrainingTooltipName) => {
             setActiveTooltips((prev) => {
@@ -156,11 +159,10 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     useEffect(() => {
         if (shouldShow) {
             registerTooltip(tooltipName);
-            return () => {
-                unregisterTooltip(tooltipName);
-            };
         }
-        return () => {};
+        return () => {
+            unregisterTooltip(tooltipName);
+        };
     }, [tooltipName, registerTooltip, unregisterTooltip, shouldShow]);
 
     const renderProductTrainingTooltip = useCallback(() => {
@@ -209,10 +211,13 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     }, [shouldRenderTooltip, tooltipName]);
 
     const hideProductTrainingTooltip = useCallback(() => {
+        if (!shouldShowProductTrainingTooltip) {
+            return;
+        }
         const tooltip = TOOLTIPS[tooltipName];
         tooltip.onHideTooltip();
         unregisterTooltip(tooltipName);
-    }, [tooltipName, unregisterTooltip]);
+    }, [tooltipName, shouldShowProductTrainingTooltip, unregisterTooltip]);
 
     return {
         renderProductTrainingTooltip,
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 21a5832052c0..819c4ff7bad0 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -32,11 +32,11 @@ import {useSearchContext} from './SearchContext';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
 import type {PaymentData, SearchQueryJSON} from './types';
 
-type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};
+type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; isFocused: boolean};
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, isFocused}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -58,11 +58,8 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false);
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
-    const isFocused = useIsFocused();
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isFocused,
-    );
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     const {status, hash} = queryJSON;
 
@@ -289,6 +286,11 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
         lastPaymentMethods,
     ]);
 
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+        isFocused && !isModalVisible && !!queryJSON && headerButtonsOptions.length === 0,
+    );
+
     if (shouldUseNarrowLayout) {
         if (selectionMode?.isEnabled) {
             return (
@@ -334,6 +336,7 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     }
 
     const onFiltersButtonPress = () => {
+        hideProductTrainingTooltip();
         const filterFormValues = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
         SearchActions.updateAdvancedFilters(filterFormValues);
 
@@ -362,11 +365,9 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
                             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                         }}
-                        shouldUseOverlay
                         shiftHorizontal={variables.searchFiltersTooltipShiftHorizontal}
                         wrapperStyle={styles.productTrainingTooltipWrapper}
                         renderTooltipContent={renderProductTrainingTooltip}
-                        onHideTooltip={hideProductTrainingTooltip}
                     >
                         <Button
                             innerStyles={!isCannedQuery && [styles.searchRouterInputResults, styles.borderNone]}
diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index 9feb086e3ab2..db929dc1d1cb 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -3,7 +3,6 @@ import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
 import type {EducationalTooltipProps} from '@components/Tooltip/types';
 import measureTooltipCoordinate from './measureTooltipCoordinate';
-import * as TooltipManager from './TooltipManager';
 
 type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;
 
@@ -11,31 +10,15 @@ type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
-function BaseEducationalTooltip({children, onHideTooltip: onHideTooltipProp, shouldRender = false, shouldAutoDismiss = false, ...props}: EducationalTooltipProps) {
+function BaseEducationalTooltip({children, shouldRender = false, ...props}: EducationalTooltipProps) {
     const hideTooltipRef = useRef<() => void>();
 
     const [shouldMeasure, setShouldMeasure] = useState(false);
     const show = useRef<() => void>();
-    const removeActiveTooltipRef = useRef(() => {});
-    const removePendingTooltipRef = useRef(() => {});
-
-    const didShow = useRef(false);
-
-    const onHideTooltip = useCallback(() => {
-        if (!shouldRender) {
-            return;
-        }
-        onHideTooltipProp?.();
-    }, [onHideTooltipProp, shouldRender]);
 
     const closeTooltip = useCallback(() => {
-        if (!didShow.current) {
-            return;
-        }
         hideTooltipRef.current?.();
-        onHideTooltip?.();
-        removeActiveTooltipRef.current();
-    }, [onHideTooltip]);
+    }, []);
 
     useEffect(
         () => () => {
@@ -48,36 +31,21 @@ function BaseEducationalTooltip({children, onHideTooltip: onHideTooltipProp, sho
         [],
     );
 
-    // Automatically hide tooltip after 5 seconds
     useEffect(() => {
-        if (!shouldAutoDismiss) {
+        if (!shouldMeasure) {
             return;
         }
-
-        // Automatically hide tooltip after 5 seconds if shouldAutoDismiss is true
-        const timerID = setTimeout(() => {
+        if (!shouldRender) {
             closeTooltip();
-        }, 5000);
-        return () => {
-            clearTimeout(timerID);
-        };
-    }, [shouldAutoDismiss, closeTooltip]);
-
-    useEffect(() => {
-        if (!shouldMeasure || !shouldRender || didShow.current) {
             return;
         }
         // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
         const timerID = setTimeout(() => {
-            removePendingTooltipRef.current();
             show.current?.();
-            didShow.current = true;
-            removeActiveTooltipRef.current = TooltipManager.addActiveTooltip(closeTooltip);
         }, 500);
-        removePendingTooltipRef.current = TooltipManager.addPendingTooltip(timerID);
         return () => {
-            removePendingTooltipRef.current();
             clearTimeout(timerID);
+            closeTooltip();
         };
     }, [shouldMeasure, shouldRender, closeTooltip]);
 
@@ -92,7 +60,6 @@ function BaseEducationalTooltip({children, onHideTooltip: onHideTooltipProp, sho
             shouldForceAnimate
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            onHideTooltip={onHideTooltip}
         >
             {({showTooltip, hideTooltip, updateTargetBounds}) => {
                 // eslint-disable-next-line react-compiler/react-compiler
diff --git a/src/components/Tooltip/EducationalTooltip/TooltipManager.ts b/src/components/Tooltip/EducationalTooltip/TooltipManager.ts
deleted file mode 100644
index bc5547a520b5..000000000000
--- a/src/components/Tooltip/EducationalTooltip/TooltipManager.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// We store the timeouts for each pending tooltip here.
-// We're using the timeout because when a tooltip is used inside an animated view (e.g., popover),
-// we need to wait for the animation to finish before measuring content.
-const pendingTooltips = new Set<NodeJS.Timeout>();
-
-// We store the callback for closing a tooltip here.
-const activeTooltips = new Set<() => void>();
-
-function addPendingTooltip(timeout: NodeJS.Timeout) {
-    pendingTooltips.add(timeout);
-    return () => {
-        pendingTooltips.delete(timeout);
-    };
-}
-
-function addActiveTooltip(closeCallback: () => void) {
-    activeTooltips.add(closeCallback);
-    return () => {
-        activeTooltips.delete(closeCallback);
-    };
-}
-
-function cancelPendingAndActiveTooltips() {
-    pendingTooltips.forEach((timeout) => clearTimeout(timeout));
-    pendingTooltips.clear();
-    activeTooltips.forEach((closeCallback) => closeCallback());
-    activeTooltips.clear();
-}
-
-export {addPendingTooltip, addActiveTooltip, cancelPendingAndActiveTooltips};
diff --git a/src/components/Tooltip/GenericTooltip.tsx b/src/components/Tooltip/GenericTooltip.tsx
index 040d0d1002d9..ba78324b986a 100644
--- a/src/components/Tooltip/GenericTooltip.tsx
+++ b/src/components/Tooltip/GenericTooltip.tsx
@@ -34,7 +34,6 @@ function GenericTooltip({
     },
     shouldForceAnimate = false,
     shouldUseOverlay: shouldUseOverlayProp = false,
-    onHideTooltip = () => {},
 }: GenericTooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -150,8 +149,7 @@ function GenericTooltip({
         }
         setShouldUseOverlay(false);
         hideTooltip();
-        onHideTooltip();
-    }, [shouldUseOverlay, onHideTooltip, hideTooltip]);
+    }, [shouldUseOverlay, hideTooltip]);
 
     // Skip the tooltip and return the children if the text is empty, we don't have a render function.
     if (StringUtils.isEmptyString(text) && renderTooltipContent == null) {
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 0924f5d46a28..b4458c18c784 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -39,9 +39,6 @@ type SharedTooltipProps = {
 
     /** Should render a fullscreen transparent overlay */
     shouldUseOverlay?: boolean;
-
-    /** Handles what to do when hiding the tooltip */
-    onHideTooltip?: () => void;
 };
 
 type GenericTooltipState = {
@@ -73,9 +70,6 @@ type TooltipProps = ChildrenProps &
 
 type EducationalTooltipProps = ChildrenProps &
     SharedTooltipProps & {
-        /** Whether to automatically dismiss the tooltip after 5 seconds */
-        shouldAutoDismiss?: boolean;
-
         /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */
         shouldRender?: boolean;
     };
diff --git a/src/hooks/useBottomTabIsFocused.ts b/src/hooks/useBottomTabIsFocused.ts
index 60817f194628..85dbc6407e26 100644
--- a/src/hooks/useBottomTabIsFocused.ts
+++ b/src/hooks/useBottomTabIsFocused.ts
@@ -1,16 +1,23 @@
 import {useIsFocused, useNavigationState} from '@react-navigation/native';
+import {useOnyx} from 'react-native-onyx';
 import CENTRAL_PANE_SCREENS from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute';
 import type {CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import useResponsiveLayout from './useResponsiveLayout';
 
 const useBottomTabIsFocused = () => {
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isFocused = useIsFocused();
     const topmostFullScreenName = useNavigationState<RootStackParamList, NavigationPartialRoute<FullScreenName> | undefined>(getTopmostFullScreenRoute);
     const topmostCentralPane = useNavigationState<RootStackParamList, NavigationPartialRoute<CentralPaneName> | undefined>(getTopmostCentralPaneRoute);
+    if (isModalVisible) {
+        return false;
+    }
     // If there is a full screen view such as Workspace Settings or Not Found screen, the bottom tab should not be considered focused
     if (topmostFullScreenName) {
         return false;
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index e01d0fe3115f..c216a3cecccd 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -208,8 +208,6 @@ const RootStack = createResponsiveStackNavigator<AuthScreensParamList>();
 
 const modalScreenListeners = {
     focus: () => {
-        // Since we don't cancel the tooltip in setModalVisibility, we need to do it here so it will be cancelled when a modal screen is shown.
-        TooltipManager.cancelPendingAndActiveTooltips();
         Modal.setModalVisibility(true);
     },
     blur: () => {
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
index 5647c31c6604..b47b2f2afa4f 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -98,6 +98,7 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
         if (selectedTab === SCREENS.HOME) {
             return;
         }
+        hideProductTrainingTooltip();
         const route = activeWorkspaceID ? (`/w/${activeWorkspaceID}/${ROUTES.HOME}` as Route) : ROUTES.HOME;
         Navigation.navigate(route);
     }, [activeWorkspaceID, selectedTab]);
@@ -153,10 +154,8 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
                         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                     }}
                     shiftHorizontal={isWebOrDesktop ? 0 : variables.bottomTabInboxTooltipShiftHorizontal}
-                    shouldUseOverlay
                     renderTooltipContent={renderProductTrainingTooltip}
                     wrapperStyle={styles.productTrainingTooltipWrapper}
-                    onHideTooltip={hideProductTrainingTooltip}
                 >
                     <PressableWithFeedback
                         onPress={navigateToChats}
diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts
index 1301fab81ca1..912972287d4e 100644
--- a/src/libs/actions/Modal.ts
+++ b/src/libs/actions/Modal.ts
@@ -90,9 +90,6 @@ function willAlertModalBecomeVisible(isVisible: boolean, isPopover = false) {
     // We cancel the pending and active tooltips here instead of in setModalVisibility because
     // we want to do it when a modal is going to show. If we do it when the modal is fully shown,
     // the tooltip in that modal won't show.
-    if (isVisible) {
-        TooltipManager.cancelPendingAndActiveTooltips();
-    }
     Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible, isPopover});
 }
 
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 640d3d3deacc..8264a06aaeae 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import React, {useMemo} from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -19,6 +20,7 @@ function SearchPage({route}: SearchPageProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {q} = route.params;
+    const isFocused = useIsFocused();
 
     const queryJSON = useMemo(() => SearchQueryUtils.buildSearchQueryJSON(q), [q]);
     const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
@@ -43,7 +45,10 @@ function SearchPage({route}: SearchPageProps) {
             >
                 {!!queryJSON && (
                     <>
-                        <SearchPageHeader queryJSON={queryJSON} />
+                        <SearchPageHeader
+                            queryJSON={queryJSON}
+                            isFocused={isFocused}
+                        />
                         <SearchStatusBar queryJSON={queryJSON} />
                         <Search queryJSON={queryJSON} />
                     </>
diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
index 9693566189e4..1e287157e1b2 100644
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -76,14 +76,18 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
 
     const openMenu = useCallback(() => setIsPopoverVisible(true), []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
+
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.RENAME_SAVED_SEARCH,
+        isPopoverVisible,
+    );
+
     const onPress = () => {
+        hideProductTrainingTooltip();
         const values = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
         SearchActions.updateAdvancedFilters(values);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);
     };
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-    );
 
     const currentSavedSearch = savedSearchesMenuItems.find((item) => Number(item.hash) === hash);
 
@@ -219,8 +223,6 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                 shiftVertical={variables.searchFiltersTooltipShiftVerticalNarrow}
                 wrapperStyle={styles.productTrainingTooltipWrapper}
                 renderTooltipContent={renderProductTrainingTooltip}
-                onHideTooltip={hideProductTrainingTooltip}
-                shouldUseOverlay
             >
                 <Button
                     icon={Expensicons.Filters}
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 78d3288d05f0..5cf8b8df6284 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -229,11 +229,12 @@ function ReportActionCompose({
     );
 
     const onAddActionPressed = useCallback(() => {
+        hideProductTrainingTooltip();
         if (!willBlurTextInputOnTapOutside) {
             isKeyboardVisibleWhenShowingModalRef.current = !!composerRef.current?.isFocused();
         }
         composerRef.current?.blur();
-    }, []);
+    }, [hideProductTrainingTooltip]);
 
     const onItemSelected = useCallback(() => {
         isKeyboardVisibleWhenShowingModalRef.current = false;
@@ -423,8 +424,6 @@ function ReportActionCompose({
                     <EducationalTooltip
                         shouldRender={!shouldHideEducationalTooltip && shouldShowProductTrainingTooltip}
                         renderTooltipContent={renderProductTrainingTooltip}
-                        shouldUseOverlay
-                        onHideTooltip={hideProductTrainingTooltip}
                         anchorAlignment={{
                             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                             vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx
index f46e2a9476b3..27c0cdb4039f 100644
--- a/src/pages/home/report/ReportFooter.tsx
+++ b/src/pages/home/report/ReportFooter.tsx
@@ -114,7 +114,11 @@ function ReportFooter({
     const isSystemChat = ReportUtils.isSystemChat(report);
     const isAdminsOnlyPostingRoom = ReportUtils.isAdminsOnlyPostingRoom(report);
     const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(policy);
-    const shouldShowEducationalTooltip = ReportUtils.isPolicyExpenseChat(report) && !!report.isOwnPolicyExpenseChat && !isUserPolicyAdmin;
+
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
+
+    const shouldShowEducationalTooltip = !isModalVisible && ReportUtils.isPolicyExpenseChat(report) && !!report.isOwnPolicyExpenseChat && !isUserPolicyAdmin;
 
     const allPersonalDetails = usePersonalDetails();
 

From ed54b831aeb2476437cb568fcffa509638e9fb5a Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:22:33 +0100
Subject: [PATCH 02/30] use isScreenFocused

---
 .../LHNOptionsList/OptionRowLHN.tsx           | 17 +++++++-------
 src/components/Search/SearchPageHeader.tsx    | 22 ++++++++++++++-----
 src/pages/Search/SearchPage.tsx               |  7 +-----
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index 368c89de83a5..ef7280039817 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -1,4 +1,4 @@
-import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useRef, useState} from 'react';
 import type {GestureResponderEvent, ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
@@ -58,14 +58,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
 
     const tooltipToRender = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
 
-    const isFocusedHookResult = useIsFocused();
-
-    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused && !isModalVisible && isFocusedHookResult : !isModalVisible && isFocusedHookResult;
-
-    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
-    const {translate} = useLocalize();
-    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
-
     useFocusEffect(
         useCallback(() => {
             setIsScreenFocused(true);
@@ -75,6 +67,13 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
         }, []),
     );
 
+    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused && !isModalVisible : !isModalVisible;
+
+    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
+    const {translate} = useLocalize();
+    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
+
+
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
         isInFocusMode
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 819c4ff7bad0..3cde057b04dc 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -1,5 +1,5 @@
-import {useIsFocused} from '@react-navigation/native';
-import React, {useMemo, useState} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useMemo, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -32,11 +32,11 @@ import {useSearchContext} from './SearchContext';
 import SearchPageHeaderInput from './SearchPageHeaderInput';
 import type {PaymentData, SearchQueryJSON} from './types';
 
-type SearchPageHeaderProps = {queryJSON: SearchQueryJSON; isFocused: boolean};
+type SearchPageHeaderProps = {queryJSON: SearchQueryJSON};
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
 
-function SearchPageHeader({queryJSON, isFocused}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -61,8 +61,20 @@ function SearchPageHeader({queryJSON, isFocused}: SearchPageHeaderProps) {
     const [modal] = useOnyx(ONYXKEYS.MODAL);
     const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
+    const [isScreenFocused, setIsScreenFocused] = useState(false);
+
     const {status, hash} = queryJSON;
 
+
+    useFocusEffect(
+        useCallback(() => {
+            setIsScreenFocused(true);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
     const handleDeleteExpenses = () => {
@@ -288,7 +300,7 @@ function SearchPageHeader({queryJSON, isFocused}: SearchPageHeaderProps) {
 
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isFocused && !isModalVisible && !!queryJSON && headerButtonsOptions.length === 0,
+        isScreenFocused && !isModalVisible && !!queryJSON && headerButtonsOptions.length === 0,
     );
 
     if (shouldUseNarrowLayout) {
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 8264a06aaeae..640d3d3deacc 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import React, {useMemo} from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -20,7 +19,6 @@ function SearchPage({route}: SearchPageProps) {
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const styles = useThemeStyles();
     const {q} = route.params;
-    const isFocused = useIsFocused();
 
     const queryJSON = useMemo(() => SearchQueryUtils.buildSearchQueryJSON(q), [q]);
     const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchQueryUtils.buildCannedSearchQuery()}));
@@ -45,10 +43,7 @@ function SearchPage({route}: SearchPageProps) {
             >
                 {!!queryJSON && (
                     <>
-                        <SearchPageHeader
-                            queryJSON={queryJSON}
-                            isFocused={isFocused}
-                        />
+                        <SearchPageHeader queryJSON={queryJSON} />
                         <SearchStatusBar queryJSON={queryJSON} />
                         <Search queryJSON={queryJSON} />
                     </>

From 0d49f677e13b37b03207e1b3e32a9a18e4cd77aa Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 14:32:57 +0100
Subject: [PATCH 03/30] fix bug

---
 src/components/ProductTrainingContext/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index f7abbfad6204..85e4118e8c56 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -207,8 +207,8 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     ]);
 
     const shouldShowProductTrainingTooltip = useMemo(() => {
-        return shouldRenderTooltip(tooltipName);
-    }, [shouldRenderTooltip, tooltipName]);
+        return shouldShow && shouldRenderTooltip(tooltipName);
+    }, [shouldShow, shouldRenderTooltip, tooltipName]);
 
     const hideProductTrainingTooltip = useCallback(() => {
         if (!shouldShowProductTrainingTooltip) {

From fe4bcb67c2a94aa5cb4183115b24afec279a4430 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 15:05:17 +0100
Subject: [PATCH 04/30] fix bug

---
 .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index db929dc1d1cb..26a5aa6d5ff6 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -55,6 +55,10 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
         [],
     );
 
+    if (!shouldRender) {
+        return children as React.ReactElement;
+    }
+
     return (
         <GenericTooltip
             shouldForceAnimate

From 8de62b1330bd4cdc3aecf47a2820c4ef32e9201d Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 17:57:53 +0100
Subject: [PATCH 05/30] remove shouldHideEducationalTooltip

---
 .../report/ReportActionCompose/ReportActionCompose.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index d528d30051cc..b34f9cf6c021 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -148,7 +148,6 @@ function ReportActionCompose({
         const initialModalState = getModalState();
         return shouldFocusInputOnScreenFocus && shouldShowComposeInput && !initialModalState?.isVisible && !initialModalState?.willAlertModalBecomeVisible;
     });
-    const [shouldHideEducationalTooltip, setShouldHideEducationalTooltip] = useState(false);
 
     // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
     const isScrollLikelyLayoutTriggered = useRef(false);
@@ -345,13 +344,6 @@ function ReportActionCompose({
         [],
     );
 
-    useEffect(() => {
-        const unsubscribe = navigation.addListener('blur', () => {
-            setShouldHideEducationalTooltip(true);
-        });
-        return unsubscribe;
-    }, [navigation]);
-
     // When we invite someone to a room they don't have the policy object, but we still want them to be able to mention other reports they are members of, so we only check if the policyID in the report is from a workspace
     const isGroupPolicyReport = useMemo(() => !!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE, [report]);
     const reportRecipientAcountIDs = ReportUtils.getReportRecipientAccountIDs(report, currentUserPersonalDetails.accountID);
@@ -433,7 +425,7 @@ function ReportActionCompose({
                     contentContainerStyle={isComposerFullSize ? styles.flex1 : {}}
                 >
                     <EducationalTooltip
-                        shouldRender={!shouldHideEducationalTooltip && shouldShowProductTrainingTooltip}
+                        shouldRender={shouldShowProductTrainingTooltip}
                         renderTooltipContent={renderProductTrainingTooltip}
                         anchorAlignment={{
                             horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,

From 4c13d727df929a8c67fca69a2555732764a65507 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 19:40:02 +0100
Subject: [PATCH 06/30] QAB hideProductTrainingTooltip

---
 .../SidebarScreen/FloatingActionButtonAndPopover.tsx      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
index 35c0bc5e0b1c..2d0c79207011 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -379,7 +379,6 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
             tooltipShiftVertical: styles.popoverMenuItem.paddingVertical / 2,
             renderTooltipContent: renderProductTrainingTooltip,
             tooltipWrapperStyle: styles.productTrainingTooltipWrapper,
-            onHideTooltip: hideProductTrainingTooltip,
             shouldRenderTooltip: shouldShowProductTrainingTooltip,
         };
 
@@ -395,9 +394,10 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
                     text: quickActionTitle,
                     description: !hideQABSubtitle ? ReportUtils.getReportName(quickActionReport) ?? translate('quickAction.updateDestination') : '',
                     onSelected: () =>
-                        interceptAnonymousUser(() =>
-                            QuickActionNavigation.navigateToQuickAction(isValidReport, `${quickActionReport?.reportID ?? CONST.DEFAULT_NUMBER_ID}`, quickAction, selectOption),
-                        ),
+                        interceptAnonymousUser(() => {
+                            hideProductTrainingTooltip();
+                            QuickActionNavigation.navigateToQuickAction(isValidReport, `${quickActionReport?.reportID ?? CONST.DEFAULT_NUMBER_ID}`, quickAction, selectOption);
+                        }),
                     shouldShowSubscriptRightAvatar: ReportUtils.isPolicyExpenseChat(quickActionReport),
                 },
             ];

From 9d578d3f3885de857be59fab97261e0d8d8153ce Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 19:42:15 +0100
Subject: [PATCH 07/30] QAB hideProductTrainingTooltip

---
 .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
index 2d0c79207011..b2c7d56ba010 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -412,6 +412,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
                     onSelected: () =>
                         interceptAnonymousUser(() => {
                             selectOption(() => {
+                                hideProductTrainingTooltip();
                                 const quickActionReportID = policyChatForActivePolicy?.reportID || ReportUtils.generateReportID();
                                 IOU.startMoneyRequest(CONST.IOU.TYPE.SUBMIT, quickActionReportID, CONST.IOU.REQUEST_TYPE.SCAN, true);
                             }, true);

From 629c8c2873158be1136f7a58dc781ada9765ee7b Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 27 Dec 2024 19:46:44 +0100
Subject: [PATCH 08/30] remove console log

---
 src/components/ProductTrainingContext/index.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index 85e4118e8c56..d25006415bf9 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -39,9 +39,6 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
     const [activeTooltips, setActiveTooltips] = useState<Set<ProductTrainingTooltipName>>(new Set());
 
-    useEffect(() => {
-        console.log('activeTooltips', activeTooltips);
-    }, [activeTooltips]);
     const unregisterTooltip = useCallback(
         (tooltipName: ProductTrainingTooltipName) => {
             setActiveTooltips((prev) => {

From c8dc96705f07b8dc406e6d64417aa053c3d893fc Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 2 Jan 2025 17:33:53 +0100
Subject: [PATCH 09/30] fix errors

---
 src/components/LHNOptionsList/OptionRowLHN.tsx               | 2 +-
 src/components/Search/SearchPageHeader.tsx                   | 2 +-
 src/components/Tooltip/BaseGenericTooltip/types.ts           | 5 +----
 src/hooks/useBottomTabIsFocused.ts                           | 1 +
 src/libs/Navigation/AppNavigator/AuthScreens.tsx             | 1 -
 .../createCustomBottomTabNavigator/BottomTabBar.tsx          | 2 +-
 src/libs/actions/Modal.ts                                    | 1 -
 .../home/report/ReportActionCompose/ReportActionCompose.tsx  | 2 --
 src/pages/home/report/ReportFooter.tsx                       | 1 +
 9 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index 428e32de09eb..ed8543c21ba0 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -45,6 +45,7 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const [isScreenFocused, setIsScreenFocused] = useState(false);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [modal] = useOnyx(ONYXKEYS.MODAL);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -73,7 +74,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const {translate} = useLocalize();
     const [isContextMenuActive, setIsContextMenuActive] = useState(false);
 
-
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
         isInFocusMode
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index 3cde057b04dc..dd576a511411 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -59,13 +59,13 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
     const [modal] = useOnyx(ONYXKEYS.MODAL);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     const [isScreenFocused, setIsScreenFocused] = useState(false);
 
     const {status, hash} = queryJSON;
 
-
     useFocusEffect(
         useCallback(() => {
             setIsScreenFocused(true);
diff --git a/src/components/Tooltip/BaseGenericTooltip/types.ts b/src/components/Tooltip/BaseGenericTooltip/types.ts
index 6b2159d7be5b..90c2f400a35e 100644
--- a/src/components/Tooltip/BaseGenericTooltip/types.ts
+++ b/src/components/Tooltip/BaseGenericTooltip/types.ts
@@ -30,10 +30,7 @@ type BaseGenericTooltipProps = {
 
     /** Handles what to do when hiding the tooltip */
     onHideTooltip?: () => void;
-} & Pick<
-    SharedTooltipProps,
-    'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'anchorAlignment' | 'shouldUseOverlay' | 'onHideTooltip'
->;
+} & Pick<SharedTooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'anchorAlignment' | 'shouldUseOverlay'>;
 
 // eslint-disable-next-line import/prefer-default-export
 export type {BaseGenericTooltipProps};
diff --git a/src/hooks/useBottomTabIsFocused.ts b/src/hooks/useBottomTabIsFocused.ts
index 85dbc6407e26..c35ef142d7b3 100644
--- a/src/hooks/useBottomTabIsFocused.ts
+++ b/src/hooks/useBottomTabIsFocused.ts
@@ -10,6 +10,7 @@ import useResponsiveLayout from './useResponsiveLayout';
 
 const useBottomTabIsFocused = () => {
     const [modal] = useOnyx(ONYXKEYS.MODAL);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isFocused = useIsFocused();
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
index f5e7deec3f04..a5b99ef41c10 100644
--- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx
+++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -11,7 +11,6 @@ import {SearchContextProvider} from '@components/Search/SearchContext';
 import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
 import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import TestToolsModal from '@components/TestToolsModal';
-import * as TooltipManager from '@components/Tooltip/EducationalTooltip/TooltipManager';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import usePermissions from '@hooks/usePermissions';
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
index b47b2f2afa4f..7c9f1f85f6f5 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -101,7 +101,7 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
         hideProductTrainingTooltip();
         const route = activeWorkspaceID ? (`/w/${activeWorkspaceID}/${ROUTES.HOME}` as Route) : ROUTES.HOME;
         Navigation.navigate(route);
-    }, [activeWorkspaceID, selectedTab]);
+    }, [activeWorkspaceID, selectedTab, hideProductTrainingTooltip]);
 
     const navigateToSearch = useCallback(() => {
         if (selectedTab === SCREENS.SEARCH.BOTTOM_TAB) {
diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts
index 912972287d4e..9f912fd888bd 100644
--- a/src/libs/actions/Modal.ts
+++ b/src/libs/actions/Modal.ts
@@ -1,5 +1,4 @@
 import Onyx from 'react-native-onyx';
-import * as TooltipManager from '@components/Tooltip/EducationalTooltip/TooltipManager';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const closeModals: Array<(isNavigating?: boolean) => void> = [];
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index b2242a01b8f4..4c5a19db07c0 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
 import lodashDebounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -134,7 +133,6 @@ function ReportActionCompose({
     const actionButtonRef = useRef<View | HTMLDivElement | null>(null);
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const personalDetails = usePersonalDetails();
-    const navigation = useNavigation();
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
 
diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx
index 1bafdaa30e2d..8bda291521ec 100644
--- a/src/pages/home/report/ReportFooter.tsx
+++ b/src/pages/home/report/ReportFooter.tsx
@@ -120,6 +120,7 @@ function ReportFooter({
     const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(policy);
 
     const [modal] = useOnyx(ONYXKEYS.MODAL);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     const shouldShowEducationalTooltip = !isModalVisible && ReportUtils.isPolicyExpenseChat(report) && !!report.isOwnPolicyExpenseChat && !isUserPolicyAdmin;

From b7d518682e7deac02ef041015c7a7bd4671c8ee7 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Thu, 2 Jan 2025 19:04:59 +0100
Subject: [PATCH 10/30] correct copy usage

---
 src/components/ProductTrainingContext/TOOLTIPS.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ProductTrainingContext/TOOLTIPS.ts b/src/components/ProductTrainingContext/TOOLTIPS.ts
index dc2a761a4903..1e0fa28e87e4 100644
--- a/src/components/ProductTrainingContext/TOOLTIPS.ts
+++ b/src/components/ProductTrainingContext/TOOLTIPS.ts
@@ -72,8 +72,9 @@ const TOOLTIPS: Record<ProductTrainingTooltipName, TooltipData> = {
     },
     [WORKSAPCE_CHAT_CREATE]: {
         content: [
-            {text: 'productTrainingTooltip.workspaceChatCreate.part1', isBold: true},
-            {text: 'productTrainingTooltip.workspaceChatCreate.part2', isBold: false},
+            {text: 'productTrainingTooltip.workspaceChatCreate.part1', isBold: false},
+            {text: 'productTrainingTooltip.workspaceChatCreate.part2', isBold: true},
+            {text: 'productTrainingTooltip.workspaceChatCreate.part3', isBold: false},
         ],
         onHideTooltip: () => dismissProductTraining(WORKSAPCE_CHAT_CREATE),
         name: WORKSAPCE_CHAT_CREATE,

From 2042262690b3414a1ec49bb939870e07e74c1d87 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:39:36 +0100
Subject: [PATCH 11/30] Refactor

---
 src/components/LHNOptionsList/OptionRowLHN.tsx  | 14 +++++---------
 src/components/ProductTrainingContext/index.tsx | 11 ++++++++++-
 src/components/Search/SearchPageHeader.tsx      | 13 +++++--------
 src/hooks/useBottomTabIsFocused.ts              |  9 +--------
 src/pages/home/report/ReportFooter.tsx          |  6 +-----
 5 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index ed8543c21ba0..d5be4a37e839 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -44,9 +44,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const StyleUtils = useStyleUtils();
     const [isScreenFocused, setIsScreenFocused] = useState(false);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const [modal] = useOnyx(ONYXKEYS.MODAL);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${optionItem?.reportID || -1}`);
@@ -58,6 +55,11 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
 
     const tooltipToRender = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
+    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused : true;
+    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
+
+    const {translate} = useLocalize();
+    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
 
     useFocusEffect(
         useCallback(() => {
@@ -68,12 +70,6 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
         }, []),
     );
 
-    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused && !isModalVisible : !isModalVisible;
-
-    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
-    const {translate} = useLocalize();
-    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
-
     const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
     const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
         isInFocusMode
diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index 60cceca77be3..5e4069a0c43f 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -37,6 +37,10 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
     const [dismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
+
     const [activeTooltips, setActiveTooltips] = useState<Set<ProductTrainingTooltipName>>(new Set());
 
     const unregisterTooltip = useCallback(
@@ -92,11 +96,16 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
                 return false;
             }
 
+            // We need to make an exception for the QAB tooltip because it is shown in a modal, otherwise it would be hidden if a modal is visible
+            if (tooltipName !== CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.QUICK_ACTION_BUTTON && isModalVisible) {
+                return false;
+            }
+
             return tooltipConfig.shouldShow({
                 shouldUseNarrowLayout,
             });
         },
-        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout],
+        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible],
     );
 
     const registerTooltip = useCallback(
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
index dd576a511411..fe7b49314ae0 100644
--- a/src/components/Search/SearchPageHeader.tsx
+++ b/src/components/Search/SearchPageHeader.tsx
@@ -58,12 +58,14 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
     const [isDeleteExpensesConfirmModalVisible, setIsDeleteExpensesConfirmModalVisible] = useState(false);
     const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false);
     const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);
-    const [modal] = useOnyx(ONYXKEYS.MODAL);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
 
     const [isScreenFocused, setIsScreenFocused] = useState(false);
 
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+        isScreenFocused,
+    );
+
     const {status, hash} = queryJSON;
 
     useFocusEffect(
@@ -298,11 +300,6 @@ function SearchPageHeader({queryJSON}: SearchPageHeaderProps) {
         lastPaymentMethods,
     ]);
 
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
-        isScreenFocused && !isModalVisible && !!queryJSON && headerButtonsOptions.length === 0,
-    );
-
     if (shouldUseNarrowLayout) {
         if (selectionMode?.isEnabled) {
             return (
diff --git a/src/hooks/useBottomTabIsFocused.ts b/src/hooks/useBottomTabIsFocused.ts
index c35ef142d7b3..f996d535a651 100644
--- a/src/hooks/useBottomTabIsFocused.ts
+++ b/src/hooks/useBottomTabIsFocused.ts
@@ -1,24 +1,17 @@
 import {useIsFocused, useNavigationState} from '@react-navigation/native';
-import {useOnyx} from 'react-native-onyx';
 import CENTRAL_PANE_SCREENS from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS';
 import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
 import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute';
 import type {CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
-import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
 import useResponsiveLayout from './useResponsiveLayout';
 
 const useBottomTabIsFocused = () => {
-    const [modal] = useOnyx(ONYXKEYS.MODAL);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const isFocused = useIsFocused();
     const topmostFullScreenName = useNavigationState<RootStackParamList, NavigationPartialRoute<FullScreenName> | undefined>(getTopmostFullScreenRoute);
     const topmostCentralPane = useNavigationState<RootStackParamList, NavigationPartialRoute<CentralPaneName> | undefined>(getTopmostCentralPaneRoute);
-    if (isModalVisible) {
-        return false;
-    }
+
     // If there is a full screen view such as Workspace Settings or Not Found screen, the bottom tab should not be considered focused
     if (topmostFullScreenName) {
         return false;
diff --git a/src/pages/home/report/ReportFooter.tsx b/src/pages/home/report/ReportFooter.tsx
index 8bda291521ec..53154e98c904 100644
--- a/src/pages/home/report/ReportFooter.tsx
+++ b/src/pages/home/report/ReportFooter.tsx
@@ -119,11 +119,7 @@ function ReportFooter({
     const isAdminsOnlyPostingRoom = ReportUtils.isAdminsOnlyPostingRoom(report);
     const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(policy);
 
-    const [modal] = useOnyx(ONYXKEYS.MODAL);
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    const isModalVisible = modal?.isVisible || modal?.willAlertModalBecomeVisible;
-
-    const shouldShowEducationalTooltip = !isModalVisible && ReportUtils.isPolicyExpenseChat(report) && !!report.isOwnPolicyExpenseChat && !isUserPolicyAdmin;
+    const shouldShowEducationalTooltip = ReportUtils.isPolicyExpenseChat(report) && !!report.isOwnPolicyExpenseChat && !isUserPolicyAdmin;
 
     const allPersonalDetails = usePersonalDetails();
 

From 06f1b75a3f09349ef19a5af524487e80364350b5 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 16:58:42 +0100
Subject: [PATCH 12/30] hideProductTrainingTooltip for RENAME_SAVED_SEARCH
 tooltip

---
 src/pages/Search/SavedSearchItemThreeDotMenu.tsx | 4 +++-
 src/pages/Search/SearchTypeMenu.tsx              | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
index 50bfee7976e1..86ddf7f66bf5 100644
--- a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
+++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
@@ -8,9 +8,10 @@ import CONST from '@src/CONST';
 type SavedSearchItemThreeDotMenuProps = {
     menuItems: PopoverMenuItem[];
     isDisabledItem: boolean;
+    hideProductTrainingTooltip?: () => void;
 };
 
-function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem}: SavedSearchItemThreeDotMenuProps) {
+function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrainingTooltip}: SavedSearchItemThreeDotMenuProps) {
     const threeDotsMenuContainerRef = useRef<View>(null);
     const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0});
     const styles = useThemeStyles();
@@ -22,6 +23,7 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem}: SavedSearchIte
             <ThreeDotsMenu
                 menuItems={menuItems}
                 onIconPress={() => {
+                    hideProductTrainingTooltip?.();
                     threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => {
                         setThreeDotsMenuPosition({
                             horizontal: x + width,
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 6d6543554869..0e30851a1b0f 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -146,6 +146,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                     <SavedSearchItemThreeDotMenu
                         menuItems={getOverflowMenu(title, Number(key), item.query)}
                         isDisabledItem={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
+                        hideProductTrainingTooltip={index === 0 ? hideProductTrainingTooltip : undefined}
                     />
                 ),
                 styles: [styles.alignItemsCenter],
@@ -165,7 +166,6 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                     tooltipShiftHorizontal: -32,
                     tooltipShiftVertical: 15,
                     tooltipWrapperStyle: [styles.bgPaleGreen, styles.mh4, styles.pv2],
-                    onHideTooltip: hideProductTrainingTooltip,
                     renderTooltipContent: renderProductTrainingTooltip,
                 };
             }

From 4b2a93416555f377ca48ea4b12f8d50cd095da61 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:12:45 +0100
Subject: [PATCH 13/30] revert a change

---
 src/pages/Search/SearchTypeMenuNarrow.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
index 1e287157e1b2..bddd9088f3bc 100644
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -77,13 +77,9 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
     const openMenu = useCallback(() => setIsPopoverVisible(true), []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
 
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
-        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.RENAME_SAVED_SEARCH,
-        isPopoverVisible,
-    );
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.RENAME_SAVED_SEARCH, isPopoverVisible);
 
     const onPress = () => {
-        hideProductTrainingTooltip();
         const values = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
         SearchActions.updateAdvancedFilters(values);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);

From fcaf53055c64354a17a0cccf4778dfd447500152 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 17:17:47 +0100
Subject: [PATCH 14/30] Fix SEARCH_FILTER_BUTTON_TOOLTIP for narrow layout

---
 src/pages/Search/SearchTypeMenuNarrow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
index bddd9088f3bc..25725486d7c9 100644
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -77,9 +77,12 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
     const openMenu = useCallback(() => setIsPopoverVisible(true), []);
     const closeMenu = useCallback(() => setIsPopoverVisible(false), []);
 
-    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext(CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.RENAME_SAVED_SEARCH, isPopoverVisible);
+    const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
+        CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP,
+    );
 
     const onPress = () => {
+        hideProductTrainingTooltip();
         const values = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
         SearchActions.updateAdvancedFilters(values);
         Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS);

From 1992248c1f6265abbefd92e826503066f202facb Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 18:39:26 +0100
Subject: [PATCH 15/30] Fix: tooltip does not disappear when navigating away
 for the first time

---
 src/components/LHNOptionsList/OptionRowLHN.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index d5be4a37e839..50ecd13c6196 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -1,5 +1,5 @@
-import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useRef, useState} from 'react';
+import {useFocusEffect, useNavigationState} from '@react-navigation/native';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
@@ -23,6 +23,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
 import Performance from '@libs/Performance';
@@ -34,6 +35,7 @@ import variables from '@styles/variables';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {OptionRowLHNProps} from './types';
 
@@ -53,9 +55,15 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const isActiveWorkspaceChat = ReportUtils.isPolicyExpenseChat(report) && activePolicyID === report?.policyID && session?.accountID === report?.ownerAccountID;
     const isOnboardingGuideAssigned = introSelected?.choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
+    const activeRoute = useNavigationState(getTopmostRouteName);
+
+    const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
+        const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
+        const isActiveRouteHome = activeRoute === SCREENS.HOME;
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        return {tooltipToRender: tooltip, shouldShowTooltip: shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome};
+    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout, activeRoute]);
 
-    const tooltipToRender = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
-    const shouldShowTooltip = shouldUseNarrowLayout ? isScreenFocused : true;
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
 
     const {translate} = useLocalize();

From b47997b90bd33612c9fda9231e0625a5024bd6fa Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 18:43:32 +0100
Subject: [PATCH 16/30] Fix bug: when a migrated user logged in and dismiss
 modal user dont see tooltip on FAB button

---
 src/components/FloatingActionButton.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
index 392d0d666f97..ce9b94258a6a 100644
--- a/src/components/FloatingActionButton.tsx
+++ b/src/components/FloatingActionButton.tsx
@@ -17,6 +17,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import {PressableWithoutFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
 import EducationalTooltip from './Tooltip/EducationalTooltip';
+import { useNavigationState } from '@react-navigation/native';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
+import SCREENS from '@src/SCREENS';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';
@@ -69,9 +72,12 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     const isNarrowScreenOnWeb = shouldUseNarrowLayout && platform === CONST.PLATFORM.WEB;
     const isFocused = useBottomTabIsFocused();
     const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false});
+    const activeRoute = useNavigationState(getTopmostRouteName);
+    const isActiveRouteHome = activeRoute === SCREENS.HOME;
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GLOBAL_CREATE_TOOLTIP,
-        isFocused && isSidebarLoaded,
+        // On Home screen, We need to wait for the sidebar to load before showing the tooltip because there is the Concierge tooltip which is higher priority
+        isFocused && (!isActiveRouteHome || isSidebarLoaded),
     );
     const sharedValue = useSharedValue(isActive ? 1 : 0);
     const buttonRef = ref;

From 127c7f85a0f5fb5c252a11b1ecaf493df3206b9b Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 18:46:53 +0100
Subject: [PATCH 17/30] Fix lint errors

---
 src/components/FloatingActionButton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
index ce9b94258a6a..b19c39e67c73 100644
--- a/src/components/FloatingActionButton.tsx
+++ b/src/components/FloatingActionButton.tsx
@@ -1,3 +1,4 @@
+import {useNavigationState} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
@@ -11,15 +12,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
 import {PressableWithoutFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
 import EducationalTooltip from './Tooltip/EducationalTooltip';
-import { useNavigationState } from '@react-navigation/native';
-import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
-import SCREENS from '@src/SCREENS';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';

From 2737c55739d5a9570eeebebd2b3b5616c641c19a Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 19:04:33 +0100
Subject: [PATCH 18/30] add mocks for useNavigationState

---
 tests/ui/LHNItemsPresence.tsx  | 8 ++++++++
 tests/unit/SidebarOrderTest.ts | 9 ++++++++-
 tests/unit/SidebarTest.ts      | 9 ++++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/tests/ui/LHNItemsPresence.tsx b/tests/ui/LHNItemsPresence.tsx
index 56aaafe1f80d..70deba0260f8 100644
--- a/tests/ui/LHNItemsPresence.tsx
+++ b/tests/ui/LHNItemsPresence.tsx
@@ -6,6 +6,7 @@ import type {ValueOf} from 'type-fest';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
+import type Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import FontUtils from '@styles/utils/FontUtils';
@@ -23,6 +24,13 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 // during the test depend on its methods.
 jest.mock('@libs/Permissions');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useNavigationState: () => {},
+    };
+});
 
 type LazyLoadLHNTestUtils = {
     fakePersonalDetails: PersonalDetailsList;
diff --git a/tests/unit/SidebarOrderTest.ts b/tests/unit/SidebarOrderTest.ts
index 1de2654c09bf..545e2e68c2b2 100644
--- a/tests/unit/SidebarOrderTest.ts
+++ b/tests/unit/SidebarOrderTest.ts
@@ -3,6 +3,7 @@ import Onyx from 'react-native-onyx';
 import * as Report from '@libs/actions/Report';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
+import type Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -17,7 +18,13 @@ jest.mock('@libs/Permissions');
 jest.mock('@components/Icon/Expensicons');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
 jest.mock('@src/hooks/useResponsiveLayout');
-
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useNavigationState: () => {},
+    };
+});
 describe('Sidebar', () => {
     beforeAll(() =>
         Onyx.init({
diff --git a/tests/unit/SidebarTest.ts b/tests/unit/SidebarTest.ts
index 2c8d28c537c6..b6a3767aa885 100644
--- a/tests/unit/SidebarTest.ts
+++ b/tests/unit/SidebarTest.ts
@@ -1,6 +1,7 @@
 import {screen} from '@testing-library/react-native';
 import Onyx from 'react-native-onyx';
 import DateUtils from '@libs/DateUtils';
+import type Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import * as Localize from '@src/libs/Localize';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -15,7 +16,13 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 jest.mock('@src/libs/Permissions');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
 jest.mock('@src/components/Icon/Expensicons');
-
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useNavigationState: () => {},
+    };
+});
 const TEST_USER_ACCOUNT_ID = 1;
 const TEST_USER_LOGIN = 'email1@test.com';
 

From 51eca4acc14382a0b44ae27978458e23d318e353 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 19:32:28 +0100
Subject: [PATCH 19/30] create useIsCurrentRouteHome hook

---
 src/components/FloatingActionButton.tsx        |  7 ++-----
 src/components/LHNOptionsList/OptionRowLHN.tsx | 11 +++++------
 src/hooks/useIsCurrentRouteHome.ts             | 12 ++++++++++++
 tests/ui/LHNItemsPresence.tsx                  |  8 +-------
 tests/unit/SidebarOrderTest.ts                 |  9 ++-------
 tests/unit/SidebarTest.ts                      | 10 ++--------
 6 files changed, 24 insertions(+), 33 deletions(-)
 create mode 100644 src/hooks/useIsCurrentRouteHome.ts

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
index b19c39e67c73..4189853b2aa6 100644
--- a/src/components/FloatingActionButton.tsx
+++ b/src/components/FloatingActionButton.tsx
@@ -1,4 +1,3 @@
-import {useNavigationState} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
@@ -8,15 +7,14 @@ import {useOnyx} from 'react-native-onyx';
 import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useBottomTabIsFocused from '@hooks/useBottomTabIsFocused';
+import useIsCurrentRouteHome from '@hooks/useIsCurrentRouteHome';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import getPlatform from '@libs/getPlatform';
-import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import SCREENS from '@src/SCREENS';
 import {PressableWithoutFeedback} from './Pressable';
 import {useProductTrainingContext} from './ProductTrainingContext';
 import EducationalTooltip from './Tooltip/EducationalTooltip';
@@ -72,8 +70,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
     const isNarrowScreenOnWeb = shouldUseNarrowLayout && platform === CONST.PLATFORM.WEB;
     const isFocused = useBottomTabIsFocused();
     const [isSidebarLoaded] = useOnyx(ONYXKEYS.IS_SIDEBAR_LOADED, {initialValue: false});
-    const activeRoute = useNavigationState(getTopmostRouteName);
-    const isActiveRouteHome = activeRoute === SCREENS.HOME;
+    const isActiveRouteHome = useIsCurrentRouteHome();
     const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GLOBAL_CREATE_TOOLTIP,
         // On Home screen, We need to wait for the sidebar to load before showing the tooltip because there is the Concierge tooltip which is higher priority
diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index 50ecd13c6196..369a3c861e79 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -1,4 +1,4 @@
-import {useFocusEffect, useNavigationState} from '@react-navigation/native';
+import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {GestureResponderEvent, ViewStyle} from 'react-native';
 import {StyleSheet, View} from 'react-native';
@@ -16,6 +16,7 @@ import SubscriptAvatar from '@components/SubscriptAvatar';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
+import useIsCurrentRouteHome from '@hooks/useIsCurrentRouteHome';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -23,7 +24,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
 import DomUtils from '@libs/DomUtils';
-import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Parser from '@libs/Parser';
 import Performance from '@libs/Performance';
@@ -35,7 +35,6 @@ import variables from '@styles/variables';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import SCREENS from '@src/SCREENS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {OptionRowLHNProps} from './types';
 
@@ -55,14 +54,14 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const isActiveWorkspaceChat = ReportUtils.isPolicyExpenseChat(report) && activePolicyID === report?.policyID && session?.accountID === report?.ownerAccountID;
     const isOnboardingGuideAssigned = introSelected?.choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
-    const activeRoute = useNavigationState(getTopmostRouteName);
+    const isActiveRouteHome = useIsCurrentRouteHome();
 
     const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
         const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
-        const isActiveRouteHome = activeRoute === SCREENS.HOME;
+
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         return {tooltipToRender: tooltip, shouldShowTooltip: shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome};
-    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout, activeRoute]);
+    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout, isActiveRouteHome]);
 
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
 
diff --git a/src/hooks/useIsCurrentRouteHome.ts b/src/hooks/useIsCurrentRouteHome.ts
new file mode 100644
index 000000000000..e4950a9accc7
--- /dev/null
+++ b/src/hooks/useIsCurrentRouteHome.ts
@@ -0,0 +1,12 @@
+import {useNavigationState} from '@react-navigation/native';
+import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName';
+import SCREENS from '@src/SCREENS';
+
+/** Determine if the current route is the home screen */
+function useIsCurrentRouteHome() {
+    const activeRoute = useNavigationState(getTopmostRouteName);
+    const isActiveRouteHome = activeRoute === SCREENS.HOME;
+    return isActiveRouteHome;
+}
+
+export default useIsCurrentRouteHome;
diff --git a/tests/ui/LHNItemsPresence.tsx b/tests/ui/LHNItemsPresence.tsx
index 70deba0260f8..67044790f041 100644
--- a/tests/ui/LHNItemsPresence.tsx
+++ b/tests/ui/LHNItemsPresence.tsx
@@ -24,13 +24,7 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 // during the test depend on its methods.
 jest.mock('@libs/Permissions');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
-jest.mock('@react-navigation/native', () => {
-    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
-    return {
-        ...actualNav,
-        useNavigationState: () => {},
-    };
-});
+jest.mock('@src/hooks/useIsCurrentRouteHome');
 
 type LazyLoadLHNTestUtils = {
     fakePersonalDetails: PersonalDetailsList;
diff --git a/tests/unit/SidebarOrderTest.ts b/tests/unit/SidebarOrderTest.ts
index 545e2e68c2b2..4cd9e25a424c 100644
--- a/tests/unit/SidebarOrderTest.ts
+++ b/tests/unit/SidebarOrderTest.ts
@@ -18,13 +18,8 @@ jest.mock('@libs/Permissions');
 jest.mock('@components/Icon/Expensicons');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
 jest.mock('@src/hooks/useResponsiveLayout');
-jest.mock('@react-navigation/native', () => {
-    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
-    return {
-        ...actualNav,
-        useNavigationState: () => {},
-    };
-});
+jest.mock('@src/hooks/useIsCurrentRouteHome');
+
 describe('Sidebar', () => {
     beforeAll(() =>
         Onyx.init({
diff --git a/tests/unit/SidebarTest.ts b/tests/unit/SidebarTest.ts
index b6a3767aa885..a3ca6f4734e6 100644
--- a/tests/unit/SidebarTest.ts
+++ b/tests/unit/SidebarTest.ts
@@ -1,7 +1,6 @@
 import {screen} from '@testing-library/react-native';
 import Onyx from 'react-native-onyx';
 import DateUtils from '@libs/DateUtils';
-import type Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import * as Localize from '@src/libs/Localize';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -15,14 +14,9 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 // Be sure to include the mocked Permissions and Expensicons libraries or else the beta tests won't work
 jest.mock('@src/libs/Permissions');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
+jest.mock('@src/hooks/useIsCurrentRouteHome');
 jest.mock('@src/components/Icon/Expensicons');
-jest.mock('@react-navigation/native', () => {
-    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
-    return {
-        ...actualNav,
-        useNavigationState: () => {},
-    };
-});
+
 const TEST_USER_ACCOUNT_ID = 1;
 const TEST_USER_LOGIN = 'email1@test.com';
 

From 163bf6a7adfd43aea289518acbc4327f02e256dd Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 19:34:38 +0100
Subject: [PATCH 20/30] add useIsCurrentRouteHome mock

---
 tests/perf-test/SidebarLinks.perf-test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/perf-test/SidebarLinks.perf-test.tsx b/tests/perf-test/SidebarLinks.perf-test.tsx
index ad19888b47a3..7d1e4687eb21 100644
--- a/tests/perf-test/SidebarLinks.perf-test.tsx
+++ b/tests/perf-test/SidebarLinks.perf-test.tsx
@@ -11,6 +11,7 @@ import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatch
 
 jest.mock('@libs/Permissions');
 jest.mock('@src/hooks/useActiveWorkspaceFromNavigationState');
+jest.mock('@src/hooks/useIsCurrentRouteHome');
 jest.mock('../../src/libs/Navigation/Navigation', () => ({
     navigate: jest.fn(),
     isActiveRoute: jest.fn(),

From 46da42e944dff5579d9742a2f900c08400b34fd9 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Fri, 3 Jan 2025 19:43:26 +0100
Subject: [PATCH 21/30] fix ESlint errors

---
 tests/ui/LHNItemsPresence.tsx  | 1 -
 tests/unit/SidebarOrderTest.ts | 1 -
 2 files changed, 2 deletions(-)

diff --git a/tests/ui/LHNItemsPresence.tsx b/tests/ui/LHNItemsPresence.tsx
index 67044790f041..a393ce691277 100644
--- a/tests/ui/LHNItemsPresence.tsx
+++ b/tests/ui/LHNItemsPresence.tsx
@@ -6,7 +6,6 @@ import type {ValueOf} from 'type-fest';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
-import type Navigation from '@libs/Navigation/Navigation';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import FontUtils from '@styles/utils/FontUtils';
diff --git a/tests/unit/SidebarOrderTest.ts b/tests/unit/SidebarOrderTest.ts
index 4cd9e25a424c..55fd72173c65 100644
--- a/tests/unit/SidebarOrderTest.ts
+++ b/tests/unit/SidebarOrderTest.ts
@@ -3,7 +3,6 @@ import Onyx from 'react-native-onyx';
 import * as Report from '@libs/actions/Report';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
-import type Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';

From 0f88b45d23fd4526b3d523db57d0d9ea9278b743 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 4 Jan 2025 13:50:43 +0100
Subject: [PATCH 22/30] Fix: Tooltips not showing on native

---
 src/components/MenuItem.tsx                                  | 5 +++++
 src/components/Tooltip/BaseGenericTooltip/index.native.tsx   | 3 ++-
 src/components/Tooltip/BaseGenericTooltip/types.ts           | 3 +++
 src/components/Tooltip/GenericTooltip.tsx                    | 2 ++
 src/components/Tooltip/types.ts                              | 3 +++
 .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx | 1 +
 6 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index f8a8025ebdb2..8ae468262cca 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -348,6 +348,9 @@ type MenuItemBaseProps = {
 
     /** Pressable component Test ID. Used to locate the component in tests. */
     pressableTestID?: string;
+
+    /** Whether to teleport the portal to the modal layer */
+    shouldTeleportPortalToModalLayer?: boolean;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -461,6 +464,7 @@ function MenuItem(
         shouldIconUseAutoWidthStyle = false,
         shouldBreakWord = false,
         pressableTestID,
+        shouldTeleportPortalToModalLayer,
     }: MenuItemProps,
     ref: PressableRef,
 ) {
@@ -596,6 +600,7 @@ function MenuItem(
                 wrapperStyle={tooltipWrapperStyle}
                 shiftHorizontal={tooltipShiftHorizontal}
                 shiftVertical={tooltipShiftVertical}
+                shouldTeleportPortalToModalLayer={shouldTeleportPortalToModalLayer}
             >
                 <View>
                     <Hoverable>
diff --git a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx
index b48cb55ccea1..61d4468a9382 100644
--- a/src/components/Tooltip/BaseGenericTooltip/index.native.tsx
+++ b/src/components/Tooltip/BaseGenericTooltip/index.native.tsx
@@ -36,6 +36,7 @@ function BaseGenericTooltip({
     wrapperStyle = {},
     shouldUseOverlay = false,
     onHideTooltip = () => {},
+    shouldTeleportPortalToModalLayer = false,
 }: BaseGenericTooltipProps) {
     // The width of tooltip's inner content. Has to be undefined in the beginning
     // as a width of 0 will cause the content to be rendered of a width of 0,
@@ -104,7 +105,7 @@ function BaseGenericTooltip({
     }
 
     return (
-        <Portal hostName={!shouldUseOverlay ? 'modal' : undefined}>
+        <Portal hostName={shouldTeleportPortalToModalLayer ? 'modal' : undefined}>
             {shouldUseOverlay && <TransparentOverlay onPress={onHideTooltip} />}
             <Animated.View
                 ref={rootWrapper}
diff --git a/src/components/Tooltip/BaseGenericTooltip/types.ts b/src/components/Tooltip/BaseGenericTooltip/types.ts
index 90c2f400a35e..8800d0629b0e 100644
--- a/src/components/Tooltip/BaseGenericTooltip/types.ts
+++ b/src/components/Tooltip/BaseGenericTooltip/types.ts
@@ -30,6 +30,9 @@ type BaseGenericTooltipProps = {
 
     /** Handles what to do when hiding the tooltip */
     onHideTooltip?: () => void;
+
+    /** Whether the tooltip should teleport to the modal layer */
+    shouldTeleportPortalToModalLayer?: boolean;
 } & Pick<SharedTooltipProps, 'renderTooltipContent' | 'maxWidth' | 'numberOfLines' | 'text' | 'shouldForceRenderingBelow' | 'wrapperStyle' | 'anchorAlignment' | 'shouldUseOverlay'>;
 
 // eslint-disable-next-line import/prefer-default-export
diff --git a/src/components/Tooltip/GenericTooltip.tsx b/src/components/Tooltip/GenericTooltip.tsx
index ba78324b986a..643dc7e81ea8 100644
--- a/src/components/Tooltip/GenericTooltip.tsx
+++ b/src/components/Tooltip/GenericTooltip.tsx
@@ -34,6 +34,7 @@ function GenericTooltip({
     },
     shouldForceAnimate = false,
     shouldUseOverlay: shouldUseOverlayProp = false,
+    shouldTeleportPortalToModalLayer,
 }: GenericTooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -181,6 +182,7 @@ function GenericTooltip({
                     wrapperStyle={wrapperStyle}
                     anchorAlignment={anchorAlignment}
                     shouldUseOverlay={shouldUseOverlay}
+                    shouldTeleportPortalToModalLayer={shouldTeleportPortalToModalLayer}
                     onHideTooltip={onPressOverlay}
                 />
             )}
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index b4458c18c784..3595b2fa68ea 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -39,6 +39,9 @@ type SharedTooltipProps = {
 
     /** Should render a fullscreen transparent overlay */
     shouldUseOverlay?: boolean;
+
+    /** Whether the tooltip should teleport to the modal layer */
+    shouldTeleportPortalToModalLayer?: boolean;
 };
 
 type GenericTooltipState = {
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
index b2c7d56ba010..3464fab8e72a 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -380,6 +380,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu}: Fl
             renderTooltipContent: renderProductTrainingTooltip,
             tooltipWrapperStyle: styles.productTrainingTooltipWrapper,
             shouldRenderTooltip: shouldShowProductTrainingTooltip,
+            shouldTeleportPortalToModalLayer: true,
         };
 
         if (quickAction?.action) {

From e8a3b7511ee64ab2d868423f4b64a0bc523b39a9 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 4 Jan 2025 14:28:56 +0100
Subject: [PATCH 23/30] Fix: Hide the extra "More" tooltip when we have an
 educational tooltip on saved search three dots

---
 src/components/ThreeDotsMenu/index.tsx           | 6 +++++-
 src/components/ThreeDotsMenu/types.ts            | 3 +++
 src/pages/Search/SavedSearchItemThreeDotMenu.tsx | 2 ++
 src/pages/Search/SearchTypeMenu.tsx              | 2 +-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
index e44d57ab18e2..62ef506bbbed 100644
--- a/src/components/ThreeDotsMenu/index.tsx
+++ b/src/components/ThreeDotsMenu/index.tsx
@@ -29,6 +29,7 @@ function ThreeDotsMenu({
     shouldOverlay = false,
     shouldSetModalVisibility = true,
     disabled = false,
+    shouldHideExtraTooltip = false,
 }: ThreeDotsMenuProps) {
     const [modal] = useOnyx(ONYXKEYS.MODAL);
 
@@ -57,7 +58,10 @@ function ThreeDotsMenu({
     return (
         <>
             <View>
-                <Tooltip text={translate(iconTooltip)}>
+                <Tooltip
+                    text={translate(iconTooltip)}
+                    shouldRender={!shouldHideExtraTooltip}
+                >
                     <PressableWithoutFeedback
                         onPress={() => {
                             if (isPopupMenuVisible) {
diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts
index 86a10d08d449..8c648c167b8e 100644
--- a/src/components/ThreeDotsMenu/types.ts
+++ b/src/components/ThreeDotsMenu/types.ts
@@ -38,6 +38,9 @@ type ThreeDotsMenuProps = {
 
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility?: boolean;
+
+    /** Should hide the extra "More" tooltip */
+    shouldHideExtraTooltip?: boolean;
 };
 
 export default ThreeDotsMenuProps;
diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
index 86ddf7f66bf5..fc63a4af6432 100644
--- a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
+++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
@@ -37,6 +37,8 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrai
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
                 iconStyles={styles.wAuto}
+                // We need to hide the extra "More" tooltip when we have an educational tooltip
+                shouldHideExtraTooltip={!!hideProductTrainingTooltip}
             />
         </View>
     );
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 0e30851a1b0f..110005c263f9 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -146,7 +146,7 @@ function SearchTypeMenu({queryJSON, searchName}: SearchTypeMenuProps) {
                     <SavedSearchItemThreeDotMenu
                         menuItems={getOverflowMenu(title, Number(key), item.query)}
                         isDisabledItem={item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}
-                        hideProductTrainingTooltip={index === 0 ? hideProductTrainingTooltip : undefined}
+                        hideProductTrainingTooltip={index === 0 && shouldShowProductTrainingTooltip ? hideProductTrainingTooltip : undefined}
                     />
                 ),
                 styles: [styles.alignItemsCenter],

From b33e69f1fafa521bd0f7e3f5621f9703d70df862 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 4 Jan 2025 22:36:28 +0100
Subject: [PATCH 24/30] Refactor

---
 src/components/ThreeDotsMenu/index.tsx        |  5 +--
 src/components/ThreeDotsMenu/types.ts         |  4 +--
 .../BaseEducationalTooltip.tsx                | 34 ++++---------------
 .../Search/SavedSearchItemThreeDotMenu.tsx    |  4 +--
 4 files changed, 13 insertions(+), 34 deletions(-)

diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
index 62ef506bbbed..69a6e1cbeba1 100644
--- a/src/components/ThreeDotsMenu/index.tsx
+++ b/src/components/ThreeDotsMenu/index.tsx
@@ -29,7 +29,7 @@ function ThreeDotsMenu({
     shouldOverlay = false,
     shouldSetModalVisibility = true,
     disabled = false,
-    shouldHideExtraTooltip = false,
+    hideProductTrainingTooltip,
 }: ThreeDotsMenuProps) {
     const [modal] = useOnyx(ONYXKEYS.MODAL);
 
@@ -60,7 +60,7 @@ function ThreeDotsMenu({
             <View>
                 <Tooltip
                     text={translate(iconTooltip)}
-                    shouldRender={!shouldHideExtraTooltip}
+                    shouldRender={!hideProductTrainingTooltip}
                 >
                     <PressableWithoutFeedback
                         onPress={() => {
@@ -68,6 +68,7 @@ function ThreeDotsMenu({
                                 hidePopoverMenu();
                                 return;
                             }
+                            hideProductTrainingTooltip?.();
                             buttonRef.current?.blur();
                             showPopoverMenu();
                             if (onIconPress) {
diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts
index 8c648c167b8e..7ac641c55efe 100644
--- a/src/components/ThreeDotsMenu/types.ts
+++ b/src/components/ThreeDotsMenu/types.ts
@@ -39,8 +39,8 @@ type ThreeDotsMenuProps = {
     /** Should we announce the Modal visibility changes? */
     shouldSetModalVisibility?: boolean;
 
-    /** Should hide the extra "More" tooltip */
-    shouldHideExtraTooltip?: boolean;
+    /** Function to hide the product training tooltip */
+    hideProductTrainingTooltip?: () => void;
 };
 
 export default ThreeDotsMenuProps;
diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index 26a5aa6d5ff6..c0087ad6fce5 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -1,4 +1,4 @@
-import React, {memo, useCallback, useEffect, useRef, useState} from 'react';
+import React, {memo, useEffect, useRef, useState} from 'react';
 import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
 import type {EducationalTooltipProps} from '@components/Tooltip/types';
@@ -16,27 +16,18 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
     const [shouldMeasure, setShouldMeasure] = useState(false);
     const show = useRef<() => void>();
 
-    const closeTooltip = useCallback(() => {
-        hideTooltipRef.current?.();
+    useEffect(() => {
+        return () => {
+            hideTooltipRef.current?.();
+        };
     }, []);
 
-    useEffect(
-        () => () => {
-            if (!hideTooltipRef.current) {
-                return;
-            }
-
-            hideTooltipRef.current();
-        },
-        [],
-    );
-
     useEffect(() => {
         if (!shouldMeasure) {
             return;
         }
         if (!shouldRender) {
-            closeTooltip();
+            hideTooltipRef.current?.();
             return;
         }
         // When tooltip is used inside an animated view (e.g. popover), we need to wait for the animation to finish before measuring content.
@@ -45,19 +36,8 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
         }, 500);
         return () => {
             clearTimeout(timerID);
-            closeTooltip();
         };
-    }, [shouldMeasure, shouldRender, closeTooltip]);
-
-    useEffect(
-        () => closeTooltip,
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-        [],
-    );
-
-    if (!shouldRender) {
-        return children as React.ReactElement;
-    }
+    }, [shouldMeasure, shouldRender]);
 
     return (
         <GenericTooltip
diff --git a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
index fc63a4af6432..492bf3d6bde8 100644
--- a/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
+++ b/src/pages/Search/SavedSearchItemThreeDotMenu.tsx
@@ -23,7 +23,6 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrai
             <ThreeDotsMenu
                 menuItems={menuItems}
                 onIconPress={() => {
-                    hideProductTrainingTooltip?.();
                     threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => {
                         setThreeDotsMenuPosition({
                             horizontal: x + width,
@@ -37,8 +36,7 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrai
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
                 iconStyles={styles.wAuto}
-                // We need to hide the extra "More" tooltip when we have an educational tooltip
-                shouldHideExtraTooltip={!!hideProductTrainingTooltip}
+                hideProductTrainingTooltip={hideProductTrainingTooltip}
             />
         </View>
     );

From aa2b17314bb8d8c30c43c026388ac9951587d179 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sat, 4 Jan 2025 22:39:51 +0100
Subject: [PATCH 25/30] add comment

---
 src/components/ThreeDotsMenu/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
index 69a6e1cbeba1..63acb9043beb 100644
--- a/src/components/ThreeDotsMenu/index.tsx
+++ b/src/components/ThreeDotsMenu/index.tsx
@@ -60,6 +60,7 @@ function ThreeDotsMenu({
             <View>
                 <Tooltip
                     text={translate(iconTooltip)}
+                    // We need to hide the extra "More" tooltip when we have an educational tooltip
                     shouldRender={!hideProductTrainingTooltip}
                 >
                     <PressableWithoutFeedback

From 473cad51cfed649390f00a27434c55691012e313 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 5 Jan 2025 23:54:03 +0100
Subject: [PATCH 26/30] Fix bug

---
 .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx      | 1 +
 src/components/Tooltip/GenericTooltip.tsx                      | 3 ++-
 src/components/Tooltip/types.ts                                | 3 +++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index c0087ad6fce5..81c76c77150f 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -42,6 +42,7 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
     return (
         <GenericTooltip
             shouldForceAnimate
+            shouldRender={shouldRender}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
diff --git a/src/components/Tooltip/GenericTooltip.tsx b/src/components/Tooltip/GenericTooltip.tsx
index 643dc7e81ea8..e31eda25293d 100644
--- a/src/components/Tooltip/GenericTooltip.tsx
+++ b/src/components/Tooltip/GenericTooltip.tsx
@@ -35,6 +35,7 @@ function GenericTooltip({
     shouldForceAnimate = false,
     shouldUseOverlay: shouldUseOverlayProp = false,
     shouldTeleportPortalToModalLayer,
+    shouldRender = true,
 }: GenericTooltipProps) {
     const {preferredLocale} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -160,7 +161,7 @@ function GenericTooltip({
 
     return (
         <>
-            {isRendered && (
+            {shouldRender && isRendered && (
                 <BaseGenericTooltip
                     // eslint-disable-next-line react-compiler/react-compiler
                     animation={animation}
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 3595b2fa68ea..7965e0d953f8 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -61,6 +61,9 @@ type GenericTooltipState = {
 type GenericTooltipProps = SharedTooltipProps & {
     children: React.FC<GenericTooltipState>;
 
+    /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */
+    shouldRender?: boolean;
+
     /** Whether to ignore TooltipSense activity and always triger animation */
     shouldForceAnimate?: boolean;
 };

From b4187eecc815cfdffa296da060991be27e872454 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Sun, 5 Jan 2025 23:57:01 +0100
Subject: [PATCH 27/30] Fix QAB tooltip does not hide immediately

---
 .../EducationalTooltip/BaseEducationalTooltip.tsx      | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index 81c76c77150f..304282b79f76 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -1,3 +1,4 @@
+import {useNavigation} from '@react-navigation/native';
 import React, {memo, useEffect, useRef, useState} from 'react';
 import type {LayoutRectangle, NativeSyntheticEvent} from 'react-native';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
@@ -16,6 +17,8 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
     const [shouldMeasure, setShouldMeasure] = useState(false);
     const show = useRef<() => void>();
 
+    const navigation = useNavigation();
+
     useEffect(() => {
         return () => {
             hideTooltipRef.current?.();
@@ -39,6 +42,13 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
         };
     }, [shouldMeasure, shouldRender]);
 
+    useEffect(() => {
+        const unsubscribe = navigation.addListener('blur', () => {
+            hideTooltipRef.current?.();
+        });
+        return unsubscribe;
+    }, [navigation]);
+
     return (
         <GenericTooltip
             shouldForceAnimate

From 1a5214952d68a1e0785b88903038900ec088cc4a Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:18:59 +0100
Subject: [PATCH 28/30] Fix: bottomtab tooltips (inbox and FAB) only hides on
 navigation to search page

---
 src/components/FloatingActionButton.tsx                    | 1 +
 .../Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx  | 7 +++++--
 src/components/Tooltip/types.ts                            | 3 +++
 .../createCustomBottomTabNavigator/BottomTabBar.tsx        | 1 +
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/FloatingActionButton.tsx b/src/components/FloatingActionButton.tsx
index 4189853b2aa6..04bc4847a00f 100644
--- a/src/components/FloatingActionButton.tsx
+++ b/src/components/FloatingActionButton.tsx
@@ -127,6 +127,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
             shiftHorizontal={isNarrowScreenOnWeb ? 0 : variables.fabTooltipShiftHorizontal}
             renderTooltipContent={renderProductTrainingTooltip}
             wrapperStyle={styles.productTrainingTooltipWrapper}
+            shouldHideOnNavigate={false}
         >
             <PressableWithoutFeedback
                 ref={(el) => {
diff --git a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
index 304282b79f76..c1298a19e9dd 100644
--- a/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
+++ b/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx
@@ -11,7 +11,7 @@ type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
-function BaseEducationalTooltip({children, shouldRender = false, ...props}: EducationalTooltipProps) {
+function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, ...props}: EducationalTooltipProps) {
     const hideTooltipRef = useRef<() => void>();
 
     const [shouldMeasure, setShouldMeasure] = useState(false);
@@ -44,10 +44,13 @@ function BaseEducationalTooltip({children, shouldRender = false, ...props}: Educ
 
     useEffect(() => {
         const unsubscribe = navigation.addListener('blur', () => {
+            if (!shouldHideOnNavigate) {
+                return;
+            }
             hideTooltipRef.current?.();
         });
         return unsubscribe;
-    }, [navigation]);
+    }, [navigation, shouldHideOnNavigate]);
 
     return (
         <GenericTooltip
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 7965e0d953f8..13ff6b731a5d 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -42,6 +42,9 @@ type SharedTooltipProps = {
 
     /** Whether the tooltip should teleport to the modal layer */
     shouldTeleportPortalToModalLayer?: boolean;
+
+    /** Whether the tooltip should hide when navigating */
+    shouldHideOnNavigate?: boolean;
 };
 
 type GenericTooltipState = {
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
index 7c9f1f85f6f5..74fb83aa7e01 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx
@@ -156,6 +156,7 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
                     shiftHorizontal={isWebOrDesktop ? 0 : variables.bottomTabInboxTooltipShiftHorizontal}
                     renderTooltipContent={renderProductTrainingTooltip}
                     wrapperStyle={styles.productTrainingTooltipWrapper}
+                    shouldHideOnNavigate={false}
                 >
                     <PressableWithFeedback
                         onPress={navigateToChats}

From ed68330883f96b454799f84dc2504a9ddacf490f Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Mon, 6 Jan 2025 10:29:25 +0100
Subject: [PATCH 29/30] move prop to most relevant type

---
 src/components/Tooltip/types.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 13ff6b731a5d..2008a1a21851 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -42,9 +42,6 @@ type SharedTooltipProps = {
 
     /** Whether the tooltip should teleport to the modal layer */
     shouldTeleportPortalToModalLayer?: boolean;
-
-    /** Whether the tooltip should hide when navigating */
-    shouldHideOnNavigate?: boolean;
 };
 
 type GenericTooltipState = {
@@ -81,6 +78,9 @@ type EducationalTooltipProps = ChildrenProps &
     SharedTooltipProps & {
         /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */
         shouldRender?: boolean;
+
+        /** Whether the tooltip should hide when navigating */
+        shouldHideOnNavigate?: boolean;
     };
 
 type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & {

From 270a302cf5a8388ad88a694d1b98bc6ce9b49939 Mon Sep 17 00:00:00 2001
From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com>
Date: Mon, 6 Jan 2025 12:26:00 +0100
Subject: [PATCH 30/30] Fix: clicking on admin chat dismiss the workspacechat
 tooltip

---
 src/components/LHNOptionsList/OptionRowLHN.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx
index 369a3c861e79..cf30aa8ff96a 100644
--- a/src/components/LHNOptionsList/OptionRowLHN.tsx
+++ b/src/components/LHNOptionsList/OptionRowLHN.tsx
@@ -51,17 +51,19 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const session = useSession();
-    const isActiveWorkspaceChat = ReportUtils.isPolicyExpenseChat(report) && activePolicyID === report?.policyID && session?.accountID === report?.ownerAccountID;
+    const shouldShowWokspaceChatTooltip = ReportUtils.isPolicyExpenseChat(report) && activePolicyID === report?.policyID && session?.accountID === report?.ownerAccountID;
     const isOnboardingGuideAssigned = introSelected?.choice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM && !session?.email?.includes('+');
     const shouldShowGetStartedTooltip = isOnboardingGuideAssigned ? ReportUtils.isAdminRoom(report) : ReportUtils.isConciergeChatReport(report);
     const isActiveRouteHome = useIsCurrentRouteHome();
 
     const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
         const tooltip = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
+        const shouldShowTooltips = shouldShowWokspaceChatTooltip || shouldShowGetStartedTooltip;
+        const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome;
 
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        return {tooltipToRender: tooltip, shouldShowTooltip: shouldUseNarrowLayout ? isScreenFocused && isActiveRouteHome : isActiveRouteHome};
-    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout, isActiveRouteHome]);
+        return {tooltipToRender: tooltip, shouldShowTooltip: shouldShowTooltips && shouldTooltipBeVisible};
+    }, [shouldShowGetStartedTooltip, shouldShowWokspaceChatTooltip, isScreenFocused, shouldUseNarrowLayout, isActiveRouteHome]);
 
     const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
 
@@ -162,14 +164,14 @@ function OptionRowLHN({reportID, isFocused = false, onSelectRow = () => {}, opti
         >
             <EducationalTooltip
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                shouldRender={shouldShowProductTrainingTooltip && (isActiveWorkspaceChat || shouldShowGetStartedTooltip)}
+                shouldRender={shouldShowProductTrainingTooltip}
                 renderTooltipContent={renderProductTrainingTooltip}
                 anchorAlignment={{
-                    horizontal: isActiveWorkspaceChat ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    horizontal: shouldShowWokspaceChatTooltip ? CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT : CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                 }}
-                shiftHorizontal={isActiveWorkspaceChat ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}
-                shiftVertical={isActiveWorkspaceChat ? 0 : variables.composerTooltipShiftVertical}
+                shiftHorizontal={shouldShowWokspaceChatTooltip ? variables.workspaceLHNtooltipShiftHorizontal : variables.gbrTooltipShiftHorizontal}
+                shiftVertical={shouldShowWokspaceChatTooltip ? 0 : variables.composerTooltipShiftVertical}
                 wrapperStyle={styles.productTrainingTooltipWrapper}
             >
                 <View>