[HOLD for payment 2024-03-14] [HOLD for payment #36814] [$500] [Collect approvers] `Pay` button appears for the approved report

[kavimuru]

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:
Reproducible in staging?: needs reproduction
Reproducible in production?: needs reproduction
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: @JmillsExpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705978407170839

Action Performed:

1. submit a expense report to approver
2. Approve the expense report

Expected Result:

"pay" button should disappear

Actual Result:

"pay" button still appears

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01649969eb5b52cb20
• Upwork Job ID: 1750230674366476288
• Last Price Increase: 2024-01-24

[melvin-bot]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

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

[melvin-bot]

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

[JmillsExpensify]

Still seeing this daily

[bernhardoj]

Proposal

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

Pay option is still appears after approving the expense.

What is the root cause of that problem?

It's simply because we don't hide the pay button when the expense is approved.

App/src/components/MoneyReportHeader.tsx

Lines 68 to 71 in 0d0b0a8

	const shouldShowPayButton = useMemo(
	() => isPayer && !isDraft && !isSettled && !moneyRequestReport.isWaitingOnBankAccount && reimbursableTotal !== 0 && !ReportUtils.isArchivedRoom(chatReport) && !isAutoReimbursable,
	[isPayer, isDraft, isSettled, moneyRequestReport, reimbursableTotal, chatReport, isAutoReimbursable],
	);

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

Hide the button when the expense is approved by adding !isApproved condition to shouldShowPayButton.

(we need to do this in ReportPreview too)

but how will the expense get paid if the pay button is hidden and it's not automatically reimbursed?

[marcochavezf]

It is partially a duplicate of #34951 where the Pay button should be hidden when auto-reimbursement is enabled, but we'd also need to check if the user is a Reimburser (not just an admin). Assigning myself to take it over.