[No QA] [BYOC] [Bulk Card Assignments] Release 1+2: Error states during card assignment

src/ONYXKEYS.ts

@@ -706,6 +706,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_',
 
@@ -1131,6 +1134,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;

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;

src/components/ImportSpreadsheetColumns.tsx

@@ -108,7 +108,6 @@ function ImportSpreadsheetColumns({
                     shouldDisplayErrorAbove
                     errors={errors}
                     errorRowStyles={styles.mv2}
-                    canDismissError={false}
                 >
                     <Button
                         text={translate('common.import')}

src/components/MessagesRow.tsx

@@ -10,7 +10,7 @@
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip';
 
@@ -22,46 +22,46 @@
     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>;
 
     /** 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 showDismissButton = !!onDismiss;
+
+    const dismissText = translate('common.dismiss');
+
     if (isEmptyObject(messages)) {
         return null;
     }
 
     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}
                 textStyles={errorTextStyles}
                 messages={messages}
                 type={type}
             />
-            {canDismiss && (
-                <Tooltip text={translate('common.close')}>
+            {showDismissButton && (
+                <Tooltip text={dismissText}>
                     <PressableWithoutFeedback
-                        onPress={onClose}
-                        style={[styles.touchableButtonImage]}
+                        onPress={onDismiss}
                         role={CONST.ROLE.BUTTON}
-                        accessibilityLabel={translate('common.close')}
+                        accessibilityLabel={dismissText}
                     >
                         <Icon
                             fill={theme.icon}

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';
@@ -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;
 
@@ -41,10 +41,10 @@ type OfflineWithFeedbackProps = 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 children wrapper container after local styles. Applied to the children wrapper container */
     contentContainerStyle?: StyleProp<ViewStyle>;
 
     /** Additional style object for the error row */
@@ -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,38 +101,36 @@ 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
      */
-    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 (needsStrikeThrough && !hideChildren) {
+    if (hasChildren && needsStrikeThrough && !hideChildren) {
         children = applyStrikeThrough(children);
     }
     return (
@@ -145,13 +139,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 +157,7 @@ function OfflineWithFeedback({
                     errors={errors}
                     errorRowStyles={errorRowStyles}
                     errorRowTextStyles={errorRowTextStyles}
-                    onClose={onClose}
-                    canDismissError={canDismissError}
+                    onDismiss={onDismiss}
                     dismissError={dismissError}
                 />
             )}

src/components/SelectionScreen.tsx

@@ -143,7 +143,7 @@
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const isConnectionEmpty = isEmpty(policy?.connections?.[connectionName]);
 
     return (
@@ -191,7 +191,7 @@
                         <ErrorMessageRow
                             errors={errors}
                             errorRowStyles={errorRowStyles}
-                            onClose={onClose}
+                            onDismiss={onClose}
                         />
                     </SelectionList>
                 </OfflineWithFeedback>

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,14 +308,24 @@ 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 = '', cardholder} = data;
     const assigneeDetails = PersonalDetailsUtils.getPersonalDetailByEmail(email);
     const optimisticCardAssignedReportAction = ReportUtils.buildOptimisticCardAssignedReportAction(assigneeDetails?.accountID ?? CONST.DEFAULT_NUMBER_ID);
 
+    const failedCardAssignment: FailedCompanyCardAssignment = {
+        cardholder,
+        cardName,
+        cardNumber: encryptedCardNumber,
+        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD,
+        errors: {
+            failed: 'Card assignment failed.',
+        },
+    };
+
     const parameters: AssignCompanyCardParams = {
         policyID: policy.id,
         bankName,
@@ -351,7 +361,7 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, data?: Partial<As
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: ONYXKEYS.ASSIGN_CARD,
-                value: {isAssigned: true, isAssigning: false},
+                value: {isAssigning: false, isAssignmentFinished: true},
             },
         ],
         failureData: [
@@ -368,7 +378,14 @@ function assignWorkspaceCompanyCard(policy: OnyxEntry<Policy>, data?: Partial<As
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: ONYXKEYS.ASSIGN_CARD,
-                value: {isAssigning: false},
+                value: {isAssigning: false, isAssignmentFinished: true},
+            },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.FAILED_COMPANY_CARDS_ASSIGNMENTS}${domainOrWorkspaceAccountID}`,
+                value: {
+                    [encryptedCardNumber]: failedCardAssignment,
+                },
             },
         ],
     };
@@ -449,6 +466,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();
 
@@ -937,6 +960,7 @@ export {
     addNewCompanyCardsFeed,
     assignWorkspaceCompanyCard,
     unassignWorkspaceCompanyCard,
+    resetFailedWorkspaceCompanyCardAssignment,
     updateWorkspaceCompanyCard,
     updateCompanyCardName,
     setCompanyCardExportAccount,

src/pages/ReimbursementAccount/VerifiedBankAccountFlowEntryPoint.tsx

@@ -4,7 +4,7 @@
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
 import {Bank, Connect, RotateLeft} from '@components/Icon/Expensicons';
 import LottieAnimations from '@components/LottieAnimations';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -239,8 +239,7 @@
                                 }
                                 errorRowStyles={styles.mt2}
                                 shouldShowErrorMessages
-                                canDismissError={!reimbursementAccount?.maxAttemptsReached}
-                                onClose={resetReimbursementAccount}
+                                onClose={reimbursementAccount?.maxAttemptsReached ? undefined : resetReimbursementAccount}
                             >
                                 <MenuItem
                                     title={translate('workspace.bankAccount.continueWithSetup')}

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.tsx

@@ -7,7 +7,7 @@
 import ErrorMessageRow from '@components/ErrorMessageRow';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {Star, Trashcan} from '@components/Icon/Expensicons';
 import {LockedAccountContext} from '@components/LockedAccountModalProvider';
 import MenuItem from '@components/MenuItem';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -320,12 +320,12 @@
                     <ErrorMessageRow
                         errors={getLatestErrorField(loginData, 'addedLogin')}
                         errorRowStyles={[themeStyles.mh5, themeStyles.mv3]}
-                        onClose={() => {
+                        onDismiss={() => {
                             clearContactMethod(contactMethod);
                             clearUnvalidatedNewContactMethodAction();
                             Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
                         }}
                         canDismissError
                     />
                 )}
                 {isValidateCodeFormVisible && !!loginData && !loginData.validatedDate && (

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

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>