Merge pull request #57849 from callstack-internal/feat/step-6-logic

madmax330 · web-flow · commit e9b620412cb2 · 2025-04-16T14:16:45.000+04:00
[NO QA] feat: Non USD VBA flow - step 6 logic
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2710,11 +2710,14 @@ const translations = {
         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.',
+        termsAndConditions: 'terms and conditions',
         accept: 'Accept and add bank account',
+        iConsentToThe: 'I consent to the',
+        privacyNotice: 'privacy notice',
         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',
+            consent: 'Please consent to the privacy notice',
         },
     },
     finishStep: {
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2733,11 +2733,14 @@ const translations = {
         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.',
+        termsAndConditions: 'términos y condiciones',
         accept: 'Agregar y aceptar cuenta bancaria',
+        iConsentToThe: 'Doy mi consentimiento para el',
+        privacyNotice: 'aviso de privacidad',
         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',
+            consent: 'Por favor, acepte el aviso de privacidad',
         },
     },
     finishStep: {
diff --git a/src/libs/API/parameters/FinishCorpayBankAccountOnboardingParams.ts b/src/libs/API/parameters/FinishCorpayBankAccountOnboardingParams.ts
@@ -0,0 +1,6 @@
+type FinishCorpayBankAccountOnboardingParams = {
+    inputs: string;
+    bankAccountID: number;
+};
+
+export default FinishCorpayBankAccountOnboardingParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
@@ -388,3 +388,4 @@ export type {default as SetPolicyProhibitedExpensesParams} from './SetPolicyProh
 export type {default as GetEmphemeralTokenParams} from './GetEmphemeralTokenParams';
 export type {default as CreateAppleDigitalWalletParams} from './CreateAppleDigitalWalletParams';
 export type {default as CompleteConciergeCallParams} from './CompleteConciergeCallParams';
+export type {default as FinishCorpayBankAccountOnboardingParams} from './FinishCorpayBankAccountOnboardingParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
@@ -468,6 +468,7 @@ const WRITE_COMMANDS = {
     CHANGE_TRANSACTIONS_REPORT: 'ChangeTransactionsReport',
     SEND_RECAP_IN_ADMINS_ROOM: 'SendRecapInAdminsRoom',
     COMPLETE_CONCIERGE_CALL: 'CompleteConciergeCall',
+    FINISH_CORPAY_BANK_ACCOUNT_ONBOARDING: 'FinishCorpayBankAccountOnboarding',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -811,6 +812,7 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.SEND_RECAP_IN_ADMINS_ROOM]: Parameters.SendRecapInAdminsRoomParams;
     [WRITE_COMMANDS.SET_POLICY_PROHIBITED_EXPENSES]: Parameters.SetPolicyProhibitedExpensesParams;
     [WRITE_COMMANDS.COMPLETE_CONCIERGE_CALL]: Parameters.CompleteConciergeCallParams;
+    [WRITE_COMMANDS.FINISH_CORPAY_BANK_ACCOUNT_ONBOARDING]: Parameters.FinishCorpayBankAccountOnboardingParams;
 
     [WRITE_COMMANDS.DELETE_MONEY_REQUEST_ON_SEARCH]: Parameters.DeleteMoneyRequestOnSearchParams;
     [WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH]: Parameters.HoldMoneyRequestOnSearchParams;
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
@@ -7,6 +7,7 @@ import type {
     BankAccountHandlePlaidErrorParams,
     ConnectBankAccountParams,
     DeletePaymentBankAccountParams,
+    FinishCorpayBankAccountOnboardingParams,
     OpenReimbursementAccountPageParams,
     SaveCorpayOnboardingBeneficialOwnerParams,
     ValidateBankAccountWithTransactionsParams,
@@ -585,6 +586,44 @@ function saveCorpayOnboardingDirectorInformation(parameters: SaveCorpayOnboardin
     return API.write(WRITE_COMMANDS.SAVE_CORPAY_ONBOARDING_DIRECTOR_INFORMATION, parameters, onyxData);
 }
 
+function finishCorpayBankAccountOnboarding(parameters: FinishCorpayBankAccountOnboardingParams) {
+    const onyxData: OnyxData = {
+        optimisticData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                value: {
+                    isFinishingCorpayBankAccountOnboarding: true,
+                    errors: null,
+                },
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                value: {
+                    isFinishingCorpayBankAccountOnboarding: false,
+                    isSuccess: true,
+                },
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: Onyx.METHOD.MERGE,
+                key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+                value: {
+                    isFinishingCorpayBankAccountOnboarding: false,
+                    isSuccess: false,
+                    errors: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'),
+                },
+            },
+        ],
+    };
+
+    return API.write(WRITE_COMMANDS.FINISH_CORPAY_BANK_ACCOUNT_ONBOARDING, parameters, onyxData);
+}
+
 function clearReimbursementAccount() {
     Onyx.set(ONYXKEYS.REIMBURSEMENT_ACCOUNT, null);
 }
