Merge pull request Expensify#51841 from DylanDylann/remove-cards

Remove cards optimistically
dominictb · Nov 1, 2024 · b6cd83b · b6cd83b
2 parents 9404244 + d44c13a
commit b6cd83b
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
@@ -37,7 +37,8 @@ type IssueNewCardFlowData = {
     data?: Partial<IssueNewCardData>;
 };
 
-function reportVirtualExpensifyCardFraud(cardID: number) {
+function reportVirtualExpensifyCardFraud(card?: Card) {
+    const cardID = card?.cardID ?? -1;
     const optimisticData: OnyxUpdate[] = [
         {
             onyxMethod: Onyx.METHOD.MERGE,
@@ -46,6 +47,20 @@ function reportVirtualExpensifyCardFraud(cardID: number) {
                 isLoading: true,
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: null,
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID ?? '-1'}_${CONST.EXPENSIFY_CARD.BANK}`,
+            value: {
+                [cardID]: null,
+            },
+        },
     ];
 
     const successData: OnyxUpdate[] = [
@@ -66,6 +81,26 @@ function reportVirtualExpensifyCardFraud(cardID: number) {
                 isLoading: false,
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    ...card,
+                    errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                },
+            },
+        },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${card?.fundID ?? '-1'}_${CONST.EXPENSIFY_CARD.BANK}`,
+            value: {
+                [cardID]: {
+                    ...card,
+                    errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                },
+            },
+        },
     ];
 
     const parameters: ReportVirtualExpensifyCardFraudParams = {
@@ -582,6 +617,13 @@ function deactivateCard(workspaceAccountID: number, card?: Card) {
                 [cardID]: null,
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: null,
+            },
+        },
     ];
 
     const failureData: OnyxUpdate[] = [
@@ -595,6 +637,16 @@ function deactivateCard(workspaceAccountID: number, card?: Card) {
                 },
             },
         },
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: ONYXKEYS.CARD_LIST,
+            value: {
+                [cardID]: {
+                    ...card,
+                    errors: ErrorUtils.getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                },
+            },
+        },
     ];
 
     const parameters: CardDeactivateParams = {

diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx
@@ -1,6 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect} from 'react';
-import {View} from 'react-native';
+import React, {useCallback, useEffect} from 'react';
+import {InteractionManager, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -36,6 +36,13 @@ function ReportVirtualCardFraudPage({
 
     const prevIsLoading = usePrevious(formData?.isLoading);
 
+    const submit = useCallback(() => {
+        Navigation.dismissModal();
+        InteractionManager.runAfterInteractions(() => {
+            Card.reportVirtualExpensifyCardFraud(virtualCard);
+        });
+    }, [virtualCard]);
+
     useEffect(() => {
         if (!prevIsLoading || formData?.isLoading) {
             return;
@@ -61,7 +68,7 @@ function ReportVirtualCardFraudPage({
                 <Text style={[styles.webViewStyles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>
                 <FormAlertWithSubmitButton
                     isAlertVisible={!!virtualCardError}
-                    onSubmit={() => Card.reportVirtualExpensifyCardFraud(virtualCard.cardID)}
+                    onSubmit={submit}
                     message={virtualCardError}
                     isLoading={formData?.isLoading}
                     buttonText={translate('reportFraudPage.deactivateCard')}