Skip to content

Migrate money request hold reason and receipt view routes to dynamic … - #98751

Draft
suneox wants to merge 2 commits into
Expensify:mainfrom
suneox:83853-migrate-money-request-part-6-part-1-suneox
Draft

Migrate money request hold reason and receipt view routes to dynamic …#98751
suneox wants to merge 2 commits into
Expensify:mainfrom
suneox:83853-migrate-money-request-part-6-part-1-suneox

Conversation

@suneox

@suneox suneox commented Aug 17, 2026 •
edited by JmillsExpensify
Loading

Copy link
Copy Markdown
Contributor

Explanation of Change

Part 1 of #83853 (BT-125). Migrates the last backTo-based money request routes MONEY_REQUEST_HOLD_REASON and MONEY_REQUEST_RECEIPT_VIEW to dynamic routes, following the established MONEY_REQUEST_STEP_TAX_RATE pattern:

  • Added DYNAMIC_ROUTES.MONEY_REQUEST_HOLD_REASON (suffix hold-reason, query params transactionID/reportID, entry screens: REPORT + the 3 search RHP screens) and DYNAMIC_ROUTES.MONEY_REQUEST_RECEIPT_VIEW (suffix receipt-view, query param transactionID, entry screens: CREATE + STEP_SCAN).
  • Renamed the pages to DynamicHoldReasonPage / DynamicReceiptView and replaced route.params.backTo with useDynamicBackPath, so the back target is derived from the current URL instead of an encoded query param.
  • Swapped the screen keys (DYNAMIC_HOLD_REASON / DYNAMIC_RECEIPT_VIEW) in SCREENS, the linking config, MoneyRequestModalStackNavigator and the param list types; updated the navigation call sites in ReportUtils.changeMoneyRequestHoldStatus and ReceiptPreviews to createDynamicRoute.
  • No OldRoutes redirect was added: the legacy URLs carried the base screen inside the ?backTo= query (and reportID was hand-appended to the query as well), which the redirect engine cannot lift into the path. Neither route had any existing redirect on main, so no previously-working link changes behavior — legacy URLs now land on the NotFound page gracefully.

Fixed Issues

$ #83853
PROPOSAL:

Tests

DYNAMIC_ROUTES.MONEY_REQUEST_HOLD_REASON — single-expense hold reason page (context menu / secondary actions)

+++ Case 1.1 — Open hold reason page from expense context menu and verify the dynamic URL

Target: src/libs/ReportUtils.ts:5555

Precondition: Test account has at least one expense (not on hold) in a 1:1 chat or workspace report; report not approved/paid/closed; expense not being SmartScanned.

// Skip the first-time "Hold" educational modal (submitter / DM branch)
Onyx.merge('nvp_dismissedHoldUseExplanation', true);
// Skip the "Reject/Hold" explanation modal on the approver branch (1:1 request)
Onyx.merge('nvp_dismissedRejectUseExplanation', true);

Steps:

  1. Open the app in a browser and sign in with the test account.
  2. Open the chat report containing the expense (URL like /r/<reportID>).
  3. Right-click (or long-press) the expense message to open the context menu.
  4. Select Hold.

Expected: The hold reason page opens: header "Hold expense", description "Explain why you're holding this expense.", a Reason field and a "Hold expense" submit button. The URL is the source screen's URL plus the suffix: /r/<reportID>/hold-reason?transactionID=<transactionID>&reportID=<childReportID> — no ?backTo= parameter remains.

+++

+++ Case 1.2 — Back (X) returns to the source screen with the suffix stripped from the URL

Target: src/pages/iou/HoldReasonFormView.tsx:52

Precondition: Same as Case 1.1 (currently on the hold reason page, URL /r/<reportID>/hold-reason?transactionID=...&reportID=...).

Steps:

  1. Complete Case 1.1 so you are on the hold reason page.
  2. Click the back button (left arrow / X) in the "Hold expense" header.
  3. Observe the screen and URL.

Expected: You return to the same chat report /r/<reportID>. The URL no longer has the hold-reason suffix nor the transactionID/reportID query params. The expense is NOT held (no "held this expense" message).

+++

+++ Case 1.3 — Submit the reason: expense is held and the app returns to the source screen

Target: src/pages/iou/DynamicHoldReasonPage.tsx:80

