Display banner to enable 2FA when setting up VBBA

src/components/Icon/Illustrations.js

@@ -17,6 +17,7 @@ import RocketOrange from '../../../assets/images/product-illustrations/rocket--o
 import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
 import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
 import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg';
+import ShieldYellow from '../../../assets/images/simple-illustrations/simple-illustration__shield.svg';
 import MoneyReceipts from '../../../assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
 import PinkBill from '../../../assets/images/simple-illustrations/simple-illustration__bill.svg';
 import CreditCardsNew from '../../../assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
@@ -54,6 +55,7 @@ export {
     TadaYellow,
     TadaBlue,
     GpsTrackOrange,
+    ShieldYellow,
     MoneyReceipts,
     PinkBill,
     CreditCardsNew,

src/languages/en.js

@@ -791,6 +791,9 @@ export default {
         letsChatCTA: 'Yes, let\'s chat',
         letsChatText: 'Thanks for doing that. We need your help verifying a few pieces of information, but we can work this out quickly over chat. Ready?',
         letsChatTitle: 'Let\'s chat!',
+        enable2FATitle: 'Prevent fraud, enable two-factor authentication!',
+        enable2FAText: 'We take your security seriously, so please set up two-factor authentication for your account now. That will allow us to dispute Expensify Card digital transactions, and will reduce your risk for fraud.',
+        secureYourAccount: 'Secure your account',
     },
     beneficialOwnersStep: {
         additionalInformation: 'Additional information',

src/languages/es.js

@@ -793,6 +793,9 @@ export default {
         letsChatCTA: 'Sí, vamos a chatear',
         letsChatText: 'Gracias. Necesitamos tu ayuda para verificar la información, pero podemos hacerlo rápidamente a través del chat. ¿Estás listo?',
         letsChatTitle: '¡Vamos a chatear!',
+        enable2FATitle: 'Evita fraudes, activa la autenticación de dos factores!',
+        enable2FAText: 'Tu seguridad es importante para nosotros, por favor configura ahora la autenticación de dos factores. Eso nos permitirá disputar las transacciones de la Tarjeta Expensify y reducirá tu riesgo de fraude.',
+        secureYourAccount: 'Asegura tu cuenta',
     },
     beneficialOwnersStep: {
         additionalInformation: 'Información adicional',

src/pages/ReimbursementAccount/Enable2FAPrompt.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '../../components/Text';
+import styles from '../../styles/styles';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import Section from '../../components/Section';
+import * as Link from '../../libs/actions/Link';
+import CONFIG from '../../CONFIG';
+import ROUTES from '../../ROUTES';
+import themeColors from '../../styles/themes/default';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+const Enable2FAPrompt = props => (
+    <Section
+        title={props.translate('validationStep.enable2FATitle')}
+        icon={Illustrations.ShieldYellow}
+        menuItems={[
+            {
+                title: props.translate('validationStep.secureYourAccount'),
+                onPress: () => {
+                    Link.openOldDotLink(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT}"}`);
+                },
+                icon: Expensicons.Shield,
+                shouldShowRightIcon: true,
+                iconRight: Expensicons.NewWindow,
+                iconFill: themeColors.success,
+                wrapperStyle: [styles.cardMenuItem],
+            },
+        ]}
+    >
+        <View style={[styles.mv3]}>
+            <Text>
+                {props.translate('validationStep.enable2FAText')}
+            </Text>
+        </View>
+    </Section>
+);
+
+Enable2FAPrompt.propTypes = propTypes;
+Enable2FAPrompt.displayName = 'Enable2FAPrompt';
+
+export default withLocalize(Enable2FAPrompt);

src/pages/ReimbursementAccount/ValidationStep.js

@@ -1,9 +1,10 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
-import {View} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import Str from 'expensify-common/lib/str';
 import _ from 'underscore';
+import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import themeColors from '../../styles/themes/default';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -27,12 +28,20 @@ import Section from '../../components/Section';
 import CONST from '../../CONST';
 import Button from '../../components/Button';
 import MenuItem from '../../components/MenuItem';
+import Enable2FAPrompt from './Enable2FAPrompt';
 
 const propTypes = {
     ...withLocalizePropTypes,
 
     /** Bank account currently in setup */
     reimbursementAccount: reimbursementAccountPropTypes,
+
+    /** User's account who is setting up bank account */
+    account: PropTypes.shape({
+
+        /** If user has Two factor authentication enabled */
+        requiresTwoFactorAuth: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
@@ -41,6 +50,9 @@ const defaultProps = {
         errors: {},
         maxAttemptsReached: false,
     },
+    account: {
+        requiresTwoFactorAuth: false,
+    },
 };
 
 class ValidationStep extends React.Component {
@@ -117,6 +129,7 @@ class ValidationStep extends React.Component {
 
         const maxAttemptsReached = lodashGet(this.props, 'reimbursementAccount.maxAttemptsReached');
         const isVerifying = !maxAttemptsReached && state === BankAccount.STATE.VERIFYING;
+        const requiresTwoFactorAuth = lodashGet(this.props, 'account.requiresTwoFactorAuth');
 
         return (
             <View style={[styles.flex1, styles.justifyContentBetween]}>
@@ -160,7 +173,7 @@ class ValidationStep extends React.Component {
                                 {this.props.translate('validationStep.descriptionCTA')}
                             </Text>
                         </View>
-                        <View style={[styles.mv5, styles.flex1]}>
+                        <View style={[styles.mv5]}>
                             <TextInput
                                 inputID="amount1"
                                 shouldSaveDraft
@@ -183,10 +196,15 @@ class ValidationStep extends React.Component {
                                 keyboardType="decimal-pad"
                             />
                         </View>
+                        {!requiresTwoFactorAuth && (
+                            <View style={[styles.mln5, styles.mrn5]}>
+                                <Enable2FAPrompt />
+                            </View>
+                        )}
                     </Form>
                 )}
                 {isVerifying && (
-                    <View style={[styles.flex1]}>
+                    <ScrollView style={[styles.flex1]}>
                         <Section
                             title={this.props.translate('workspace.bankAccount.letsFinishInChat')}
                             icon={Illustrations.ConciergeBubble}
@@ -213,7 +231,10 @@ class ValidationStep extends React.Component {
                                 wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                             />
                         </Section>
-                    </View>
+                        {!requiresTwoFactorAuth && (
+                            <Enable2FAPrompt />
+                        )}
+                    </ScrollView>
                 )}
             </View>
         );
@@ -229,5 +250,8 @@ export default compose(
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
+        account: {
+            key: ONYXKEYS.ACCOUNT,
+        },
     }),
 )(ValidationStep);