Refactor onboarding tasks and types into Welcome module; address review comments

Author: Shahidullah-Muffakir

src/CONST.ts

@@ -5,7 +5,6 @@ import Config from 'react-native-config';
 import * as KeyCommand from 'react-native-key-command';
 import type {ValueOf} from 'type-fest';
 import type ResponsiveLayoutResult from './hooks/useResponsiveLayout/types';
-import type {Video} from './libs/actions/Report';
 import type {MileageRate} from './libs/DistanceRequestUtils';
 import BankAccount from './libs/models/BankAccount';
 import {addTrailingForwardSlash} from './libs/Url';
@@ -121,9 +120,7 @@ const signupQualifiers = {
     SMB: 'smb',
 } as const;
 
-type OnboardingPurpose = ValueOf<typeof onboardingChoices>;
 
-type OnboardingCompanySize = ValueOf<typeof onboardingCompanySize>;
 
 type OnboardingAccounting = keyof typeof CONST.POLICY.CONNECTIONS.NAME_USER_FRIENDLY | null;
 
@@ -143,41 +140,7 @@ const onboardingCompanySize = {
 
 type OnboardingInvite = ValueOf<typeof onboardingInviteTypes>;
 
-type OnboardingTaskLinks = Partial<{
-    onboardingCompanySize: OnboardingCompanySize;
-    integrationName: string;
-    workspaceSettingsLink: string;
-    workspaceCategoriesLink: string;
-    workspaceMoreFeaturesLink: string;
-    workspaceMembersLink: string;
-    workspaceAccountingLink: string;
-    workspaceConfirmationLink: string;
-    navatticURL: string;
-    testDriveURL: string;
-    corporateCardLink: string;
-}>;
-
-type OnboardingTask = {
-    type: string;
-    autoCompleted: boolean;
-    mediaAttributes: Record<string, string>;
-    title: string | ((params: OnboardingTaskLinks) => string);
-    description: string | ((params: OnboardingTaskLinks) => string);
-};
-
-type OnboardingMessage = {
-    /** Text message that will be displayed first */
-    message: string | ((params: OnboardingTaskLinks) => string);
-
-    /** Video object to be displayed after initial description message */
-    video?: Video;
 
-    /** List of tasks connected with the message, they will have a checkbox and a separate report for more information */
-    tasks: OnboardingTask[];
-
-    /** Type of task described in a string format */
-    type?: string;
-};
 
 const EMAIL_WITH_OPTIONAL_DOMAIN =
     /(?=((?=[\w'#%+-]+(?:\.[\w'#%+-]+)*@?)[\w.'#%+-]{1,64}(?:@(?:(?=[a-z\d]+(?:-+[a-z\d]+)*\.)(?:[a-z\d-]{1,63}\.)+[a-z]{2,63}))?(?= |_|\b))(?<end>.*))\S{3,254}(?=\k<end>$)/;
@@ -6824,18 +6787,14 @@ export type {
     Country,
     IOUAction,
     IOUType,
-    OnboardingPurpose,
-    OnboardingCompanySize,
-    OnboardingTaskLinks,
-    OnboardingTask,
+
     IOURequestType,
     SubscriptionType,
     FeedbackSurveyOptionID,
     CancellationType,
     OnboardingInvite,
     OnboardingAccounting,
     IOUActionParams,
-    OnboardingMessage,
 };
 
 export default CONST;

src/ONYXKEYS.ts

@@ -1,7 +1,7 @@
 import type {OnyxUpdate} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {OnboardingCompanySize} from '@libs/actions/Welcome/OnboardingFlow';
 import type CONST from './CONST';
-import type {OnboardingCompanySize} from './CONST';
 import type Platform from './libs/getPlatform/types';
 import type * as FormTypes from './types/form';
 import type * as OnyxTypes from './types/onyx';

src/hooks/useOnboardingMessages/index.ts

@@ -1,10 +1,11 @@
 import {useMemo} from 'react';
 import useLocalize from '@hooks/useLocalize';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
+import {getOnboardingMessages} from '@libs/actions/Welcome/OnboardingFlow';
 
 export default function useOnboardingMessages() {
-    const {translate} = useLocalize();
+    const {preferredLocale} = useLocalize();
+    // Adding preferredLocale as dependency because getOnboardingMessages depends on the current locale
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    const onboardingMessages = useMemo(() => getOnboardingMessages(), [translate]);
+    const onboardingMessages = useMemo(() => getOnboardingMessages(), [preferredLocale]);
     return onboardingMessages;
 }

src/languages/en.ts

@@ -1,7 +1,8 @@
 import {CONST as COMMON_CONST} from 'expensify-common';
 import startCase from 'lodash/startCase';
+import type {OnboardingCompanySize, OnboardingTask} from '@libs/actions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
-import type {Country, OnboardingCompanySize, OnboardingTask} from '@src/CONST';
+import type {Country} from '@src/CONST';
 import type OriginalMessage from '@src/types/onyx/OriginalMessage';
 import type {
     AccountOwnerParams,

src/languages/es.ts

@@ -1,6 +1,6 @@
 import {CONST as COMMON_CONST} from 'expensify-common';
+import type {OnboardingCompanySize, OnboardingTask} from '@libs/actions/Welcome/OnboardingFlow';
 import CONST from '@src/CONST';
-import type {OnboardingCompanySize, OnboardingTask} from '@src/CONST';
 import type OriginalMessage from '@src/types/onyx/OriginalMessage';
 import type en from './en';
 import type {

src/libs/API/parameters/CompleteGuidedSetupParams.ts

@@ -1,4 +1,5 @@
-import type {OnboardingAccounting, OnboardingCompanySize} from '@src/CONST';
+import type {OnboardingCompanySize} from '@libs/actions/Welcome/OnboardingFlow';
+import type {OnboardingAccounting} from '@src/CONST';
 import type {OnboardingPurpose} from '@src/types/onyx';
 
 type CompleteGuidedSetupParams = {

src/libs/OnboardingUtils.ts

@@ -1,5 +1,6 @@
-import type {OnboardingAccounting, OnboardingCompanySize} from '@src/CONST';
+import type {OnboardingAccounting} from '@src/CONST';
 import CONST from '@src/CONST';
+import type {OnboardingCompanySize} from './actions/Welcome/OnboardingFlow';
 import getPlatform from './getPlatform';
 
 const supportedIntegrationsInNewDot = ['quickbooksOnline', 'quickbooksDesktop', 'xero', 'netsuite', 'intacct', 'other'] as OnboardingAccounting[];

src/libs/ReportUtils.ts

@@ -24,7 +24,7 @@ import {FallbackAvatar, IntacctSquare, NetSuiteSquare, QBOSquare, XeroSquare} fr
 import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import type {MoneyRequestAmountInputProps} from '@components/MoneyRequestAmountInput';
-import type {IOUAction, IOUType, OnboardingAccounting, OnboardingCompanySize, OnboardingPurpose, OnboardingTaskLinks} from '@src/CONST';
+import type {IOUAction, IOUType, OnboardingAccounting} from '@src/CONST';
 import CONST from '@src/CONST';
 import type {ParentNavigationSummaryParams} from '@src/languages/params';
 import type {TranslationPaths} from '@src/languages/types';
@@ -77,7 +77,8 @@ import {hasCreditBankAccount} from './actions/ReimbursementAccount/store';
 import {handleReportChanged} from './actions/Report';
 import type {GuidedSetupData, TaskForParameters} from './actions/Report';
 import {isAnonymousUser as isAnonymousUserSession} from './actions/Session';
-import getOnboardingMessages from './actions/Welcome/OnboardingFlowTasks';
+import {getOnboardingMessages} from './actions/Welcome/OnboardingFlow';
+import type {OnboardingCompanySize, OnboardingMessage, OnboardingPurpose, OnboardingTaskLinks} from './actions/Welcome/OnboardingFlow';
 import type {AddCommentOrAttachmentParams} from './API/parameters';
 import {convertToDisplayString} from './CurrencyUtils';
 import DateUtils from './DateUtils';
@@ -855,8 +856,6 @@ type GetReportNameParams = {
 
 type ReportByPolicyMap = Record<string, Report[]>;
 
-type OnboardingMessagesType = ValueOf<ReturnType<typeof getOnboardingMessages>['onboardingMessages']>;
-
 let currentUserEmail: string | undefined;
 let currentUserPrivateDomain: string | undefined;
 let currentUserAccountID: number | undefined;
@@ -9831,22 +9830,21 @@ function canReportBeMentionedWithinPolicy(report: OnyxEntry<Report>, policyID: s
 function prepareOnboardingOnyxData(
     introSelected: OnyxEntry<IntroSelected>,
     engagementChoice: OnboardingPurpose,
-    onboardingMessage: OnboardingMessagesType,
+    onboardingMessage: OnboardingMessage,
     adminsChatReportID?: string,
     onboardingPolicyID?: string,
     userReportedIntegration?: OnboardingAccounting,
     wasInvited?: boolean,
     companySize?: OnboardingCompanySize,
 ) {
-    const {onboardingMessages} = getOnboardingMessages();
     if (engagementChoice === CONST.ONBOARDING_CHOICES.PERSONAL_SPEND) {
         // eslint-disable-next-line no-param-reassign
-        onboardingMessage = onboardingMessages[CONST.ONBOARDING_CHOICES.PERSONAL_SPEND];
+        onboardingMessage = getOnboardingMessages().onboardingMessages[CONST.ONBOARDING_CHOICES.PERSONAL_SPEND];
     }
 
     if (engagementChoice === CONST.ONBOARDING_CHOICES.EMPLOYER || engagementChoice === CONST.ONBOARDING_CHOICES.SUBMIT) {
         // eslint-disable-next-line no-param-reassign
-        onboardingMessage = onboardingMessages[CONST.ONBOARDING_CHOICES.SUBMIT];
+        onboardingMessage = getOnboardingMessages().onboardingMessages[CONST.ONBOARDING_CHOICES.SUBMIT];
     }
 
     // Guides are assigned and tasks are posted in the #admins room for the MANAGE_TEAM and TRACK_WORKSPACE onboarding actions, except for emails that have a '+'.

src/libs/TourUtils.ts

@@ -1,6 +1,6 @@
 import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
-import type {OnboardingPurpose} from '@src/CONST';
+import type {OnboardingPurpose} from './actions/Welcome/OnboardingFlow';
 
 function getNavatticURL(environment: ValueOf<typeof CONST.ENVIRONMENT>, introSelected?: OnboardingPurpose) {
     const adminTourURL = environment === CONST.ENVIRONMENT.PRODUCTION ? CONST.NAVATTIC.ADMIN_TOUR_PRODUCTION : CONST.NAVATTIC.ADMIN_TOUR_STAGING;

src/libs/actions/IOU.ts

@@ -228,7 +228,7 @@ import {buildInviteToRoomOnyxData, completeOnboarding, getCurrentUserAccountID,
 import {clearAllRelatedReportActionErrors} from './ReportActions';
 import {getRecentWaypoints, sanitizeRecentWaypoints} from './Transaction';
 import {removeDraftSplitTransaction, removeDraftTransaction, removeDraftTransactions} from './TransactionEdit';
-import getOnboardingMessages from './Welcome/OnboardingFlowTasks';
+import {getOnboardingMessages} from './Welcome/OnboardingFlow';
 
 type IOURequestType = ValueOf<typeof CONST.IOU.REQUEST_TYPE>;
 
@@ -5339,12 +5339,11 @@ function requestMoney(requestMoneyInformation: RequestMoneyInformation) {
         }
         default: {
             // This is only required when inviting admins to test drive the app
-            const {onboardingMessages} = getOnboardingMessages();
             const guidedSetupData: GuidedSetupData | undefined = isTestDrive
                 ? prepareOnboardingOnyxData(
                       {choice: CONST.ONBOARDING_CHOICES.TEST_DRIVE_RECEIVER},
                       CONST.ONBOARDING_CHOICES.TEST_DRIVE_RECEIVER,
-                      onboardingMessages[CONST.ONBOARDING_CHOICES.TEST_DRIVE_RECEIVER],
+                      getOnboardingMessages().onboardingMessages[CONST.ONBOARDING_CHOICES.TEST_DRIVE_RECEIVER],
                   )?.guidedSetupData
                 : undefined;