[HOLD for payment 2024-12-12] [$250] Invoice - "Approve" button shows up for the invoice receiver under "Pay"

[lanitochka17]

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.63-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Admin: Navigate to https://staging.new.expensify.com/
2. Admin: Log in with a new Gmail account
3. Admin: Create a workspace
4. Admin: Navigate to Workspace settings - More features
5. Admin: Enable "Workflows" and "Invoices"
6. Admin: Navigate to Workspace settings - Workflows
7. Admin: Enable "Add approvals"
8. Admin: Navigate to Workspace settings - Members
9. Admin: Add a new Gmail account as a member
10. Admin: Navigate to the LHN
11. Admin: Navigate to FAB - Send invoice
12. Admin: Send an invoice to the workspace member with any amount, company name and URL
13. Member: Log in
14. Member: Navigate to the invoice room
15. Member: Click on the "Pay" button on the invoice preview
16. Member: Click on "Approve"

Expected Result:

"Approve" button shouldn't be visible

Actual Result:

"Approve" button shows up for the invoice receiver under "Pay". Nothing happens when the button is clicked

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

Bug6667011_1731739775214.bandicam_2024-11-16_07-39-27-787.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861529804786671047
• Upwork Job ID: 1861529804786671047
• Last Price Increase: 2024-11-26

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

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

[NJ-2020]

Proposal

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

Invoice - "Approve" button shows up for the invoice receiver under "Pay"

What is the root cause of that problem?

When the admin send the invoice to the member, the BE returns manager id equal to member account id

so as a member when we check if we should show the approve button, it will return true because the iouReport?.managerID === userAccountID is true

App/src/libs/actions/IOU.ts

Line 6739 in 9774032

const isCurrentUserManager = managerID === userAccountID;

App/src/libs/actions/IOU.ts

Line 6757 in 9774032

return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !isArchivedReport && !isTransactionBeingScanned;

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

• For the iouReport.managerID we should fix this in the BE
• And for the canApproveIOU function, we should not show the approve button if the iouReport is invoice report

const isInvoiceReport = ReportUtils.isInvoiceReport(iouReport);
...
return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !isArchivedReport && !isTransactionBeingScanned && !isInvoiceReport;

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

Approve button shows for invoice report.

What is the root cause of that problem?

This started to happen after #47926. Previously, we check the chat report whether it's a policy expense chat or not. If it's a policy expense chat, then it must be an expense report. But the PR decide to not check the chat report anymore.

The IOU.canApproveIOU method relies on the parent report chat to determine if the report can be approved or not. This is a problem because approvers of expense reports might not necessarily have access to the parent report, or the parent report might not be loaded in local Onyx state, which leads to a bug whereas the approver can't see the approve button.

Luckily we know all the information we need to show the button from the expense report and the policy of the report which the user should have locally.

The issue with that is we assume that the report passed to canApproveIOU is always an expense report. If we see the comment, we only want to show approve if it's an expense report, but we don't check for that.

App/src/libs/actions/IOU.ts

Lines 6726 to 6731 in 9774032

	function canApproveIOU(iouReport: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report>, policy: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Policy>) {
	// Only expense reports can be approved
	const isPaidGroupPolicy = policy && PolicyUtils.isPaidGroupPolicy(policy);
	if (!isPaidGroupPolicy) {
	return false;
	}

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

Check for expense report and return false if it's not an expense report.

if (!ReportUtils.isExpenseReport(iouReport) || !isPaidGroupPolicy) {
    return false;
}

[melvin-bot]

@abekkala Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@abekkala Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@abekkala 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[abekkala]

reviewed this one once more. adding external