[C+ Checklist Needs Completion] [$500] IOU - Approve button appears while approvals is disabled

[izarutskaya]

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: 1.4.57-2
Reproducible in staging?: Y
Reproducible in production?: Y
Found when executing PR : #38253
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Pre-requisites:
Have a collect WS and make chat enabled on ND
Have 2 accounts (one admin, one employee)
Having `Make or track payments enabled
Toggle on delay submissions on ND (Logged in as the admin)
Toggle off Add approvals
On OD Make reimbursement direct with a VBBA

1. [Employee] Request money from the workspace chat and submit it
2. [Admin] Click on the IOU preview and observe the header

Expected Result:

"Pay with expensify" button should show up since this is the case where Delay submissions is enabled and approvals is disabled

Actual Result:

"Approve" button appears on the header

Workaround:

Unknown

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

Bug6429854_1711614962501.Screen_Recording_20240328_112744_Chrome.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014fc34bb4b2bfbb10
• Upwork Job ID: 1773511332097155072
• Last Price Increase: 2024-03-29
• Automatic offers:
• DylanDylann | Reviewer | 103218707

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[izarutskaya]

We think this issue might be related to the #collect project.

[allgandalf]

Proposal

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

Approve button appears even when approvals are not required

What is the root cause of that problem?

In canApproveIOU we do not check if the approvalMode and autoReportingFrequency are optional:

App/src/libs/actions/IOU.ts

Line 4500 in 4fbd218

function canApproveIOU(iouReport: OnyxEntry<OnyxTypes.Report> | EmptyObject, chatReport: OnyxEntry<OnyxTypes.Report> | EmptyObject, policy: OnyxEntry<OnyxTypes.Policy> | EmptyObject) {

App/src/libs/actions/IOU.ts

Lines 4523 to 4524 in 4fbd218

	return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled;
	}

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

Add a check in canApproveIOU to check if the approval mode and delay submittion are Optional and if it is then return the value:

diff --git a/src/libs/actions/IOU.ts b/src/libs/actions/IOU.ts
index b67e44fcf5..c361ed3e5e 100644
--- a/src/libs/actions/IOU.ts
+++ b/src/libs/actions/IOU.ts
@@ -4519,8 +4519,10 @@ function canApproveIOU(iouReport: OnyxEntry<OnyxTypes.Report> | EmptyObject, cha
     const isOpenExpenseReport = isPolicyExpenseChat && ReportUtils.isOpenExpenseReport(iouReport);
     const isApproved = ReportUtils.isReportApproved(iouReport);
     const iouSettled = ReportUtils.isSettled(iouReport?.reportID);
+    const isApprovalOptional = policy?.approvalMode === CONST.POLICY.APPROVAL_MODE.OPTIONAL;
+    const canDelaySubmissions = policy?.autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCY.IMMEDIATE &&  policy?.autoReportingFrequency !== CONST.POLICY.AUTO_REPORTING_FREQUENCY.INSTANT;
 
-    return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled;
+    return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !(isApprovalOptional && canDelaySubmissions);
 }

What alternative solutions did you explore? (Optional)

N/A

[bernhardoj]

Proposal

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

The approve button is still displayed even though the add approvals option is disabled.

What is the root cause of that problem?

We already have a condition here to not show the approve button if the approval is disabled (isOnSubmitAndClosePolicy).

App/src/libs/actions/IOU.ts

Lines 4509 to 4513 in 4fbd218

	const isOnInstantSubmitPolicy = PolicyUtils.isInstantSubmitEnabled(policy);
	const isOnSubmitAndClosePolicy = PolicyUtils.isSubmitAndClose(policy);
	if (isOnInstantSubmitPolicy && isOnSubmitAndClosePolicy) {
	return false;
	}

However, the auto-reporting frequency needs to be instant (isOnInstantSubmitPolicy) to not show the approval button. In our case, the frequency is set to WEEKLY, so the condition is never met.

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

Change the condition to accept either isOnInstantSubmitPolicy or isOnSubmitAndClosePolicy.

if (isOnInstantSubmitPolicy || isOnSubmitAndClosePolicy) {

Or we can remove isOnInstantSubmitPolicy

[melvin-bot]

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

[melvin-bot]

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