Migrated user welcome modal

src/NAVIGATORS.ts

@@ -11,5 +11,6 @@ export default {
     FEATURE_TRANING_MODAL_NAVIGATOR: 'FeatureTrainingModalNavigator',
     WELCOME_VIDEO_MODAL_NAVIGATOR: 'WelcomeVideoModalNavigator',
     EXPLANATION_MODAL_NAVIGATOR: 'ExplanationModalNavigator',
+    MIGRATED_USER_MODAL_NAVIGATOR: 'MigratedUserModalNavigator',
     FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
 } as const;

src/ONYXKEYS.ts

@@ -359,6 +359,9 @@ const ONYXKEYS = {
     // Stores onboarding last visited path
     ONBOARDING_LAST_VISITED_PATH: 'onboardingLastVisitedPath',
 
+    // Whether the user has dismissed the product training element (Modal, Tooltip, etc.)
+    NVP_DISMISSED_PRODUCT_TRAINING: 'nvp_dismissedProductTraining',
+
     // Max width supported for HTML <canvas> element
     MAX_CANVAS_WIDTH: 'maxCanvasWidth',
 
@@ -1023,6 +1026,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.SHOULD_SHOW_SAVED_SEARCH_RENAME_TOOLTIP]: boolean;
     [ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES]: Record<string, string>;
     [ONYXKEYS.CONCIERGE_REPORT_ID]: string;
+    [ONYXKEYS.NVP_DISMISSED_PRODUCT_TRAINING]: OnyxTypes.DismissedProductTraining;
 };
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping;
 

src/ROUTES.ts

@@ -1382,6 +1382,7 @@ const ROUTES = {
     },
     WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
     EXPLANATION_MODAL_ROOT: 'onboarding/explanation',
