[Due for payment 2025-06-12] [$125] Expense - "Canceled the payment" message thread header shows "The reimbursement was cancelled"

[jponikarchuk]

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

---

Version Number: 9.1.54-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #62628
Email or phone of affected tester (no customers): applausetester+300506kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.4 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit an expense.
4. Click on the expense preview.e
5. Click Submit, Approve and Pay elsewhere.
6. Click More > Cancel payment.
7. Right click on "canceled the payment" system message > Reply in thread..

Expected Result:

"canceled the payment" system message thread header will show "canceled the payment".

Actual Result:

"canceled the payment" system message thread header shows "The reimbursement was cancelled".

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021928420561314176542
• Upwork Job ID: 1928420561314176542
• Last Price Increase: 2025-05-30

Issue Owner

Current Issue Owner: @sonialiap / @maddylewis

[melvin-bot]

Triggered auto assignment to @sonialiap (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.

[ryntgh]

Proposal

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

Expense - "Canceled the payment" message thread header shows "The reimbursement was cancelled"

What is the root cause of that problem?

We don't have specific handling for REIMBURSEMENT_DEQUEUED actions (cancel payment) on getReportActionMessage. The getReportActionMessage function falls back to parseReportActionHtmlToText which processes the raw HTML message content from BE, meanwhile the main chat uses getReimbursementDeQueuedOrCanceledActionMessage() which returns the proper "canceled the payment" text via the iou.adminCanceledRequest translation key

App/src/libs/ReportUtils.ts

Lines 4583 to 4627 in b02a1f6

	/**
	* Get the report action message for a report action.
	*/
	function getReportActionMessage({
	reportAction,
	reportID,
	childReportID,
	reports,
	personalDetails,
	}: {
	reportAction: OnyxEntry<ReportAction>;
	reportID?: string;
	childReportID?: string;
	reports?: SearchReport[];
	personalDetails?: Partial<PersonalDetailsList>;
	}) {
	if (isEmptyObject(reportAction)) {
	return '';
	}
	if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.HOLD) {
	return translateLocal('iou.heldExpense');
	}
	if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.EXPORTED_TO_INTEGRATION) {
	return getExportIntegrationLastMessageText(reportAction);
	}
	if (reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.UNHOLD) {
	return translateLocal('iou.unheldExpense');
	}
	if (isApprovedOrSubmittedReportAction(reportAction) || isActionOfType(reportAction, CONST.REPORT.ACTIONS.TYPE.REIMBURSED)) {
	return getReportActionMessageText(reportAction);
	}
	if (isReimbursementQueuedAction(reportAction)) {
	return getReimbursementQueuedActionMessage({
	reportAction,
	reportOrID: getReportOrDraftReport(reportID, reports),
	shouldUseShortDisplayName: false,
	reports,
	personalDetails,
	});
	}
	return parseReportActionHtmlToText(reportAction, reportID, childReportID);
	}

App/src/libs/ReportUtils.ts

Lines 3196 to 3199 in b02a1f6

	if (originalMessage?.cancellationReason === CONST.REPORT.CANCEL_PAYMENT_REASONS.ADMIN || originalMessage?.cancellationReason === CONST.REPORT.CANCEL_PAYMENT_REASONS.USER) {
	const payerOrApproverName = report?.managerID === currentUserAccountID || !isLHNPreview ? '' : getDisplayNameForParticipant({accountID: report?.managerID, shouldUseShortForm: true});
	return translateLocal('iou.adminCanceledRequest', {manager: payerOrApproverName, amount: formattedAmount});
	}

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

We should add specific handling for REIMBURSEMENT_DEQUEUED and REIMBURSEMENT_ACH_CANCELED actions in the getReportActionMessage function to use the same message logic as the main chat

We can add this code

    if (isReimbursementDeQueuedOrCanceledAction(reportAction)) {
        return getReimbursementDeQueuedOrCanceledActionMessage(reportAction, getReportOrDraftReport(reportID, reports));
    }

Here

App/src/libs/ReportUtils.ts

Lines 4625 to 4626 in b02a1f6

	return parseReportActionHtmlToText(reportAction, reportID, childReportID);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A (UI issue)

[etCoderDysto]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-30 11:47:06 UTC.

Proposal

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

Expense - "Canceled the payment" message thread header shows "The reimbursement was cancelled"

What is the root cause of that problem?

For PureReportActionItem(message) we are getting canceled system message (action.REIMBURSEMENTDEQUEUED) by calling getReimbursementDeQueuedOrCanceledActionMessage

App/src/pages/home/report/ReportActionItem.tsx

Line 95 in b02a1f6

reimbursementDeQueuedOrCanceledActionMessage={getReimbursementDeQueuedOrCanceledActionMessage(

But for report header we call getReportName -> getReportNameInternal. And getReportNameInternal doesn't handle the case for canceled payment using consistent method as PureReportActionItem. And this action type is handled by getReportActionMessage

App/src/libs/ReportUtils.ts

Lines 4701 to 4716 in b02a1f6

	function getReportName(
	report: OnyxEntry<Report>,
	policy?: OnyxEntry<Policy>,
	parentReportActionParam?: OnyxInputOrEntry<ReportAction>,
	personalDetails?: Partial<PersonalDetailsList>,
	invoiceReceiverPolicy?: OnyxEntry<Policy>,
	reportAttributes?: ReportAttributesDerivedValue['reports'],
	): string {
	// Check if we can use report name in derived values - only when we have report but no other params
	const canUseDerivedValue = report && policy === undefined && parentReportActionParam === undefined && personalDetails === undefined && invoiceReceiverPolicy === undefined;
	const attributes = reportAttributes ?? reportAttributesDerivedValue;
	const derivedNameExists = report && !!attributes?.[report.reportID]?.reportName;
	if (canUseDerivedValue && derivedNameExists) {
	return attributes[report.reportID].reportName;
	}
	return getReportNameInternal({report, policy, parentReportActionParam, personalDetails, invoiceReceiverPolicy});

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

We should use getReimbursementDeQueuedOrCanceledActionMessage in getReportNameInternal for cancelled payment action to get the right report header title here

if (isReimbursementDeQueuedOrCanceledAction(parentReportAction)) {

return getReimbursementDeQueuedOrCanceledActionMessage(
                parentReportAction as OnyxEntry<ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_DEQUEUED | typeof CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENT_ACH_CANCELED>>,
                report,
            )

}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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