@@ -609,6 +648,10 @@ function clearReimbursementAccoungSaveCorplayOnboardingDirectorInformation() {
     Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isSuccess: null, isSavingCorpayOnboardingDirectorInformation: null});
 }
 
+function clearReimbursementAccountFinishCorpayBankAccountOnboarding() {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {isSuccess: null, isFinishingCorpayBankAccountOnboarding: null});
+}
+
 /**
  * Function to display and fetch data for Reimbursement Account step
  * @param stepToOpen - current step to open
@@ -897,6 +940,8 @@ export {
     clearReimbursementAccountSaveCorpayOnboardingBeneficialOwners,
     clearReimbursementAccoungSaveCorplayOnboardingDirectorInformation,
     clearCorpayBankAccountFields,
+    finishCorpayBankAccountOnboarding,
+    clearReimbursementAccountFinishCorpayBankAccountOnboarding,
 };
 
 export type {BusinessAddress, PersonalAddress};
diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/index.tsx
@@ -1,10 +1,15 @@
 import type {ComponentType} from 'react';
-import React from 'react';
+import React, {useEffect, useMemo} from 'react';
+import {useOnyx} from 'react-native-onyx';
 import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
 import type {SubStepProps} from '@hooks/useSubStep/types';
+import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues';
+import {clearReimbursementAccountFinishCorpayBankAccountOnboarding, finishCorpayBankAccountOnboarding} from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
 import Confirmation from './subSteps/Confirmation';
 
 type AgreementsProps = {
@@ -17,13 +22,48 @@ type AgreementsProps = {
 
 const bodyContent: Array<ComponentType<SubStepProps>> = [Confirmation];
 
+const INPUT_KEYS = {
+    PROVIDE_TRUTHFUL_INFORMATION: INPUT_IDS.ADDITIONAL_DATA.CORPAY.PROVIDE_TRUTHFUL_INFORMATION,
+    AGREE_TO_TERMS_AND_CONDITIONS: INPUT_IDS.ADDITIONAL_DATA.CORPAY.AGREE_TO_TERMS_AND_CONDITIONS,
+    CONSENT_TO_PRIVACY_NOTICE: INPUT_IDS.ADDITIONAL_DATA.CORPAY.CONSENT_TO_PRIVACY_NOTICE,
+    AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT: INPUT_IDS.ADDITIONAL_DATA.CORPAY.AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT,
+};
+
 function Agreements({onBackButtonPress, onSubmit}: AgreementsProps) {
     const {translate} = useLocalize();
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false});
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: false});
+    const agreementsStepValues = useMemo(() => getSubStepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
+    const bankAccountID = reimbursementAccount?.achData?.bankAccountID ?? CONST.DEFAULT_NUMBER_ID;
 
     const submit = () => {
-        onSubmit();
+        finishCorpayBankAccountOnboarding({
+            inputs: JSON.stringify({
+                provideTruthfulInformation: agreementsStepValues.provideTruthfulInformation,
+                agreeToTermsAndConditions: agreementsStepValues.agreeToTermsAndConditions,
+                consentToPrivacyNotice: agreementsStepValues.consentToPrivacyNotice,
+                authorizedToBindClientToAgreement: agreementsStepValues.authorizedToBindClientToAgreement,
+            }),
+            bankAccountID,
+        });
     };
 
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (reimbursementAccount?.errors || reimbursementAccount?.isFinishingCorpayBankAccountOnboarding || !reimbursementAccount?.isSuccess) {
+            return;
+        }
+
+        if (reimbursementAccount?.isSuccess) {
+            onSubmit();
+            clearReimbursementAccountFinishCorpayBankAccountOnboarding();
+        }
+
+        return () => {
+            clearReimbursementAccountFinishCorpayBankAccountOnboarding();
+        };
+    }, [reimbursementAccount, onSubmit]);
+
     const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom: 0, onFinished: submit});
 
     const handleBackButtonPress = () => {
diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/subSteps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/subSteps/Confirmation.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
@@ -10,11 +10,12 @@ import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getFieldRequiredErrors, isRequiredFulfilled} from '@libs/ValidationUtils';
+import getSubStepValues from '@pages/ReimbursementAccount/utils/getSubStepValues';
 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];
+const {AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT, PROVIDE_TRUTHFUL_INFORMATION, AGREE_TO_TERMS_AND_CONDITIONS, CONSENT_TO_PRIVACY_NOTICE} = INPUT_IDS.ADDITIONAL_DATA.CORPAY;
+const STEP_FIELDS = [AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT, PROVIDE_TRUTHFUL_INFORMATION, AGREE_TO_TERMS_AND_CONDITIONS, CONSENT_TO_PRIVACY_NOTICE];
 
 function IsAuthorizedToUseBankAccountLabel() {
     const {translate} = useLocalize();
@@ -31,24 +32,34 @@ function TermsAndConditionsLabel() {
     return (
         <Text>
             {translate('common.iAcceptThe')}
-            <TextLink href="https://cross-border.corpay.com/tc/">{`${translate('agreementsStep.termsAndConditions')}`}</TextLink>
+            <TextLink href="https://cross-border.corpay.com/tc/">{`${translate('agreementsStep.termsAndConditions')}`}</TextLink>.
         </Text>
     );
 }
 
+function ConsentToPrivacyNoticeLabel() {
+    const {translate} = useLocalize();
+    return (
+        <Text>
+            {translate('agreementsStep.iConsentToThe')} <TextLink href="https://payments.corpay.com/compliance">{`${translate('agreementsStep.privacyNotice')}`}</TextLink>.
+        </Text>
+    );
+}
+
+const INPUT_KEYS = {
+    PROVIDE_TRUTHFUL_INFORMATION: INPUT_IDS.ADDITIONAL_DATA.CORPAY.PROVIDE_TRUTHFUL_INFORMATION,
+    AGREE_TO_TERMS_AND_CONDITIONS: INPUT_IDS.ADDITIONAL_DATA.CORPAY.AGREE_TO_TERMS_AND_CONDITIONS,
+    CONSENT_TO_PRIVACY_NOTICE: INPUT_IDS.ADDITIONAL_DATA.CORPAY.CONSENT_TO_PRIVACY_NOTICE,
+    AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT: INPUT_IDS.ADDITIONAL_DATA.CORPAY.AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT,
+};
+
 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?.corpay?.[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT] ?? reimbursementAccountDraft?.[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT] ?? '',
-        [PROVIDE_TRUTHFUL_INFORMATION]: !!reimbursementAccount?.achData?.corpay?.[PROVIDE_TRUTHFUL_INFORMATION] ?? reimbursementAccountDraft?.[PROVIDE_TRUTHFUL_INFORMATION] ?? '',
-        [AGREE_TO_TERMS_AND_CONDITIONS]: !!reimbursementAccount?.achData?.corpay?.[AGREE_TO_TERMS_AND_CONDITIONS] ?? reimbursementAccountDraft?.[AGREE_TO_TERMS_AND_CONDITIONS] ?? '',
-    };
+    const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: false});
+    const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT, {canBeMissing: false});
+    const agreementsStepValues = useMemo(() => getSubStepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM> => {
@@ -66,6 +77,10 @@ function Confirmation({onNext}: SubStepProps) {
                 errors[AGREE_TO_TERMS_AND_CONDITIONS] = translate('common.error.acceptTerms');
             }
 
+            if (!isRequiredFulfilled(values[CONSENT_TO_PRIVACY_NOTICE])) {
+                errors[CONSENT_TO_PRIVACY_NOTICE] = translate('agreementsStep.error.consent');
+            }
+
             return errors;
         },
         [translate],
@@ -79,6 +94,7 @@ function Confirmation({onNext}: SubStepProps) {
             submitButtonText={translate('agreementsStep.accept')}
             style={[styles.mh5, styles.flexGrow1]}
             enabledWhenOffline={false}
+            isLoading={reimbursementAccount?.isFinishingCorpayBankAccountOnboarding}
         >
             <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('agreementsStep.pleaseConfirm')}</Text>
             <Text style={[styles.pv3, styles.textSupporting]}>{translate('agreementsStep.regulationRequiresUs')}</Text>
@@ -88,7 +104,7 @@ function Confirmation({onNext}: SubStepProps) {
                 inputID={AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT}
                 style={styles.mt6}
                 LabelComponent={IsAuthorizedToUseBankAccountLabel}
-                defaultValue={defaultValues[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]}
+                defaultValue={agreementsStepValues[AUTHORIZED_TO_BIND_CLIENT_TO_AGREEMENT]}
                 shouldSaveDraft
             />
             <InputWrapper
@@ -97,16 +113,25 @@ function Confirmation({onNext}: SubStepProps) {
                 inputID={PROVIDE_TRUTHFUL_INFORMATION}
                 style={styles.mt6}
                 LabelComponent={CertifyTrueAndAccurateLabel}
-                defaultValue={defaultValues[PROVIDE_TRUTHFUL_INFORMATION]}
+                defaultValue={agreementsStepValues[PROVIDE_TRUTHFUL_INFORMATION]}
                 shouldSaveDraft
             />
             <InputWrapper
                 InputComponent={CheckboxWithLabel}
-                accessibilityLabel={`${translate('common.iAcceptThe')} ${translate('agreementsStep.termsAndConditions')}`}
+                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]}
+                defaultValue={agreementsStepValues[AGREE_TO_TERMS_AND_CONDITIONS]}
+                shouldSaveDraft
+            />
+            <InputWrapper
+                InputComponent={CheckboxWithLabel}
+                accessibilityLabel={`${translate('agreementsStep.iConsentToThe')} ${translate('agreementsStep.privacyNotice')}.`}
+                inputID={CONSENT_TO_PRIVACY_NOTICE}
+                style={styles.mt6}
+                LabelComponent={ConsentToPrivacyNoticeLabel}
+                defaultValue={agreementsStepValues[CONSENT_TO_PRIVACY_NOTICE]}
                 shouldSaveDraft
             />
         </FormProvider>
diff --git a/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx b/src/pages/ReimbursementAccount/NonUSD/NonUSDVerifiedBankAccountFlow.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+import {clearErrors} from '@userActions/FormActions';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import Agreements from './Agreements';
 import BankInfo from './BankInfo/BankInfo';
 import BeneficialOwnerInfo from './BeneficialOwnerInfo/BeneficialOwnerInfo';
@@ -49,6 +51,7 @@ function NonUSDVerifiedBankAccountFlow({
     };
 
     const nonUSDBankAccountsGoBack = () => {
+        clearErrors(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM);
         switch (nonUSDBankAccountStep) {
             case CONST.NON_USD_BANK_ACCOUNT.STEP.COUNTRY:
                 setNonUSDBankAccountStep(null);
@@ -69,6 +72,10 @@ function NonUSDVerifiedBankAccountFlow({
             case CONST.NON_USD_BANK_ACCOUNT.STEP.AGREEMENTS:
                 setNonUSDBankAccountStep(CONST.NON_USD_BANK_ACCOUNT.STEP.SIGNER_INFO);
                 break;
+            case CONST.NON_USD_BANK_ACCOUNT.STEP.FINISH:
+                setShouldShowContinueSetupButton(true);
+                setNonUSDBankAccountStep(null);
+                break;
             default:
                 return null;
         }
diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx b/src/pages/ReimbursementAccount/ReimbursementAccountPage.tsx
diff --git a/src/types/onyx/ReimbursementAccount.ts b/src/types/onyx/ReimbursementAccount.ts