+    MIGRATED_USER_WELCOME_MODAL: 'onboarding/migrated-user-welcome',
 
     TRANSACTION_RECEIPT: {
         route: 'r/:reportID/transaction/:transactionID/receipt',

src/SCREENS.ts

@@ -586,6 +586,10 @@ const SCREENS = {
         ROOT: 'Explanation_Modal_Root',
     },
 
+    MIGRATED_USER_WELCOME_MODAL: {
+        ROOT: 'MigratedUserWelcomeModal_Root',
+    },
+
     I_KNOW_A_TEACHER: 'I_Know_A_Teacher',
     INTRO_SCHOOL_PRINCIPAL: 'Intro_School_Principal',
     I_AM_A_TEACHER: 'I_Am_A_Teacher',

src/components/FeatureTrainingModal.tsx

@@ -1,6 +1,7 @@
 import type {VideoReadyForDisplayEvent} from 'expo-av';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -39,8 +40,17 @@ type FeatureTrainingModalProps = {
     /** Animation to show when video is unavailable. Useful when app is offline */
     animation?: DotLottieAnimation;
 
+    /** Style for the animation container */
+    animationContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to render the animation instead of the video */
+    animationStyle?: StyleProp<ViewStyle>;
+
+    /** Whether to render the animation instead of the video */
+    shouldRenderAnimation?: boolean;
+
     /** URL for the video */
-    videoURL: string;
+    videoURL?: string;
 
     videoAspectRatio?: number;
 
@@ -70,21 +80,32 @@ type FeatureTrainingModalProps = {
 
     /** Link to navigate to when user wants to learn more */
     onHelp?: () => void;
+
+    /** Children to render */
+    children?: React.ReactNode;
+
+    /** Styles for the content container */
+    contentContainerStyles?: StyleProp<ViewStyle>;
 };
 
 function FeatureTrainingModal({
     animation,
+    animationStyle,
+    animationContainerStyle,
     videoURL,
     videoAspectRatio: videoAspectRatioProp,
     title = '',
     description = '',
     secondaryDescription = '',
+    shouldRenderAnimation = false,
     shouldShowDismissModalOption = false,
     confirmText = '',
     onConfirm = () => {},
     onClose = () => {},
     helpText = '',
     onHelp = () => {},
+    children,
+    contentContainerStyles,
 }: FeatureTrainingModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -133,13 +154,14 @@ function FeatureTrainingModal({
                     // for the video until it loads. Also, when
                     // videoStatus === 'animation' it will
                     // set the same aspect ratio as the video would.
-                    {aspectRatio},
+                    animationContainerStyle,
+                    !shouldRenderAnimation && {aspectRatio},
                 ]}
             >
-                {videoStatus === 'video' ? (
+                {!shouldRenderAnimation && videoStatus === 'video' ? (
                     <GestureHandlerRootView>
                         <VideoPlayer
-                            url={videoURL}
+                            url={videoURL ?? ''}
                             videoPlayerStyle={[styles.onboardingVideoPlayer, {aspectRatio}]}
                             onVideoLoaded={setAspectRatio}
                             controlsStatus={CONST.VIDEO_PLAYER.CONTROLS_STATUS.HIDE}
@@ -149,7 +171,7 @@ function FeatureTrainingModal({
                         />
                     </GestureHandlerRootView>
                 ) : (
-                    <View style={[styles.flex1, styles.alignItemsCenter, {aspectRatio}]}>
+                    <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter, !shouldRenderAnimation && {aspectRatio}, animationStyle]}>
                         <Lottie
                             source={animation ?? LottieAnimations.Hands}
                             style={styles.h100}
@@ -161,7 +183,22 @@ function FeatureTrainingModal({
                 )}
             </View>
         );
-    }, [animation, videoURL, videoAspectRatio, videoStatus, shouldUseNarrowLayout, styles]);
+    }, [
+        videoAspectRatio,
+        styles.w100,
+        styles.onboardingVideoPlayer,
+        styles.flex1,
+        styles.alignItemsCenter,
+        styles.justifyContentCenter,
+        styles.h100,
+        shouldRenderAnimation,
+        videoStatus,
+        videoURL,
+        animationContainerStyle,
+        animationStyle,
+        animation,
+        shouldUseNarrowLayout,
+    ]);
 
     const toggleWillShowAgain = useCallback(() => setWillShowAgain((prevWillShowAgain) => !prevWillShowAgain), []);
 
@@ -205,10 +242,11 @@ function FeatureTrainingModal({
                         <View style={onboardingIsMediumOrLargerScreenWidth ? {padding: MODAL_PADDING} : {paddingHorizontal: MODAL_PADDING}}>{renderIllustration()}</View>
                         <View style={[styles.mt5, styles.mh5]}>
                             {!!title && !!description && (
-                                <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10]]}>
+                                <View style={[onboardingIsMediumOrLargerScreenWidth ? [styles.gap1, styles.mb8] : [styles.mb10], contentContainerStyles]}>
                                     <Text style={[styles.textHeadlineH1]}>{title}</Text>
                                     <Text style={styles.textSupporting}>{description}</Text>
                                     {secondaryDescription.length > 0 && <Text style={[styles.textSupporting, styles.mt4]}>{secondaryDescription}</Text>}
+                                    {children}
                                 </View>
                             )}
                             {shouldShowDismissModalOption && (

src/components/Icon/Illustrations.ts

@@ -90,6 +90,7 @@ import EmailAddress from '@assets/images/simple-illustrations/simple-illustratio
 import EmptyState from '@assets/images/simple-illustrations/simple-illustration__empty-state.svg';
 import EnvelopeReceipt from '@assets/images/simple-illustrations/simple-illustration__envelopereceipt.svg';
 import Filters from '@assets/images/simple-illustrations/simple-illustration__filters.svg';
+import Flash from '@assets/images/simple-illustrations/simple-illustration__flash.svg';
 import FolderOpen from '@assets/images/simple-illustrations/simple-illustration__folder-open.svg';
 import Gears from '@assets/images/simple-illustrations/simple-illustration__gears.svg';
 import HandCard from '@assets/images/simple-illustrations/simple-illustration__handcard.svg';
@@ -105,6 +106,7 @@ import LockOpen from '@assets/images/simple-illustrations/simple-illustration__l
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
 import MagnifyingGlassMoney from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg';
 import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
+import ExpensifyMobileApp from '@assets/images/simple-illustrations/simple-illustration__mobileapp.svg';
 import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
 import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
 import MoneyIntoWallet from '@assets/images/simple-illustrations/simple-illustration__moneyintowallet.svg';
@@ -290,4 +292,6 @@ export {
     StripeCompanyCardDetailLarge,
     VisaCompanyCardDetailLarge,
     WellsFargoCompanyCardDetailLarge,
+    Flash,
+    ExpensifyMobileApp,
 };

src/components/MenuItem.tsx

@@ -759,9 +759,9 @@ function MenuItem(
                                                         {(!!title || !!shouldShowTitleIcon) && (
                                                             <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100]}>
                                                                 {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
-                                                                    <View style={styles.renderHTMLTitle}>
+                                                                    <Text style={styles.renderHTMLTitle}>
                                                                         <RenderHTML html={processedTitle} />
-                                                                    </View>
+                                                                    </Text>
                                                                 )}
                                                                 {!shouldRenderAsHTML && !shouldParseTitle && !!title && (
                                                                     <Text