[Due for payment 2025-04-14] [$250] Reports - "Pay" button disappears and reappears if editing expense category more than once

@sonialiap

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.20-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): ibellicotest+463@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Other

Action Performed:

Open the staging.new.expensify.com website.
Open any workspace chat.
Submit an expense.
Navigate to "Reports"
Open the just created expense.
Tap on "Category" and choose any category for the expense.
Open "Category" again and select a different category.
Check the "Pay" button behaviour after changing category for the second time.

Expected Result:

The payment button should remain visible at all times when changing the expense category.

Actual Result:

The payment button on expense report, disappears and reappears when the user edits the expense category more than once.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6784877_1743118908750.Pay.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021905565632412255816
Upwork Job ID: 1905565632412255816
Last Price Increase: 2025-03-28
Automatic offers:

ikevin127 | Reviewer | 106733318
daledah | Contributor | 106733319

Issue Owner

Current Issue Owner: @sonialiap

@sonialiap

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.

Proposal

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

The payment button on expense report, disappears and reappears when the user edits the expense category more than once.

What is the root cause of that problem?

When updating category for the first time, BE sends data back with total field is a string:

So the logics doesn't run here

App/src/libs/actions/IOU.ts

Lines 3700 to 3716 in 2492a02

    
           } else if ((isExpenseReport(iouReport) || isInvoiceReportReportUtils(iouReport)) && typeof iouReport.total === 'number') { 
        
               // For expense report, the amount is negative, so we should subtract total from diff 
        
               updatedMoneyRequestReport = { 
        
                   ...iouReport, 
        
                   total: iouReport.total - diff, 
        
               }; 
        
               if (!transaction?.reimbursable && typeof updatedMoneyRequestReport.nonReimbursableTotal === 'number') { 
        
                   updatedMoneyRequestReport.nonReimbursableTotal -= diff; 
        
               } 
        
               if (!isTransactionOnHold) { 
        
                   if (typeof updatedMoneyRequestReport.unheldTotal === 'number') { 
        
                       updatedMoneyRequestReport.unheldTotal -= diff; 
        
                   } 
        
                   if (!transaction?.reimbursable && typeof updatedMoneyRequestReport.unheldNonReimbursableTotal === 'number') { 
        
                       updatedMoneyRequestReport.unheldNonReimbursableTotal -= diff; 
        
                   } 
        
               }

Instead it calls here

App/src/libs/actions/IOU.ts

Line 3718 in 2492a02

updatedMoneyRequestReport = updateIOUOwnerAndTotal(

In updateIOUOwnerAndTotal, we perform flipping total value:

App/src/libs/IOUUtils.ts

Line 110 in 2492a02

iouReportUpdate.total = -iouReportUpdate.total;

So the total value will be positive, and these logics below will returns false

App/src/libs/actions/IOU.ts

Line 8566 in 2492a02

reimbursableSpend > 0 &&

App/src/components/MoneyReportHeader.tsx

Line 184 in 2492a02

const canIOUBePaid = useMemo(() => getCanIOUBePaid(), [getCanIOUBePaid]);

App/src/components/MoneyReportHeader.tsx

Line 191 in 2492a02

    
           const shouldShowPayButton = isPaidAnimationRunning || canIOUBePaid || onlyShowPayElsewhere;

App/src/components/MoneyReportHeader.tsx

Line 207 in 2492a02

const shouldShowSettlementButton =

So the button is not shown

After the second update category, the BE send back data with total being number, so the button is shown again.

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

We should use Number.isNaN here

App/src/libs/actions/IOU.ts

Line 3700 in 2492a02

    
           } else if ((isExpenseReport(iouReport) || isInvoiceReportReportUtils(iouReport)) && typeof iouReport.total === 'number') {

// use iouReport.total !== undefined instead of !!iouReport.total because its value can be 0
} else if ((isExpenseReport(iouReport) || isInvoiceReportReportUtils(iouReport)) && !Number.isNaN(iouReport.total) && iouReport.total !== undefined) {

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

We can perform unit test with getUpdateMoneyRequestParams with different test cases.

What alternative solutions did you explore? (Optional)

NA

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.

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

@ikevin127

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

This is a BE bug

@daledah

@daledah Thanks for your proposal. From my understanding, you identified the root cause as the BE returning total in two different types (string and number) for the same API call (UpdateMoneyRequestCategory) which does not make sense to me since anytime the category is updated it's the same API we call and we're sending the same data.

I tested this on my side and I reproduced the button flicker right from the initial category update and also for subsequent updates, and the response of UpdateMoneyRequestCategory has the same amount of total instances with both string and number type -> meaning that at least on my side the BE response is consistent between calls ✅

♻ Regarding the solution, given the BE response, the changes make sense and they seem to fix the issue which points to the fact that the current FE logic is the issue, the root cause being either of:

a mistake during initial FE implementation of the logic
a recent change in BE response which invalidated the older FE logic

As for tests, I don't think we need to test the getUpdateMoneyRequestParams function because the issue caused by the faulty check is UI related. Let's go with their proposal if there are no objections 👍

🎀👀🎀 C+ reviewed

@ikevin127

@ikevin127 PR is ready.

Reviewing label has been removed, please complete the "BugZero Checklist".

@ikevin127

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.23-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

fix: handle report total value #59467

If no regressions arise, payment will be issued on 2025-04-14. 🎊

For reference, here are some details about the assignees on this issue:

@ikevin127 requires payment automatic offer (Reviewer)
@daledah requires payment automatic offer (Contributor)

@ikevin127

@ikevin127 @sonialiap @ikevin127 The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: https://github.com/Expensify/App/pull/34092/files#r2040726407.
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue:https://github.com/Expensify/Expensify/issues/490606

Regression Test Proposal

Submit an expense.
Open expense report.
Perform category change several times.
Verify that the Pay button will remain constantly visible while category is changed.

Do we agree 👍 or 👎.

@ikevin127

Payment summary:
@ikevin127 $250 paid in upwork ✔ Thanks for the checklist!
@daledah $250 paid in upwork ✔

Navigation Menu

Repository navigation

[Due for payment 2025-04-14] [$250] Reports - "Pay" button disappears and reappears if editing expense category more than once #59267

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

13 remaining items

BugZero Checklist:

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	} else if ((isExpenseReport(iouReport) \|\| isInvoiceReportReportUtils(iouReport)) && typeof iouReport.total === 'number') {
	// For expense report, the amount is negative, so we should subtract total from diff
	updatedMoneyRequestReport = {
	...iouReport,
	total: iouReport.total - diff,
	};
	if (!transaction?.reimbursable && typeof updatedMoneyRequestReport.nonReimbursableTotal === 'number') {
	updatedMoneyRequestReport.nonReimbursableTotal -= diff;
	}
	if (!isTransactionOnHold) {
	if (typeof updatedMoneyRequestReport.unheldTotal === 'number') {
	updatedMoneyRequestReport.unheldTotal -= diff;
	}
	if (!transaction?.reimbursable && typeof updatedMoneyRequestReport.unheldNonReimbursableTotal === 'number') {
	updatedMoneyRequestReport.unheldNonReimbursableTotal -= diff;
	}
	}

[Due for payment 2025-04-14] [$250] Reports - "Pay" button disappears and reappears if editing expense category more than once #59267

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Mar 28, 2025

daledah commented on Mar 28, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Mar 28, 2025

melvin-bot commented on Mar 28, 2025

FitseTLT commented on Mar 28, 2025

ikevin127 commented on Mar 28, 2025

13 remaining items

daledah commented on Apr 2, 2025

melvin-bot commented on Apr 7, 2025

melvin-bot commented on Apr 7, 2025

melvin-bot commented on Apr 7, 2025

ikevin127 commented on Apr 12, 2025

BugZero Checklist:

Regression Test Proposal

sonialiap commented on Apr 14, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions