[HOLD for payment 2024-03-14] [$500] [MEDIUM] Smartscan: Show PDF receipt thumbnails

[trjExpensify]

Coming from here. CC: @sobitneupane @pradeepmdk @Gonals

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: v1.3.98-5
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: @trjExpensify
Slack conversation: #30747 (comment)

Action Performed:

1. Request Money > Scan > Upload a PDF receipt > choose a participant
2. Observe there isn't a preview of the PDF receipt in the thumbnail on the confirmation page
3. Click confirm to create the request
4. Observe there isn't a preview of the PDF receipt in the thumbnail on the report preview component in the chat
5. Click the report preview component
6. Observe there isn't a preview of the PDF receipt in the thumbnail on the request preview component in the expense/iouReport
7. Click the request preview component
8. Observe there isn't a preview of the PDF receipt in the thumbnail on the receipt preview component in the request view

Expected Result:

PDF receipts should show a preview in the relevant thumbnails throughout the app.

P.s this also includes in the split preview component, so let's make sure it works there.

Actual Result:

Generic "empty" thumbnail previews are displayed for PDF receipts.

Workaround:

Yes, they can tap the thumbnail to see the PDF but they'd really not know to do that.

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

Confirmation screen:

Report preview on the chat:

Request preview on the expense/iouReport:

Receipt preview on the request:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f90fbd2f6a7c49f2
• Upwork Job ID: 1725113274629943296
• Last Price Increase: 2023-11-23

[melvin-bot]

Current assignee @trjExpensify is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f90fbd2f6a7c49f2

[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 - @0xmiroslav (External)

[tienifr]

Proposal

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

Show PDF receipt thumbnails

What is the root cause of that problem?

We're getting thumbnail for receipt here

App/src/libs/ReceiptUtils.ts

Line 31 in 69a3358

function getThumbnailAndImageURIs(transaction: Transaction, receiptPath: string | null = null, receiptFileName: string | null = null): ThumbnailAndImageURI {

We do not have the logic to get the thumbnail of pdf

-> Default image is shown

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

We can lean on the source to get the thumbnail for pdf.

Here's the sample source https://www.expensify.com/receipts/{id}.pdf -> the thumbnail should be https://www.expensify.com/receipts/{id}.jpg.1024.jpg

    const isReceiptPDF = Str.isPDF(filename);
...

 if(isReceiptPDF){
            return {thumbnail: `${path.substring(0, path.length-4)}.jpg.1024.jpg`, image: path};
        }

What alternative solutions did you explore? (Optional)

BE will return the thumbnail and use it to shown on FE side

Result

Screen.Recording.2023-11-16.at.18.56.52.mov

[trjExpensify]

@0xmiroslav can you review this please? Also, @tienifr confirming in the results we're solving for all the thumbnails noted in the OP?

[eh2077]

Proposal

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

We want to show PDF thumbnail in the process of uploading pdf receipt.

What is the root cause of that problem?

The root cause of this issue is that, currently, we don't have an implementation of previewing PDF source by thumbnail. The PDF source here means expensify source like https://www.expensify.com/chat-attachments/7486855856104260927/w_1c2aef0dea2f6e30acd3ca31c50286af09a4d3c9.pdf or local file source starts with blob:// or file://.

Currently, uploading PDF attachment from chat can be previewed before upload and the PDF thumbnail is only available after it's been successfully uploaded and the backend will create an image source url for the PDF, like, https://www.expensify.com/chat-attachments/7486855856104260927/w_1c2aef0dea2f6e30acd3ca31c50286af09a4d3c9.jpg.1024.jpg

Intuitively, we should be able to preview the PDF thumbnail before uploading it to backend because we're able to preview PDF pages before uploading.

The new feature to have a ThumbnailPDF which works on both server and local uri like what Image component supports is great complement to the App, especially for the use case like creating an IOU request and the file is not yet been uploaded to backend and the offline use case.

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

We can add an implementation of ThumbnailPDF which previews pdf uri (both server and local uri) in thumbnail.
On the web platform, we can refer the implementation of PDFView by only rendering the first page of PDF file as the thumbnail. We can convert the first page to image, like this example.

We can also update react-pdf to 7.x.x and then use the thumbnail feature provided. There's some extra rendering issue need to be solved if we choose to upgrade.

On native platform, we can make use of the singlePage property of https://github.com/wonday/react-native-pdf.

This solution will need more effort to implement.

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[trjExpensify]

@0xmiroslav bump!

[trjExpensify]

Same. @0xmiroslav can you review these proposals today, please? They've been hanging out for 2 weeks.

[0xmiros]

reviewing today

[trjExpensify]

Perfect, thanks.

[trjExpensify]

So for the avoidance of doubt and @eh2077 benefit, the below are the final set.

(PP-PDF specific)

Invalid file type
Password-protected PDF is not supported

Tipo de archivo inválido
Los PDFs con password no son compatibles

(Generic)

Invalid file type
This file type is not allowed

Tipo de archivo inválido
Este tipo de archivo no es compatible

[iwiznia]

This is wrong:

Este tipo de archivo no son compatibles

Should be:

Este tipo de archivo no es compatible

[trjExpensify]

Lol, got it. Updated.

[melvin-bot]

@trjExpensify, @s77rt, @luacmartins, @CherylWalsh, @eh2077 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[s77rt]

PR has been deployed to staging 1 hour ago

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

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

• feat: add PDFThumbnail to preview PDF receipt #35255

If no regressions arise, payment will be issued on 2024-03-14. 🎊

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

• @s77rt requires payment (Needs manual offer from BZ)
• @eh2077 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:

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

[s77rt]

• The PR that introduced the bug has been identified: Not a a bug. This is a feature request
• The offending PR has been commented on: n/a
• A discussion in #expensify-bugs has been started: n/a
• Determine if we should create a regression test for this bug: Yes

---

Regression Test Proposal

1. Go to any chat and request money
2. Choose Scan tab and upload a pdf file
3. Verify that you're able to preview the PDF receipt in the confirmation page
4. Complete the money request process
5. Verify that you're able to preview the PDF receipt in the chat report
6. Click on the PDF preview
7. Verify that you're able to preview the PDF receipt in the IOU report
8. Click on the PDF preview
9. Verify that you're able to preview the PDF receipt in the money request report
10. Click on the PDF preview
11. Verify that you are displayed the PDF file

[eh2077]

Hi @trjExpensify

Considering the added time and complexity of completing this task, could we discuss the possibility of a bonus for me and C+ @s77rt ?

We have completed several tasks in this new feature, including displaying local PDFs, detecting password-protected PDFs, and refining translations.

It would be great to have it but it’s also fine if not :)

[melvin-bot]

Payment Summary

Upwork Job

• C+: @s77rt paid $500 via Upwork
• Contributor: @eh2077 paid $500 via Upwork

BugZero Checklist (@trjExpensify)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1725113274629943296/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[trjExpensify]

Hey @eh2077, thanks for the request. I agree the scope of this issue increased to encompass password-protected PDFs and updating the file type modal. I've added a bonus and sent you both offers for $750.

[s77rt]

@trjExpensify We had a regression #37852. Should the payment here be $375 in that case?

[trjExpensify]

Ah, I didn't see that. Okay cool, so then I'm fine with keeping the bounty at $500 and not reducing for that regression. Once you guys accept the offers, I'll pay a different amount. 👍

[s77rt]

@trjExpensify Accepted! Thank you!

[trjExpensify]

Paid both of you, thanks!