[HOLD for payment 2024-01-11] [$500] IOU- When replacing receipt and downloading it, previous receipt with new receipt name is downloaded

[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.14-2
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. Navigate to IOU request details that has a receipt
2. Click on the receipt
3. Click 3-dot menu > Replace
4. Upload another receipt
5. After the upload is complete, download the receipt

Expected Result:

The latest receipt will be downloaded

Actual Result:

The previous receipt is downloaded, while the receipt file name is the name of the latest receipt
On Android and iOS app, it downloads the previous receipt (file name is not affected/not relevant) after replacing the receipt

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

Bug6321355_1703082153236.bandicam_2023-12-20_22-14-39-707.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0113378cba031fc595
• Upwork Job ID: 1737485735446364160
• Last Price Increase: 2023-12-20
• Automatic offers:
• shubham1206agra | Contributor | 28077368

Issue Owner

Current Issue Owner: @abdulrahuman5196

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0113378cba031fc595

[melvin-bot]

Triggered auto assignment to @alexpensify (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 - @abdulrahuman5196 (External)

[namhihi237]

Proposal

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

The link source download does not update when replace the image

What is the root cause of that problem?

Currently, when the source changes we don't update in the threeDotsMenuItems.

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

We should add the source into dependence

What alternative solutions did you explore? (Optional)

[vikssevishnu]

I am trying to access the issue details using the link "https://stackoverflow.com/c/expensify/questions/14418" but i am getting you do not have access. Can you help on it ?

[melvin-bot]

📣 @vikssevishnu! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[vikssevishnu]

Contributor details
Your Expensify account email: vishnu.vikas19@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01a59961216a1ee633?viewMode=1

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[dukenv0307]

Proposal

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

The previous receipt is downloaded, while the receipt file name is the name of the latest receipt
On Android and iOS app, it downloads the previous receipt (file name is not affected/not relevant) after replacing the receipt

What is the root cause of that problem?

The receipt image preview now is a modal. So when it's closed, it's not unmounted.
When we change the receipt, the props.source is changed but we don't update source state and we don't pass it as a dependency of threeDotsMenuItems

App/src/components/AttachmentModal.js

Line 398 in bd7629e

}, [props.isReceiptAttachment, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);

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

We should create a useEffect to update source state when props.source is changed

useEffect(() => {
    setSource(props.source);
}, [props.source])

and add source as a dependency of this useMemo

App/src/components/AttachmentModal.js

Line 398 in bd7629e

}, [props.isReceiptAttachment, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);

What alternative solutions did you explore? (Optional)

We can use sourceForAttachmentView and add it as a dependency of threeDotsMenuItems useMemo

[situchan]

This is regression from #32647 which fixes #31105 (confirmed by reverting locally)
It's still within regression period

[shubham1206agra]

In that case, @dukenv0307 please create a quick PR for this

[Berndy]

Proposal

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

When a reciept attachement is replaced and then downloaded after, the old attachment will be downloaded.

What is the root cause of that problem?

source does not update when props.source updates.

The useMemo for the threeDotsMenuItems also does not depend on source, thus downloadAttachment will be called with the old source.

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

We need to update source whenever props.source changes using a useEffect hook.

useEffect(() => {
    setSource(props.source);
}, [props.source])

We also need to add source to the useMemo dependencies for threeDotsMenuItems.

App/src/components/AttachmentModal.js

Line 398 in bd7629e

}, [props.isReceiptAttachment, props.parentReport, props.parentReportActions, props.policy, props.transaction, file]);

While i arrived at these conclusions by myself, so far they are the exact same as the proposal of @dukenv0307

However I had some more issues with this solution, as we now allow blob URLs as source until the attachment is done uploading. If we add the auth token when we are attempting to download a blob URL, the download will fail. I suggest we also add a check if source is a blob url before adding the encrypted auth token.

App/src/components/AttachmentModal.js

Lines 194 to 205 in bd7629e

	const downloadAttachment = useCallback(() => {
	let sourceURL = source;
	if (isAuthTokenRequired) {
	sourceURL = addEncryptedAuthTokenToURL(sourceURL);
	}
	fileDownload(sourceURL, lodashGet(file, 'name', ''));
	// At ios, if the keyboard is open while opening the attachment, then after downloading
	// the attachment keyboard will show up. So, to fix it we need to dismiss the keyboard.
	Keyboard.dismiss();
	}, [isAuthTokenRequired, source, file]);

What alternative solutions did you explore? (Optional)

We might want to check if props.source is set before calling setSource, but I am not 100% sure of the implications of this.

[alexpensify]

@abdulrahuman5196 should we close these GHs in favor of what @situchan mentioned above or move forward with the proposal review?

[dukenv0307]

@shubham1206agra The PR ready for review.

[alexpensify]

Heads up, I will be offline from Friday, December 22, to Thursday, January 4, 2024. I will not be actively watching over this GitHub during that period. If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

[melvin-bot]

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

[melvin-bot]

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

[abdulrahuman5196]

@abdulrahuman5196 should we close these GHs in favor of what @situchan mentioned above or move forward with the proposal review?

@alexpensify We can close this issue, given the PR was merged. This was a regression fix.

[alexpensify]

👍🏼 - closing

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

• Fix download file issue #33403

If no regressions arise, payment will be issued on 2024-01-11. 🎊

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:

• @shubham1206agra requires payment automatic offer (Contributor)
• @dukenv0307 requires payment (Needs manual offer from BZ)

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

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

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[alexpensify]

@shubham1206agra - can you please identify if this PR triggered the deploy blocker or if there is another reason for this automation? Thanks!

[shubham1206agra]

Oh it's a false alert actually

[alexpensify]

@shubham1206agra - can you please share more context as to why the alert is wrong? It will be helpful to have it recorded here. Thanks!

[shubham1206agra]

@alexpensify #33586 is the offending PR. Some contributor marked this by mistake as this issue is already deployed to production.

[alexpensify]

Thank you! I will continue the process to prepare for the payment date.

[alexpensify]

Based on the 👎🏼 here #33363 (comment) and the note here #33363 (comment), there is no payment action here since this issue was handled in other GH. I confirmed the Upwork job is closed too.