Precondition: Same as Case 1.1.

Steps:

  1. Complete Case 1.1 to enter the hold reason page.
  2. Leave the Reason field empty and click "Hold expense" — observe validation.
  3. Type any text into Reason (e.g. "Waiting for missing receipt").
  4. Click "Hold expense".
  5. Observe the screen, URL and chat message.

Expected: Step 2 shows a required-field error on Reason. Step 4 submits successfully: putOnHold is called and the app goes back to the source chat report — URL returns to /r/<reportID> (suffix stripped). A system message like "held this expense" appears in the chat and the expense shows the on-hold state (context-menu label changes to "Remove hold"/"Unhold").

+++

+++ Case 1.4 — Refresh (F5) on the dynamic URL restores the full stack

Target: src/libs/Navigation/linkingConfig/config.ts:1794

Precondition: Same as Case 1.1; currently on the hold reason page at URL /r/<reportID>/hold-reason?transactionID=...&reportID=....

Steps:

  1. On the hold reason page, press F5 (reload) on that exact dynamic URL.
  2. Wait for the app to load and observe the screen.
  3. Click the back (X) button in the header.

Expected: After reload the hold reason page is fully restored: "Hold expense" title, Reason field, submit button — no white screen, no NotFound. Back in step 3 returns to the correct chat report /r/<reportID> (the base screen + dynamic page stack is restored from the URL).

+++

+++ Case 1.5 — Legacy URL (:type/edit/reason/...?backTo=) shows the NotFound page (accepted regression)

Target: src/ROUTES.ts:369

Precondition: Signed in to the app in a browser.

Steps:

  1. On a signed-in tab, paste a legacy URL into the address bar, e.g. https://<domain>/personal/edit/reason/1234567890.1234567?backTo=%2Fr%2F9876543210 (or replace personal with team/corporate).
  2. Press Enter and observe.

Expected: The NotFound page is shown ("Oops, this page cannot be found") with a back button — no crash, no white screen, no redirect loop. ⚠️ This is an accepted regression: the old static route was removed and the legacy base lived inside the ?backTo= query, which cannot be lifted into the path for a redirect. The case only confirms the failure is graceful.

+++

DYNAMIC_ROUTES.MONEY_REQUEST_RECEIPT_VIEW — receipt carousel view from multi-scan thumbnail previews

+++ Case 2.1 — Open receipt view from a thumbnail preview on the scan tab and verify the dynamic URL

Target: src/pages/iou/request/step/IOURequestStepScan/components/ReceiptPreviews/index.tsx:105

Precondition: Enable mobile emulation / mobile UA in DevTools (thumbnail previews only render in the mobile camera variant; desktop shows drag-and-drop). Allow camera access.

// Skip the multi-scan educational modal shown the first time the toggle is enabled
Onyx.merge('nvp_dismissedProductTraining', {multiScanEducationalModal: true});

Steps:

  1. Open the app (mobile emulation), tap the FAB (+) → choose the Scan receipt quick action → the scan tab of the create-expense page opens (URL like /create/expense/start/<transactionID>/<reportID>/scan).
  2. Tap the multi-scan icon (stacked receipts icon in the bottom bar) to enable multi-scan.
  3. Capture 2 receipt photos with the shutter button.
  4. Observe the thumbnail strip below the camera; tap the second thumbnail.

Expected: The receipt view opens fullscreen: header "Receipt", back (X) and delete (trash) buttons, the receipt shown in a carousel. The URL is the current scan URL plus the suffix: /create/expense/start/<transactionID>/<reportID>/scan/receipt-view?transactionID=<draftTransactionID> — no ?backTo=, and the transactionID query matches the tapped receipt (the second image is displayed).

+++

+++ Case 2.2 — Back (header X and swipe down) returns to the scan tab with the suffix stripped

Target: src/pages/iou/request/step/IOURequestStepScan/DynamicReceiptView/index.tsx:83

Precondition: Same as Case 2.1; currently on the receipt view.

Steps:

  1. Complete Case 2.1 so you are on the receipt view.
  2. Click the back (X) button in the header — observe the screen and URL.
  3. Tap the thumbnail again to re-enter the receipt view, then swipe the image down — observe.

