Feat: Make it possible to click the element the product training tooltip is pointing to

src/components/FloatingActionButton.tsx

@@ -108,6 +108,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);
@@ -120,11 +121,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) => {

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -1,5 +1,5 @@
 import {useFocusEffect} from '@react-navigation/native';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+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,9 +44,12 @@
     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}`);
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
     const session = useSession();
@@ -54,16 +57,7 @@
     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;
-
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        return {tooltipToRender: tooltip, shouldShowTooltip: shouldUseNarrowLayout ? isScreenFocused : true};
-    }, [shouldShowGetStartedTooltip, isScreenFocused, shouldUseNarrowLayout]);
-
-    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
-    const {translate} = useLocalize();
-    const [isContextMenuActive, setIsContextMenuActive] = useState(false);
+    const tooltipToRender = shouldShowGetStartedTooltip ? CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCEIRGE_LHN_GBR : CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.LHN_WORKSPACE_CHAT_TOOLTIP;
 
     useFocusEffect(
         useCallback(() => {
@@ -74,6 +68,12 @@
         }, []),
     );
 
+    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
@@ -165,10 +165,8 @@
                     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 +181,7 @@
                                     event?.preventDefault();
                                     // Enable Composer to focus on clicking the same chat after opening the context menu.
                                     ReportActionComposeFocusManager.focus();
+                                    hideProductTrainingTooltip();
                                     onSelectRow(optionItem, popoverAnchor);
                                 }}
                                 onMouseDown={(event) => {

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;
 
@@ -461,7 +458,6 @@ function MenuItem(
         renderTooltipContent,
         additionalIconStyles,
         shouldShowSelectedItemCheck = false,
-        onHideTooltip,
         shouldIconUseAutoWidthStyle = false,
         shouldBreakWord = false,
         pressableTestID,
@@ -600,8 +596,6 @@ function MenuItem(
                 wrapperStyle={tooltipWrapperStyle}
                 shiftHorizontal={tooltipShiftHorizontal}
                 shiftVertical={tooltipShiftVertical}
-                shouldAutoDismiss
-                onHideTooltip={onHideTooltip}
             >
                 <View>
                     <Hoverable>

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,

src/components/ProductTrainingContext/index.tsx

@@ -156,11 +156,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 +208,13 @@ const useProductTrainingContext = (tooltipName: ProductTrainingTooltipName, shou
     }, [shouldRenderTooltip, tooltipName, shouldShow]);
 
     const hideProductTrainingTooltip = useCallback(() => {
+        if (!shouldShowProductTrainingTooltip) {
+            return;
+        }
         const tooltip = TOOLTIPS[tooltipName];
         tooltip.onHideTooltip();
         unregisterTooltip(tooltipName);
-    }, [tooltipName, unregisterTooltip]);
+    }, [tooltipName, shouldShowProductTrainingTooltip, unregisterTooltip]);
 
     return {
         renderProductTrainingTooltip,

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';
@@ -58,14 +58,23 @@
     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);
+    // 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);
+            return () => {
+                setIsScreenFocused(false);
+            };
+        }, []),
+    );
+
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
     const handleDeleteExpenses = () => {
@@ -189,7 +198,7 @@
 
                 const reportIDList = selectedReports?.filter((report) => !!report).map((report) => report.reportID) ?? [];
                 SearchActions.exportSearchItemsToCSV(
                     {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']},
                     () => {
                         setIsDownloadErrorModalVisible(true);
                     },
@@ -289,6 +298,11 @@
         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 (
@@ -334,6 +348,7 @@
     }
 
     const onFiltersButtonPress = () => {
+        hideProductTrainingTooltip();
         const filterFormValues = SearchQueryUtils.buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, cardList, reports, taxRates);
         SearchActions.updateAdvancedFilters(filterFormValues);
 
@@ -362,11 +377,9 @@
                             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]}

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};

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -3,39 +3,22 @@ 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}>;
 
 /**
  * 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]);
 
@@ -87,12 +55,15 @@ function BaseEducationalTooltip({children, onHideTooltip: onHideTooltipProp, sho
         [],
     );
 
+    if (!shouldRender) {
+        return children as React.ReactElement;
+    }
+
     return (
         <GenericTooltip
             shouldForceAnimate
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            onHideTooltip={onHideTooltip}
         >
             {({showTooltip, hideTooltip, updateTargetBounds}) => {
                 // eslint-disable-next-line react-compiler/react-compiler

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) {