[HOLD for payment 2023-11-22] [$500] Scan receipt - Crash when trying to download a receipt while in scanning process

[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.3.93-0
**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. Open staging.new.expensify or the mobile app
2. Navigate to the workspace chat as an employee
3. Select "Request money" > "Scan receipt"
4. Upload a receipt file from your device
5. Click "Request"
6. Navigate to the request conversation
7. Open the request preview and the attached receipt
8. Click "More" > "Download"

Expected Result:

When attempting to download a receipt while in scanning process, Expensify crashes

Actual Result:

It should be possible to download the receipt in all viable scenarios
Extra info: Crash occasionally happens with any type of request (Manual, Scan and Distance)
Uh-oh, something went wrong!
Please try closing and reopening the app or switching to web.
If the problem persists, reach out to concierge@expensify.com

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

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Bug6257345_1698699313430.Web_-_error.mp4

logs.txt

Bug6257345_1698699384771.iOS_-_error.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0128ad4c7b2932ce1f
• Upwork Job ID: 1719139466680426496
• Last Price Increase: 2023-10-30
• Automatic offers:
• aimane-chnaif | Reviewer | 27512074
• mkhutornyi | Contributor | 27512075

[melvin-bot]

Triggered auto assignment to @maddylewis (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]

Job added to Upwork: https://www.upwork.com/jobs/~0128ad4c7b2932ce1f

[melvin-bot]

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

[wlegolas]

Proposal

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

Scan receipt - Crash when trying to download a receipt while in the scanning process

What is the root cause of that problem?

The AttachmentModal component doesn't receive the file name by the property "originalFileName" from the ReportAttachments component, by default "originalFileName" value is an empty string.

App/src/pages/home/report/ReportAttachments.js

Lines 35 to 43 in ec7fb3c

	return (
	<AttachmentModal
	allowDownload
	defaultOpen
	report={report}
	source={source}
	onModalHide={() => Navigation.dismissModal()}
	onCarouselAttachmentChange={onCarouselAttachmentChange}
	/>

The property "originalFileName" is used to set the file structure file.name that is used when the user clicks on the button to download the file:

App/src/components/AttachmentModal.js

Lines 188 to 199 in 6ec9dd5

	const downloadAttachment = useCallback(() => {
	let sourceURL = source;
	if (isAuthTokenRequired) {
	sourceURL = addEncryptedAuthTokenToURL(sourceURL);
	}
	fileDownload(sourceURL, 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]);

As the "originalFileName" is an empty string, when the downloadAttachment method is called the file state is undefined, and an exception is thrown because it is trying to access the name from an undefined value.

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

We should change the ReportAttachments component to extract the file name from the source property and pass this value to the AttachmentModal component.

What alternative solutions did you explore? (Optional)

N/A

POC

poc-issue-30616.mp4

[dukenv0307]

Proposal

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

When attempting to download a receipt while in scanning process, Expensify crashes

What is the root cause of that problem?

In here, we're not passing the originalFileName to the AttachmentModal so the file is undefined and it crashes here when we try to access "name" of the file here.

The purpose of the original file name is that when the user downloads, we want it to have readable file name and recognizable to the user since it's the original name of the file the user uploaded.

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

1. We should add originalFileName to the ReportAttachments route params, and pass it to the AttachmentModal. The originalFileName should be added to the optimistic data (and likely back-end as well) when we upload the receipt, same thing we do with the workspace avatar here (and also user avatar)

2. Additionally, we should use lodashGet when retrieving the file name here to avoid any potential crash.

fileDownload(sourceURL, lodashGet(file, 'name', ''));

3. Also there's a bug in the fallback logic here. Earlier if the fileName is not available, it will fallback to the FileUtils.getAttachmentName(url). But after appendTimeToFileName is added, the fallback will never happen because even when the fileName is empty, appendTimeToFileName will return something like -2023-10-31 02_26_43.729 (without extension) and it will still be used as the file name.

We need to update it to:

fileName ? FileUtils.appendTimeToFileName(fileName) : FileUtils.getAttachmentName(url)

What alternative solutions did you explore? (Optional)

If we don't want to add original file name for receipt, the step 2 and 3 in the solution should be enough, since that is also the fallback logic we used earlier.

[mkhutornyi]

Proposal

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

App crashes when download attachment before being uploaded to server

What is the root cause of that problem?

App/src/components/AttachmentModal.js

Line 356 in 444a908

const threeDotsMenuItems = useMemo(() => {

Above function is memoized and not re-calculated when file is set below:

App/src/components/AttachmentModal.js

Line 153 in 444a908

setFile(attachment.file);

So even if file value exists, it's not updated and remains as undefined (initial state value) in downloadAttachment function below:

App/src/components/AttachmentModal.js

Lines 188 to 199 in 444a908

	const downloadAttachment = useCallback(() => {
	let sourceURL = source;
	if (isAuthTokenRequired) {
	sourceURL = addEncryptedAuthTokenToURL(sourceURL);
	}
	fileDownload(sourceURL, 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 changes do you think we should make in order to solve the problem?

Add file to this dependencies array:

App/src/components/AttachmentModal.js

Line 394 in 444a908

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

Addon:
It's possible that use clicks Download button quickly before file is being set.
So we can show Download button only when file exists

App/src/components/AttachmentModal.js

Lines 378 to 382 in 444a908

	menuItems.push({
	icon: Expensicons.Download,
	text: props.translate('common.download'),
	onSelected: () => downloadAttachment(source),
	});

So wrap this with if (file) condition