From 1caa16086106b6cfea6b4f4acd4b83999c0f902a Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Thu, 3 Nov 2022 16:01:40 +0530
Subject: [PATCH 01/10] Add a new component to display banner

---
 src/languages/en.js                           |  3 ++
 src/languages/es.js                           |  3 ++
 .../ReimbursementAccount/Enable2FAPrompt.js   | 41 +++++++++++++++++++
 .../ReimbursementAccount/ValidationStep.js    |  5 +++
 4 files changed, 52 insertions(+)
 create mode 100644 src/pages/ReimbursementAccount/Enable2FAPrompt.js

diff --git a/src/languages/en.js b/src/languages/en.js
index efbd19b9a360..4bfaca0276ed 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -771,6 +771,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 security!',
+        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 f66f0942a02a..d7d418528810 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -773,6 +773,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: '¡Evite el fraude, habilite la seguridad de dos factores!',
+        enable2FAText: 'Nos tomamos muy en serio su seguridad, así que configure la autenticación de dos factores para su cuenta ahora. Eso nos permitirá disputar las transacciones digitales de Expensify Card y reducirá su riesgo de fraude.',
+        secureYourAccount: 'Asegure su 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..fd2a8566b50a
--- /dev/null
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -0,0 +1,41 @@
+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';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+const Enable2FAPrompt = props => (
+    <Section
+        title={props.translate('validationStep.enable2FATitle')}
+        icon={Illustrations.MoneyEnvelopeBlue}
+        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.Send,
+                shouldShowRightIcon: true,
+                iconRight: Expensicons.NewWindow,
+            },
+        ]}
+    >
+        <View style={[styles.mv4]}>
+            <Text>
+                {props.translate('validationStep.enable2FAText')}
+            </Text>
+        </View>
+    </Section>
+);
+
+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 131b3add37d1..2974f4514295 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -26,6 +26,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,
@@ -182,6 +183,9 @@ class ValidationStep extends React.Component {
                                 keyboardType="decimal-pad"
                             />
                         </View>
+                        <View style={[styles.mln5, styles.mrn5]}>
+                            <Enable2FAPrompt />
+                        </View>
                     </Form>
                 )}
                 {isVerifying && (
@@ -210,6 +214,7 @@ class ValidationStep extends React.Component {
                             onPress={BankAccounts.requestResetFreePlanBankAccount}
                             shouldShowRightIcon
                         />
+                        <Enable2FAPrompt />
                     </View>
                 )}
             </View>

From 686d711513edbb0219f837578f1a78e4ca293d8e Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Fri, 4 Nov 2022 17:55:45 +0530
Subject: [PATCH 02/10] Update copy

---
 src/languages/en.js | 2 +-
 src/languages/es.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 4bfaca0276ed..fe300cb94d12 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -771,7 +771,7 @@ 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 security!',
+        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',
     },
