Add primary receipt scan option on mobile and web - v2 by JKobrynski · Pull Request #72714 · Expensify/App

JKobrynski · 2025-10-15T16:42:17Z

Explanation of Change

This PR reintroduces changes that were originally implemented in #72236 and reverted in #72690. It also fixes #72616 #72617 #72621 #72624 #72638 #72646

Fixed Issues

$ #72030
PROPOSAL: N/A

Tests

#72030

Log into the app on web/desktop
Look at the bottom left of the window and make sure you can see two buttons
The one with "+" should work just like it used to, it should also be gray now instead of green
Above it you should see a green button with receipt icon that upon clicking triggers a scan receipt workflow
Log into the app on mobile
Look at the bottom of the window, in the middle of the bottom navigation bar you should see a new gray button that says "create", it should work just like it used to, is should be gray instead of green
Right above the bottom navigation bar on the right you should see a new green button with a camera icon, it allow for a quick scanning workflow, using default workspace (if available) and skipping the confirmation step (if coding is not required)
The new floating button (with the camera icon) should always be visible if the bottom nav is visible

#72616

Login with a new account
Tap camera button
Switch to manual
Make sure the Flip button is displayed (on mobile devices)
Enter amount > Next
On the participant page, make sure there is no text "You no longer have access to your previous quick action destination..."

#72617

Precondition:

Account does not have workspace

Launch Expensify app
Tap Camera button
Go to Manual
Enter amount > Next
Choose any user
On confirm page, tap app back button
Tap app back button
On amount page, tap Create expense

#72621

Log into the native Android app
Go to workspace chat.
Create a manual expense.
Return to LHN.
Tap camera button.
Tap device back button.
Make sure the Create expense page closes

#72624
Log into the app (mobile web)
Create a new workspace
Observe the scan button on workspace page
Make sure that you can scroll up if the button overlaps with "Go to workspace" chevron

#72638
Precondition:

Account has a default workspace

