Skip to content

Feature: Create Deactivate card logic #45703

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.

Sign up for GitHub

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

Merged
merged 7 commits into from
Jul 19, 2024
Merged

Feature: Create Deactivate card logic #45703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e1623a7
translations
waterim Jul 18, 2024
376a5a9
update translations
waterim Jul 18, 2024
65bb6c9
add confirmation modal
waterim Jul 18, 2024
5665bae
add deactivate functionality
waterim Jul 18, 2024
a494c90
update translations keys
waterim Jul 19, 2024
81a4142
update translations keys
waterim Jul 19, 2024
dbe6c2e
update tranlsation keys in modal
waterim Jul 19, 2024
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
View file
Open in desktop
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
View file
Open in desktop
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.',
},
},
reimburse: {
captureReceipts: 'Captura recibos',
Expand Down
25 changes: 23 additions & 2 deletions src/pages/workspace/expensifyCard/WorkspaceExpensifyCardDetailsPage.tsx
View file
Open in desktop
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();
};

Copy link
Contributor

@DylanDylann DylanDylann Dec 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When deactivating the card, the Apps will show an empty page (ref: #53560) we need to close this page before removing card from Onyx

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