Onboarding fixes

src/CONST.ts

@@ -3650,24 +3650,24 @@ const CONST = {
                     type: 'createWorkspace',
                     autoCompleted: true,
                     title: 'Create a workspace',
-                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    subtitle: '<strong>Create a workspace</strong> 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.',
+                        '<strong>Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.</strong>',
                 },
                 {
                     type: 'trackExpense',
                     autoCompleted: false,
                     title: 'Track an expense',
-                    subtitle: 'Track an expense in any currency, in just a few clicks.',
+                    subtitle: '<strong>Track an expense</strong> in any currency, in just a few clicks.',
                     message:
                         'Here’s how to track an expense:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Track expense</strong>.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
                         '4. Click <strong>Track</strong>.\n' +
@@ -3690,11 +3690,11 @@ const CONST = {
                     type: 'submitExpense',
                     autoCompleted: false,
                     title: 'Submit an expense',
-                    subtitle: 'Submit an expense by entering an amount or scanning a receipt.',
+                    subtitle: '<strong>Submit an expense</strong> by entering an amount or scanning a receipt.',
                     message:
                         'Here’s how to submit an expense:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> 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' +
@@ -3705,7 +3705,7 @@ const CONST = {
                     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!',
+                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
                     message:
                         'Here’s how to set up your wallet:\n' +
                         '\n' +
@@ -3731,14 +3731,14 @@ const CONST = {
                     type: 'createWorkspace',
                     autoCompleted: true,
                     title: 'Create a workspace',
-                    subtitle: 'Create a workspace to track expenses, scan receipts, chat, and more.',
+                    subtitle: '<strong>Create a workspace</strong> 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.',
+                        '<strong>Your new workspace is ready! It’ll keep all of your spend (and chats) in one place.</strong>',
                 },
                 {
                     type: 'meetGuide',
@@ -3754,7 +3754,7 @@ const CONST = {
                     type: 'setupCategories',
                     autoCompleted: false,
                     title: 'Set up categories',
-                    subtitle: 'Set up categories so your team can code expenses for easy reporting.',
+                    subtitle: '<strong>Set up categories</strong> so your team can code expenses for easy reporting.',
                     message:
                         'Here’s how to set up categories:\n' +
                         '\n' +
@@ -3764,29 +3764,29 @@ const CONST = {
                         '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.',
+                        'For more controls like requiring a category for every expense, click <strong>Settings</strong>.',
                 },
                 {
                     type: 'addExpenseApprovals',
                     autoCompleted: false,
                     title: 'Add expense approvals',
-                    subtitle: 'Add expense approvals to review your team’s spend and keep it under control.',
+                    subtitle: '<strong>Add expense approvals</strong> 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' +
+                        '2. Go to <strong>Workspaces</strong> > [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' +
+                        '5. In <strong>Workflows</strong>, 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.',
+                    subtitle: '<strong>Invite your team</strong> to Expensify so they can start tracking expenses today.',
                     message:
                         'Here’s how to invite your team:\n' +
                         '\n' +
@@ -3814,14 +3814,14 @@ const CONST = {
                     type: 'trackExpense',
                     autoCompleted: false,
                     title: 'Track an expense',
-                    subtitle: 'Track an expense in any currency, whether you have a receipt or not.',
+                    subtitle: '<strong>Track an expense</strong> 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' +
+                        '1. Click the green <strong>+</strong> button.\n' +
                         '2. Choose <strong>Track expense</strong>.\n' +
                         '3. Enter an amount or scan a receipt.\n' +
-                        '4. Click Track.\n' +
+                        '4. Click <strong>Track</strong>.\n' +
                         '\n' +
                         'And you’re done! Yep, it’s that easy.',
                 },
@@ -3841,27 +3841,27 @@ const CONST = {
                     type: 'startChat',
                     autoCompleted: false,
                     title: 'Start a chat',
-                    subtitle: 'Start a chat with a friend or group using their email or phone number.',
+                    subtitle: '<strong>Start a chat</strong> 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' +
+                        '1. Click the green <strong>+</strong> 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' +
+                        '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.',
+                    subtitle: '<strong>Split an expense</strong> right in your chat with one or more friends.',
                     message:
                         'Here’s how to request money:\n' +
                         '\n' +
-                        '1. Click the green + button.\n' +
+                        '1. Click the green <strong>+</strong> 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' +
@@ -3872,7 +3872,7 @@ const CONST = {
                     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!',
+                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
                     message:
                         'Here’s how to enable your wallet:\n' +
                         '\n' +

src/languages/es.ts

@@ -313,7 +313,7 @@ export default {
             subtitleText2: 'o crea algo usando el botón',
             subtitleText3: '.',
         },
-        businessName: 'Nombre del Negocio',
+        businessName: 'Nombre de la empresa',
     },
     location: {
         useCurrent: 'Usar ubicación actual',

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -10,6 +10,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import Log from '@libs/Log';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
+import getOnboardingModalScreenOptions from '@libs/Navigation/getOnboardingModalScreenOptions';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
 import NetworkConnection from '@libs/NetworkConnection';
@@ -160,7 +161,10 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
     const {isSmallScreenWidth} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useOnboardingLayout();
     const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils);
-    const onboardingScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(shouldUseNarrowLayout), [screenOptions, shouldUseNarrowLayout]);
+    const onboardingScreenOptions = useMemo(
+        () => getOnboardingModalScreenOptions(isSmallScreenWidth, styles, StyleUtils, shouldUseNarrowLayout),
+        [StyleUtils, isSmallScreenWidth, shouldUseNarrowLayout, styles],
+    );
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -369,7 +373,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
                     />
                     <RootStack.Screen
                         name={NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR}
-                        options={screenOptions.fullScreen}
+                        options={onboardingScreenOptions}
                         component={OnboardingModalNavigator}
                     />
                     <RootStack.Screen

src/libs/Navigation/getOnboardingModalScreenOptions/index.native.ts

@@ -0,0 +1,9 @@
+import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
+import type {ThemeStyles} from '@styles/index';
+import type {StyleUtilsType} from '@styles/utils';
+
+function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType) {
+    return getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).fullScreen;
+}
+
+export default getOnboardingModalScreenOptions;

src/libs/Navigation/getOnboardingModalScreenOptions/index.ts

@@ -0,0 +1,9 @@
+import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
+import type {ThemeStyles} from '@styles/index';
+import type {StyleUtilsType} from '@styles/utils';
+
+function getOnboardingModalScreenOptions(isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType, shouldUseNarrowLayout: boolean) {
+    return getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils).onboardingModalNavigator(shouldUseNarrowLayout);
+}
+
+export default getOnboardingModalScreenOptions;

src/libs/actions/Report.ts

@@ -3047,6 +3047,7 @@ function completeOnboarding(
     };
 
     const tasksData = data.tasks.map((task, index) => {
+        const hasSubtitle = !!task.subtitle;
         const currentTask = ReportUtils.buildOptimisticTaskReport(
             actorAccountID,
             undefined,
@@ -3066,13 +3067,13 @@ function completeOnboarding(
             actorAccountID,
             index + 3,
             {
-                childVisibleActionCount: 2,
+                childVisibleActionCount: hasSubtitle ? 2 : 1,
                 childCommenterCount: 1,
                 childLastVisibleActionCreated: DateUtils.getDBTime(),
                 childOldestFourAccountIDs: `${actorAccountID}`,
             },
         );
-        const subtitleComment = task.subtitle ? ReportUtils.buildOptimisticAddCommentReportAction(task.subtitle, undefined, actorAccountID) : null;
+        const subtitleComment = hasSubtitle ? ReportUtils.buildOptimisticAddCommentReportAction(task.subtitle, undefined, actorAccountID, 0, false) : null;
         const isTaskMessageFunction = typeof task.message === 'function';
         const taskMessage = isTaskMessageFunction
             ? task.message({
@@ -3219,6 +3220,33 @@ function completeOnboarding(
         [],
     );
 
+    const tasksForFailureData = tasksData.reduce<OnyxUpdate[]>((acc, {currentTask, taskReportAction}) => {
+        const tasksForFailureDataAcc: OnyxUpdate[] = [
+            ...acc,
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${targetChatReportID}`,
+                value: {
+                    [taskReportAction.reportAction.reportActionID]: {
+                        errors: ErrorUtils.getMicroSecondOnyxError('report.genericAddCommentFailureMessage'),
+                    } as ReportAction,
+                },
+            },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${currentTask.reportID}`,
+                value: null,
+            },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${currentTask.reportID}`,
+                value: null,
+            },
+        ];
+
+        return tasksForFailureDataAcc;
+    }, []);
+
     const optimisticData: OnyxUpdate[] = [
         ...tasksForOptimisticData,
         {
@@ -3254,6 +3282,52 @@ function completeOnboarding(
             },
         },
     ];
+    let failureReport: Partial<Report> = {
+        lastMessageTranslationKey: '',
+        lastMessageText: '',
+        lastVisibleActionCreated: '',
+    };
+    const {lastMessageText = '', lastMessageTranslationKey = ''} = ReportActionsUtils.getLastVisibleMessage(targetChatReportID);
+    if (lastMessageText || lastMessageTranslationKey) {
+        const lastVisibleAction = ReportActionsUtils.getLastVisibleAction(targetChatReportID);
+        const lastVisibleActionCreated = lastVisibleAction?.created;
+        const lastActorAccountID = lastVisibleAction?.actorAccountID;
+        failureReport = {
+            lastMessageTranslationKey,
+            lastMessageText,
+            lastVisibleActionCreated,
+            lastActorAccountID,
+        };
+    }
+
+    const failureData: OnyxUpdate[] = [
+        ...tasksForFailureData,
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${targetChatReportID}`,
+            value: failureReport,
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${targetChatReportID}`,
+            value: {
+                [mentionCommentAction.reportActionID]: {
+                    errors: ErrorUtils.getMicroSecondOnyxError('report.genericAddCommentFailureMessage'),
+                } as ReportAction,
+                [textCommentAction.reportActionID]: {
+                    errors: ErrorUtils.getMicroSecondOnyxError('report.genericAddCommentFailureMessage'),
+                } as ReportAction,
+                [videoCommentAction.reportActionID]: {
+                    errors: ErrorUtils.getMicroSecondOnyxError('report.genericAddCommentFailureMessage'),
+                } as ReportAction,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.NVP_INTRO_SELECTED,
+            value: {choice: null},
+        },
+    ];
 
     const guidedSetupData: GuidedSetupData = [
         {type: 'message', ...mentionMessage},
@@ -3269,7 +3343,7 @@ function completeOnboarding(
         guidedSetupData: JSON.stringify(guidedSetupData),
     };
 
-    API.write(WRITE_COMMANDS.COMPLETE_GUIDED_SETUP, parameters, {optimisticData, successData});
+    API.write(WRITE_COMMANDS.COMPLETE_GUIDED_SETUP, parameters, {optimisticData, successData, failureData});
 }
 
 /**