Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Create Deactivate card logic #45703

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2951,6 +2951,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',
Expand Down
5 changes: 5 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3198,6 +3198,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.',
waterim marked this conversation as resolved.
Show resolved Hide resolved
},
},
reimburse: {
captureReceipts: 'Captura recibos',
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -44,6 +45,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();
Expand All @@ -59,6 +61,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]}
Expand Down Expand Up @@ -134,7 +144,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>
</>
Expand Down
Loading