[LOW] [Splits] IOU - IOU becomes paid while receipt is scanning

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 1.4.21-1
Reproducible in staging?: Y
Reproducible in production?: Y
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Send an IOU from Account A to Account B
2. Open Account B and send a receipt IOU
3. While the IOU is scanning click on pay elsewhere
4. Click on the preview component to open the IOU conversation and observe the IOU while receipt is being scanned

Expected Result:

Receipt IOU should not be marked as paid

Actual Result:

The receipt IOU is marked as paid before the receipt is done scanning and before account B marks it as paid

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6332407_1704391663502.receiptscanpaid.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a008da44d804c493
• Upwork Job ID: 1742972707793920000
• Last Price Increase: 2024-01-25

Issue Owner

Current Issue Owner: @youssef-lr

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[abzokhattab]

Proposal

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

Currently, if you click the "pay" button while a receipt is still scanning, the receipt gets incorrectly marked as paid even though the scan is not finished.

What is the root cause of that problem?

The problem occurs because we don't exclude receipts/reports that are still scanning when you press the "pay" button.

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

We have two options to solve this:

1. Modify the code to hide the pay button while a receipt is being scanned. We need to add a condition && !isScanning to the relevant code sections. This change will prevent the pay button from appearing if a receipt is still scanning.

   const shouldShowPayButton = useMemo(
        () => isPayer && !isDraftExpenseReport && !iouSettled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0 && !iouCanceled && !isScanning,
        [isPayer, isDraftExpenseReport, iouSettled, props.iouReport.isWaitingOnBankAccount, reimbursableSpend, iouCanceled, isScanning],
    );

App/src/components/ReportActionItem/ReportPreview.js

