Merge pull request #48260 from VickyStash/feature/47308-offline-card-…

…updates [No QA] [Workspace Feeds] Update offline card editing logic
Expensify · Aug 30, 2024 · b912e17 · b912e17
2 parents 9e82ed8 + 36383bf
commit b912e17
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 29 deletions.
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
@@ -323,7 +323,10 @@ function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, ne
                     availableSpend: newAvailableSpend,
                     nameValuePairs: {
                         unapprovedExpenseLimit: newLimit,
+                        pendingFields: {unapprovedExpenseLimit: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
                     },
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    pendingFields: {availableSpend: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
                     isLoading: true,
                     errors: null,
                 },
@@ -337,6 +340,11 @@ function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, ne
             key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`,
             value: {
                 [cardID]: {
+                    nameValuePairs: {
+                        pendingFields: {unapprovedExpenseLimit: null},
+                    },
+                    pendingAction: null,
+                    pendingFields: {availableSpend: null},
                     isLoading: false,
                 },
             },
@@ -352,7 +360,10 @@ function updateExpensifyCardLimit(workspaceAccountID: number, cardID: number, ne
                     availableSpend: oldAvailableSpend,
                     nameValuePairs: {
                         unapprovedExpenseLimit: oldLimit,
+                        pendingFields: {unapprovedExpenseLimit: null},
                     },
+                    pendingAction: null,
+                    pendingFields: {availableSpend: null},
                     isLoading: false,
                     errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                 },
@@ -384,7 +395,9 @@ function updateExpensifyCardTitle(workspaceAccountID: number, cardID: number, ne
                 [cardID]: {
                     nameValuePairs: {
                         cardTitle: newCardTitle,
+                        pendingFields: {cardTitle: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
                     },
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
                     isLoading: true,
                     errors: null,
                 },
@@ -398,6 +411,10 @@ function updateExpensifyCardTitle(workspaceAccountID: number, cardID: number, ne
             key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`,
             value: {
                 [cardID]: {
+                    nameValuePairs: {
+                        pendingFields: {cardTitle: null},
+                    },
+                    pendingAction: null,
                     isLoading: false,
                 },
             },
@@ -412,7 +429,9 @@ function updateExpensifyCardTitle(workspaceAccountID: number, cardID: number, ne
                 [cardID]: {
                     nameValuePairs: {
                         cardTitle: oldCardTitle,
+                        pendingFields: {cardTitle: null},
                     },
+                    pendingAction: null,
                     isLoading: false,
                     errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                 },
@@ -444,7 +463,10 @@ function updateExpensifyCardLimitType(workspaceAccountID: number, cardID: number
                 [cardID]: {
                     nameValuePairs: {
                         limitType: newLimitType,
+                        pendingFields: {limitType: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
                     },
+                    pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                    pendingFields: {availableSpend: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
                     isLoading: true,
                     errors: null,
                 },
@@ -459,6 +481,11 @@ function updateExpensifyCardLimitType(workspaceAccountID: number, cardID: number
             value: {
                 [cardID]: {
                     isLoading: false,
+                    nameValuePairs: {
+                        pendingFields: {limitType: null},
+                    },
+                    pendingAction: null,
+                    pendingFields: {availableSpend: null},
                 },
             },
         },
@@ -472,7 +499,10 @@ function updateExpensifyCardLimitType(workspaceAccountID: number, cardID: number
                 [cardID]: {
                     nameValuePairs: {
                         limitType: oldLimitType,
+                        pendingFields: {limitType: null},
                     },
+                    pendingFields: {availableSpend: null},
+                    pendingAction: null,
                     isLoading: false,
                     errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
                 },

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
@@ -12,6 +12,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import MenuItem from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
@@ -117,31 +118,38 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
                                 interactive={false}
                                 titleStyle={styles.walletCardNumber}
                             />
-                            <MenuItemWithTopDescription
-                                description={translate('cardPage.availableSpend')}
-                                title={formattedAvailableSpendAmount}
-                                interactive={false}
-                                titleStyle={styles.newKansasLarge}
-                                containerStyle={isOffline ? styles.buttonOpacityDisabled : null}
-                            />
-                            <MenuItemWithTopDescription
-                                description={translate('workspace.expensifyCard.cardLimit')}
-                                title={formattedLimit}
-                                shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_LIMIT.getRoute(policyID, cardID))}
-                            />
-                            <MenuItemWithTopDescription
-                                description={translate('workspace.card.issueNewCard.limitType')}
-                                title={translationForLimitType ? translate(translationForLimitType) : ''}
-                                shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_LIMIT_TYPE.getRoute(policyID, cardID))}
-                            />
-                            <MenuItemWithTopDescription
-                                description={translate('workspace.card.issueNewCard.cardName')}
-                                title={card?.nameValuePairs?.cardTitle}
-                                shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_NAME.getRoute(policyID, cardID))}
-                            />
+                            <OfflineWithFeedback pendingAction={card?.pendingFields?.availableSpend}>
+                                <MenuItemWithTopDescription
+                                    description={translate('cardPage.availableSpend')}
+                                    title={formattedAvailableSpendAmount}
+                                    interactive={false}
+                                    titleStyle={styles.newKansasLarge}
+                                />
+                            </OfflineWithFeedback>
+                            <OfflineWithFeedback pendingAction={card?.nameValuePairs?.pendingFields?.unapprovedExpenseLimit}>
+                                <MenuItemWithTopDescription
+                                    description={translate('workspace.expensifyCard.cardLimit')}
+                                    title={formattedLimit}
+                                    shouldShowRightIcon
+                                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_LIMIT.getRoute(policyID, cardID))}
+                                />
+                            </OfflineWithFeedback>
+                            <OfflineWithFeedback pendingAction={card?.nameValuePairs?.pendingFields?.limitType}>
+                                <MenuItemWithTopDescription
+                                    description={translate('workspace.card.issueNewCard.limitType')}
+                                    title={translationForLimitType ? translate(translationForLimitType) : ''}
+                                    shouldShowRightIcon
+                                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_LIMIT_TYPE.getRoute(policyID, cardID))}
+                                />
+                            </OfflineWithFeedback>
+                            <OfflineWithFeedback pendingAction={card?.nameValuePairs?.pendingFields?.cardTitle}>
+                                <MenuItemWithTopDescription
+                                    description={translate('workspace.card.issueNewCard.cardName')}
+                                    title={card?.nameValuePairs?.cardTitle}
+                                    shouldShowRightIcon
+                                    onPress={() => Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_NAME.getRoute(policyID, cardID))}
+                                />
+                            </OfflineWithFeedback>
                             <MenuItem
                                 icon={Expensicons.Trashcan}
                                 iconFill={theme.icon}

