Merge pull request #45703 from waterim/feat-44320-Create-Deactivate-card-logic

Feature: Create Deactivate card logic

Author: mountiny

src/languages/en.ts

@@ -2966,6 +2966,11 @@ export default {
                 limitType: 'Limit type',
                 name: 'Name',
             },
+            deactivateCardModal: {
+                deactivate: 'Deactivate',
+                deactivateCard: 'Deactivate card',
+                deactivateConfirmation: 'Deactivating this card will decline all future transactions and can’t be undone.',
+            },
         },
         reimburse: {
             captureReceipts: 'Capture receipts',

src/languages/es.ts

@@ -3218,6 +3218,11 @@ export default {
                 limitType: 'Tipo de limite',
                 name: 'Nombre',
             },
+            deactivateCardModal: {
+                deactivate: 'Desactivar',
+                deactivateCard: 'Desactivar tarjeta',
+                deactivateConfirmation: 'Al desactivar esta tarjeta, se rechazarán todas las transacciones futuras y no se podrá deshacer.',
+            },
         },
         reimburse: {
             captureReceipts: 'Captura recibos',

src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx

@@ -1,9 +1,10 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
 import Badge from '@components/Badge';
+import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {FallbackAvatar} from '@components/Icon/Expensicons';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -45,6 +46,7 @@ type WorkspaceExpensifyCardDetailsPageProps = StackScreenProps<SettingsNavigator
 function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetailsPageProps) {
     const {policyID, cardID, backTo} = route.params;
 
+    const [isDeactivateModalVisible, setIsDeactivateModalVisible] = useState(false);
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -60,6 +62,14 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(cardholder);
     const translationForLimitType = CardUtils.getTranslationKeyForLimitType(card.nameValuePairs?.limitType);
 
+    const deactivateCard = () => {
+        setIsDeactivateModalVisible(false);
+
+        // TODO: add API call when it's supported https://github.com/Expensify/Expensify/issues/407841
+
+        Navigation.goBack();
+    };
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -135,7 +145,18 @@ function WorkspaceExpensifyCardDetailsPage({route}: WorkspaceExpensifyCardDetail
                                 iconFill={theme.icon}
                                 title={translate('workspace.expensifyCard.deactivate')}
                                 style={styles.mv1}
-                                onPress={() => {}} // TODO: create Deactivate card logic https://github.com/Expensify/App/issues/44320
+                                onPress={() => setIsDeactivateModalVisible(true)}
+                            />
+                            <ConfirmModal
+                                title={translate('workspace.card.deactivateCardModal.deactivateCard')}
+                                isVisible={isDeactivateModalVisible}
+                                onConfirm={deactivateCard}
+                                onCancel={() => setIsDeactivateModalVisible(false)}
+                                shouldSetModalVisibility={false}
+                                prompt={translate('workspace.card.deactivateCardModal.deactivateConfirmation')}
+                                confirmText={translate('workspace.card.deactivateCardModal.deactivate')}
+                                cancelText={translate('common.cancel')}
+                                danger
                             />
                         </ScrollView>
                     </>