Skip to content

Commit e1e89c9

Browse files
authored
Merge pull request #60444 from abzokhattab/update-onboarding-msg
Update onboarding msg
2 parents a857e00 + d14c7bc commit e1e89c9

5 files changed

Lines changed: 105 additions & 59 deletions

File tree

src/CONST.ts

Lines changed: 67 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -282,13 +282,15 @@ const onboardingCompanySize = {
282282
type OnboardingInvite = ValueOf<typeof onboardingInviteTypes>;
283283

284284
type OnboardingTaskLinks = Partial<{
285+
onboardingCompanySize: OnboardingCompanySize;
285286
integrationName: string;
286287
workspaceSettingsLink: string;
287288
workspaceCategoriesLink: string;
288289
workspaceMoreFeaturesLink: string;
289290
workspaceMembersLink: string;
290291
workspaceAccountingLink: string;
291292
navatticURL: string;
293+
corporateCardLink: string;
292294
}>;
293295

294296
type OnboardingTask = {
@@ -301,7 +303,7 @@ type OnboardingTask = {
301303

302304
type OnboardingMessage = {
303305
/** Text message that will be displayed first */
304-
message: string;
306+
message: string | ((params: OnboardingTaskLinks) => string);
305307

306308
/** Video object to be displayed after initial description message */
307309
video?: Video;
@@ -5355,44 +5357,60 @@ const CONST = {
53555357
[onboardingChoices.EMPLOYER]: onboardingEmployerOrSubmitMessage,
53565358
[onboardingChoices.SUBMIT]: onboardingEmployerOrSubmitMessage,
53575359
[onboardingChoices.MANAGE_TEAM]: {
5358-
message: 'Here are some important tasks to help get your team’s expenses under control.',
5360+
message: ({onboardingCompanySize: companySize}) => `Here is a task list I’d recommend for a company of your size with ${companySize} submitters:`,
53595361
tasks: [
53605362
createWorkspaceTask,
53615363
selfGuidedTourTask,
5364+
53625365
{
5363-
type: 'setupCategoriesAndTags',
5364-
autoCompleted: false,
5365-
mediaAttributes: {},
5366-
title: ({workspaceCategoriesLink, workspaceMoreFeaturesLink}) => `Set up [categories](${workspaceCategoriesLink}) and [tags](${workspaceMoreFeaturesLink})`,
5367-
description: ({workspaceCategoriesLink, workspaceAccountingLink}) =>
5368-
'*Set up categories and tags* so your team can code expenses for easy reporting.\n' +
5369-
'\n' +
5370-
`Import them automatically by [connecting your accounting software](${workspaceAccountingLink}), or set them up manually in your [workspace settings](${workspaceCategoriesLink}).`,
5371-
},
5372-
setupCategoriesTask,
5373-
{
5374-
type: 'setupTags',
5366+
type: 'addAccountingIntegration',
53755367
autoCompleted: false,
5376-
title: ({workspaceMoreFeaturesLink}) => `Set up [tags](${workspaceMoreFeaturesLink})`,
53775368
mediaAttributes: {
5378-
[`${CLOUDFRONT_URL}/videos/walkthrough-tags-v2.mp4`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-tags.png" data-expensify-width="1920" data-expensify-height="1080"`,
5369+
[`${CLOUDFRONT_URL}/${
5370+
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.netsuite]
5371+
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_netsuite.png" data-expensify-width="1920" data-expensify-height="1080"`,
5372+
[`${CLOUDFRONT_URL}/${
5373+
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.quickbooksOnline]
5374+
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_qbo.png" data-expensify-width="1920" data-expensify-height="1080"`,
5375+
[`${CLOUDFRONT_URL}/${
5376+
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.xero]
5377+
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_xero.png" data-expensify-width="1920" data-expensify-height="1080"`,
53795378
},
5380-
description: ({workspaceMoreFeaturesLink}) =>
5381-
'Tags can be used if you want more details with every expense. Use tags for projects, clients, locations, departments, and more. If you need multiple levels of tags, you can upgrade to the Control plan.\n' +
5379+
title: ({integrationName, workspaceAccountingLink}) => `Connect to [${integrationName}](${workspaceAccountingLink})`,
5380+
description: ({integrationName, workspaceAccountingLink}) =>
5381+
`Connect to ${integrationName} for automatic expense coding and syncing that makes month-end close a breeze.\n` +
53825382
'\n' +
5383-
'*Here’s how to set up tags:*\n' +
5383+
`Here’s how to connect to ${integrationName}:\n` +
53845384
'\n' +
53855385
'1. Click *Settings*.\n' +
53865386
'2. Go to *Workspaces*.\n' +
53875387
'3. Select your workspace.\n' +
5388-
'4. Click *More features*.\n' +
5389-
'5. Enable *Tags*.\n' +
5390-
'6. Navigate to *Tags* in the workspace editor.\n' +
5391-
'7. Click *+ Add tag* to make your own.\n' +
5388+
'4. Click *Accounting*.\n' +
5389+
`5. Find ${integrationName}.\n` +
5390+
'6. Click *Connect*.\n' +
53925391
'\n' +
5393-
`[Take me to more features](${workspaceMoreFeaturesLink}).\n` +
5392+
`${
5393+
integrationName && connectionsVideoPaths[integrationName]
5394+
? `[Take me to accounting](${workspaceAccountingLink}).\n\n![Connect to ${integrationName}](${CLOUDFRONT_URL}/${connectionsVideoPaths[integrationName]})`
5395+
: `[Take me to accounting](${workspaceAccountingLink}).`
5396+
}`,
5397+
},
5398+
{
5399+
type: 'connectCorporateCard',
5400+
title: ({corporateCardLink}) => `Connect [your corporate card](${corporateCardLink})`,
5401+
description: ({corporateCardLink}) =>
5402+
`Connect your corporate card to automatically import and code expenses.\n` +
53945403
'\n' +
5395-
`![Set up tags](${CLOUDFRONT_URL}/videos/walkthrough-tags-v2.mp4)`,
5404+
'Here’s how to invite your team:\n' +
5405+
'\n' +
5406+
'1. Click *Workspaces*.\n' +
5407+
'2. Select your workspace.\n' +
5408+
'3. Click *Corporate cards*.\n' +
5409+
'4. Follow the prompts to connect your card.\n' +
5410+
'\n' +
5411+
`[Take me to connect my corporate card](${corporateCardLink}).`,
5412+
autoCompleted: false,
5413+
mediaAttributes: {},
53965414
},
53975415
{
53985416
type: 'inviteTeam',
@@ -5418,37 +5436,39 @@ const CONST = {
54185436
`![Invite your team](${CLOUDFRONT_URL}/videos/walkthrough-invite_members-v2.mp4)`,
54195437
},
54205438
{
5421-
type: 'addAccountingIntegration',
5439+
type: 'setupCategoriesAndTags',
54225440
autoCompleted: false,
5441+
mediaAttributes: {},
5442+
title: ({workspaceCategoriesLink, workspaceMoreFeaturesLink}) => `Set up [categories](${workspaceCategoriesLink}) and [tags](${workspaceMoreFeaturesLink})`,
5443+
description: ({workspaceCategoriesLink, workspaceAccountingLink}) =>
5444+
'*Set up categories and tags* so your team can code expenses for easy reporting.\n' +
5445+
'\n' +
5446+
`Import them automatically by [connecting your accounting software](${workspaceAccountingLink}), or set them up manually in your [workspace settings](${workspaceCategoriesLink}).`,
5447+
},
5448+
setupCategoriesTask,
5449+
{
5450+
type: 'setupTags',
5451+
autoCompleted: false,
5452+
title: ({workspaceMoreFeaturesLink}) => `Set up [tags](${workspaceMoreFeaturesLink})`,
54235453
mediaAttributes: {
5424-
[`${CLOUDFRONT_URL}/${
5425-
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.netsuite]
5426-
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_netsuite.png" data-expensify-width="1920" data-expensify-height="1080"`,
5427-
[`${CLOUDFRONT_URL}/${
5428-
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.quickbooksOnline]
5429-
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_qbo.png" data-expensify-width="1920" data-expensify-height="1080"`,
5430-
[`${CLOUDFRONT_URL}/${
5431-
connectionsVideoPaths[ONBOARDING_ACCOUNTING_MAPPING.xero]
5432-
}`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-connect_to_xero.png" data-expensify-width="1920" data-expensify-height="1080"`,
5454+
[`${CLOUDFRONT_URL}/videos/walkthrough-tags-v2.mp4`]: `data-expensify-thumbnail-url="${CLOUDFRONT_URL}/images/walkthrough-tags.png" data-expensify-width="1920" data-expensify-height="1080"`,
54335455
},
5434-
title: ({integrationName, workspaceAccountingLink}) => `Connect to [${integrationName}](${workspaceAccountingLink})`,
5435-
description: ({integrationName, workspaceAccountingLink}) =>
5436-
`Connect to ${integrationName} for automatic expense coding and syncing that makes month-end close a breeze.\n` +
5456+
description: ({workspaceMoreFeaturesLink}) =>
5457+
'Tags can be used if you want more details with every expense. Use tags for projects, clients, locations, departments, and more. If you need multiple levels of tags, you can upgrade to the Control plan.\n' +
54375458
'\n' +
5438-
`Here’s how to connect to ${integrationName}:\n` +
5459+
'*Here’s how to set up tags:*\n' +
54395460
'\n' +
54405461
'1. Click *Settings*.\n' +
54415462
'2. Go to *Workspaces*.\n' +
54425463
'3. Select your workspace.\n' +
5443-
'4. Click *Accounting*.\n' +
5444-
`5. Find ${integrationName}.\n` +
5445-
'6. Click *Connect*.\n' +
5464+
'4. Click *More features*.\n' +
5465+
'5. Enable *Tags*.\n' +
5466+
'6. Navigate to *Tags* in the workspace editor.\n' +
5467+
'7. Click *+ Add tag* to make your own.\n' +
54465468
'\n' +
5447-
`${
5448-
integrationName && connectionsVideoPaths[integrationName]
5449-
? `[Take me to accounting](${workspaceAccountingLink}).\n\n![Connect to ${integrationName}](${CLOUDFRONT_URL}/${connectionsVideoPaths[integrationName]})`
5450-
: `[Take me to accounting](${workspaceAccountingLink}).`
5451-
}`,
5469+
`[Take me to more features](${workspaceMoreFeaturesLink}).\n` +
5470+
'\n' +
5471+
`![Set up tags](${CLOUDFRONT_URL}/videos/walkthrough-tags-v2.mp4)`,
54525472
},
54535473
],
54545474
},

src/languages/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1985,6 +1985,7 @@ const translations = {
19851985
},
19861986
onboarding: {
19871987
welcome: 'Welcome!',
1988+
welcomeSignOffTitleManageTeam: 'We can explore more features such as approval workflows and rules when you have progressed on these steps as these are pre-requisites.',
19881989
welcomeSignOffTitle: "It's great to meet you!",
19891990
explanationModal: {
19901991
title: 'Welcome to Expensify',

src/languages/es.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1990,6 +1990,8 @@ const translations = {
19901990
onboarding: {
19911991
welcome: '¡Bienvenido!',
19921992
welcomeSignOffTitle: '¡Es un placer conocerte!',
1993+
welcomeSignOffTitleManageTeam:
1994+
'Podemos explorar más características como flujos de trabajo de aprobación y reglas cuando hayas avanzado en estos pasos, ya que son requisitos previos.',
19931995
explanationModal: {
19941996
title: 'Bienvenido a Expensify',
19951997
description: 'Una aplicación para gestionar en un chat todos los gastos de tu empresa y personales. Inténtalo y dinos qué te parece. ¡Hay mucho más por venir!',

src/libs/ReportUtils.ts

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import {FallbackAvatar, IntacctSquare, NetSuiteSquare, QBOSquare, XeroSquare} fr
2323
import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars';
2424
import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
2525
import type {MoneyRequestAmountInputProps} from '@components/MoneyRequestAmountInput';
26-
import type {IOUAction, IOUType, OnboardingAccounting, OnboardingPurpose} from '@src/CONST';
26+
import type {IOUAction, IOUType, OnboardingAccounting, OnboardingCompanySize, OnboardingPurpose} from '@src/CONST';
2727
import CONST from '@src/CONST';
2828
import type {ParentNavigationSummaryParams} from '@src/languages/params';
2929
import type {TranslationPaths} from '@src/languages/types';
@@ -1056,6 +1056,14 @@ Onyx.connect({
10561056
callback: (value) => (newGroupChatDraft = value),
10571057
});
10581058

1059+
let onboardingCompanySize: OnyxEntry<OnboardingCompanySize>;
1060+
Onyx.connect({
1061+
key: ONYXKEYS.ONBOARDING_COMPANY_SIZE,
1062+
callback: (value) => {
1063+
onboardingCompanySize = value;
1064+
},
1065+
});
1066+
10591067
function getCurrentUserAvatar(): AvatarSource | undefined {
10601068
return currentUserPersonalDetails?.avatar;
10611069
}
@@ -9599,6 +9607,7 @@ function prepareOnboardingOnyxData(
95999607
onboardingPolicyID?: string,
96009608
userReportedIntegration?: OnboardingAccounting,
96019609
wasInvited?: boolean,
9610+
companySize?: OnboardingCompanySize,
96029611
) {
96039612
if (engagementChoice === CONST.ONBOARDING_CHOICES.PERSONAL_SPEND) {
96049613
// eslint-disable-next-line no-param-reassign
@@ -9645,23 +9654,26 @@ function prepareOnboardingOnyxData(
96459654
}
96469655
const actorAccountID = shouldPostTasksInAdminsRoom ? assignedGuideAccountID : CONST.ACCOUNT_ID.CONCIERGE;
96479656

9648-
// Text message
9649-
const textComment = buildOptimisticAddCommentReportAction(onboardingMessage.message, undefined, actorAccountID, 1);
9650-
const textCommentAction: OptimisticAddCommentReportAction = textComment.reportAction;
9651-
const textMessage: AddCommentOrAttachementParams = {
9652-
reportID: targetChatReportID,
9653-
reportActionID: textCommentAction.reportActionID,
9654-
reportComment: textComment.commentText,
9655-
};
9656-
96579657
const onboardingTaskParams = {
96589658
integrationName,
9659+
onboardingCompanySize: companySize ?? onboardingCompanySize,
96599660
workspaceSettingsLink: `${environmentURL}/${ROUTES.WORKSPACE_INITIAL.getRoute(onboardingPolicyID)}`,
96609661
workspaceCategoriesLink: `${environmentURL}/${ROUTES.WORKSPACE_CATEGORIES.getRoute(onboardingPolicyID)}`,
96619662
workspaceMembersLink: `${environmentURL}/${ROUTES.WORKSPACE_MEMBERS.getRoute(onboardingPolicyID)}`,
96629663
workspaceMoreFeaturesLink: `${environmentURL}/${ROUTES.WORKSPACE_MORE_FEATURES.getRoute(onboardingPolicyID)}`,
96639664
navatticURL: getNavatticURL(environment, engagementChoice),
96649665
workspaceAccountingLink: `${environmentURL}/${ROUTES.POLICY_ACCOUNTING.getRoute(onboardingPolicyID)}`,
9666+
corporateCardLink: `${environmentURL}/${ROUTES.WORKSPACE_COMPANY_CARDS.getRoute(onboardingPolicyID)}`,
9667+
};
9668+
9669+
// Text message
9670+
const message = typeof onboardingMessage.message === 'function' ? onboardingMessage.message(onboardingTaskParams) : onboardingMessage.message;
9671+
const textComment = buildOptimisticAddCommentReportAction(message, undefined, actorAccountID, 1);
9672+
const textCommentAction: OptimisticAddCommentReportAction = textComment.reportAction;
9673+
const textMessage: AddCommentOrAttachementParams = {
9674+
reportID: targetChatReportID,
9675+
reportActionID: textCommentAction.reportActionID,
9676+
reportComment: textComment.commentText,
96659677
};
96669678

96679679
let createWorkspaceTaskReportID;
@@ -9727,7 +9739,9 @@ function prepareOnboardingOnyxData(
97279739
});
97289740

97299741
// Sign-off welcome message
9730-
const welcomeSignOffComment = buildOptimisticAddCommentReportAction(translateLocal('onboarding.welcomeSignOffTitle'), undefined, actorAccountID, tasksData.length + 3);
9742+
const welcomeSignOffText =
9743+
engagementChoice === CONST.ONBOARDING_CHOICES.MANAGE_TEAM ? translateLocal('onboarding.welcomeSignOffTitleManageTeam') : translateLocal('onboarding.welcomeSignOffTitle');
9744+
const welcomeSignOffComment = buildOptimisticAddCommentReportAction(welcomeSignOffText, undefined, actorAccountID, tasksData.length + 3);
97319745
const welcomeSignOffCommentAction: OptimisticAddCommentReportAction = welcomeSignOffComment.reportAction;
97329746
const welcomeSignOffMessage = {
97339747
reportID: targetChatReportID,

src/libs/actions/Report.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4027,7 +4027,16 @@ function completeOnboarding({
40274027
userReportedIntegration?: OnboardingAccounting;
40284028
wasInvited?: boolean;
40294029
}) {
4030-
const onboardingData = prepareOnboardingOnyxData(introSelected, engagementChoice, onboardingMessage, adminsChatReportID, onboardingPolicyID, userReportedIntegration, wasInvited);
4030+
const onboardingData = prepareOnboardingOnyxData(
4031+
introSelected,
4032+
engagementChoice,
4033+
onboardingMessage,
4034+
adminsChatReportID,
4035+
onboardingPolicyID,
4036+
userReportedIntegration,
4037+
wasInvited,
4038+
companySize,
4039+
);
40314040
if (!onboardingData) {
40324041
return;
40334042
}

0 commit comments

Comments
 (0)