Merge pull request #52614 from callstack-internal/feat/50902-GR-step-…

…6-agreements-and-finish-screen

Feat/50902 gr step 6 agreements and finish screen

src/languages/en.ts

@@ -2371,10 +2371,25 @@ const translations = {
     agreementsStep: {
         agreements: 'Agreements',
         pleaseConfirm: 'Please confirm the agreements below',
+        regulationRequiresUs: 'Regulation requires us to verify the identity of any individual who owns more than 25% of the business.',
+        iAmAuthorized: 'I am authorized to use the business bank account for business spend.',
+        iCertify: 'I certify that the information provided is true and accurate.',
+        termsAndConditions: 'terms and conditions.',
         accept: 'Accept and add bank account',
+        error: {
+            authorized: 'You must be a controlling officer with authorization to operate the business bank account',
+            certify: 'Please certify that the information is true and accurate',
+        },
     },
     finishStep: {
         connect: 'Connect bank account',
+        letsFinish: "Let's finish in chat!",
+        thanksFor:
+            "Thanks for those details. A dedicated support agent will now review your information. We'll circle back if we need anything else from you, but in the meantime, feel free to reach out to us with any questions.",
+        iHaveA: 'I have a question',
+        enable2FA: 'Enable two-factor authentication (2FA) to prevent fraud',
+        weTake: 'We take your security seriously. Please set up 2FA now to add an extra layer of protection to your account.',
+        secure: 'Secure your account',
     },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'One moment',

src/languages/es.ts

@@ -2381,7 +2381,7 @@ const translations = {
         uploadID: 'Subir documento de identidad y prueba de domicilio',
         id: 'Identificación (licencia de conducir o pasaporte)',
         personalAddress: 'Prueba de domicilio personal (por ejemplo, factura de servicios públicos)',
-        letsDoubleCheck: 'Vamos a comprobar que todo está bien.',
+        letsDoubleCheck: 'Vamos a verificar que todo esté correcto.',
         legalName: 'Nombre legal',
         proofOf: 'Comprobante de domicilio personal',
         enterOneEmail: 'Introduce el correo electrónico del director o alto funcionario en',
@@ -2395,10 +2395,25 @@ const translations = {
     agreementsStep: {
         agreements: 'Acuerdos',
         pleaseConfirm: 'Por favor confirme los acuerdos a continuación',
-        accept: 'Aceptar y añadir cuenta bancaria',
+        regulationRequiresUs: 'La normativa requiere que verifiquemos la identidad de cualquier individuo que posea más del 25% del negocio.',
+        iAmAuthorized: 'Estoy autorizado para usar la cuenta bancaria para gastos del negocio.',
+        iCertify: 'Certifico que la información proporcionada es verdadera y correcta.',
+        termsAndConditions: 'términos y condiciones.',
+        accept: 'Agregar y aceptar cuenta bancaria',
+        error: {
+            authorized: 'Debe ser un funcionario controlador con autorización para operar la cuenta bancaria comercial',
+            certify: 'Por favor certifique que la información es verdadera y exacta',
+        },
     },
     finishStep: {
         connect: 'Conectar cuenta bancaria',
+        letsFinish: '¡Terminemos en el chat!',
+        thanksFor:
+            'Gracias por esos detalles. Un agente de soporte dedicado revisará ahora tu información. Nos pondremos en contacto si necesitamos algo más de tu parte, pero mientras tanto, no dudes en comunicarte con nosotros si tienes alguna pregunta.',
+        iHaveA: 'Tengo una pregunta',
+        enable2FA: 'Habilite la autenticación de dos factores (2FA) para prevenir fraudes',
+        weTake: 'Nos tomamos su seguridad en serio. Por favor, configure 2FA ahora para agregar una capa adicional de protección a su cuenta.',
+        secure: 'Asegure su cuenta',
     },
     reimbursementAccountLoadingAnimation: {
         oneMoment: 'Un momento',

src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx

@@ -1,24 +1,116 @@
-import React from 'react';
+import React, {useCallback} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import Text from '@components/Text';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as ValidationUtils from '@libs/ValidationUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
+
+const {AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT, PROVIDE_TRUTHFUL_INFORMATION, AGREE_TO_TERMS_AND_CONDITIONS} = INPUT_IDS.ADDITIONAL_DATA.CORPAY;
+const STEP_FIELDS = [AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT, PROVIDE_TRUTHFUL_INFORMATION, AGREE_TO_TERMS_AND_CONDITIONS];
+
+function IsAuthorizedToUseBankAccountLabel() {
+    const {translate} = useLocalize();
+    return <Text>{translate('agreementsStep.iAmAuthorized')}</Text>;
+}
+
+function CertifyTrueAndAccurateLabel() {
+    const {translate} = useLocalize();
+    return <Text>{translate('agreementsStep.iCertify')}</Text>;
+}
+
+function TermsAndConditionsLabel() {
+    const {translate} = useLocalize();
+    return (
+        <Text>
+            {translate('common.iAcceptThe')}
+            <TextLink href="https://cross-border.corpay.com/tc/">{`${translate('agreementsStep.termsAndConditions')}`}</TextLink>
+        </Text>
+    );
+}
 
 function Confirmation({onNext}: SubStepProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT);
+
+    const defaultValues = {
+        [AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]:
+            !!reimbursementAccount?.achData?.additionalData?.corpay?.[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT] ?? reimbursementAccountDraft?.[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT] ?? '',
+        [PROVIDE_TRUTHFUL_INFORMATION]:
+            !!reimbursementAccount?.achData?.additionalData?.corpay?.[PROVIDE_TRUTHFUL_INFORMATION] ?? reimbursementAccountDraft?.[PROVIDE_TRUTHFUL_INFORMATION] ?? '',
+        [AGREE_TO_TERMS_AND_CONDITIONS]:
+            !!reimbursementAccount?.achData?.additionalData?.corpay?.[AGREE_TO_TERMS_AND_CONDITIONS] ?? reimbursementAccountDraft?.[AGREE_TO_TERMS_AND_CONDITIONS] ?? '',
+    };
+
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
+            const errors = ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS);
+
+            if (!ValidationUtils.isRequiredFulfilled(values[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT])) {
+                errors[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT] = translate('agreementsStep.error.authorized');
+            }
+
+            if (!ValidationUtils.isRequiredFulfilled(values[PROVIDE_TRUTHFUL_INFORMATION])) {
+                errors[PROVIDE_TRUTHFUL_INFORMATION] = translate('agreementsStep.error.certify');
+            }
+
+            if (!ValidationUtils.isRequiredFulfilled(values[AGREE_TO_TERMS_AND_CONDITIONS])) {
+                errors[AGREE_TO_TERMS_AND_CONDITIONS] = translate('common.error.acceptTerms');
+            }
+
+            return errors;
+        },
+        [translate],
+    );
+
     return (
         <FormProvider
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
             onSubmit={onNext}
+            validate={validate}
             submitButtonText={translate('agreementsStep.accept')}
             style={[styles.mh5, styles.flexGrow1]}
             enabledWhenOffline={false}
         >
             <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('agreementsStep.pleaseConfirm')}</Text>
+            <Text style={[styles.pv3, styles.textSupporting]}>{translate('agreementsStep.regulationRequiresUs')}</Text>
+            <InputWrapper
+                InputComponent={CheckboxWithLabel}
+                accessibilityLabel={translate('agreementsStep.iAmAuthorized')}
+                inputID={AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT}
+                style={styles.mt6}
+                LabelComponent={IsAuthorizedToUseBankAccountLabel}
+                defaultValue={defaultValues[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]}
+                shouldSaveDraft
+            />
+            <InputWrapper
+                InputComponent={CheckboxWithLabel}
+                accessibilityLabel={translate('agreementsStep.iCertify')}
+                inputID={PROVIDE_TRUTHFUL_INFORMATION}
+                style={styles.mt6}
+                LabelComponent={CertifyTrueAndAccurateLabel}
+                defaultValue={defaultValues[PROVIDE_TRUTHFUL_INFORMATION]}
+                shouldSaveDraft
+            />
+            <InputWrapper
+                InputComponent={CheckboxWithLabel}
+                accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('agreementsStep.termsAndConditions')}`}
+                inputID={AGREE_TO_TERMS_AND_CONDITIONS}
+                style={styles.mt6}
+                LabelComponent={TermsAndConditionsLabel}
+                defaultValue={defaultValues[AGREE_TO_TERMS_AND_CONDITIONS]}
+                shouldSaveDraft
+            />
         </FormProvider>
     );
 }

src/pages/ReimbursementAccount/NonUSD/Finish/index.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
+import Section from '@components/Section';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@navigation/Navigation';
+import * as Report from '@userActions/Report';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+
+function Finish() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT);
+    const policyID = reimbursementAccount?.achData?.policyID ?? '-1';
+
+    const handleBackButtonPress = () => {
+        Navigation.goBack();
+    };
+    const handleNavigateToConciergeChat = () => Report.navigateToConciergeChat(true);
+
+    return (
+        <ScreenWrapper
+            testID={Finish.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('finishStep.connect')}
+                onBackButtonPress={handleBackButtonPress}
+            />
+            <ScrollView style={[styles.flex1]}>
+                <Section
+                    title={translate('finishStep.letsFinish')}
+                    icon={Illustrations.ConciergeBubble}
+                    containerStyles={[styles.mb8, styles.mh5]}
+                    titleStyles={[styles.mb3, styles.textHeadline]}
+                >
+                    <Text style={[styles.mb6, styles.mt3, styles.textLabelSupportingEmptyValue]}>{translate('finishStep.thanksFor')}</Text>
+                    <Button
+                        text={translate('finishStep.iHaveA')}
+                        onPress={handleNavigateToConciergeChat}
+                        icon={Expensicons.ChatBubble}
+                        success
+                        large
+                        innerStyles={[styles.h13]}
+                    />
+                </Section>
+                <Section
+                    title={translate('finishStep.enable2FA')}
+                    icon={Illustrations.ShieldYellow}
+                    titleStyles={[styles.mb4, styles.textHeadline]}
+                    containerStyles={[styles.mh5]}
+                    menuItems={[
+                        {
+                            title: translate('finishStep.secure'),
+                            onPress: () => {
+                                Navigation.navigate(ROUTES.SETTINGS_2FA.getRoute(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID)));
+                            },
+                            icon: Expensicons.Shield,
+                            shouldShowRightIcon: true,
+                            iconRight: Expensicons.NewWindow,
+                            wrapperStyle: [styles.cardMenuItem],
+                        },
+                    ]}
+                >
+                    <View style={styles.mb6}>
+                        <Text style={[styles.mt3, styles.textLabelSupportingEmptyValue]}>{translate('finishStep.weTake')}</Text>
+                    </View>
+                </Section>
+            </ScrollView>
+        </ScreenWrapper>
+    );
+}
+
+Finish.displayName = 'Finish';
+
+export default Finish;

src/pages/ReimbursementAccount/NonUSD/SignerInfo/EnterEmail.tsx

@@ -58,6 +58,7 @@ function EnterEmail({onSubmit, isUserDirector}: EnterEmailProps) {
             style={[styles.mh5, styles.flexGrow1]}
         >
             <Text style={[styles.textHeadlineLineHeightXXL]}>{translate(shouldGatherBothEmails ? 'signerInfoStep.enterTwoEmails' : 'signerInfoStep.enterOneEmail')}</Text>
+            {!shouldGatherBothEmails && <Text style={[styles.pv3, styles.textSupporting]}>{translate('signerInfoStep.regulationRequiresOneMoreDirector')}</Text>}
             <InputWrapper
                 InputComponent={TextInput}
                 label={shouldGatherBothEmails ? `${translate('common.email')} 1` : translate('common.email')}

src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx

@@ -40,12 +40,12 @@ import CompanyStep from './CompanyStep';
 import ConnectBankAccount from './ConnectBankAccount/ConnectBankAccount';
 import ContinueBankAccountSetup from './ContinueBankAccountSetup';
 import EnableBankAccount from './EnableBankAccount/EnableBankAccount';
-import Agreements from './NonUSD/Agreements/Agreements';
+import Agreements from './NonUSD/Agreements';
 import BankInfo from './NonUSD/BankInfo/BankInfo';
 import BeneficialOwnerInfo from './NonUSD/BeneficialOwnerInfo/BeneficialOwnerInfo';
 import BusinessInfo from './NonUSD/BusinessInfo/BusinessInfo';
 import Country from './NonUSD/Country/Country';
-import Finish from './NonUSD/Finish/Finish';
+import Finish from './NonUSD/Finish';
 import SignerInfo from './NonUSD/SignerInfo';
 import RequestorStep from './RequestorStep';