[$250] Reports - Responsive "Pay" button displayed on preview for unsubmitted expenses.

[mitarachim]

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.1.38-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome / Windows 10 - Chrome
App Component: Money Requests

Action Performed:

Prerequisite: Delayed submissions enabled.
Prerequisite 2: Workspace should have an expense that has been already paid elsewhere before submitting the two new expenses.

1. Open the staging.new.expensify.com website.
2. Open any workspace chat.
3. Submit two different manual expenses.
4. Note that a "Submit" button is displayed on expenses preview.
5. Navigate to "Reports"
6. Tap on bookmark icon.
7. Tap on "Expense Reports"
8. Note that a "Pay" button is displayed on the just submitted expenses preview instead of "Submit"
   9, Tap on "Pay"
9. Note that the "Pay" button is responsive, despite the expenses not being marked as paid.

Expected Result:

Expenses preview on "Reports" should display the word "Submit" for unsubmitted expenses.

Actual Result:

"Pay" button is displayed on preview for unsubmitted expenses on "Expense Reports" section. The button is also responsive, despite the expenses not being marked as paid after tapping on it.

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

Bug6817278_1745991719627.Responsive.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021917606620410984181
• Upwork Job ID: 1917606620410984181
• Last Price Increase: 2025-05-14
• Automatic offers:
• FitseTLT | Contributor | 107319823

Issue Owner

Current Issue Owner: @ZhenjaHorbach

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Nick4dawin]

Proposal

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

On the "Reports" page, a responsive "Pay" button is being incorrectly displayed in the preview for unsubmitted expenses when it should be showing a "Submit" button instead. The "Pay" button is also responsive despite the expenses not being marked as paid.

What is the root cause of that problem?

The root cause is in the canPay function in the ReportPreviewActionUtils.ts file. This function determines when to show the "Pay" button on report previews. Currently, it's returning true for expense reports that are considered "finished" (approved or closed) but it's not explicitly checking if the report is in the "OPEN" state (unsubmitted). This causes the "Pay" button to appear on unsubmitted expenses in the Reports section.

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

We need to modify the canPay function in ReportPreviewActionUtils.ts to properly check the report state before showing the "Pay" button. The changes should:

1. Add a check to determine if the report is in the OPEN state:

const isOpen = isOpenReport(report);

2. Modify the condition that determines when to show the "Pay" button to include !isOpen:

if (isExpense && isReportPayer && isPaymentsEnabled && !isOpen && isReportFinished && !hasAnyViolations && reimbursableSpend > 0) {
    return true;
}

Details

The issue occurs when delayed submissions are enabled and a workspace has an expense that has been already paid elsewhere before submitting two new expenses. The "Pay" button appears on the unsubmitted expenses in the Reports section instead of the "Submit" button.

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

We should add tests that cover:

1. Verify that unsubmitted expense reports (in OPEN state) show the "Submit" button and not the "Pay" button
2. Verify that submitted expense reports that are approved (or don't require approval) show the "Pay" button
3. Verify that the correct button is shown when viewing expense reports from different sections of the app (Chats vs Reports)
4. Verify that the correct button state is maintained when delayed submissions are enabled

What alternative solutions did you explore? (Optional)

1. We could have added a specific check in the ReportPreview component to override the button type based on the report state, but this would be treating the symptom rather than the root cause.

2. Another approach could be to modify how the reports are queried or displayed in the Reports section, but this would be more complex and potentially introduce other issues.

[melvin-bot]

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

[sakluger]

I will be OOO from May 5 - 16, so I have added another BZ member to watch over the issue while I'm out.

Next steps: We just received our first proposal today, so the next step is for @ZhenjaHorbach to review.

[ZhenjaHorbach]

I will check the proposal tomorrow !

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@ZhenjaHorbach Whoops! This issue is 2 days overdue. Let's get this updated quick!

[ZhenjaHorbach]

Not overdue
I will check today or tomorrow !

[melvin-bot]

@sakluger @strepanier03 @ZhenjaHorbach this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[trjExpensify]

@ZhenjaHorbach this is pretty bad. Can you review that proposal today, please?

[ZhenjaHorbach]

@ZhenjaHorbach this is pretty bad. Can you review that proposal today, please?

Yes
Sorry
I will do it today !

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[ZhenjaHorbach]

@Nick4dawin
Thanks for your proposal
But have you tested your proposal?
I'm not sure this is a correct fix to the issue
Since these changes are not related with Reports screen list items

[trjExpensify]

@Nick4dawin can you revert back to @ZhenjaHorbach here?

[LorenzoBloedow]

@trjExpensify When I try to repro, instead of the pay button disappearing, it opens a new screen. Just to confirm, the fact the pay button is there at all is the issue, right?

Since this was opened 2 weeks ago, I'm guessing something changed and now it opens a new screen instead of paying in one click.

Screen.Recording.2025-05-15.at.10.18.34.AM.mov

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-15 13:32:15 UTC.

Proposal

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

Reports - Responsive "Pay" button displayed on preview for unsubmitted expenses.

What is the root cause of that problem?

We return pay action if canIOUBePaid here

App/src/libs/SearchUIUtils.ts

Lines 422 to 423 in 731370b

	if (canIOUBePaid(report, chatReport, policy, allReportTransactions, false, chatReportRNVP, invoiceReceiverPolicy) && !hasOnlyHeldExpenses(report.reportID, allReportTransactions)) {
	return CONST.SEARCH.ACTION_TYPES.PAY;

canIOUBePaid should not return true for open expense report

App/src/libs/actions/IOU.ts

Line 8896 in 731370b

!isOpenExpenseReport &&

but the problem is we only assume isOpenExpeseReport if the chatReport passed is policy expense chat

App/src/libs/actions/IOU.ts

Line 8887 in 731370b

const isOpenExpenseReport = isPolicyExpenseChat && isOpenExpenseReportReportUtils(iouReport);

So when sometimes the data from search lack chatReport (in my case it is empty object) isPolicyExpenseChat will become false

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

We should not add isPolicyExpenseChat in the condition the fact that the iouReport is expense report by itself will indirectly assert that the chat report is policy expense chat

    const isOpenExpenseReport = isOpenExpenseReportReportUtils(iouReport);

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

We can add a test for canIOUBePaid to assert that it doesn't return true for open expense report by passing inappropriate chatReport param like empty object.

What alternative solutions did you explore? (Optional)

[trjExpensify]

Just to confirm, the fact the pay button is there at all is the issue, right?

Yeah, it should be a Submit button not a Pay button as it's a draft open report.

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