diff --git a/src/languages/es.js b/src/languages/es.js
index d7d418528810..90cc8a5f1e61 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -773,8 +773,8 @@ 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: '¡Evite el fraude, habilite la seguridad de dos factores!',
-        enable2FAText: 'Nos tomamos muy en serio su seguridad, así que configure la autenticación de dos factores para su cuenta ahora. Eso nos permitirá disputar las transacciones digitales de Expensify Card y reducirá su riesgo de fraude.',
+        enable2FATitle: 'Evita fraudes, activa la autenticación de dos factores!',
+        enable2FAText: 'Tu seguridad es importante para nosotros, por favor configura la autenticación de dos factores ahora. Eso nos permitirá disputar transacciones de la Tarjeta Expensify y reducirá tu riesgo de fraude.',
         secureYourAccount: 'Asegure su cuenta',
     },
     beneficialOwnersStep: {

From 8e4d306ce098f10cfb8e171c744e2ded62961f1d Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Mon, 7 Nov 2022 23:44:02 +0530
Subject: [PATCH 03/10] Add new assets

---
 .../user-verify--blue.svg                     | 25 +++++++++++++++++++
 assets/images/shield.svg                      | 10 ++++++++
 src/components/Icon/Expensicons.js            |  2 ++
 src/components/Icon/Illustrations.js          |  2 ++
 .../ReimbursementAccount/Enable2FAPrompt.js   |  4 +--
 5 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 assets/images/product-illustrations/user-verify--blue.svg
 create mode 100644 assets/images/shield.svg

diff --git a/assets/images/product-illustrations/user-verify--blue.svg b/assets/images/product-illustrations/user-verify--blue.svg
new file mode 100644
index 000000000000..0f9f07437754
--- /dev/null
+++ b/assets/images/product-illustrations/user-verify--blue.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0B1B34;}
+	.st1{fill:#0185FF;}
+</style>
+<g>
+	<path class="st0" d="M40,34.9c1.5,0,2.6-1.2,2.6-2.6s-1.2-2.6-2.6-2.6c-1.5,0-2.6,1.2-2.6,2.6S38.5,34.9,40,34.9z"/>
+	<path class="st0" d="M34.2,44h11.4c0.2,0,0.3-0.1,0.3-0.3l0,0c0.1-3.4-2.7-6.1-6-6.1c-3.3,0-6.1,2.7-6.1,6.1
+		C33.9,43.9,34,44,34.2,44z"/>
+</g>
+<g>
+	<path class="st1" d="M32.3,43.7c0-3.7,2.6-6.8,6.1-7.5c-1.6-0.6-2.7-2.1-2.7-3.9c0-2.1,1.5-3.8,3.4-4.2v-7l-15.3,5.2v2.5
+		c0,11.5,5.7,22.3,15.3,29.1V45.6h-5C33.2,45.6,32.3,44.8,32.3,43.7z"/>
+	<path class="st1" d="M40,16L19.6,23v3.3c0,15,7.6,29,20.4,37.6c12.8-8.6,20.4-22.6,20.4-37.6V23L40,16z M57.7,28.7
+		c0,12.5-6.5,24.2-17.2,31.3c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
+		c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0,0,0c-10.8-7-17.2-18.8-17.2-31.3v-3
+		c0-0.3,0.2-0.6,0.5-0.8l16.9-5.8c0,0,0,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0l16.9,5.8
+		c0.3,0.1,0.5,0.4,0.5,0.8V28.7z"/>
+	<path class="st1" d="M40.8,28.1c2,0.4,3.4,2.1,3.4,4.2c0,1.8-1.1,3.3-2.7,3.9c3.4,0.7,6.1,3.8,6,7.5c0,1.1-0.8,1.9-1.9,1.9h-4.9
+		v12.2c9.6-6.9,15.3-17.6,15.3-29.1v-2.5L40.8,21V28.1z"/>
+</g>
+</svg>
diff --git a/assets/images/shield.svg b/assets/images/shield.svg
new file mode 100644
index 000000000000..9af2b4f6bdfd
--- /dev/null
+++ b/assets/images/shield.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<path d="M13.4,5.8l-3-1c-0.1-0.1-0.2-0.1-0.4-0.1s-0.2,0-0.4,0.1l-3,1C6.1,5.9,5.8,6.5,5.8,7c0.1,2.9,1.1,6.2,4.2,8
+	c3.1-1.6,4-5.1,4.2-8C14.2,6.4,13.9,5.9,13.4,5.8z"/>
+<path d="M16.6,3.5l-6.2-2.1c-0.2-0.1-0.5-0.1-0.8,0L3.4,3.5C2.9,3.6,2.5,4.1,2.5,4.6c0.1,5,1.8,10.5,7.1,13.9c0.2,0.1,0.5,0.1,0.6,0
+	c5.5-3.1,7-8.8,7.1-13.9C17.5,4.1,17.1,3.6,16.6,3.5z M10.6,16.1L10,16.4L9.4,16c-2.9-1.6-4.6-4.8-4.9-9c0-1.1,0.6-2.1,1.8-2.5l3-1
+	c0.2,0,0.5-0.1,0.8-0.1s0.5,0,0.8,0.1l3,1c1.1,0.4,1.8,1.4,1.8,2.5C15.2,11.4,13.5,14.5,10.6,16.1z"/>
+</svg>
diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js
index f3f8f77ccbe8..8c9ff0c80694 100644
--- a/src/components/Icon/Expensicons.js
+++ b/src/components/Icon/Expensicons.js
@@ -72,6 +72,7 @@ import ReceiptSearch from '../../../assets/images/receipt-search.svg';
 import Rotate from '../../../assets/images/rotate.svg';
 import RotateLeft from '../../../assets/images/rotate-left.svg';
 import Send from '../../../assets/images/send.svg';
+import Shield from '../../../assets/images/shield.svg';
 import Sync from '../../../assets/images/sync.svg';
 import ThreeDots from '../../../assets/images/three-dots.svg';
 import Transfer from '../../../assets/images/transfer.svg';
@@ -162,6 +163,7 @@ export {
     Rotate,
     RotateLeft,
     Send,
+    Shield,
     Sync,
     ThreeDots,
     Transfer,
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 273f5854a3d7..1c9518bb1d7a 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 UserVerifyBlue from '../../../assets/images/product-illustrations/user-verify--blue.svg';
 
 export {
     BankArrowPink,
@@ -38,4 +39,5 @@ export {
     TadaYellow,
     TadaBlue,
     GpsTrackOrange,
+    UserVerifyBlue,
 };
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index fd2a8566b50a..6a4142bf67c0 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -16,12 +16,12 @@ const propTypes = {
 const Enable2FAPrompt = props => (
     <Section
         title={props.translate('validationStep.enable2FATitle')}
-        icon={Illustrations.MoneyEnvelopeBlue}
+        icon={Illustrations.UserVerifyBlue}
         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.Send,
+                icon: Expensicons.Shield,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
             },

From 20d9506a6d6a36f4e3ee35cf324cdc6fdf8fce10 Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Tue, 8 Nov 2022 00:02:53 +0530
Subject: [PATCH 04/10] Display banner conditionally

---
 .../ReimbursementAccount/ValidationStep.js    | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 2974f4514295..cf0e7e199621 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -27,12 +27,19 @@ import CONST from '../../CONST';
 import Button from '../../components/Button';
 import MenuItem from '../../components/MenuItem';
 import Enable2FAPrompt from './Enable2FAPrompt';
+import PropTypes from 'prop-types';
 
 const propTypes = {
     ...withLocalizePropTypes,
 
     /** Bank account currently in setup */
     reimbursementAccount: reimbursementAccountPropTypes,
+
+    account: PropTypes.shape({
+
+        /** If user has Two factor authentication enabled */
+        requiresTwoFactorAuth: PropTypes.bool,
+    }),
 };
 
 const defaultProps = {
@@ -41,6 +48,9 @@ const defaultProps = {
         errors: {},
         maxAttemptsReached: false,
     },
+    account: {
+        requiresTwoFactorAuth: false,
+    },
 };
 
 class ValidationStep extends React.Component {
@@ -117,6 +127,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]}>
@@ -183,9 +194,11 @@ class ValidationStep extends React.Component {
                                 keyboardType="decimal-pad"
                             />
                         </View>
-                        <View style={[styles.mln5, styles.mrn5]}>
-                            <Enable2FAPrompt />
-                        </View>
+                        {!requiresTwoFactorAuth && (
+                            <View style={[styles.mln5, styles.mrn5]}>
+                                <Enable2FAPrompt />
+                            </View>
+                        )}
                     </Form>
                 )}
                 {isVerifying && (
@@ -214,7 +227,9 @@ class ValidationStep extends React.Component {
                             onPress={BankAccounts.requestResetFreePlanBankAccount}
                             shouldShowRightIcon
                         />
-                        <Enable2FAPrompt />
+                        {!requiresTwoFactorAuth && (
+                            <Enable2FAPrompt />
+                        )}
                     </View>
                 )}
             </View>
@@ -231,5 +246,8 @@ export default compose(
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
         },
+        account: {
+            key: ONYXKEYS.ACCOUNT,
+        },
     }),
 )(ValidationStep);

