diff --git a/src/components/FeatureTrainingModal.tsx b/src/components/FeatureTrainingModal.tsx index 32c86a0af4767..613d786230f25 100644 --- a/src/components/FeatureTrainingModal.tsx +++ b/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) { diff --git a/src/components/MigratedUserWelcomeModal.tsx b/src/components/MigratedUserWelcomeModal.tsx index 6a1221797bda8..67ab58f1912c8 100644 --- a/src/components/MigratedUserWelcomeModal.tsx +++ b/src/components/MigratedUserWelcomeModal.tsx @@ -1,5 +1,6 @@ -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'; @@ -7,8 +8,14 @@ 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} >