[Fix] Automatically dismiss the migration modal in all open tabs

src/components/FeatureTrainingModal.tsx

@@ -93,6 +93,9 @@ type BaseFeatureTrainingModalProps = {
 
     /** Modal width */
     width?: number;
+
+    /** Whether to disable the modal */
+    isModalDisabled?: boolean;
 };
 
 type FeatureTrainingModalVideoProps = {
@@ -140,6 +143,7 @@ function FeatureTrainingModal({
     contentInnerContainerStyles,
     contentOuterContainerStyles,
     modalInnerContainerStyle,
+    isModalDisabled = true,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -154,8 +158,14 @@ function FeatureTrainingModal({
     const {isOffline} = useNetwork();
 
     useEffect(() => {
-        InteractionManager.runAfterInteractions(() => setIsModalVisible(true));
-    }, []);
+        InteractionManager.runAfterInteractions(() => {
+            if (!isModalDisabled) {
+                setIsModalVisible(false);
+                return;
+            }
+            setIsModalVisible(true);
+        });
+    }, [isModalDisabled]);
 
     useEffect(() => {
         if (isVideoStatusLocked) {

src/components/MigratedUserWelcomeModal.tsx

@@ -1,14 +1,21 @@
-import React, {useLayoutEffect} from 'react';
+import React, {useEffect, useLayoutEffect, useState} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {dismissProductTraining} from '@libs/actions/Welcome';
 import convertToLTR from '@libs/convertToLTR';
 import {parseFSAttributes} from '@libs/Fullstory';
+import Navigation from '@libs/Navigation/Navigation';
+import {tryNewDotOnyxSelector} from '@libs/onboardingSelectors';
+import {buildCannedSearchQuery} from '@libs/SearchQueryUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type {FeatureListItem} from './FeatureList';
 import FeatureTrainingModal from './FeatureTrainingModal';
 import Icon from './Icon';
@@ -36,6 +43,26 @@ function OnboardingWelcomeVideo() {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [isModalDisabled, setIsModalDisabled] = useState(true);
+
+    const [tryNewDot, tryNewDotdMetadata] = useOnyx(ONYXKEYS.NVP_TRYNEWDOT, {
+        selector: tryNewDotOnyxSelector,
+    });
+    const [dismissedProductTraining, dismissedProductTrainingMetadata] = useOnyx(ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING);
+
+    useEffect(() => {
+        if (isLoadingOnyxValue(tryNewDotdMetadata, dismissedProductTrainingMetadata)) {
+            return;
+        }
+        const {hasBeenAddedToNudgeMigration} = tryNewDot ?? {};
+
+        if (hasBeenAddedToNudgeMigration && !dismissedProductTraining?.migratedUserWelcomeModal) {
+            return;
+        }
+        setIsModalDisabled(false);
+        const defaultCannedQuery = buildCannedSearchQuery();
+        Navigation.navigate(ROUTES.SEARCH_ROOT.getRoute({query: defaultCannedQuery}));
+    }, [dismissedProductTraining?.migratedUserWelcomeModal, setIsModalDisabled, tryNewDotdMetadata, dismissedProductTrainingMetadata, tryNewDot]);
 
     /**
      * Extracts values from the non-scraped attribute WEB_PROP_ATTR at build time
@@ -62,6 +89,7 @@ function OnboardingWelcomeVideo() {
             contentInnerContainerStyles={[styles.mb5, styles.gap2]}
             contentOuterContainerStyles={!shouldUseNarrowLayout && [styles.mt8, styles.mh8]}
             modalInnerContainerStyle={{...styles.pt0, ...(shouldUseNarrowLayout ? {} : styles.pb8)}}
+            isModalDisabled={isModalDisabled}
         >
             <View
                 style={[styles.gap3, styles.pt1, styles.pl1]}