Split the confirmation footer by variants pt2 by VickyStash · Pull Request #100041 · Expensify/App

VickyStash · 2026-09-01T13:43:55Z

Explanation of Change

Refactor with no behavior change.
Follows #99578, which turned MoneyRequestConfirmationListFooter into a dispatcher with per-type variants and migrated per-diem and time footers. This one migrates the rest and deletes the fallback.

Six new variants:

DistanceMapFooter
DistanceManualFooter
DistanceOdometerFooter
ScanFooter
ManualFooter
InvoiceFooter

Each renders only the sections its expense type reaches.

Fixed Issues

$ #99449
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

This is a refactor with no intended behavior change, so testing is regression-focused: every expense type must render and submit exactly as before.

Please, verify the confirmation page looks and works same way as before in the next scenariosu:

Manual expense creation.
Scan expense creation. Verify the compact layout with the receipt thumbnail, that "Show more" expands the remaining fields, and that submitting works.
Distance expense via the map creation.
Distance expense via manual entry.
Distance expense via odometer.
Create an invoice. Verify the sender row renders above the fields.
Submitting untracked expense from self DM.

Offline tests

Same, as in Tests section

QA Steps

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

Verify that no errors appear in the JS console

Same, as in Tests section

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

codecov · 2026-09-01T13:47:49Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
...onents/MoneyRequestConfirmationFields/Provider.tsx	`100.00% <100.00%> (ø)`
...mponents/MoneyRequestConfirmationFields/context.ts	`80.00% <ø> (ø)`
src/components/MoneyRequestConfirmationList.tsx	`94.20% <ø> (ø)`
...eyRequestConfirmationList/sections/AmountField.tsx	`44.44% <100.00%> (ø)`
...RequestConfirmationList/sections/DistanceField.tsx	`70.00% <100.00%> (+1.57%)`	⬆️
...stConfirmationList/sections/InvoiceSenderField.tsx	`92.85% <100.00%> (+0.54%)`	⬆️
...RequestConfirmationList/sections/MerchantField.tsx	`75.00% <100.00%> (ø)`
...oneyRequestConfirmationList/sections/RateField.tsx	`80.64% <100.00%> (+0.64%)`	⬆️
...ieldGroups/detailsFields/DistanceDetailsFields.tsx	`100.00% <100.00%> (ø)`
.../fieldGroups/detailsFields/ManualDetailsFields.tsx	`100.00% <100.00%> (ø)`
... and 10 more
... and 235 files with indirect coverage changes

VickyStash · 2026-09-01T14:26:28Z

@codex review

VickyStash · 2026-09-01T14:26:39Z

@MelvinBot review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: bf73a117e2

ℹ️ 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".

MelvinBot · 2026-09-01T14:50:02Z

🤖 Code review: split the confirmation footer by variants pt2

One thing I'd fix before merge — the amount field's autofocus is silently dropped. Everything else is robustness/style, and I confirmed several things that look risky in the diff are actually fine.

🔴 `autoFocus` is no longer passed to `AmountField`

The deleted TransactionDetailsFields computed shouldAutoFocusAmountField = !canUseTouchScreen() and passed autoFocus={shouldAutoFocusAmountField} to AmountField. Neither ManualDetailsFields.tsx:36-45 nor DistanceDetailsFields passes it, so it falls back to its autoFocus = false default. After this PR nothing in the footer tree passes it:

$ grep -rn "autoFocus\|canUseTouchScreen" src/components/MoneyRequestConfirmationListFooter/
(no matches)

That disables the focus effect at AmountField.tsx:117-130, so in the new manual expense flow the amount input no longer regains focus when the participant picker closes on non-touch devices.

The giveaway that this was accidental: ManualDetailsFields still threads isParticipantPickerVisible into AmountField (L43), but that prop exists only to gate the autoFocus effect — so it is now inert too.

Fix: pass autoFocus={!canUseTouchScreen()} in ManualDetailsFields. Distance and time don't need it (isAmountFieldDisabled already covers both). If dropping it everywhere was intentional, then delete the autoFocus prop and the isParticipantPickerVisible threading rather than leaving them half-wired.

🟡 The router's branch order is load-bearing but undocumented

index.tsx:19-49 checks isTypeInvoice before the distance and scan branches. An invoice that was also a distance or scan request would silently lose the map, the Distance field, the Rate field, and compact mode.

I traced it and neither combination is reachable today — the Distance tab is SPLIT-only (IOURequestStartPage.tsx:318) and shouldUseTab excludes invoice (L71), so iouRequestType never becomes DISTANCE*/SCAN for an invoice. So it's not a bug — but this file's correctness now rests on an invariant three files away, and the PR deletes the JSDoc that used to explain footer selection. Please add a comment saying why invoice wins.

🟡 New files have no header description

