agreements step implementation

src/languages/en.ts

@@ -2330,7 +2330,14 @@ const translations = {
     agreementsStep: {
         agreements: 'Agreements',
         pleaseConfirm: 'Please confirm the agreements below',
+        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',

src/languages/es.ts

@@ -2353,9 +2353,16 @@ const translations = {
         weAreWaiting: 'Estamos esperando que otros verifiquen sus identidades como directores o altos funcionarios de la empresa.',
     },
     agreementsStep: {
-        agreements: 'Acuerdos',
-        pleaseConfirm: 'Por favor confirme los acuerdos a continuación',
-        accept: 'Aceptar y añadir cuenta bancaria',
+        agreements: 'Agreements',
+        pleaseConfirm: 'Please confirm the agreements below',
+        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: 'Conectar cuenta bancaria',

src/pages/ReimbursementAccount/NonUSD/Agreements/Agreements.tsx → src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx

@@ -17,7 +17,7 @@ type AgreementsProps = {
 
 const bodyContent: Array<ComponentType<SubStepProps>> = [Confirmation];
 
-function Agreements({onBackButtonPress, onSubmit}: AgreementsProps) {
+function Index({onBackButtonPress, onSubmit}: AgreementsProps) {
     const {translate} = useLocalize();
 
     const submit = () => {
@@ -41,7 +41,7 @@ function Agreements({onBackButtonPress, onSubmit}: AgreementsProps) {
 
     return (
         <InteractiveStepWrapper
-            wrapperID={Agreements.displayName}
+            wrapperID={Index.displayName}
             handleBackButtonPress={handleBackButtonPress}
             headerTitle={translate('agreementsStep.agreements')}
             stepNames={CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES}
@@ -56,6 +56,6 @@ function Agreements({onBackButtonPress, onSubmit}: AgreementsProps) {
     );
 }
 
-Agreements.displayName = 'Agreements';
+Index.displayName = 'Agreements';
 
-export default Agreements;
+export default Index;

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

@@ -1,24 +1,115 @@
-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="">{`${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>
+            <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/ReimbursementAccountPage.tsx

@@ -40,7 +40,7 @@ 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';