[Hold for payment 2024-09-23] [$250] Search - Receipt thumbnail becomes gray & blank after changing receipt from JPG to PDF file

[IuliiaHerets]

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.20-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Submit expense > Manual.
3. Submit a manual expense with JPG receipt.
4. Go to Search.
5. Click on the expense in Step 3.
6. Click on the receipt.
7. Replace the receipt with a PDF file.
8. Close the RHP.

Expected Result:

The receipt thumbnail in search expense list will update to show the pdf receipt.

Actual Result:

The receipt thumbnail in search expense list shows blank gray thumbnail after changing to a pdf receipt.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

20240814_141831.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0130e8b27688b14ba0
• Upwork Job ID: 1823720055329371979
• Last Price Increase: 2024-09-04

Issue Owner

Current Issue Owner: @Pujan92

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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.

[IuliiaHerets]

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

[IuliiaHerets]

@joekaufmanexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0130e8b27688b14ba0

[joekaufmanexpensify]

cc @luacmartins

[melvin-bot]

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

[joekaufmanexpensify]

Waiting for proposals

[NJ-2020]

Proposal

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

Search - Receipt thumbnail becomes gray & blank after changing receipt from JPG to PDF file

What is the root cause of that problem?

When we change the receipt to pdf file, the PDFThumbnail file doesn't handle the thumbnail image properly and seems not working, in other file like DistanceEReceipt file we use the image thumbnail for PDF provided by the BE, by invoking the
ReceiptUtils.getThumbnailAndImageURIs function

App/src/components/DistanceEReceipt.tsx

Line 30 in 6a9a976

const thumbnail = TransactionUtils.hasReceipt(transaction) ? ReceiptUtils.getThumbnailAndImageURIs(transaction).thumbnail : null;

App/src/components/DistanceEReceipt.tsx

Line 33 in 6a9a976

const thumbnailSource = tryResolveUrlFromApiRoot(thumbnail ?? '');

But in our case we not we use the PDF file link url

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 93 in 6a9a976

source={tryResolveUrlFromApiRoot(transactionItem?.receipt?.source ?? '')}

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

We can use the same way used in other file i.e DistanceEReceipt
But in our case the BE for Search API doesn't return filename inside the receipt object which will be used to check if the file pdf we will get from BE for the thumbnail inside ReceiptUtils.getThumbnailAndImageURIs function.

So inside the ReceiptUtils.getThumbnailAndImageURIs function we can retrieve the filename receiptFilename from the url

What alternative solutions did you explore? (Optional)

Inside the TransactionListItemRow file we can retrieve the new transaction value from the Onyx by using the current transaction id i.e transaction_id, because the current transaction value from BE (Search API) that being pass to this function doesn't return with filename value inside receipt object

[luacmartins]

PDFThumbnail file doesn't handle the thumbnail image properly and seems not working

Why is this the case?

[NJ-2020]

@luacmartins I don't know, when i see on other page like report page it showing white background seems not working

[AlfredoAlc]

Proposal

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

Search - Receipt thumbnail becomes gray & blank after changing receipt from JPG to PDF file

What is the root cause of that problem?

The component that renders the thumbnail is Image from React Native, which doesn't support displaying PDF files.

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

We'll need to modify this source prop to send the correct uri using the getThumbnailAndImageURIs() function.

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Line 93 in 75f1729

source={tryResolveUrlFromApiRoot(transactionItem?.receipt?.source ?? '')}

We can apply the following logic, to check whether the file is PDF or not and pass the correct uri.

const filename = getFileName(transactionItem?.receipt?.source ?? '');
const receiptURIs = getThumbnailAndImageURIs(transactionItem, null, filename);
const isReceiptPDF = Str.isPDF(filename);
const source = tryResolveUrlFromApiRoot(isReceiptPDF ? receiptURIs.thumbnail ?? '' : receiptURIs.image ?? '');

[joekaufmanexpensify]

@Pujan92 do you expect to be able to review the new proposal today?

[melvin-bot]

@Pujan92, @luacmartins, @joekaufmanexpensify Eep! 4 days overdue now. Issues have feelings too...

[joekaufmanexpensify]

Bump @Pujan92 when you have a sec

[Pujan92]

Sorry for the delay @joekaufmanexpensify, I will review it tomorrow.

[Pujan92]

@NJ-2020 @AlfredoAlc

I see the pdf thumbnail image correctly when I revisit the page, I think TransactionListItem isn't rerendering when the pdf gets uploaded. Could you plz confirm and update your proposal accordingly if that is the case?

Screen.Recording.2024-08-21.at.12.29.14.mov

[joekaufmanexpensify]

As an fyi, going to be OOO from tomorrow - Monday. Not adding another BZ since should be nothing BZ-related till then. Please ask in slack if something comes up!

[melvin-bot]

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

[AlfredoAlc]

@Pujan92 Yes, when the receipt gets uploaded the file for that transaction gets updated with the new file which is a pdf. Pdf files are not rendered correctly from that Image component.

In that page we get the data via a snapshot, so when you revisit that page it gets a new snapshot which internally seems to apply a similar logic(as the proposal) to pdf files, and returns the transaction with a valid uri for the thumbnail.

[melvin-bot]

@Pujan92, @luacmartins, @joekaufmanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[joekaufmanexpensify]

@Pujan92 @luacmartins Is any more discussion needed here before we can evaluate the proposals on the issue?

[luacmartins]

I think my latest comment should resolve the issue, maybe we need some updated proposals to account for that.

[melvin-bot]

@Pujan92, @luacmartins, @joekaufmanexpensify Eep! 4 days overdue now. Issues have feelings too...

[joekaufmanexpensify]

Got it. Sounds good! @AlfredoAlc @NJ-2020 could you please update your proposals?

[Pujan92]

Thanks @luacmartins.

RCA from the @NJ-2020 seems incorrect as we aren't using PDFThumbnail for the TransactionListItemRow.
@AlfredoAlc's RCA is correct and the solution makes sense to retrieve filename from the URL and based on filetype replace the extension as per the requirement. We can proceed with @AlfredoAlc's proposal.

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @AlfredoAlc You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[joekaufmanexpensify]

PR in review

[joekaufmanexpensify]

PR merged

[joekaufmanexpensify]

Looks like this one is due for payment but automation did not work.

[joekaufmanexpensify]

I do see the second PR. Seems like that second PR was not a regression, is that right @luacmartins

[luacmartins]

Yea, it was a side effect but didn't cause a blocker

[joekaufmanexpensify]

Got it. TY!

[joekaufmanexpensify]

No regression penalty here then. Payment we need to issue here is:

• @AlfredoAlc - $250 for PR via Upwork.
• @Pujan92 - $250 for C+ review via NewDot.

[joekaufmanexpensify]

@AlfredoAlc $250 sent and contract ended!

[joekaufmanexpensify]

Closing as all that's left is for @Pujan92 to request payment via NewDot. TY everyone!

[garrettmknight]

$250 approved for @Pujan92