Merge pull request #32666 from barttom/refactor/30442/varification-step

Refactor/30442/varification step

Author: mountiny

src/CONST.ts

@@ -260,6 +260,14 @@ const CONST = {
                 EXIT: 'EXIT',
             },
         },
+        COMPLETE_VERIFICATION: {
+            INPUT_KEY: {
+                BANK_ACCOUNT_ID: 'bankAccountID',
+                IS_AUTHORIZED_TO_USE_BANK_ACCOUNT: 'isAuthorizedToUseBankAccount',
+                CERTIFY_TRUE_INFORMATION: 'certifyTrueInformation',
+                ACCEPT_TERMS_AND_CONDITIONS: 'acceptTermsAndConditions',
+            },
+        },
         ERROR: {
             MISSING_ROUTING_NUMBER: '402 Missing routingNumber',
             MAX_ROUTING_NUMBER: '402 Maximum Size Exceeded routingNumber',

src/languages/en.ts

@@ -1535,10 +1535,29 @@ export default {
         confirmAgreements: 'Please confirm the agreements below.',
         certifyTrueAndAccurate: 'I certify that the information provided is true and accurate',
         certifyTrueAndAccurateError: 'Must certify information is true and accurate',
-        isControllingOfficer: 'I am authorized to use my company bank account for business spend',
-        isControllingOfficerError: 'You must be a controlling officer with authorization to operate the business bank account.',
+        isAuthorizedToUseBankAccount: 'I am authorized to use my company bank account for business spend',
+        isAuthorizedToUseBankAccountError: 'You must be a controlling officer with authorization to operate the business bank account.',
         termsAndConditions: 'terms and conditions',
     },
+    connectBankAccountStep: {
+        connectBankAccount: 'Connect bank account',
+        finishButtonText: 'Finish setup',
+        validateYourBankAccount: 'Validate your bank account',
+        validateButtonText: 'Validate',
+        validationInputLabel: 'Transaction',
+        maxAttemptsReached: 'Validation for this bank account has been disabled due to too many incorrect attempts.',
+        description: 'A day or two after you add your account to Expensify we send three (3) transactions to your account. They have a merchant line like "Expensify, Inc. Validation".',
+        descriptionCTA: 'Please enter each transaction amount in the fields below. Example: 1.51.',
+        reviewingInfo: "Thanks! We're reviewing your information, and will be in touch shortly. Please check your chat with Concierge ",
+        forNextSteps: ' for next steps to finish setting up your bank account.',
+        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',
+    },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'One moment',
         explanationLine: 'We’re taking a look at your information. You will be able to continue with next steps shortly.',

src/languages/es.ts

@@ -1554,13 +1554,33 @@ export default {
         },
     },
     completeVerificationStep: {
-        completeVerification: 'Complete verification',
-        confirmAgreements: 'Please confirm the agreements below.',
-        certifyTrueAndAccurate: 'I certify that the information provided is true and accurate',
-        certifyTrueAndAccurateError: 'Must certify information is true and accurate',
-        isControllingOfficer: 'I am authorized to use my company bank account for business spend',
-        isControllingOfficerError: 'You must be a controlling officer with authorization to operate the business bank account.',
-        termsAndConditions: 'terms and conditions',
+        completeVerification: 'Completar la verificación',
+        confirmAgreements: 'Por favor, confirma los Acuerdos a continuación.',
+        certifyTrueAndAccurate: 'Certifico que la información dada es verdadera y precisa',
+        certifyTrueAndAccurateError: 'Debe certificar que la información es verdadera y precisa',
+        isAuthorizedToUseBankAccount: 'Estoy autorizado para usar la cuenta bancaria de mi empresa para gastos comerciales',
+        isAuthorizedToUseBankAccountError: 'Debes ser un oficial controlador con autorización para operar la cuenta bancaria de la empresa.',
+        termsAndConditions: 'Términos y Condiciones',
+    },
+    connectBankAccountStep: {
+        connectBankAccount: 'Conectar cuenta bancaria',
+        finishButtonText: 'Finalizar configuración',
+        validateYourBankAccount: 'Valida tu cuenta bancaria',
+        validateButtonText: 'Validar',
+        validationInputLabel: 'Transacción',
+        maxAttemptsReached: 'La validación para esta cuenta bancaria se ha desactivado debido a demasiados intentos incorrectos.',
+        description:
+            'Un día o dos después de agregar tu cuenta a Expensify, enviamos tres (3) transacciones a tu cuenta. Tienen un nombre de comerciante similar a "Expensify, Inc. Validation".',
+        descriptionCTA: 'Ingresa el importe de cada transacción en los campos a continuación. Ejemplo: 1.51.',
+        reviewingInfo: '¡Gracias! Estamos revisando tu información y nos comunicaremos contigo en breve. Consulta el chat con Concierge ',
+        forNextSteps: ' para conocer los próximos pasos para terminar de configurar tu cuenta bancaria.',
+        letsChatCTA: 'Sí, vamos a chatear',
+        letsChatText: 'Gracias. Necesitamos tu ayuda para verificar la información, pero podemos resolver esto rápidamente a través del chat. ¿Estás Listo?',
+        letsChatTitle: '¡Vamos a chatear!',
+        enable2FATitle: '¡Evita fraudes, habilita 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',
     },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'Un momento',

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -13,9 +13,15 @@ const propTypes = {
 
 function ACHContractStep({onBackButtonPress, onCloseButtonPress}) {
     const [isBeneficialOwnerInfoSet, setIsBeneficialOwnerInfoSet] = useState(false);
+    const handleCompleteVerificationBackButtonPress = () => setIsBeneficialOwnerInfoSet(false);
 
     if (isBeneficialOwnerInfoSet) {
-        return <CompleteVerification setIsBeneficialOwnerInfoSet={setIsBeneficialOwnerInfoSet} />;
+        return (
+            <CompleteVerification
+                onBackButtonPress={handleCompleteVerificationBackButtonPress}
+                onCloseButtonPress={onCloseButtonPress}
+            />
+        );
     }
 
     return (

src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.js

@@ -73,21 +73,23 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext})
         >
             <ScrollView contentContainerStyle={styles.flexGrow1}>
                 <Text style={[styles.textHeadline, styles.ph5, styles.mb6]}>{translate('bankAccount.letsDoubleCheck')}</Text>
-                <View style={[styles.confirmBankInfoCard]}>
+                <View style={[styles.cardSection]}>
                     {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
-                        <View style={[styles.mb5]}>
+                        <View style={[styles.mb5, styles.flexRow, styles.alignItemsCenter]}>
                             <Icon
                                 src={Expensicons.Bank}
-                                additionalStyles={[styles.confirmBankInfoCompanyIcon, styles.mb5]}
+                                additionalStyles={[styles.confirmBankInfoCompanyIcon, styles.mr3]}
                                 fill={theme.iconHovered}
                             />
-                            <View style={[styles.mb3]}>
-                                <Text style={[styles.mutedTextLabel, styles.mb1]}>{translate('bankAccount.routingNumber')}</Text>
-                                <Text style={styles.confirmBankInfoNumber}>{values[bankInfoStepKeys.ROUTING_NUMBER]}</Text>
-                            </View>
                             <View>
-                                <Text style={[styles.mutedTextLabel, styles.mb1]}>{translate('bankAccount.accountNumber')}</Text>
-                                <Text style={styles.confirmBankInfoNumber}>{values[bankInfoStepKeys.ACCOUNT_NUMBER]}</Text>
+                                <View style={[styles.mb3]}>
+                                    <Text style={[styles.mutedTextLabel, styles.mb1]}>{translate('bankAccount.routingNumber')}</Text>
+                                    <Text style={styles.confirmBankInfoNumber}>{values[bankInfoStepKeys.ROUTING_NUMBER]}</Text>
+                                </View>
+                                <View>
+                                    <Text style={[styles.mutedTextLabel, styles.mb1]}>{translate('bankAccount.accountNumber')}</Text>
+                                    <Text style={styles.confirmBankInfoNumber}>{values[bankInfoStepKeys.ACCOUNT_NUMBER]}</Text>
+                                </View>
                             </View>
                         </View>
                     )}