Seven new files, none with a header comment. The two files this PR deletes (TransactionDetailsFields/index.tsx, InvoiceSenderSection.tsx) and DefaultFooter all had one explaining their role, and our standards ask non-trivial new files to start with a description. The refactor reads as a net loss of "why" documentation.

🟢 Checked and fine

{...errorState} is equivalent to the four explicit props — ErrorState is exactly {shouldDisplayFieldError, formError, clearFormErrors, setFormError}.
receiptStitchError kept only in DistanceOdometerFooter — correct, it originates from useOdometerReceiptStitcher.
Dropping isCompactMode/compactControls from the non-scan variants — correct, isCompactMode = !showMoreFields && isScanRequest && !isInLandscapeMode.
Dropping the fieldVisibility.distance / .rate guards inside DistanceDetailsFields — safe, both equal isDistanceRequest.
distanceRateCurrency dropped from ManualDetailsFields' AmountField — no effect, only read when isDistanceRequest.
TimeFields still rendered, via the pre-existing TimeDetailsFields.
shouldShowDistanceMap is not orphaned — still used by DistanceMapSection and ReceiptSection.

Tests

Only DistanceField.test.tsx was updated, and the Provider-wrapping change there is a clean improvement. But the new router in index.tsx is the whole point of the PR and has no test — a mis-ordered or missing branch drops fields with no type error and no test failure. A small table-driven test asserting each flag combination selects the expected variant would lock in the behavior this PR is asserting.

The PR body is also still the empty template: no explanation of change, no Tests or QA steps, no screenshots, checklist unchecked.

Duplication

The five new variants are largely identical ConfirmationFieldList prop threading. I read that as the deliberate tradeoff of splitting by variant (explicit over DRY) so I'm not asking you to change it — just flagging that a reviewer may push back on it.

🤖 Web smoke test: ⚠️ partial

I drove the PR branch on dev NewDot to confirm the two main variants still render. Manual and distance confirmation pages both render their expected fields; I could not check the JS console because the web driver doesn't expose it.

Step	Status
Manual expense confirmation page shows Amount, Merchant, and Description fields `is visible` passed for label="Amount, €5.00", label="Merchant", label="Description" on the Confirm details page reached via + > Create expense > Manual.	✅
Distance expense confirmation page shows route map, Distance field, and Rate field `is visible` passed for role=region label="Map", label="Distance, 0.51 kilometers", label="Rate, €0.3 / kilometer" on the Confirm details page reached via Distance > Map tab with start/stop addresses set.	✅
JS console errors/warnings during both flows Not checkable: the web driver has no console inspection command. No error banners, toasts, or broken screens appeared in either flow, but that is not equivalent to a console check.	❌

Note the smoke test only covers the manual and distance-map variants. Scan, odometer, invoice, and the compact-mode path are untested, and the autofocus regression above would not show up in either flow I ran.

view run

…rs-pt2

…rs-pt2 # Conflicts: # src/components/MoneyRequestConfirmationList/sections/InvoiceSenderField.tsx

VickyStash · 2026-09-02T07:34:32Z

@codex review

chatgpt-codex-connector · 2026-09-02T07:40:34Z

Codex Review: Didn't find any major issues. Another round soon, please!

Reviewed commit: 0ff12e019d

ℹ️ 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".

VickyStash · 2026-09-02T07:41:35Z

@MelvinBot review

MelvinBot · 2026-09-02T08:08:35Z

🤖 Code review round 2: split the confirmation footer by variants pt2

No behavior regression found. I traced all eight router branches and every prop each variant threads, and the refactor is equivalent to the old DefaultFooter + TransactionDetailsFields pair for every reachable flag combination. The autoFocus fix from round 1 is genuinely correct, and the added comments closed most of the documentation gap.

npm run test and npm run typecheck both pass locally (38 tests across the 6 relevant suites, zero type errors).

Two things worth addressing before merge, both about the new structure rather than the behavior it produces.

🟡 The router is the point of this PR and has no test coverage

tests/ui/MoneyRequestReportFooter.tsx is the only test that renders the router, and its providerProps omit every mode flag — isTypeInvoice, isPerDiemRequest, isTimeRequest, isDistanceRequest, isManualDistanceRequest, isOdometerDistanceRequest, isScanRequest. They all take their false default, so all five tests fall through to the residual return <ManualFooter {...props} /> at index.tsx:60. Seven of eight branches never render.

And all five assertions target the same shared element:

const reportItem = screen.getByTestId('menu-item-Report');

menu-item-Report comes from SettingsFields inside ConfirmationFieldList, which every variant renders — so even a deliberately mis-wired router would still pass.

