Merge pull request #88431 from callstack-internal/feat/86338-broken-card-reconnection-eliran

amyevans · web-flow · commit ad21bb44e16f · 2026-05-04T18:00:14.000-04:00
Broken personal card reconnection
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -814,6 +814,10 @@ const ROUTES = {
         route: 'settings/wallet/add-personal-card/:feed/bank-connection',
         getRoute: (feed: PersonalCardFeed) => `settings/wallet/add-personal-card/${feed}/bank-connection` as const,
     },
+    SETTINGS_WALLET_PERSONAL_CARD_FIX_CONNECTION: {
+        route: 'settings/wallet/personal-card/:cardID/fix-connection',
+        getRoute: (cardID: string) => `settings/wallet/personal-card/${cardID}/fix-connection` as const,
+    },
     SETTINGS_WALLET_PERSONAL_CARD_UPGRADE: 'settings/wallet/add-personal-card/upgrade',
     SETTINGS_WALLET_PERSONAL_CARD_WARNING: 'settings/wallet/add-personal-card/warning',
     SETTINGS_WALLET_CARD_DIGITAL_DETAILS_UPDATE_ADDRESS: {
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -228,6 +228,7 @@ const SCREENS = {
             PERSONAL_CARD_EDIT_NAME: 'Settings_Wallet_Personal_Card_Edit_Name',
             PERSONAL_CARD_EDIT_TRANSACTION_START_DATE: 'Settings_Wallet_Personal_Card_Edit_Transaction_Start_Date',
             PERSONAL_CARD_BANK_CONNECTION: 'Settings_Wallet_PersonalCard_BankConnection',
+            PERSONAL_CARD_FIX_CONNECTION: 'Settings_Wallet_PersonalCard_FixConnection',
             PERSONAL_CARD_ADD_NEW: 'Settings_Wallet_PersonalCard_New',
             PERSONAL_CARD_WARNING: 'Settings_Wallet_PersonalCard_Warning',
             PERSONAL_CARD_UPGRADE: 'Settings_Wallet_PersonalCard_Upgrade',
diff --git a/src/libs/API/parameters/OpenPlaidCompanyCardLoginParams.ts b/src/libs/API/parameters/OpenPlaidCompanyCardLoginParams.ts
@@ -5,6 +5,7 @@ type OpenPlaidCompanyCardLoginParams = {
     domain?: string;
     feed?: string;
     isPersonal?: boolean;
+    cardID?: string;
 };
 
 export default OpenPlaidCompanyCardLoginParams;
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -453,6 +453,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
     [SCREENS.SETTINGS.WALLET.TRAVEL_CVV]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/TravelCVVPage/TravelCVVPage').default,
     [SCREENS.SETTINGS.WALLET.TRAVEL_CVV_VERIFY_ACCOUNT]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/TravelCVVPage/TravelCVVVerifyAccountPage').default,
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_BANK_CONNECTION]: () => require<ReactComponentModule>('@pages/settings/Wallet/PersonalCards/steps/BankConnection').default,
+    [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_FIX_CONNECTION]: () => require<ReactComponentModule>('@pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage').default,
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_ADD_NEW]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/PersonalCards/AddNewCardPage').default,
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_WARNING]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/PersonalCards/PersonalCardWarning').default,
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_UPGRADE]: () => require<ReactComponentModule>('../../../../pages/settings/Wallet/PersonalCards/upgrade/PersonalCardUpgradePage').default,
diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts
@@ -64,6 +64,7 @@ const SETTINGS_TO_RHP: Partial<Record<keyof SettingsSplitNavigatorParamList, str
         SCREENS.SETTINGS.UPDATE_PERSONAL_BANK_ACCOUNT,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_ADD_NEW,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_BANK_CONNECTION,
+        SCREENS.SETTINGS.WALLET.PERSONAL_CARD_FIX_CONNECTION,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_WARNING,
         SCREENS.SETTINGS.WALLET.PERSONAL_CARD_UPGRADE,
         SCREENS.SETTINGS.WALLET.CARD_CHANGE_PIN,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -274,6 +274,10 @@ const config: LinkingOptions<RootNavigatorParamList>['config'] = {
                             path: ROUTES.SETTINGS_WALLET_PERSONAL_CARD_BANK_CONNECTION.route,
                             exact: true,
                         },