Log into the web app
2.Click the expense shortcut button.
Go to Manual tab.
Enter amount > Next.
On confirm page make sure you can't change the recipient
Repeat Step 2 to 5 on mweb, Android and iOS and make sure it behaves exactly like the web (you can't change the recipient)

#72646

Open the app with a user with at least 2 workspaces
First WS is set as default WS
Go to Workspaces
Tap the scan option at the bottom right
Select Manual tab > Enter amount > Next (Note: To field set to default WS )
Go back to Workspaces
Set the second WS as default WS (Tap 3 dots on non-default WS > Set as default workspace)
Tap scan option at the bottom right above the navigation bar > Manual tab > Enter amount > Next
Make sure the correct default workspace is displayed as To

Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as Tests section above.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

…6-JKobrynski/72030-add-primary-receipt-scan-option" This reverts commit 51b52e4, reversing changes made to bb87eaa.

…ipt-scan-option-2

melvin-bot · 2025-10-15T16:47:43Z

@ZhenjaHorbach Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

ZhenjaHorbach · 2025-10-15T16:51:46Z

Actually, about this issue

I suppose it's expected that we skip a recipient list after choosing for the first time and returning back
But following Expected Result we need to reopen this screen every time
So let's update test steps and mention this to not confuse QA

2025-10-15.18.44.34.mov

ZhenjaHorbach · 2025-10-15T16:52:51Z

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

2025-10-15.19.07.18.mov

2025-10-15.19.08.20.mov

Android: mWeb Chrome

2025-10-15.19.07.18.mov

2025-10-15.19.08.20.mov

iOS: HybridApp

2025-10-15.18.29.23.mov

2025-10-15.18.42.19.mov

2025-10-15.18.44.34.mov

iOS: mWeb Safari

2025-10-15.18.29.23.mov

2025-10-15.18.42.19.mov

2025-10-15.18.44.34.mov

MacOS: Chrome / Safari

2025-10-15.19.04.23.mov

MacOS: Desktop

2025-10-15.19.04.23.mov

fabioh8010 · 2025-10-15T16:52:52Z

+    const platform = getPlatform(true);
+    // We want to display the floating camera button on mobile devices (both web and native)
+    const shouldShowFloatingCameraButton = platform !== CONST.PLATFORM.WEB && platform !== CONST.PLATFORM.DESKTOP;
+


Shouldn't shouldUseNarrowLayout be used for this purpose (mobile screens = narrow layout), or I'm missing something?

You can also have a narrow layout on desktop/web, but we only want this to be shown on devices that have cameras - so narrow devices that are not desktop/web

JKobrynski · 2025-10-15T16:54:22Z

@ZhenjaHorbach updated the test steps

codecov · 2025-10-15T16:55:58Z

Codecov Report

❌ Patch coverage is 65.62500% with 22 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/components/FloatingReceiptButton.tsx	11.11%	8 Missing ⚠️
...es/home/sidebar/FloatingActionButtonAndPopover.tsx	30.00%	7 Missing ⚠️
src/components/Search/SearchPageFooter.tsx	0.00%	4 Missing ⚠️
src/components/FloatingActionButton.tsx	94.11%	1 Missing ⚠️
src/components/FloatingCameraButton.tsx	94.44%	1 Missing ⚠️
...c/components/Navigation/NavigationTabBar/index.tsx	0.00%	1 Missing ⚠️

Files with missing lines	Coverage Δ
...ents/Navigation/TopLevelNavigationTabBar/index.tsx	`93.75% <100.00%> (+0.89%)`	⬆️
.../Search/SearchPageHeader/SearchTypeMenuPopover.tsx	`0.00% <ø> (ø)`
src/libs/ReportUtils.ts	`74.59% <100.00%> (+0.04%)`	⬆️
src/pages/iou/request/IOURequestStartPage.tsx	`83.07% <100.00%> (+0.26%)`	⬆️
src/pages/workspace/WorkspaceInitialPage.tsx	`0.00% <ø> (ø)`
src/styles/index.ts	`45.10% <100.00%> (-0.25%)`	⬇️
src/components/FloatingActionButton.tsx	`96.42% <94.11%> (-3.58%)`	⬇️
src/components/FloatingCameraButton.tsx	`94.44% <94.44%> (ø)`
...c/components/Navigation/NavigationTabBar/index.tsx	`59.74% <0.00%> (ø)`
src/components/Search/SearchPageFooter.tsx	`0.00% <0.00%> (ø)`
... and 2 more

... and 10 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

ZhenjaHorbach · 2025-10-15T17:02:40Z

Looks like this issue is still reproducible

2025-10-15.19.01.41.mov

VickyStash · 2025-10-15T17:08:32Z

Looks like #72617 is still reproducible

I'm checking!

ZhenjaHorbach · 2025-10-15T17:09:02Z

Looks like #72617 is still reproducible
I'm checking!

Thanks
And only for desktop
With mobile everything is good

JKobrynski · 2025-10-15T17:14:08Z

@ZhenjaHorbach can you test again?

ZhenjaHorbach · 2025-10-15T17:17:18Z

Okay
Now is good !

2025-10-15.19.15.59.mov

ZhenjaHorbach · 2025-10-15T17:22:56Z

LGTM!

mountiny

Thanks!

OSBotify · 2025-10-15T22:08:39Z

✋ 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-10-15T23:15:32Z

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

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

…rimary-receipt-scan-option-2" This reverts commit b30f0f7, reversing changes made to 50a14d8.

mitarachim · 2025-10-16T06:43:31Z

Hello @JKobrynski @mountiny , QA team found issue about Expense shortcut does not appear in bottom menu when app is resized (Reproduce in both web and desktop) . Is this expected behavior, or should we create a new issue for it?

Bug6976280_1760591165427.Button_disapears.mp4

JKobrynski · 2025-10-16T06:45:30Z

@mitarachim yes, it was agreed on Slack that we want to keep it this way for now and we are going to add the same receipt button as a floating button (similar to the mobile one) in a follow-up. Hope that helps!

OSBotify · 2025-10-16T23:21:59Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.2.32-6 🚀

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

JKobrynski and others added 12 commits October 15, 2025 10:27

add 56px bottom padding to the WorkspaceInitialPage

d120ea7

fix android back button after clicking the new camera button

50fccbc

Fix a wrong workspace in To field when using camera button

9f7905f

unify quick receipt scan buttons behaviour with mobile camera button

59cd6b8

Fix "You no longer have access.." text is shown

c6cf5d4

Fix flip button display

877cb89

Merge branch 'fix-72621' into 72030-combined-blocker-prs

5a9da5e

Merge branch 'fix-72624' into 72030-combined-blocker-prs

db20e8b

Merge branch 'fix-72638' into 72030-combined-blocker-prs

d22a664

Merge branch 'fix-72646' into 72030-combined-blocker-prs

f6592e4

Merge branch 'fix-72616' into 72030-combined-blocker-prs

5f71459

Revert "Merge pull request Expensify#72690 from Expensify/revert-7223…

60780d9

…6-JKobrynski/72030-add-primary-receipt-scan-option" This reverts commit 51b52e4, reversing changes made to bb87eaa.

melvin-bot Bot assigned JKobrynski Oct 15, 2025

Merge branch '72030-combined-blocker-prs' into 72030-add-primary-rece…

49b2df6

…ipt-scan-option-2

JKobrynski marked this pull request as ready for review October 15, 2025 16:47

JKobrynski requested review from a team as code owners October 15, 2025 16:47

melvin-bot Bot requested review from ZhenjaHorbach and removed request for a team October 15, 2025 16:47

mountiny self-requested a review October 15, 2025 16:52

fabioh8010 reviewed Oct 15, 2025

View reviewed changes

fix startQuickScan method

4b17a20

ZhenjaHorbach approved these changes Oct 15, 2025

View reviewed changes

mountiny approved these changes Oct 15, 2025

View reviewed changes

mountiny merged commit b30f0f7 into Expensify:main Oct 15, 2025
23 checks passed

OSBotify mentioned this pull request Oct 15, 2025

Deploy Checklist: New Expensify 2025-10-15 #72723

Closed

52 tasks

mitarachim mentioned this pull request Oct 16, 2025

[Due for payment 2025-10-27] [Due for payment 2025-10-23] Expense - Manual confirm page is shown when creating Scan expense from shortcut button #72728

Closed

8 tasks

francoisl added a commit that referenced this pull request Oct 16, 2025

Revert "Merge pull request #72714 from callstack-internal/72030-add-p…

8724e6e

…rimary-receipt-scan-option-2" This reverts commit b30f0f7, reversing changes made to 50a14d8.

This was referenced Oct 16, 2025

[HOLD] Revert #72714 – "Add primary receipt scan option on mobile and web - v2" #72729

Closed

[Due for payment 2025-10-27] [Due for payment 2025-10-23] Expense - Amount field shows negative amount in IOU expense #72727

Closed

JKobrynski mentioned this pull request Oct 16, 2025

[Due for payment 2025-11-07] [CFI] [FAB Follow-up] Create unit tests for the new primary receipt scan option #72784

Closed

melvin-bot Bot mentioned this pull request Oct 16, 2025

[CFI] Add primary receipt scan option on mobile and web #72030

Closed

jponikarchuk mentioned this pull request Oct 17, 2025

[Payment due 11-9] [$250] FAB - FAB shows the contrasting color when hovered after changing app theme #72890

Closed

8 tasks

nlemma mentioned this pull request Nov 13, 2025

[Due for payment 2026-01-13] [Due for payment 2025-12-17] [$250] Confirm page loads infinitely after opening scan shortcut and opening create manual from QAB #75046

Closed

8 tasks

Conversation

JKobrynski commented Oct 15, 2025 • edited 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!

melvin-bot Bot commented Oct 15, 2025

Uh oh!

ZhenjaHorbach commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZhenjaHorbach commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviewer Checklist

Screenshots/Videos

Uh oh!

fabioh8010 Oct 15, 2025

Choose a reason for hiding this comment

Uh oh!

JKobrynski Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Oct 15, 2025

Uh oh!

codecov Bot commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ZhenjaHorbach commented Oct 15, 2025

Uh oh!

VickyStash commented Oct 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZhenjaHorbach commented Oct 15, 2025

Uh oh!

JKobrynski commented Oct 15, 2025

Uh oh!

ZhenjaHorbach commented Oct 15, 2025

Uh oh!

ZhenjaHorbach commented Oct 15, 2025

Uh oh!

mountiny left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

OSBotify commented Oct 15, 2025

Uh oh!

OSBotify commented Oct 15, 2025

Uh oh!

mitarachim commented Oct 16, 2025

Uh oh!

JKobrynski commented Oct 16, 2025

Uh oh!

OSBotify commented Oct 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

JKobrynski commented Oct 15, 2025 •

edited

Loading

ZhenjaHorbach commented Oct 15, 2025 •

edited

Loading

ZhenjaHorbach commented Oct 15, 2025 •

edited

Loading

JKobrynski Oct 15, 2025 •

edited

Loading

codecov Bot commented Oct 15, 2025 •

edited

Loading

VickyStash commented Oct 15, 2025 •

edited

Loading