[C+ Checklist Needs Completion] [ECARD TRANSACTIONS] [$500] Report name on an expense report with non-reimbursable transactions is showing the workspace name instead of the requestor name (see "Free Workspace - ECard testing spent")

[kevinksullivan]

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 reported by: @kevinksullivan
Slack conversation: https://expensify.slack.com/archives/C05DWUDHVK7/p1705356562602929

Action Performed:

1. Create a free workspace and set it as your default
2. Incur a charge on an Expensify Card

Expected Result:

The report title should be %firstName% spent

Actual Result:

The report title is using the workspace name instead of firstName of the requestor

[melvin-bot]

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

[grgia]

Solution Notes

App/src/components/ReportActionItem/ReportPreview.js

Lines 214 to 228 in 497ed92

	return displayAmount;
	};
	const getPreviewMessage = () => {
	if (isScanning) {
	return props.translate('common.receipt');
	}
	const payerOrApproverName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);
	if (isApproved) {
	return props.translate('iou.managerApproved', {manager: payerOrApproverName});
	}
	const managerName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);
	let paymentVerb = hasNonReimbursableTransactions ? 'iou.payerSpent' : 'iou.payerOwes';
	if (iouSettled || props.iouReport.isWaitingOnBankAccount) {
	paymentVerb = 'iou.payerPaid';

        const managerName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

on this line, we never want to use the workspace name if the report has non-reimbrsable transactions. it should always be %FirstName% spent

so maybe we can try

        const managerName = (isPolicyExpenseChat && !hasNonReimbursableTransactions) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[abzokhattab]

Proposal

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

Report name on an expense report with non-reimbursable transactions is showing the workspace name instead of the requestor name

What is the root cause of that problem?

we dont have a check for non-reimbursable transactions here

App/src/components/ReportActionItem/ReportPreview.js

Lines 225 to 226 in 497ed92

	const managerName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);
	let paymentVerb = hasNonReimbursableTransactions ? 'iou.payerSpent' : 'iou.payerOwes';

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

if the report has NonReimbursable Transactions we need to display the first name:

        const managerName = (isPolicyExpenseChat && !hasNonReimbursableTransactions) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

OR we can also validate that the transaction is a card transaction by using

const isCardTransaction = TransactionUtils.isCardTransaction(transaction);

then the final condition would be:

        const managerName = (isPolicyExpenseChat && !hasNonReimbursableTransactions &&!isCardTransaction ) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

[Tony-MK]

Proposal

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

[ECARD TRANSACTIONS] Report name on an expense report with non-reimbursable transactions is showing the workspace name instead of the requestor name (see "Free Workspace - ECard testing spent")

What is the root cause of that problem?

We have not implemented a condition in the getPreviewMessage function to handle titles for IOUs paid by an Expensify card.

App/src/components/ReportActionItem/ReportPreview.js

Line 234 in e6b0761

const managerName = isPolicyExpenseChat ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

Furthermore, we will only display the only firstName of the participant if and only if the report isPolicyExpenseChat.

Hence, we end up displaying the policy name.

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

In addition to !hasNonReimbursableTransactions, we should create a condition such as usedExpensifyCard to further check if every or some of the transactions were paid using an Expensify card.

This will ensure that IOUs paid by other methods do not get affected.

Hence, the changes to the code should look close to below.

const usedExpensifyCard = !hasNonReimbursableTransactions &&
TransactionUtils.getAllReportTransactions(report.iouReportID).every(
 (transaction) => TransactionUtils.isExpensifyCardTransaction(transaction)
);

const managerName = (isPolicyExpenseChat && !usedExpensifyCard) ? ReportUtils.getPolicyName(props.chatReport) : ReportUtils.getDisplayNameForParticipant(managerID, true);

Finally, I suggest we change the MoneyReportHeader's title and subtitle and the LHNOptionRow's title and subtitle to be consistent with the report preview.

Therefore, we will also have to change functions such as ReportUtils.getReportName and ReportUtils.getChatRoomSubtitle.

This will ensure consistency with other components mentioned earlier, which require the same title as the report preview.