Hover-to-view for receipt thumbnails v2 #68276

borys3kk · 2025-08-11T12:07:56Z

Explanation of Change

Added custom component responsible for displaying preview of receipt in new 'window'.

Fixed Issues

$ #64195
PROPOSAL:

Tests

Verify that no errors appear in the JS console

Testcase 1 - image preview:

Open reports tab
Hover over ReceiptCell in a row with an image
Ensure the bigger preview of an image appears

Testcase 2 - eReceipt preview:

Open reports tab
Hover over ReceiptCell in a row with an eReceipt
Ensure the bigger preview of eReceipt appears

Testcase 3 - distanceEReceipt preview:

Open reports tab
Hover over ReceiptCell in a row with an distanceEReceipt (map should be visible in this row)
Ensure the bigger preview of distanceEReceipt appears

In test cases 1 and 3 the height of the preview should adjust to the height of the content (regular eReceipt has const height), If the image or distanceEReceipt is too high, the beginning should be visible like this: 

Offline tests

N/A

QA Steps

Same as tests

// TODO: These must be filled out, or the issue title must include "[No QA]."

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

Screen.Recording.2025-07-01.at.18.34.06.mov

iOS: mWeb Safari

Screen.Recording.2025-07-01.at.18.39.43.mov

MacOS: Chrome / Safari

Screen.Recording.2025-07-01.at.18.40.43.mov

MacOS: Desktop

Screen.Recording.2025-07-01.at.18.43.37.mov

github-actions · 2025-08-13T09:06:03Z

🚧 @mountiny has triggered a test Expensify/App build. You can view the workflow run here.

shawnborton · 2025-08-13T12:50:51Z

For photos, I see this as the preview:

However, this is the entire receipt:

Why is it being cropped into a shorter area? We should be showing the whole thing.

borys3kk · 2025-08-13T13:02:41Z

Was it newly uploaded receipt?
I uploaded it to my account and it shows nicely on the test build:

shawnborton · 2025-08-13T13:04:42Z

No, these are all old receipts from July

shawnborton · 2025-08-13T13:04:55Z

It seems to happen to photo receipts taken from Scan on mobile

borys3kk · 2025-08-13T13:11:22Z

Okay, was able to repro with mobile scan, looking into it
It will very likely be fixed when high quality photos are back in preview, as the ones in receiptCell are scaled down and cropped to 1:1 aspect ratio

github-actions · 2025-08-15T12:19:52Z

🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-08-15T12:54:37Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
Built from App PR #68276.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/68276/index.html	❌ FAILED ❌
	The QR code can't be generated, because the iOS build failed

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/68276/NewExpensify.dmg	https://68276.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

shawnborton · 2025-08-15T14:59:31Z

I'm still missing some receipt thumbnails in the expenses list.

This PR:

Staging:

shawnborton · 2025-08-15T15:01:47Z

Otherwise I think the behavior is feeling pretty good. Let's get some more testing eyes on this though!

shawnborton · 2025-08-15T15:03:03Z

Here's an example of where I am getting some blank receipts:

CleanShot.2025-08-15.at.11.02.18.mp4

Same report on staging:

…-hover-receipt-v2

borys3kk · 2025-08-18T08:39:12Z

Hi, can you run test build again? I've merged newest main, to see if it resolves the issue
I have not changed anything regarding thumbnails so they shouldn't be affected by this pr

github-actions · 2025-08-18T11:40:08Z

🚧 @shawnborton has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2025-08-18T12:11:24Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪
Built from App PR #68276.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/68276/index.html	❌ FAILED ❌
	The QR code can't be generated, because the iOS build failed

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/68276/NewExpensify.dmg	https://68276.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

shawnborton · 2025-08-18T12:28:19Z

Hm, still getting some blank receipts:

shawnborton · 2025-08-18T12:29:09Z

@mountiny I think you might have been assigned this issue as the internal engineer, do you mind taking a look? Basically when I hover over a PDF receipt, the thumbnail just loads blank.

shawnborton · 2025-08-18T12:30:30Z

Interesting, now I do see the correct receipt from the Reports > Expenses list:

