Migrate PaymentCardCurrencyModal to a @react-navigation modal screen by trasnake87 · Pull Request #91120 · Expensify/App

trasnake87 · 2026-05-19T21:14:12Z

Explanation of Change

PaymentCardCurrencyModal was a react-native-modal (RIGHT_DOCKED) rendered inside PaymentCardChangeCurrencyForm, driven by local isCurrencyModalVisible/currency state. Because react-native-modal mounts and animates independently of the native stack, it animated inconsistently with the surrounding @react-navigation screens (the problem described in the parent migration #53493).

This migrates the picker to a dynamic @react-navigation modal route, following the pattern established by PR #88915 (DynamicExpenseLimitTypeSelectorPage):

Adds DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR (path payment-card-currency) with the change-billing-currency screen as its only entry, and registers SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR in SCREENS, the SettingsNavigatorParamList, the SettingsModalStackNavigator, and the linkingConfig. The new navigator entry is wrapped in withAgentAccessDenied to match the rest of the change-billing-currency flow.
Adds pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage, which reads the selected currency from the CHANGE_BILLING_CURRENCY_FORM draft (falling back to the billing card currency from FUND_LIST, then USD), writes the chosen value to the draft via setDraftValues, navigates back via useDynamicBackPath, and applies the EUR_BILLING beta filter that previously lived in the modal.
Lifts the selected currency in PaymentCardChangeCurrencyForm from local useState to the CHANGE_BILLING_CURRENCY_FORM draft, navigates to the dynamic route on press (Navigation.navigate(createDynamicRoute(...))), drops the inline modal, and clears the draft on unmount. The non-security-code branch (used by the change-payment-currency screen) is unchanged in behavior — it still commits via changeBillingCurrency on selection.
Deletes src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx; it has no remaining importers.
Adds a regression test covering the EUR_BILLING beta filter, the draft-vs-FUND_LIST selection precedence, and the setDraftValues + goBack behavior on row select.

Fixed Issues

$ #90470
PROPOSAL: #90470 (comment)

Tests

Sign in as a Control/Collect workspace admin with a saved billing card.
Open Settings → Subscription → click the three-dot menu on the billing card → Change billing currency.
On the change-billing-currency screen, tap the Currency menu row.
Verify the currency picker opens as a screen that slides in like other native screens (not a modal that animates independently).
Select a different currency (e.g. AUD) and verify you return to the change-billing-currency screen with the Currency row now showing the picked value.
Re-open the picker; verify the previously selected currency is highlighted.
Enter a valid CVV, submit, and verify the billing currency is updated successfully.
With the eurBilling beta disabled, verify EUR is not listed in the picker. With the beta enabled, verify EUR is listed.

Verify that no errors appear in the JS console

Offline tests

The currency picker is client-side navigation and writes only to a local form draft; behavior is identical offline. Submitting the change-billing-currency form offline behaves the same as before this change.

Verify that no errors appear in the JS console

QA Steps

Same as tests.

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

web_91120_trim.mp4

melvin-bot · 2026-05-19T21:14:18Z

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

mountiny · 2026-05-20T17:56:19Z

Conflicts

mountiny · 2026-05-20T17:56:37Z

+
+DynamicPaymentCardCurrencySelectorPage.displayName = 'DynamicPaymentCardCurrencySelectorPage';


No need for this

Suggested change

DynamicPaymentCardCurrencySelectorPage.displayName = 'DynamicPaymentCardCurrencySelectorPage';

Copilot

Pull request overview

This PR migrates the billing-currency picker used in the subscription payment card flow from an inline react-native-modal to a dynamic @react-navigation modal screen, so its animation and back behavior match the native stack.

Changes:

Added a new dynamic settings modal route/screen for selecting the billing currency (payment-card-currency) and wired it into screens, navigators, and deep linking config.
Updated PaymentCardChangeCurrencyForm to navigate to the new selector screen and persist the selected currency in the CHANGE_BILLING_CURRENCY_FORM draft.
Added a unit test covering EUR beta filtering, currency resolution precedence, and draft-write + back navigation behavior.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/unit/pages/settings/DynamicPaymentCardCurrencySelectorPageTest.tsx	Adds unit coverage for beta filtering, selection precedence, and selection side-effects (draft write + back).
src/SCREENS.ts	Registers the new dynamic settings screen constant.
src/ROUTES.ts	Adds `DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR` dynamic suffix (`payment-card-currency`).
src/pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage.tsx	New selector page reading/writing the billing currency draft and applying EUR beta gating.
src/libs/Navigation/types.ts	Adds the new screen to `SettingsNavigatorParamList`.
src/libs/Navigation/linkingConfig/config.ts	Adds deep link mapping for the new dynamic selector route.
src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx	Registers the new screen in the settings modal stack (wrapped with agent access denied).
src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx	Removes the old inline modal implementation.
src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx	Navigates to the new selector and lifts selected currency into the billing currency form draft.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+    const currency = formDraft?.[INPUT_IDS.CURRENCY] ?? initialCurrency ?? CONST.PAYMENT_CARD_CURRENCY.USD;
+
+    useEffect(() => {
+        return () => {
+            clearDraftValues(ONYXKEYS.FORMS.CHANGE_BILLING_CURRENCY_FORM);
+        };
+    }, []);


codecov · 2026-05-20T18:06:52Z

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/ROUTES.ts	`17.62% <ø> (ø)`
src/SCREENS.ts	`100.00% <ø> (ø)`
src/libs/Navigation/linkingConfig/config.ts	`76.92% <ø> (ø)`
...entCard/DynamicPaymentCardCurrencySelectorPage.tsx	`100.00% <100.00%> (ø)`
...gation/AppNavigator/ModalStackNavigators/index.tsx	`6.69% <0.00%> (-0.01%)`	⬇️
...s/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx	`0.00% <0.00%> (ø)`
... and 16 files with indirect coverage changes

trasnake87 · 2026-05-20T19:07:34Z

Rebased on main (conflict was just both branches adding new entries under DYNAMIC_ROUTES).

Addressed @mountiny's note — dropped .displayName and inlined the literal string for testID, matching the convention used by the other Dynamic* settings pages.

Also scoped the CHANGE_BILLING_CURRENCY_FORM draft to the security-code branch only (the one that pushes to the new selector screen). The inline picker branch (isSecurityCodeRequired=false, the "Change payment currency" flow under AddPaymentCard) no longer reads or clears the shared draft, so a stale draft from a parallel subscription-billing flow can't override initialCurrency and a concurrent unmount can't wipe an in-progress draft in another tab.

Replace the inline react-native-modal currency picker on the change-billing- currency RHP with a dedicated @react-navigation modal screen registered as a dynamic route, following the pattern established for ExpenseLimitTypeSelector in Expensify#88915. - Add DYNAMIC_ROUTES.PAYMENT_CARD_CURRENCY_SELECTOR (path 'payment-card-currency') with the change-billing-currency screen as its only entry, register SETTINGS.SUBSCRIPTION.DYNAMIC_PAYMENT_CARD_CURRENCY_SELECTOR in SCREENS, the SettingsNavigatorParamList, the SettingsModalStackNavigator (gated by withAgentAccessDenied, matching the rest of the billing flow), and the linkingConfig. - Add pages/settings/Subscription/PaymentCard/DynamicPaymentCardCurrencySelectorPage, which reads the selected currency from the CHANGE_BILLING_CURRENCY_FORM draft (falling back to the billing card currency from FUND_LIST, then USD), writes the chosen value to the draft via setDraftValues, navigates back via useDynamicBackPath, and applies the EUR_BILLING beta filter that previously lived in the modal. - Lift the selected currency in PaymentCardChangeCurrencyForm from local useState to the CHANGE_BILLING_CURRENCY_FORM draft, navigate to the dynamic route on press, drop the inline modal, and clear the draft on unmount. The non-security-code branch (used by the change-payment-currency screen) is unchanged in behavior - it still commits via changeBillingCurrency on selection. - Delete src/components/AddPaymentCard/PaymentCardCurrencyModal.tsx; it has no remaining importers. - Add a regression test covering the EUR_BILLING beta filter, draft-vs-fund-list selection precedence, and the setDraftValues + goBack behavior on row select. Fixed Issues: Expensify#90470

trjExpensify · 2026-05-21T01:13:56Z

PR doesn’t need product input as a refactor PR. Unassigning and unsubscribing myself.

trasnake87 requested review from a team as code owners May 19, 2026 21:14

melvin-bot Bot assigned trasnake87 May 19, 2026

melvin-bot Bot requested review from gijoe0295 and trjExpensify May 19, 2026 21:14

melvin-bot Bot removed request for a team May 19, 2026 21:14

trasnake87 mentioned this pull request May 19, 2026

[$250] Migrate PaymentCardCurrencyModal to @react-navigation modal screen #90470

Open

mountiny requested review from Copilot and mountiny May 20, 2026 17:56

mountiny reviewed May 20, 2026

View reviewed changes

Copilot started reviewing on behalf of mountiny May 20, 2026 17:57 View session

Copilot AI reviewed May 20, 2026

View reviewed changes

trasnake87 force-pushed the paymentcard-currency-rnav-90470 branch from 658dd22 to 6c19102 Compare May 20, 2026 19:07

trasnake87 force-pushed the paymentcard-currency-rnav-90470 branch from 6c19102 to da7a07a Compare May 20, 2026 19:22

trjExpensify removed their request for review May 21, 2026 01:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate PaymentCardCurrencyModal to a @react-navigation modal screen#91120

Migrate PaymentCardCurrencyModal to a @react-navigation modal screen#91120
trasnake87 wants to merge 1 commit into
Expensify:mainfrom
trasnake87:paymentcard-currency-rnav-90470

trasnake87 commented May 19, 2026 •

edited

Loading

Uh oh!

melvin-bot Bot commented May 19, 2026

Uh oh!

mountiny commented May 20, 2026

Uh oh!

mountiny May 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

codecov Bot commented May 20, 2026 •

edited by github-actions Bot

Loading

Uh oh!

trasnake87 commented May 20, 2026

Uh oh!

trjExpensify commented May 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants


		DynamicPaymentCardCurrencySelectorPage.displayName = 'DynamicPaymentCardCurrencySelectorPage';

Conversation

trasnake87 commented May 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

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented May 19, 2026

Uh oh!

mountiny commented May 20, 2026

Uh oh!

mountiny May 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

codecov Bot commented May 20, 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!

trasnake87 commented May 20, 2026

Uh oh!

trjExpensify commented May 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

trasnake87 commented May 19, 2026 •

edited

Loading

codecov Bot commented May 20, 2026 •

edited by github-actions Bot

Loading