From 534d2769e8133c0165ef84630d179445ce31afc2 Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Tue, 8 Nov 2022 17:09:24 +0530
Subject: [PATCH 05/10] Fix some styles

---
 src/pages/ReimbursementAccount/ValidationStep.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index cf0e7e199621..6ff8d3a3a9b6 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 withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -27,7 +28,6 @@ import CONST from '../../CONST';
 import Button from '../../components/Button';
 import MenuItem from '../../components/MenuItem';
 import Enable2FAPrompt from './Enable2FAPrompt';
-import PropTypes from 'prop-types';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -171,7 +171,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
@@ -202,7 +202,7 @@ class ValidationStep extends React.Component {
                     </Form>
                 )}
                 {isVerifying && (
-                    <View style={[styles.flex1]}>
+                    <ScrollView style={[styles.flex1]}>
                         <Section
                             title={this.props.translate('workspace.bankAccount.letsFinishInChat')}
                             icon={Illustrations.ConciergeBlue}
@@ -230,7 +230,7 @@ class ValidationStep extends React.Component {
                         {!requiresTwoFactorAuth && (
                             <Enable2FAPrompt />
                         )}
-                    </View>
+                    </ScrollView>
                 )}
             </View>
         );

From 8a17d4555703cd037ba80ba306efb270c5eba07f Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Thu, 10 Nov 2022 19:10:42 +0530
Subject: [PATCH 06/10] Fix Lint warning

