[$250] For one expense reports on the Search page: Show a View button when the only expense is a scanning receipt and pending Expensify Card transaction

[JmillsExpensify]

Problem

We currently show an Approve button on the Reports page when the following are true:

• There is only one expense on the report
• That one expense is either a pending Expensify Card transaction, or a scanning receipt

This is confusing, because approving the report will do nothing, as neither scanning receipts or pending transactions can be approved (their expense data is not final).

Solution

Rather than show/promote actions on the Reports page that do nothing, let's instead promote the ability to View a one-expense report that only has a scanning receipt or pending card transactions. Because after all, that's all you can do, view the one-expense report. To do so, we will:

• Show a View button on the report row on the Reports page for these one-expense reports
• Ensure that no Approve button shows in the report header, when opened (Note: This should already be the case, though let's discuss in this issue)

And that's it.

For the sake of clarity, this issue applies to both one expense reports with either a scanning receipt or a pending Expensify Card transactions, and any expense reports where every expenses is a scanning receipt or pending Expensify Card transaction. If a scanning receipt or a pending ECard transaction is on a multi-expense report, then it's possible to approve said report, so that case is out of scope and doesn't apply to this issue.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021877348968624827220
• Upwork Job ID: 1877348968624827220
• Last Price Increase: 2025-01-09
• Automatic offers:
• shubham1206agra | Contributor | 105640956
• nkdengineer | Contributor | 105711515

Issue Owner

Current Issue Owner: @nkdengineer

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the Bug assigner, not assigning anyone new.

[Shahidullah-Muffakir]

Edited by proposal-police: This proposal was edited at 2025-01-09 11:52:04 UTC.

Proposal

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

For one expense reports on the Search page: Show a View button when the only expense is a scanning receipt and pending Expensify Card transaction

What is the root cause of that problem?

We already have the case for pending Expensify Card transactions, but we did not consider the case for reports with only scanning receipt transactions.

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

1. Here, add one more condition for scanning receipt:
   

   App/src/libs/SearchUIUtils.ts

   Lines 312 to 314 in 6ce82c8

   	if (IOU.canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) {
   	return CONST.SEARCH.ACTION_TYPES.APPROVE;
   	}

   
   as:

    const hasOnlyOneScanTransaction = allReportTransactions.length === 1 && !!TransactionUtils.hasReceipt(allReportTransactions.at(0))

and then use it as:

  if (IOU.canApproveIOU(report, policy) && !hasOnlyOneScanTransaction&& isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) 

2. Add the same check here in MoneyReportHeader
   

   App/src/components/MoneyReportHeader.tsx

   Line 139 in 6ce82c8

   const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy) && !hasOnlyPendingTransactions, [moneyRequestReport, policy, hasOnlyPendingTransactions]);

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[azr-arch]

Proposal

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

Show a View button for one-expense reports with either a scanning receipt or a pending Expensify Card transaction. The current implementation handles pending transactions but not scanning receipts, causing confusion as the Approve button is shown unnecessarily.

What is the root cause of that problem?

The logic prevents the Approve button for pending transactions but doesn't account for scanning receipts. This oversight leads to the Approve button appearing incorrectly, creating a poor user experience.

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

1. Add a condition to handle reports with only scanning receipt transactions. Update the logic in the following location:
   

   App/src/libs/SearchUIUtils.ts

   Lines 312 to 314 in 6ce82c8

   	if (IOU.canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) {
   	return CONST.SEARCH.ACTION_TYPES.APPROVE;
   	}

   
   Add a new variable to check for one scanning receipt transaction:

const hasOnlyOneScanTransaction = allReportTransactions.length === 1 && !!TransactionUtils.hasReceipt(allReportTransactions.at(0));

Then modify the condition as follows:

if (IOU.canApproveIOU(report, policy) && !hasOnlyOneScanTransaction && isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) {
    return CONST.SEARCH.ACTION_TYPES.APPROVE;
}

This ensures that reports with a single scanning receipt will not show the **Approve** button.  