Lines 252 to 255 in 111debc

	() => isPayer && !isDraftExpenseReport && !iouSettled && !props.iouReport.isWaitingOnBankAccount && reimbursableSpend !== 0 && !iouCanceled,
	[isPayer, isDraftExpenseReport, iouSettled, reimbursableSpend, iouCanceled, props.iouReport],
	);
	const shouldShowApproveButton = useMemo(() => {

and here as well

App/src/components/MoneyReportHeader.js

Lines 97 to 100 in 111debc

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

2. OR keep the pay button visible, but modify the backend to not mark scanning receipts as paid. For this, we need to introduce a new parameter excludedReportIDs. This will be an array containing the IDs of receipts that are still scanning. However, this requires creating a new parameter that currently doesn't exist, meaning collaboration with the backend team is needed. then should be used in the getPayMoneyRequest function

App/src/libs/actions/IOU.js

Line 3309 in 901df70

function payMoneyRequest(paymentType, chatReport, iouReport) {

[Tony-MK]

Proposal

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

IOU becomes paid while the receipt is scanning.

What is the root cause of that problem?

The ReportPreview, MoneyReportView, MoneyRequestPreview and MoneyRequestView components all use the ReportUtils.isSettled function to determine the value of isSettled or iouSettled in ReportPreview.

For IOUs paid elsewhere, ReportUtils.isSettled only checks if report.statusNum === CONST.REPORT.STATUS.REIMBURSED, even if a receipt of a transaction is being scanned.

Therefore, the root cause of the problem is that we solely, use isSettled or iouSettled to determine whether to show if the IOU is paid or not.

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

We need to add a condition in all of the respective components to check if a transaction has a receipt that is being scanned. The condition varies from component to component. With this condition, we can properly display the paid checkmark icons when a receipt is being scanned.

1. ReportPreview

For ReportPreview, iouSettled is used in many places, hence we should only change the applicable places to avoid regressions.

i) Checkmark Icon

App/src/components/ReportActionItem/ReportPreview.js

Line 298 in 744e35c

{ReportUtils.isSettled(props.iouReportID) && (

{ReportUtils.isSettled(props.iouReportID) && !numberOfScanningReceipts && (

ii) 'Paid' Text

Unsure if this should be changed, and if so how because I don't think it is expected to look like below.

If we a changing the text, should the text in the MoneyRequestHeader and MoneyReportHeader components be changed as well?

App/src/components/ReportActionItem/ReportPreview.js

Line 213 in 744e35c

if (iouSettled || props.iouReport.isWaitingOnBankAccount) {

if (iouSettled && !numberOfScanningReceipts || props.iouReport.isWaitingOnBankAccount) {

2. MoneyRequestView
   

   App/src/components/ReportActionItem/MoneyRequestView.js

   Line 153 in 744e35c

   const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);

const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID) && (!TransactionUtils.hasReceipt(transaction) || !TransactionUtils.isReceiptBeingScanned(transaction));

3. MoneyRequestPreview
   

   App/src/components/ReportActionItem/MoneyRequestPreview.js

   Line 163 in 744e35c

   const isSettled = ReportUtils.isSettled(props.iouReport.reportID);

const isSettled = ReportUtils.isSettled(props.iouReport.reportID) && !isScanning;

4. MoneyReportView (Unsure if we should apply this condition to the checkmark)

https://github.com/Expensify/App/blob/744e35c85157ecef9cdfab81a0ab56891dc507f9/src/components/ReportActionItem/MoneyReportView.js#L33

const isSettled = ReportUtils.isSettled(report.reportID) && !ReportUtils.getTransactionsWithReceipts(report.iouReportID).some((transaction) => TransactionUtils.isReceiptBeingScanned(transaction));

Optional for Granularity

These suggestions are to reduce the chances that the introduced condition will create a regression.

1. Use of TransactionUtils.isAmountMissing(transaction) in the condition so isSettled is true when the amount is manually entered later.

2. We can find the reportAction which has originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.PAY && originalMessage.paymentType === CONST.IOU.PAYMENT_TYPE.ELSEWHERE in the condition to apply the created condition for determining isSettled only when the IOU is paid elsewhere and not with other methods.

What alternative solutions did you explore? (Optional)

This simple solution will handle all places in which the bug applies but is risky.

We could change the ReportUtils.isSettled function but I am afraid it may break other functions and components that depend on ReportUtils.isSettled .

However, if you don't mind we can add an extra condition like previously mentioned to the ReportUtils.isSettled function.

[melvin-bot]

@garrettmknight, @Ollyws Whoops! This issue is 2 days overdue. Let's get this updated quick!

[garrettmknight]

@Ollyws can you please review the proposals so far?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Ollyws]

Thanks for the proposals but it seems both may be unclear about the issue.
The problem is not that the pay button is being displayed, it should be displayed as there are other requests and as far as I can see it is not shown if there is only a reciept being scanned.
The problem is that selecting pay elsewhere marks everything as paid including the reciept (which is in the process of scanning).

[Tony-MK]

Thank you, @Ollyws, for reviewing my proposal, and I apologize for failing to grasp the expected result.

I have updated my proposal based on your comments at #33972 (comment).

However, there are some questions which I would appreciate if you answer.

Thank you.

[abzokhattab]

Thanks @Ollyws added a second solution to avoid marking scanning receipts as paid.

[Ollyws]

Will review asap.

[garrettmknight]

@Ollyws can you review the updates when you get a chance?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@garrettmknight, @youssef-lr, @Ollyws Whoops! This issue is 2 days overdue. Let's get this updated quick!

[youssef-lr]

No update yet, still planning to get to this.

[melvin-bot]

@garrettmknight, @youssef-lr, @Ollyws Huh... This is 4 days overdue. Who can take care of this?

[youssef-lr]

I'll have time for this next week.

[melvin-bot]

@garrettmknight, @youssef-lr, @Ollyws Huh... This is 4 days overdue. Who can take care of this?

[youssef-lr]

No update yet, I'm focusing on fixing a few bugs for split affecting quality

[melvin-bot]

@garrettmknight, @youssef-lr, @Ollyws Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@garrettmknight, @youssef-lr, @Ollyws Still overdue 6 days?! Let's take care of this!

[youssef-lr]

No update yet

[youssef-lr]

Same

[youssef-lr]

I think this should be fixed since we started moving scanning expenses to new reports when a report is paid. Going to try reproducing this week or the next one.

[youssef-lr]

This is fixed.