[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 contributors@expensify.com 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?

• [x] Android: Native
• [x] Android: mWeb Chrome
• [x] iOS: Native
• [x] iOS: mWeb Safari
• [x] Windows: Chrome
• [x] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/e56b724f-66d9-413d-894a-58ea09fc7739

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[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[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],
    );

https://github.com/Expensify/App/blob/111debc5f61c574aae8f241e60301097d93cef8d/src/components/ReportActionItem/ReportPreview.js#L252-L255

and here as well

https://github.com/Expensify/App/blob/111debc5f61c574aae8f241e60301097d93cef8d/src/components/MoneyReportHeader.js#L97-L100

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

https://github.com/Expensify/App/blob/901df70807f5e3761f3d3a51de1266f9c791a0bd/src/libs/actions/IOU.js#L3309

[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

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

 {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? https://github.com/Expensify/App/blob/744e35c85157ecef9cdfab81a0ab56891dc507f9/src/components/ReportActionItem/ReportPreview.js#L213

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

2) MoneyRequestView https://github.com/Expensify/App/blob/744e35c85157ecef9cdfab81a0ab56891dc507f9/src/components/ReportActionItem/MoneyRequestView.js#L153

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

3) MoneyRequestPreview https://github.com/Expensify/App/blob/744e35c85157ecef9cdfab81a0ab56891dc507f9/src/components/ReportActionItem/MoneyRequestPreview.js#L163

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[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[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 https://github.com/Expensify/App/issues/33972#issuecomment-1887569945.

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[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[bot]]

@garrettmknight @Ollyws this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[Ollyws]

@Tony-MK's proposal seems like it's going in the right direction assuming this is entirely a front-end fix. I will have to have a deeper look at exactly what's going on here...

[Ollyws]

Will have a deeper look into this one tomorrow.

[Ollyws]

@Tony-MK Thanks for the proposal but there is also the fact that the reciept scan is rendered un-editable when the report is settled, this isn't entirely reliant on the 'isSettled' condition.

[Tony-MK]

Thanks for the heads up, @Ollyws.

Then, I think using !TransactionUtils.isReceiptBeingScanned(transaction) in the canEditFieldOfMoneyRequest and canEditMoneyRequest functions should be enough to render the report as editable.

What do you think? 🤔

[melvin-bot[bot]]

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

[Ollyws]

Couldn't get to this today but should have an answer after the weekend.

[Ollyws]

Will get to this one tomorrow.

[Ollyws]

It seems that if we enable editing for a settled request that is currently being scanned and try to change the amount, the backend will return a This request cannot be edited error suggesting that this issue will require some work on the backend so it should really be internal.

[melvin-bot[bot]]

@garrettmknight @Ollyws this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

Current assignee @Ollyws is eligible for the Internal assigner, not assigning anyone new.

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Current assignee @Ollyws is eligible for the Internal assigner, not assigning anyone new.

[garrettmknight]

Checking with VIP split to see if this fits there: https://expensify.slack.com/archives/C05RECHFBEW/p1707162631162859

[garrettmknight]

Bumped VIP again

[garrettmknight]

Shouldn't be overdue

[garrettmknight]

Adding to vip-split - @youssef-lr can you give this one a look and confirm it needs to be internal?

[youssef-lr]

Going to take a look today @garrettmknight!

[garrettmknight]

@youssef-lr just assigning you to confirm internal v. external. If it's internal we can flag it for all wave7 core.

[melvin-bot[bot]]

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

[garrettmknight]

@dylanexpensify just reassigning in case this needs help while I'm OOO this week - will be back 2/21 to pick it back up.

[youssef-lr]

@garrettmknight @dylanexpensify I'll be able to confirm today if this needs to be internal.

[melvin-bot[bot]]

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

[youssef-lr]

I'm able to reproduce and I think this does need to be internal.

[dylanexpensify]

nice, thanks @youssef-lr ❤️

[dylanexpensify]

@youssef-lr are you taking this on? If so, let's remove hot pick label! 😄

[garrettmknight]

Just assigned @youssef-lr originally to confirm internal or not - leaving hot-pick on for now, but @youssef-lr if you want to pick it up, feel free to assign yourself!

[garrettmknight]

Waiting on hot picks!

[garrettmknight]

Still waiting

[garrettmknight]

Still waiting

[youssef-lr]

I'll work on this next week @garrettmknight

[garrettmknight]

My man! 🤝

[youssef-lr]

Will start investigation tomorrow, I'm not sure I can get to this today.

[youssef-lr]

@garrettmknight I think we can hold this on https://github.com/Expensify/App/issues/35240. The solution is to move the smartscanning expense to a new report. I'm wondering though if #35240 will support IOUs or just expenses? cc @mountiny

[garrettmknight]

I'm not sure - @jasperhuangg might be able to help us understand that too.