[HOLD for payment 2023-10-25] [$500] IOU - Request money is not successful after refreshing in confirm page

[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!

---

Action Performed:

1. Go to any report
2. Click on + button and request money
3. Upload an image for receipt
4. Refresh the page
5. Press the request button

Expected Result:

Money should be requested and it should show scanning

Actual Result:

Nothing happens

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.74-2

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-09-27.at.14.36.23.mov

bandicam.2023-09-28.00-54-33-234.mp4

Expensify/Expensify Issue URL:

Issue reported by: @alitoshmatov

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694717028781839

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011e5061c23f7df911
• Upwork Job ID: 1707121850103009280
• Last Price Increase: 2023-09-27
• Automatic offers:
• mollfpr | Reviewer | 27022006
• DylanDylann | Contributor | 27022008
• alitoshmatov | Reporter | 27022010

[DylanDylann]

Proposal

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

Request money is not successful after refreshing in confirm page

What is the root cause of that problem?

App/src/pages/iou/ReceiptSelector/index.js

Line 84 in 446f29b

const filePath = URL.createObjectURL(file);

In the web, we are creating a new Object URL to save the file. But when we reload the page that object URL is removed (reference for this point: https://stackoverflow.com/questions/13966186/how-long-does-a-blob-persist)

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

Let's see another place where we also use a new Object URL to save the file

Screen.Recording.2023-09-15.at.17.43.22.mov

In adding an attachment, when reloading we hide the selected attachment modal. So, I suggest that we check if the url Object is removed, we will redirect to ReceiptSelector page. To do that, in here

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Line 75 in 144e932

useEffect(() => {

Add this code to check objectURL is valid or not

if (props.iou.receiptPath && props.iou.receiptSource) {
            FileUtils.readFileAsync(props.iou.receiptPath, props.iou.receiptSource).then((receipt) => {
                if (!receipt) {
                    const fallback = ROUTES.getMoneyRequestRoute(iouType.current, reportID.current);
                    Navigation.goBack(fallback);
                } else {
                    setReceiptState(receipt)
                }
            });
        }

And then in here

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Line 205 in 144e932

if (props.iou.receiptPath && props.iou.receiptSource) {

we only need to check receiptState and request money

if (receiptState) {
                requestMoney(selectedParticipants, trimmedComment, receiptState);
                return;
            }

What alternative solutions did you explore? (Optional)

We can save uploaded files to localStorage

[melvin-bot]

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

[melvin-bot]

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

[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 - @mollfpr (External)

[mollfpr]

@DylanDylann Does your alternative solution use Onyx to save the URL object? The better fix should make the submit still processable.

[DylanDylann]

@mollfpr I can't reproduce this bug when reloading the App redirects to the initial page. Do you want to fix as suggestion here

The better fix should make the submit still processable.

[mollfpr]

In adding an attachment, when reloading we hide the selected attachment modal. So, I suggest that we check if the url Object is removed, we will redirect to ReceiptSelector page.

@DylanDylann The expected result should keep the user on the same page after reloading and the submit request is successful. From your RCA the issue is because the object URL is removed after reloading, so I'm thinking your alternative solution is to keep the object URL and set it back.