Just not from the report itself. So it seems like that's the thing we need to look into.

borys3kk · 2025-08-18T12:48:26Z

hmm,weird, I also was able to reproduce it on my account, also reproducible on dev environment I will look into it now

borys3kk · 2025-08-18T14:33:53Z

update, found what the underlying issue is
data we get from the open report is different than the one we get from snapshots:
transactions_data:

snapshot with the sama transaction:

when you look at source in both of them, in openReport our image has .pdf file extension and in snapshot it has .jpg which we can normally open
its something I can do manually on the frontend side (changing the extension to jpg) or it can be updated on the backend side

another thing is that in ereceipts in inbox tab the expensify card shows up nicely:

however in reports tab some weird thing is showing up:

it's also soemthing that we should look at

edit: in the case with ereceipts we also get data that has invalid cardName returned from snapshot
cc: @mountiny

shawnborton · 2025-08-18T14:35:13Z

Agree - let's try to investigate this soon, I know we want to get this launched as soon as possible.

borys3kk · 2025-08-19T10:48:49Z

Does everything else look good to you? If so I can get this pr out of the draft so the reviewer check, if other than the bugs above, everything works as intended and can be merged after they are resolved?

shawnborton · 2025-08-19T11:17:05Z

Yup, let's get it into review!

borys3kk · 2025-08-23T22:08:15Z

On my end on both ad-hoc and local build everything works well

allroundexperts · 2025-08-25T03:15:34Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified that the composer does not automatically focus or open the keyboard on mobile unless explicitly intended. This includes checking that returning the app from the background does not unexpectedly open the keyboard.
I verified tests pass on all platforms & I tested again on:
- Android: HybridApp
- Android: mWeb Chrome
- iOS: HybridApp
- iOS: mWeb Safari
- MacOS: Chrome / Safari
- MacOS: Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified there are no new alerts related to the canBeMissing param for useOnyx
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.ts or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG)
If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
If the PR modifies the UI (e.g. new buttons, new UI components, changing the padding/spacing/sizing, moving components, etc) or modifies the form input styles:
- I verified that all the inputs inside a form are aligned with each other.
- I added Design label and/or tagged @Expensify/design so the design team can review the changes.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
For any bug fix or new feature in this PR, I verified that sufficient unit tests are included to prevent regressions in this flow.
If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: HybridApp

Unable to build android

Android: mWeb Chrome

Screen.Recording.2025-08-25.at.8.13.39.AM.mov

iOS: HybridApp

Screen.Recording.2025-08-25.at.8.08.07.AM.mov

iOS: mWeb Safari

Screen.Recording.2025-08-25.at.7.30.10.AM.mov

MacOS: Chrome / Safari

Screen.Recording.2025-08-25.at.7.19.02.AM.mov

MacOS: Desktop

Screen.Recording.2025-08-25.at.7.26.49.AM.mov

mountiny

Just small nitpick. Michal is ooo today and I think we can move it ahead now so we get the PR to staging later today

mountiny · 2025-08-25T14:52:24Z

src/components/TransactionItemRow/ReceiptPreview/index.tsx

+        </Animated.View>,
+        document.body,
+    );
+}


Display name missing

Shall I create a pr with it?

Please add it to some follow up in future, no need to do it now. Also in case we need to revert it might cause more problems

OSBotify · 2025-08-25T15:13:46Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2025-08-26T11:20:08Z

🚀 Deployed to staging by https://github.com/mountiny in version: 9.1.99-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

shawnborton · 2025-08-26T12:27:44Z

This is broken on staging for me:

This is the exact thing I was reporting above. Why did we ignore it?

dannymcclain · 2025-08-26T13:48:12Z

Piggybacking on Shawn's comment above, I'm still getting a little bit of weirdness with some of my receipt images. Several of my expenses that do have images show nothing in the thumbnail, but the hover preview works 🤔

deetergp · 2025-08-26T20:27:55Z

I suspect that this PR is the cause of this blocker.

mountiny · 2025-08-26T22:57:00Z

