Expense - "No further action required" message, doesn´t disappear after cancelling payment.

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.78-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5367571&group_by=cases:section_id&group_order=asc&group_id=296775
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Search

Action Performed:

1. Open the staging.new.expensify.com website.
2. Open a workspace chat and submit an expense to it.
3. Go to "Reports" section.
4. Open the expense.
5. Pay the expense with "Pay Elsewhere" option.
6. Verify that a "No further action required" message is displayed on top of expense report.
7. Tap on report header.
8. Tap on "Cancel Payment"
9. Return to expense report

Expected Result:

After the payment is cancelled, the "No further action required" message should not be displayed anymore.

Actual Result:

"No further action requiered" remains visible on expense report after the expense payment is cancelled.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6701665_1735020865272.Further.mp4

View all open jobs on GitHub

[melvin-bot]

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

[github-actions]

Lena Your proposal will be dismissed because you did not follow the proposal template.

[Shahidullah-Muffakir]

Proposal

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

The issue is that the "No further action required" message remains visible on the expense report even after the payment is cancelled.

What is the root cause of that problem?

The root cause is that the case where the payment is cancelled and the "No further action required" message should be hidden was not considered in the code,

App/src/libs/NextStepUtils.ts

Line 83 in dc784de

function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<typeof CONST.REPORT.STATUS_NUM>): ReportNextStep | null {

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

We should add a check to verify if the expense report has been cancelled. If the isCancelledIOU flag is true, we should return null, ensuring that the "No further action required" message is removed.

Proposed change:

if (!ReportUtils.isExpenseReport(report) || report?.isCancelledIOU) {
    return null;
}

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

What alternative solutions did you explore? (Optional)

In case we don't want to show the nextStep only when the next step is specifically "No further action required" and the report has been paid, we can modify:

App/src/libs/NextStepUtils.ts

Lines 234 to 239 in dc784de

	// Generates an optimistic nextStep once a report has been paid
	case CONST.REPORT.STATUS_NUM.REIMBURSED:
	optimisticNextStep = noActionRequired;
	break;

as follows:

// Generates an optimistic nextStep once a report has been paid
case CONST.REPORT.STATUS_NUM.REIMBURSED && !report?.isCancelledIOU:
    // Only set the optimistic nextStep if the report hasn't been cancelled
    optimisticNextStep = noActionRequired;
    break;

[daledah]

Proposal

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

"No further action requiered" remains visible on expense report after the expense payment is cancelled.

What is the root cause of that problem?

When user cancel any payment:

App/src/libs/actions/IOU.ts

Line 7704 in dc784de

function cancelPayment(expenseReport: OnyxEntry<OnyxTypes.Report>, chatReport: OnyxTypes.Report) {

we get the next step from:

App/src/libs/actions/IOU.ts

Line 7714 in dc784de

const optimisticNextStep = NextStepUtils.buildNextStep(expenseReport, statusNum);

In this case, statusNum is CONST.REPORT.STATUS_NUM.CLOSED, so the buildNextStep function returns:

App/src/libs/NextStepUtils.ts

Lines 229 to 230 in dc784de

	case CONST.REPORT.STATUS_NUM.CLOSED:
	optimisticNextStep = noActionRequired;

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

• First, the statusNum calculation in:

App/src/libs/actions/IOU.ts

Line 7713 in dc784de

const statusNum: ValueOf<typeof CONST.REPORT.STATUS_NUM> = approvalMode === CONST.POLICY.APPROVAL_MODE.OPTIONAL ? CONST.REPORT.STATUS_NUM.CLOSED : CONST.REPORT.STATUS_NUM.APPROVED;

is incorrect. We can verify by comparing to the BE's data. It should be updated to:

    const statusNum: ValueOf<typeof CONST.REPORT.STATUS_NUM> = approvalMode === CONST.POLICY.APPROVAL_MODE.OPTIONAL ? CONST.REPORT.STATUS_NUM.SUBMITTED : CONST.REPORT.STATUS_NUM.APPROVED;

• Then, we need to handled case:

App/src/libs/NextStepUtils.ts

Line 200 in dc784de

case CONST.REPORT.STATUS_NUM.SUBMITTED: {

in the buildNextStep function. Now, we don't check whether the approvalMode is CONST.POLICY.APPROVAL_MODE.OPTIONAL or not, and we always return the nextStep message like "Waiting for ${user} to approve expenses". We need to fix that. So, in case the approvalMode is CONST.POLICY.APPROVAL_MODE.OPTIONAL, the nextStep message should be "Waiting for ${user} to pay expense" or "Waiting for ${user} to finish setting up a business bank account". Detail:

• In this line, create a new variable:

    const nextStepPayExpense = {
        type,
        icon: CONST.NEXT_STEP.ICONS.HOURGLASS,
        message: [
            {
                text: 'Waiting for ',
            },
            reimburserAccountID === -1
                ? {
                      text: 'an admin',
                  }
                : {
                      text: ReportUtils.getDisplayNameForParticipant(reimburserAccountID),
                      type: 'strong',
                  },
            {
                text: ' to ',
            },
            {
                text: hasValidAccount ? 'pay' : 'finish setting up',
            },
            {
                text: hasValidAccount ? ' %expenses.' : ' a business bank account.',
            },
        ],
    };

It is just a copy version of this.

Then below:

App/src/libs/NextStepUtils.ts

Line 200 in dc784de

case CONST.REPORT.STATUS_NUM.SUBMITTED: {

add:

            if (approvalMode === CONST.POLICY.APPROVAL_MODE.OPTIONAL) {
                optimisticNextStep = nextStepPayExpense;
                break;
            }

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

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.