diff --git a/assets/images/simple-illustrations/simple-illustration__shield.svg b/assets/images/simple-illustrations/simple-illustration__shield.svg
new file mode 100644
index 000000000000..5d56b9c3acb2
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__shield.svg
@@ -0,0 +1,77 @@
+
+
+
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 20c2006a3b82..ebfd86846692 100644
--- a/src/components/Icon/Illustrations.js
+++ b/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,
diff --git a/src/languages/en.js b/src/languages/en.js
index 5371d575af82..da0a14185918 100755
--- a/src/languages/en.js
+++ b/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',
diff --git a/src/languages/es.js b/src/languages/es.js
index 61ca8f1d8326..50e01d980f74 100644
--- a/src/languages/es.js
+++ b/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',
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
new file mode 100644
index 000000000000..6b89006bb43d
--- /dev/null
+++ b/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 => (
+ {
+ 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],
+ },
+ ]}
+ >
+
+
+ {props.translate('validationStep.enable2FAText')}
+
+
+
+);
+
+Enable2FAPrompt.propTypes = propTypes;
+Enable2FAPrompt.displayName = 'Enable2FAPrompt';
+
+export default withLocalize(Enable2FAPrompt);
diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 97c3d62d54b0..6279cca7519c 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/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 (
@@ -160,7 +173,7 @@ class ValidationStep extends React.Component {
{this.props.translate('validationStep.descriptionCTA')}
-
+
+ {!requiresTwoFactorAuth && (
+
+
+
+ )}
)}
{isVerifying && (
-
+
-
+ {!requiresTwoFactorAuth && (
+
+ )}
+
)}
);
@@ -229,5 +250,8 @@ export default compose(
reimbursementAccount: {
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
},
+ account: {
+ key: ONYXKEYS.ACCOUNT,
+ },
}),
)(ValidationStep);