[$250] Add a more inviting sign-off from Concierge after our onboarding messages so it looks good in the LHN

[jamesdeanexpensify]

Slack thread
https://expensify.slack.com/archives/C07HPDRELLD/p1729810967369919

Problem
For new users viewing the LHN, we draw attention to their Concierge chat with a GBR and "Get started here!" tooltip, which is great. However, the message preview from Concierge shows a task to complete depending on your onboarding intent selection. This is subjective, but it doesn't feel very welcoming/inviting, and also a bit strange and random.

Solution
Add a new line It's great to meet you! right below the onboarding tasks/message from Concierge so it shows as the preview text from Concierge in the LHN.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850951668861078961
• Upwork Job ID: 1850951668861078961
• Last Price Increase: 2024-12-06
• Automatic offers:
• shubham1206agra | Contributor | 104743508

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @jasperhuangg

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021850951668861078961

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @situchan (External)

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Anaslancer]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Add a more inviting sign-off from Concierge after our onboarding messages so it looks good in the LHN

What is the root cause of that problem?

There is no converting feature for greetings message instead of "task for ... ".

What changes do you think we should make in order to solve the problem?

• Add the greetings message like "It's great to meet you!" in English and Spanish at following file.
  https://github.com/Expensify/App/blob/main/src/languages/en.ts
  https://github.com/Expensify/App/blob/main/src/languages/es.ts
• if the lastMessageText is "task for Add personal bank account", we can change it as the greetings message that added in en.ts and es.ts.
  

  App/src/libs/SidebarUtils.ts

  Line 428 in da2e668

  let lastMessageText = Str.removeSMSDomain(lastMessageTextFromReport);

  
  We can change the static comparing text as dynamically.

What alternative solutions did you explore? (Optional)

N/A

Contributor details

Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01aff093c9a804b145

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[jamesdeanexpensify]

As additional info - You can see that, depending on which onboarding intent you select, there are various types of messages that finish with a task (or text) that we'll need to update by adding the sign-off "It's great to meet you!":

2024-10-28_15-05-14.mp4

2024-10-28_15-06-41.mp4

2024-10-28_15-08-42.mp4