+                        [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_FIX_CONNECTION]: {
+                            path: ROUTES.SETTINGS_WALLET_PERSONAL_CARD_FIX_CONNECTION.route,
+                            exact: true,
+                        },
                         [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_WARNING]: {
                             path: ROUTES.SETTINGS_WALLET_PERSONAL_CARD_WARNING,
                             exact: true,
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -237,6 +237,9 @@ type SettingsNavigatorParamList = {
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_BANK_CONNECTION]: {
         feed: PersonalCardFeed;
     };
+    [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_FIX_CONNECTION]: {
+        cardID: string;
+    };
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_WARNING]: undefined;
     [SCREENS.SETTINGS.WALLET.PERSONAL_CARD_UPGRADE]: undefined;
     [SCREENS.SETTINGS.ADD_DEBIT_CARD]: undefined;
diff --git a/src/libs/ReportPrimaryActionUtils.ts b/src/libs/ReportPrimaryActionUtils.ts
@@ -381,7 +381,7 @@ function isMarkAsCashAction(
         currentUserAccountID,
     );
     const userControlsReport = isReportSubmitter || isReportApprover || isAdmin;
-    return userControlsReport && shouldShowBrokenConnectionViolation;
+    return userControlsReport && shouldShowBrokenConnectionViolation && !isReportApprovedUtils({report}) && !isSettled(report);
 }
 
 function isMarkAsResolvedAction(report?: Report, violations?: TransactionViolation[], policy?: Policy) {
@@ -543,6 +543,10 @@ function isMarkAsCashActionForTransaction(currentUserLogin: string, parentReport
         return false;
     }
 
+    if (isReportApprovedUtils({report: parentReport}) || isSettled(parentReport)) {
+        return false;
+    }
+
     const isReportSubmitter = isCurrentUserSubmitter(parentReport);
     const isReportApprover = isPolicyApprover(policy, currentUserLogin);
     const isAdmin = policy?.role === CONST.POLICY.ROLE.ADMIN;
diff --git a/src/libs/actions/PersonalCards.ts b/src/libs/actions/PersonalCards.ts
@@ -1,5 +1,9 @@
-import type {NullishDeep} from 'react-native-onyx';
+import type {NullishDeep, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
+import {write} from '@libs/API';
+import {WRITE_COMMANDS} from '@libs/API/types';
+import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {AddNewPersonalCard, AddNewPersonalCardFeedData, AddNewPersonalCardFeedStep} from '@src/types/onyx/PersonalCard';
 
@@ -29,4 +33,65 @@ function clearAddNewPersonalCardErrors() {
     Onyx.merge(ONYXKEYS.ADD_NEW_PERSONAL_CARD, {errors: null});
 }
 
-export {clearAddNewPersonalCardErrors, clearAddNewPersonalCardFlow, setAddNewPersonalCardStepAndData};
+function updatePersonalCardConnection(cardID: string, lastScrapeResult?: number) {
+    const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST | typeof ONYXKEYS.CARD_LIST>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    lastScrapeResult: CONST.JSON_CODE.SUCCESS,
+                    isLoadingLastUpdated: true,
+                    pendingFields: {
+                        lastScrape: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    },
+                    errorFields: {
+                        lastScrape: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const finallyData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST | typeof ONYXKEYS.CARD_LIST>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    isLoadingLastUpdated: false,
+                    pendingFields: {
+                        lastScrape: null,
+                    },
+                },
+            },
+        },
+    ];
+
+    const failureData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST | typeof ONYXKEYS.CARD_LIST>> = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    lastScrapeResult,
+                    isLoadingLastUpdated: false,
+                    pendingFields: {
+                        lastScrape: null,
+                    },
+                    errorFields: {
+                        lastScrape: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
+        },
+    ];
+
+    const parameters = {
+        cardID: Number(cardID),
+    };
+
+    write(WRITE_COMMANDS.SYNC_CARD, parameters, {optimisticData, finallyData, failureData});
+}
+
+export {clearAddNewPersonalCardErrors, clearAddNewPersonalCardFlow, setAddNewPersonalCardStepAndData, updatePersonalCardConnection};
diff --git a/src/libs/actions/Plaid.ts b/src/libs/actions/Plaid.ts
@@ -59,7 +59,7 @@ function openPlaidBankLogin(allowDebit: boolean, bankAccountID: number) {
 /**
  * Gets the Plaid Link token used to initialize the Plaid SDK for Company card
  */
-function openPlaidCompanyCardLogin(country: string, domain?: string, feed?: CardFeedWithNumber | CompanyCardFeedWithDomainID, isPersonal?: boolean) {
+function openPlaidCompanyCardLogin(country: string, domain?: string, feed?: CardFeedWithNumber | CompanyCardFeedWithDomainID, isPersonal?: boolean, cardID?: string) {
     const {redirectURI, androidPackage} = getPlaidLinkTokenParameters();
 
     const params: OpenPlaidCompanyCardLoginParams = {
@@ -69,6 +69,7 @@ function openPlaidCompanyCardLogin(country: string, domain?: string, feed?: Card
         domain,
         isPersonal,
         feed: feed ? getCompanyCardFeed(feed) : undefined,
+        cardID,
     };
 
     const optimisticData = [
diff --git a/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx b/src/pages/settings/Wallet/PersonalCardDetailsPage.tsx
@@ -25,7 +25,6 @@ import Navigation from '@navigation/Navigation';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import variables from '@styles/variables';
 import {clearCardErrorField, syncCard, unassignCard} from '@userActions/Card';
-import {openOldDotLink} from '@userActions/Link';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -148,7 +147,7 @@ function PersonalCardDetailsPage({route}: PersonalCardDetailsPageProps) {
                             />
                             <Button
                                 text={translate('personalCard.fixCard')}
-                                onPress={() => openOldDotLink(CONST.OLDDOT_URLS.SETTINGS_WALLET_URL)}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_PERSONAL_CARD_FIX_CONNECTION.getRoute(cardID))}
                                 isDisabled={isOffline || card?.isLoadingLastUpdated}
                                 style={styles.mb0}
                             />
diff --git a/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/index.native.tsx b/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/index.native.tsx
@@ -0,0 +1,191 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
+import type {LinkSuccessMetadata} from 'react-native-plaid-link-sdk';
+import type {WebViewNavigation} from 'react-native-webview';
+import {WebView} from 'react-native-webview';
+import type {PlaidLinkOnSuccessMetadata} from 'react-plaid-link/src/types';
+import ActivityIndicator from '@components/ActivityIndicator';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import PlaidLink from '@components/PlaidLink';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
+import useThemeStyles from '@hooks/useThemeStyles';
+import getPlaidOAuthReceivedRedirectURI from '@libs/getPlaidOAuthReceivedRedirectURI';
+import getUAForWebView from '@libs/getUAForWebView';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
+import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import {handleRestrictedEvent} from '@userActions/App';
+import {setPlaidEvent} from '@userActions/BankAccounts';
+import {updatePersonalCardConnection} from '@userActions/PersonalCards';
+import {addPersonalPlaidCard, openPlaidCompanyCardLogin} from '@userActions/Plaid';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import useFixPersonalCardConnection from './useFixPersonalCardConnection';
+
+type FixPersonalCardConnectionPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.PERSONAL_CARD_FIX_CONNECTION>;
+
+function FixPersonalCardConnectionPage({route}: FixPersonalCardConnectionPageProps) {
+    const {cardID} = route.params;
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const webViewRef = useRef<WebView>(null);
+    const [isConnectionCompleted, setConnectionCompleted] = useState(false);
+    const {card, url, isPlaid, country} = useFixPersonalCardConnection(cardID);
+    const {isOffline} = useNetwork();
+    const hasRequestedPlaidToken = useRef(false);
+
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [plaidLinkToken] = useOnyx(ONYXKEYS.RAM_ONLY_PLAID_LINK_TOKEN);
+    const [plaidData] = useOnyx(ONYXKEYS.PLAID_DATA);
+    const [isPlaidDisabled] = useOnyx(ONYXKEYS.IS_PLAID_DISABLED);
+    const authToken = session?.authToken ?? null;
+    // Snapshot any stale Plaid token left over in Onyx from a previous Plaid flow.
+    // We only render PlaidLink once the token differs from this snapshot — otherwise the
+    // initial mount with the stale token starts a Plaid SDK create/destroy cycle that leaves
+    // `ready` stuck at false after the real token arrives.
+    const [stalePlaidLinkToken] = useState(plaidLinkToken);
+    const hasFreshPlaidToken = !!plaidLinkToken && plaidLinkToken !== stalePlaidLinkToken;
+
+    const plaidErrors = plaidData?.errors;
+    const plaidDataErrorMessage = !isEmptyObject(plaidErrors) ? (Object.values(plaidErrors).at(0) ?? '') : '';
+
+    const activityReasonAttributes: SkeletonSpanReasonAttributes = {
+        context: 'FixPersonalCardConnectionPage',
+        isConnectionCompleted,
+    };
+    const renderLoadingReasonAttributes: SkeletonSpanReasonAttributes = {
+        context: 'FixPersonalCardConnectionPage',
+    };
+    const renderLoading = () => (
+        <View style={[StyleSheet.absoluteFill, styles.fullScreenLoading]}>
+            <ActivityIndicator
+                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                reasonAttributes={renderLoadingReasonAttributes}
+            />
+        </View>
+    );
+
+    const checkIfConnectionCompleted = (navState: WebViewNavigation) => {
+        if (!navState.url.includes(ROUTES.BANK_CONNECTION_COMPLETE)) {
+            return;
+        }
+        setConnectionCompleted(true);
+    };
+
+    useEffect(() => {
+        if (!isPlaid || isOffline || hasRequestedPlaidToken.current) {
+            return;
+        }
+        hasRequestedPlaidToken.current = true;
+        openPlaidCompanyCardLogin(country, '', undefined, true, cardID);
+    }, [isPlaid, isOffline, country, cardID]);
+
+    const handlePlaidLinkSuccess = ({publicToken, metadata}: {publicToken: string; metadata: PlaidLinkOnSuccessMetadata | LinkSuccessMetadata}) => {
+        Log.info('[PlaidLink] Fix personal card success');
+        const plaidConnectedFeed = (metadata?.institution as PlaidLinkOnSuccessMetadata['institution'])?.institution_id ?? (metadata?.institution as LinkSuccessMetadata['institution'])?.id;
+        const plaidAccounts = metadata?.accounts;
+        if (!plaidConnectedFeed || !plaidAccounts?.length) {
+            return;
+        }
+        addPersonalPlaidCard(publicToken, plaidConnectedFeed, country, JSON.stringify(plaidAccounts));
+        // Trigger a scrape so the broken-connection error clears immediately.
+        // The non-Plaid flow relies on useFixPersonalCardConnection's effect, which
+        // doesn't fire here because we navigate away before isCardBroken flips.
+        updatePersonalCardConnection(cardID, card?.lastScrapeResult);
+        Navigation.goBack(ROUTES.SETTINGS_WALLET_PERSONAL_CARD_DETAILS.getRoute(cardID));
+    };
+
+    const handlePlaidLinkEvent = (eventName: string) => {
+        setPlaidEvent(eventName);
+        // Limit the number of times a user can submit Plaid credentials (24-hour lockout)
+        if (eventName === 'SUBMIT_CREDENTIALS') {
+            handleRestrictedEvent(eventName);
+        }
+    };
+
+    const handlePlaidLinkError = (error: ErrorEvent | null) => {
+        Log.hmmm('[PlaidLink] Fix personal card error: ', error?.message);
+    };
+
+    const renderPlaid = () => {
+        if (isPlaidDisabled) {
+            return <Text style={[styles.formError, styles.ph5, styles.mv3]}>{translate('bankAccount.error.tooManyAttempts')}</Text>;
+        }
+        if (hasFreshPlaidToken) {
+            return (
+                <PlaidLink
+                    token={plaidLinkToken}
+                    onSuccess={handlePlaidLinkSuccess}
+                    onError={handlePlaidLinkError}
+                    onEvent={handlePlaidLinkEvent}
+                    onExit={() => Navigation.goBack()}
+                    receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
+                />
+            );
+        }
+        if (plaidDataErrorMessage) {
+            return <Text style={[styles.formError, styles.mh5]}>{plaidDataErrorMessage}</Text>;
+        }
+        return (
+            <ActivityIndicator
+                size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                style={styles.flex1}
+                reasonAttributes={renderLoadingReasonAttributes}
+            />
+        );
+    };
+
+    return (
+        <ScreenWrapper
+            testID="FixPersonalCardConnectionPage"
+            shouldShowOfflineIndicator={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('personalCard.fixCard')}
+                onBackButtonPress={() => Navigation.goBack()}
+            />
+            <FullPageOfflineBlockingView addBottomSafeAreaPadding>
+                {isPlaid && renderPlaid()}
+                {!isPlaid && !!url && !isConnectionCompleted && (
+                    <WebView
+                        ref={webViewRef}
+                        source={{
+                            uri: url,
+                            headers: {
+                                Cookie: `authToken=${authToken}`,
+                            },
+                        }}
+                        userAgent={getUAForWebView()}
+                        incognito
+                        onNavigationStateChange={checkIfConnectionCompleted}
+                        startInLoadingState
+                        renderLoading={renderLoading}
+                    />
+                )}
+                {!isPlaid && isConnectionCompleted && (
+                    <ActivityIndicator
+                        size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE}
+                        style={styles.flex1}
+                        reasonAttributes={activityReasonAttributes}
+                    />
+                )}
+            </FullPageOfflineBlockingView>
+        </ScreenWrapper>
+    );
+}
+
+FixPersonalCardConnectionPage.displayName = 'FixPersonalCardConnectionPage';
+
+export default FixPersonalCardConnectionPage;
diff --git a/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/index.tsx b/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/index.tsx
diff --git a/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/useFixPersonalCardConnection.ts b/src/pages/settings/Wallet/PersonalCards/FixPersonalCardConnectionPage/useFixPersonalCardConnection.ts
diff --git a/tests/unit/ReportPrimaryActionUtilsTest.ts b/tests/unit/ReportPrimaryActionUtilsTest.ts
