Merge pull request #52109 from callstack-internal/fix/51876-change-offline-pattern-for-unassigning-cards

Fix: Change offline pattern for unassigning cards

Author: mountiny

src/libs/API/parameters/UnassignCompanyCard.ts

@@ -1,6 +1,6 @@
 type UnassignCompanyCard = {
     authToken?: string | null;
-    cardID: string;
+    cardID: number;
 };
 
 export default UnassignCompanyCard;

src/libs/API/parameters/UpdateCompanyCard.ts

@@ -1,6 +1,6 @@
 type UpdateCompanyCard = {
     authToken?: string | null;
-    cardID: string;
+    cardID: number;
 };
 
 export default UpdateCompanyCard;

src/libs/actions/CompanyCards.ts

@@ -17,6 +17,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} from '@src/types/onyx';
 import type {AssignCard, AssignCardData} from '@src/types/onyx/AssignCard';
 import type {AddNewCardFeedData, AddNewCardFeedStep, CompanyCardFeed} from '@src/types/onyx/CardFeeds';
 import type {OnyxData} from '@src/types/onyx/Request';
@@ -233,8 +234,9 @@ function assignWorkspaceCompanyCard(policyID: string, data?: Partial<AssignCardD
     API.write(WRITE_COMMANDS.ASSIGN_COMPANY_CARD, parameters, onyxData);
 }
 
-function unassignWorkspaceCompanyCard(workspaceAccountID: number, cardID: string, bankName: string) {
+function unassignWorkspaceCompanyCard(workspaceAccountID: number, bankName: string, card?: Card) {
     const authToken = NetworkStore.getAuthToken();
+    const cardID = card?.cardID ?? '-1';
 
     const onyxData: OnyxData = {
         optimisticData: [
@@ -245,12 +247,42 @@ function unassignWorkspaceCompanyCard(workspaceAccountID: number, cardID: string
                     [cardID]: null,
                 },
             },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.CARD_LIST,
+                value: {
+                    [cardID]: null,
+                },
+            },
+        ],
+
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${bankName}`,
+                value: {
+                    [cardID]: {
+                        ...card,
+                        errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.CARD_LIST,
+                value: {
+                    [cardID]: {
+                        ...card,
+                        errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                    },
+                },
+            },
         ],
     };
 
     const parameters = {
         authToken,
-        cardID,
+        cardID: Number(cardID),
     };
 
     API.write(WRITE_COMMANDS.UNASSIGN_COMPANY_CARD, parameters, onyxData);
@@ -379,7 +411,7 @@ function updateWorkspaceCompanyCard(workspaceAccountID: number, cardID: string,
 
     const parameters = {
         authToken,
-        cardID,
+        cardID: Number(cardID),
     };
 
     API.write(WRITE_COMMANDS.UPDATE_COMPANY_CARD, parameters, {optimisticData, finallyData, failureData});

src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx

@@ -14,6 +14,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import usePolicy from '@hooks/usePolicy';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -48,6 +49,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
+    const {isOffline} = useNetwork();
     const accountingIntegrations = Object.values(CONST.POLICY.CONNECTIONS.NAME);
     const connectedIntegration = getConnectedIntegration(policy, accountingIntegrations) ?? connectionSyncProgress?.connectionName;
 
@@ -62,7 +64,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
 
     const unassignCard = () => {
         setIsUnassignModalVisible(false);
-        CompanyCards.unassignWorkspaceCompanyCard(workspaceAccountID, cardID, bank);
+        CompanyCards.unassignWorkspaceCompanyCard(workspaceAccountID, bank, card);
         Navigation.goBack();
     };
 
@@ -168,6 +170,7 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
                             >
                                 <MenuItem
                                     icon={Expensicons.Sync}
+                                    disabled={isOffline || card?.isLoadingLastUpdated}
                                     iconFill={theme.success}
                                     title={translate('workspace.moreFeatures.companyCards.updateCard')}
                                     style={styles.mv1}