2. Update the corresponding logic in MoneyReportHeader to maintain consistency in how the Approve button is determined. Specifically, modify the condition in this file:
   

   App/src/components/MoneyReportHeader.tsx

   Line 139 in 6ce82c8

   const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy) && !hasOnlyPendingTransactions, [moneyRequestReport, policy, hasOnlyPendingTransactions]);

   
   Add a similar check to exclude reports with only scanning receipts:

const hasOnlyOneScanTransaction = allTransactions.length === 1 && !!TransactionUtils.hasReceipt(allTransactions.at(0));
const shouldShowApproveButton = useMemo(() => IOU.canApproveIOU(moneyRequestReport, policy) && !hasOnlyOneScanTransaction && !hasOnlyPendingTransactions, [moneyRequestReport, policy, hasOnlyOneScanTransaction, hasOnlyPendingTransactions]);

This will ensure that the **Approve** button is also hidden in the report header for these cases.  

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-10 11:07:17 UTC.

Edited by proposal-police: This proposal was edited at 2025-01-10 11:07:17 UTC.

Proposal

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

For one expense reports on the Search page: Show a View button when the only expense is a scanning receipt and pending Expensify Card transaction

What is the root cause of that problem?

We're showing the approve button if we can approve and we don't have only pending card transactions.

App/src/libs/SearchUIUtils.ts

Lines 312 to 314 in 6ce82c8

	if (IOU.canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) {
	return CONST.SEARCH.ACTION_TYPES.APPROVE;
	}

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

For scanning requests, we already check this in canApproveIOU to not show the approve button. The problem here is when the scan is complete and it fails this function will return true and then still can approve.

App/src/libs/actions/IOU.ts

