[$250] Workspace - No Approve button for policy admin after expense submit

[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.12-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A

Issue found when executing PR #45867

Action Performed:

Preconditions: user has Control policy. Owner is an approver. Workspace is connected to QBO.

1. Go to workspace chat
2. Click '+' > Submit expense.
3. Click on expense preview
4. Click Submit

Expected Result:

There is an Approve button appears in expense report after Submit

Actual Result:

No Approve button appears in expense report

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

Add any screenshot/video evidence

Bug6552949_1721931572723.Approve_hidden.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016dcbec225a5081d4
• Upwork Job ID: 1816601615703698448
• Last Price Increase: 2024-08-08
• Automatic offers:
• eh2077 | Reviewer | 103440897

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

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

[lanitochka17]

@lschurr FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

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

[melvin-bot]

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

[NJ-2020]

Proposal

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

No Approve button for policy admin after expense submit

What is the root cause of that problem?

Right here:

App/src/components/MoneyReportHeader.tsx

Line 124 in 4727f72

const shouldShowSettlementButton = (shouldShowPayButton || shouldShowApproveButton) && !allHavePendingRTERViolation && !shouldShowExportIntegrationButton;

We'll only show the approve button if we do not have an export integration button (which also means we're not connected to any integration)

So the shouldShowSettlementButton returns false and does not show the approve button

App/src/components/MoneyReportHeader.tsx

Line 264 in 4727f72

{shouldShowSettlementButton && !shouldUseNarrowLayout && (

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

We can delete this code !shouldShowExportIntegrationButton which will show the approve button if we also have an export integration button.

What alternative solutions did you explore? (Optional)

[daledah]

Proposal

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

No Approve button appears in expense report

What is the root cause of that problem?

This is the logic for the correct states of the expense report which can be exported

App/src/libs/ReportUtils.ts

Line 7269 in 5e65276

const isCorrectState = [CONST.REPORT.STATUS_NUM.APPROVED, CONST.REPORT.STATUS_NUM.CLOSED, CONST.REPORT.STATUS_NUM.REIMBURSED].some((status) => status === report.statusNum);

As it shows, only reports that are approved/reimbursed or closed can be exported.

However, the code for shouldShowExportIntegrationButton in

App/src/components/ReportActionItem/ReportPreview.tsx

Line 344 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

and

App/src/components/MoneyReportHeader.tsx

Line 122 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

Are not checking that condition.

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

Update

App/src/components/MoneyReportHeader.tsx

Line 122 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

to

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(moneyRequestReport);

Likewise for

App/src/components/ReportActionItem/ReportPreview.tsx

Line 344 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

!shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin && ReportUtils.canBeExported(iouReport)

The !shouldShowPayButton && !shouldShowSubmitButton can potentially be removed because they should already be covered in ReportUtils.canBeExported(iouReport)

What alternative solutions did you explore? (Optional)

In both locations

App/src/components/ReportActionItem/ReportPreview.tsx

Line 344 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

and

App/src/components/MoneyReportHeader.tsx

Line 122 in 5e65276

const shouldShowExportIntegrationButton = !shouldShowPayButton && !shouldShowSubmitButton && connectedIntegration && isAdmin;

Add !shouldShowApproveButton so if approve button will show, the export button will not show. However there could be cases that export button is shown but disabled as the report still doesn't meet the condition in

App/src/libs/ReportUtils.ts

Line 7265 in 5e65276

function canBeExported(report: OnyxEntry<Report>) {

. This could be confusing to the user so it's best to add a tooltip like The IOU report can only be exported after it's approved, reimbursed or closed to the disabled export button to clarify to the user why it's disabled.

[eh2077]

Reviewing proposals. This issue is subtle and I'll need more time to understand it.