diff --git a/src/CONST.ts b/src/CONST.ts index 14adbe9e7b7d1..b4182fc3d3ea9 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -113,12 +113,13 @@ const signupQualifiers = { SMB: 'smb', } as const; -const selfGuidedTourTask: OnboardingTask = { +const getTestDriveTaskName = (testDriveURL?: string) => (testDriveURL ? `Take a [test drive](${testDriveURL})` : 'Take a test drive'); +const testDriveTask: OnboardingTask = { type: 'viewTour', autoCompleted: false, mediaAttributes: {}, - title: ({navatticURL}) => `Take a [2-minute tour](${navatticURL})`, - description: ({navatticURL}) => `[Take a self-guided product tour](${navatticURL}) and learn about everything Expensify has to offer.`, + 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 = { @@ -164,7 +165,7 @@ const setupCategoriesTask: OnboardingTask = { const onboardingEmployerOrSubmitMessage: OnboardingMessage = { message: 'Getting paid back is as easy as sending a message. Let’s go over the basics.', tasks: [ - selfGuidedTourTask, + testDriveTask, { type: 'submitExpense', autoCompleted: false, @@ -188,7 +189,7 @@ const onboardingEmployerOrSubmitMessage: OnboardingMessage = { const combinedTrackSubmitOnboardingEmployerOrSubmitMessage: OnboardingMessage = { ...onboardingEmployerOrSubmitMessage, tasks: [ - selfGuidedTourTask, + testDriveTask, { type: 'submitExpense', autoCompleted: false, @@ -213,7 +214,7 @@ const combinedTrackSubmitOnboardingEmployerOrSubmitMessage: OnboardingMessage = const onboardingPersonalSpendMessage: OnboardingMessage = { message: 'Here’s how to track your spend in a few clicks.', tasks: [ - selfGuidedTourTask, + testDriveTask, { type: 'trackExpense', autoCompleted: false, @@ -237,7 +238,7 @@ const onboardingPersonalSpendMessage: OnboardingMessage = { const combinedTrackSubmitOnboardingPersonalSpendMessage: OnboardingMessage = { ...onboardingPersonalSpendMessage, tasks: [ - selfGuidedTourTask, + testDriveTask, { type: 'trackExpense', autoCompleted: false, @@ -289,6 +290,7 @@ type OnboardingTaskLinks = Partial<{ workspaceMembersLink: string; workspaceAccountingLink: string; navatticURL: string; + testDriveURL: string; }>; type OnboardingTask = { @@ -1094,6 +1096,12 @@ const CONST = { EMPLOYEE_TOUR_STAGING: 'https://expensify.navattic.com/cf15002s', COMPLETED: 'completed', }, + STORYLANE: { + ADMIN_TOUR_PRODUCTION: 'https://app.storylane.io/demo/nrkhnm80nbix?embed=inline', + ADMIN_TOUR_MOBILE_PRODUCTION: 'https://app.storylane.io/demo/wg7a9qqg6qkf?embed=inline', + ADMIN_TOUR_STAGING: 'https://app.storylane.io/demo/nrkhnm80nbix?embed=inline', + ADMIN_TOUR_MOBILE_STAGING: 'https://app.storylane.io/demo/wg7a9qqg6qkf?embed=inline', + }, OLD_DOT_PUBLIC_URLS: { TERMS_URL: `${EXPENSIFY_URL}/terms`, PRIVACY_URL: `${EXPENSIFY_URL}/privacy`, @@ -1493,6 +1501,7 @@ const CONST = { BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', + FULLSCREEN: 'fullscreen', }, ANCHOR_ORIGIN_VERTICAL: { TOP: 'top', @@ -5376,7 +5385,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, @@ -5510,7 +5519,7 @@ const CONST = { [onboardingChoices.CHAT_SPLIT]: { message: 'Splitting bills with friends is as easy as sending a message. Here’s how.', tasks: [ - selfGuidedTourTask, + testDriveTask, { type: 'startChat', autoCompleted: false, @@ -6989,6 +6998,10 @@ const CONST = { BILLING: { TYPE_FAILED_2018: 'failed_2018', }, + + TEST_DRIVE: { + ONBOARDING_TASK_NAME: getTestDriveTaskName(), + }, } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; @@ -7008,6 +7021,7 @@ export type { IOUType, OnboardingPurpose, OnboardingCompanySize, + OnboardingTaskLinks, IOURequestType, SubscriptionType, FeedbackSurveyOptionID, diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts index 0974bcf6904c7..178943ce056fc 100644 --- a/src/NAVIGATORS.ts +++ b/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', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index aa3ebeab3049a..04b0c132645b9 100644 --- a/src/ROUTES.ts +++ b/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), diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 751589eab1007..6e12ea0af4ae5 100644 --- a/src/SCREENS.ts +++ b/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', diff --git a/src/components/EmbeddedDemo/index.native.tsx b/src/components/EmbeddedDemo/index.native.tsx new file mode 100644 index 0000000000000..82eca9bcc8af1 --- /dev/null +++ b/src/components/EmbeddedDemo/index.native.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import WebView from 'react-native-webview'; +import type EmbeddedDemoProps from './types'; + +function EmbeddedDemo({url, webViewProps}: EmbeddedDemoProps) { + return ( + + ); +} + +EmbeddedDemo.displayName = 'EmbeddedDemo'; + +export default EmbeddedDemo; diff --git a/src/components/EmbeddedDemo/index.tsx b/src/components/EmbeddedDemo/index.tsx new file mode 100644 index 0000000000000..0597bdbe12933 --- /dev/null +++ b/src/components/EmbeddedDemo/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import type EmbeddedDemoProps from './types'; + +function EmbeddedDemo({url, iframeTitle, iframeProps}: EmbeddedDemoProps) { + return ( +