add “Report virtual card fraud” page and route

src/ONYXKEYS.ts

@@ -291,6 +291,7 @@ const ONYXKEYS = {
         PRIVATE_NOTES_FORM: 'privateNotesForm',
         I_KNOW_A_TEACHER_FORM: 'iKnowTeacherForm',
         INTRO_SCHOOL_PRINCIPAL_FORM: 'introSchoolPrincipalForm',
+        REPORT_VIRTUAL_CARD_FRAUD: 'reportVirtualCardFraudForm',
     },
 } as const;
 

src/ROUTES.ts

@@ -75,6 +75,10 @@ export default {
         route: '/settings/wallet/card/:domain',
         getRoute: (domain: string) => `/settings/wallet/card/${domain}`,
     },
+    SETTINGS_REPORT_FRAUD: {
+        route: '/settings/wallet/cards/:domain/report-virtual-fraud',
+        getRoute: (domain: string) => `/settings/wallet/cards/${domain}/report-virtual-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',

src/languages/en.ts

@@ -822,6 +822,7 @@ export default {
         availableSpend: 'Remaining spending power',
         virtualCardNumber: 'Virtual card number',
         physicalCardNumber: 'Physical card number',
+        reportFraud: 'Report virtual card fraud',
         cardDetails: {
             cardNumber: 'Virtual card number',
             expiration: 'Expiration',
@@ -831,6 +832,12 @@ export default {
             copyCardNumber: 'Copy card number',
         },
     },
+    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}` : ''}`,
         instant: 'Instant (Debit card)',

src/languages/es.ts

@@ -818,6 +818,7 @@ 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',
         cardDetails: {
             cardNumber: 'Número de tarjeta virtual',
             expiration: 'Expiración',
@@ -827,6 +828,13 @@ export default {
             copyCardNumber: 'Copiar número de la tarjeta',
         },
     },
+    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}` : ''}`,
         instant: 'Instante',

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -142,6 +142,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_Wallet_ReportVirtualCardFraud: () => require('../../../pages/settings/Wallet/ReportVirtualCardFraudPage').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,

src/libs/Navigation/linkingConfig.js

@@ -73,6 +73,10 @@ export default {
                                 path: ROUTES.SETTINGS_WALLET_DOMAINCARDS.route,
                                 exact: true,
                             },
+                            Settings_Wallet_ReportVirtualCardFraud: {
+                                path: ROUTES.SETTINGS_REPORT_FRAUD.route,
+                                exact: true,
+                            },
                             Settings_Wallet_EnablePayments: {
                                 path: ROUTES.SETTINGS_ENABLE_PAYMENTS,
                                 exact: true,

src/libs/actions/Card.js

@@ -0,0 +1,49 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '../../ONYXKEYS';
+import * as API from '../API';
+
+/**
+ * @param {Number} cardID
+ */
+function reportVirtualExpensifyCardFraud(cardID) {
+    API.write(
+        'ReportVirtualExpensifyCardFraud',
+        {
+            cardID,
+        },
+        {
+            optimisticData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+                    value: {
+                        isLoading: true,
+                    },
+                },
+            ],
+            successData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+                    value: {
+                        isLoading: false,
+                    },
+                },
+            ],
+            failureData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+                    value: {
+                        isLoading: false,
+                    },
+                },
+            ],
+        },
+    );
+}
+
+export {
+    // eslint-disable-next-line import/prefer-default-export
+    reportVirtualExpensifyCardFraud,
+};

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -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';
 import Button from '../../../components/Button';
 import CardDetails from './WalletPage/CardDetails';
@@ -106,14 +107,21 @@ function ExpensifyCardPage({
                                         }
                                     />
                                 )}
+                                <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>

src/pages/settings/Wallet/ReportVirtualCardFraudPage.js

@@ -0,0 +1,104 @@
+import React, {useEffect} from 'react';
+import _ from 'underscore';
+import {View} from 'react-native';
+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 usePrevious from '../../../hooks/usePrevious';
+import FormAlertWithSubmitButton from '../../../components/FormAlertWithSubmitButton';
+import * as ErrorUtils from '../../../libs/ErrorUtils';
+
+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 ReportVirtualCardFraudPage({
+    route: {
+        params: {domain},
+    },
+    cardList,
+    formData,
+}) {
+    const {translate} = useLocalize();
+
+    const domainCards = CardUtils.getDomainCards(cardList)[domain];
+    const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
+    const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard) || '';
+
+    const prevIsLoading = usePrevious(formData.isLoading);
+
+    useEffect(() => {
+        if (!prevIsLoading || formData.isLoading) {
+            return;
+        }
+        if (!_.isEmpty(virtualCard.errors)) {
+            return;
+        }
+
+        Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain));
+    }, [domain, formData.isLoading, prevIsLoading, virtualCard.errors]);
+
+    if (_.isEmpty(virtualCard)) {
+        return <NotFoundPage />;
+    }
+
+    return (
+        <ScreenWrapper testID={ReportVirtualCardFraudPage.displayName}>
+            <HeaderWithBackButton
+                title={translate('reportFraudPage.title')}
+                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain))}
+            />
+            <View style={[styles.flex1, styles.justifyContentBetween]}>
+                <Text style={[styles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>
+                <FormAlertWithSubmitButton
+                    isAlertVisible={Boolean(virtualCardError)}
+                    onSubmit={() => Card.reportVirtualExpensifyCardFraud(virtualCard.cardID)}
+                    message={virtualCardError}
+                    isLoading={formData.isLoading}
+                    buttonText={translate('reportFraudPage.deactivateCard')}
+                />
+            </View>
+        </ScreenWrapper>
+    );
+}
+
+ReportVirtualCardFraudPage.propTypes = propTypes;
+ReportVirtualCardFraudPage.defaultProps = defaultProps;
+ReportVirtualCardFraudPage.displayName = 'ReportVirtualCardFraudPage';
+
+export default withOnyx({
+    cardList: {
+        key: ONYXKEYS.CARD_LIST,
+    },
+    formData: {
+        key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD,
+    },
+})(ReportVirtualCardFraudPage);

src/styles/styles.js

@@ -3695,7 +3695,7 @@ const styles = (theme) => ({
         overflow: 'hidden',
     },
 
-    walletCardNumber: {
+    walletCardMenuItem: {
         color: theme.text,
         fontSize: variables.fontSizeNormal,
     },