From 6942d544e486cc837cb63d17d74cb5b79954673f Mon Sep 17 00:00:00 2001
From: Alex Beaman <alexbeaman@expensify.com>
Date: Tue, 7 Jan 2025 17:45:23 +0200
Subject: [PATCH] Merge pull request #54865 from
 ishpaul777/fix/tooltip-blockers

[CP Staging] Add loading state to ProductTrainingContextProvider

(cherry picked from commit 8f3fe5f31704799ba17eb6ef9052a2fa01bb62b1)

(CP triggered by mountiny)
---
 src/components/ProductTrainingContext/index.tsx     |  6 ++++--
 .../ReportActionCompose/ReportActionCompose.tsx     |  4 +++-
 .../components/ProductTrainingContextProvider.tsx   | 13 +++++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/ProductTrainingContext/index.tsx b/src/components/ProductTrainingContext/index.tsx
index 5e4069a0c43f..a7806574126d 100644
--- a/src/components/ProductTrainingContext/index.tsx
+++ b/src/components/ProductTrainingContext/index.tsx
@@ -29,11 +29,13 @@ const ProductTrainingContext = createContext<ProductTrainingContextType>({
 });
 
 function ProductTrainingContextProvider({children}: ChildrenProps) {
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true});
     const [tryNewDot] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT);
     const hasBeenAddedToNudgeMigration = !!tryNewDot?.nudgeMigration?.timestamp;
     const [isOnboardingCompleted = true, isOnboardingCompletedMetadata] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {
         selector: hasCompletedGuidedSetupFlowSelector,
     });
+
     const [dismissedProductTraining] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
@@ -77,7 +79,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
 
     const shouldTooltipBeVisible = useCallback(
         (tooltipName: ProductTrainingTooltipName) => {
-            if (isLoadingOnyxValue(isOnboardingCompletedMetadata)) {
+            if (isLoadingOnyxValue(isOnboardingCompletedMetadata) || isLoadingApp) {
                 return false;
             }
 
@@ -105,7 +107,7 @@ function ProductTrainingContextProvider({children}: ChildrenProps) {
                 shouldUseNarrowLayout,
             });
         },
-        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible],
+        [dismissedProductTraining, hasBeenAddedToNudgeMigration, isOnboardingCompleted, isOnboardingCompletedMetadata, shouldUseNarrowLayout, isModalVisible, isLoadingApp],
     );
 
     const registerTooltip = useCallback(
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
index 4c5a19db07c0..e1764b26fde8 100644
--- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
+++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import lodashDebounce from 'lodash/debounce';
 import noop from 'lodash/noop';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -135,10 +136,11 @@ function ReportActionCompose({
     const personalDetails = usePersonalDetails();
     const [blockedFromConcierge] = useOnyx(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
     const [shouldShowComposeInput = true] = useOnyx(ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT);
+    const isScreenFocused = useIsFocused();
 
     const {renderProductTrainingTooltip, hideProductTrainingTooltip, shouldShowProductTrainingTooltip} = useProductTrainingContext(
         CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.WORKSAPCE_CHAT_CREATE,
-        shouldShowEducationalTooltip,
+        shouldShowEducationalTooltip && isScreenFocused,
     );
 
     /**
diff --git a/tests/ui/components/ProductTrainingContextProvider.tsx b/tests/ui/components/ProductTrainingContextProvider.tsx
index 0177908ec87d..d54c8f8c446e 100644
--- a/tests/ui/components/ProductTrainingContextProvider.tsx
+++ b/tests/ui/components/ProductTrainingContextProvider.tsx
@@ -48,6 +48,7 @@ describe('ProductTrainingContextProvider', () => {
         // Set up test environment before each test
         wrapOnyxWithWaitForBatchedUpdates(Onyx);
         Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false});
+        Onyx.merge(ONYXKEYS.IS_LOADING_APP, false);
         signUpWithTestUser();
     });
 
@@ -61,6 +62,18 @@ describe('ProductTrainingContextProvider', () => {
     mockUseResponsiveLayout.mockReturnValue({...DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: false});
 
     describe('Basic Tooltip Registration', () => {
+        it('should not register tooltips when app is loading', async () => {
+            // When app is loading
+            Onyx.merge(ONYXKEYS.IS_LOADING_APP, true);
+            await waitForBatchedUpdatesWithAct();
+
+            const testTooltip = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.GLOBAL_CREATE_TOOLTIP;
+            const {result} = renderHook(() => useProductTrainingContext(testTooltip), {wrapper});
+
+            // Then tooltip should not show
+            expect(result.current.shouldShowProductTrainingTooltip).toBe(false);
+        });
+
         it('should not register tooltips when onboarding is not completed', async () => {
             // When onboarding is not completed
             Onyx.merge(ONYXKEYS.NVP_ONBOARDING, {hasCompletedGuidedSetupFlow: false});