@shawnborton I noted above, these issues are quite common with adhoc builds and @borys3kk or @allroundexperts could not reproduce when testing locally. That is why we moved ahead since there was not much to do if they could not reproduce.

Screen.Recording.2025-08-27.at.00.53.20.mov

I cannot reproduce the issue you have in staging either. Can you please provide more details about the bug? There are clearly some specific conditions.

Can you see any pattern between what receipt works and what does not?
Does that same receipt work when you open expense report?
What browser do you use?
Are those receipts that do not work yours or submitted to you?

All that could help some since as mentioned before - nobody could reproduce

mountiny · 2025-08-26T23:04:30Z

@shawnborton I have also not seen any issue/ blocker raised for this, so that makes me think it is really something specific. I asked QA if they can reproduce here in Slack here https://expensify.slack.com/archives/C9YU7BX5M/p1756249418021819 to get more eyes on this

thienlnam · 2025-08-26T23:28:56Z

Unsure what the step forward for this one here is - should we revert it if we're seeing some staging issues?

borys3kk · 2025-08-27T09:57:10Z

I can't reproduce the issues mentioned by Shawn and Danny as Vit said
The fixes for two issues reported to repo are ready in this pr: $ #69337
So I don't think we need to revert as the feature is still usable and requires quite a but of fiddling to get the reported bugs to appear (apart from the eReceipt one)

m-natarajan · 2025-08-27T12:14:27Z

Issue is not reproducible on Windows 11 / Chrome in v9.1.99-5

bandicam.2025-08-27.10-01-25-304.mp4

dannymcclain · 2025-08-27T13:06:53Z

I can't reproduce the issue I was having either anymore. I wonder if it was just some kind of weird caching/loading issue I was experiencing that one time.

So I don't think we need to revert as the feature is still usable and requires quite a but of fiddling to get the reported bugs to appear (apart from the eReceipt one)

I would tend to agree with this. I don't think this requires a revert, as the feature is mostly super solid, but we should investigate the best we can and when Shawn's back we can see if he can still reproduce the bug he's experiencing.

OSBotify · 2025-08-28T01:17:53Z

🚀 Deployed to production by https://github.com/thienlnam in version: 9.1.99-11 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

jjcoffee · 2025-09-15T07:34:05Z

src/components/TransactionItemRow/DataCells/ReceiptCell.tsx

+    let previewSource = transactionItem?.receipt?.source ?? '';

