[$250] Add placeholder thumbnail to expenses with no receipt

[dannymcclain]

Problem

Expenses that don’t have an attached receipt (or eReceipt/map preview) look much different than expenses that do. This can lead to confusion especially for report previews that have a mix of expenses with and without a receipt image.

Solution

Coming from this thread, let’s add a placeholder thumbnail to expense previews that don't have any type of receipt so they more closely match our other expense previews (receipt image, eReceipt, and map preview). We can reuse styles from other preview placeholders and create a nice, consistent preview for all expenses.

Additionally, let’s update the “add receipt placeholder” on the expense view to more closely match the thumbnail presented on the preview.

Figma file

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857479879812113121
• Upwork Job ID: 1857479879812113121
• Last Price Increase: 2024-11-15

Issue Owner

Current Issue Owner: @brunovjk

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-11-15 17:54:55 UTC.

Proposal


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

Add placeholder thumbnail to expenses with no receipt

What is the root cause of that problem?

Improvement.

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


• Update the icon here with the new icon and also update the styles.
• Update the icon and styles here.
• Icon will be Expensicons.Receipt.
• In ReceiptEmptyState, we also need to add the plus icon with absolute position styles.
• We also need to update the icon in PendingMapView.

What alternative solutions did you explore? (Optional)

Result