[Due for payment 2025-02-28] [$250] Delete expene missing after cancel payment

[m-natarajan]

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.0.86-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @dukenv0307
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Create an expense
2. Go to offline
3. Click pay elsewhere
4. Click report header -> Cancel payment
5. Click report header again

Expected Result:

Delete expense button is missing

Actual Result:

Delete expense button is displayed

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

bug-resize.1.mp4

Recording.891.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021881632041880939700
• Upwork Job ID: 1881632041880939700
• Last Price Increase: 2025-02-11
• Automatic offers:
• twilight2294 | Contributor | 106099552

Issue Owner

Current Issue Owner: @sonialiap

[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.

[nkdengineer]

Proposal

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

Delete expenes missing after cancel payment

What is the root cause of that problem?

After cancel payment, we are updating statusNum = CONST.REPORT.STATUS_NUM.CLOSED when approvalMode === CONST.POLICY.APPROVAL_MODE.OPTIONAL here

App/src/libs/actions/IOU.ts

Lines 7910 to 7912 in 332c9b0

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

It leads to isProcessingReport(moneyRequestReport) will be false

App/src/libs/ReportUtils.ts

Lines 1992 to 1994 in 332c9b0

	if (isInstantSubmitEnabled(policy) && isProcessingReport(moneyRequestReport)) {
	return isAwaitingFirstLevelApproval(moneyRequestReport);
	}

And in function canAddOrDeleteTransactions we return false here

App/src/libs/ReportUtils.ts

Lines 1996 to 1998 in 332c9b0

	if (isReportApproved(moneyRequestReport) || isClosedReport(moneyRequestReport) || isSettled(moneyRequestReport?.reportID)) {
	return false;
	}

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

We should update statusNum to CONST.REPORT.STATUS_NUM.SUBMITTED like BE is returning

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

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.

[github-actions]

⚠️ @nkdengineer Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format.

[dukenv0307]

@sonialiap I have the prior context on this issue so I can help take it as C+. Thanks

[twilight2294]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 06:50:00 UTC.

Proposal

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

There are 2 bugs in this flow:

1. Delete expene missing after cancel payment.
2. The optimistic message (next step) for policy with instant submit enabled is wrong ( doesn't match with what the backend returns)

What is the root cause of that problem?

1. When we cancel the payment, we set the statusNum to CONST.REPORT.STATUS_NUM.CLOSED when the policy approval mode is optional, this causes the bug in offline case where the delete and hold button are hidden. when we get api response from the BE, statusNum is correctly set to CONST.REPORT.STATUS_NUM.SUBMITTED.
   

   App/src/libs/actions/IOU.ts

   Line 7912 in 332c9b0

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

2. Now, when we cancel payment, the next steps for a policy with no approval flow enabled is to pay for the expense again. but now we see that no action is required (Which changes again when we get the response from the BE api).

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

1. We need to update the statusNum to CONST.REPORT.STATUS_NUM.SUBMITTED here:

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

2. Now we also need to update the nextSteps here, because with only the above change there will be a regression that we will always show that Waiting for (name) to approve expense(s). regardless of if the policy has approval flow enabled or not, only doing the change in 1. will cause this regression.

So we need to fix this one too, to do that we need to update the following case:

App/src/libs/NextStepUtils.ts

Lines 199 to 200 in 5133090

	// Generates an optimistic nextStep once a report has been submitted
	case CONST.REPORT.STATUS_NUM.SUBMITTED: {

here, we will put a if condition for the message:

App/src/libs/NextStepUtils.ts

Line 205 in 5133090

message: [

To display only when autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT and for other cases we can directly show the waiting for payment message optimistically, we need to make changes as follows:

Details

--- a/src/libs/NextStepUtils.ts
+++ b/src/libs/NextStepUtils.ts
@@ -5,7 +5,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Policy, Report, ReportNextStep} from '@src/types/onyx';
+import type {Policy, Report, ReportNextStep, Session} from '@src/types/onyx';
 import type {Message} from '@src/types/onyx/ReportNextStep';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import {getNextApproverAccountID} from './actions/IOU';
@@ -16,6 +16,7 @@ import * as ReportUtils from './ReportUtils';
 
 let currentUserAccountID = -1;
 let currentUserEmail = '';
+let session: Session;
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
@@ -25,6 +26,7 @@ Onyx.connect({
 
         currentUserAccountID = value?.accountID ?? -1;
         currentUserEmail = value?.email ?? '';
+        session = value;
     },
 });
 
@@ -86,6 +88,7 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
     }
 
     const {policyID = '', ownerAccountID = -1} = report ?? {};
+    const isPayer = ReportUtils.isPayer(session, report);
     const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`] ?? ({} as Policy);
     const {harvesting, autoReportingOffset} = policy;
     const autoReportingFrequency = PolicyUtils.getCorrectedAutoReportingFrequency(policy);
@@ -202,7 +205,10 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
             optimisticNextStep = {
                 type,
                 icon: CONST.NEXT_STEP.ICONS.HOURGLASS,
-                message: [
+            };
+
+            if (autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCIES.INSTANT) {
+                optimisticNextStep.message = [
                     {
                         text: 'Waiting for ',
                     },
@@ -219,8 +225,32 @@ function buildNextStep(report: OnyxEntry<Report>, predictedNextStatus: ValueOf<t
                     {
                         text: ' %expenses.',
                     },
-                ],
-            };
+                ];
+            } else {
+                optimisticNextStep.message = [
+                    {
+                        text: 'Waiting for ',
+                    },
+                    isPayer
+                        ? {
+                              text: `you`,
+                              type: 'strong',
+                          }
+                        : {
+                              text: `an admin`,
+                              type: 'strong',
+                          },
+                    {
+                        text: ' to ',
+                    },
+                    {
+                        text: 'pay',
+                    },
+                    {
+                        text: ' %expenses.',
+                    },
+                ];
+            }
 
             break;

Note that there can be a few improvements during PR phase, Note that i think that only an admin can undo a payment so the above conditions wont be required for that case, we can simply do the following:

            } else {
                optimisticNextStep.message = [
                    {
                        text: 'Waiting for ',
                    },
                    {
                        text: `you`,
                        type: 'strong',
                    },

                    {
                        text: ' to ',
                    },
                    {
                        text: 'pay',
                    },
                    {
                        text: ' %expenses.',
                    },
                ];

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

N/A this is a UI issue, but we can add additional nextStep tests to mock this action and see if we get correct message

What alternative solutions did you explore? (Optional)

N/A

[github-actions]

⚠️ @twilight2294 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

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