-    if (source && typeof source === 'string') {
+    if (source) {


Coming from #69278, removing the typeof check resulted in a crash when creating a distance expense. This is because we on native the source is set to a number for optimistically created expenses.

hoangzinh · 2025-10-16T08:11:23Z

src/components/TransactionItemRow/DataCells/ReceiptCell.tsx

+                isEReceipt={isEReceipt}
                transactionID={transactionItem.transactionID}
-                shouldUseThumbnailImage={!transactionItem?.receipt?.source}
+                shouldUseThumbnailImage


Coming from #70651, we should handle the loading style for expenses that have receipt here. More details: #70651 (comment)

jayeshmangwani · 2025-11-20T17:01:57Z

src/components/TransactionItemRow/ReceiptPreview/index.tsx

+                            />
+                        </View>
+                    ) : (
+                        <EReceiptWithSizeCalculation


Coming from this issue #72414 , we are handling image receipts and distance eReceipts here, so per diem was falling back to EReceiptWithSizeCalculation with the card-style view instead of using its dedicated per diem PerDiemEReceipt view. That caused the inconsistency, and we’ve fixed it here: #73911

revert revert of hover preview

8e48daa

This comment has been minimized.

Sign in to view

fix distanceEReceipt pending field

2420102

mountiny assigned borys3kk Aug 13, 2025

borys3kk added 2 commits August 14, 2025 18:28

fix 403 error, add loading state

e13adb6

update loading state

a1ab3ea

Merge branch 'main' of github.com:Expensify/App into borys3kk-feature…

51db4cb

…-hover-receipt-v2

remove unused styles

1d57a70

allroundexperts approved these changes Aug 25, 2025

View reviewed changes

melvin-bot bot requested a review from mjasikowski August 25, 2025 03:16

mountiny approved these changes Aug 25, 2025

View reviewed changes

mountiny merged commit da34e41 into Expensify:main Aug 25, 2025
23 checks passed

OSBotify mentioned this pull request Aug 26, 2025

Deploy Checklist: New Expensify 2025-08-26 #69233

Closed

mitarachim mentioned this pull request Aug 26, 2025

[Due for payment 2025-09-09] Expense - Map shows 403 error in the receipt when hovered #69240

Closed

8 tasks

jponikarchuk mentioned this pull request Aug 26, 2025

[Due for payment 2025-09-09] Android - Expense - e-Receipt preview is misaligned #69279

Closed

8 tasks

melvin-bot bot mentioned this pull request Aug 28, 2025

[Due for payment 2025-09-04] Hover-to-view for receipt thumbnails #64195

Closed

8 tasks

nkdengineer mentioned this pull request Aug 28, 2025

[Due for payment 2025-09-16] [$250] Android & iOS - Distance - App crashes when submitting distance expense #69278

Closed

8 tasks

jjcoffee reviewed Sep 15, 2025

View reviewed changes

nkdengineer mentioned this pull request Sep 16, 2025

[Due for payment 2025-10-15] [$250] Loading spinner is too big inside of receipt thumbnail #70651

Closed

16 tasks

hoangzinh reviewed Oct 16, 2025

View reviewed changes

jayeshmangwani reviewed Nov 20, 2025

View reviewed changes

jayeshmangwani mentioned this pull request Nov 20, 2025

[Due for payment 2025-11-15] [$250] Per diem - Per diem receipt when hovered shows "Card" row when the expense is created offline #72414

Closed

8 tasks

This was referenced Nov 24, 2025

[CLEAN] Synthetic Benchmark PR #68276 - Hover-to-view for receipt thumbnails v2 qodo-benchmark/App#15

Open

[CORRUPTED] Synthetic Benchmark PR #68276 - Hover-to-view for receipt thumbnails v2 qodo-benchmark/App#16

Open

Hover-to-view for receipt thumbnails v2 #68276

Hover-to-view for receipt thumbnails v2 #68276

Uh oh!

Conversation

borys3kk commented Aug 11, 2025 • edited by mountiny Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

github-actions bot commented Aug 13, 2025

Uh oh!

This comment has been minimized.

shawnborton commented Aug 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

borys3kk commented Aug 13, 2025

Uh oh!

shawnborton commented Aug 13, 2025

Uh oh!

shawnborton commented Aug 13, 2025

Uh oh!

borys3kk commented Aug 13, 2025

Uh oh!

github-actions bot commented Aug 15, 2025

Uh oh!

github-actions bot commented Aug 15, 2025

Uh oh!

shawnborton commented Aug 15, 2025

Uh oh!

shawnborton commented Aug 15, 2025

Uh oh!

shawnborton commented Aug 15, 2025

Uh oh!

borys3kk commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 18, 2025

Uh oh!

github-actions bot commented Aug 18, 2025

Uh oh!

shawnborton commented Aug 18, 2025

Uh oh!

shawnborton commented Aug 18, 2025

Uh oh!

shawnborton commented Aug 18, 2025

Uh oh!

borys3kk commented Aug 18, 2025

Uh oh!

borys3kk commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

shawnborton commented Aug 18, 2025

Uh oh!

borys3kk commented Aug 19, 2025

Uh oh!

shawnborton commented Aug 19, 2025

Uh oh!

borys3kk commented Aug 23, 2025

Uh oh!

allroundexperts commented Aug 25, 2025

Reviewer Checklist

Screenshots/Videos

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

mountiny Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

borys3kk Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

mountiny Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

borys3kk commented Aug 11, 2025 •

edited by mountiny

Loading

shawnborton commented Aug 13, 2025 •

edited

Loading

borys3kk commented Aug 18, 2025 •

edited

Loading

borys3kk commented Aug 18, 2025 •

edited

Loading

dannymcclain commented Aug 26, 2025 •

edited

Loading

borys3kk commented Aug 27, 2025 •

edited

Loading