Allow linking Plaid to an existing bank account and fixing existing Plaid connection

src/CONST/index.ts

@@ -812,6 +812,7 @@ const CONST = {
         PRODUCT_UPDATE_SEPTEMBER_2026: 'productUpdateSeptember2026',
     },
     BANK_ACCOUNT: {
+        PLAID_WRONG_ACCOUNT_ERROR_FIELD: 'plaidWrongAccount',
         BENEFICIAL_OWNER_INFO_STEP: {
             BENEFICIAL_OWNER_DATA: {
                 BENEFICIAL_OWNER_KEYS: 'beneficialOwnerKeys',

src/ROUTES.ts

@@ -232,6 +232,11 @@ const DYNAMIC_ROUTES = {
         entryScreens: [SCREENS.SETTINGS.WALLET.ROOT, SCREENS.WORKSPACE.WORKFLOWS],
         getRoute: (bankAccountID: number | undefined) => `global-reimbursements/${bankAccountID}` as const,
     },
+    BANK_ACCOUNT_LINK_PLAID: {
+        path: ':bankAccountID/link-plaid',
+        entryScreens: [SCREENS.SETTINGS.WALLET.ROOT],
+        getRoute: (bankAccountID: string) => `${bankAccountID}/link-plaid` as const,
+    },
     BANK_ACCOUNT_VERIFY_ACCOUNT: {
         path: 'verify-bank-account',
         entryScreens: [SCREENS.REIMBURSEMENT_ACCOUNT],

src/SCREENS.ts

@@ -210,6 +210,7 @@ const SCREENS = {
             SHARE_BANK_ACCOUNT: 'Settings_Wallet_Share_Bank_Account',
             EDIT_BANK_ACCOUNT_NICKNAME: 'Settings_Wallet_Edit_Bank_Account_Nickname',
             DYNAMIC_WISE_GLOBAL_REIMBURSEMENTS_INTRO: 'Dynamic_Settings_Wallet_Wise_Global_Reimbursements_Intro',
+            DYNAMIC_BANK_ACCOUNT_LINK_PLAID: 'Dynamic_Settings_Wallet_BankAccount_LinkPlaid',
             TRAVEL_CVV: 'Settings_Wallet_Travel_CVV',
             TRAVEL_CVV_VERIFY_ACCOUNT: 'Settings_Wallet_Travel_CVV_VerifyAccount',
             PERSONAL_CARD_DETAILS: 'Settings_Wallet_Personal_Card_Details',

src/components/ConnectionStatusMessage.tsx

@@ -22,6 +22,11 @@ type ConnectionStatusMessageProps = {
     statusTone?: 'default' | 'success' | 'danger';
     onLinkPress?: ComponentProps<typeof RenderHTML>['onLinkPress'];
     shouldIncludeHorizontalPadding?: boolean;
+
+    /**
+     * Accessible name for the action button
+     */
+    actionAccessibilityLabel?: string;
 };
 
 function ConnectionStatusMessage({
@@ -32,6 +37,7 @@ function ConnectionStatusMessage({
     statusTone = 'default',
     onLinkPress,
     shouldIncludeHorizontalPadding = true,
+    actionAccessibilityLabel,
 }: ConnectionStatusMessageProps) {
     const icons = useMemoizedLazyExpensifyIcons(['DotIndicator']);
     const theme = useTheme();
@@ -48,15 +54,23 @@ function ConnectionStatusMessage({
     }
     const shouldShowActionButton = !!actionText && !!onActionPress;
     const isDangerStatus = statusTone === 'danger';
-    const messageTag = isDangerStatus ? 'rbr' : 'muted-text-label';
+    const isSuccessStatus = statusTone === 'success';
+    let messageTag;
+    if (isDangerStatus) {
+        messageTag = 'rbr';
+    } else if (isSuccessStatus) {
+        messageTag = 'gbr';
+    } else {
+        messageTag = 'muted-text-label';
+    }
     const messageHTML = `<${messageTag}>${message ?? ''}</${messageTag}>`;
     const messageContent = (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
-            {isDangerStatus && (
+            {(isDangerStatus || isSuccessStatus) && (
                 <View style={[styles.offlineFeedbackErrorDot, styles.mr2]}>
                     <Icon
                         src={icons.DotIndicator}
-                        fill={theme.danger}
+                        fill={isDangerStatus ? theme.danger : theme.iconSuccessFill}
                     />
                 </View>
             )}
@@ -71,11 +85,12 @@ function ConnectionStatusMessage({
 
     const actionButton = shouldShowActionButton ? (
         <Button
-            variant={CONST.BUTTON_VARIANT.DANGER}
+            variant={isSuccessStatus ? CONST.BUTTON_VARIANT.SUCCESS : CONST.BUTTON_VARIANT.DANGER}
             size={CONST.BUTTON_SIZE.SMALL}
             style={styles.alignSelfStart}
             onPress={onActionPress}
             isDisabled={isActionDisabled}
+            accessibilityLabel={actionAccessibilityLabel}
         >
             <Button.Text>{actionText}</Button.Text>
         </Button>

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -90,6 +90,16 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             },
             contentModel: HTMLContentModel.block,
         }),
+        gbr: HTMLElementModel.fromCustomModel({
+            tagName: 'gbr',
+            getMixedUAStyles: (tnode) => {
+                if (tnode.attributes.issmall === undefined) {
+                    return {...styles.formError, ...styles.mb0, ...styles.badgeSuccessText};
+                }
+                return {...styles.formError, ...styles.mb0, ...styles.textMicro, ...styles.badgeSuccessText};
+            },
+            contentModel: HTMLContentModel.block,
+        }),
         'muted-link': HTMLElementModel.fromCustomModel({
             tagName: 'muted-link',
             mixedUAStyles: {...styles.subTextFileUpload, ...styles.textSupporting},

src/components/HTMLEngineProvider/HTMLRenderers/RBRRenderer.tsx

@@ -25,7 +25,7 @@ function RBRRenderer({tnode, style}: CustomRendererProps<TText | TPhrasing>) {
                         numberOfLines={shouldShowEllipsis ? 1 : 0}
                         ellipsizeMode="tail"
                         key={props.key}
-                        style={[styles.textLabelError, flattenStyle, isSmall ? styles.textMicro : {}]}
+                        style={[styles.textLabelError, styles.badgeDangerText, flattenStyle, isSmall ? styles.textMicro : {}]}
                     >
                         {props.childElement}
                     </Text>

src/components/Icon/chunks/illustrations.chunk.ts

@@ -115,7 +115,9 @@ import AiBot from '@assets/images/simple-illustrations/simple-illustration__ai-b
 import Alert from '@assets/images/simple-illustrations/simple-illustration__alert.svg';
 import Members from '@assets/images/simple-illustrations/simple-illustration__approval-members.svg';
 import Approval from '@assets/images/simple-illustrations/simple-illustration__approval.svg';
+import BankCheck from '@assets/images/simple-illustrations/simple-illustration__bank-check.svg';
 import ShareBank from '@assets/images/simple-illustrations/simple-illustration__bank-share.svg';
+import BankX from '@assets/images/simple-illustrations/simple-illustration__bank-x.svg';
 import BankCoin from '@assets/images/simple-illustrations/simple-illustration__bankcoin.svg';
 import Binoculars from '@assets/images/simple-illustrations/simple-illustration__binoculars.svg';
 import BlueShield from '@assets/images/simple-illustrations/simple-illustration__blueshield.svg';
@@ -358,7 +360,9 @@ const Illustrations = {
     AiBot,
     Building,
     BuildingCross,
+    BankCheck,
     BankCoin,
+    BankX,
     Coins,
     CardDenied,
     CardIntoWallet,

src/languages/de.ts

@@ -2854,6 +2854,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'Bitte bestätigen Sie Testtransaktionen',
             accountRequiresAttention: 'Dieses Konto erfordert Ihre Aufmerksamkeit',
             unlock: 'Entsperren',
+            plaidBrokenReconnect: 'Beheben Sie Ihre Plaid-Verbindung für ein genaueres Limit Ihrer Expensify Karte',
+            plaidConnectForLimit: 'Mit Plaid verbinden, um ein genaueres Limit für Ihre Expensify Karte zu erhalten',
+            connect: 'Verbinden',
+        },
+        linkPlaid: {
+            title: 'Mit Plaid verbinden',
+            successHeading: 'Erfolgreiche Verbindung',
+            successDescription: 'Danke, dass Sie Plaid verbunden haben!',
+            failureHeading: 'Verbindung fehlgeschlagen',
+            failureDescription: '<muted-text>Bitte versuchen Sie es erneut oder <concierge-link>wenden Sie sich an Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Falsches Bankkonto',
+            wrongAccountDescription: 'Bitte wählen Sie das passende Bankkonto in Plaid aus.',
         },
         wiseGlobalReimbursementsIntro: {
             title: 'Globale Rückerstattungen einrichten?',

src/languages/el.ts

@@ -2910,6 +2910,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'Παρακαλούμε επιβεβαιώστε τις δοκιμαστικές συναλλαγές',
             accountRequiresAttention: 'Αυτός ο λογαριασμός χρειάζεται προσοχή',
             unlock: 'Ξεκλείδωμα',
+            plaidBrokenReconnect: 'Διορθώστε τη σύνδεσή σας με το Plaid για πιο ακριβές όριο στην Κάρτα Expensify',
+            plaidConnectForLimit: 'Συνδεθείτε με το Plaid για πιο ακριβές όριο στην Κάρτα Expensify',
+            connect: 'Σύνδεση',
+        },
+        linkPlaid: {
+            title: 'Σύνδεση με το Plaid',
+            successHeading: 'Επιτυχής σύνδεση',
+            successDescription: 'Ευχαριστούμε που συνδεθήκατε με το Plaid!',
+            failureHeading: 'Ανεπιτυχής σύνδεση',
+            failureDescription: '<muted-text>Παρακαλούμε δοκιμάστε ξανά ή <concierge-link>επικοινωνήστε με το Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Λάθος τραπεζικός λογαριασμός',
+            wrongAccountDescription: 'Παρακαλούμε επιλέξτε τον αντίστοιχο τραπεζικό λογαριασμό στο Plaid.',
         },
         wiseGlobalReimbursementsIntro: {
             title: 'Να ρυθμιστούν οι παγκόσμιες αποζημιώσεις;',

src/languages/en.ts

@@ -2985,6 +2985,18 @@ const translations = {
             confirmTestTransactions: 'Please confirm test transactions',
             accountRequiresAttention: 'This account requires attention',
             unlock: 'Unlock',
+            plaidBrokenReconnect: 'Fix your Plaid connection for a more accurate Expensify Card limit',
+            plaidConnectForLimit: 'Connect to Plaid for a more accurate Expensify Card limit',
+            connect: 'Connect',
+        },
+        linkPlaid: {
+            title: 'Connect to Plaid',
+            successHeading: 'Successful connection',
+            successDescription: 'Thanks for connecting to Plaid!',
+            failureHeading: 'Unsuccessful connection',
+            failureDescription: '<muted-text>Please try again or <concierge-link>reach out to Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Wrong bank account',
+            wrongAccountDescription: 'Please select the matching bank account in Plaid.',
         },
         assignedCards: 'Cards',
         assignedCardsDescription: 'Transactions from assigned cards sync automatically.',

src/languages/es.ts

@@ -2759,6 +2759,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'Confirma las transacciones de prueba',
             accountRequiresAttention: 'Esta cuenta requiere atención',
             unlock: 'Desbloquear',
+            plaidBrokenReconnect: 'Repara tu conexión con Plaid para tener un límite de la Tarjeta Expensify más preciso',
+            plaidConnectForLimit: 'Conéctate a Plaid para tener un límite más preciso en la Tarjeta Expensify',
+            connect: 'Conectar',
+        },
+        linkPlaid: {
+            title: 'Conectar con Plaid',
+            successHeading: 'Conexión correcta',
+            successDescription: '¡Gracias por conectarte a Plaid!',
+            failureHeading: 'Conexión fallida',
+            failureDescription: '<muted-text>Por favor, inténtalo de nuevo o <concierge-link>contacta con Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Cuenta bancaria incorrecta',
+            wrongAccountDescription: 'Selecciona la cuenta bancaria correspondiente en Plaid.',
         },
         wiseGlobalReimbursementsIntro: {
             title: '¿Configurar reembolsos globales?',

src/languages/fr.ts

@@ -2859,6 +2859,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'Veuillez confirmer les transactions de test',
             accountRequiresAttention: 'Ce compte nécessite une attention particulière',
             unlock: 'Déverrouiller',
+            plaidBrokenReconnect: 'Corrigez votre connexion Plaid pour un plafond de Carte Expensify plus précis',
+            plaidConnectForLimit: 'Connectez Plaid pour une limite de Carte Expensify plus précise',
+            connect: 'Connecter',
+        },
+        linkPlaid: {
+            title: 'Se connecter à Plaid',
+            successHeading: 'Connexion réussie',
+            successDescription: 'Merci de vous être connecté à Plaid !',
+            failureHeading: 'Connexion infructueuse',
+            failureDescription: '<muted-text>Veuillez réessayer ou <concierge-link>contactez Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Mauvais compte bancaire',
+            wrongAccountDescription: 'Veuillez sélectionner le compte bancaire correspondant dans Plaid.',
         },
         wiseGlobalReimbursementsIntro: {
             title: 'Configurer les remboursements globaux ?',

src/languages/it.ts

@@ -2843,6 +2843,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'Conferma le transazioni di prova',
             accountRequiresAttention: 'Questo conto richiede attenzione',
             unlock: 'Sblocca',
+            plaidBrokenReconnect: 'Sistema la connessione Plaid per un limite della Carta Expensify più preciso',
+            plaidConnectForLimit: 'Connettiti a Plaid per un limite della Carta Expensify più preciso',
+            connect: 'Connetti',
+        },
+        linkPlaid: {
+            title: 'Connetti a Plaid',
+            successHeading: 'Connessione riuscita',
+            successDescription: 'Grazie per esserti connesso a Plaid!',
+            failureHeading: 'Connessione non riuscita',
+            failureDescription: '<muted-text>Riprova oppure <concierge-link>contatta Concierge</concierge-link>.</muted-text>',
+            wrongAccountHeading: 'Conto bancario errato',
+            wrongAccountDescription: 'Seleziona il conto bancario corrispondente in Plaid.',
         },
         wiseGlobalReimbursementsIntro: {
             title: 'Configurare i rimborsi globali?',

src/languages/ja.ts

@@ -2822,6 +2822,18 @@ const translations: TranslationDeepObject<typeof en> = {
             confirmTestTransactions: 'テスト取引を確認してください',
             accountRequiresAttention: 'このアカウントには対応が必要です',
             unlock: 'ロック解除',
+            plaidBrokenReconnect: 'より正確な Expensify カードの限度額のために Plaid 接続を修正しましょう',
+            plaidConnectForLimit: 'Plaid に接続して、より正確な Expensify カードの利用限度額を設定しましょう',
+            connect: '接続',
+        },
+        linkPlaid: {
+            title: 'Plaid に接続',
+            successHeading: '接続が成功しました',
+            successDescription: 'Plaid に接続していただきありがとうございます！',
+            failureHeading: '接続に失敗しました',
+            failureDescription: '<muted-text>もう一度お試しいただくか、<concierge-link>Concierge へお問い合わせください</concierge-link>。</muted-text>',
+            wrongAccountHeading: '誤った銀行口座',
+            wrongAccountDescription: 'Plaid で一致する銀行口座を選択してください。',
         },
         wiseGlobalReimbursementsIntro: {
             title: 'グローバル払い戻しを設定しますか？',