This matters more than usual because this PR deleted a guard rather than moving it. DistanceMapSection used to self-guard with if (!isDistanceRequest || isManualDistanceRequest || isOdometerDistanceRequest) return null;. That invariant now lives only in the fall-through order at index.tsx:44-54, where reordering three lines silently drops the map with no type error and no test failure.

Ask: the harness in that file is already 90% of the work. Parameterize providerProps over the eight flag combinations and assert one variant-unique marker each — the map section, the invoice sender row, the odometer stitch error, the compact flex1 wrapper.

🟡 The footer shape now hinges on optional `= false` booleans

Every mode flag in Provider.tsx:95-102 is optional with a false default. Before this PR, the invoice guard read iouType !== CONST.IOU.TYPE.INVOICE off the required iouType field. Now isTypeInvoice — a separate optional boolean that can legally be false while iouType === INVOICE — gates the entire InvoiceFooter including the sender row.

Not reachable today (MoneyRequestConfirmationList passes both from the same expression), but the invariant went from enforced-by-type to enforced-by-convention. Deriving isTypeInvoice from the already-required iouType inside the router, as the deleted InvoiceSenderSection did, removes one way to get a silently wrong footer for free.

Related: the Omit<> variant prop types read like a safety net but aren't one. InvoiceFooterProps omits distanceData/isCompactMode, but the router spreads the full props object, so if invoice ever gains a scan or distance tab the footer drops those fields with no compile error.

🟢 Nits

index.tsx:44-54 — the distance sub-ordering is the one load-bearing order left uncommented. The deleted DistanceMapSection guard also carried a performance rationale (its two-level structure avoided Onyx subscriptions on flows where the map can never render) that now lives nowhere.
selectors.ts:230 — stale // --- InvoiceSenderSection --- header pointing at the file this PR deletes. invoiceSenderSliceSelector is now consumed by InvoiceSenderField.
types.ts:59,61 — ManualFooterProps and InvoiceFooterProps are character-identical. type InvoiceFooterProps = ManualFooterProps; keeps them from drifting.
The test steps skip numbers 6 and 7 (1,2,3,4,5,8,9), and the author checklist and Screenshots sections are still empty.

Things I checked that turned out fine

