From 00b8267254a24b79a755e5bf4388f0e1da7351f8 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 12:27:00 -0500
Subject: [PATCH 01/15] feat: refactor `OfflineWithFeedback` and error
 dismissal

---
 src/components/ErrorMessageRow.tsx            | 12 +--
 src/components/ImportSpreadsheetColumns.tsx   |  1 -
 src/components/MessagesRow.tsx                | 41 ++++++-----
 src/components/OfflineWithFeedback.tsx        | 23 +++---
 src/components/SelectionScreen.tsx            |  2 +-
 .../VerifiedBankAccountFlowEntryPoint.tsx     |  3 +-
 .../Contacts/ContactMethodDetailsPage.tsx     |  2 +-
 .../settings/Wallet/PaymentMethodListItem.tsx |  3 +-
 src/pages/workspace/WorkspaceMembersPage.tsx  |  2 +-
 ...oksOutOfPocketExpenseConfigurationPage.tsx |  1 -
 .../WorkspaceCompanyCardsTableItem.tsx        | 73 ++++++++++---------
 .../assignCard/ConfirmationStep.tsx           |  1 -
 src/styles/index.ts                           |  5 ++
 13 files changed, 84 insertions(+), 85 deletions(-)

diff --git a/src/components/ErrorMessageRow.tsx b/src/components/ErrorMessageRow.tsx
index 8086fc714f6ed..9d3274aa34ddc 100644
--- a/src/components/ErrorMessageRow.tsx
+++ b/src/components/ErrorMessageRow.tsx
@@ -16,17 +16,14 @@ type ErrorMessageRowProps = {
     /** Additional style object for the error row text */
     errorRowTextStyles?: StyleProp<TextStyle>;
 
-    /** A function to run when the X button next to the error is clicked */
-    onClose?: () => void;
-
-    /** Whether we can dismiss the error message */
-    canDismissError?: boolean;
+    /** If passed, an X button next to the error will be shown and which triggers this callback */
+    onDismiss?: () => void;
 
     /** A function to dismiss error */
     dismissError?: () => void;
 };
 
