[HOLD for payment 2024-02-20] [$500] Android - Receipt - App crashes when downloading EReceipt from Expensify Card transaction

[kbecciv]

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: v1.4.24-3
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. Log in to account with Expensify Card transaction ([email protected]
2. Go to workspace chat with the transaction (https://staging.new.expensify.com/r/4612388815642526
3. Navigate to transaction details page.
4. Tap on the e-receipt > 3-dot menu > Download.

Expected Result:

App does not crash.

Actual Result:

App crashes.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6338794_1704974766409.Screen_Recording_20240111_113849_One_UI_Home.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c571000bd51ff4ec
• Upwork Job ID: 1745431775064920064
• Last Price Increase: 2024-02-01
• Automatic offers:
• fedirjh | Reviewer | 28142516
• mkhutornyi | Contributor | 28142517

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ikevin127]

Proposal

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

App crashes when downloading EReceipt from Expensify Card transaction.

Instructions to reproduce issue on local development

This will add an EReceipt Card locally in Onyx.

1. Create a manual request.
2. Within MoneyRequestPreview.js console log props.transaction.
3. Tap on created request and extract transactionID from logs.
4. Within MoneyRequestPreview.js under the first console log add the following console log replacing transactionID with the one extracted from the logs:

    console.log(Onyx.merge("transactions_transactionID", { // <- make sure to change transactionID
        cardID: 1,
        merchant: 'Google', // Random merchant
        mccGroup: 'Android', // Random group
        hasEReceipt: true,
    }));

5. Now when re-visiting the created manual request this will have an EReceipt Card attached

Note: keep the step 4 console log within the code because if removed the EReceipt won't persist due to transaction re-fetching when navigating.

What is the root cause of that problem?

The crash happens because the source url we're trying to download has the following form: eReceipt/3792612540331572334 because it's an EReceipt component created by us within the app and doesn't have a HTTP/HTTPS url source, therefore the download errors with: Can only download HTTP/HTTPS URIs which crashes the app.

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

Using a package we already use called react-native-view-shot we can pass down a ref to the EReceipt component and capture it as an image which we can then save to the device camera roll upon downloading.

Pseudo code:

• within AttachmentModal.js create new ref called eReceiptViewRef
• pass down ref to AttachmentView then once more to EReceipt's the wrapping View
• back in AttachmentModal.js above the downloadAttachment function define isEReceipt constant like so:
  !_.isEmpty(props.transaction) && TransactionUtils.hasEReceipt(props.transaction)
• inside the downloadAttachment function after if (isAuthTokenRequired) add if (isEReceipt)
• within the isEReceipt if we use react-native-view-shot's captureRef function to capture the EReceipt, save it to the camera roll then display an alert that notices the user that the attachment was saved to camera roll

What alternative solutions did you explore? (Optional)

As per #34348 (comment), as an alternative to fixing this issue we should hide the download button for EReceipt attachments by adding an additional check in the line:

App/src/components/AttachmentModal.js

Line 420 in 045a0d0

if (!isOffline) {

for when the attachment is an eReceipt in order to hide the download button on all platforms since:

the download feature for EReceipt was not implemented yet in ND.

We can check for eReceipt like so:

App/src/components/ReportActionItem/ReportActionItemImage.tsx

Line 49 in 0ead105

const isEReceipt = transaction && TransactionUtils.hasEReceipt(transaction);

Videos

iOS: Native

Screen.Recording.2024-01-13.at.03.39.14.mov

Android: Native

Screen.Recording.2024-01-13.at.02.56.48.mov

MacOS: Chrome / Safari

Screen.Recording.2024-01-16.at.18.39.55.mov

MacOS: Desktop

Screen.Recording.2024-01-16.at.18.46.12.mov

[sophiepintoraetz]

With @fedirjh to review the proposal

[sophiepintoraetz]

Bumped

[fedirjh]

@kbecciv as you have this feature enabled for you, What will happen if you try to download the EReceipt on MacOS: Chrome / Safari ?

[fedirjh]

@ikevin127 Thank you for the proposal. The root cause analysis seems correct. However, I am unsure if we have already implemented the download feature for EReceipt. I have left some comments in the Slack thread addressing the issue. Once I receive some feedback from the team, I will review your solution. Thank you for your understanding.

[ikevin127]

@fedirjh Sure, no worries!

For reference, this is what is happening on other platforms currently when the user tries to download an EReceipt.

• iOS: Native - shows alert that receipt cannot be downloaded
• Web | mWeb - opens new tab with eReceipt/{number} in url resulting in not found page
• Desktop - opens browser url with eReceipt/{number} which can either show not found page or crash (if logged in with same account on both desktop and web)

Videos

iOS: Native

Screen.Recording.2024-01-18.at.16.21.21.mov

MacOS: Chrome / Safari

Screen.Recording.2024-01-18.at.16.14.30.mov

MacOS: Desktop

Screen.Recording.2024-01-18.at.16.23.49.mov

[melvin-bot]

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

[sophiepintoraetz]

Bumped @grgia for a response.

[melvin-bot]

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

[fedirjh]

cc @ikevin127 It seems that the download feature for EReceipt was not implemented yet in ND. For the crash, we should hide the download button for EReceipt. Could you please update your proposal accordingly?

[ikevin127]

@fedirjh For sure, I changed the alternative solution as requested.

Updated proposal

• changed the alternative solution according to the new information from this #34348 (comment)

[melvin-bot]

Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @fedirjh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

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

[isabelastisser]

Thanks @fedirjh, I assigned @mkhutornyi.

[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.4.40-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• disable downloading EReceipt #36030

If no regressions arise, payment will be issued on 2024-02-20. 🎊

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

• @fedirjh requires payment automatic offer (Reviewer)
• @mkhutornyi requires payment automatic offer (Contributor)

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

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] 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:
• [@fedirjh] 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:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] 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.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

Hey @fedirjh please complete the checklist above. Thanks!

[isabelastisser]

Payment summary:

@fedirjh automatic offer (Reviewer) $500
@mkhutornyi automatic offer (Contributor) $500

[isabelastisser]

The payments were processed in Upwork. Waiting for @fedirjh to complete the BZ list.

[fedirjh]

BugZero Checklist:

• Link to the PR: Remove receipt from carousel #31467
• Link to comment: Remove receipt from carousel #31467 (comment)
• Link to discussion: N/A Nothing to add to the checklist.
• Determine if we should create a regression test for this bug: Yes

Regression Test Proposal

1. Log in to account with Expensify Card transaction : [email protected]
2. Go to workspace chat with the transaction https://staging.new.expensify.com/r/4612388815642526
3. Navigate to transaction details page.
4. Open receipt preview
5. Verify that download icon doesn't show. If three dots menu exists, verify that it doesn't contain download icon option.

• Do we agree 👍 or 👎

[isabelastisser]

Regression test:

https://github.com/Expensify/Expensify/issues/371827

[isabelastisser]

All set.