Skip to content

Commit

Permalink
add “Report virtual card fraud” page and route
Browse files Browse the repository at this point in the history
  • Loading branch information
pasyukevich committed Sep 28, 2023
1 parent 44568ba commit 0274f11
Show file tree
Hide file tree
Showing 10 changed files with 203 additions and 9 deletions.
1 change: 1 addition & 0 deletions src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ const ONYXKEYS = {
PRIVATE_NOTES_FORM: 'privateNotesForm',
I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm',
INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm',
REPORT_FRAUD_FORM: 'reportFraudForm',
},
} as const;

Expand Down
4 changes: 4 additions & 0 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ export default {
route: '/settings/wallet/card/:domain',
getRoute: (domain: string) => `/settings/wallet/card/${domain}`,
},
SETTINGS_REPORT_FRAUD: {
route: '/settings/wallet/cards/:domain/report-digital-fraud',
getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-digital-fraud`,
},
SETTINGS_ADD_DEBIT_CARD: 'settings/wallet/add-debit-card',
SETTINGS_ADD_BANK_ACCOUNT: 'settings/wallet/add-bank-account',
SETTINGS_ENABLE_PAYMENTS: 'settings/wallet/enable-payments',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -814,6 +814,13 @@ export default {
availableSpend: 'Remaining spending power',
virtualCardNumber: 'Virtual card number',
physicalCardNumber: 'Physical card number',
reportFraud: 'Report virtual card fraud',
},
reportFraudPage: {
title: 'Report virtual card fraud',
description: 'If your virtual card details have been stolen or compromised, we’ll permanently deactivate your existing card and provide you with a new virtual card and number.',
deactivateCard: 'Deactivate card',
reportVirtualCardFraud: 'Report virtual card fraud',
},
transferAmountPage: {
transfer: ({amount}: TransferParams) => `Transfer${amount ? ` ${amount}` : ''}`,
Expand Down
8 changes: 8 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -809,6 +809,14 @@ export default {
availableSpend: 'Capacidad de gasto restante',
virtualCardNumber: 'Número de la tarjeta virtual',
physicalCardNumber: 'Número de la tarjeta física',
reportFraud: 'Reportar fraude con la tarjeta virtual',
},
reportFraudPage: {
title: 'Reportar fraude con la tarjeta virtual',
description:
'Si los datos de tu tarjeta virtual han sido robados o se han visto comprometidos, desactivaremos permanentemente la tarjeta actual y le proporcionaremos una tarjeta virtual y un número nuevo.',
deactivateCard: 'Desactivar tarjeta',
reportVirtualCardFraud: 'Reportar fraude con la tarjeta virtual',
},
transferAmountPage: {
transfer: ({amount}: TransferParams) => `Transferir${amount ? ` ${amount}` : ''}`,
Expand Down
1 change: 1 addition & 0 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ const SettingsModalStackNavigator = createModalStackNavigator({
Settings_Lounge_Access: () => require('../../../pages/settings/Profile/LoungeAccessPage').default,
Settings_Wallet: () => require('../../../pages/settings/Wallet/WalletPage').default,
Settings_Wallet_DomainCards: () => require('../../../pages/settings/Wallet/ExpensifyCardPage').default,
Settings_Report_Fraud: () => require('../../../pages/settings/Wallet/ReportFraudPage').default,
Settings_Wallet_Transfer_Balance: () => require('../../../pages/settings/Wallet/TransferBalancePage').default,
Settings_Wallet_Choose_Transfer_Account: () => require('../../../pages/settings/Wallet/ChooseTransferAccountPage').default,
Settings_Wallet_EnablePayments: () => require('../../../pages/EnablePayments/EnablePaymentsPage').default,
Expand Down
4 changes: 4 additions & 0 deletions src/libs/Navigation/linkingConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,10 @@ export default {
path: ROUTES.SETTINGS_WALLET_DOMAINCARDS.route,
exact: true,
},
Settings_Report_Fraud: {
path: ROUTES.SETTINGS_REPORT_FRAUD.route,
exact: true,
},
Settings_Wallet_EnablePayments: {
path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
exact: true,
Expand Down
49 changes: 49 additions & 0 deletions src/libs/actions/Card.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import Onyx from 'react-native-onyx';
import ONYXKEYS from '../../ONYXKEYS';
import * as API from '../API';

/**
* @param {Number} cardID
*/
function reportDigitalExpensifyCardFraud(cardID) {
API.write(
'ReportDigitalExpensifyCardFraud',
{
cardID,
},
{
optimisticData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM,
value: {
isLoading: true,
},
},
],
successData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM,
value: {
isLoading: false,
},
},
],
failureData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM,
value: {
isLoading: false,
},
},
],
},
);
}

export {
// eslint-disable-next-line import/prefer-default-export
reportDigitalExpensifyCardFraud,
};
26 changes: 18 additions & 8 deletions src/pages/settings/Wallet/ExpensifyCardPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import useLocalize from '../../../hooks/useLocalize';
import * as CurrencyUtils from '../../../libs/CurrencyUtils';
import Navigation from '../../../libs/Navigation/Navigation';
import styles from '../../../styles/styles';
import * as Expensicons from '../../../components/Icon/Expensicons';
import * as CardUtils from '../../../libs/CardUtils';

const propTypes = {
Expand Down Expand Up @@ -73,20 +74,29 @@ function ExpensifyCardPage({
interactive={false}
titleStyle={styles.newKansasLarge}
/>
{!_.isEmpty(physicalCard) && (
<MenuItemWithTopDescription
description={translate('cardPage.virtualCardNumber')}
title={CardUtils.maskCard(virtualCard.lastFourPAN)}
interactive={false}
titleStyle={styles.walletCardNumber}
/>
{!_.isEmpty(virtualCard) && (
<>
<MenuItemWithTopDescription
description={translate('cardPage.virtualCardNumber')}
title={CardUtils.maskCard(virtualCard.lastFourPAN)}
interactive={false}
titleStyle={styles.walletCardMenuItem}
/>
<MenuItemWithTopDescription
title={translate('cardPage.reportFraud')}
titleStyle={styles.walletCardMenuItem}
icon={Expensicons.Flag}
shouldShowRightIcon
onPress={() => Navigation.navigate(ROUTES.SETTINGS_REPORT_FRAUD.getRoute(domain))}
/>
</>
)}
{!_.isEmpty(physicalCard) && (
<MenuItemWithTopDescription
description={translate('cardPage.physicalCardNumber')}
title={CardUtils.maskCard(physicalCard.lastFourPAN)}
interactive={false}
titleStyle={styles.walletCardNumber}
titleStyle={styles.walletCardMenuItem}
/>
)}
</ScrollView>
Expand Down
110 changes: 110 additions & 0 deletions src/pages/settings/Wallet/ReportFraudPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React, {useEffect} from 'react';
import _ from 'underscore';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
import ROUTES from '../../../ROUTES';
import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
import ScreenWrapper from '../../../components/ScreenWrapper';
import Navigation from '../../../libs/Navigation/Navigation';
import styles from '../../../styles/styles';
import Text from '../../../components/Text';
import useLocalize from '../../../hooks/useLocalize';
import * as Card from '../../../libs/actions/Card';
import assignedCardPropTypes from './assignedCardPropTypes';
import * as CardUtils from '../../../libs/CardUtils';
import ONYXKEYS from '../../../ONYXKEYS';
import NotFoundPage from '../../ErrorPage/NotFoundPage';
import Form from '../../../components/Form';
import usePrevious from '../../../hooks/usePrevious';
import * as FormActions from '../../../libs/actions/FormActions';

const propTypes = {
/* Onyx Props */
formData: PropTypes.shape({
isLoading: PropTypes.bool,
}),
cardList: PropTypes.objectOf(assignedCardPropTypes),
/** The parameters needed to authenticate with a short-lived token are in the URL */
route: PropTypes.shape({
/** Each parameter passed via the URL */
params: PropTypes.shape({
/** Domain string */
domain: PropTypes.string,
}),
}).isRequired,
};

const defaultProps = {
cardList: {},
formData: {},
};

function ReportFraudPage({
route: {
params: {domain},
},
cardList,
formData,
}) {
const {translate} = useLocalize();

const domainCards = CardUtils.getDomainCards(cardList)[domain];
const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};

const prevIsLoading = usePrevious(formData.isLoading);

useEffect(() => {
if (prevIsLoading && formData.isLoading === false && _.isEmpty(virtualCard.errors)) {
Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
}

if (formData.isLoading !== false && _.isEmpty(virtualCard.errors)) {
return;
}

FormActions.setErrors(ONYXKEYS.FORMS.REPORT_FRAUD_FORM, virtualCard.errors);
}, [domain, formData.isLoading, prevIsLoading, virtualCard.errors]);

const submitReportFraud = () => {
Card.reportDigitalExpensifyCardFraud(virtualCard.cardID);
};

const onBackButtonPress = () => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));

if (_.isEmpty(virtualCard)) {
return <NotFoundPage />;
}

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={false}
testID={ReportFraudPage.displayName}
>
<HeaderWithBackButton
title={translate('reportFraudPage.title')}
onBackButtonPress={onBackButtonPress}
/>
<Form
formID={ONYXKEYS.FORMS.REPORT_FRAUD_FORM}
style={[styles.flexGrow1, styles.mh5]}
onSubmit={submitReportFraud}
submitButtonText={translate('reportFraudPage.deactivateCard')}
>
<Text style={[styles.baseFontStyle]}>{translate('reportFraudPage.description')}</Text>
</Form>
</ScreenWrapper>
);
}

ReportFraudPage.propTypes = propTypes;
ReportFraudPage.defaultProps = defaultProps;
ReportFraudPage.displayName = 'ReportFraudPage';

export default withOnyx({
cardList: {
key: ONYXKEYS.CARD_LIST,
},
formData: {
key: ONYXKEYS.FORMS.REPORT_FRAUD_FORM,
},
})(ReportFraudPage);
2 changes: 1 addition & 1 deletion src/styles/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -3680,7 +3680,7 @@ const styles = (theme) => ({
overflow: 'hidden',
},

walletCardNumber: {
walletCardMenuItem: {
color: theme.text,
fontSize: variables.fontSizeNormal,
},
Expand Down

0 comments on commit 0274f11

Please sign in to comment.