Expected: Both actions return to the scan tab of the create-expense flow (camera + thumbnail strip as before); the URL returns to /create/expense/start/<transactionID>/<reportID>/scan — the receipt-view suffix and transactionID query are stripped. The receipt remains in the preview strip (not deleted). If the swipe-down gesture can't be performed with a mouse, use touch emulation and just verify the header X.

+++

+++ Case 2.3 — Refresh (F5) on the dynamic URL restores the full scan + receipt view stack

Target: src/libs/Navigation/linkingConfig/config.ts:1800

Precondition: Same as Case 2.1; currently on the receipt view at URL /create/expense/start/<transactionID>/<reportID>/scan/receipt-view?transactionID=....

Steps:

  1. On the receipt view, press F5 (reload) on that exact dynamic URL.
  2. Wait for the app to load (re-accept camera permission if prompted) and observe.
  3. Click the back (X) button in the header.

Expected: After reload the receipt view is restored: "Receipt" header + the receipt matching the transactionID query still displays (the draft transaction persists in Onyx). Back in step 3 returns to the scan tab with the base URL (/create/expense/start/<transactionID>/<reportID>/scan) — no NotFound, no draft data loss.

+++

+++ Case 2.4 — Legacy URL (receipt-view/:transactionID?backTo=) shows the NotFound page (accepted regression)

Target: src/ROUTES.ts:375

Precondition: Signed in to the app in a browser.

Steps:

  1. On a signed-in tab, paste a legacy URL into the address bar, e.g. https://<domain>/receipt-view/1234567890.1234567?backTo=%2Fcreate%2Fexpense%2Fstart%2F....
  2. Press Enter and observe.

Expected: The NotFound page is shown ("Oops, this page cannot be found") with a back button — no crash, no white screen. ⚠️ Accepted regression (old static route removed; backTo lived in the query so a redirect is impossible). The case only confirms graceful failure.

+++

  • Verify that no errors appear in the JS console

Offline tests

  • Same as tests — navigation refactor, offline behavior unchanged.

QA Steps

Test case 1: Hold an expense and verify the new URL + back navigation

  1. Sign in and open a chat report that contains an expense (not yet on hold).
  2. Right-click the expense message and choose Hold.
  3. Verify the "Hold expense" page opens with a Reason field, and the address bar shows the report URL plus /hold-reason (e.g. /r/<reportID>/hold-reason?...) with no backTo in the URL.
  4. Type a reason and click Hold expense.
  5. Verify you return to the chat report, the URL no longer contains hold-reason, and the expense shows as held.

Test case 2: Open a captured receipt from the multi-scan previews (mobile web)

  1. Enable mobile emulation in DevTools, then tap the FAB (+) → Scan receipt.
  2. Enable multi-scan and capture 2 receipt photos.
  3. Tap a receipt thumbnail below the camera.
  4. Verify the receipt view opens full screen with a "Receipt" title, and the address bar shows the scan URL plus /receipt-view (no backTo in the URL).
  5. Tap the back (X) button.
  6. Verify you return to the scan screen and the URL no longer contains receipt-view.
  • Verify that no errors appear in the JS console

PR Author Checklist

  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I added steps for local testing in the Tests section
    • I added steps for the expected offline behavior in the Offline steps section
    • I added steps for Staging and/or Production testing in the QA steps section
    • I added steps to cover 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 tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
  • I included screenshots or videos for tests on all platforms
  • I ran the tests on all platforms & verified they passed on:
    • Android: Native
    • Android: mWeb Chrome
    • iOS: Native
    • iOS: mWeb Safari
    • MacOS: Chrome / Safari
  • I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
  • I followed proper code patterns (see Reviewing the code)
    • 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 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)
  • If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
  • I followed the guidelines as stated in the Review Guidelines
  • I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
  • 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 new assets were added or existing ones were modified, I verified that:
    • The assets are optimized and compressed (for SVG files, run npm run compress-svg)
    • The assets load correctly across all supported platforms.
  • 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.
  • I added unit tests for any new feature or bug fix in this PR to help automatically prevent regressions in this user 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.

Screenshots/Videos

Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari

+++ Case 1.1 — Open hold reason page from expense context menu and verify the dynamic URL

+++

+++ Case 1.2 — Back (X) returns to the source screen with the suffix stripped from the URL

+++

+++ Case 1.3 — Submit the reason: expense is held and the app returns to the source screen

