@adyen/kyc-components 4.6.1 → 4.7.0-beta.0

package/dist/PayoutDetailsPage-s-_gJFC2.js

@@ -0,0 +1,914 @@
+;
+{
+  try {
+    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "2de02629-f043-481c-8bb2-706fd4f21599", e._sentryDebugIdIdentifier = "sentry-dbid-2de02629-f043-481c-8bb2-706fd4f21599");
+  } catch (e) {
+  }
+}
+;
+import { u as useTranslation, H as useToggleContext, m as useSettingsContext, b5 as isAccountIdentifierObscured, b6 as hasEmptyFields, b7 as extractFieldName, b8 as concatenateFieldNames, b as useApiContext, x as useAnalyticsContext, a8 as getLegalEntityCountry, w as TaskTypes, an as cloneObject, am as datasetUtilities, P as useLegalEntity, a as addResourceBundles, U as Loader, R as ROOT_LE, E as EntityTypes, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-C4og8Y8I.js";
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useParams } from "wouter-preact";
+import { f as useNavigate } from "./OnboardingDropinComponent-CK5KIhNx.js";
+import { u as useCapabilityProblems, g as getProblemsForEntity } from "./getProblemsForEntity-Db-ejW4z.js";
+import { u as useInstantVerificationErrorNotification, g as getAccountIdentificationFromPayoutAccountSchema, a as useAsyncAccountDetailsValidationRules, s as showInstantVerificationPayoutModal, B as BankVerification, p as payoutSteps, M as MemoizedBankDocumentClassification, b as PayoutAccount, I as InstantVerificationErrorContext, c as PayoutVerificationMethod, d as PayoutCountryDetails, e as bankVerificationValidationRules, f as bankDocumentValidationRules, h as defaultFieldMetadata, i as defaultFieldConfig, j as defaultFieldMetadata$1, k as defaultFieldConfig$1, l as defaultFieldMetadata$2, m as defaultFieldConfig$2, n as defaultFieldMetadata$3, o as defaultFieldConfig$3, q as swiftCodeFieldMetadata, r as useUpdateTransferInstrument, t as useUpdateTrustedTransferInstrument, v as useCreateTrustedTransferInstrument, w as getPayoutVerificationMethod, x as getDefaultCurrencyForCountry, y as useBankVerificationProviders, z as getAccountFormatsForCountry, A as rules, C as mapPayoutAccountSchemaToApiBankAccount, D as useCheck, E as getAppropriatePayoutDetailsSteps, F as mapApiDocumentToPayoutDocuments, G as getInvalidFieldsErrorMessage, H as parseConfiguration, J as mapPayoutDetailsToTransferInstrument, K as createTransferInstrument, L as formatAccountVerificationSummary, N as mapPayoutDocumentsToApiDocuments, P as PayoutDetailsDropin } from "./PayoutDetailsDropin-CLdEm9BA.js";
+import { skipToken } from "@tanstack/preact-query";
+import { useState, useMemo, useEffect, useCallback } from "preact/hooks";
+import { u as useTransferInstrument, m as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-BM24JYqT.js";
+import { L as LoaderWrapper } from "./LoaderWrapper-CU0bf3jD.js";
+import { u as useFormContext, F as FormContextProvider, a as FormFlow } from "./useFormContext-TKoF8IdB.js";
+import { S as SettingNames } from "./types-Dv0COrvY.js";
+import { u as useToastContext } from "./useToastContext-BdsMS3mt.js";
+import { F as FeatureNames } from "./types-C7ANBXKc.js";
+import { g as getPropsFromConfigurations } from "./process-field-configurations-Cl2nqpBp.js";
+import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-vsDEK6cs.js";
+import { u as useMultiForm } from "./useMultiForm-ieaYM7hW.js";
+import { b as useScenarioConfiguration, c as useUnifyLoadingStatus } from "./mapExistingFile-BIYg1E5G.js";
+import { C as Confirm } from "./Confirm-BoQbVMKQ.js";
+import { c as currencyByCountry } from "./types-DsA42AXS.js";
+import { s as summaryStep } from "./Summary-DkZ_an9u.js";
+import { i as isValidationError, p as processValidationErrors, b as isIdDocumentUploadError, c as isBankStatementUploadError, a as isMaintenanceModeError, m as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable } from "./validationError-XxBa8ECY.js";
+import { t as trackNavigation } from "./trackNavigation-db_h46BT.js";
+import { h as fileValidationRules, f as defaultFileValidationOptions, d as documentApiUtils, b as getFileExtention } from "./validate-CFI052fe.js";
+import { b as getPayoutAccountHolderName, g as getLegalEntityNameBasedOnType } from "./getName-D3Sba-PI.js";
+import { o as omitObscuredFieldsIfUnchanged } from "./omitObscuredFieldsIfUnchanged-CyJfNYkP.js";
+import { Show } from "@preact/signals/utils";
+import { r as resolveFieldMetadata } from "./fieldConfigurations-BUT9DTUH.js";
+const PayoutCountryDetailsFormID = payoutSteps.payoutCountryDetails.formId;
+const PayoutVerificationMethodFormID = payoutSteps.payoutVerificationMethod.formId;
+const PayoutAccountDetailsFormID = payoutSteps.payoutAccountDetails.formId;
+const PayoutAccountDocumentsFormID = payoutSteps.payoutAccountDocuments.formId;
+const PayoutAccountVerificationFormID = payoutSteps.payoutAccountVerification.formId;
+function PayoutDetailsMultiform({
+  activeForm,
+  shouldValidate,
+  problems = {},
+  country,
+  accountHolder,
+  legalEntityResponse,
+  provider,
+  bankVendorsLoadingStatus,
+  instantVerificationAvailable,
+  setHideSidebar,
+  createTrustedTransferInstrument,
+  accountDetailsFromInput,
+  onBack,
+  setHasAsyncValidationError
+}) {
+  const { t } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
+  const { form } = useFormContext();
+  const { isFeatureEnabled } = useToggleContext();
+  const { isSettingEnabled } = useSettingsContext();
+  const isCrossBorderPayoutsEnabled = isFeatureEnabled(FeatureNames.EnableCrossBorderPayouts) && isSettingEnabled(SettingNames.AllowCrossBorderPayout);
+  const [instantVerificationError, setInstantVerificationError] = useInstantVerificationErrorNotification(1e4);
+  const bankCountry = (isCrossBorderPayoutsEnabled ? form.data?.payoutCountryDetails?.bankCountry : form.data?.payoutVerificationMethod?.bankCountry) ?? country;
+  const [bankInfoValidated, setBankInfoValidated] = useState(false);
+  const [arePayoutAccountDetailsInvalid, setArePayoutAccountDetailsInvalid] = useState(false);
+  const [invalidFieldNames, setInvalidFieldNames] = useState("");
+  const payload = useMemo(
+    () => bankCountry && accountDetailsFromInput ? getAccountIdentificationFromPayoutAccountSchema(
+      accountDetailsFromInput,
+      bankCountry,
+      isCrossBorderPayoutsEnabled
+    ) : {},
+    [accountDetailsFromInput, bankCountry, isCrossBorderPayoutsEnabled]
+  );
+  const validateAccountDetails = useAsyncAccountDetailsValidationRules(
+    payload,
+    hasEmptyFields(payload),
+    isAccountIdentifierObscured(payload)
+  );
+  const resetInvalidFieldState = () => {
+    setInvalidFieldNames("");
+    setArePayoutAccountDetailsInvalid(false);
+  };
+  useEffect(() => {
+    if (validateAccountDetails?.invalidFields && validateAccountDetails.invalidFields.length > 0) {
+      setHasAsyncValidationError?.(true);
+      const fieldNames = validateAccountDetails.invalidFields.map((field) => extractFieldName(field.name)).map((key) => commonT(($) => $[key]));
+      const invalidFieldsString = concatenateFieldNames(fieldNames);
+      setInvalidFieldNames(invalidFieldsString);
+      setArePayoutAccountDetailsInvalid(true);
+    } else {
+      setHasAsyncValidationError?.(false);
+      resetInvalidFieldState();
+    }
+  }, [commonT, validateAccountDetails, setHasAsyncValidationError]);
+  const renderActiveForm = (activeForm2) => {
+    switch (activeForm2.formId) {
+      case PayoutCountryDetailsFormID:
+        return /* @__PURE__ */ jsx(
+          PayoutCountryDetails,
+          {
+            id: activeForm2.formId,
+            legalEntityResponse,
+            provider,
+            shouldValidate,
+            fieldValidationErrors: problems.validationErrors?.[activeForm2.formId] ?? {},
+            formVerificationErrors: problems.verificationErrors?.[activeForm2.formId] ?? {},
+            data: form.data.payoutCountryDetails,
+            errors: form.errors.payoutCountryDetails,
+            valid: form.valid.payoutCountryDetails,
+            allFields: form.allFields?.payoutCountryDetails,
+            requiredFields: form.requiredFields?.payoutCountryDetails,
+            optionalFields: form.optionalFields?.payoutCountryDetails,
+            trustedFields: form.trustedFields?.payoutCountryDetails,
+            handleFieldChange: (fieldName, mode) => form.handleChangeFor(fieldName, "payoutCountryDetails", mode)
+          }
+        );
+      case PayoutVerificationMethodFormID:
+        return /* @__PURE__ */ jsx(InstantVerificationErrorContext.Provider, { value: instantVerificationError, children: /* @__PURE__ */ jsx(
+          PayoutVerificationMethod,
+          {
+            id: activeForm2.formId,
+            heading: t(($) => $["addABankAccountForPayouts"]),
+            country,
+            accountHolder,
+            legalEntityResponse,
+            provider,
+            bankVendorsLoadingStatus,
+            bankInfoValidated,
+            instantVerificationAvailable,
+            shouldValidate,
+            fieldValidationErrors: problems.validationErrors?.[activeForm2.formId] ?? {},
+            formVerificationErrors: problems.verificationErrors?.[activeForm2.formId] ?? {},
+            data: form.data.payoutVerificationMethod,
+            errors: form.errors.payoutVerificationMethod,
+            valid: form.valid.payoutVerificationMethod,
+            allFields: form.allFields?.payoutVerificationMethod,
+            requiredFields: form.requiredFields?.payoutVerificationMethod,
+            optionalFields: form.optionalFields?.payoutVerificationMethod,
+            trustedFields: form.trustedFields?.payoutVerificationMethod,
+            handleFieldChange: (fieldName, mode) => form.handleChangeFor(fieldName, "payoutVerificationMethod", mode)
+          }
+        ) });
+      case PayoutAccountDetailsFormID:
+        return /* @__PURE__ */ jsx(
+          PayoutAccount,
+          {
+            id: activeForm2.formId,
+            heading: t(($) => $["addABankAccountForPayouts"]),
+            country: bankCountry,
+            legalEntityResponse,
+            arePayoutAccountDetailsInvalid,
+            invalidFieldNames,
+            preferredCurrencyCode: form.data?.payoutCountryDetails?.preferredCurrency,
+            shouldValidate,
+            fieldValidationErrors: problems.validationErrors?.[activeForm2.formId] ?? {},
+            formVerificationErrors: problems.verificationErrors?.[activeForm2.formId] ?? {},
+            data: form.data.payoutAccountDetails,
+            errors: form.errors.payoutAccountDetails,
+            valid: form.valid.payoutAccountDetails,
+            allFields: form.allFields?.payoutAccountDetails,
+            requiredFields: form.requiredFields?.payoutAccountDetails,
+            optionalFields: form.optionalFields?.payoutAccountDetails,
+            trustedFields: form.trustedFields?.payoutAccountDetails,
+            obscuredFields: form.obscuredFields?.payoutAccountDetails,
+            handleFieldChange: (fieldName, mode) => form.handleChangeFor(fieldName, "payoutAccountDetails", mode)
+          }
+        );
+      case PayoutAccountDocumentsFormID:
+        return /* @__PURE__ */ jsx(
+          MemoizedBankDocumentClassification,
+          {
+            id: activeForm2.formId,
+            legalEntity: legalEntityResponse,
+            country: bankCountry,
+            formIsActive: activeForm2.formId === PayoutAccountDocumentsFormID,
+            shouldValidate,
+            fieldValidationErrors: problems.validationErrors?.[activeForm2.formId] ?? {},
+            formVerificationErrors: problems.verificationErrors?.[activeForm2.formId] ?? {},
+            data: form.data.payoutAccountDocuments,
+            errors: form.errors.payoutAccountDocuments,
+            valid: form.valid.payoutAccountDocuments,
+            allFields: form.allFields?.payoutAccountDocuments,
+            requiredFields: form.requiredFields?.payoutAccountDocuments,
+            optionalFields: form.optionalFields?.payoutAccountDocuments,
+            trustedFields: form.trustedFields?.payoutAccountDocuments,
+            handleFieldChange: (fieldName, mode) => form.handleChangeFor(fieldName, "payoutAccountDocuments", mode)
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-payout", children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-wrapper", children: renderActiveForm(activeForm) }),
+    /* @__PURE__ */ jsx(Show, { when: showInstantVerificationPayoutModal, children: /* @__PURE__ */ jsx(
+      BankVerification,
+      {
+        id: PayoutAccountVerificationFormID,
+        heading: t(($) => $["bankAccountVerification"]),
+        provider,
+        country: bankCountry,
+        onBack,
+        hideSidebar: setHideSidebar,
+        setBankVerificationError: setInstantVerificationError,
+        bankInfoValidated,
+        setBankInfoValidated,
+        formIsActive: activeForm.formId === PayoutVerificationMethodFormID,
+        createTrustedTransferInstrument,
+        shouldValidate,
+        fieldValidationErrors: problems.validationErrors?.[PayoutAccountVerificationFormID] ?? {},
+        formVerificationErrors: problems.verificationErrors?.[PayoutAccountVerificationFormID] ?? {},
+        data: form.data.payoutAccountVerification,
+        errors: form.errors.payoutAccountVerification,
+        valid: form.valid.payoutAccountVerification,
+        allFields: form.allFields?.payoutAccountVerification,
+        requiredFields: form.requiredFields?.payoutAccountVerification,
+        optionalFields: form.optionalFields?.payoutAccountVerification,
+        trustedFields: form.trustedFields?.payoutAccountVerification,
+        handleFieldChange: (fieldName, mode) => form.handleChangeFor(fieldName, "payoutAccountVerification", mode)
+      }
+    ) })
+  ] });
+}
+function payoutCountryDetailsValidators() {
+  return {};
+}
+function payoutVerificationMethodValidators() {
+  return {
+    payoutVerificationMethod: {
+      modes: ["blur"],
+      validate: (payoutVerificationMethod) => !!payoutVerificationMethod
+    }
+  };
+}
+function payoutAccountDetailsValidators({
+  country
+}) {
+  const branchCodeMetadata = resolveFieldMetadata(
+    defaultFieldConfig[country],
+    {},
+    defaultFieldMetadata
+  );
+  const bankAccountNumberMetadata = resolveFieldMetadata(
+    defaultFieldConfig$1[country],
+    {},
+    defaultFieldMetadata$1
+  );
+  const ibanMetadata = resolveFieldMetadata(defaultFieldConfig$2[country], {}, defaultFieldMetadata$2);
+  const bankCodeMetadata = resolveFieldMetadata(
+    defaultFieldConfig$3[country],
+    {},
+    defaultFieldMetadata$3
+  );
+  return {
+    branchCode: branchCodeMetadata.validators,
+    bankAccountNumber: bankAccountNumberMetadata.validators,
+    iban: ibanMetadata.validators,
+    swiftCode: swiftCodeFieldMetadata.validators,
+    bankCode: bankCodeMetadata.validators
+  };
+}
+function payoutAccountDocumentsValidators() {
+  return {
+    ...bankDocumentValidationRules,
+    bankStatementDocument: fileValidationRules(defaultFileValidationOptions)
+  };
+}
+function payoutAccountVerificationValidators() {
+  return bankVerificationValidationRules;
+}
+function PayoutDetailsDropinMultiForm({
+  legalEntityResponse,
+  problems: propProblems,
+  onSubmit: externalOnSubmit,
+  asModal = false,
+  handleCloseClick,
+  taskType: propTaskType,
+  handleHomeClick,
+  currentTransferInstrumentId,
+  navigateBackToTaskList,
+  handleBackClick: externalBackClick,
+  openBankingPartnerConfigId
+}) {
+  const { baseUrl, rootLegalEntityId } = useApiContext();
+  const {
+    data: transferInstrument,
+    refetch: refetchTransferInstrument,
+    isLoading: isTransferInstrumentLoading
+  } = useTransferInstrument(currentTransferInstrumentId ?? skipToken);
+  const { mutateAsync: handleUpdateTransferInstrument } = useUpdateTransferInstrument();
+  const { mutateAsync: handleUpdateTrustedTransferInstrument } = useUpdateTrustedTransferInstrument();
+  const {
+    mutateAsync: handleCreateTrustedTransferInstrument,
+    status: createTrustedTransferInstrumentStatus
+  } = useCreateTrustedTransferInstrument();
+  const [previousTrustedInstrumentStatus, setPreviousTrustedInstrumentStatus] = useState(
+    createTrustedTransferInstrumentStatus
+  );
+  const { t, i18n: i18next } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const { showToast, clearToasts } = useToastContext();
+  const { isFeatureEnabled } = useToggleContext();
+  const { isSettingEnabled } = useSettingsContext();
+  const enabledCrossBorderPayouts = isFeatureEnabled(FeatureNames.EnableCrossBorderPayouts) && isSettingEnabled(SettingNames.AllowCrossBorderPayout);
+  const defaultPayoutCountry = getLegalEntityCountry(legalEntityResponse);
+  const existingPayoutDetails = useMemo(
+    () => transferInstrument ? mapTransferInstrumentToPayoutAccount(transferInstrument, enabledCrossBorderPayouts) : void 0,
+    [transferInstrument, enabledCrossBorderPayouts]
+  );
+  const [documents, setDocuments] = useState();
+  const [isCaasCalled, setIsCaasCalled] = useState(false);
+  const accountHolder = getPayoutAccountHolderName(legalEntityResponse, t);
+  const fallbackCurrency = currencyByCountry[defaultPayoutCountry]?.[0];
+  const accountHolderName = accountHolder || getLegalEntityNameBasedOnType(legalEntityResponse);
+  const instantVerificationEnabled = Boolean(
+    !isTransferInstrumentLoading && !transferInstrument && isSettingEnabled("instantBankVerification")
+  );
+  const taskType = propTaskType ?? TaskTypes.PAYOUT;
+  const [trustedTransferInstrumentId, setTrustedTransferInstrumentId] = useState();
+  const prefilledData = useMemo(
+    () => ({
+      payoutCountryDetails: {
+        bankCountry: existingPayoutDetails?.payoutCountryDetails?.bankCountry ?? defaultPayoutCountry,
+        preferredCurrency: existingPayoutDetails?.payoutCountryDetails?.preferredCurrency ?? getDefaultCurrencyForCountry(defaultPayoutCountry)
+      },
+      payoutAccountDetails: {
+        accountHolder: accountHolderName,
+        currency: fallbackCurrency,
+        ...existingPayoutDetails?.payoutAccountDetails
+      },
+      payoutVerificationMethod: {
+        payoutVerificationMethod: getPayoutVerificationMethod(
+          transferInstrument,
+          instantVerificationEnabled
+        ),
+        bankCountry: defaultPayoutCountry,
+        ...existingPayoutDetails?.payoutVerificationMethod
+      },
+      payoutAccountVerification: {
+        verifiedAccountHolder: accountHolderName,
+        verifiedBankCountry: defaultPayoutCountry,
+        ...existingPayoutDetails?.payoutAccountVerification
+      }
+    }),
+    [
+      existingPayoutDetails,
+      defaultPayoutCountry,
+      accountHolderName,
+      fallbackCurrency,
+      instantVerificationEnabled,
+      transferInstrument
+    ]
+  );
+  const documentUtils = documentApiUtils({
+    baseUrl: baseUrl.value,
+    rootLegalEntityId: rootLegalEntityId.value
+  });
+  const [skipSubmit, setSkipSubmit] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState("loading");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [configurationLoadingStatus, setConfigurationLoadingStatus] = useState("loading");
+  const [accountDetailsFromInput, setAccountDetailsFromInput] = useState(
+    prefilledData.payoutAccountDetails
+  );
+  const [derivedProps, setDerivedProps] = useState();
+  const [initialBankAccountCountry] = useState(defaultPayoutCountry);
+  const [problems, setProblems] = useState(propProblems);
+  const [hasAsyncValidationError, setHasAsyncValidationError] = useState(false);
+  const buildFieldValidations = useCallback(
+    (data) => {
+      const country = (enabledCrossBorderPayouts ? data?.payoutCountryDetails?.bankCountry : data?.payoutVerificationMethod?.bankCountry) ?? defaultPayoutCountry;
+      return {
+        payoutCountryDetails: payoutCountryDetailsValidators(),
+        payoutVerificationMethod: payoutVerificationMethodValidators(),
+        payoutAccountDetails: payoutAccountDetailsValidators({ country }),
+        payoutAccountDocuments: payoutAccountDocumentsValidators(),
+        payoutAccountVerification: payoutAccountVerificationValidators()
+      };
+    },
+    [enabledCrossBorderPayouts, defaultPayoutCountry]
+  );
+  const defaultData = useMemo(() => {
+    return {
+      ...prefilledData,
+      payoutAccountDocuments: documents
+    };
+  }, [prefilledData, documents]);
+  const multiForm = useMultiForm({
+    defaultData,
+    allFields: derivedProps?.allFields,
+    requiredFields: derivedProps?.requiredFields,
+    optionalFields: derivedProps?.optionalFields,
+    obscuredFields: derivedProps?.obscuredFields,
+    trustedFields: derivedProps?.trustedFields,
+    rules: buildFieldValidations
+  });
+  const bankAccountCountry = (enabledCrossBorderPayouts ? multiForm.data?.payoutCountryDetails?.bankCountry : multiForm.data?.payoutVerificationMethod?.bankCountry) ?? initialBankAccountCountry;
+  const isMaskedBankAccountNumber = multiForm.data.payoutAccountDetails?.bankAccountNumber?.includes("*") || multiForm.data.payoutAccountDetails?.iban?.includes("*");
+  const existingBankAccountFormat = transferInstrument ? transferInstrument?.bankAccount?.accountIdentification?.type === "numberAndBic" ? "numberAndBic" : existingPayoutDetails?.payoutAccountDetails?.iban ? "iban" : "local" : void 0;
+  useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
+    userEvents.addTaskEvent("Landed on page", {
+      actionType: "start"
+    });
+  }, []);
+  const {
+    data: providers,
+    refetch: refetchBankVerificationProviders,
+    status: bankVendorsLoadingStatus
+  } = useBankVerificationProviders(
+    {
+      country: bankAccountCountry,
+      configId: openBankingPartnerConfigId,
+      locale: i18next.language
+    },
+    {
+      enabled: instantVerificationEnabled
+    }
+  );
+  const instantVerificationAvailable = useMemo(
+    () => Boolean(instantVerificationEnabled && providers?.[0]?.redirectUrl),
+    [instantVerificationEnabled, providers]
+  );
+  const getPayoutAccountFormatData = useCallback(
+    async () => getAccountFormatsForCountry(bankAccountCountry),
+    [bankAccountCountry]
+  );
+  const { fieldConfigurations, requiredFields } = useScenarioConfiguration({
+    parseConfiguration,
+    legalEntityType: legalEntityResponse.type,
+    getPayoutAccountFormatData,
+    instantVerificationAvailable,
+    setLoadingStatus: setConfigurationLoadingStatus,
+    country: bankAccountCountry,
+    existingBankAccountFormat
+  });
+  const fieldsFromCustomRules = useMemo(
+    () => rules({
+      data: multiForm.data,
+      requiredFields,
+      isFeatureEnabled
+    }),
+    [multiForm.data, bankAccountCountry, taskType, requiredFields, isFeatureEnabled]
+  );
+  const apiBankAccount = useMemo(() => {
+    const payoutAccountDetails = multiForm.data.payoutAccountDetails ?? { bankAccountNumber: "" };
+    return mapPayoutAccountSchemaToApiBankAccount(payoutAccountDetails, bankAccountCountry);
+  }, [multiForm.data, bankAccountCountry]);
+  const {
+    data: checkAsAServiceData,
+    refetch: refetchCheckAsAService,
+    isLoading: isCheckAsAServiceLoading,
+    isError: isCheckAsAServiceError
+  } = useCheck(apiBankAccount.accountIdentification, {
+    enabled: false
+  });
+  const checkAsAServiceResultStatus = checkAsAServiceData?.status;
+  const checkAsAServiceResultErrors = checkAsAServiceData?.errors;
+  const provider = providers?.[0];
+  const isInstantVerificationFlow = multiForm.data.payoutVerificationMethod?.payoutVerificationMethod === "instantVerification";
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const payoutDetailsSteps = useMemo(() => {
+    const appropriatePayoutDetailsSteps = getAppropriatePayoutDetailsSteps(
+      Boolean(prefilledData?.payoutAccountDetails?.transferInstrumentId),
+      instantVerificationAvailable,
+      isSettingEnabled(SettingNames.AllowIntraRegionCrossBorderPayout),
+      enabledCrossBorderPayouts
+    );
+    if (!isCheckAsAServiceError && checkAsAServiceResultStatus === "VALID" && !isMaskedBankAccountNumber) {
+      delete appropriatePayoutDetailsSteps[payoutSteps.payoutAccountDocuments.formId];
+    }
+    return appropriatePayoutDetailsSteps;
+  }, [providers, checkAsAServiceResultStatus, isCheckAsAServiceError, isMaskedBankAccountNumber]);
+  useEffect(() => {
+    const props = getPropsFromConfigurations({
+      scenarioConfiguration: fieldConfigurations,
+      forms: payoutDetailsSteps,
+      remediationActions: problems?.remediationActions ? Object.values(problems?.remediationActions) : [],
+      dataMissingErrors: problems?.missingData ?? [],
+      fieldsWithExistingData: [],
+      customRules: fieldsFromCustomRules,
+      legalEntityType: legalEntityResponse.type
+    });
+    setDerivedProps(props);
+  }, [
+    fieldConfigurations,
+    payoutDetailsSteps,
+    problems?.remediationActions,
+    problems?.missingData,
+    fieldsFromCustomRules,
+    legalEntityResponse.type
+  ]);
+  useUnifyLoadingStatus(
+    setLoadingStatus,
+    configurationLoadingStatus,
+    // bank vendor loading status only matters when we fetch bank vendors
+    instantVerificationEnabled ? bankVendorsLoadingStatus : "success",
+    isSubmitting ? "loading" : "success"
+  );
+  const forms = useMemo(() => {
+    const requiredForms = getRequiredForms(
+      payoutDetailsSteps,
+      derivedProps?.requiredFields,
+      derivedProps?.optionalFields
+    );
+    const adjustedFormValidity = hasAsyncValidationError ? { ...multiForm.isValid, payoutAccountDetails: false } : multiForm.isValid;
+    return addValidityToForms(requiredForms, adjustedFormValidity, problems);
+  }, [derivedProps, hasAsyncValidationError, multiForm.isValid, problems, payoutDetailsSteps]);
+  useEffect(() => {
+    if (!transferInstrument?.documentDetails?.length) return;
+    if (transferInstrument.id) {
+      documentUtils.fetchDocuments(transferInstrument.documentDetails, transferInstrument.id).then(() => {
+        const documents2 = mapApiDocumentToPayoutDocuments(transferInstrument.id);
+        setDocuments(documents2);
+        multiForm.handleChangeFor(
+          "bankStatementDocument",
+          "payoutAccountDocuments"
+        )(documents2.bankStatementDocument);
+        multiForm.handleChangeFor("description", "payoutAccountDocuments")(documents2.description);
+      }).catch(() => {
+        showToast({
+          label: commonT(($) => $["failedToFetchRelevantDocuments"]),
+          variant: "error"
+        });
+      });
+    }
+  }, [transferInstrument?.documentDetails]);
+  const submitDocuments = async ({
+    forms: forms2,
+    transferInstrument: transferInstrument2,
+    dataSubmitted
+  }) => {
+    const isBankDocumentFormPresent = forms2.some(
+      (form) => form.formId === payoutSteps.payoutAccountDocuments.formId
+    );
+    if (isBankDocumentFormPresent) {
+      const documentToUpload = await mapPayoutDocumentsToApiDocuments(
+        dataSubmitted,
+        transferInstrument2.id
+      );
+      if (documentToUpload) {
+        try {
+          const documents2 = await documentUtils.uploadDocuments(
+            [documentToUpload],
+            transferInstrument2.id
+          );
+          documents2.forEach((document) => {
+            userEvents.addTaskEvent("Success", {
+              actionType: "upload",
+              documentType: dataSubmitted.payoutAccountDocuments?.documentType ?? document.type,
+              // tracks BankDocumentTypes
+              fileExtention: document.attachments?.map((item) => getFileExtention(item.pageName ?? "")).filter((item) => item !== void 0) ?? void 0
+            });
+          });
+        } catch {
+          setProblems({
+            ...problems,
+            validationErrors: {
+              payoutAccountDocuments: { bankStatementDocument: true }
+            }
+          });
+          throw new Error(commonT(($) => $["remediationMessage_1_704"]));
+        } finally {
+          if (currentTransferInstrumentId) {
+            await refetchTransferInstrument?.();
+          }
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    const payoutAccountData = cloneObject(multiForm.data)?.payoutAccountDetails;
+    if (payoutAccountData) setAccountDetailsFromInput(payoutAccountData);
+  }, [multiForm.data]);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    const dataSubmitted = cloneObject({ ...prefilledData, ...multiForm.data });
+    const { payoutAccountDetails, payoutVerificationMethod } = dataSubmitted;
+    const baseTracking = {
+      actionType: "submit",
+      documentType: "bankStatement",
+      bankCountry: payoutVerificationMethod?.bankCountry ?? defaultPayoutCountry,
+      bankCurrency: payoutAccountDetails?.currency ?? null
+    };
+    let transferInstrumentFromInput = mapPayoutDetailsToTransferInstrument({
+      data: dataSubmitted,
+      legalEntity: legalEntityResponse,
+      enabledCrossBorderPayouts
+    });
+    transferInstrumentFromInput = omitObscuredFieldsIfUnchanged(
+      ["bankAccount.accountIdentification.accountNumber", "bankAccount.accountIdentification.iban"],
+      transferInstrumentFromInput,
+      transferInstrument
+    );
+    try {
+      if (!transferInstrumentFromInput) return;
+      const response = await (transferInstrument ? handleUpdateTransferInstrument({
+        transferInstrument: transferInstrumentFromInput,
+        transferInstrumentId: transferInstrument.id
+      }) : createTransferInstrument(
+        rootLegalEntityId.value,
+        baseUrl.value,
+        transferInstrumentFromInput
+      ));
+      userEvents.addTaskEvent("Success", {
+        ...baseTracking
+      });
+      try {
+        await submitDocuments({ forms, transferInstrument: response, dataSubmitted });
+        clearToasts();
+        externalOnSubmit?.({ ...dataSubmitted, id: response?.id });
+      } catch (e) {
+        showToast({ label: e.message, variant: "error" });
+        userEvents.addTaskEvent("Encountered error", {
+          ...baseTracking,
+          returnType: e?.errorCode || "backend",
+          returnValue: e?.title || e?.message
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    } catch (e) {
+      if (isValidationError(e)) {
+        const validationErrors = processValidationErrors(e, taskType);
+        setProblems({ ...problems, validationErrors });
+      } else if (isIdDocumentUploadError(e)) {
+        showToast({ label: t(($) => $["idDocumentAlreadyUploaded"]), variant: "error" });
+      } else if (isBankStatementUploadError(e)) {
+        showToast({ label: t(($) => $["bankStatementAlreadyUploaded"]), variant: "error" });
+      } else if (isMaintenanceModeError(e)) {
+        showToast({
+          label: commonT(($) => $["maintenanceModeMessage"]),
+          variant: "error",
+          duration: "indefinite"
+        });
+      } else {
+        const errorTranslatable = mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable(e);
+        showToast({ label: commonT(($) => $[errorTranslatable]), variant: "error" });
+      }
+      setIsSubmitting(false);
+      userEvents.addTaskEvent("Encountered error", {
+        ...baseTracking,
+        returnType: e?.errorCode || "backend",
+        returnValue: e?.title || e?.message
+      });
+    }
+  };
+  const formatFileSummaryData = (bankDocuments) => {
+    const bankStatementDocument = bankDocuments?.bankStatementDocument?.[0];
+    return {
+      documentType: bankDocuments?.documentType && commonT(($) => $[bankDocuments?.documentType]),
+      fileName: bankStatementDocument?.name,
+      description: bankDocuments?.description
+    };
+  };
+  const datasetUtils = datasetUtilities(i18next.language);
+  const formatDataForSummary = () => {
+    const summaryData = cloneObject(multiForm.data);
+    if (summaryData.payoutAccountDetails) {
+      summaryData.payoutAccountDetails.accountHolder = accountHolderName;
+    }
+    if (summaryData.payoutVerificationMethod?.bankCountry && summaryData.payoutAccountDetails) {
+      summaryData.payoutAccountDetails.bankCountry = datasetUtils.getCountryName(
+        summaryData.payoutVerificationMethod.bankCountry
+      );
+    }
+    if (summaryData.payoutAccountDocuments) {
+      summaryData.payoutAccountDocuments = formatFileSummaryData(
+        multiForm.data?.payoutAccountDocuments
+      );
+    }
+    summaryData.payoutAccountVerification = formatAccountVerificationSummary(
+      multiForm.data.payoutAccountVerification
+    );
+    return summaryData;
+  };
+  const createTrustedTransferInstrumentHandler = async (code, state) => {
+    try {
+      const trustedTransferInstrument = await handleCreateTrustedTransferInstrument({
+        code,
+        state
+      });
+      if (trustedTransferInstrument) {
+        setTrustedTransferInstrumentId(trustedTransferInstrument.verificationReference);
+        return trustedTransferInstrument;
+      }
+    } catch (e) {
+      refetchBankVerificationProviders();
+      const errorTranslatable = mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable(e);
+      if (errorTranslatable === "transferInstrumentLimitHasAlreadyBeenMet") {
+        showToast({ label: commonT(($) => $[errorTranslatable]), variant: "error" });
+      }
+      throw e;
+    }
+  };
+  const {
+    handleNextClick,
+    handleBackClick,
+    activeForm,
+    shouldValidate,
+    gotoFormByFormIndex,
+    gotoFormByFormId,
+    steps
+  } = useFormComposer({
+    problems,
+    forms,
+    externalBackClick,
+    triggerValidation: async (formName) => {
+      if (!multiForm.requiredFields?.[formName]) {
+        return true;
+      }
+      return multiForm.triggerValidation(formName);
+    },
+    onSubmit: skipSubmit ? async () => {
+      if (enabledCrossBorderPayouts && trustedTransferInstrumentId && multiForm.data.payoutCountryDetails?.preferredCurrency) {
+        try {
+          await handleUpdateTrustedTransferInstrument({
+            transferInstrumentId: trustedTransferInstrumentId,
+            preferredCurrencyCode: multiForm.data.payoutCountryDetails?.preferredCurrency
+          });
+        } catch {
+          showToast({ label: commonT(($) => $["failedToUpdateDetails"]), variant: "error" });
+        }
+      }
+      if (trustedTransferInstrumentId) {
+        externalOnSubmit?.({ ...multiForm.data, id: trustedTransferInstrumentId });
+      }
+      userEvents.addTaskEvent("Success", {
+        actionType: "submit"
+      });
+      navigateBackToTaskList?.();
+    } : onSubmit
+  });
+  useEffect(() => {
+    if (activeForm?.formId === summaryStep.formId && isInstantVerificationFlow && trustedTransferInstrumentId) {
+      setSkipSubmit?.(true);
+    }
+  }, [activeForm?.formId, trustedTransferInstrumentId, isInstantVerificationFlow, setSkipSubmit]);
+  useEffect(() => {
+    if (!isCaasCalled || !forms) return;
+    setIsCaasCalled(false);
+    if (checkAsAServiceResultStatus !== "VALID" && checkAsAServiceResultStatus !== "INCOMPLETE_INPUT") {
+      const formIndex = forms.findIndex((f) => f.formId === "payoutAccountDocuments");
+      if (formIndex > -1) {
+        gotoFormByFormIndex(formIndex);
+      }
+    }
+    if (checkAsAServiceResultStatus === "VALID") {
+      handleNextClick();
+    }
+  }, [forms, checkAsAServiceResultStatus, isCaasCalled]);
+  const handleFormNextClick = async () => {
+    if (activeForm.formId === "payoutVerificationMethod") {
+      if (isInstantVerificationFlow) {
+        trackNavigation({
+          userEvents,
+          actionType: "next",
+          label: "instantVerification",
+          toForm: "instantVerification"
+        });
+        showInstantVerificationPayoutModal.value = true;
+        return;
+      } else {
+        handleNextClick();
+        return;
+      }
+    }
+    if (activeForm.formId === "payoutAccountDetails" && activeForm.isValid && multiForm.data.payoutAccountDetails && !isMaskedBankAccountNumber) {
+      try {
+        const { data: response } = await refetchCheckAsAService();
+        setIsCaasCalled(true);
+        if (response?.status === "INCOMPLETE_INPUT") {
+          setIsModalOpen(true);
+        }
+      } catch {
+        handleNextClick();
+      }
+    } else {
+      handleNextClick();
+    }
+  };
+  if (previousTrustedInstrumentStatus !== createTrustedTransferInstrumentStatus) {
+    if (activeForm.formId === "payoutAccountVerification" && activeForm.isValid && createTrustedTransferInstrumentStatus === "success" && multiForm.data.payoutAccountVerification?.verifiedBankAccountNumber) {
+      handleNextClick();
+      setPreviousTrustedInstrumentStatus(createTrustedTransferInstrumentStatus);
+    }
+    if (activeForm.formId === "payoutVerificationMethod" && createTrustedTransferInstrumentStatus === "success") {
+      gotoFormByFormIndex(forms.length - 1);
+      setPreviousTrustedInstrumentStatus(createTrustedTransferInstrumentStatus);
+    }
+  }
+  const omittedForms = multiForm.data?.payoutVerificationMethod?.payoutVerificationMethod === "instantVerification" ? [] : [payoutSteps.payoutVerificationMethod.formId];
+  const { header: invalidFieldHeader, content: invalidFieldContent } = getInvalidFieldsErrorMessage(
+    checkAsAServiceResultErrors ?? []
+  );
+  return /* @__PURE__ */ jsxs(
+    LoaderWrapper,
+    {
+      showSpinner: true,
+      status: isCheckAsAServiceLoading || isModalOpen || createTrustedTransferInstrumentStatus === "pending" ? "loading" : "success",
+      formOpacityWhenLoading: 0.3,
+      children: [
+        isModalOpen && /* @__PURE__ */ jsx(
+          Confirm,
+          {
+            title: t(($) => $[invalidFieldHeader]),
+            description: t(($) => $[invalidFieldContent]),
+            cancelText: commonT(($) => $["editDetails"]),
+            confirmText: t(($) => $["continueAnyway"]),
+            onConfirm: () => {
+              handleNextClick();
+              setIsModalOpen(false);
+            },
+            onCancel: () => {
+              gotoFormByFormIndex(0);
+              setIsModalOpen(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(FormContextProvider, { form: multiForm, children: /* @__PURE__ */ jsx(
+          FormFlow,
+          {
+            summary: {
+              data: formatDataForSummary(),
+              omitted: {
+                keys: ["transferInstrumentId", "payoutVerificationMethod"],
+                forms: omittedForms,
+                summaryEditButton: ["payoutVerificationMethod", "payoutAccountVerification"]
+              },
+              problems
+            },
+            asModal,
+            currentStep: steps.current,
+            totalSteps: steps.total,
+            forms,
+            activeForm,
+            gotoFormByFormIndex,
+            gotoFormByFormId,
+            handleNextClick: handleFormNextClick,
+            handleBackClick: activeForm.formId !== "summary" ? handleBackClick : void 0,
+            handleCancelClick: handleCloseClick || handleHomeClick,
+            loadingStatus: isTransferInstrumentLoading ? "loading" : loadingStatus,
+            children: (!isTransferInstrumentLoading || isSubmitting) && /* @__PURE__ */ jsx(
+              PayoutDetailsMultiform,
+              {
+                activeForm,
+                shouldValidate,
+                problems,
+                country: defaultPayoutCountry,
+                accountHolder: accountHolder ?? getLegalEntityNameBasedOnType(legalEntityResponse),
+                legalEntityResponse,
+                provider,
+                bankVendorsLoadingStatus,
+                instantVerificationAvailable,
+                createTrustedTransferInstrument: createTrustedTransferInstrumentHandler,
+                accountDetailsFromInput,
+                trustedTransferInstrumentId,
+                onBack: handleBackClick,
+                setHasAsyncValidationError
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+function PayoutDetailsPage({
+  transferInstrumentId: transferInstrumentIdProp,
+  setTransferInstrumentId: setTransferInstrumentIdProp,
+  taskType,
+  openBankingPartnerConfigId,
+  onSubmit,
+  handleHomeClick
+}) {
+  const routeParams = useParams();
+  const navigate = useNavigate();
+  const transferInstrumentId = transferInstrumentIdProp ?? routeParams.transferInstrumentId;
+  const setTransferInstrumentId = setTransferInstrumentIdProp ?? ((id) => navigate.replace(taskType, { transferInstrumentId: id }));
+  const { isFeatureEnabled } = useToggleContext();
+  const { i18n } = useTranslation();
+  const { data: rootLe } = useLegalEntity(ROOT_LE);
+  const capabilityProblems = useCapabilityProblems();
+  addResourceBundles(i18n, [
+    { ns: "banking", importFn: (lang) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/bg-BG.json": () => import("./bg-BG-BnwkqGm9.js"), "../language/cs-CZ.json": () => import("./cs-CZ-BeMYkFfD.js"), "../language/da-DK.json": () => import("./da-DK-mUuPR2YO.js"), "../language/de-DE.json": () => import("./de-DE-CwT6O212.js"), "../language/el-GR.json": () => import("./el-GR-BuAfpG6u.js"), "../language/en-US.json": () => import("./en-US-DrUYyPhF.js"), "../language/es-ES.json": () => import("./es-ES-Bh8k9Zx8.js"), "../language/et-EE.json": () => import("./et-EE-BBnYC5q8.js"), "../language/fi-FI.json": () => import("./fi-FI-DhUeTfn1.js"), "../language/fr-FR.json": () => import("./fr-FR-CocDMzBc.js"), "../language/hr-HR.json": () => import("./hr-HR-D9OGeEuB.js"), "../language/hu-HU.json": () => import("./hu-HU-DjaoFDqm.js"), "../language/it-IT.json": () => import("./it-IT-B4bk2Xev.js"), "../language/ja-JP.json": () => import("./ja-JP-DK55NCZY.js"), "../language/lt-LT.json": () => import("./lt-LT-CfQUS8PP.js"), "../language/lv-LV.json": () => import("./lv-LV-DoKxsoVR.js"), "../language/nl-NL.json": () => import("./nl-NL-J7XpCpQm.js"), "../language/no-NO.json": () => import("./no-NO-CtDyNTm6.js"), "../language/pl-PL.json": () => import("./pl-PL-CCX1rSGF.js"), "../language/pt-BR.json": () => import("./pt-BR-D4BTdo_w.js"), "../language/pt-PT.json": () => import("./pt-PT-DBZj2dDI.js"), "../language/ro-RO.json": () => import("./ro-RO-DaU2--fX.js"), "../language/sk-SK.json": () => import("./sk-SK-B-1yRol7.js"), "../language/sl-SI.json": () => import("./sl-SI-C_4ajjU4.js"), "../language/sv-SE.json": () => import("./sv-SE-DKnUr7xo.js") }), `../language/${lang}.json`, 3) }
+  ]);
+  if (!rootLe) {
+    return /* @__PURE__ */ jsx(Loader, {});
+  }
+  const problems = capabilityProblems && transferInstrumentId ? getProblemsForEntity(capabilityProblems, EntityTypes.BANK_ACCOUNT, transferInstrumentId) : void 0;
+  const PayoutPageDetailsDropin = isFeatureEnabled("EnablePayoutDetailsMultiForm") ? PayoutDetailsDropinMultiForm : PayoutDetailsDropin;
+  return /* @__PURE__ */ jsx(
+    PayoutPageDetailsDropin,
+    {
+      taskType,
+      currentTransferInstrumentId: transferInstrumentId,
+      setCurrentTransferInstrumentId: setTransferInstrumentId,
+      legalEntityResponse: rootLe,
+      problems,
+      onSubmit,
+      handleHomeClick,
+      navigateBackToTaskList: handleHomeClick,
+      openBankingPartnerConfigId
+    }
+  );
+}
+export {
+  PayoutDetailsPage
+};