Improve onboarding task description and replies

src/CONST.ts

@@ -3716,8 +3716,9 @@ const CONST = {
                     type: 'submitExpense',
                     autoCompleted: false,
                     title: 'Submit an expense',
-                    subtitle: '<strong>Submit an expense</strong> by entering an amount or scanning a receipt.',
-                    message:
+                    description:
+                        '<strong>Submit an expense</strong> by entering an amount or scanning a receipt.\n' +
+                        '\n' +
                         'Here’s how to submit an expense:\n' +
                         '\n' +
                         '1. Click the green <strong>+</strong> button.\n' +
@@ -3731,8 +3732,9 @@ const CONST = {
                     type: 'enableWallet',
                     autoCompleted: false,
                     title: 'Enable your wallet',
-                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
-                    message:
+                    description:
+                        'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!\n' +
+                        '\n' +
                         'Here’s how to set up your wallet:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
@@ -3757,8 +3759,9 @@ const CONST = {
                     type: 'createWorkspace',
                     autoCompleted: true,
                     title: 'Create a workspace',
-                    subtitle: '<strong>Create a workspace</strong> to track expenses, scan receipts, chat, and more.',
-                    message:
+                    description:
+                        '<strong>Create a workspace</strong> to track expenses, scan receipts, chat, and more.\n' +
+                        '\n' +
                         'Here’s how to create a workspace:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
@@ -3770,8 +3773,7 @@ const CONST = {
                     type: 'meetGuide',
                     autoCompleted: false,
                     title: 'Meet your setup specialist',
-                    subtitle: '',
-                    message: ({adminsRoomLink, guideCalendarLink}: {adminsRoomLink: string; guideCalendarLink: string}) =>
+                    description: ({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.`,
@@ -3780,8 +3782,9 @@ const CONST = {
                     type: 'setupCategories',
                     autoCompleted: false,
                     title: 'Set up categories',
-                    subtitle: '<strong>Set up categories</strong> so your team can code expenses for easy reporting.',
-                    message:
+                    description:
+                        '<strong>Set up categories</strong> so your team can code expenses for easy reporting.\n' +
+                        '\n' +
                         'Here’s how to set up categories:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
@@ -3796,8 +3799,9 @@ const CONST = {
                     type: 'addExpenseApprovals',
                     autoCompleted: false,
                     title: 'Add expense approvals',
-                    subtitle: '<strong>Add expense approvals</strong> to review your team’s spend and keep it under control.',
-                    message:
+                    description:
+                        '<strong>Add expense approvals</strong> to review your team’s spend and keep it under control.\n' +
+                        '\n' +
                         'Here’s how to add expense approvals:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
@@ -3812,8 +3816,9 @@ const CONST = {
                     type: 'inviteTeam',
                     autoCompleted: false,
                     title: 'Invite your team',
-                    subtitle: '<strong>Invite your team</strong> to Expensify so they can start tracking expenses today.',
-                    message:
+                    description:
+                        '<strong>Invite your team</strong> to Expensify so they can start tracking expenses today.\n' +
+                        '\n' +
                         'Here’s how to invite your team:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +
@@ -3840,8 +3845,9 @@ const CONST = {
                     type: 'trackExpense',
                     autoCompleted: false,
                     title: 'Track an expense',
-                    subtitle: '<strong>Track an expense</strong> in any currency, whether you have a receipt or not.',
-                    message:
+                    description:
+                        '<strong>Track an expense</strong> in any currency, whether you have a receipt or not.\n' +
+                        '\n' +
                         'Here’s how to track an expense:\n' +
                         '\n' +
                         '1. Click the green <strong>+</strong> button.\n' +
@@ -3867,8 +3873,9 @@ const CONST = {
                     type: 'startChat',
                     autoCompleted: false,
                     title: 'Start a chat',
-                    subtitle: '<strong>Start a chat</strong> with a friend or group using their email or phone number.',
-                    message:
+                    description:
+                        '<strong>Start a chat</strong> with a friend or group using their email or phone number.\n' +
+                        '\n' +
                         'Here’s how to start a chat:\n' +
                         '\n' +
                         '1. Click the green <strong>+</strong> button.\n' +
@@ -3883,8 +3890,9 @@ const CONST = {
                     type: 'splitExpense',
                     autoCompleted: false,
                     title: 'Split an expense',
-                    subtitle: '<strong>Split an expense</strong> right in your chat with one or more friends.',
-                    message:
+                    description:
+                        '<strong>Split an expense</strong> right in your chat with one or more friends.\n' +
+                        '\n' +
                         'Here’s how to request money:\n' +
                         '\n' +
                         '1. Click the green <strong>+</strong> button.\n' +
@@ -3898,8 +3906,9 @@ const CONST = {
                     type: 'enableWallet',
                     autoCompleted: false,
                     title: 'Enable your wallet',
-                    subtitle: 'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!',
-                    message:
+                    description:
+                        'You’ll need to <strong>enable your Expensify Wallet</strong> to get paid back. Don’t worry, it’s easy!\n' +
+                        '\n' +
                         'Here’s how to enable your wallet:\n' +
                         '\n' +
                         '1. Click your profile picture.\n' +

src/components/MenuItem.tsx

@@ -215,6 +215,9 @@ type MenuItemBaseProps = {
     /** Should render the content in HTML format */
     shouldRenderAsHTML?: boolean;
 
+    /** Whether or not the text should be escaped */
+    shouldEscapeText?: boolean;
+
     /** Should we grey out the menu item when it is disabled? */
     shouldGreyOutWhenDisabled?: boolean;
 
@@ -317,6 +320,7 @@ function MenuItem(
         isSmallAvatarSubscriptMenu = false,
         brickRoadIndicator,
         shouldRenderAsHTML = false,
+        shouldEscapeText = undefined,
         shouldGreyOutWhenDisabled = true,
         shouldUseDefaultCursorWhenDisabled = false,
         isAnonymousAction = false,
@@ -370,8 +374,8 @@ function MenuItem(
             return '';
         }
         const parser = new ExpensiMark();
-        return parser.replace(title);
-    }, [title, shouldParseTitle]);
+        return parser.replace(title, {shouldEscapeText});
+    }, [title, shouldParseTitle, shouldEscapeText]);
 
     const processedTitle = useMemo(() => {
         let titleToWrap = '';

src/components/ReportActionItem/TaskView.tsx

@@ -23,6 +23,7 @@ import getButtonState from '@libs/getButtonState';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import * as Url from '@libs/Url';
 import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
@@ -149,6 +150,8 @@ function TaskView({report, shouldShowHorizontalRule, ...props}: TaskViewProps) {
                         shouldGreyOutWhenDisabled={false}
                         numberOfLinesTitle={0}
                         interactive={!isDisableInteractive}
+                        shouldRenderAsHTML
+                        shouldEscapeText={Url.hasURL(report.description ?? '') ? undefined : false}
                     />
                 </OfflineWithFeedback>
                 <OfflineWithFeedback pendingAction={report.pendingFields?.managerID}>

src/libs/ReportUtils.ts

@@ -3516,12 +3516,6 @@ function buildOptimisticTaskCommentReportAction(
     parentReportID: string,
     actorAccountID?: number,
     createdOffset = 0,
-    repliesConfig?: {
-        childVisibleActionCount?: number;
-        childCommenterCount?: number;
-        childLastVisibleActionCreated?: string;
-        childOldestFourAccountIDs?: string;
-    },
 ): OptimisticReportAction {
     const reportAction = buildOptimisticAddCommentReportAction(text, undefined, undefined, createdOffset, undefined, taskReportID);
     if (reportAction.reportAction.message?.[0]) {
@@ -3546,22 +3540,6 @@ function buildOptimisticTaskCommentReportAction(
         reportAction.reportAction.actorAccountID = actorAccountID;
     }
 
-    if (repliesConfig?.childVisibleActionCount) {
-        reportAction.reportAction.childVisibleActionCount = repliesConfig.childVisibleActionCount;
-    }
-
-    if (repliesConfig?.childCommenterCount) {
-        reportAction.reportAction.childCommenterCount = repliesConfig.childCommenterCount;
-    }
-
-    if (repliesConfig?.childLastVisibleActionCreated) {
-        reportAction.reportAction.childLastVisibleActionCreated = repliesConfig.childLastVisibleActionCreated;
-    }
-
-    if (repliesConfig?.childOldestFourAccountIDs) {
-        reportAction.reportAction.childOldestFourAccountIDs = repliesConfig.childOldestFourAccountIDs;
-    }
-
     return reportAction;
 }
 

src/libs/Url.ts

@@ -56,4 +56,10 @@ function appendParam(url: string, paramName: string, paramValue: string) {
     return `${url}${separator}${paramName}=${paramValue}`;
 }
 
-export {addTrailingForwardSlash, hasSameExpensifyOrigin, getPathFromURL, appendParam};
+function hasURL(text: string) {
+    const urlPattern = /((https|http)?:\/\/[^\s]+)/g;
+
+    return urlPattern.test(text);
+}
+
+export {addTrailingForwardSlash, hasSameExpensifyOrigin, getPathFromURL, appendParam, hasURL};