+++

+++ Case 1.4 — Refresh (F5) on the dynamic URL restores the full stack

+++

+++ Case 1.5 — Legacy URL (:type/edit/reason/...?backTo=) shows the NotFound page (accepted regression)

+++

+++ Case 2.1 — Open receipt view from a thumbnail preview on the scan tab and verify the dynamic URL

+++

+++ Case 2.2 — Back (header X and swipe down) returns to the scan tab with the suffix stripped

+++

+++ Case 2.3 — Refresh (F5) on the dynamic URL restores the full scan + receipt view stack

+++

+++ Case 2.4 — Legacy URL (receipt-view/:transactionID?backTo=) shows the NotFound page (accepted regression)

+++

@suneox
suneox requested review from a team as code owners August 17, 2026 07:46
@melvin-bot
melvin-bot Bot requested review from JmillsExpensify and huult and removed request for a team August 17, 2026 07:47
@melvin-bot

melvin-bot Bot commented Aug 17, 2026

Copy link
Copy Markdown

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

@melvin-bot
melvin-bot Bot removed the request for review from a team August 17, 2026 07:47
@suneox
suneox marked this pull request as draft August 17, 2026 07:48
@codecov

codecov Bot commented Aug 17, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown

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/SCREENS.ts 100.00% <ø> (ø)
src/libs/Navigation/linkingConfig/config.ts 66.66% <ø> (ø)
src/libs/ReportUtils.ts 87.11% <100.00%> (-0.05%) ⬇️
src/ROUTES.ts 23.45% <50.00%> (-0.21%) ⬇️
src/pages/inbox/ReportNavigateAwayHandler.tsx 70.12% <0.00%> (ø)
...questStepScan/components/ReceiptPreviews/index.tsx 94.54% <0.00%> (ø)
...gation/AppNavigator/ModalStackNavigators/index.tsx 6.38% <0.00%> (ø)
...ep/IOURequestStepScan/DynamicReceiptView/index.tsx 0.00% <0.00%> (ø)
src/pages/iou/DynamicHoldReasonPage.tsx 0.00% <0.00%> (ø)
... and 33 files with indirect coverage changes

github-actions[bot]
github-actions Bot reviewed Aug 17, 2026
View reviewed changes
Comment thread src/pages/iou/request/step/IOURequestStepScan/DynamicReceiptView/index.tsx Outdated
@suneox
Migrate money request hold reason and receipt view routes to dynamic …
f1c9c09 
…routes

Part 1 of Expensify#83853. Replaces the backTo-based static routes
MONEY_REQUEST_HOLD_REASON and MONEY_REQUEST_RECEIPT_VIEW with dynamic
routes (suffix hold-reason / receipt-view + query params), following the
MONEY_REQUEST_STEP_TAX_RATE pattern:

- Add DYNAMIC_ROUTES entries with entryScreens (REPORT + search RHP
  screens for hold-reason; CREATE + STEP_SCAN for receipt-view)
- Rename pages to DynamicHoldReasonPage / DynamicReceiptView using
  useDynamicBackPath instead of route.params.backTo
- Swap screen keys (DYNAMIC_HOLD_REASON / DYNAMIC_RECEIPT_VIEW) in
  SCREENS, linkingConfig, ModalStackNavigators and types
- Update navigation call sites in ReportUtils.changeMoneyRequestHoldStatus
  and ReceiptPreviews to createDynamicRoute
- Update ReportNavigateAwayHandler screen-name check and unit tests

Legacy URLs carried the base screen inside ?backTo= (query), so no
OldRoutes redirect is technically possible; both routes had no existing
redirect on main either.
@suneox
suneox force-pushed the 83853-migrate-money-request-part-6-part-1-suneox branch from 111b739 to f1c9c09 Compare August 17, 2026 07:57
JmillsExpensify
JmillsExpensify reviewed Aug 17, 2026
View reviewed changes

@JmillsExpensify JmillsExpensify left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No product review required.

@JmillsExpensify
JmillsExpensify self-requested a review August 17, 2026 08:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments
@huult huult Awaiting requested review from huult
@JmillsExpensify JmillsExpensify Awaiting requested review from JmillsExpensify

At least 1 approving review is required to merge this pull request.

Assignees

@suneox suneox

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@suneox @JmillsExpensify