Lines 7324 to 7336 in 219e66d

	if (hasReceipt && isReceiptBeingScanned) {
	isTransactionBeingScanned = true;
	}
	}
	return isCurrentUserManager && !isOpenExpenseReport && !isApproved && !iouSettled && !isArchivedReport && !isTransactionBeingScanned;
	}
	function canIOUBePaid(
	iouReport: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report> | SearchReport,
	chatReport: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Report> | SearchReport,
	policy: OnyxTypes.OnyxInputOrEntry<OnyxTypes.Policy> | SearchPolicy,
	transactions?: OnyxTypes.Transaction[] | SearchTransaction[],

1. We should update canApproveIOU function to return false if the report is one expense report and the only transaction is a pending card transaction/ scan fail request. So when we open the report, no approve button is displayed in the header.

const hasOnlyPendingCardOrScanFailTransactions = reportTransactions.every(
    (t) => (isExpensifyCardTransaction(t) && isPending(t)) || (isPartialMerchant(getMerchant(t)) && isAmountMissing(t)),
);
if (hasOnlyPendingCardOrScanFailTransactions) {
    return false;
}

2. Since we use the transaction data in the snapshot, so we need to do the same check at point 1 here

const hasOnlyPendingCardOrScanFailTransactions = allReportTransactions.length > 0 && allReportTransactions.every(
    (t) => (isExpensifyCardTransaction(t) && isPending(t)) || (isPartialMerchant(getMerchant(t)) && isAmountMissing(t)),
);

const isAllowedToApproveExpenseReport = ReportUtils.isAllowedToApproveExpenseReport(report, undefined, policy);
if (IOU.canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && hasOnlyPendingCardOrScanFailTransactions) {
    return CONST.SEARCH.ACTION_TYPES.APPROVE;
}

App/src/libs/SearchUIUtils.ts

Lines 312 to 314 in 6ce82c8

	if (IOU.canApproveIOU(report, policy) && isAllowedToApproveExpenseReport && !hasOnlyPendingTransactions) {
	return CONST.SEARCH.ACTION_TYPES.APPROVE;
	}

OPTIONAL: We can remove !t?.amount when checking the scan fail request because after we change the amount, the scan state is also changed.

Any refactor can be discussed more while reviewing proposal/PR.

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

We can add a test case for canApproveIOU function and verify that it returns false if all transactions is pending card transaction/scan fail request.

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

📣 @shubham1206agra 🎉 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 📖

[shubham1206agra]

Thanks everyone for the proposals.

@Shahidullah-Muffakir Sorry, but your proposal is incorrect.

@azr-arch Your proposal is also wrong.

[shubham1206agra]

@nkdengineer Your RCA looks correct, but I have some questions regarding your solution

1. Why is there a check for isOneExpenseReport? Wouldn't every function covers for this case too?
2. What will happen if the report combines pending card transactions and failed scan request? (PS: I am not sure if this is at all possible)

Question for @JmillsExpensify
The expected result contains the following:

If a scanning receipt or a pending ECard transaction is on a multi-expense report, then it's possible to approve said report, so that case is out of scope and doesn't apply to this issue.

But I see if the transaction has scanning receipt, it will not show Approve button. Can you double check the behavior in this case?

[Shahidullah-Muffakir]

@shubham1206agra, Could you please clarify what exactly is incorrect in my proposal? Thanks.

[nkdengineer]

Why is there a check for isOneExpenseReport? Wouldn't every function covers for this case too?

@shubham1206agra You're right, we can remove this condition.

What will happen if the report combines pending card transactions and failed scan request? (PS: I am not sure if this is at all possible)

@JmillsExpensify Is this a possible case?

[JmillsExpensify]

Catching up ya'll. Sorry for the delay.

The expected result contains the following:

If a scanning receipt or a pending ECard transaction is on a multi-expense report, then it's possible to approve said report, so that case is out of scope and doesn't apply to this issue.

But I see if the transaction has scanning receipt, it will not show Approve button. Can you double check the behavior in this case?

I think this was a misunderstanding. I'm saying that if the only expense on the report is a scanning receipt or pending card transaction – btw, the same is true if all expenses on the report are either scanning/pending, then we wouldn't show the Approve button.

However, if an report contains 5 expenses, one of which is scanning/pending, we would and should show the Approve button. Does that make sense?

[JmillsExpensify]

What will happen if the report combines pending card transactions and failed scan request? (PS: I am not sure if this is at all possible)

This is possible, though it's functionally the same as what I noted above. It's a report with only scanning/pending expenses. In that case, we'd show View on the reports page, and no Approve button in the report header.

[shubham1206agra]

What will happen if the report combines pending card transactions and failed scan request? (PS: I am not sure if this is at all possible)

This is possible, though it's functionally the same as what I noted above. It's a report with only scanning/pending expenses. In that case, we'd show View on the reports page, and no Approve button in the report header.

@JmillsExpensify I mean to say that if the report contains mixture of partial transaction and pending card transaction, will the user be able to approve the expense report?

[JmillsExpensify]

• If all the expenses on the report are either a partial transaction or pending card, then no approve button should show
• If there is a mixture of normal expenses, partial transaction, or pending card, then an approve button should show

[nkdengineer]

Maybe check for partial transaction like in

@shubham1206agra What do you mean?

[shubham1206agra]

Maybe check for partial transaction like in

@shubham1206agra What do you mean?

@nkdengineer Partial transaction is a better check than failed scan receipts.

[nkdengineer]

@shubham1206agra Updated proposal

[shubham1206agra]

@nkdengineer's proposal looks good to me

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[luacmartins]

Agree that proposal looks good. Let's add the test case for canApproveIOU too

[melvin-bot]

📣 @nkdengineer 🎉 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 📖

[nkdengineer]

@shubham1206agra The PR is ready for review.

[melvin-bot]

This issue has not been updated in over 15 days. @JmillsExpensify, @luacmartins, @shubham1206agra, @nkdengineer eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[luacmartins]

PR is in review

[luacmartins]

@nkdengineer @shubham1206agra it seems like QA can still see an approve option for scanfailed transactions - #56824. Let's take a look into it.

[nkdengineer]

Will take a look today

[nkdengineer]

@luacmartins I followed the step in #56824 but it works for me.

[nkdengineer]

@shubham1206agra Can you reproduce #56824?

[luacmartins]

I'm also unable to reproduce. I'll ask QA to try again

[luacmartins]

I don't see the approve button, but I do see a wrong message as the admin though (notice Waiting for you to approve(s)

[luacmartins]

@nkdengineer left a comment here, but I think the issue is that the submitted receipt is only missing the amount after the scan fails. Let's investigate this further.