(Note: the fourth option, "Chat and split expenses with friends," currently has a bug that's being addressed so we can leave that alone for now)

2024-10-28_15-10-33.mp4

[MuaazArshad]

Proposal

Please re-state the problem that we are trying to solve in this issue.

A non-inviting sign-off from Concierge after our onboarding messages

What is the root cause of that problem?

We're treating Concierge as a standard chat by generating its most recent message based on recent activity, while also considering the first message as part of its activity history.

What changes do you think we should make in order to solve the problem?

We should add a separate condition for Concierge. We can add it like

if(result.isConciergeChat && lastAction?.actionName === CONST.REPORT.ACTIONS.TYPE.ADD_COMMENT) {
            result.alternateText = "It's great to meet you!";
        } 

Surely after taking care of the translation. Before this line

App/src/libs/SidebarUtils.ts

Lines 497 to 500 in db592c9

	result.alternateText =
	(ReportUtils.isGroupChat(report) || ReportUtils.isDeprecatedGroupDM(report)) && lastActorDisplayName
	? ReportUtils.formatReportLastMessageText(Parser.htmlToText(`${lastActorDisplayName}: ${lastMessageText}`))
	: ReportUtils.formatReportLastMessageText(Parser.htmlToText(lastMessageText)) || formattedLogin;

What alternative solutions did you explore? (Optional)

[Anaslancer]

@jamesdeanexpensify Yes, I can handle it. We can add these lines at the SidebarUtils.ts.

import type * as OnyxTypes from '@src/types/onyx';

let introSelected: OnyxEntry<OnyxTypes.IntroSelected>;   // for getting what user selected on onboarding
Onyx.connect({
    key: ONYXKEYS.NVP_INTRO_SELECTED,
    callback: (value) => (introSelected = value),
});

And add this code below line 428

App/src/libs/SidebarUtils.ts

Line 428 in da2e668

let lastMessageText = Str.removeSMSDomain(lastMessageTextFromReport);

    let onboardingPurpose = introSelected?.choice;
    if (onboardingPurpose) {
        const onboardingMessages: ValueOf<typeof CONST.ONBOARDING_MESSAGES> = CONST.ONBOARDING_MESSAGES[onboardingPurpose];
        const tasks = onboardingMessages.tasks;
        const comparingText = tasks.length ? `task for ${tasks.slice(-1)[0].title}` : onboardingMessages.message;
        
        if (lastMessageText == comparingText) {
            lastMessageText = "It's great to meet you!";
        }
    }

Then we can see these videos with a greetings message. but we should add the "It's great to meet you!" in the en.ts and es.ts files.

[Anaslancer]

Get.Employee.mp4

Manage.Team.mp4

Track.Expense.mp4

[lschurr]

@situchan can you review the proposals here?

[situchan]

I don't like any of the proposed solutions so far. They will cause regressions when user sends any message to Concierge chat.
Greetings message should show in LHN only when there's only onboarding task, no other report actions.

[Anaslancer]

@situchan I just changed the condition.

    const accountID = session?.accountID;
    let onboardingPurpose = introSelected?.choice;
    if (onboardingPurpose && result.isConciergeChat && report.lastActorAccountID != accountID) {
        const onboardingMessages: ValueOf<typeof CONST.ONBOARDING_MESSAGES> = CONST.ONBOARDING_MESSAGES[onboardingPurpose];
        const tasks = onboardingMessages.tasks;
        const comparingText = tasks.length ? `task for ${tasks.slice(-1)[0].title}` : onboardingMessages.message;
        
        if (lastMessageText.substring(0, 20) == comparingText.substring(0, 20)) {
            lastMessageText = "It's great to meet you!";
        }
    }

result.isConciergeChat : for detecting if Concierge chat
report.lastActorAccountID != accountID : in Concierge chat, for detecting if reported user is a logged in user.

[Anaslancer]

[jasperhuangg]

@jamesdeanexpensify I'm happy with that. I don't think it'll be too much more complex. Do you mind updating the OP to reflect that?

[jamesdeanexpensify]

Updated - is that clear enough? cc @jasperhuangg

[melvin-bot]

Current assignee @shubham1206agra is eligible for the External assigner, not assigning anyone new.

[jasperhuangg]

Ignore that^ assumed the changes would be back-end at first glance but made a mistake. We can have a front-end contributor work on this.

[ugogiordano]

Edited by proposal-police: This proposal was edited at 2024-10-30 09:22:09 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The current sign-off message from Concierge following the completion of the onboarding process is uninviting.

What is the root cause of that problem?

Upon completion of onboarding, messages related to corresponding tasks are stored for the Concierge report. Consequently, the alternateText for the Concierge report's LHN (Left Hand Navigation) row is tied to the title of the last onboarding task.

What changes do you think we should make in order to solve the problem?

To improve the user experience, we propose adding a final, more welcoming sign-off message at the end of the onboarding task list.

In the prepareOnboardingOptimisticData function

App/src/libs/actions/Report.ts

Lines 3530 to 3549 in 7fbac55

	// Text message
	const textComment = ReportUtils.buildOptimisticAddCommentReportAction(data.message, undefined, actorAccountID, 1);
	const textCommentAction: OptimisticAddCommentReportAction = textComment.reportAction;
	const textMessage: AddCommentOrAttachementParams = {
	reportID: targetChatReportID,
	reportActionID: textCommentAction.reportActionID,
	reportComment: textComment.commentText,
	};
	let videoCommentAction: OptimisticAddCommentReportAction | null = null;
	let videoMessage: AddCommentOrAttachementParams | null = null;
	if ('video' in data && data.video) {
	const videoComment = ReportUtils.buildOptimisticAddCommentReportAction(CONST.ATTACHMENT_MESSAGE_TEXT, undefined, actorAccountID, 2);
	videoCommentAction = videoComment.reportAction;
	videoMessage = {
	reportID: targetChatReportID,
	reportActionID: videoCommentAction.reportActionID,
	reportComment: videoComment.commentText,
	};
	}

we will implement the following changes to include a welcome sign-off message:

1. Add the sign-off message: Create the welcome message using the following code snippet:

     // Sign-off welcome message
    const welcomeSignOffComment = ReportUtils.buildOptimisticAddCommentReportAction(Localize.translateLocal('onboarding.welcomeSignOffTitle'), undefined, actorAccountID, 2);
    const welcomeSignOffCommentAction: OptimisticAddCommentReportAction = welcomeSignOffComment.reportAction;
    const welcomeSignOffMessage = {
        reportID: targetChatReportID,
        reportActionID: welcomeSignOffCommentAction.reportActionID,
        reportComment: welcomeSignOffComment.commentText,
    };

2. Adjust the video message offset: To ensure the video message is properly placed in the task list, update the createdOffset for the video message to 3

   App/src/libs/actions/Report.ts

   Line 3542 in 7fbac55

   const videoComment = ReportUtils.buildOptimisticAddCommentReportAction(CONST.ATTACHMENT_MESSAGE_TEXT, undefined, actorAccountID, 2);

   . This change is needed to maintain the correct ordering of messages:

3. Append the message to the message list: Before returning the data, add the welcome sign-off message to the guidedSetupData array. This will ensure the message appears as the last item in the chat:

   guidedSetupData.push(...tasksForParameters, {type: 'message', ...welcomeSignOffMessage});

    return {optimisticData, successData, failureData, guidedSetupData, actorAccountID};

4. Add translation for the sign-off message: Add the translation for the new welcome sign-off message to the relevant language files:

    onboarding: {
        welcome: 'Welcome!',
        welcomeSignOffTitle: "It's great to meet you!",
        ...

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[shubham1206agra]

@jasperhuangg I like the solution stated here #51501 (comment). Can we do this? Since this is the solution which will not introduce any regressions.

[lschurr]

Bump on this one @jasperhuangg

[jasperhuangg]

@shubham1206agra Happy with that, let's move forward with it.

[melvin-bot]

📣 @ugogiordano You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[ugogiordano]

I'm working on the PR, expected to be ready by tomorrow.

[ugogiordano]

@jasperhuangg, @shubham1206agra the PR is ready for review.

[jamesdeanexpensify]

@shubham1206agra @jasperhuangg PR is ready for review above, thanks!

[jasperhuangg]

Ah, I don't get assigned to review the PR until the C+ reviews it