-function ErrorMessageRow({errors, errorRowStyles, onClose, canDismissError = true, dismissError, errorRowTextStyles}: ErrorMessageRowProps) {
+function ErrorMessageRow({errors, errorRowStyles, onDismiss, dismissError, errorRowTextStyles}: ErrorMessageRowProps) {
     // Some errors have a null message. This is used to apply opacity only and to avoid showing redundant messages.
     const errorEntries = Object.entries(errors ?? {});
     const filteredErrorEntries = errorEntries.filter((errorEntry): errorEntry is [string, string | ReceiptError | OnyxCommon.TranslationKeyError] => errorEntry[1] !== null);
@@ -37,10 +34,9 @@ function ErrorMessageRow({errors, errorRowStyles, onClose, canDismissError = tru
         <MessagesRow
             messages={errorMessages}
             type="error"
-            onClose={onClose}
+            onDismiss={onDismiss}
             containerStyles={errorRowStyles}
             errorTextStyles={errorRowTextStyles}
-            canDismiss={canDismissError}
             dismissError={dismissError}
         />
     ) : null;
diff --git a/src/components/ImportSpreadsheetColumns.tsx b/src/components/ImportSpreadsheetColumns.tsx
index b1d8b93127404..d05c309da9ed6 100644
--- a/src/components/ImportSpreadsheetColumns.tsx
+++ b/src/components/ImportSpreadsheetColumns.tsx
@@ -108,7 +108,6 @@ function ImportSpreadsheetColumns({
                     shouldDisplayErrorAbove
                     errors={errors}
                     errorRowStyles={styles.mv2}
-                    canDismissError={false}
                 >
                     <Button
                         text={translate('common.import')}
diff --git a/src/components/MessagesRow.tsx b/src/components/MessagesRow.tsx
index 51044161e7f45..4686dafb70b2b 100644
--- a/src/components/MessagesRow.tsx
+++ b/src/components/MessagesRow.tsx
@@ -22,7 +22,7 @@ type MessagesRowProps = {
     type: 'error' | 'success';
 
     /** A function to run when the X button next to the message is clicked */
-    onClose?: () => void;
+    onDismiss?: () => void;
 
     /** Additional style object for the container */
     containerStyles?: StyleProp<ViewStyle>;
@@ -30,18 +30,17 @@ type MessagesRowProps = {
     /** Additional style object for the error text */
     errorTextStyles?: StyleProp<TextStyle>;
 
-    /** Whether we can dismiss the messages */
-    canDismiss?: boolean;
-
     /** A function to dismiss error */
     dismissError?: () => void;
 };
 
-function MessagesRow({messages = {}, type, onClose = () => {}, containerStyles, canDismiss = true, dismissError = () => {}, errorTextStyles}: MessagesRowProps) {
+function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissError = () => {}, errorTextStyles}: MessagesRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const dismissText = translate('common.dismiss');
+
     if (isEmptyObject(messages)) {
         return null;
     }
@@ -55,21 +54,23 @@ function MessagesRow({messages = {}, type, onClose = () => {}, containerStyles,
                 messages={messages}
                 type={type}
             />
-            {canDismiss && (
-                <Tooltip text={translate('common.close')}>
-                    <PressableWithoutFeedback
-                        onPress={onClose}
-                        style={[styles.touchableButtonImage]}
-                        role={CONST.ROLE.BUTTON}
-                        accessibilityLabel={translate('common.close')}
-                    >
-                        <Icon
-                            fill={theme.icon}
-                            src={Expensicons.Close}
-                        />
-                    </PressableWithoutFeedback>
-                </Tooltip>
-            )}
+            <View style={styles.touchableButtonImageContainer}>
+                {!!onDismiss && (
+                    <Tooltip text={dismissText}>
+                        <PressableWithoutFeedback
+                            onPress={onDismiss}
+                            style={[styles.touchableButtonImage]}
+                            role={CONST.ROLE.BUTTON}
+                            accessibilityLabel={dismissText}
+                        >
+                            <Icon
+                                fill={theme.icon}
+                                src={Expensicons.Close}
+                            />
+                        </PressableWithoutFeedback>
+                    </Tooltip>
+                )}
+            </View>
         </View>
     );
 }
diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 37e8161856f34..4b91829353329 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -22,7 +22,7 @@ import ImageSVG from './ImageSVG';
  * care of adding the appropriate styles for pending actions and displaying the dismissible error.
  */
 
-type OfflineWithFeedbackProps = ChildrenProps & {
+type OfflineWithFeedbackProps = Partial<ChildrenProps> & {
     /** The type of action that's pending  */
     pendingAction?: OnyxCommon.PendingAction | null;
 
@@ -59,9 +59,6 @@ type OfflineWithFeedbackProps = ChildrenProps & {
     /** Whether to apply needsOffscreenAlphaCompositing prop to the children */
     needsOffscreenAlphaCompositing?: boolean;
 
-    /** Whether we can dismiss the error message */
-    canDismissError?: boolean;
-
     /** Whether we should render the error message above the children */
     shouldDisplayErrorAbove?: boolean;
 
@@ -76,12 +73,11 @@ type StrikethroughProps = Partial<ChildrenProps> & {style: AllStyles[]};
 
 function OfflineWithFeedback({
     pendingAction,
-    canDismissError = true,
     contentContainerStyle,
     errorRowStyles,
     errors,
     needsOffscreenAlphaCompositing = false,
-    onClose = () => {},
+    onClose: onDismiss,
     shouldDisableOpacity = false,
     shouldDisableStrikeThrough = false,
     shouldHideOnDelete = true,
@@ -91,7 +87,7 @@ function OfflineWithFeedback({
     shouldForceOpacity = false,
     dismissError = () => {},
     errorRowTextStyles,
-    ...rest
+    ...restProps
 }: OfflineWithFeedbackProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -105,7 +101,8 @@ function OfflineWithFeedback({
     const needsOpacity = (!shouldDisableOpacity && ((isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError)) || shouldForceOpacity;
     const needsStrikeThrough = !shouldDisableStrikeThrough && isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const hideChildren = shouldHideOnDelete && !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors;
-    let children = rest.children;
+    let children = restProps.children;
+    const hasChildren = !!children;
 
     /**
      * This method applies the strikethrough to all the children passed recursively
@@ -136,7 +133,7 @@ function OfflineWithFeedback({
     );
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
-    if (needsStrikeThrough && !hideChildren) {
+    if (hasChildren && needsStrikeThrough && !hideChildren) {
         children = applyStrikeThrough(children);
     }
     return (
@@ -145,13 +142,12 @@ function OfflineWithFeedback({
                 <ErrorMessageRow
                     errors={errors}
                     errorRowStyles={errorRowStyles}
-                    onClose={onClose}
-                    canDismissError={canDismissError}
+                    onDismiss={onDismiss}
                     errorRowTextStyles={errorRowTextStyles}
                     dismissError={dismissError}
                 />
             )}
-            {!hideChildren && (
+            {hasChildren && !hideChildren && (
                 <View
                     style={[needsOpacity ? styles.offlineFeedbackPending : styles.offlineFeedbackDefault, contentContainerStyle]}
                     needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined}
@@ -164,8 +160,7 @@ function OfflineWithFeedback({
                     errors={errors}
                     errorRowStyles={errorRowStyles}
                     errorRowTextStyles={errorRowTextStyles}
-                    onClose={onClose}
-                    canDismissError={canDismissError}
+                    onDismiss={onDismiss}
                     dismissError={dismissError}
                 />
             )}
diff --git a/src/components/SelectionScreen.tsx b/src/components/SelectionScreen.tsx
index 8ca418fb58d83..72007431b1eec 100644
--- a/src/components/SelectionScreen.tsx
+++ b/src/components/SelectionScreen.tsx
@@ -191,7 +191,7 @@ function SelectionScreen<T = string>({
                         <ErrorMessageRow
                             errors={errors}
                             errorRowStyles={errorRowStyles}
-                            onClose={onClose}
+                            onDismiss={onClose}
                         />
                     </SelectionList>
                 </OfflineWithFeedback>
diff --git a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx
index 7b7fdfc8e0593..5e3902f86bed1 100644
--- a/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx
+++ b/src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx
@@ -239,8 +239,7 @@ function VerifiedBankAccountFlowEntryPoint({
                                 }
                                 errorRowStyles={styles.mt2}
                                 shouldShowErrorMessages
-                                canDismissError={!reimbursementAccount?.maxAttemptsReached}
-                                onClose={resetReimbursementAccount}
+                                onClose={reimbursementAccount?.maxAttemptsReached ? undefined : resetReimbursementAccount}
                             >
                                 <MenuItem
                                     title={translate('workspace.bankAccount.continueWithSetup')}
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
index a5b2ac723eb2c..272879da8234b 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
+++ b/src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx
@@ -320,7 +320,7 @@ function ContactMethodDetailsPage({route}: ContactMethodDetailsPageProps) {
                     <ErrorMessageRow
                         errors={getLatestErrorField(loginData, 'addedLogin')}
                         errorRowStyles={[themeStyles.mh5, themeStyles.mv3]}
-                        onClose={() => {
+                        onDismiss={() => {
                             clearContactMethod(contactMethod);
                             clearUnvalidatedNewContactMethodAction();
                             Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
diff --git a/src/pages/settings/Wallet/PaymentMethodListItem.tsx b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
index e85038fb0545e..bca259a45b00e 100644
--- a/src/pages/settings/Wallet/PaymentMethodListItem.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodListItem.tsx
@@ -113,11 +113,10 @@ function PaymentMethodListItem({item, shouldShowDefaultBadge, threeDotsMenuItems
 
     return (
         <OfflineWithFeedback
-            onClose={() => dismissError(item)}
+            onClose={item.canDismissError ? () => dismissError(item) : undefined}
             pendingAction={item.pendingAction}
             errors={item.errors}
             errorRowStyles={styles.ph6}
-            canDismissError={item.canDismissError}
             shouldShowErrorMessages={false}
         >
             <MenuItem
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
index c8e551957624f..3bc5491e370d7 100644
--- a/src/pages/workspace/WorkspaceMembersPage.tsx
+++ b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -501,7 +501,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
                     // eslint-disable-next-line @typescript-eslint/naming-convention
                     messages={{0: translate('workspace.people.addedWithPrimary')}}
                     containerStyles={[styles.pb5, styles.ph5]}
-                    onClose={() => dismissAddedWithPrimaryLoginMessages(policyID)}
+                    onDismiss={() => dismissAddedWithPrimaryLoginMessages(policyID)}
                 />
             )}
         </View>
diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx
index ec077ad5425bb..2a1a43d261f47 100644
--- a/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx
+++ b/src/pages/workspace/accounting/qbo/export/QuickbooksOutOfPocketExpenseConfigurationPage.tsx
@@ -124,7 +124,6 @@ function QuickbooksOutOfPocketExpenseConfigurationPage({policy}: WithPolicyConne
                     key={index}
                     errors={section.errors}
                     errorRowStyles={[styles.ph5]}
-                    canDismissError={false}
                 >
                     <MenuItemWithTopDescription
                         title={section.title}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
index b20d0d816accb..e279c0504c4b9 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
@@ -85,6 +85,12 @@ function WorkspaceCompanyCardTableItem({
     const companyCardFeedIcons = useCompanyCardFeedIcons();
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
+    if (assignedCard) {
+        assignedCard.errors = {
+            test: 'test',
+        };
+    }
+
     let cardFeedIcon = null;
     if (!plaidIconUrl) {
         cardFeedIcon = getCardFeedIcon(selectedFeed as CompanyCardFeed, illustrations, companyCardFeedIcons);
@@ -95,37 +101,33 @@ function WorkspaceCompanyCardTableItem({
     const alternateLoginText = shouldUseNarrowTableRowLayout ? `${customCardName}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : (cardholder?.login ?? '');
 
     return (
-        <OfflineWithFeedback
-            errorRowStyles={styles.ph5}
-            errors={assignedCard?.errors}
-            pendingAction={assignedCard?.pendingAction}
+        <PressableWithFeedback
+            role={CONST.ROLE.BUTTON}
+            style={[styles.mh5, styles.br3, styles.mb2, styles.highlightBG]}
+            accessibilityLabel="row"
+            hoverStyle={styles.hoveredComponentBG}
+            disabled={isCardDeleted}
+            onPress={() => {
+                if (!assignedCard) {
+                    onAssignCard();
+                    return;
+                }
+
+                if (!assignedCard?.accountID || !assignedCard?.fundID) {
+                    return;
+                }
+
+                return Navigation.navigate(
+                    ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(
+                        policyID,
+                        assignedCard.cardID.toString(),
+                        getCompanyCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID),
+                    ),
+                );
+            }}
         >
-            <PressableWithFeedback
-                role={CONST.ROLE.BUTTON}
-                style={[styles.mh5, styles.br3, styles.mb2, styles.highlightBG]}
-                accessibilityLabel="row"
-                hoverStyle={styles.hoveredComponentBG}
-                disabled={isCardDeleted}
-                onPress={() => {
-                    if (!assignedCard) {
-                        onAssignCard();
-                        return;
-                    }
-
-                    if (!assignedCard?.accountID || !assignedCard?.fundID) {
-                        return;
-                    }
-
-                    return Navigation.navigate(
-                        ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(
-                            policyID,
-                            assignedCard.cardID.toString(),
-                            getCompanyCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID),
-                        ),
-                    );
-                }}
-            >
-                {({hovered}) => (
+            {({hovered}) => (
+                <View style={styles.flexColumn}>
                     <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter, styles.br3, styles.p4]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
@@ -216,9 +218,14 @@ function WorkspaceCompanyCardTableItem({
                             )}
                         </View>
                     </View>
-                )}
-            </PressableWithFeedback>
-        </OfflineWithFeedback>
+                    <OfflineWithFeedback
+                        errorRowStyles={styles.ph5}
+                        errors={assignedCard?.errors}
+                        pendingAction={assignedCard?.pendingAction}
+                    />
+                </View>
+            )}
+        </PressableWithFeedback>
     );
 }
 
diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
index ccdb79c3f7b76..4a10ae3ec4449 100644
--- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
@@ -149,7 +149,6 @@ function ConfirmationStep({policyID, feed, backTo}: ConfirmationStepProps) {
                         shouldDisplayErrorAbove
                         errors={assignCard?.errors}
                         errorRowStyles={styles.mv2}
-                        canDismissError={false}
                     >
                         <Button
                             isDisabled={isOffline}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ae430d0527f63..725e078333bc8 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -938,6 +938,11 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: theme.activeComponentBG,
         },
 
+        touchableButtonImageContainer: {
+            width: variables.componentSizeNormal,
+            height: variables.componentSizeNormal,
+        },
+
         touchableButtonImage: {
             alignItems: 'center',
             height: variables.componentSizeNormal,

From 86f4771263bfa566177301dfdaa363303b5cf191 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 12:47:57 -0500
Subject: [PATCH 02/15] fix: `OfflineWithFeedback` and `MessagesRow` spacing

---
 src/components/MessagesRow.tsx         | 37 +++++++++++++-------------
 src/components/OfflineWithFeedback.tsx | 14 +++++++---
 src/styles/index.ts                    |  3 +--
 3 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/MessagesRow.tsx b/src/components/MessagesRow.tsx
index 4686dafb70b2b..595d6c5127a27 100644
--- a/src/components/MessagesRow.tsx
+++ b/src/components/MessagesRow.tsx
@@ -34,11 +34,13 @@ type MessagesRowProps = {
     dismissError?: () => void;
 };
 
-function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissError = () => {}, errorTextStyles}: MessagesRowProps) {
+function MessagesRow({messages = {}, type, onDismiss = () => {}, containerStyles, dismissError = () => {}, errorTextStyles}: MessagesRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const showDismissButton = !!onDismiss;
+
     const dismissText = translate('common.dismiss');
 
     if (isEmptyObject(messages)) {
@@ -46,7 +48,7 @@ function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissEr
     }
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, containerStyles]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb4, styles.messagesRowHeight, containerStyles]}>
             <DotIndicatorMessage
                 dismissError={dismissError}
                 style={styles.flex1}
@@ -54,23 +56,20 @@ function MessagesRow({messages = {}, type, onDismiss, containerStyles, dismissEr
                 messages={messages}
                 type={type}
             />
-            <View style={styles.touchableButtonImageContainer}>
-                {!!onDismiss && (
-                    <Tooltip text={dismissText}>
-                        <PressableWithoutFeedback
-                            onPress={onDismiss}
-                            style={[styles.touchableButtonImage]}
-                            role={CONST.ROLE.BUTTON}
-                            accessibilityLabel={dismissText}
-                        >
-                            <Icon
-                                fill={theme.icon}
-                                src={Expensicons.Close}
-                            />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
-                )}
-            </View>
+            {showDismissButton && (
+                <Tooltip text={dismissText}>
+                    <PressableWithoutFeedback
+                        onPress={onDismiss}
+                        role={CONST.ROLE.BUTTON}
+                        accessibilityLabel={dismissText}
+                    >
+                        <Icon
+                            fill={theme.icon}
+                            src={Expensicons.Close}
+                        />
+                    </PressableWithoutFeedback>
+                </Tooltip>
+            )}
         </View>
     );
 }
diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 4b91829353329..080d3173be296 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -41,10 +41,16 @@ type OfflineWithFeedbackProps = Partial<ChildrenProps> & {
     /** A function to run when the X button next to the error is clicked */
     onClose?: () => void;
 
-    /** Additional styles to add after local styles. Applied to the parent container */
+    /** Additional styles to add to the container after local styles. Applied to the parent container */
     style?: StyleProp<ViewStyle>;
 
-    /** Additional styles to add after local styles. Applied to the children wrapper container */
+    /** Additional styles to add to the container after local styles. Applied to the parent container when there are no errors */
+    successStyle?: StyleProp<ViewStyle>;
+
+    /** Additional styles to add to the container after local styles. Applied to the parent container when there are errors */
+    errorStyle?: StyleProp<ViewStyle>;
+
+    /** Additional styles to add to the children wrapper container after local styles. Applied to the children wrapper container */
     contentContainerStyle?: StyleProp<ViewStyle>;
 
     /** Additional style object for the error row */
@@ -74,6 +80,8 @@ type StrikethroughProps = Partial<ChildrenProps> & {style: AllStyles[]};
 function OfflineWithFeedback({
     pendingAction,
     contentContainerStyle,
+    successStyle,
+    errorStyle,
     errorRowStyles,
     errors,
     needsOffscreenAlphaCompositing = false,
@@ -137,7 +145,7 @@ function OfflineWithFeedback({
         children = applyStrikeThrough(children);
     }
     return (
-        <View style={style}>
+        <View style={[style, shouldShowErrorMessages ? errorStyle : successStyle]}>
             {shouldShowErrorMessages && shouldDisplayErrorAbove && (
                 <ErrorMessageRow
                     errors={errors}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 725e078333bc8..e0184878b2b73 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -938,8 +938,7 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: theme.activeComponentBG,
         },
 
-        touchableButtonImageContainer: {
-            width: variables.componentSizeNormal,
+        touchableButtonImageHeight: {
             height: variables.componentSizeNormal,
         },
 

From 78fea395fa7c8cf8ae43bdb7dfa39a13b02168ff Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 12:48:11 -0500
Subject: [PATCH 03/15] fix: update error states in
 `WorkspaceCompanyCardsTableItem`

---
 .../WorkspaceCompanyCardsTableItem.tsx        | 67 +++++++++----------
 1 file changed, 33 insertions(+), 34 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
index e279c0504c4b9..c489678dec5cd 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
@@ -101,33 +101,37 @@ function WorkspaceCompanyCardTableItem({
     const alternateLoginText = shouldUseNarrowTableRowLayout ? `${customCardName}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : (cardholder?.login ?? '');
 
     return (
-        <PressableWithFeedback
-            role={CONST.ROLE.BUTTON}
-            style={[styles.mh5, styles.br3, styles.mb2, styles.highlightBG]}
-            accessibilityLabel="row"
-            hoverStyle={styles.hoveredComponentBG}
-            disabled={isCardDeleted}
-            onPress={() => {
-                if (!assignedCard) {
-                    onAssignCard();
-                    return;
-                }
-
-                if (!assignedCard?.accountID || !assignedCard?.fundID) {
-                    return;
-                }
-
-                return Navigation.navigate(
-                    ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(
-                        policyID,
-                        assignedCard.cardID.toString(),
-                        getCompanyCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID),
-                    ),
-                );
-            }}
+        <OfflineWithFeedback
+            errorRowStyles={styles.ph5}
+            errors={assignedCard?.errors}
+            pendingAction={assignedCard?.pendingAction}
         >
-            {({hovered}) => (
-                <View style={styles.flexColumn}>
+            <PressableWithFeedback
+                role={CONST.ROLE.BUTTON}
+                style={[styles.mh5, styles.br3, styles.mb2, styles.highlightBG]}
+                accessibilityLabel="row"
+                hoverStyle={styles.hoveredComponentBG}
+                disabled={isCardDeleted}
+                onPress={() => {
+                    if (!assignedCard) {
+                        onAssignCard();
+                        return;
+                    }
+
+                    if (!assignedCard?.accountID || !assignedCard?.fundID) {
+                        return;
+                    }
+
+                    return Navigation.navigate(
+                        ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(
+                            policyID,
+                            assignedCard.cardID.toString(),
+                            getCompanyCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID),
+                        ),
+                    );
+                }}
+            >
+                {({hovered}) => (
                     <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter, styles.br3, styles.p4]}>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
@@ -218,14 +222,9 @@ function WorkspaceCompanyCardTableItem({
                             )}
                         </View>
                     </View>
-                    <OfflineWithFeedback
-                        errorRowStyles={styles.ph5}
-                        errors={assignedCard?.errors}
-                        pendingAction={assignedCard?.pendingAction}
-                    />
-                </View>
-            )}
-        </PressableWithFeedback>
+                )}
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
     );
 }
 

From f704d7646c0df918a1cdaea73483b6977a7698b2 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 16:38:00 -0500
Subject: [PATCH 04/15] feat: implement pending state for failed assigned cards

---
 src/ONYXKEYS.ts                               |  4 ++
 src/libs/actions/CompanyCards.ts              | 32 +++++++++++--
 .../WorkspaceCompanyCardsTable.tsx            | 24 ++++++++--
 .../WorkspaceCompanyCardsTableItem.tsx        | 47 +++++++++++++++----
 .../assignCard/ConfirmationStep.tsx           | 15 ++++--
 src/types/onyx/AssignCard.ts                  |  4 ++
 src/types/onyx/index.ts                       |  4 +-
 7 files changed, 108 insertions(+), 22 deletions(-)

diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 408309dc8f873..2ac5536ffc2a4 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -703,6 +703,9 @@ const ONYXKEYS = {
          */
         WORKSPACE_CARDS_LIST: 'cards_',
 
+        /** Collection of objects where each object represents the card assignment that failed */
+        FAILED_COMPANY_CARDS_ASSIGNMENTS: 'failedCompanyCardsAssignments_',
+
         /** Expensify cards settings */
         PRIVATE_EXPENSIFY_CARD_SETTINGS: 'private_expensifyCardSettings_',
 
@@ -1125,6 +1128,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_BANK_ACCOUNT_METADATA]: OnyxTypes.ExpensifyCardBankAccountMetadata;
     [ONYXKEYS.COLLECTION.PRIVATE_EXPENSIFY_CARD_MANUAL_BILLING]: boolean;
     [ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
+    [ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS]: OnyxTypes.FailedCompanyCardAssignments;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.PolicyConnectionName;
     [ONYXKEYS.COLLECTION.EXPENSIFY_CARD_USE_CONTINUOUS_RECONCILIATION]: OnyxTypes.CardContinuousReconciliation;
     [ONYXKEYS.COLLECTION.LAST_SELECTED_FEED]: OnyxTypes.CompanyCardFeedWithDomainID;
diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index 676c0abd66bb2..fe03336fe62b8 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -22,7 +22,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Card, Policy} from '@src/types/onyx';
+import type {Card, FailedCompanyCardAssignment, Policy} from '@src/types/onyx';
 import type {AssignCard, AssignCardData} from '@src/types/onyx/AssignCard';
 import type {
     AddNewCardFeedData,
@@ -308,19 +308,29 @@ function deleteWorkspaceCompanyCardFeed(policyID: string, domainOrWorkspaceAccou
     API.write(WRITE_COMMANDS.DELETE_COMPANY_CARD_FEED, parameters, {optimisticData, successData, failureData});
 }
 
-function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, data?: Partial<AssignCardData>) {
+function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspaceAccountID: number, data?: Partial<AssignCardData>) {
     if (!data || !policy?.id) {
         return;
     }
-    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName = ''} = data;
+    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName: customCardName = '', cardNumber = '', cardholder} = data;
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
     const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID);
 
+    const failedCardAssignment: FailedCompanyCardAssignment = {
+        cardholder,
+        customCardName,
+        cardNumber,
+        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        errors: {
+            failed: 'Card assignment failed.',
+        },
+    };
+
     const parameters: AssignCompanyCardParams = {
         policyID: policy.id,
         bankName,
         encryptedCardNumber,
-        cardName,
+        cardName: customCardName,
         email,
         startDate,
         reportActionID: optimisticCardAssignedReportAction.reportActionID,
@@ -370,6 +380,13 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, data?: Partial<As
                 key: ONYXKEYS.ASSIGN_CARD,
                 value: {isAssigning: false},
             },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`,
+                value: {
+                    [cardNumber]: failedCardAssignment,
+                },
+            },
         ],
     };
 
@@ -451,6 +468,12 @@ function unassignWorkspaceCompanyCard(domainOrWorkspaceAccountID: number, bankNa
     API.write(WRITE_COMMANDS.UNASSIGN_COMPANY_CARD, parameters, onyxData);
 }
 
+function resetFailedWorkspaceCompanyCardAssignment(domainOrWorkspaceAccountID: number, cardNumber: string) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`, {
+        [cardNumber]: null,
+    });
+}
+
 function updateWorkspaceCompanyCard(domainOrWorkspaceAccountID: number, cardID: string, bankName: CompanyCardFeed, lastScrapeResult?: number) {
     const authToken = NetworkStore.getAuthToken();
 
@@ -939,6 +962,7 @@ export {
     addNewCompanyCardsFeed,
     assignWorkspaceCompanyCard,
     unassignWorkspaceCompanyCard,
+    resetFailedWorkspaceCompanyCardAssignment,
     updateWorkspaceCompanyCard,
     updateCompanyCardName,
     setCompanyCardExportAccount,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable.tsx
index 2d1d016159ace..bd25fedc381e8 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable.tsx
@@ -31,6 +31,9 @@ type WorkspaceCompanyCardsTableProps = {
     /** Current policy id */
     policyID: string;
 
+    /** Domain or workspace account ID */
+    domainOrWorkspaceAccountID: number;
+
     /** On assign card callback */
     onAssignCard: () => void;
 
@@ -41,20 +44,30 @@ type WorkspaceCompanyCardsTableProps = {
     shouldShowGBDisclaimer?: boolean;
 };
 
-function WorkspaceCompanyCardsTable({selectedFeed, cardsList, policyID, onAssignCard, isAssigningCardDisabled, shouldShowGBDisclaimer}: WorkspaceCompanyCardsTableProps) {
+function WorkspaceCompanyCardsTable({
+    selectedFeed,
+    cardsList,
+    policyID,
+    domainOrWorkspaceAccountID,
+    onAssignCard,
+    isAssigningCardDisabled,
+    shouldShowGBDisclaimer,
+}: WorkspaceCompanyCardsTableProps) {
     const styles = useThemeStyles();
     const {translate, localeCompare} = useLocalize();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
 
     const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
     const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES, {canBeMissing: true});
+    const [failedCompanyCardAssignments] = useOnyx(`${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`, {canBeMissing: true});
 
     const {cardList, ...assignedCards} = cardsList ?? {};
     const [cardFeeds] = useCardFeeds(policyID);
     const companyFeeds = getCompanyFeeds(cardFeeds);
+    const companyCardFeedData = companyFeeds[selectedFeed];
 
-    const isPlaidCardFeed = !!companyFeeds?.[selectedFeed]?.accountList;
-    const cards = isPlaidCardFeed ? (companyFeeds?.[selectedFeed]?.accountList ?? []) : Object.keys(cardList ?? {});
+    const isPlaidCardFeed = !!companyCardFeedData?.accountList;
+    const cards = isPlaidCardFeed ? (companyCardFeedData?.accountList ?? []) : Object.keys(cardList ?? {});
 
     // When we reach the medium screen width or the narrow layout is active,
     // we want to hide the table header and the middle column of the card rows, so that the content is not overlapping.
@@ -68,6 +81,8 @@ function WorkspaceCompanyCardsTable({selectedFeed, cardsList, policyID, onAssign
 
             const assignedCard = Object.values(assignedCards ?? {}).find(assignedCardPredicate);
 
+            const failedCompanyCardAssignment = failedCompanyCardAssignments?.[cardName];
+
             const cardholder = personalDetails?.[assignedCard?.accountID ?? CONST.DEFAULT_NUMBER_ID];
 
             const customCardName = customCardNames?.[assignedCard?.cardID ?? CONST.DEFAULT_NUMBER_ID] ?? getCardDefaultName(cardholder?.displayName);
@@ -76,7 +91,7 @@ function WorkspaceCompanyCardsTable({selectedFeed, cardsList, policyID, onAssign
 
             const isAssigned = !!assignedCard;
 
-            return {cardName, customCardName, isCardDeleted, isAssigned, assignedCard, cardholder};
+            return {cardName, customCardName, isCardDeleted, isAssigned, assignedCard, failedCompanyCardAssignment: failedCompanyCardAssignment, cardholder};
         }) ?? [];
 
     const renderItem = ({item, index}: ListRenderItemInfo<WorkspaceCompanyCardTableItemData>) => (
@@ -84,6 +99,7 @@ function WorkspaceCompanyCardsTable({selectedFeed, cardsList, policyID, onAssign
             key={`${item.cardName}_${index}`}
             item={item}
             policyID={policyID}
+            domainOrWorkspaceAccountID={domainOrWorkspaceAccountID}
             selectedFeed={selectedFeed}
             plaidIconUrl={getPlaidInstitutionIconUrl(selectedFeed)}
             isPlaidCardFeed={isPlaidCardFeed}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
index c489678dec5cd..a90e3511a6cff 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
@@ -14,13 +14,14 @@ import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {resetFailedWorkspaceCompanyCardAssignment} from '@libs/actions/CompanyCards';
 import {getCardFeedIcon, getCompanyCardFeedWithDomainID, lastFourNumbersFromCardName, splitMaskedCardNumber} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDefaultAvatarURL} from '@libs/UserAvatarUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
-import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID, PersonalDetails} from '@src/types/onyx';
+import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID, FailedCompanyCardAssignment, PersonalDetails} from '@src/types/onyx';
 
 type WorkspaceCompanyCardTableItemData = {
     /** Card number */
@@ -35,6 +36,9 @@ type WorkspaceCompanyCardTableItemData = {
     /** Assigned card */
     assignedCard: Card | undefined;
 
+    /** Pending company card assignment */
+    failedCompanyCardAssignment: FailedCompanyCardAssignment | undefined;
+
     /** Whether the card is deleted */
     isCardDeleted: boolean;
 
@@ -49,6 +53,9 @@ type WorkspaceCompanyCardTableItemProps = {
     /** Policy ID */
     policyID: string;
 
+    /** Domain or workspace account ID */
+    domainOrWorkspaceAccountID: number;
+
     /** Selected feed */
     selectedFeed: CompanyCardFeedWithDomainID;
 
@@ -69,8 +76,9 @@ type WorkspaceCompanyCardTableItemProps = {
 };
 
 function WorkspaceCompanyCardTableItem({
-    item: {cardName, customCardName, assignedCard, isAssigned, cardholder, isCardDeleted},
+    item,
     policyID,
+    domainOrWorkspaceAccountID,
     selectedFeed,
     plaidIconUrl,
     isPlaidCardFeed,
@@ -85,26 +93,45 @@ function WorkspaceCompanyCardTableItem({
     const companyCardFeedIcons = useCompanyCardFeedIcons();
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
-    if (assignedCard) {
-        assignedCard.errors = {
-            test: 'test',
-        };
-    }
-
     let cardFeedIcon = null;
     if (!plaidIconUrl) {
         cardFeedIcon = getCardFeedIcon(selectedFeed as CompanyCardFeed, illustrations, companyCardFeedIcons);
     }
 
+    const {failedCompanyCardAssignment} = item;
+    let {cardName, customCardName, cardholder, assignedCard, isAssigned, isCardDeleted} = item;
+    let errors = assignedCard?.errors;
+    let pendingAction = assignedCard?.pendingAction;
+
+    if (failedCompanyCardAssignment) {
+        cardName = failedCompanyCardAssignment.cardNumber;
+        customCardName = failedCompanyCardAssignment.customCardName;
+        cardholder = failedCompanyCardAssignment.cardholder;
+        assignedCard = undefined;
+        isAssigned = true;
+        isCardDeleted = false;
+        errors = failedCompanyCardAssignment?.errors;
+        pendingAction = failedCompanyCardAssignment?.pendingAction;
+    }
+
     const lastCardNumbers = isPlaidCardFeed ? lastFourNumbersFromCardName(cardName) : splitMaskedCardNumber(cardName)?.lastDigits;
 
     const alternateLoginText = shouldUseNarrowTableRowLayout ? `${customCardName}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : (cardholder?.login ?? '');
 
+    const resetFailedCompanyCardAssignment = () => {
+        if (!failedCompanyCardAssignment) {
+            return;
+        }
+
+        resetFailedWorkspaceCompanyCardAssignment(domainOrWorkspaceAccountID, cardName);
+    };
+
     return (
         <OfflineWithFeedback
             errorRowStyles={styles.ph5}
-            errors={assignedCard?.errors}
-            pendingAction={assignedCard?.pendingAction}
+            errors={errors}
+            pendingAction={pendingAction}
+            onClose={resetFailedCompanyCardAssignment}
         >
             <PressableWithFeedback
                 role={CONST.ROLE.BUTTON}
diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
index 4a10ae3ec4449..4bbc4335035dd 100644
--- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
@@ -13,7 +13,8 @@ import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useRootNavigationState from '@hooks/useRootNavigationState';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getCompanyCardFeed, getPlaidCountry, getPlaidInstitutionId, isSelectedFeedExpired, lastFourNumbersFromCardName, maskCardNumber} from '@libs/CardUtils';
+import useWorkspaceAccountID from '@hooks/useWorkspaceAccountID';
+import {getCompanyCardFeed, getDomainOrWorkspaceAccountID, getPlaidCountry, getPlaidInstitutionId, isSelectedFeedExpired, lastFourNumbersFromCardName, maskCardNumber} from '@libs/CardUtils';
 import {isFullScreenName} from '@libs/Navigation/helpers/isNavigatorName';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import Navigation from '@navigation/Navigation';
@@ -50,8 +51,16 @@ function ConfirmationStep({policyID, feed, backTo}: ConfirmationStepProps) {
     const bankName = assignCard?.data?.bankName ?? getCompanyCardFeed(feed);
     const [cardFeeds] = useCardFeeds(policyID);
 
+    const companyCardFeedData = cardFeeds?.[feed];
+
+    const workspaceAccountID = useWorkspaceAccountID(policyID);
+    const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, companyCardFeedData);
+
     const data = assignCard?.data;
-    const cardholderName = Str.removeSMSDomain(getPersonalDetailByEmail(data?.email ?? '')?.displayName ?? '');
+    const cardholder = getPersonalDetailByEmail(data?.email ?? '');
+
+    console.log('cardholder', cardholder);
+    const cardholderName = Str.removeSMSDomain(cardholder?.displayName ?? '');
 
     const currentFullScreenRoute = useRootNavigationState((state) => state?.routes?.findLast((route) => isFullScreenName(route.name)));
 
@@ -90,7 +99,7 @@ function ConfirmationStep({policyID, feed, backTo}: ConfirmationStepProps) {
             setAssignCardStepAndData({currentStep: institutionId ? CONST.COMPANY_CARD.STEP.PLAID_CONNECTION : CONST.COMPANY_CARD.STEP.BANK_CONNECTION});
             return;
         }
-        assignWorkspaceCompanyCard(policy, {...data, bankName});
+        assignWorkspaceCompanyCard(policy, domainOrWorkspaceAccountID, {...data, cardholder, bankName});
     };
 
     const editStep = (step: AssignCardStep) => {
diff --git a/src/types/onyx/AssignCard.ts b/src/types/onyx/AssignCard.ts
index 9643d33ed2f08..3d26d1690a7bd 100644
--- a/src/types/onyx/AssignCard.ts
+++ b/src/types/onyx/AssignCard.ts
@@ -3,12 +3,16 @@ import type {PlaidAccount} from 'react-plaid-link';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type {CompanyCardFeed} from './CardFeeds';
+import type PersonalDetails from './PersonalDetails';
 
 /** Assign card flow steps */
 type AssignCardStep = ValueOf<typeof CONST.COMPANY_CARD.STEP>;
 
 /** Data required to be sent to issue a new card */
 type AssignCardData = {
+    /** The cardholder personal details */
+    cardholder?: PersonalDetails;
+
     /** The email address of the assignee */
     email: string;
 
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index 2dab239af2f68..9e6f7cd1faf4b 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -15,7 +15,7 @@ import type BillingStatus from './BillingStatus';
 import type BlockedFromConcierge from './BlockedFromConcierge';
 import type CancellationDetails from './CancellationDetails';
 import type Card from './Card';
-import type {CardList, IssueNewCard, ProvisioningCardData, WorkspaceCardsList} from './Card';
+import type {CardList, FailedCompanyCardAssignment, FailedCompanyCardAssignments, IssueNewCard, ProvisioningCardData, WorkspaceCardsList} from './Card';
 import type CardContinuousReconciliation from './CardContinuousReconciliation';
 import type CardFeeds from './CardFeeds';
 import type {AddNewCompanyCardFeed, CompanyCardFeed, CompanyCardFeedWithDomainID, DomainSettings, FundID} from './CardFeeds';
@@ -163,6 +163,8 @@ export type {
     Download,
     DuplicateWorkspace,
     WorkspaceCardsList,
+    FailedCompanyCardAssignment,
+    FailedCompanyCardAssignments,
     ExpensifyCardSettings,
     ExpensifyCardBankAccountMetadata,
     FrequentlyUsedEmoji,

From 7d453289b6fcad9a308a9a336e4d630338572975 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 16:38:11 -0500
Subject: [PATCH 05/15] fix: make messages row smaller

---
 src/styles/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index e0184878b2b73..f47785b6de77a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -938,8 +938,8 @@ const staticStyles = (theme: ThemeColors) =>
             backgroundColor: theme.activeComponentBG,
         },
 
-        touchableButtonImageHeight: {
-            height: variables.componentSizeNormal,
+        messagesRowHeight: {
+            height: variables.componentSizeXSmall,
         },
 
         touchableButtonImage: {

From c4b3bb5298252ad9082ed28554feb97839661c43 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 16:39:03 -0500
Subject: [PATCH 06/15] fix: invalid usage of cardsList

---
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx   | 4 +++-
 src/types/onyx/Card.ts                                     | 7 ++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 7657c8ceeeaac..749ac9b63db6c 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -49,6 +49,8 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
     const feed = selectedFeed ? getCompanyCardFeed(selectedFeed) : undefined;
     const [cardsList] = useCardsList(selectedFeed);
 
+    const {cardList, ...assignedCards} = cardsList ?? {};
+
     const isNoFeed = !selectedFeedData;
     const isFeedPending = !!selectedFeedData?.pending;
     const isFeedAdded = !isFeedPending && !isNoFeed;
@@ -57,7 +59,7 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
     const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, selectedFeedData);
 
     const isGB = countryByIp === CONST.COUNTRY.GB;
-    const hasNoAssignedCard = Object.keys(cardsList ?? {}).length === 0;
+    const hasNoAssignedCard = Object.keys(assignedCards).length === 0;
     const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);
 
     const fetchCompanyCards = useCallback(() => {
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 8e6b5151a4fb2..2159fd6d5fed7 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -220,7 +220,12 @@ type ExpensifyCardDetails = {
 };
 
 /** Record of Expensify cards, indexed by cardID */
-type CardList = Record<string, Card>;
+type CardList = Record<string, Card> & {
+    /**
+     * List of assignable cards
+     */
+    cardList?: Record<string, string>;
+};
 
 /** Issue new card flow steps */
 type IssueNewCardStep = ValueOf<typeof CONST.EXPENSIFY_CARD.STEP>;

From 6629ae8e24b946bf215b770e8fe2cf75acddcd95 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 16:39:08 -0500
Subject: [PATCH 07/15] Update Card.ts

---
 src/types/onyx/Card.ts | 43 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index 2159fd6d5fed7..e45e0f6fce786 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -1,6 +1,7 @@
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 import type * as OnyxCommon from './OnyxCommon';
+import type PersonalDetails from './PersonalDetails';
 
 /** Model of Expensify card status changes */
 type CardStatusChanges = {
@@ -290,8 +291,48 @@ type WorkspaceCardsList = Record<string, Card> & {
     cardList?: Record<string, string>;
 };
 
+/**
+ * Pending action for a company card assignment
+ */
+type FailedCompanyCardAssignment = {
+    /** Cardholder personal details */
+    cardholder?: PersonalDetails;
+
+    /** The name of the card */
+    customCardName: string;
+
+    /** The card number */
+    cardNumber: string;
+
+    /** Card related error messages */
+    errors?: OnyxCommon.Errors;
+
+    /** Collection of form field errors  */
+    errorFields?: OnyxCommon.ErrorFields;
+
+    /**
+     * The type of action that's pending
+     */
+    pendingAction?: OnyxCommon.PendingAction;
+};
+
+/** Pending action for a company card assignment */
+type FailedCompanyCardAssignments = Record<string, FailedCompanyCardAssignment>;
+
 /** Card list with only available card */
 type FilteredCardList = Record<string, string>;
 
 export default Card;
-export type {ExpensifyCardDetails, CardList, IssueNewCard, IssueNewCardStep, IssueNewCardData, WorkspaceCardsList, CardLimitType, FilteredCardList, ProvisioningCardData};
+export type {
+    ExpensifyCardDetails,
+    CardList,
+    IssueNewCard,
+    IssueNewCardStep,
+    IssueNewCardData,
+    WorkspaceCardsList,
+    CardLimitType,
+    FilteredCardList,
+    ProvisioningCardData,
+    FailedCompanyCardAssignment,
+    FailedCompanyCardAssignments,
+};

From 8835385485775c2c22ef49961ac15fd29f478459 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 16:39:12 -0500
Subject: [PATCH 08/15] Update WorkspaceCompanyCardsPage.tsx

---
 src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 749ac9b63db6c..eae763e3c1832 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -122,10 +122,11 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
 
                     {isFeedAdded && !isFeedPending && (
                         <WorkspaceCompanyCardsTable
+                            policyID={policyID}
+                            domainOrWorkspaceAccountID={domainOrWorkspaceAccountID}
                             selectedFeed={selectedFeed}
                             cardsList={cardsList}
                             shouldShowGBDisclaimer={shouldShowGBDisclaimer}
-                            policyID={policyID}
                             onAssignCard={assignCard}
                             isAssigningCardDisabled={isAssigningCardDisabled}
                         />

From 908240fa27288966cdbc4532af617a3440725a73 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 17:14:02 -0500
Subject: [PATCH 09/15] remove unused props

---
 src/components/OfflineWithFeedback.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 080d3173be296..61cda2c806a7c 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -44,12 +44,6 @@ type OfflineWithFeedbackProps = Partial<ChildrenProps> & {
     /** Additional styles to add to the container after local styles. Applied to the parent container */
     style?: StyleProp<ViewStyle>;
 
-    /** Additional styles to add to the container after local styles. Applied to the parent container when there are no errors */
-    successStyle?: StyleProp<ViewStyle>;
-
-    /** Additional styles to add to the container after local styles. Applied to the parent container when there are errors */
-    errorStyle?: StyleProp<ViewStyle>;
-
     /** Additional styles to add to the children wrapper container after local styles. Applied to the children wrapper container */
     contentContainerStyle?: StyleProp<ViewStyle>;
 
@@ -80,8 +74,6 @@ type StrikethroughProps = Partial<ChildrenProps> & {style: AllStyles[]};
 function OfflineWithFeedback({
     pendingAction,
     contentContainerStyle,
-    successStyle,
-    errorStyle,
     errorRowStyles,
     errors,
     needsOffscreenAlphaCompositing = false,

From 68fa54fae5be1c841d21a9e10da6fadbe6a567c3 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 17:15:27 -0500
Subject: [PATCH 10/15] rename `customCardName`

---
 src/libs/actions/CompanyCards.ts                            | 6 +++---
 .../companyCards/WorkspaceCompanyCardsTableItem.tsx         | 2 +-
 src/types/onyx/Card.ts                                      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index fe03336fe62b8..14e65c1e3bfdd 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -312,13 +312,13 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
     if (!data || !policy?.id) {
         return;
     }
-    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName: customCardName = '', cardNumber = '', cardholder} = data;
+    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName = '', cardNumber = '', cardholder} = data;
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
     const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID);
 
     const failedCardAssignment: FailedCompanyCardAssignment = {
         cardholder,
-        customCardName,
+        cardName,
         cardNumber,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         errors: {
@@ -330,7 +330,7 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
         policyID: policy.id,
         bankName,
         encryptedCardNumber,
-        cardName: customCardName,
+        cardName,
         email,
         startDate,
         reportActionID: optimisticCardAssignedReportAction.reportActionID,
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
index 94f6ac88c6901..c6410ceb0154d 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTableItem.tsx
@@ -108,7 +108,7 @@ function WorkspaceCompanyCardTableItem({
 
     if (failedCompanyCardAssignment) {
         cardName = failedCompanyCardAssignment.cardNumber;
-        customCardName = failedCompanyCardAssignment.customCardName;
+        customCardName = failedCompanyCardAssignment.cardName;
         cardholder = failedCompanyCardAssignment.cardholder;
         assignedCard = undefined;
         isAssigned = true;
diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
index f2ba17487b65f..9ccebed3dc7b5 100644
--- a/src/types/onyx/Card.ts
+++ b/src/types/onyx/Card.ts
@@ -297,7 +297,7 @@ type FailedCompanyCardAssignment = {
     cardholder?: PersonalDetails;
 
     /** The name of the card */
-    customCardName: string;
+    cardName: string;
 
     /** The card number */
     cardNumber: string;

From 490242cb1242817521c554eaff9818b2a0d2a444 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 17:16:16 -0500
Subject: [PATCH 11/15] fix: remove success and error styles

---
 src/components/OfflineWithFeedback.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index 61cda2c806a7c..a9c8b9f294599 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -137,7 +137,7 @@ function OfflineWithFeedback({
         children = applyStrikeThrough(children);
     }
     return (
-        <View style={[style, shouldShowErrorMessages ? errorStyle : successStyle]}>
+        <View style={style}>
             {shouldShowErrorMessages && shouldDisplayErrorAbove && (
                 <ErrorMessageRow
                     errors={errors}

From 72617a2a13d9bb2a03c3a3a994e14af34b12b7e6 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 17:16:22 -0500
Subject: [PATCH 12/15] fix: remove manual memo

---
 src/components/OfflineWithFeedback.tsx | 47 ++++++++++++--------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/OfflineWithFeedback.tsx b/src/components/OfflineWithFeedback.tsx
index a9c8b9f294599..c515149b66a99 100644
--- a/src/components/OfflineWithFeedback.tsx
+++ b/src/components/OfflineWithFeedback.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useNetwork from '@hooks/useNetwork';
@@ -107,30 +107,27 @@ function OfflineWithFeedback({
     /**
      * This method applies the strikethrough to all the children passed recursively
      */
-    const applyStrikeThrough = useCallback(
-        (childrenProp: React.ReactNode): React.ReactNode => {
-            const strikeThroughChildren = mapChildrenFlat(childrenProp, (child) => {
-                if (!React.isValidElement(child) || child.type === ImageSVG) {
-                    return child;
-                }
-
-                type ChildComponentProps = ChildrenProps & {style?: AllStyles};
-                const childProps = child.props as ChildComponentProps;
-                const props: StrikethroughProps = {
-                    style: StyleUtils.combineStyles(childProps.style ?? [], styles.offlineFeedbackDeleted, styles.userSelectNone),
-                };
-
-                if (childProps.children) {
-                    props.children = applyStrikeThrough(childProps.children);
-                }
-
-                return React.cloneElement(child, props);
-            });
-
-            return strikeThroughChildren;
-        },
-        [StyleUtils, styles],
-    );
+    const applyStrikeThrough = (childrenProp: React.ReactNode): React.ReactNode => {
+        const strikeThroughChildren = mapChildrenFlat(childrenProp, (child) => {
+            if (!React.isValidElement(child) || child.type === ImageSVG) {
+                return child;
+            }
+
+            type ChildComponentProps = ChildrenProps & {style?: AllStyles};
+            const childProps = child.props as ChildComponentProps;
+            const props: StrikethroughProps = {
+                style: StyleUtils.combineStyles(childProps.style ?? [], styles.offlineFeedbackDeleted, styles.userSelectNone),
+            };
+
+            if (childProps.children) {
+                props.children = applyStrikeThrough(childProps.children);
+            }
+
+            return React.cloneElement(child, props);
+        });
+
+        return strikeThroughChildren;
+    };
 
     // Apply strikethrough to children if needed, but skip it if we are not going to render them
     if (hasChildren && needsStrikeThrough && !hideChildren) {

From f8522c7ece9d297f6bfdc8e4fc5671eddb6c1785 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 23:47:46 -0500
Subject: [PATCH 13/15] remove unused prop

---
 .../workspace/companyCards/assignCard/AssignCardFeedPage.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
index 98a5052636533..0bffd8283237a 100644
--- a/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
+++ b/src/pages/workspace/companyCards/assignCard/AssignCardFeedPage.tsx
@@ -89,7 +89,6 @@ function AssignCardFeedPage({route, policy}: AssignCardFeedPageProps) {
         case CONST.COMPANY_CARD.STEP.ASSIGNEE:
             return (
                 <AssigneeStep
-                    feed={feed}
                     policy={policy}
                     route={route}
                 />

From a5ae1c255b7f45d0a19933a830b4fb2ba527c5f0 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 23:56:11 -0500
Subject: [PATCH 14/15] fix: assignment RHP not closing

---
 src/libs/actions/CompanyCards.ts                              | 4 ++--
 .../workspace/companyCards/assignCard/ConfirmationStep.tsx    | 4 ++--
 src/types/onyx/AssignCard.ts                                  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index 09141fa092c8a..7f566a6261a99 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -361,7 +361,7 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: ONYXKEYS.ASSIGN_CARD,
-                value: {isAssigned: true, isAssigning: false},
+                value: {isAssigning: false, isAssignmentFinished: true},
             },
         ],
         failureData: [
@@ -378,7 +378,7 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: ONYXKEYS.ASSIGN_CARD,
-                value: {isAssigning: false},
+                value: {isAssigning: false, isAssignmentFinished: true},
             },
             {
                 onyxMethod: Onyx.METHOD.MERGE,
diff --git a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
index eca84856b8d29..75e0302731d27 100644
--- a/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
+++ b/src/pages/workspace/companyCards/assignCard/ConfirmationStep.tsx
@@ -68,7 +68,7 @@ function ConfirmationStep({policyID, feed, backTo}: ConfirmationStepProps) {
     const currentFullScreenRoute = useRootNavigationState((state) => state?.routes?.findLast((route) => isFullScreenName(route.name)));
 
     useEffect(() => {
-        if (!assignCard?.isAssigned) {
+        if (!assignCard?.isAssignmentFinished) {
             return;
         }
 
@@ -80,7 +80,7 @@ function ConfirmationStep({policyID, feed, backTo}: ConfirmationStepProps) {
         }
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         InteractionManager.runAfterInteractions(() => clearAssignCardStepAndData());
-    }, [assignCard?.isAssigned, backTo, policyID, currentFullScreenRoute?.state?.routes]);
+    }, [assignCard?.isAssignmentFinished, backTo, policyID, currentFullScreenRoute?.state?.routes]);
 
     const submit = () => {
         if (!policyID) {
diff --git a/src/types/onyx/AssignCard.ts b/src/types/onyx/AssignCard.ts
index 3d26d1690a7bd..b353d4c007f2e 100644
--- a/src/types/onyx/AssignCard.ts
+++ b/src/types/onyx/AssignCard.ts
@@ -64,8 +64,8 @@ type AssignCard = {
     /** Whether the user is editing step */
     isEditing: boolean;
 
-    /** Whether the card is successfully assigned */
-    isAssigned?: boolean;
+    /** Whether the assignment flow has finished */
+    isAssignmentFinished?: boolean;
 
     /** Whether the card is assigning */
     isAssigning?: boolean;

From 3702909b4aaa8b9f84d9c0b533962665ddb15539 Mon Sep 17 00:00:00 2001
From: Christoph Pader <chris@margelo.com>
Date: Thu, 18 Dec 2025 23:56:26 -0500
Subject: [PATCH 15/15] fix: failed card data not saved for Plaid

---
 src/libs/actions/CompanyCards.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
index 7f566a6261a99..a2e26c783ed58 100644
--- a/src/libs/actions/CompanyCards.ts
+++ b/src/libs/actions/CompanyCards.ts
@@ -312,14 +312,14 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
     if (!data || !policy?.id) {
         return;
     }
-    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName = '', cardNumber = '', cardholder} = data;
+    const {bankName = '', email = '', encryptedCardNumber = '', startDate = '', cardName = '', cardholder} = data;
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
     const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID);
 
     const failedCardAssignment: FailedCompanyCardAssignment = {
         cardholder,
         cardName,
-        cardNumber,
+        cardNumber: encryptedCardNumber,
         pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
         errors: {
             failed: 'Card assignment failed.',
@@ -384,7 +384,7 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, domainOrWorkspace
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`,
                 value: {
-                    [cardNumber]: failedCardAssignment,
+                    [encryptedCardNumber]: failedCardAssignment,
                 },
             },
         ],