Merge pull request #52357 from callstack-internal/fix/51876-change-of…

…fline-pattern-for-unassigning-cards-v2
Expensify · Nov 12, 2024 · ad61376 · ad61376
2 parents 8a1052a + 72861ec
commit ad61376
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 23 deletions.
diff --git a/src/libs/actions/CompanyCards.ts b/src/libs/actions/CompanyCards.ts
@@ -240,6 +240,27 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
 
     const onyxData: OnyxData = {
         optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
+                value: {
+                    [cardID]: {
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                    },
+                },
+            },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.CARD_LIST,
+                value: {
+                    [cardID]: {
+                        pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                    },
+                },
+            },
+        ],
+
+        successData: [
             {
                 onyxMethod: Onyx.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
@@ -262,7 +283,7 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
                 key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
                 value: {
                     [cardID]: {
-                        ...card,
+                        pendingAction: null,
                         errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                     },
                 },
@@ -272,7 +293,7 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: stri
                 key: ONYXKEYS.CARD_LIST,
                 value: {
                     [cardID]: {
-                        ...card,
+                        pendingAction: null,
                         errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                     },
                 },

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx
@@ -37,17 +37,20 @@ function WorkspaceCompanyCardsList({cardsList, policyID}: WorkspaceCompanyCardsL
         ({item, index}: ListRenderItemInfo<Card>) => {
             const cardID = Object.keys(cardsList ?? {}).find((id) => cardsList?.[id].cardID === item.cardID);
             const cardName = CardUtils.getCompanyCardNumber(cardsList?.cardList ?? {}, item.lastFourPAN);
+            const isCardDeleted = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
             return (
                 <OfflineWithFeedback
                     key={`${item.nameValuePairs?.cardTitle}_${index}`}
                     errorRowStyles={styles.ph5}
                     errors={item.errors}
+                    pendingAction={item.pendingAction}
                 >
                     <PressableWithFeedback
                         role={CONST.ROLE.BUTTON}
                         style={[styles.mh5, styles.br3, styles.mb3, styles.highlightBG]}
                         accessibilityLabel="row"
                         hoverStyle={styles.hoveredComponentBG}
+                        disabled={isCardDeleted}
                         onPress={() => {
                             if (!cardID || !item?.accountID) {
                                 return;

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsListRow.tsx
@@ -27,7 +27,7 @@ function WorkspaceCompanyCardsListRow({cardholder, name, cardNumber}: WorkspaceC
         <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, styles.br3, styles.p4]}>
             <View style={[styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                 <Avatar
-                    source={getDefaultAvatarURL(cardholder?.accountID)}
+                    source={cardholder?.avatar ?? getDefaultAvatarURL(cardholder?.accountID)}
                     avatarID={cardholder?.accountID}
                     type={CONST.ICON_TYPE_AVATAR}
                     size={CONST.AVATAR_SIZE.DEFAULT}

diff --git a/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx b/src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx
@@ -219,7 +219,7 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
         return <NotFoundPage />;
     }
 
-    const shouldShowCardsSection = (!!policy?.areExpensifyCardsEnabled && !!paymentAccountID) ?? (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds);
+    const shouldShowCardsSection = (!!policy?.areExpensifyCardsEnabled && !!paymentAccountID) || (!!policy?.areCompanyCardsEnabled && hasMultipleFeeds);
 
     return (
         <AccessOrNotFoundWrapper
@@ -315,25 +315,38 @@ function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceM
                                                     {translate('walletPage.assignedCards')}
                                                 </Text>
                                             </View>
-                                            {(memberCards as MemberCard[]).map((memberCard) => (
-                                                <MenuItem
-                                                    key={memberCard.cardID}
-                                                    title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
-                                                    badgeText={
-                                                        memberCard.bank === CONST.EXPENSIFY_CARD.BANK
-                                                            ? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
-                                                            : ''
-                                                    }
-                                                    icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
-                                                    displayInDefaultIconColor
-                                                    iconStyles={styles.cardIcon}
-                                                    contentFit="contain"
-                                                    iconWidth={variables.iconSizeExtraLarge}
-                                                    iconHeight={variables.iconSizeExtraLarge}
-                                                    onPress={() => navigateToDetails(memberCard)}
-                                                    shouldShowRightIcon
-                                                />
-                                            ))}
+                                            {(memberCards as MemberCard[]).map((memberCard) => {
+                                                const isCardDeleted = memberCard.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+                                                return (
+                                                    <OfflineWithFeedback
+                                                        key={`${memberCard.nameValuePairs?.cardTitle}_${memberCard.cardID}`}
+                                                        errorRowStyles={styles.ph5}
+                                                        errors={memberCard.errors}
+                                                        pendingAction={memberCard.pendingAction}
+                                                    >
+                                                        <MenuItem
+                                                            key={memberCard.cardID}
+                                                            title={memberCard.nameValuePairs?.cardTitle ?? memberCard?.cardName}
+                                                            badgeText={
+                                                                memberCard.bank === CONST.EXPENSIFY_CARD.BANK
+                                                                    ? CurrencyUtils.convertToDisplayString(memberCard.nameValuePairs?.unapprovedExpenseLimit)
+                                                                    : ''
+                                                            }
+                                                            icon={CardUtils.getCardFeedIcon(memberCard.bank as CompanyCardFeed)}
+                                                            displayInDefaultIconColor
+                                                            iconStyles={styles.cardIcon}
+                                                            contentFit="contain"
+                                                            iconWidth={variables.iconSizeExtraLarge}
+                                                            iconHeight={variables.iconSizeExtraLarge}
+                                                            onPress={() => navigateToDetails(memberCard)}
+                                                            shouldRemoveHoverBackground={isCardDeleted}
+                                                            disabled={isCardDeleted}
+                                                            shouldShowRightIcon={!isCardDeleted}
+                                                            style={[isCardDeleted ? styles.offlineFeedback.deleted : {}]}
+                                                        />
+                                                    </OfflineWithFeedback>
+                                                );
+                                            })}
                                             <MenuItem
                                                 title={translate('workspace.expensifyCard.newCard')}
                                                 icon={Expensicons.Plus}