---
 src/pages/ReimbursementAccount/Enable2FAPrompt.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 6a4142bf67c0..9afce461e87d 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -20,7 +20,9 @@ const Enable2FAPrompt = props => (
         menuItems={[
             {
                 title: props.translate('validationStep.secureYourAccount'),
-                onPress: () => Link.openOldDotLink(`settings?param={"section":"account","action":"enableTwoFactorAuth","exitTo":"${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.BANK_ACCOUNT}"}`),
+                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,

From 1f96747e535d3555697169d333938b83cd86a104 Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Tue, 29 Nov 2022 23:52:22 +0530
Subject: [PATCH 07/10] Use new styling

---
 src/pages/ReimbursementAccount/Enable2FAPrompt.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index 9afce461e87d..bd3effd47c0f 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -9,6 +9,7 @@ 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,
@@ -26,10 +27,12 @@ const Enable2FAPrompt = props => (
                 icon: Expensicons.Shield,
                 shouldShowRightIcon: true,
                 iconRight: Expensicons.NewWindow,
+                iconFill: themeColors.success,
+                wrapperStyle: [styles.cardMenuItem],
             },
         ]}
     >
-        <View style={[styles.mv4]}>
+        <View style={[styles.mv3]}>
             <Text>
                 {props.translate('validationStep.enable2FAText')}
             </Text>

From cd6f2a9347093dec90ecab4328b690c01cf9d03d Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Wed, 30 Nov 2022 14:55:31 +0530
Subject: [PATCH 08/10] Use new icon

---
 .../user-verify--blue.svg                     | 25 ------
 .../simple-illustration__shield.svg           | 77 +++++++++++++++++++
 src/components/Icon/Illustrations.js          |  4 +-
 .../ReimbursementAccount/Enable2FAPrompt.js   |  2 +-
 4 files changed, 80 insertions(+), 28 deletions(-)
 delete mode 100644 assets/images/product-illustrations/user-verify--blue.svg
 create mode 100644 assets/images/simple-illustrations/simple-illustration__shield.svg

diff --git a/assets/images/product-illustrations/user-verify--blue.svg b/assets/images/product-illustrations/user-verify--blue.svg
deleted file mode 100644
index 0f9f07437754..000000000000
--- a/assets/images/product-illustrations/user-verify--blue.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#0B1B34;}
-	.st1{fill:#0185FF;}
-</style>
-<g>
-	<path class="st0" d="M40,34.9c1.5,0,2.6-1.2,2.6-2.6s-1.2-2.6-2.6-2.6c-1.5,0-2.6,1.2-2.6,2.6S38.5,34.9,40,34.9z"/>
-	<path class="st0" d="M34.2,44h11.4c0.2,0,0.3-0.1,0.3-0.3l0,0c0.1-3.4-2.7-6.1-6-6.1c-3.3,0-6.1,2.7-6.1,6.1
-		C33.9,43.9,34,44,34.2,44z"/>
-</g>
-<g>
-	<path class="st1" d="M32.3,43.7c0-3.7,2.6-6.8,6.1-7.5c-1.6-0.6-2.7-2.1-2.7-3.9c0-2.1,1.5-3.8,3.4-4.2v-7l-15.3,5.2v2.5
-		c0,11.5,5.7,22.3,15.3,29.1V45.6h-5C33.2,45.6,32.3,44.8,32.3,43.7z"/>
-	<path class="st1" d="M40,16L19.6,23v3.3c0,15,7.6,29,20.4,37.6c12.8-8.6,20.4-22.6,20.4-37.6V23L40,16z M57.7,28.7
-		c0,12.5-6.5,24.2-17.2,31.3c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0
-		c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c0,0,0,0,0,0c0,0,0,0,0,0c-10.8-7-17.2-18.8-17.2-31.3v-3
-		c0-0.3,0.2-0.6,0.5-0.8l16.9-5.8c0,0,0,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0l16.9,5.8
-		c0.3,0.1,0.5,0.4,0.5,0.8V28.7z"/>
-	<path class="st1" d="M40.8,28.1c2,0.4,3.4,2.1,3.4,4.2c0,1.8-1.1,3.3-2.7,3.9c3.4,0.7,6.1,3.8,6,7.5c0,1.1-0.8,1.9-1.9,1.9h-4.9
-		v12.2c9.6-6.9,15.3-17.6,15.3-29.1v-2.5L40.8,21V28.1z"/>
-</g>
-</svg>
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 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 68 68" style="enable-background:new 0 0 68 68;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DEB606;}
+	.st1{fill:#F8D004;}
+	.st2{fill:#FFE789;}
+	.st3{fill:#FFECAC;}
+	.st4{fill:#002140;}
+</style>
+<g>
+	<path class="st0" d="M55.3,15.2l-3-0.9l-2.7-2.9l-8.6,3l-6.7-6.2l-6.7,6.1l-8.5-3.2c0,0-2,2.9-3.2,3.2c-1.2,0.3-3.2,1.1-3.2,1.1
+		S8.4,59.4,33.5,59.1C58.7,58.8,56.6,21.1,55.3,15.2L55.3,15.2z"/>
+</g>
+<g>
+	<path class="st1" d="M18.1,12.6c0,0-3.2,40.9,15.6,41C48.5,53.8,50.5,28,50.9,24.4c0.5-3.6,0-10.8,0-10.8l-1.4-2.3l-8.6,3l-6.7-6.2
+		l-6.7,6.1l-8.5-3.2L18.1,12.6L18.1,12.6z"/>
+</g>
+<g>
+	<path class="st2" d="M34.3,45.4c6.4,0,11.6-6.1,11.6-13.6s-5.2-13.6-11.6-13.6s-11.6,6.1-11.6,13.6S27.9,45.4,34.3,45.4z"/>
+</g>
+<g>
+	<path class="st1" d="M36.7,27.6l-2.1-3.9l-1.2,0.5l-2.4,4l-4.6,0.7l0.2,1.3l2.7,2.8l-0.1,4.7l0.8,1l4.3-1.7l3.7,1.6l1.3-0.7
+		L39,33.2l2.9-3.4l-0.4-1.1L36.7,27.6z"/>
+</g>
+<g>
+	<path class="st2" d="M44.4,13c-0.3,1.3,0.4,2.7,1.4,3.6c1,0.9,2.2,1.5,3.4,2.2c1.2,0.7,2.3,1.5,2.9,2.7c0.7,1.3,0.6,2.9,0.9,4.4
+		c0.3,1.5,1.5,3,3,2.8l-0.6-13.5c0,0-3.2-0.8-3.9-1.7c-0.7-0.9-1.9-2.1-1.9-2.1L44.4,13L44.4,13z"/>
+</g>
+<g>
+	<path class="st2" d="M13.6,35.3c-0.1-2.3,4.5,0.4,5.8,2.2c1.3,1.9,1.7,4.2,2.3,6.3c1,3.1,2.6,6.2,5.4,7.8c1.4,0.8,3.2,1.4,4.1,2.7
+		c0.9,1.4,0.7,3.3,0.4,5C31.7,59.4,14.4,56.4,13.6,35.3L13.6,35.3z"/>
+</g>
+<g>
+	<path class="st3" d="M23.3,26.2c-0.8,1.9,4.1-0.2,5.7-1.4c0.9-0.7,1.7-1.5,2.5-2.4c1.2-1.4,2.1-3,3.6-4
+		C35.1,18.3,27.2,16.8,23.3,26.2L23.3,26.2z"/>
+</g>
+<g>
+	<path class="st4" d="M34.4,59.6c-5.7,0-10.4-2-14-6c-5.7-6.3-7.6-16.4-8.2-23.9c-0.7-8,0-14.6,0-14.7c0-0.3,0.3-0.5,0.5-0.4
+		c0.3,0,0.5,0.3,0.4,0.5c0,0.3-2.6,26.1,7.9,37.8c3.4,3.8,7.8,5.7,13.2,5.7c0.3,0,0.5,0.2,0.5,0.5S34.7,59.6,34.4,59.6z"/>
+</g>
+<g>
+	<path class="st4" d="M34.1,59.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5c5.4,0,9.8-1.9,13.2-5.7c10.5-11.7,7.9-37.5,7.9-37.8
+		c0-0.3,0.2-0.5,0.4-0.5c0.3,0,0.5,0.2,0.5,0.4c0,0.1,0.7,6.7,0,14.7c-0.6,7.4-2.5,17.6-8.2,23.9C44.4,57.6,39.7,59.6,34.1,59.6z"/>
+</g>
+<g>
+	<path class="st4" d="M12.8,15.6c-0.3,0-0.5-0.2-0.5-0.5s0.2-0.5,0.5-0.5c2.7,0,4.4-1.9,5.2-3.1c0.4-0.7,1.3-1,2.1-0.6l7,2.9
+		c0.3,0.1,0.6,0.1,0.8-0.1l6-5.8c0.2-0.2,0.5-0.2,0.7,0c0.2,0.2,0.2,0.5,0,0.7l-6,5.8c-0.5,0.5-1.2,0.6-1.8,0.3l-7-2.9
+		c-0.3-0.1-0.7,0-0.9,0.3C17.9,13.4,16,15.6,12.8,15.6z"/>
+</g>
+<g>
+	<path class="st4" d="M55.8,15.6c-3.2,0-5.1-2.2-6-3.6c-0.2-0.3-0.6-0.4-0.9-0.3l-7,2.9c-0.6,0.3-1.4,0.1-1.8-0.3l-6-5.8
+		c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l6,5.8c0.2,0.2,0.5,0.3,0.8,0.1l7-2.9c0.8-0.3,1.6-0.1,2.1,0.6
+		c0.8,1.2,2.4,3.1,5.2,3.1c0.3,0,0.5,0.2,0.5,0.5S56.1,15.6,55.8,15.6z"/>
+</g>
+<g>
+	<path class="st4" d="M33.9,54.4c-3.5,0-6.5-1.3-8.9-3.9c-9.5-10.2-7.7-36.5-7.6-37.6c0-0.3,0.3-0.5,0.5-0.5c0.3,0,0.5,0.3,0.5,0.5
+		c0,0.3-1.9,27,7.3,36.9c2.2,2.4,5,3.6,8.2,3.6c3.2,0,6-1.2,8.3-3.7c9.4-9.8,8.3-36.1,8.3-36.4c0-0.3,0.2-0.5,0.5-0.5
+		c0.3,0,0.5,0.2,0.5,0.5c0,1.1,1.1,27-8.6,37.1C40.5,53.1,37.4,54.4,33.9,54.4z"/>
+</g>
+<g>
+	<path class="st4" d="M33.9,45.8c-6.9,0-12.5-6.4-12.5-14.2S27,17.5,33.9,17.5s12.5,6.4,12.5,14.2S40.8,45.8,33.9,45.8z M33.9,18.5
+		c-6.3,0-11.5,5.9-11.5,13.2c0,7.3,5.2,13.2,11.5,13.2c6.3,0,11.5-5.9,11.5-13.2C45.4,24.4,40.3,18.5,33.9,18.5z"/>
+</g>
+<g>
+	<path class="st4" d="M38.5,39.3c-0.2,0-0.5-0.1-0.7-0.2l-3.4-1.8c-0.1-0.1-0.3-0.1-0.4,0l-3.4,1.8C30,39.4,29.4,39.3,29,39
+		c-0.5-0.3-0.7-0.9-0.6-1.5l0.7-3.8c0-0.2,0-0.3-0.1-0.4l-2.8-2.7c-0.4-0.4-0.5-1-0.4-1.5c0.2-0.5,0.6-0.9,1.2-1l3.8-0.6
+		c0.2,0,0.3-0.1,0.4-0.3l1.7-3.5c0.3-0.5,0.8-0.8,1.3-0.8c0,0,0,0,0,0c0.6,0,1.1,0.3,1.3,0.8c0,0,0,0.1,0,0.1l1.7,3.4
+		c0.1,0.1,0.2,0.2,0.4,0.3l3.8,0.6c0.6,0.1,1,0.5,1.2,1c0.2,0.5,0,1.1-0.4,1.5l-2.8,2.7c-0.1,0.1-0.2,0.3-0.1,0.4l0.7,3.8
+		c0.1,0.6-0.1,1.1-0.6,1.5C39.1,39.2,38.8,39.3,38.5,39.3z M34.2,24c-0.2,0-0.4,0.1-0.4,0.3L32,27.7c-0.2,0.4-0.6,0.7-1.1,0.8
+		l-3.8,0.6c-0.2,0-0.3,0.1-0.4,0.3c-0.1,0.2,0,0.4,0.1,0.5l2.8,2.7c0.3,0.3,0.5,0.8,0.4,1.3l-0.7,3.8c0,0.2,0,0.4,0.2,0.5
+		c0.2,0.1,0.3,0.1,0.5,0l3.4-1.8c0.4-0.2,0.9-0.2,1.4,0l3.4,1.8c0.2,0.1,0.4,0.1,0.5,0c0.2-0.1,0.2-0.3,0.2-0.5l-0.7-3.8
+		c-0.1-0.5,0.1-1,0.4-1.3l2.8-2.7c0.2-0.2,0.2-0.4,0.1-0.5c-0.1-0.2-0.2-0.3-0.4-0.3l-3.8-0.6c-0.5-0.1-0.9-0.4-1.1-0.8l-1.7-3.5
+		c0,0,0,0,0-0.1C34.5,24.1,34.3,24,34.2,24C34.2,24,34.2,24,34.2,24z"/>
+</g>
+</svg>
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 21c4073859e6..ebfd86846692 100644
--- a/src/components/Icon/Illustrations.js
+++ b/src/components/Icon/Illustrations.js
@@ -17,7 +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 UserVerifyBlue from '../../../assets/images/product-illustrations/user-verify--blue.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';
@@ -55,7 +55,7 @@ export {
     TadaYellow,
     TadaBlue,
     GpsTrackOrange,
-    UserVerifyBlue,
+    ShieldYellow,
     MoneyReceipts,
     PinkBill,
     CreditCardsNew,
diff --git a/src/pages/ReimbursementAccount/Enable2FAPrompt.js b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
index bd3effd47c0f..6b89006bb43d 100644
--- a/src/pages/ReimbursementAccount/Enable2FAPrompt.js
+++ b/src/pages/ReimbursementAccount/Enable2FAPrompt.js
@@ -17,7 +17,7 @@ const propTypes = {
 const Enable2FAPrompt = props => (
     <Section
         title={props.translate('validationStep.enable2FATitle')}
-        icon={Illustrations.UserVerifyBlue}
+        icon={Illustrations.ShieldYellow}
         menuItems={[
             {
                 title: props.translate('validationStep.secureYourAccount'),

From d38d5c944977650b91c2f7ee08beefb320c7f37d Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Wed, 30 Nov 2022 15:02:17 +0530
Subject: [PATCH 09/10] Update copy

---
 src/languages/es.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 13e6f5ad3806..50e01d980f74 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -794,8 +794,8 @@ export default {
         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 la autenticación de dos factores ahora. Eso nos permitirá disputar transacciones de la Tarjeta Expensify y reducirá tu riesgo de fraude.',
-        secureYourAccount: 'Asegure su cuenta',
+        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',

From 57ed7a539844c20c55fcfc4c10977d5170bbee39 Mon Sep 17 00:00:00 2001
From: Monil Bhavsar <monil@expensify.com>
Date: Thu, 1 Dec 2022 17:33:37 +0530
Subject: [PATCH 10/10] Address review

---
 src/pages/ReimbursementAccount/ValidationStep.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js
index 796884de0793..6279cca7519c 100644
--- a/src/pages/ReimbursementAccount/ValidationStep.js
+++ b/src/pages/ReimbursementAccount/ValidationStep.js
@@ -36,6 +36,7 @@ const propTypes = {
     /** 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 */