Fix and Revert "Revert "Display banner to enable 2FA when setting up VBBA""

src/components/Icon/Illustrations.js

@@ -18,6 +18,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';
@@ -56,6 +57,7 @@ export {
     TadaYellow,
     TadaBlue,
     GpsTrackOrange,
+    ShieldYellow,
     MoneyReceipts,
     PinkBill,
     CreditCardsNew,

src/languages/en.js

@@ -827,6 +827,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

@@ -829,6 +829,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/LogOutPreviousUserPage.js

@@ -22,9 +22,21 @@ class LogOutPreviousUserPage extends Component {
             .then((transitionURL) => {
                 const sessionEmail = lodashGet(this.props.session, 'email', '');
                 const isLoggingInAsNewUser = SessionUtils.isLoggingInAsNewUser(transitionURL, sessionEmail);
+
                 if (isLoggingInAsNewUser) {
                     Session.signOutAndRedirectToSignIn();
                 }
+
+                // We need to signin and fetch a new authToken, if a user was already authenticated in NewDot, and was redirected to OldDot
+                // and their authToken stored in Onyx becomes invalid.
+                // This workflow is triggered while setting up VBBA. User is redirected from NewDot to OldDot to set up 2FA, and then redirected back to NewDot
+                // On Enabling 2FA, authToken stored in Onyx becomes expired and hence we need to fetch new authToken
+                const shouldForceLogin = lodashGet(this.props, 'route.params.shouldForceLogin', '') === 'true';
+                if (shouldForceLogin) {
+                    const email = lodashGet(this.props, 'route.params.email', '');
+                    const shortLivedAuthToken = lodashGet(this.props, 'route.params.shortLivedAuthToken', '');
+                    Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken);
+                }
             });
     }
 

src/pages/ReimbursementAccount/Enable2FAPrompt.js

@@ -0,0 +1,45 @@
+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 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(encodeURI(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${ROUTES.getBankAccountRoute()}","isFromNewDot":"true"}`));
+                },
+                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,11 +1,13 @@
 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 withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import compose from '../../libs/compose';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
 import * as Report from '../../libs/actions/Report';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
@@ -25,6 +27,7 @@ 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,
@@ -33,6 +36,19 @@ const propTypes = {
     reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes.isRequired,
 
     onBackButtonPress: PropTypes.func.isRequired,
+
+    /** User's account who is setting up bank account */
+    account: PropTypes.shape({
+
+        /** If user has Two factor authentication enabled */
+        requiresTwoFactorAuth: PropTypes.bool,
+    }),
+};
+
+const defaultProps = {
+    account: {
+        requiresTwoFactorAuth: false,
+    },
 };
 
 class ValidationStep extends React.Component {
@@ -109,6 +125,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]}>
@@ -152,7 +169,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
@@ -175,10 +192,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}
@@ -204,13 +226,24 @@ class ValidationStep extends React.Component {
                                 wrapperStyle={[styles.cardMenuItem, styles.mv3]}
                             />
                         </Section>
-                    </View>
+                        {!requiresTwoFactorAuth && (
+                            <Enable2FAPrompt />
+                        )}
+                    </ScrollView>
                 )}
             </View>
         );
     }
 }
 
 ValidationStep.propTypes = propTypes;
-
-export default withLocalize(ValidationStep);
+ValidationStep.defaultProps = defaultProps;
+
+export default compose(
+    withLocalize,
+    withOnyx({
+        account: {
+            key: ONYXKEYS.ACCOUNT,
+        },
+    }),
+)(ValidationStep);