[Test Drive][Phase 1][FE] Show the Test Drive modal during onboarding and via task

src/CONST.ts

@@ -121,6 +121,15 @@ const selfGuidedTourTask: OnboardingTask = {
     description: ({navatticURL}) => `[Take a self-guided product tour](${navatticURL}) and learn about everything Expensify has to offer.`,
 };
 
+const getTestDriveTaskName = (testDriveURL?: string) => (testDriveURL ? `Take a [test drive](${testDriveURL})` : 'Take a test drive');
+const testDriveTask: OnboardingTask = {
+    type: 'viewTour',
+    autoCompleted: false,
+    mediaAttributes: {},
+    title: ({testDriveURL}) => getTestDriveTaskName(testDriveURL),
+    description: ({testDriveURL}) => `[Take a quick product tour](${testDriveURL}) to see why Expensify is the fastest way to do your expenses.`,
+};
+
 const createWorkspaceTask: OnboardingTask = {
     type: 'createWorkspace',
     autoCompleted: true,
@@ -289,6 +298,7 @@ type OnboardingTaskLinks = Partial<{
     workspaceMembersLink: string;
     workspaceAccountingLink: string;
     navatticURL: string;
+    testDriveURL: string;
 }>;
 
 type OnboardingTask = {
@@ -1096,6 +1106,12 @@ const CONST = {
         EMPLOYEE_TOUR_STAGING: 'https://expensify.navattic.com/cf15002s',
         COMPLETED: 'completed',
     },
+    STORYLANE: {
+        ADMIN_TOUR_PRODUCTION: 'https://app.storylane.io/demo/0bhwdna0isb3?embed=inline',
+        ADMIN_TOUR_MOBILE_PRODUCTION: 'https://app.storylane.io/demo/sfzzu3s6l3ov?embed=inline',
+        ADMIN_TOUR_STAGING: 'https://app.storylane.io/demo/0bhwdna0isb3?embed=inline',
+        ADMIN_TOUR_MOBILE_STAGING: 'https://app.storylane.io/demo/sfzzu3s6l3ov?embed=inline',
+    },
     OLD_DOT_PUBLIC_URLS: {
         TERMS_URL: `${EXPENSIFY_URL}/terms`,
         PRIVACY_URL: `${EXPENSIFY_URL}/privacy`,
@@ -1495,6 +1511,7 @@ const CONST = {
             BOTTOM_DOCKED: 'bottom_docked',
             POPOVER: 'popover',
             RIGHT_DOCKED: 'right_docked',
+            FULLSCREEN: 'fullscreen',
         },
         ANCHOR_ORIGIN_VERTICAL: {
             TOP: 'top',
@@ -5356,7 +5373,7 @@ const CONST = {
             message: 'Here are some important tasks to help get your team’s expenses under control.',
             tasks: [
                 createWorkspaceTask,
-                selfGuidedTourTask,
+                testDriveTask,
                 {
                     type: 'setupCategoriesAndTags',
                     autoCompleted: false,
@@ -6969,6 +6986,12 @@ const CONST = {
     BILLING: {
         TYPE_FAILED_2018: 'failed_2018',
     },
+
+    TEST_DRIVE: {
+        ONBOARDING_TASK_NAME: getTestDriveTaskName(),
+        EMBEDDED_DEMO_WHITELIST: ['http://', 'https://', 'about:'] as string[],
+        EMBEDDED_DEMO_IFRAME_TITLE: 'Test Drive',
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;
@@ -6988,6 +7011,7 @@ export type {
     IOUType,
     OnboardingPurpose,
     OnboardingCompanySize,
+    OnboardingTaskLinks,
     IOURequestType,
     SubscriptionType,
     FeedbackSurveyOptionID,

src/NAVIGATORS.ts

@@ -12,6 +12,7 @@ export default {
     EXPLANATION_MODAL_NAVIGATOR: 'ExplanationModalNavigator',
     MIGRATED_USER_MODAL_NAVIGATOR: 'MigratedUserModalNavigator',
     TEST_DRIVE_MODAL_NAVIGATOR: 'TestDriveModalNavigator',
+    TEST_DRIVE_DEMO_NAVIGATOR: 'TestDriveDemoNavigator',
     REPORTS_SPLIT_NAVIGATOR: 'ReportsSplitNavigator',
     SETTINGS_SPLIT_NAVIGATOR: 'SettingsSplitNavigator',
     WORKSPACE_SPLIT_NAVIGATOR: 'WorkspaceSplitNavigator',

src/ROUTES.ts

@@ -1894,6 +1894,7 @@ const ROUTES = {
     WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
     EXPLANATION_MODAL_ROOT: 'onboarding/explanation',
     TEST_DRIVE_MODAL_ROOT: 'onboarding/test-drive',
+    TEST_DRIVE_DEMO_ROOT: 'onboarding/test-drive/demo',
     WORKSPACE_CONFIRMATION: {
         route: 'workspace/confirmation',
         getRoute: (backTo?: string) => getUrlWithBackToParam(`workspace/confirmation`, backTo),

src/SCREENS.ts

@@ -662,6 +662,10 @@ const SCREENS = {
         ROOT: 'TestDrive_Modal_Root',
     },
 
+    TEST_DRIVE_DEMO: {
+        ROOT: 'TestDrive_Demo_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/EmbeddedDemo/index.native.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import WebView from 'react-native-webview';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type EmbeddedDemoProps from './types';
+
+function EmbeddedDemo({url, webViewProps}: EmbeddedDemoProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <WebView
+            source={{uri: url}}
+            originWhitelist={CONST.TEST_DRIVE.EMBEDDED_DEMO_WHITELIST}
+            style={styles.flex1}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...webViewProps}
+        />
+    );
+}
+
+EmbeddedDemo.displayName = 'EmbeddedDemo';
+
+export default EmbeddedDemo;

src/components/EmbeddedDemo/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import useThemeStyles from '@hooks/useThemeStyles';
+import type EmbeddedDemoProps from './types';
+
+function EmbeddedDemo({url, iframeTitle, iframeProps}: EmbeddedDemoProps) {
+    const styles = useThemeStyles();
+
+    return (
+        <iframe
+            title={iframeTitle}
+            src={url}
+            style={styles.embeddedDemoIframe}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...iframeProps}
+        />
+    );
+}
+
+EmbeddedDemo.displayName = 'EmbeddedDemo';
+
+export default EmbeddedDemo;

src/components/EmbeddedDemo/types.ts

@@ -0,0 +1,18 @@
+import type {DetailedHTMLProps, IframeHTMLAttributes} from 'react';
+import type {WebViewProps} from 'react-native-webview';
+
+type EmbeddedDemoProps = {
+    /** Embedded demo URL */
+    url: string;
+
+    /** **(web/desktop)** Description for screenreaders */
+    iframeTitle?: string;
+
+    /** **(web/desktop)** Additional iframe props */
+    iframeProps?: DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement> & Record<string, unknown>;
+
+    /** **(native)** Additional WebView props */
+    webViewProps?: WebViewProps;
+};
+
+export default EmbeddedDemoProps;

src/components/TestDrive/TestDriveBanner.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import HeaderGap from '@components/HeaderGap';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+type TestDriveBannerProps = {
+    /** Callback to finish the test drive */
+    onPress: () => void;
+};
+
+function TestDriveBanner({onPress}: TestDriveBannerProps) {
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={styles.highlightBG}>
+            <HeaderGap styles={styles.testDriveBannerGap} />
+            <View style={[styles.gap2, styles.alignItemsCenter, styles.flexRow, styles.justifyContentCenter, styles.h10]}>
+                <Text>
+                    {shouldUseNarrowLayout
+                        ? translate('testDrive.banner.currentlyTestDrivingExpensify')
+                        : `${translate('testDrive.banner.currentlyTestDrivingExpensify')}. ${translate('testDrive.banner.readyForTheRealThing')}`}
+                </Text>
+                <Button
+                    text={translate('testDrive.banner.getStarted')}
+                    small
+                    success
+                    onPress={onPress}
+                />
+            </View>
+        </View>
+    );
+}
+
+TestDriveBanner.displayName = 'TestDriveBanner';
+
+export default TestDriveBanner;

src/components/TestDrive/TestDriveDemo.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback, useEffect, useState} from 'react';
+import {InteractionManager} from 'react-native';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import EmbeddedDemo from '@components/EmbeddedDemo';
+import Modal from '@components/Modal';
+import SafeAreaConsumer from '@components/SafeAreaConsumer';
+import useEnvironment from '@hooks/useEnvironment';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {completeTestDriveTask} from '@libs/actions/Task';
+import Navigation from '@libs/Navigation/Navigation';
+import {getTestDriveURL} from '@libs/TourUtils';
+import CONST from '@src/CONST';
+import TestDriveBanner from './TestDriveBanner';
+
+function TestDriveDemo() {
+    const {environment} = useEnvironment();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [isVisible, setIsVisible] = useState(false);
+    const styles = useThemeStyles();
+
+    useEffect(() => {
+        InteractionManager.runAfterInteractions(() => {
+            setIsVisible(true);
+            completeTestDriveTask();
+        });
+    }, []);
+
+    const closeModal = useCallback(() => {
+        setIsVisible(false);
+        InteractionManager.runAfterInteractions(() => {
+            Navigation.goBack();
+        });
+    }, []);
+
+    return (
+        <SafeAreaConsumer>
+            {({paddingTop, paddingBottom}) => (
+                <Modal
+                    isVisible={isVisible}
+                    onClose={closeModal}
+                    type={CONST.MODAL.MODAL_TYPE.FULLSCREEN}
+                    style={styles.backgroundWhite}
+                    innerContainerStyle={{...styles.flex1, marginTop: paddingTop, marginBottom: paddingBottom}}
+                >
+                    <TestDriveBanner onPress={closeModal} />
+                    <FullPageOfflineBlockingView>
+                        <EmbeddedDemo
+                            url={getTestDriveURL(environment, shouldUseNarrowLayout)}
+                            iframeTitle={CONST.TEST_DRIVE.EMBEDDED_DEMO_IFRAME_TITLE}
+                        />
+                    </FullPageOfflineBlockingView>
+                </Modal>
+            )}
+        </SafeAreaConsumer>
+    );
+}
+
+TestDriveDemo.displayName = 'TestDriveDemo';
+
+export default TestDriveDemo;

src/components/TestDriveModal.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import {InteractionManager} from 'react-native';
 import FastTrack from '@assets/images/fast-track-cover.jpg';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
 import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
 import FeatureTrainingModal from './FeatureTrainingModal';
 
 function TestDriveModal() {
@@ -14,7 +16,11 @@ function TestDriveModal() {
         Navigation.dismissModal();
     };
 
-    const navigateTestDriveDemo = () => {};
+    const navigateTestDriveDemo = () => {
+        InteractionManager.runAfterInteractions(() => {
+            Navigation.navigate(ROUTES.TEST_DRIVE_DEMO_ROOT);
+        });
+    };
 
     return (
         <FeatureTrainingModal

src/languages/en.ts

@@ -6252,6 +6252,11 @@ const translations = {
             confirmText: 'Start test drive',
             helpText: 'Skip',
         },
+        banner: {
+            currentlyTestDrivingExpensify: "You're currently test driving Expensify",
+            readyForTheRealThing: 'Ready for the real thing?',
+            getStarted: 'Get started',
+        },
     },
 };
 

src/languages/es.ts

@@ -6775,6 +6775,11 @@ const translations = {
             confirmText: 'Iniciar prueba',
             helpText: 'Omitir',
         },
+        banner: {
+            currentlyTestDrivingExpensify: 'Actualmente estás probando Expensify',
+            readyForTheRealThing: '¿Listo para la versión real?',
+            getStarted: 'Comenzar',
+        },
     },
 };
 

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -71,6 +71,7 @@ import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator';
 import RightModalNavigator from './Navigators/RightModalNavigator';
 import TestDriveModalNavigator from './Navigators/TestDriveModalNavigator';
 import WelcomeVideoModalNavigator from './Navigators/WelcomeVideoModalNavigator';
+import TestDriveDemoNavigator from './TestDriveDemoNavigator';
 import useRootNavigatorScreenOptions from './useRootNavigatorScreenOptions';
 
 type AuthScreensProps = {
@@ -642,6 +643,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     options={rootNavigatorScreenOptions.basicModalNavigator}
                     component={TestDriveModalNavigator}
                 />
+                <RootStack.Screen
+                    name={NAVIGATORS.TEST_DRIVE_DEMO_NAVIGATOR}
+                    options={rootNavigatorScreenOptions.basicModalNavigator}
+                    component={TestDriveDemoNavigator}
+                />
                 <RootStack.Screen
                     name={NAVIGATORS.FEATURE_TRANING_MODAL_NAVIGATOR}
                     options={rootNavigatorScreenOptions.basicModalNavigator}

src/libs/Navigation/AppNavigator/TestDriveDemoNavigator.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {View} from 'react-native';
+import NoDropZone from '@components/DragAndDrop/NoDropZone';
+import TestDriveDemo from '@components/TestDrive/TestDriveDemo';
+import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
+import Animations from '@libs/Navigation/PlatformStackNavigation/navigationOptions/animation';
+import type {TestDriveDemoNavigatorParamList} from '@libs/Navigation/types';
+import SCREENS from '@src/SCREENS';
+
+const Stack = createPlatformStackNavigator<TestDriveDemoNavigatorParamList>();
+
+function TestDriveDemoNavigator() {
+    return (
+        <NoDropZone>
+            <View>
+                <Stack.Navigator screenOptions={{headerShown: false, animation: Animations.SLIDE_FROM_RIGHT}}>
+                    <Stack.Screen
+                        name={SCREENS.TEST_DRIVE_DEMO.ROOT}
+                        component={TestDriveDemo}
+                    />
+                </Stack.Navigator>
+            </View>
+        </NoDropZone>
+    );
+}
+
+TestDriveDemoNavigator.displayName = 'TestDriveDemoNavigator';
+
+export default TestDriveDemoNavigator;

src/libs/Navigation/linkingConfig/config.ts

@@ -92,6 +92,15 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
             },
         },
 
+        [NAVIGATORS.TEST_DRIVE_DEMO_NAVIGATOR]: {
+            screens: {
+                [SCREENS.TEST_DRIVE_DEMO.ROOT]: {
+                    path: ROUTES.TEST_DRIVE_DEMO_ROOT,
+                    exact: true,
+                },
+            },
+        },
+
         [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: {
             // Don't set the initialRouteName, because when the user continues from the last visited onboarding page,
             // the onboarding purpose page will be briefly visible.