App
App copied to clipboard
Expensify
[$250] Search - Receipt thumbnail becomes gray & blank after changing receipt from JPG to PDF file
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: v9.0.20-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): [email protected] 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 JPG receipt.
- Go to Search.
- Click on the expense in Step 3.
- Click on the receipt.
- Replace the receipt with a PDF file.
- 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:
- [x] Android: Native
- [x] Android: mWeb Chrome
- [x] iOS: Native
- [x] iOS: mWeb Safari
- [x] MacOS: Chrome / Safari
- [x] MacOS: Desktop
Screenshots/Videos
https://github.com/user-attachments/assets/818f63a1-e729-4239-9c20-7a6342182420
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
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.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
@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
Job added to Upwork: https://www.upwork.com/jobs/~0130e8b27688b14ba0
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)
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
https://github.com/Expensify/App/blob/6a9a97690cd97f7f608ff9dd125ac1a7d7da3137/src/components/DistanceEReceipt.tsx#L30
https://github.com/Expensify/App/blob/6a9a97690cd97f7f608ff9dd125ac1a7d7da3137/src/components/DistanceEReceipt.tsx#L33
But in our case we not we use the PDF file link url
https://github.com/Expensify/App/blob/6a9a97690cd97f7f608ff9dd125ac1a7d7da3137/src/components/SelectionList/Search/TransactionListItemRow.tsx#L93
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
PDFThumbnail file doesn't handle the thumbnail image properly and seems not working
Why is this the case?
@luacmartins I don't know, when i see on other page like report page it showing white background seems not working
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.
https://github.com/Expensify/App/blob/75f1729fc255df1792e37f9ad3e1b44d40d77f5b/src/components/SelectionList/Search/TransactionListItemRow.tsx#L93
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 ?? '');
@Pujan92 do you expect to be able to review the new proposal today?
@Pujan92, @luacmartins, @joekaufmanexpensify Eep! 4 days overdue now. Issues have feelings too...
@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?
https://github.com/user-attachments/assets/974af70d-3471-42b3-94b4-9a60130241fb
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!
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@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.
@Pujan92 The PDFThumbnail seems not working, it showing white background
https://github.com/user-attachments/assets/565f9e84-5991-4708-bc3e-5978878affaf
I think you can try to slow down your network to see the issue And also we got thumbnail preview image from the BE and the PDFThumbnail will be replaced by the image thumbnail from BE
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.
Thanks @AlfredoAlc, I got your point.
@luacmartins Doesn't this need to be updated correctly from backend in the pusher event for the snapshot? I mean when we revisit the search the snapshot provides the image file for the transaction, shouldn't it do the same if we upload any new file?
We have live Onyx updates for Search, which means that if we get an Onyx update for a transaction that exists within the snapshot_ key, it should be updated accordingly. @Pujan92 do we get any Onyx update for the new receipt URL?
@luacmartins, I noticed below some cases.
-
If we try to add a new receipt in Search expenses, we don't get a new receipt URL
-
If we replace the existing receipt with the pdf, we receive an onyx update with the receipt details(Here we receive source as a pdf file contrary to the initial snapshot data where for pdf also it provides jpg as source). Attached video helps to understand.
https://github.com/user-attachments/assets/9219c923-1836-4624-8034-0e1ebe1a83fc
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@Pujan92 @luacmartins @joekaufmanexpensify this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!
@Pujan92 so the new update returns a pdf url instead of jpg one, is that right? I'm not sure we can change the type of the returned Onyx update (it might lead to bugs elsewhere in App). Can we just update the URL to match the jpg thumbnail format?
@Pujan92 so the new update returns a pdf url instead of jpg one, is that right?
Yes, that's the difference between the initial and updated snapshot.
I'm not sure we can change the type of the returned Onyx update (it might lead to bugs elsewhere in App). Can we just update the URL to match the jpg thumbnail format?
I believe, for the initial snapshot it seems transformed somewhere because in the below images you can see the transactions_ key has the receipt as pdf source whereas snapshot -> transactions_ has the jpg source.
Can we just update the URL to match the jpg thumbnail format?
Do you mean to just replace pdf extension with the jpg format? We can do that but I think better if this is first checked on the backend side whether we can update snapshot with correct transformed URL the way we gets for initial snapshot.
@Pujan92 the snapshot url is initially a jpg because the backend returns the thumbnail version of the receipt, which is always jpg.
Do you mean to just replace pdf extension with the jpg format? We can do that but I think better if this is first checked on the backend side whether we can update snapshot with correct transformed URL the way we gets for initial snapshot.
Yes, it seems like we just replace that here when returning thumbnails. It seems like we can do that same in this case, without the additional error/local file logic in that method.
@Pujan92, @luacmartins, @joekaufmanexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!