Merge pull request #39951 from rezkiy37/feature/38771-tasks-for-guide…

…d-setup

Tasks for guided setup

src/CONST.ts

@@ -67,6 +67,8 @@ const onboardingChoices = {
     LOOKING_AROUND: 'newDotLookingAround',
 };
 
+type OnboardingPurposeType = ValueOf<typeof onboardingChoices>;
+
 const CONST = {
     MERGED_ACCOUNT_PREFIX: 'MERGED_',
     DEFAULT_POLICY_ROOM_CHAT_TYPES: [chatTypes.POLICY_ADMINS, chatTypes.POLICY_ANNOUNCE, chatTypes.DOMAIN_ALL],
@@ -3607,6 +3609,272 @@ const CONST = {
             "We'll send a request to each person so they can pay you back. Let me know if you have any questions!",
     },
 
+    ONBOARDING_MESSAGES: {
+        [onboardingChoices.TRACK]: {
+            message: 'Here are some essential tasks to keep your business spend in shape for tax season.',
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [
+                {
+                    type: 'createWorkspace',
+                    autoCompleted: true,
+                    title: 'Create a workspace',
+                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    message:
+                        'Here’s how to create a workspace:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Click <strong>Workspaces</strong> > <strong>New workspace</strong>.\n' +
+                        '\n' +
+                        'Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.',
+                },
+                {
+                    type: 'trackExpense',
+                    autoCompleted: false,
+                    title: 'Track an expense',
+                    subtitle: 'Track an expense in any currency, in just a few clicks.',
+                    message:
+                        'Here’s how to track an expense:\n' +
+                        '\n' +
+                        '1. Click the green + button.\n' +
+                        '2. Choose <strong>Track expense</strong>.\n' +
+                        '3. Enter an amount or scan a receipt.\n' +
+                        '4. Click <strong>Track</strong>.\n' +
+                        '\n' +
+                        'And you’re done! Yep, it’s that easy.',
+                },
+            ],
+        },
+        [onboardingChoices.EMPLOYER]: {
+            message: 'Getting paid back is as easy as sending a message. Let’s go over the basics.',
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [
+                {
+                    type: 'submitExpense',
+                    autoCompleted: false,
+                    title: 'Submit an expense',
+                    subtitle: 'Submit an expense by entering an amount or scanning a receipt.',
+                    message:
+                        'Here’s how to submit an expense:\n' +
+                        '\n' +
+                        '1. Click the green + button.\n' +
+                        '2. Choose <strong>Submit expense</strong>.\n' +
+                        '3. Enter an amount or scan a receipt.\n' +
+                        '4. Add your reimburser to the request.\n' +
+                        '\n' +
+                        'Then, send your request and wait for that sweet “Cha-ching!” when it’s complete.',
+                },
+                {
+                    type: 'enableWallet',
+                    autoCompleted: false,
+                    title: 'Enable your wallet',
+                    subtitle: 'You’ll need to enable your Expensify Wallet to get paid back. Don’t worry, it’s easy!',
+                    message:
+                        'Here’s how to set up your wallet:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Click <strong>Wallet</strong> > <strong>Enable wallet</strong>.\n' +
+                        '3. Connect your bank account.\n' +
+                        '\n' +
+                        'Once that’s done, you can request money from anyone and get paid back right into your personal bank account.',
+                },
+            ],
+        },
+        [onboardingChoices.MANAGE_TEAM]: {
+            message: 'Here are some important tasks to help get your team’s expenses under control.',
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [
+                {
+                    type: 'createWorkspace',
+                    autoCompleted: true,
+                    title: 'Create a workspace',
+                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    message:
+                        'Here’s how to create a workspace:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Click <strong>Workspaces<strong> > <strong>New workspace<strong>.\n' +
+                        '\n' +
+                        'Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.',
+                },
+                {
+                    type: 'meetGuide',
+                    autoCompleted: false,
+                    title: 'Meet your setup specialist',
+                    subtitle: '',
+                    message: ({adminsRoomLink, guideCalendarLink}: {adminsRoomLink: string; guideCalendarLink: string}) =>
+                        `Meet your setup specialist, who can answer any questions as you get started with Expensify. Yes, a real human!\n` +
+                        '\n' +
+                        `Chat with the specialist in your [#admins room](${adminsRoomLink}) or [schedule a call](${guideCalendarLink}) today.`,
+                },
+                {
+                    type: 'setupCategories',
+                    autoCompleted: false,
+                    title: 'Set up categories',
+                    subtitle: 'Set up categories so your team can code expenses for easy reporting.',
+                    message:
+                        'Here’s how to set up categories:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Go to <strong>Workspaces</strong> > [your workspace].\n' +
+                        '3. Click <strong>Categories</strong>.\n' +
+                        '4. Enable and disable default categories.\n' +
+                        '5. Click <strong>Add categories</strong> to make your own.\n' +
+                        '\n' +
+                        'For more controls like requiring a category for every expense, click Settings.',
+                },
+                {
+                    type: 'addExpenseApprovals',
+                    autoCompleted: false,
+                    title: 'Add expense approvals',
+                    subtitle: 'Add expense approvals to review your team’s spend and keep it under control.',
+                    message:
+                        'Here’s how to add expense approvals:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Go to Workspaces > [your workspace].\n' +
+                        '3. Click <strong>More features</strong>.\n' +
+                        '4. Enable <strong>Workflows</strong>.\n' +
+                        '5. In Workflows, enable <strong>Add approvals</strong>.\n' +
+                        '\n' +
+                        'You’ll be set as the expense approver. You can change this to any admin once you invite your team.',
+                },
+                {
+                    type: 'inviteTeam',
+                    autoCompleted: false,
+                    title: 'Invite your team',
+                    subtitle: 'Invite your team to Expensify so they can start tracking expenses today.',
+                    message:
+                        'Here’s how to invite your team:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. Go to <strong>Workspaces</strong> > [your workspace].\n' +
+                        '3. Click <strong>Members</strong> > <strong>Invite member</strong>.\n' +
+                        '4. Enter emails or phone numbers. \n' +
+                        '5. Add an invite message if you want.\n' +
+                        '\n' +
+                        'That’s it! Happy expensing :)',
+                },
+            ],
+        },
+        [onboardingChoices.PERSONAL_SPEND]: {
+            message: 'Here’s how to track your spend in a few clicks.',
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [
+                {
+                    type: 'trackExpense',
+                    autoCompleted: false,
+                    title: 'Track an expense',
+                    subtitle: 'Track an expense in any currency, whether you have a receipt or not.',
+                    message:
+                        'Here’s how to track an expense:\n' +
+                        '\n' +
+                        '1. Click the green + button.\n' +
+                        '2. Choose <strong>Track expense</strong>.\n' +
+                        '3. Enter an amount or scan a receipt.\n' +
+                        '4. Click Track.\n' +
+                        '\n' +
+                        'And you’re done! Yep, it’s that easy.',
+                },
+            ],
+        },
+        [onboardingChoices.CHAT_SPLIT]: {
+            message: 'Splitting bills with friends is as easy as sending a message. Here’s how.',
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [
+                {
+                    type: 'startChat',
+                    autoCompleted: false,
+                    title: 'Start a chat',
+                    subtitle: 'Start a chat with a friend or group using their email or phone number.',
+                    message:
+                        'Here’s how to start a chat:\n' +
+                        '\n' +
+                        '1. Click the green + button.\n' +
+                        '2. Choose <strong>Start chat</strong>.\n' +
+                        '3. Enter emails or phone numbers.\n' +
+                        '\n' +
+                        'If any of your friends aren’t using Expensify already, they’ll be invited automatically. \n' +
+                        '\n' +
+                        'Every chat will also turn into an email or text that they can respond to directly.',
+                },
+                {
+                    type: 'splitExpense',
+                    autoCompleted: false,
+                    title: 'Split an expense',
+                    subtitle: 'Split an expense right in your chat with one or more friends.',
+                    message:
+                        'Here’s how to request money:\n' +
+                        '\n' +
+                        '1. Click the green + button.\n' +
+                        '2. Choose <strong>Split expense</strong>.\n' +
+                        '3. Scan a receipt or enter an amount.\n' +
+                        '4. Add your friend(s) to the request.\n' +
+                        '\n' +
+                        'Feel free to add more details if you want, or just send it off. Let’s get you paid back!',
+                },
+                {
+                    type: 'enableWallet',
+                    autoCompleted: false,
+                    title: 'Enable your wallet',
+                    subtitle: 'You’ll need to enable your Expensify Wallet to get paid back. Don’t worry, it’s easy!',
+                    message:
+                        'Here’s how to enable your wallet:\n' +
+                        '\n' +
+                        '1. Click your profile picture.\n' +
+                        '2. <strong>Click Wallet</strong> > <strong>Enable wallet</strong>.\n' +
+                        '3. Add your bank account.\n' +
+                        '\n' +
+                        'Once that’s done, you can request money from anyone and get paid right into your personal bank account.',
+                },
+            ],
+        },
+        [onboardingChoices.LOOKING_AROUND]: {
+            message:
+                '# Welcome to Expensify!\n' +
+                "Hi there, I'm Concierge. Chat with me here for anything you need.\n" +
+                '\n' +
+                "Expensify is best known for expense and corporate card management, but we do a lot more than that. Let me know what you're interested in and I'll help get you started.",
+            video: {
+                url: `${CLOUDFRONT_URL}/videos/intro-1280.mp4`,
+                thumbnailUrl: `${CLOUDFRONT_URL}/images/expensify__favicon.png`,
+                duration: 55,
+                width: 1280,
+                height: 960,
+            },
+            tasks: [],
+        },
+    },
+
     REPORT_FIELD_TITLE_FIELD_ID: 'text_title',
 
     MOBILE_PAGINATION_SIZE: 15,
@@ -4352,6 +4620,6 @@ type Country = keyof typeof CONST.ALL_COUNTRIES;
 type IOUType = ValueOf<typeof CONST.IOU.TYPE>;
 type IOUAction = ValueOf<typeof CONST.IOU.ACTION>;
 
-export type {Country, IOUAction, IOUType, RateAndUnit};
+export type {Country, IOUAction, IOUType, RateAndUnit, OnboardingPurposeType};
 
 export default CONST;

src/ONYXKEYS.ts

@@ -385,6 +385,8 @@ const ONYXKEYS = {
         DISPLAY_NAME_FORM_DRAFT: 'displayNameFormDraft',
         ONBOARDING_PERSONAL_DETAILS_FORM: 'onboardingPersonalDetailsForm',
         ONBOARDING_PERSONAL_DETAILS_FORM_DRAFT: 'onboardingPersonalDetailsFormDraft',
+        ONBOARDING_PERSONAL_WORK: 'onboardingWorkForm',
+        ONBOARDING_PERSONAL_WORK_DRAFT: 'onboardingWorkFormDraft',
         ROOM_NAME_FORM: 'roomNameForm',
         ROOM_NAME_FORM_DRAFT: 'roomNameFormDraft',
         REPORT_DESCRIPTION_FORM: 'reportDescriptionForm',
@@ -475,6 +477,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM]: FormTypes.ProfileSettingsForm;
     [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: FormTypes.DisplayNameForm;
     [ONYXKEYS.FORMS.ONBOARDING_PERSONAL_DETAILS_FORM]: FormTypes.DisplayNameForm;
+    [ONYXKEYS.FORMS.ONBOARDING_PERSONAL_WORK]: FormTypes.WorkForm;
     [ONYXKEYS.FORMS.ROOM_NAME_FORM]: FormTypes.RoomNameForm;
     [ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM]: FormTypes.ReportDescriptionForm;
     [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: FormTypes.LegalNameForm;

src/ROUTES.ts

@@ -698,6 +698,7 @@ const ROUTES = {
     PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational',
     ONBOARDING_ROOT: 'onboarding',
     ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details',
+    ONBOARDING_WORK: 'onboarding/work',
     ONBOARDING_PURPOSE: 'onboarding/purpose',
     WELCOME_VIDEO_ROOT: 'onboarding/welcome-video',
 

src/SCREENS.ts

@@ -293,6 +293,7 @@ const SCREENS = {
     ONBOARDING: {
         PERSONAL_DETAILS: 'Onboarding_Personal_Details',
         PURPOSE: 'Onboarding_Purpose',
+        WORK: 'Onboarding_Work',
     },
 
     ONBOARD_ENGAGEMENT: {

src/components/TestToolMenu.tsx

@@ -100,7 +100,7 @@ function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) {
                     text="Navigate"
                     onPress={() => {
                         Navigation.dismissModal();
-                        Navigation.navigate(ROUTES.ONBOARDING_PERSONAL_DETAILS);
+                        Navigation.navigate(ROUTES.ONBOARDING_PURPOSE);
                     }}
                 />
             </TestToolRow>

src/languages/en.ts

@@ -323,6 +323,7 @@ export default {
             subtitleText2: 'button above, or create something using the',
             subtitleText3: 'button below.',
         },
+        businessName: 'Business name',
     },
     location: {
         useCurrent: 'Use current location',
@@ -1316,13 +1317,13 @@ export default {
         notYou: ({user}: NotYouParams) => `Not ${user}?`,
     },
     onboarding: {
-        welcome: 'Welcome!',
         welcomeVideo: {
             title: 'Welcome to Expensify',
             description: 'Getting paid is as easy as sending a message.',
             button: "Let's go",
         },
         whatsYourName: "What's your name?",
+        whereYouWork: 'Where do you work?',
         purpose: {
             title: 'What do you want to do today?',
             error: 'Please make a selection before continuing',

src/languages/es.ts

@@ -313,6 +313,7 @@ export default {
             subtitleText2: 'o crea algo usando el botón',
             subtitleText3: '.',
         },
+        businessName: 'Nombre del Negocio',
     },
     location: {
         useCurrent: 'Usar ubicación actual',
@@ -1315,13 +1316,13 @@ export default {
         notYou: ({user}: NotYouParams) => `¿No eres ${user}?`,
     },
     onboarding: {
-        welcome: '¡Bienvenido!',
         welcomeVideo: {
             title: 'Bienvenido a Expensify',
             description: 'Cobrar es tan fácil como enviar un mensaje.',
             button: 'Vámonos',
         },
         whatsYourName: '¿Cómo te llamas?',
+        whereYouWork: '¿Dónde trabajas?',
         purpose: {
             title: '¿Qué quieres hacer hoy?',
             error: 'Por favor, haga una selección antes de continuar.',

src/libs/API/parameters/CompleteGuidedSetupParams.ts

@@ -0,0 +1,10 @@
+import type {OnboardingPurposeType} from '@src/CONST';
+
+type CompleteGuidedSetupParams = {
+    firstName: string;
+    lastName: string;
+    guidedSetupData: string;
+    engagementChoice: OnboardingPurposeType;
+};
+
+export default CompleteGuidedSetupParams;

src/libs/API/parameters/index.ts

@@ -207,6 +207,7 @@ export type {default as SetPolicyCurrencyDefaultParams} from './SetPolicyCurrenc
 export type {default as UpdatePolicyConnectionConfigParams} from './UpdatePolicyConnectionConfigParams';
 export type {default as RemovePolicyConnectionParams} from './RemovePolicyConnectionParams';
 export type {default as RenamePolicyTaxParams} from './RenamePolicyTaxParams';
+export type {default as CompleteGuidedSetupParams} from './CompleteGuidedSetupParams';
 export type {default as DismissTrackExpenseActionableWhisperParams} from './DismissTrackExpenseActionableWhisperParams';
 export type {default as ConvertTrackedExpenseToRequestParams} from './ConvertTrackedExpenseToRequestParams';
 export type {default as ShareTrackedExpenseParams} from './ShareTrackedExpenseParams';