diff --git a/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx b/src/pages/workspace/expensifyCard/WorkspaceExpensifyCardListPage.tsx
@@ -73,6 +73,7 @@ function WorkspaceExpensifyCardListPage({route, cardsList}: WorkspaceExpensifyCa
         ({item, index}: ListRenderItemInfo<Card>) => (
             <OfflineWithFeedback
                 key={`${item.nameValuePairs?.cardTitle}_${index}`}
+                pendingAction={item.pendingAction}
                 errorRowStyles={styles.ph5}
                 errors={item.errors}
             >

diff --git a/src/types/onyx/Card.ts b/src/types/onyx/Card.ts
@@ -3,7 +3,7 @@ import type CONST from '@src/CONST';
 import type * as OnyxCommon from './OnyxCommon';
 
 /** Model of Expensify card */
-type Card = {
+type Card = OnyxCommon.OnyxValueWithOfflineFeedback<{
     /** Card ID number */
     cardID: number;
 
@@ -41,7 +41,7 @@ type Card = {
     accountID?: number;
 
     /** Additional card data */
-    nameValuePairs?: {
+    nameValuePairs?: OnyxCommon.OnyxValueWithOfflineFeedback<{
         /** Type of card spending limits */
         limitType?: ValueOf<typeof CONST.EXPENSIFY_CARD.LIMIT_TYPES>;
 
@@ -74,8 +74,8 @@ type Card = {
 
         /** Card expiration date */
         expirationDate?: string;
-    };
-};
+    }>;
+}>;
 
 /** Model of Expensify card details */
 type ExpensifyCardDetails = {