Add optimistic auth pending state, refactor code

sharabai · sharabai · commit 8fc859d9a5d2 · 2026-06-25T18:10:57.000+02:00
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -556,6 +556,9 @@ const ONYXKEYS = {
     /** Stores iframe link to verify 3DS flow for subscription */
     VERIFY_3DS_SUBSCRIPTION: 'verify3dsSubscription',
 
+    /** Screen name that initiated the current 3DS verification, so only that screen reacts to the link by navigating */
+    VERIFY_3DS_SUBSCRIPTION_SOURCE: 'verify3dsSubscriptionSource',
+
     /** Holds the checks used while transferring the ownership of the workspace */
     POLICY_OWNERSHIP_CHANGE_CHECKS: 'policyOwnershipChangeChecks',
 
@@ -570,6 +573,9 @@ const ONYXKEYS = {
     /** Indicates whether ClearOutstandingBalance is pending */
     SUBSCRIPTION_RETRY_BILLING_STATUS_PENDING: 'subscriptionRetryBillingStatusPending',
 
+    /** Indicates whether a VerifySetupIntent request is in flight (gates the Authenticate payment button) */
+    SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING: 'subscriptionVerifySetupIntentPending',
+
     /** Stores info during review duplicates flow */
     REVIEW_DUPLICATES: 'reviewDuplicates',
 
@@ -1556,6 +1562,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.MY_DOMAIN_SECURITY_GROUPS]: Record<string, string>;
     [ONYXKEYS.RAM_ONLY_DOMAIN_MEMBERS_SELECTED_FOR_MOVE]: string[];
     [ONYXKEYS.VERIFY_3DS_SUBSCRIPTION]: string;
+    [ONYXKEYS.VERIFY_3DS_SUBSCRIPTION_SOURCE]: string;
     [ONYXKEYS.PREFERRED_THEME]: ValueOf<typeof CONST.THEME>;
     [ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT]: boolean;
     [ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken;
@@ -1595,6 +1602,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_FAILED]: boolean;
     [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_SUCCESSFUL]: boolean;
     [ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_PENDING]: boolean;
+    [ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING]: boolean;
     [ONYXKEYS.NVP_TRAVEL_SETTINGS]: OnyxTypes.TravelSettings;
     [ONYXKEYS.REVIEW_DUPLICATES]: OnyxTypes.ReviewDuplicates;
     [ONYXKEYS.ADD_NEW_COMPANY_CARD]: OnyxTypes.AddNewCompanyCardFeed;
diff --git a/src/hooks/useNavigateToCardAuthenticationOnLink/index.tsx b/src/hooks/useNavigateToCardAuthenticationOnLink/index.tsx
@@ -1,4 +1,4 @@
-import {useIsFocused} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import {useEffect, useEffectEvent, useRef} from 'react';
 import useOnyx from '@hooks/useOnyx';
 import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
@@ -8,22 +8,37 @@ import {DYNAMIC_ROUTES} from '@src/ROUTES';
 
 /**
  * Navigates to the 3DS card-authentication screen when the backend issues a fresh SCA URL
- * (Onyx key `verify3dsSubscription`). Skips the mount-time invocation so a stale Onyx value
- * left over from a previous SCA attempt — or a truthy value present at mount during a racy
- * navigation — never triggers an auto-navigate; only subsequent changes to `authenticationLink`
- * (the genuine "user just submitted the card form, backend returned a fresh URL" flow) fire navigation.
+ * (Onyx key `verify3dsSubscription`). Navigation fires only on a genuine change to the URL, never on
+ * the value already present at mount. Skipping that mount-time run keeps two false positives inert:
+ * a stale URL left over from a previous SCA attempt, and a truthy URL that just happens to be present
+ * at mount during a racy navigation. Only a subsequent "backend just returned a fresh URL" change
+ * triggers navigation.
+ *
+ * `verify3dsSubscription` is a single global Onyx key, but several screens mount this hook. To stop
+ * one screen from hijacking a link another screen produced (e.g. the Subscription "Authenticate
+ * payment" link opening over the add-payment-card page), the screen that kicks off a request passes
+ * its own `route.name` to the producing action, which records it in `verify3dsSubscriptionSource`. A
+ * mounted hook only reacts to a link when its own focused screen matches that source, so a link can
+ * never be consumed by an unrelated screen the user has since navigated to.
  */
-function useNavigateToCardAuthenticationOnLink(shouldNavigate = true) {
+function useNavigateToCardAuthenticationOnLink() {
     const [authenticationLink] = useOnyx(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION);
+    const [source] = useOnyx(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION_SOURCE);
     const isFocused = useIsFocused();
+    const route = useRoute();
     const firstRenderRef = useRef(true);
 
     const navigateToCardAuthentication = useEffectEvent(() => {
+        // The concrete reason for the mount-skip: on a reload/deep-link reconstruction the parent
+        // remounts with the URL already in Onyx, so this effect's mount run would fire
+        // createDynamicRoute() at the same moment React Navigation is still opening the screen. Those
+        // two competing navigations left the stack in a broken state. Skipping the mount run lets the
+        // reconstruction settle and only navigates on a later, genuine change of the link.
         if (firstRenderRef.current) {
             firstRenderRef.current = false;
             return;
         }
-        if (!isFocused || !shouldNavigate || !authenticationLink) {
+        if (!isFocused || route.name !== source || !authenticationLink) {
             return;
         }
         Navigation.navigate(createDynamicRoute(DYNAMIC_ROUTES.CARD_AUTHENTICATION.path));
diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
@@ -224,6 +224,7 @@ function addSubscriptionPaymentCard(
         currency: ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>;
     },
     fundList: OnyxEntry<FundList>,
+    source?: string,
 ) {
     const {cardNumber, cardYear, cardMonth, cardCVV, addressName, addressZip, currency} = cardData;
 
@@ -264,7 +265,7 @@ function addSubscriptionPaymentCard(
     ];
 
     if (CONST.SCA_CURRENCIES.has(currency)) {
-        addPaymentCardSCA(parameters, {optimisticData, successData, failureData});
+        addPaymentCardSCA(parameters, {optimisticData, successData, failureData}, source);
     } else {
         API.write(WRITE_COMMANDS.ADD_PAYMENT_CARD, parameters, {
             optimisticData,
@@ -279,11 +280,25 @@ function addSubscriptionPaymentCard(
     }
 }
 
+/**
+ * Records which screen initiated a 3DS verification request, so only that screen's mounted
+ * useNavigateToCardAuthenticationOnLink hook reacts to the resulting link by navigating. Callers pass their own
+ * `route.name`; passing nothing (e.g. the card-authentication screen re-verifying its own iframe in place) leaves
+ * the existing source untouched, so a stray re-verify never clobbers the screen that originally opened the flow.
+ */
+function setVerify3dsSubscriptionSource(source?: string) {
+    if (!source) {
+        return;
+    }
+    Onyx.merge(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION_SOURCE, source);
+}
+
 /**
  * Calls the API to add a new SCA (GBP or EUR) card.
  * Updates verify3dsSubscription Onyx key with a new authentication link for 3DS.
  */
-function addPaymentCardSCA(params: AddPaymentCardParams, onyxData: OnyxData<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM> = {}) {
+function addPaymentCardSCA(params: AddPaymentCardParams, onyxData: OnyxData<typeof ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM> = {}, source?: string) {
+    setVerify3dsSubscriptionSource(source);
     API.write(WRITE_COMMANDS.ADD_PAYMENT_CARD_SCA, params, onyxData);
 }
 
@@ -307,20 +322,35 @@ function clearPaymentCardFormErrorAndSubmit() {
     });
 }
 
-/**
- * Clear 3ds flow - when verification will be finished
- *
- */
-function clearPaymentCard3dsVerification() {
-    Onyx.set(ONYXKEYS.VERIFY_3DS_SUBSCRIPTION, '');
-}
-
 /**
  * Properly updates the nvp_privateStripeCustomerID onyx data for 3DS payment
  *
  */
-function verifySetupIntent(accountID: number, isVerifying = true) {
-    API.write(WRITE_COMMANDS.VERIFY_SETUP_INTENT, {accountID, isVerifying});
+function verifySetupIntent(accountID: number, isVerifying = true, source?: string) {
+    setVerify3dsSubscriptionSource(source);
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING,
+            value: true,
+        },
+    ];
+    const successData: Array<OnyxUpdate<typeof ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING,
+            value: false,
+        },
+    ];
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING,
+            value: false,
+        },
+    ];
+
+    API.write(WRITE_COMMANDS.VERIFY_SETUP_INTENT, {accountID, isVerifying}, {optimisticData, successData, failureData});
 }
 
 /**
@@ -618,9 +648,9 @@ export {
     clearAddPaymentMethodError,
     clearWalletError,
     setPaymentMethodCurrency,
-    clearPaymentCard3dsVerification,
     clearWalletTermsError,
     verifySetupIntent,
     addPaymentCardSCA,
+    setVerify3dsSubscriptionSource,
     setInvoicingTransferBankAccount,
 };
diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts
@@ -1445,6 +1445,7 @@ function addBillingCardAndRequestPolicyOwnerChange(
         addressZip: string;
         currency: string;
     },
+    source?: string,
 ) {
     if (!policyID) {
         return;
@@ -1502,7 +1503,7 @@ function addBillingCardAndRequestPolicyOwnerChange(
             currency: currency as ValueOf<typeof CONST.PAYMENT_CARD_CURRENCY>,
             isP2PDebitCard: false,
         };
-        PaymentMethods.addPaymentCardSCA(params);
+        PaymentMethods.addPaymentCardSCA(params, undefined, source);
     } else {
         const params: AddBillingCardAndRequestWorkspaceOwnerChangeParams = {
             policyID,
@@ -1523,7 +1524,8 @@ function addBillingCardAndRequestPolicyOwnerChange(
  * Properly updates the nvp_privateStripeCustomerID onyx data for 3DS payment
  *
  */
-function verifySetupIntentAndRequestPolicyOwnerChange(policyID: string, currentUserAccountID: number, currentUserEmail: string) {
+function verifySetupIntentAndRequestPolicyOwnerChange(policyID: string, currentUserAccountID: number, currentUserEmail: string, source?: string) {
+    PaymentMethods.setVerify3dsSubscriptionSource(source);
     const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.POLICY>> = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -1,3 +1,4 @@
+import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import MenuItem from '@components/MenuItem';
@@ -46,6 +47,7 @@ import type {BillingStatusResult} from './utils';
 import CardSectionUtils from './utils';
 
 function CardSection() {
+    const route = useRoute();
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['History', 'Bill', 'Close']);
@@ -60,14 +62,11 @@ function CardSection() {
     const hasTeam2025Pricing = useHasTeam2025Pricing();
     const subscriptionPlan = useSubscriptionPlan();
     const [subscriptionRetryBillingStatusPending] = useOnyx(ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_PENDING);
+    const [isVerifyingSetupIntent] = useOnyx(ONYXKEYS.SUBSCRIPTION_VERIFY_SETUP_INTENT_PENDING);
     const [subscriptionRetryBillingStatusSuccessful] = useOnyx(ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_SUCCESSFUL);
     const [subscriptionRetryBillingStatusFailed] = useOnyx(ONYXKEYS.SUBSCRIPTION_RETRY_BILLING_STATUS_FAILED);
     const {isOffline} = useNetwork();
     const defaultCard = useMemo(() => Object.values(fundList ?? {}).find((card) => card.accountData?.additionalData?.isBillingCard), [fundList]);
-    const hasFailedLastBilling = useMemo(
-        () => purchaseList?.[0]?.message.billingType === CONST.BILLING.TYPE_STRIPE_FAILED_AUTHENTICATION || purchaseList?.[0]?.message.billingType === CONST.BILLING.TYPE_FAILED_2018,
-        [purchaseList],
-    );
     const [firstDayFreeTrial] = useOnyx(ONYXKEYS.NVP_FIRST_DAY_FREE_TRIAL);
     const [lastDayFreeTrial] = useOnyx(ONYXKEYS.NVP_LAST_DAY_FREE_TRIAL);
     const [billingDisputePending] = useOnyx(ONYXKEYS.NVP_PRIVATE_BILLING_DISPUTE_PENDING);
@@ -182,11 +181,10 @@ function CardSection() {
         clearOutstandingBalance();
     };
 
-    const shouldNavigateToCardAuthentication = privateStripeCustomerID?.status === CONST.STRIPE_SCA_AUTH_STATUSES.CARD_AUTHENTICATION_REQUIRED || hasFailedLastBilling;
-    useNavigateToCardAuthenticationOnLink(shouldNavigateToCardAuthentication);
+    useNavigateToCardAuthenticationOnLink();
 
     const handleAuthenticatePayment = () => {
-        verifySetupIntent(session?.accountID ?? CONST.DEFAULT_NUMBER_ID, false);
+        verifySetupIntent(session?.accountID ?? CONST.DEFAULT_NUMBER_ID, false, route.name);
     };
 
     const handleBillingBannerClose = () => {
@@ -251,7 +249,7 @@ function CardSection() {
                 <CardSectionButton
                     text={translate('subscription.cardSection.authenticatePayment')}
                     isDisabled={isOffline || !billingStatus?.isAuthenticationRequired}
-                    isLoading={subscriptionRetryBillingStatusPending}
+                    isLoading={isVerifyingSetupIntent}
                     onPress={handleAuthenticatePayment}
                     style={[styles.w100, styles.mt5]}
                     large
diff --git a/src/pages/settings/Subscription/DynamicCardAuthenticationPage.tsx b/src/pages/settings/Subscription/DynamicCardAuthenticationPage.tsx
@@ -8,7 +8,7 @@ import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
-import {clearPaymentCard3dsVerification, verifySetupIntent} from '@userActions/PaymentMethods';
+import {verifySetupIntent} from '@userActions/PaymentMethods';
 import {verifySetupIntentAndRequestPolicyOwnerChange} from '@userActions/Policy/Policy';
 import {DYNAMIC_ROUTES} from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -28,11 +28,7 @@ function DynamicCardAuthenticationPage({route}: DynamicCardAuthenticationPagePro
         }
         verifySetupIntent(currentUserAccountID, true);
     };
-    // Mirrors the original CardAuthenticationModal.onModalClose semantic:
-    // user-driven close discards VERIFY_3DS_SUBSCRIPTION so the next mount
-    // of an entry screen is fresh.
     const onClose = () => {
-        clearPaymentCard3dsVerification();
         Navigation.goBack(backPath);
     };
 
diff --git a/src/pages/settings/Subscription/PaymentCard/index.tsx b/src/pages/settings/Subscription/PaymentCard/index.tsx
@@ -91,9 +91,9 @@ function AddPaymentCard() {
                 addressZip: values.addressZipCode,
                 currency: values.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD,
             };
-            addSubscriptionPaymentCard(accountID ?? CONST.DEFAULT_NUMBER_ID, cardData, fundList);
+            addSubscriptionPaymentCard(accountID ?? CONST.DEFAULT_NUMBER_ID, cardData, fundList, route.name);
         },
-        [accountID, fundList],
+        [accountID, fundList, route.name],
     );
 
     const [formData] = useOnyx(ONYXKEYS.FORMS.ADD_PAYMENT_CARD_FORM);
diff --git a/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx b/src/pages/workspace/members/WorkspaceOwnerPaymentCardForm.tsx
@@ -1,3 +1,4 @@
+import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -27,6 +28,7 @@ type WorkspaceOwnerPaymentCardFormProps = {
 };
 
 function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormProps) {
+    const route = useRoute();
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -72,9 +74,9 @@ function WorkspaceOwnerPaymentCardForm({policy}: WorkspaceOwnerPaymentCardFormPr
                 addressZip: values.addressZipCode,
                 currency: values.currency,
             };
-            addBillingCardAndRequestPolicyOwnerChange(policyID, currentUserAccountID, currentUserEmail, cardData);
+            addBillingCardAndRequestPolicyOwnerChange(policyID, currentUserAccountID, currentUserEmail, cardData, route.name);
         },
-        [currentUserAccountID, currentUserEmail, policyID],
+        [currentUserAccountID, currentUserEmail, policyID, route.name],
     );
     const icons = useMemoizedLazyExpensifyIcons(['Checkmark']);
 