autoFocus (round 1's 🔴) — genuinely fixed and equivalent. aef4d61b31 moved !canUseTouchScreen() into the component as shouldAutoFocusOnMount (AmountField.tsx:67) and deleted the prop. Old semantics weren't uniform — TimeDetailsFields never passed it and got the false default — so the new always-on value technically diverges for the time path. It's inert: isAmountFieldDisabled = didConfirm || isReadOnly || shouldShowTimeRequestFields || isDistanceRequest is true there, and the effect returns before autofocusing. Worth knowing that the policy is now the component's rather than the caller's, so future call sites opt in silently.

isParticipantPickerVisible dropped from the distance path. DistanceDetailsFields.tsx:38-47 no longer passes it. The state is reachable (a distance expense from global create can open the picker), and it's harmless only because isDistanceRequest already forces isAmountFieldDisabled true. Cheap to pass through if you want it robust.

Section-by-section equivalence. Order is preserved in every variant. Old was Amount → Merchant → Description → Distance → Rate → Time; ManualDetailsFields keeps Amount → Merchant → Description, DistanceDetailsFields keeps Amount → Description → Distance → Rate. The removed wrapper <View> around the invoice/map sections carried no style, so removing it is layout-neutral in a column container.

Deleted fieldVisibility guards are provably dead in their new homes. fieldVisibility.distance and .rate are both literally isDistanceRequest. shouldShowMerchant contains && !isDistanceRequest. shouldShowTimeRequestFields = isTimeRequest && action === CREATE, which is exactly the TimeFooter branch condition.

Compact-mode plumbing scoped to ScanFooter. Safe because isCompactMode = !showMoreFields && isScanRequest && !isInLandscapeMode (MoneyRequestConfirmationList.tsx:525), and the mode flags are mutually exclusive since they all key off the single transaction.iouRequestType scalar. The defaults are unreachable rather than merely benign — the show-more button only renders behind compactState.isCompactMode.

receiptStitchError scoped to DistanceOdometerFooter. useOdometerReceiptStitcher resets to idle whenever !isOdometerDistanceRequest, so the error is non-null only for odometer.

distanceRateCurrency dropped from ManualDetailsFields. Only read under isDistanceRequest ? ..., which that variant passes as false.

Invoice-first branch order is safe. An invoice is always iouRequestType: 'manual' — IOURequestStartPage.tsx:72 sets shouldUseTab = false for INVOICE and the request type then returns MANUAL. No escape hatch via the receipt empty state either.

Context migration. useConfirmationFields throws if used outside the Provider, so a missing Provider would fail loudly rather than default silently. There is exactly one Provider render site and it wraps the whole footer. Nothing outside the footer tree imports the changed or deleted components.

DistanceField.test.tsx is a clean adaptation. Both assertions are byte-identical to main; the ten deleted defaultProps all land on the same values via Provider defaults. It's marginally stronger on typing. One caveat: it now depends on those defaults rather than stating the flags, so if isReadOnly or isManualDistanceRequest ever defaults to true the test silently exercises a different branch instead of failing.

Standards. All seven new files have header descriptions, none uses useMemo/useCallback/React.memo (correct under React Compiler), no inline styles, no unused props or imports, and npm run lint-changed is clean.

Duplication across the five variants. They're largely identical ConfirmationFieldList prop threading. I read that as the deliberate explicit-over-DRY tradeoff of splitting by variant, so I'm not asking you to change it.

Couldn't verify: web smoke test and React Compiler check

Web smoke test — blocked by infra, twice. The browser tab in this run's session was blank (0 DOM nodes, no network activity, pure white screenshots) from before my first command through the end of the run. Two testers tried independently; both confirmed the dev server and bundles were healthy (curl returns 200, rsbuild reported ready built in 20.6s with no compile errors on your branch) and that the page never painted even the static splash HTML. The session's Chrome process had restarted underneath it without a corresponding navigation. Reload is forbidden in this harness because it drops auth, so no in-session recovery was possible. None of the seven expense-type flows were exercised — that is an infra failure, not a signal about your code.

react-compiler-compliance-check aborted on an empty base-ref env var in this sandbox (fatal: ambiguous argument 'origin/'), so I can't claim compliance either way for the new components. CI is the real gate.

view run

VickyStash added 2 commits September 1, 2026 15:20

Extract distance footers

aa0f18c

Extract Invoice, Scan and Manual footers

1c20ea6

melvin-bot Bot assigned VickyStash Sep 1, 2026

VickyStash added 4 commits September 1, 2026 16:03

Use params from context

3a65421

Clean up

09422e4

Remove InvoiceSenderSection

b31c552

Clean up pt2

bf73a11

chatgpt-codex-connector Bot reviewed Sep 1, 2026

View reviewed changes

Comment thread ...ponents/MoneyRequestConfirmationListFooter/fieldGroups/detailsFields/ManualDetailsFields.tsx

VickyStash added 3 commits September 1, 2026 17:18

Fix autoFocus prop

aef4d61

Add comments

50f45a2

Merge branch 'main' into VickyStash/refactor/99449-confirmation-foote…

37ab8ce

…rs-pt2

VickyStash mentioned this pull request Sep 1, 2026

[Refactor] Split IOURequestStepConfirmation, MoneyRequestConfirmationList, and useExpenseSubmission per expense type #99449

Open

Merge branch 'main' into VickyStash/refactor/99449-confirmation-foote…

0ff12e0

…rs-pt2 # Conflicts: # src/components/MoneyRequestConfirmationList/sections/InvoiceSenderField.tsx

Navigation Menu

Uh oh!

Split the confirmation footer by variants pt2 - #100041

Split the confirmation footer by variants pt2#100041
VickyStash wants to merge 10 commits into
Expensify:mainfrom
callstack-internal:VickyStash/refactor/99449-confirmation-footers-pt2

VickyStash commented Sep 1, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Sep 1, 2026 •

edited by github-actions Bot

Loading

Uh oh!

VickyStash commented Sep 1, 2026

Uh oh!

VickyStash commented Sep 1, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

MelvinBot commented Sep 1, 2026

Uh oh!

VickyStash commented Sep 2, 2026

Uh oh!

chatgpt-codex-connector Bot commented Sep 2, 2026

Uh oh!

VickyStash commented Sep 2, 2026

Uh oh!

MelvinBot commented Sep 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

VickyStash commented Sep 1, 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

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Sep 1, 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!

VickyStash commented Sep 1, 2026

Uh oh!

VickyStash commented Sep 1, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

MelvinBot commented Sep 1, 2026

🔴 autoFocus is no longer passed to AmountField

🟡 The router's branch order is load-bearing but undocumented

🟡 New files have no header description

🟢 Checked and fine

Tests

Duplication

🤖 Web smoke test: ⚠️ partial

Uh oh!

VickyStash commented Sep 2, 2026

Uh oh!

chatgpt-codex-connector Bot commented Sep 2, 2026

Uh oh!

VickyStash commented Sep 2, 2026

Uh oh!

MelvinBot commented Sep 2, 2026

🟡 The router is the point of this PR and has no test coverage

🟡 The footer shape now hinges on optional = false booleans

🟢 Nits

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

VickyStash commented Sep 1, 2026 •

edited

Loading

codecov Bot commented Sep 1, 2026 •

edited by github-actions Bot

Loading

🔴 `autoFocus` is no longer passed to `AmountField`

🟡 The footer shape now hinges on optional `= false` booleans