[HOLD for payment 2024-08-19] [$250] Expense - Receipt thumbnail shows a green receipt placeholder while it is uploading

@adelekennedy

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: v9.0.18-1
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4834235
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

Go to staging.new.expensify.com
Go to FAB > Submit expense > Manual.
Submit a manual expense with receipt to any user.
After submitting the expense, check the receipt thumbnail while it is uploading.

Expected Result:

The receipt thumbnail will show the receipt while it is uploading (production behavior).

Actual Result:

The receipt thumbnail shows a green receipt placeholder while it is uploading.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6565240_1723090380276.20240808_120954.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01cb9e52d752d2515a
Upwork Job ID: 1821642583324627537
Last Price Increase: 2024-08-08

Issue Owner

Current Issue Owner: @adelekennedy

@madmax330

Triggered auto assignment to @madmax330 (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

@adelekennedy

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

We think that this bug might be related to #wave-collect - Release 1

Asked in slack here: https://expensify.slack.com/archives/C07CACYRTJS/p1723111960156189

Proposal

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

Reciept image is shown as green receipt placeholder.

What is the root cause of that problem?

In this issue, the receipt image is shown as EReceiptThumbnail because isThumbnail is true.

App/src/components/ReceiptImage.tsx

Lines 112 to 124 in 0926267

    
           if (isEReceipt || isThumbnail) { 
        
               const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true}; 
        
               return ( 
        
                   <View style={style ?? [styles.w100, styles.h100]}> 
        
                       <EReceiptThumbnail 
        
                           transactionID={transactionID ?? '-1'} 
        
                           iconSize={iconSize} 
        
                           // eslint-disable-next-line react/jsx-props-no-spreading 
        
                           {...props} 
        
                       /> 
        
                   </View> 
        
               ); 
        
           }

In ReceiptUtils, we have a logic to return the correct data if it's a receipt image, but in our case, isReceiptImage is false.

App/src/libs/ReceiptUtils.ts

Lines 47 to 61 in 0926267

    
           if ((isReceiptImage || isReceiptPDF) && typeof path === 'string' && (path.startsWith('blob:') || path.startsWith('file:'))) { 
        
               return {image: path, isLocalFile: true, filename}; 
        
           } 
        
           if (isReceiptImage) { 
        
               return {thumbnail: `${path}.1024.jpg`, image: path, filename}; 
        
           } 
        
           if (isReceiptPDF && typeof path === 'string') { 
        
               return {thumbnail: `${path.substring(0, path.length - 4)}.jpg.1024.jpg`, image: path, filename}; 
        
           } 
        
           const isLocalFile = FileUtils.isLocalFile(path); 
        
           const {fileExtension} = FileUtils.splitExtensionFromFileName(filename); 
        
           return {isThumbnail: true, fileExtension: Object.values(CONST.IOU.FILE_TYPES).find((type) => type === fileExtension), image: path, isLocalFile, filename};

isReceiptImage checks the extension of the image filename.

App/src/libs/ReceiptUtils.ts

Line 38 in 0926267

const isReceiptImage = Str.isImage(filename);

However, the image filename contains the image source (blob://...). This happens after this commit. In that commit, we move the creating of the optimistic receipt and filename to buildOptimisticTransaction, but we got the logic for the filename wrong.

Previously, if the receipt has the source, then the filename will be set to the receipt name.

Now, it will use the source and fallback to receipt name (and then fallback to filename param).

App/src/libs/TransactionUtils/index.ts

Line 166 in 0926267

filename: receipt?.source ?? receipt?.name ?? filename,

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

We should change the logic of the optimsitic filename just like before to:

filename: receipt?.source ? receipt?.name : filename,

maybe we can check for the receipt name instead, (receipt?.name ?? filename)

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

@bernhardoj

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

[CP Staging] Fix mistake, use receipt name if receipt source #47117

If no regressions arise, payment will be issued on 2024-08-19. 🎊

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

@bernhardoj requires payment through NewDot Manual Requests

@madmax330

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:

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

@bernhardoj

Hey @bernhardoj I think in this case you're owed 50% of the usual price as we used your solution but @neil-marcellini implemented it. Does that sound fair?

Removing blocker labels since this is def not a new blocker 😬

@Beamanator

🤦‍♀️ I completely missed those labels @Beamanator, thank you

No prob! :D

@adelekennedy

@adelekennedy yes, that make sense for me

@bernhardoj

great! Thank you so much for bringing this up

Payouts due:

Contributor: $125 @bernhardoj NewDot

Requested in ND.

@bernhardoj

$125 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2024-08-19] [$250] Expense - Receipt thumbnail shows a green receipt placeholder while it is uploading #47050

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

26 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (isEReceipt \|\| isThumbnail) {
	const props = isThumbnail && {borderRadius: style?.borderRadius, fileExtension, isReceiptThumbnail: true};
	return (
	<View style={style ?? [styles.w100, styles.h100]}>
	<EReceiptThumbnail
	transactionID={transactionID ?? '-1'}
	iconSize={iconSize}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	/>
	</View>
	);
	}

	if ((isReceiptImage \|\| isReceiptPDF) && typeof path === 'string' && (path.startsWith('blob:') \|\| path.startsWith('file:'))) {
	return {image: path, isLocalFile: true, filename};
	}

	if (isReceiptImage) {
	return {thumbnail: `${path}.1024.jpg`, image: path, filename};
	}

	if (isReceiptPDF && typeof path === 'string') {
	return {thumbnail: `${path.substring(0, path.length - 4)}.jpg.1024.jpg`, image: path, filename};
	}

	const isLocalFile = FileUtils.isLocalFile(path);
	const {fileExtension} = FileUtils.splitExtensionFromFileName(filename);
	return {isThumbnail: true, fileExtension: Object.values(CONST.IOU.FILE_TYPES).find((type) => type === fileExtension), image: path, isLocalFile, filename};

[HOLD for payment 2024-08-19] [$250] Expense - Receipt thumbnail shows a green receipt placeholder while it is uploading #47050

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Aug 8, 2024

melvin-bot commented on Aug 8, 2024

github-actions commented on Aug 8, 2024

IuliiaHerets commented on Aug 8, 2024

madmax330 commented on Aug 8, 2024

bernhardoj commented on Aug 8, 2024

Proposal

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

What is the root cause of that problem?

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

26 remaining items

melvin-bot commented on Aug 12, 2024

melvin-bot commented on Aug 12, 2024

melvin-bot commented on Aug 12, 2024

adelekennedy commented on Aug 13, 2024

Beamanator commented on Aug 13, 2024

adelekennedy commented on Aug 13, 2024

Beamanator commented on Aug 13, 2024

bernhardoj commented on Aug 14, 2024

adelekennedy commented on Aug 14, 2024

bernhardoj commented on Aug 14, 2024

JmillsExpensify commented on Aug 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions