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

[DylanDylann]

We need to wait for this reverted PR #28410 to be merged. So we can move forward this bug

[mollfpr]

@DylanDylann Where's the revert issue?

[DylanDylann]

@mollfpr We had a blocker that blocked this issue on the main yesterday. But now It is resolved. Please ignore the above comment

[DylanDylann]

@mollfpr

The expected result should keep the user on the same page after reloading and the submit request is successful.

To do that, I have 2 suggestions:

1. Created new API to update receipt image to server when user uploading image
2. Using FileSystem API you'll need to request PERSISTENT storage, and the user will have to agree to let you store data on their machine permanently.

I understand the benefit from your viewpoint But both ways are complicated. I see It's a bit overkill for this issue. Note that

1. when the user uploads the receipt image and close modal we also remove the uploaded image
2. When the user uploads attachment then reloading, this attachment also be removed

Anyways, Let's confirm the expected before moving forward.

@shawnborton Please help to give some thought from UX perspective on this issue.

[shawnborton]

Hmm I am a bit confused here about this one. @alitoshmatov since you reported this one, can you walk me through when exactly you think a user would experience this? I am having a hard time understanding why a user would refresh the app after they upload a receipt.

[DylanDylann]

@mollfpr Could you check this comment?

#28320 (comment)

[mollfpr]

Thanks @DylanDylann. It seems reasonable to redirect the user back.

@luacmartins I think you already agree with the expected result, and the proposal looks good!

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

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

[aimane-chnaif]

This might need to put on hold for #26538

[luacmartins]

Thanks for the link @aimane-chnaif. We'll refactor navigation for multi-step flows, but I still think the changes to readFileAsync mentioned in this proposal are good and shouldn't overlap with that refactor, so I think we can move on with this issue.

[DylanDylann]

@mollfpr The PR is ready for review

[melvin-bot]

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

• when @DylanDylann got assigned: 2023-10-04 16:25:40 Z
• when the PR got merged: 2023-10-17 17:37:40 UTC
• days elapsed: 9

On to the next one 🚀

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.86-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix/28347 Navaigate back when reloading in scan receipt  #28893

If no regressions arise, payment will be issued on 2023-10-25. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

• @mollfpr requires payment offer (Reviewer)
• @DylanDylann requires payment offer (Contributor)
• @alitoshmatov requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@luacmartins] The PR that introduced the bug has been identified. Link to the PR:
• [@luacmartins] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@luacmartins] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@mollfpr / @DylanDylann] Determine if we should create a regression test for this bug.
• [@mollfpr / @DylanDylann] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[johncschuster]

Waiting to issue payment on 2023-10-25

[mollfpr]

[@luacmartins] The PR that introduced the bug has been identified. Link to the PR:

#23770

[@luacmartins] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/23770/files#r1371795681

[@luacmartins] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

The regression step should be enough.

[@mollfpr / @DylanDylann] Determine if we should create a regression test for this bug.
[@mollfpr / @DylanDylann] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Only testable in Web, mWeb, and Desktop.

1. Clicking + (FAB) Button
2. Clicking on the scan request
3. Upload an image for receipt
4. Go to a confirmation page
5. Refresh the page
6. Verify that the App navigates back to the Scan Request Page
7. 👍 or 👎

---

@johncschuster Could you give us the payment summary? I'll request the payment in NewDot, thanks!

[luacmartins]

Thanks for filling the checklist. 👍 to the regression tests

[mollfpr]

@johncschuster Could you give us the payment summary? Thank you!

[melvin-bot]

@johncschuster, @luacmartins, @mollfpr, @DylanDylann Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

Just pending payment

[johncschuster]

On it!

[johncschuster]

Payment Summary:

External issue reporter: @alitoshmatov - $50 - paid via Upwork
Contributor that fixed the issue: @DylanDylann - $500 - paid via Upwork
Contributor+ that helped on the issue and/or PR: @mollfpr - $500 - paid via manual request

[johncschuster]

Payment has been issued via Upwork

[JmillsExpensify]

$500 payment approved for @mollfpr based on summary above.