@@ -105,7 +107,6 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext})
                     <Text style={[styles.confirmBankInfoText, styles.mb4]}>{translate('bankAccount.thisBankAccount')}</Text>
                     <MenuItem
                         icon={Expensicons.Bank}
-                        titleStyle={[styles.confirmBankInfoText]}
                         title={translate('bankAccount.connectDifferentAccount')}
                         onPress={handleConnectDifferentAccount}
                         shouldShowRightIcon

src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js

@@ -1,4 +1,3 @@
-import {parsePhoneNumber} from 'awesome-phonenumber';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
@@ -11,6 +10,7 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {parsePhoneNumber} from '@libs/PhoneNumber';
 import reimbursementAccountDraftPropTypes from '@pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes';
 import {reimbursementAccountPropTypes} from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';

src/pages/ReimbursementAccount/CompleteVerification/CompleteVerification.js

@@ -25,8 +25,11 @@ const propTypes = {
     /** The draft values of the bank account being setup */
     reimbursementAccountDraft: reimbursementAccountDraftPropTypes,
 
-    /** Changes variable responsible for displaying step 4 or 5 */
-    setIsBeneficialOwnerInfoSet: PropTypes.func.isRequired,
+    /** Handles back button press */
+    onBackButtonPress: PropTypes.func.isRequired,
+
+    /** Exits flow and goes back to the workspace initial page */
+    onCloseButtonPress: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -35,29 +38,33 @@ const defaultProps = {
 };
 
 const BODY_CONTENT = [ConfirmAgreements];
-const PERSONAL_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
+const COMPLETE_VERIFICATION_KEYS = CONST.BANK_ACCOUNT.COMPLETE_VERIFICATION.INPUT_KEY;
+const BENEFICIAL_OWNER_INFO_STEP_KEYS = CONST.BANK_ACCOUNT.BENEFICIAL_OWNER_INFO_STEP.INPUT_KEY;
 
-// This is a mocked step to showcase full transition between steps - will be removed with next PR
-const CompleteVerification = forwardRef(({reimbursementAccount, reimbursementAccountDraft, setIsBeneficialOwnerInfoSet}, ref) => {
+const CompleteVerification = forwardRef(({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress, onCloseButtonPress}, ref) => {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const values = useMemo(() => getSubstepValues(PERSONAL_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
+    const values = useMemo(() => getSubstepValues(COMPLETE_VERIFICATION_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
 
     const submit = useCallback(() => {
         const payload = {
-            bankAccountID: getDefaultValueForReimbursementAccountField(reimbursementAccount, PERSONAL_INFO_STEP_KEYS.BANK_ACCOUNT_ID, 0),
+            bankAccountID: getDefaultValueForReimbursementAccountField(reimbursementAccount, COMPLETE_VERIFICATION_KEYS.BANK_ACCOUNT_ID, 0),
             ...values,
         };
+        const beneficialOwnersStepValues = getSubstepValues(BENEFICIAL_OWNER_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount);
 
-        BankAccounts.updatePersonalInformationForBankAccount(payload);
-    }, [reimbursementAccount, values]);
+        BankAccounts.updateBeneficialOwnersForBankAccount({
+            ...beneficialOwnersStepValues,
+            ...payload,
+        });
+    }, [reimbursementAccount, reimbursementAccountDraft, values]);
 
     const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent: BODY_CONTENT, startFrom: 0, onFinished: submit});
 
     const handleBackButtonPress = () => {
         if (screenIndex === 0) {
-            setIsBeneficialOwnerInfoSet(false);
+            onBackButtonPress();
         } else {
             prevScreen();
         }
@@ -74,6 +81,8 @@ const CompleteVerification = forwardRef(({reimbursementAccount, reimbursementAcc
             <HeaderWithBackButton
                 onBackButtonPress={handleBackButtonPress}
                 title={translate('completeVerificationStep.completeVerification')}
+                shouldShowCloseButton
+                onCloseButtonPress={onCloseButtonPress}
             />
             <View style={[styles.ph5, styles.mt3, {height: CONST.BANK_ACCOUNT.STEPS_HEADER_HEIGHT}]}>
                 <InteractiveStepSubHeader