[$500] Split - Contact method of the participants is shown in Merchant instead of display name

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR: #29449

Version Number: v1.3.86-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation: @

Action Performed:

1. Go to staging.new.expensify.com
2. Go to + > Request money > Manual.
3. Select Split with a few participants with display name.
4. Create the bill split.
5. Click on the bill split preview > Show more.

Expected Result:

Display name of the participants will be displayed in the Merchant.

Actual Result:

Contact method of the participants is displayed in the Merchant.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6241512_1697620965636.20231018_111025.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018d28ed12ed77a99a
• Upwork Job ID: 1714607183948734464
• Last Price Increase: 2023-11-01

[melvin-bot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[shubham1206agra]

Proposal

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

Split - Contact method of the participants is shown in Merchant instead of display name

What is the root cause of that problem?

In

App/src/libs/actions/IOU.js

Lines 910 to 912 in a24e6a0

	const formattedParticipants = isOwnPolicyExpenseChat
	? [currentUserLogin, ReportUtils.getReportName(splitChatReport)]
	: Localize.arrayToString([currentUserLogin, ..._.map(participants, (participant) => participant.login || '')]);

We are using participant.login instead of participant.text, which is displaying contact method.

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

Use participant.text instead of participant.text in the given line.
And maybe somehow use current user display name instead of currentUserLogin.

What alternative solutions did you explore? (Optional)

[ayazalavi]

Proposal

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

When adding a money request manually and selecting participants, the report details show the participants' email addresses in the merchant field.

What is the root cause of that problem?

Root cause is that when adding transaction for split bill then following line of code uses user's login for generating Bill Split with string.

App/src/libs/actions/IOU.js

Lines 910 to 912 in a24e6a0

	const formattedParticipants = isOwnPolicyExpenseChat
	? [currentUserLogin, ReportUtils.getReportName(splitChatReport)]
	: Localize.arrayToString([currentUserLogin, ..._.map(participants, (participant) => participant.login || '')]);

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

Use getDisplayName

so instead of currentUserLogin we need to use getDisplayName(currentUserLogin, currentUserPersonalDetails)

and instead of participant.login we need to use getDisplayName(participant.login, participant)

    const formattedParticipants = isOwnPolicyExpenseChat
        ? [currentUserLogin, ReportUtils.getReportName(splitChatReport)]
        : Localize.arrayToString([getDisplayName(currentUserLogin, currentUserPersonalDetails), ..._.map(participants, (participant) => getDisplayName(participant.login, participant) || '')]);

What alternative solutions did you explore? (Optional)

We also need to ensure that if a user updates their display name from their profile, the transaction gets updated with the new display name. To achieve this, we should generate the formatted string as mentioned above before displaying the data OR update transactions merchant field as soon as user updates his or her profile, other than storing it in Onyx as follows:

App/src/libs/actions/IOU.js

Lines 914 to 927 in a24e6a0

	const splitTransaction = TransactionUtils.buildOptimisticTransaction(
	amount,
	currency,
	CONST.REPORT.SPLIT_REPORTID,
	comment,
	'',
	'',
	'',
	`${Localize.translateLocal('iou.splitBill')} ${Localize.translateLocal('common.with')} ${formattedParticipants} [${DateUtils.getDBTime().slice(0, 10)}]`,
	undefined,
	undefined,
	undefined,
	category,
	);

[zanyrenney]

Nope, this is not reproducible, I suspect it has been fixed elsewhere or is an older bug: