Add selection mode Submit/Approve/Pay actions for mobile layout. by Krishna2323 · Pull Request #85796 · Expensify/App

Krishna2323 · 2026-03-19T12:32:44Z

Explanation of Change

Fixed Issues

$ #72502
PROPOSAL:

Tests

Same as QA Steps
Verify that no errors appear in the JS console

Offline tests

Same as QA Steps

QA Steps

1. Submit action via selection mode (Mobile)

Open the app in a narrow/mobile viewport (or on a mobile device)
Open an expense report where the primary action is "Submit"
Long-press an expense to enter selection mode
Select all expenses using the checkboxes
Verify the "X selected" dropdown appears at the top of the expense list (inside MoneyRequestReportActionsList)
Open the dropdown — verify "Submit" appears at the top
Click "Submit"
Verify the report is submitted, selections are cleared, and selection mode exits

2. Approve action via selection mode (Mobile)

Open the app in a narrow/mobile viewport
Open a submitted expense report as an approver
Long-press an expense to enter selection mode, then select all expenses
Open the "X selected" dropdown — verify "Approve" appears at the top
Click "Approve"
Verify the report is approved and selections are cleared

3. Pay action via selection mode (Mobile)

Open the app in a narrow/mobile viewport
Open an approved expense report ready to be paid
Long-press an expense to enter selection mode, then select all expenses
Verify the "X selected" dropdown renders as a KYC-integrated dropdown (not a plain button)
Open the dropdown — verify "Pay $X.XX" appears with a right arrow and payment method submenu items
Click "Pay $X.XX" — verify a submenu opens with payment methods
Select "Pay elsewhere"
Verify payment processes, selections are cleared, and "You're all set!" RHP does not open
Verify Pay is no longer shown in the dropdown

4. Approve with delegate restriction (Mobile)

Open the app in a narrow/mobile viewport
Log in as a delegate with restricted access
Open a submitted expense report
Long-press to enter selection mode, select all expenses
Open the "X selected" dropdown and click "Approve"
Verify the "no access" modal appears
Dismiss the modal
Verify selections are still active (not cleared)

5. Approve with held expenses (Mobile)

Open the app in a narrow/mobile viewport
Open a submitted expense report where some expenses are on hold
Long-press to enter selection mode, select all expenses
Open the "X selected" dropdown and click "Approve"
Verify the hold menu appears
Verify selections are cleared after confirming

6. Pay as business (Mobile)

Open the app in a narrow/mobile viewport
Open an approved expense report, long-press to enter selection mode, select all expenses
Open Pay submenu, select "Pay as business" (if available)
Verify payment processes without the "You're all set!" RHP opening
Verify selections are cleared

7. Partial selection — no report-level actions (Mobile)

Open the app in a narrow/mobile viewport
Open an expense report with 3+ expenses
Long-press to enter selection mode, select only some (not all) expenses
Open the "X selected" dropdown
Verify Submit/Approve/Pay do not appear — only transaction-level actions
Verify the dropdown renders as a plain ButtonWithDropdownMenu (not the KYC dropdown)

8. KYC dropdown vs plain dropdown rendering (Mobile-specific)

Open the app in a narrow/mobile viewport
Open an approved expense report (Pay action available)
Long-press to enter selection mode, select all expenses
Verify the dropdown renders as MoneyReportHeaderKYCDropdown (KYC-integrated)
Deselect one expense so not all are selected
Verify the dropdown switches back to a plain ButtonWithDropdownMenu
Re-select all expenses — verify it switches back to the KYC dropdown

9. Offline behavior (Mobile)

Open the app in a narrow/mobile viewport
Go offline
Open an expense report, long-press to enter selection mode, select all expenses
Verify Submit/Approve appear and can be clicked
Verify Pay does appear

10. Submit blocked by policy rules (Mobile)

Open the app in a narrow/mobile viewport
Open an expense report where preventSelfApproval is enabled and the submitter is the next approver
Enter selection mode, select all expenses
Open the "X selected" dropdown
Verify Submit does not appear in the dropdown

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

android_native.mp4

Android: mWeb Chrome

test_1-2-3.mp4

test_4.1.mp4

test_4.mp4

test_5.mp4

test_6.mp4

test_8.mp4

test_9.mp4

test_10.mp4

iOS: Native

ios_native.mp4

iOS: mWeb Safari

ios_safari.mp4

MacOS: Chrome / Safari

web_chrome.mp4

Signed-off-by: krishna2323 <[email protected]>

codecov · 2026-03-19T12:42:18Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/components/MoneyReportHeaderKYCDropdown.tsx	`0.00% <ø> (ø)`
src/components/MoneyReportHeader.tsx	`0.00% <0.00%> (ø)`
...equestReportView/MoneyRequestReportActionsList.tsx	`59.45% <46.15%> (-0.44%)`	⬇️
src/hooks/useSelectionModeReportActions.ts	`82.10% <82.10%> (ø)`
... and 13 files with indirect coverage changes

Signed-off-by: krishna2323 <[email protected]>

…2502-3 Made-with: Cursor # Conflicts: # src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Signed-off-by: krishna2323 <[email protected]>

melvin-bot · 2026-03-23T19:32:42Z

@situchan 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]

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b74539f3f8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/hooks/useSelectionModeReportActions.ts

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

Signed-off-by: krishna2323 <[email protected]>

MelvinBot · 2026-03-24T03:33:53Z

Code Review

CI Status

checklist: Failing (ignorable — PR Author/Reviewer Checklist)
test (job 2): Failing — related to this PR (see below)
All other checks pass (ESLint, TypeScript, Prettier, perf-tests, etc.)

Failing Test

The test useSelectionModeReportActions > hasPayInSelectionMode > returns true when all expenses selected and pay action exists fails because usePaymentOptions is mocked to return [], but the hook now additionally checks hasActualPaymentOptions:

const hasActualPaymentOptions = paymentButtonOptions.some((opt) =>
    Object.values(CONST.IOU.PAYMENT_TYPE).some((type) => type === opt.value)
);
const hasPayInSelectionMode = allExpensesSelected && hasPayAction && hasActualPaymentOptions;

Since the mock returns an empty array, hasActualPaymentOptions is always false, causing the assertion to fail. The usePaymentOptions mock in the test needs to return at least one option with a valid CONST.IOU.PAYMENT_TYPE value (e.g., ELSEWHERE) when testing the pay scenario.

Code Observations

1. Logic duplication between useSelectionModeReportActions and MoneyReportHeader

The new hook (src/hooks/useSelectionModeReportActions.ts, 720 lines) duplicates substantial logic already present in MoneyReportHeader.tsx — including selectionModeReportLevelActions, confirmPayment, confirmApproval, handleSubmitReport, buildPaymentSubMenuItems, and all the associated state/guards. Both MoneyReportHeader and MoneyRequestReportActionsList now independently compute these actions with their own Onyx subscriptions.

Ideally, MoneyReportHeader should also consume the extracted hook to avoid drift between two parallel implementations. As-is, any future changes to Submit/Approve/Pay selection mode logic need to be updated in two places.

2. Heavy Onyx subscription load

The hook creates ~20 useOnyx subscriptions (session, account, transaction violations, next step, amount owed, billing grace periods, bank accounts, policies, outstanding reports, betas, intro, onboarding tour, network status, active policy, invoice receiver policy). All of these become active whenever MoneyRequestReportActionsList mounts. Consider whether some of these could be passed as parameters from the parent (which already has some of these values) instead of subscribing independently.

3. hasActualPaymentOptions is computed in two places

The same check paymentButtonOptions.some((opt) => Object.values(CONST.IOU.PAYMENT_TYPE).some((type) => type === opt.value)) now appears in both MoneyReportHeader.tsx:2329 and useSelectionModeReportActions.ts:604. This is another duplication point that could drift.

4. Minor: shouldPopoverUseScrollView change in MoneyReportHeaderKYCDropdown.tsx

The change from applicableSecondaryActions.length >= CONST.DROPDOWN_SCROLL_THRESHOLD to shouldPopoverUseScrollView(applicableSecondaryActions) is a good consistency improvement — the utility function also checks for large subMenuItems arrays, which the inline check missed.

Summary

The overall approach of extracting selection mode logic into a reusable hook for mobile narrow layout is sound. The main concerns are:

Fix the failing test by updating the usePaymentOptions mock to return payment options with valid payment types
Consider having MoneyReportHeader consume the hook to eliminate the duplication
Consider reducing Onyx subscriptions by passing shared data from the parent component

situchan · 2026-03-24T03:38:20Z

Please address AI reviews and still add production gate (both web and mobile) to avoid revert.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7ede93d634

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

src/hooks/useSelectionModeReportActions.ts

JmillsExpensify · 2026-03-24T12:47:07Z

Kicked off an adhoc. I'll have to come back to this one.

github-actions · 2026-03-24T12:47:33Z

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

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 · 2026-04-09T12:07:14Z

Completely remove beta check

If deploy blockers found, patch quickly. If not quick fix, just CP production gate or beta (not needing to revert entire code)

I think it's better. Removed the beta gate.

Signed-off-by: krishna2323 <[email protected]>

puneetlath · 2026-04-09T18:04:12Z

@puneetlath friendly bump!

Sorry, what am I being bumped on? Is this ready for me to review?

@puneetlath Please note that the isProduction gate has been removed from the desktop version, and on mobile, we have a beta check. I hope that's fine? Or should we also add a beta check on desktop, or completely remove the beta check from mobile and handle regressions if any?

I think no beta is ideal. Any particular reason why we need it here?

…02-3 Made-with: Cursor

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 · 2026-04-09T18:50:20Z

@MelvinBot check the last commit and confirm that the conflict was resolved correctly—it was a bit complex.

Krishna2323 · 2026-04-09T18:50:55Z

Is this ready for me to review?

yes

MelvinBot · 2026-04-09T18:59:20Z

The merge conflict resolution in the last commit (58d51b6) looks correct. Here's a summary:

Files with conflicts: MoneyReportHeader.tsx and MoneyRequestReportActionsList.tsx

What was merged:

From main: BulkDuplicateHandler component, duplicate-related fields (isDuplicateOptionVisible, setDuplicateHandler, allTransactions, allReports) in useSelectedTransactionsActions
From this PR: Selection mode Submit/Approve/Pay actions, MoneyReportHeaderKYCDropdown, ProcessMoneyReportHoldMenu, useSelectionModeReportActions hook, handleDeleteTransactions

Verified:

No leftover conflict markers (<<<<<<, >>>>>>, =======)
No duplicate imports (apparent duplicates are standard type vs value imports)
useSelectedTransactionsActions hook destructuring correctly includes all fields from both sides
JSX nesting is correct — Fragment wraps BulkDuplicateHandler + View with selection mode changes
BulkDuplicateHandler receives all required props in both files
All variables referenced in merged code are properly sourced from their hooks

No issues found — the resolution correctly preserves both the PR's selection mode payment actions and main's bulk duplicate handling.

src/hooks/useSelectionModeReportActions.ts

…onvention Signed-off-by: krishna2323 <[email protected]>

Signed-off-by: krishna2323 <[email protected]>

github-actions · 2026-04-09T19:30:15Z

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

github-actions · 2026-04-09T19:36:58Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-c50c2fd-b0990c7-6d19a789025720ce9b279fd461cca7e90674add1/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-c50c2fd-b0990c7-7769e75afc832ceb494d147f4334bb187b08273c/index.html

Web 🕸️
https://85796.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-04-09T19:39:08Z

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

situchan · 2026-04-09T19:48:18Z

src/hooks/useSelectionModeReportActions.ts

+        if (!isUserValidated) {
+            handleUnvalidatedAccount(report);
+            return true;


@MelvinBot This should return true only when payment type is NOT Elsewhere.
The behavior recently changed in #86714 which was merged 3 hrs ago.
As our PR was merged later, can you create followup PR?

Created followup PR: #87536

The fix adds an optional paymentMethodType parameter to shouldBlockAction and skips the isUserValidated check when the payment type is ELSEWHERE, matching the behavior from #86714. Also added unit tests for both cases.

Please mark it as "Ready for review" when it is ready.

OSBotify · 2026-04-10T08:25:07Z

🚀 Deployed to staging by https://github.com/puneetlath in version: 9.3.58-0 🚀

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

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot · 2026-04-10T08:29:02Z

I reviewed the changes in this PR against the help site articles under App/docs/articles.

Finding: The article Getting-Started-with-the-Reports-Page.md lists bulk actions available when selecting expenses (Move, Download, Hold, Delete) but does not mention Submit, Approve, or Pay — which this PR now ships to production via the mobile selection mode dropdown.

Help site PR created: #87570

The update adds a note explaining that when all expenses are selected on mobile, the bulk action menu also includes report-level actions (Submit, Approve, Pay) depending on report status and role.

jponikarchuk · 2026-04-10T15:49:53Z

Deploy Blocker #87644 was identified to be related to this PR.

jponikarchuk · 2026-04-10T15:53:15Z

This PR failing because of the issue #87644
This issue is reproducible in: Android

Add selection mode Submit/Approve/Pay actions for mobile layout.

03be3c8

Signed-off-by: krishna2323 <[email protected]>

melvin-bot bot assigned Krishna2323 Mar 19, 2026

Krishna2323 added 2 commits March 19, 2026 18:35

Add ProcessMoneyReportHoldMenu to mobile selection mode

250471a

Signed-off-by: krishna2323 <[email protected]>

Remove production gate from selection mode actions and add unit tests

9e3293c

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 mentioned this pull request Mar 19, 2026

[$250] Show Submit/Approve/Pay options when all expenses within a report are selected #72502

Open

Krishna2323 added 2 commits March 23, 2026 23:20

Merge remote-tracking branch 'upstream/main' into krishna2323/issue/7…

51c513d

…2502-3 Made-with: Cursor # Conflicts: # src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

fix ESLint.

b74539f

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 marked this pull request as ready for review March 23, 2026 19:32

Krishna2323 requested review from a team as code owners March 23, 2026 19:32

melvin-bot bot requested review from situchan and removed request for a team March 23, 2026 19:32

melvin-bot bot requested review from JmillsExpensify and removed request for a team March 23, 2026 19:32

chatgpt-codex-connector bot reviewed Mar 23, 2026

View reviewed changes

src/hooks/useSelectionModeReportActions.ts Outdated Show resolved Hide resolved

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx Outdated Show resolved Hide resolved

Fix selection mode actions parity between desktop and mobile

7ede93d

Signed-off-by: krishna2323 <[email protected]>

chatgpt-codex-connector bot reviewed Mar 24, 2026

View reviewed changes

src/hooks/useSelectionModeReportActions.ts Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

Krishna2323 added 6 commits March 26, 2026 05:23

Merge branch 'Expensify:main' into krishna2323/issue/72502-3

0892245

Fix mobile selection mode parity issues with desktop implementation

8d6d5ca

Signed-off-by: krishna2323 <[email protected]>

fix tests.

f320ba4

Signed-off-by: krishna2323 <[email protected]>

Add production gate and exit selection mode after report-level actions

d379acb

Signed-off-by: krishna2323 <[email protected]>

remove beta guard from MoneyReportHeader.

7394139

Signed-off-by: krishna2323 <[email protected]>

fix dropdown width issue and modal close lag.

1f93cfd

Signed-off-by: krishna2323 <[email protected]>

Remove SELECTION_MODE_REPORT_ACTIONS beta gate from mobile

cf711e4

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 added 2 commits April 9, 2026 17:46

Merge branch 'Expensify:main' into krishna2323/issue/72502-3

3a67e41

fix ESLint.

cc74ecc

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 added 2 commits April 10, 2026 00:10

Merge remote-tracking branch 'origin/main' into krishna2323/issue/725…

3bdbf5d

…02-3 Made-with: Cursor

Merge branch 'main' from upstream into krishna2323/issue/72502-3

58d51b6

Signed-off-by: krishna2323 <[email protected]>

puneetlath requested changes Apr 9, 2026

View reviewed changes

src/hooks/useSelectionModeReportActions.ts Outdated Show resolved Hide resolved

Rename checkForNecessaryAction to shouldBlockAction for bool naming c…

9fd4dfd

…onvention Signed-off-by: krishna2323 <[email protected]>

puneetlath previously approved these changes Apr 9, 2026

View reviewed changes

Rename checkForNecessaryAction to shouldBlockAction in tests

7a867d9

Signed-off-by: krishna2323 <[email protected]>

Krishna2323 dismissed puneetlath’s stale review via 7a867d9 April 9, 2026 19:11

puneetlath approved these changes Apr 9, 2026

View reviewed changes

puneetlath merged commit c50c2fd into Expensify:main Apr 9, 2026
32 checks passed

situchan reviewed Apr 9, 2026

View reviewed changes

MelvinBot mentioned this pull request Apr 9, 2026

Skip unvalidated account check for Elsewhere payments in selection mode #87536

Merged

53 tasks

OSBotify mentioned this pull request Apr 10, 2026

Deploy Checklist: New Expensify 2026-04-10 #87562

Open

83 tasks

MelvinBot mentioned this pull request Apr 10, 2026

Update help site for mobile selection mode actions #87570

Open

2 tasks

jponikarchuk mentioned this pull request Apr 10, 2026

Report - Held expense is automatically unheld after bulk approving report. #87644

Closed

7 tasks

nlemma mentioned this pull request Apr 10, 2026

"Pay" appears offline for bulk selected expenses in report #87671

Closed

7 tasks

Conversation

Krishna2323 commented Mar 19, 2026 • 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

1. Submit action via selection mode (Mobile)

2. Approve action via selection mode (Mobile)

3. Pay action via selection mode (Mobile)

4. Approve with delegate restriction (Mobile)

5. Approve with held expenses (Mobile)

6. Pay as business (Mobile)

7. Partial selection — no report-level actions (Mobile)

8. KYC dropdown vs plain dropdown rendering (Mobile-specific)

9. Offline behavior (Mobile)

10. Submit blocked by policy rules (Mobile)

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov bot commented Mar 19, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot bot commented Mar 23, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

MelvinBot commented Mar 24, 2026

Code Review

CI Status

Failing Test

Code Observations

Summary

Uh oh!

situchan commented Mar 24, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

JmillsExpensify commented Mar 24, 2026

Uh oh!

github-actions bot commented Mar 24, 2026

Uh oh!

This comment has been minimized.

Krishna2323 commented Apr 9, 2026

Uh oh!

puneetlath commented Apr 9, 2026

Uh oh!

Krishna2323 commented Apr 9, 2026

Uh oh!

Krishna2323 commented Apr 9, 2026

Uh oh!

MelvinBot commented Apr 9, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 9, 2026

Uh oh!

github-actions bot commented Apr 9, 2026

Uh oh!

OSBotify commented Apr 9, 2026

Uh oh!

situchan Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

MelvinBot Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Apr 10, 2026

Uh oh!

MelvinBot commented Apr 10, 2026

Uh oh!

Krishna2323 commented Mar 19, 2026 •

edited

Loading

codecov bot commented Mar 19, 2026 •

edited by github-actions bot

Loading