@adyen/kyc-components 3.71.3 → 3.73.0-beta.0

package/dist/CreateTransferInstrumentComponent-CaBD_3yr.js

@@ -0,0 +1,1082 @@
+;
+{
+  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] = "55f7835b-f348-47c9-ab50-0835dca63db9", e._sentryDebugIdIdentifier = "sentry-dbid-55f7835b-f348-47c9-ab50-0835dca63db9");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import { useState, useCallback, useMemo, useEffect } from "preact/hooks";
+import { b as useI18nContext, x as useAnalyticsContext, al as useExperimentsContext, aj as LoaderWrapper, aW as summaryStep, O as Button, aX as Summary, u as useApiContext, a as useQuery, U as httpPost, h as httpGet, V as useMutation, a6 as skipToken, bv as useQueryClient, bZ as createFormRules, c_ as mapPayoutAccountSchemaToApiBankAccount, c$ as payoutComponentKeyMapping, cI as keysOf, aU as summaryItem, aD as CountryCodes, d0 as payoutSteps, G as useSettingsContext, Q as getLegalEntityCountry, d1 as getPayoutAccountHolderName, g as currencyByCountry, aB as getLegalEntityNameBasedOnType, ah as TaskTypes, am as isInstantVerifiedAccount, D as useStateContext, Y as getCapabilityProblems, H as SettingNames, c as cloneObject, B as datasetUtilities, T as Typography, d2 as PayoutDetails, i as isEmpty, P as useLegalEntity, z as useAssociatedLegalEntity, L as LegalEntityType, M as Loader } from "./EventEmitter-BmWcyurq.js";
+import { b as ModalContent, a as ModalHeader, c as ModalFooter, M as Modal } from "./Modal-6j0jkYFX.js";
+import { M as MaybeModal, S as Spacer, u as useToastContext } from "./useToastContext-DiQ_PGrE.js";
+import { t as trackNavigation, F as FormRouterContextProvider, k as getDocument, m as mapExistingFile, l as getPageName, o as createDocumentRequest, x as mapWith, y as augmentWithCountryConfigs, q as documentApiUtils, u as useScenarioConfiguration, a as getPropsFromConfigurations, z as useUnifyLoadingStatus, b as getRequiredForms, c as addValidityToForms, d as useFormComposer, s as omitObscuredFieldsIfUnchanged, i as isValidationError, p as processValidationErrors, A as isIdDocumentUploadError, B as isBankStatementUploadError, h as isMaintenanceModeError, C as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable, w as getFileExtention } from "./mapExistingFile-CwT8TZ5D.js";
+import { F as FormNavigation, S as StepProgressIndicator } from "./FormNavigation-W4SYacAX.js";
+const FormWrapper = ({
+  asModal = false,
+  summary,
+  taskName,
+  children,
+  handleNextClick,
+  handleBackClick,
+  handleCloseClick,
+  handleHomeClick,
+  loadingStatus,
+  gotoFormByFormIndex,
+  forms,
+  activeForm,
+  validateForm,
+  navigationTrackingParams,
+  hideSidebar,
+  hideFooter,
+  canSubmit,
+  onSubmit,
+  problems,
+  steps,
+  showBackButton,
+  hideNextButton,
+  hideHomeButton
+}) => {
+  var _a;
+  const { i18n } = useI18nContext();
+  const userEvents = useAnalyticsContext();
+  const { data: summaryData, omitted, labels } = summary || {};
+  const [finishLaterLoading, setFinishLaterLoading] = useState(false);
+  const translationKeys = {
+    finishLater: "finishLater"
+  };
+  const showLegalCaption = ["solePropDetails", "companyDetails", "businessDetails"].includes(
+    taskName
+  );
+  const { isExperimentEnabled } = useExperimentsContext();
+  const showExtraTaxExemptionReasons = isExperimentEnabled("ShowExtraTaxExemptionReasons");
+  const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && ((_a = summaryData == null ? void 0 : summaryData.companyRegistrationDetails) == null ? void 0 : _a.vatAbsenceReason) && ["companyDetails", "businessDetails"].includes(taskName);
+  const handleTrackNavigation = useCallback(
+    (props) => {
+      trackNavigation({
+        ...props,
+        additionalTrackingParams: navigationTrackingParams
+      });
+    },
+    [navigationTrackingParams]
+  );
+  const summaryContent = /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-wrapper", children: /* @__PURE__ */ jsx(
+    Summary,
+    {
+      trackNavigation: handleTrackNavigation,
+      data: summaryData,
+      omitted,
+      forms,
+      gotoForm: gotoFormByFormIndex,
+      labels,
+      problems,
+      showLegalCaption,
+      showTaxExemptedLegalCaption
+    }
+  ) });
+  const onHomeClick = () => {
+    setFinishLaterLoading(true);
+    userEvents.addPageEvent("Clicked button", {
+      actionType: "save",
+      label: translationKeys.finishLater
+    });
+    if (canSubmit) {
+      onSubmit().then(() => {
+        setFinishLaterLoading(false);
+      });
+    } else {
+      handleHomeClick == null ? void 0 : handleHomeClick();
+      setFinishLaterLoading(false);
+    }
+  };
+  const isFirstStep = steps.current === 0;
+  const isFinalStep = steps.current === steps.total - 1;
+  return /* @__PURE__ */ jsxs(MaybeModal, { inline: !asModal, onClose: handleCloseClick, children: [
+    /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsx(ModalHeader, {}),
+      /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: 0.3, loaderSize: "large", children: /* @__PURE__ */ jsxs("div", { className: !hideSidebar ? "adyen-kyc-form-with-sidebar" : "", children: [
+        !asModal && !hideSidebar && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropin__sidebar-wrapper", children: /* @__PURE__ */ jsx(
+          FormNavigation,
+          {
+            forms,
+            activeForm,
+            gotoForm: gotoFormByFormIndex,
+            validateForm,
+            taskName,
+            trackNavigation: handleTrackNavigation,
+            verificationErrors: problems == null ? void 0 : problems.verificationErrors
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(FormRouterContextProvider, { setFormIndex: gotoFormByFormIndex, forms, children: [
+          children,
+          activeForm.formId === summaryStep.formId && summary && summaryContent
+        ] })
+      ] }) })
+    ] }),
+    !hideFooter && /* @__PURE__ */ jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsx("div", { style: { width: "30%", display: asModal ? "unset" : "none" }, children: /* @__PURE__ */ jsx(
+        StepProgressIndicator,
+        {
+          activeStepIndex: steps.current ?? 0,
+          stepsCount: steps.total,
+          fillBefore: true,
+          thick: true
+        }
+      ) }),
+      (!isFirstStep || showBackButton) && handleBackClick && /* @__PURE__ */ jsx(Button, { icon: "chevron-left", variant: "secondary", onClick: handleBackClick, children: i18n.get("back") }),
+      /* @__PURE__ */ jsx(Spacer, {}),
+      !isFirstStep && !isFinalStep && !hideHomeButton && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          icon: "save",
+          onClick: onHomeClick,
+          loading: finishLaterLoading,
+          children: i18n.get(translationKeys.finishLater)
+        }
+      ),
+      !isFinalStep && !hideNextButton && /* @__PURE__ */ jsx(Button, { onClick: handleNextClick, children: i18n.get("continue") }),
+      isFinalStep && /* @__PURE__ */ jsx(Button, { onClick: handleNextClick, children: i18n.get("submit") })
+    ] })
+  ] });
+};
+const getCheck = async (legalEntityId, baseUrl, data) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${legalEntityId}/checks/bankAccount`
+    },
+    data
+  );
+};
+const useCheck = (data, options) => {
+  const { rootLegalEntityId, baseUrl: url } = useApiContext();
+  return useQuery({
+    queryKey: ["checkAsAService", data],
+    queryFn: () => getCheck(rootLegalEntityId.value, url.value, data),
+    ...options
+  });
+};
+const getBankVerificationProviders = async (legalEntityId, baseUrl, queryParams) => {
+  const { country, locale, configId } = queryParams;
+  const providerParams = new URLSearchParams({
+    country,
+    locale,
+    ...configId && { configId }
+  });
+  return httpGet({
+    baseUrl,
+    path: `legalEntities/${legalEntityId}/transferInstruments/trusted/providers?${providerParams}`
+  });
+};
+const useBankVerificationProviders = (queryParams, options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useQuery({
+    queryKey: ["bankVerificationProviders", queryParams],
+    queryFn: () => getBankVerificationProviders(rootLegalEntityId.value, baseUrl.value, queryParams),
+    ...options
+  });
+};
+const createTransferInstrument = async (rootLegalEntityId, baseUrl, transferInstrument) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${rootLegalEntityId}/transferInstruments`
+    },
+    transferInstrument
+  );
+};
+const createTrustedTransferInstrument = async (legalEntityId, baseUrl, data) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${legalEntityId}/transferInstruments/trusted`
+    },
+    data
+  );
+};
+const useCreateTrustedTransferInstrument = (options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useMutation({
+    mutationFn: (data) => createTrustedTransferInstrument(rootLegalEntityId.value, baseUrl.value, data),
+    ...options
+  });
+};
+const getTransferInstrument = async (legalEntityId, baseUrl, transferInstrumentId) => {
+  return httpGet({
+    baseUrl,
+    path: `legalEntities/${legalEntityId}/transferInstruments/${transferInstrumentId}`
+  });
+};
+const useTransferInstrument = (transferInstrumentId, options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  return useQuery({
+    queryKey: transferInstrumentId === skipToken ? [] : ["transferInstrument", transferInstrumentId],
+    queryFn: transferInstrumentId === skipToken ? skipToken : () => getTransferInstrument(rootLegalEntityId.value, baseUrl.value, transferInstrumentId),
+    ...options
+  });
+};
+const updateTransferInstrument = async (legalEntityId, baseUrl, transferInstrument, transferInstrumentId) => {
+  return httpPost(
+    {
+      baseUrl,
+      path: `legalEntities/${legalEntityId}/transferInstruments/${transferInstrumentId}`
+    },
+    transferInstrument
+  );
+};
+const useUpdateTransferInstrument = (options) => {
+  const { rootLegalEntityId, baseUrl } = useApiContext();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ transferInstrument, transferInstrumentId }) => updateTransferInstrument(
+      rootLegalEntityId.value,
+      baseUrl.value,
+      transferInstrument,
+      transferInstrumentId
+    ),
+    onSuccess: async (transferInstrument) => {
+      queryClient.setQueryData(["transferInstrument", transferInstrument.id], transferInstrument);
+      await queryClient.invalidateQueries({
+        // Invalidate transfer instruments on root LE
+        queryKey: ["transferInstruments"]
+      });
+    },
+    ...options
+  });
+};
+const accountFormatsImports = /* @__PURE__ */ Object.assign({ "../accountFormats/AD.json": () => import("./AD-CyP5INSp.js"), "../accountFormats/AE.json": () => import("./AE-mIZ12t47.js"), "../accountFormats/AI.json": () => import("./AI-CYOqGKk2.js"), "../accountFormats/AL.json": () => import("./AL-BX1fEo1A.js"), "../accountFormats/AR.json": () => import("./AR-C9kMRnHG.js"), "../accountFormats/AS.json": () => import("./AS-B0TMZQ6o.js"), "../accountFormats/AT.json": () => import("./AT-DJLlevck.js"), "../accountFormats/AU.json": () => import("./AU-B5LSe4bo.js"), "../accountFormats/AX.json": () => import("./AX-Z6f6EnJc.js"), "../accountFormats/AZ.json": () => import("./AZ-BqrKjWMH.js"), "../accountFormats/BA.json": () => import("./BA-BbP72Tn6.js"), "../accountFormats/BE.json": () => import("./BE-B-m_4F41.js"), "../accountFormats/BG.json": () => import("./BG-BVR5ytc-.js"), "../accountFormats/BH.json": () => import("./BH-Ded1Eyrc.js"), "../accountFormats/BM.json": () => import("./BM-CBl-UQUl.js"), "../accountFormats/BR.json": () => import("./BR-DsY9PZVZ.js"), "../accountFormats/BS.json": () => import("./BS-dBfArxRw.js"), "../accountFormats/BV.json": () => import("./BV-D0QBsH7-.js"), "../accountFormats/BY.json": () => import("./BY-BsQUo3fM.js"), "../accountFormats/CA.json": () => import("./CA-DT4cmOOe.js"), "../accountFormats/CH.json": () => import("./CH-CesIKOYy.js"), "../accountFormats/CN.json": () => import("./CN-BV-5PSpq.js"), "../accountFormats/CR.json": () => import("./CR-Dtv-rXg9.js"), "../accountFormats/CY.json": () => import("./CY-BnJ7k_mN.js"), "../accountFormats/CZ.json": () => import("./CZ-BhoS6sd6.js"), "../accountFormats/DE.json": () => import("./DE-DdcbG-CC.js"), "../accountFormats/DK.json": () => import("./DK-DA8qRrzq.js"), "../accountFormats/DO.json": () => import("./DO-B1BWc3Iy.js"), "../accountFormats/EC.json": () => import("./EC-DbNXe71-.js"), "../accountFormats/EE.json": () => import("./EE-CaXoPgZz.js"), "../accountFormats/ES.json": () => import("./ES-Bt_oaIaf.js"), "../accountFormats/FI.json": () => import("./FI-C5V3lLuN.js"), "../accountFormats/FJ.json": () => import("./FJ-CBdbPf5l.js"), "../accountFormats/FO.json": () => import("./FO-1pD1p939.js"), "../accountFormats/FR.json": () => import("./FR-Bc1tLIC4.js"), "../accountFormats/GB.json": () => import("./GB-CCYHTagl.js"), "../accountFormats/GE.json": () => import("./GE-Deog1a3Z.js"), "../accountFormats/GF.json": () => import("./GF-Cda8N7A4.js"), "../accountFormats/GG.json": () => import("./GG-BGuqxplU.js"), "../accountFormats/GI.json": () => import("./GI-CROkpYrU.js"), "../accountFormats/GL.json": () => import("./GL-0vO9Of9c.js"), "../accountFormats/GP.json": () => import("./GP-za-3opp-.js"), "../accountFormats/GR.json": () => import("./GR-B9c2boG8.js"), "../accountFormats/GT.json": () => import("./GT-C1jhs-Dx.js"), "../accountFormats/GU.json": () => import("./GU-CALV5vh1.js"), "../accountFormats/HK.json": () => import("./HK-BB3PIq-Z.js"), "../accountFormats/HR.json": () => import("./HR-p4luVYpu.js"), "../accountFormats/HU.json": () => import("./HU-v3vOxRm8.js"), "../accountFormats/ID.json": () => import("./ID-BcOv4SXj.js"), "../accountFormats/IE.json": () => import("./IE-Cli_j7Al.js"), "../accountFormats/IL.json": () => import("./IL-CQ0yHRRe.js"), "../accountFormats/IM.json": () => import("./IM-mpIyBn16.js"), "../accountFormats/IN.json": () => import("./IN-BhEI9o7G.js"), "../accountFormats/IS.json": () => import("./IS-02zCAdvq.js"), "../accountFormats/IT.json": () => import("./IT-CzURFhrK.js"), "../accountFormats/JE.json": () => import("./JE-MFwIYti7.js"), "../accountFormats/JM.json": () => import("./JM-BMGgBK6y.js"), "../accountFormats/JO.json": () => import("./JO-rY8A8f9C.js"), "../accountFormats/JP.json": () => import("./JP-BQG5dF1Y.js"), "../accountFormats/KR.json": () => import("./KR-74SwXHka.js"), "../accountFormats/KW.json": () => import("./KW-CcVPOJ8B.js"), "../accountFormats/KY.json": () => import("./KY-DXCeltYA.js"), "../accountFormats/KZ.json": () => import("./KZ-CZNjdp22.js"), "../accountFormats/LB.json": () => import("./LB-DZ5YfAsO.js"), "../accountFormats/LI.json": () => import("./LI-DA06W10W.js"), "../accountFormats/LT.json": () => import("./LT-DuU6E2Ct.js"), "../accountFormats/LU.json": () => import("./LU-BQHhNpDy.js"), "../accountFormats/LV.json": () => import("./LV-DN7wckbP.js"), "../accountFormats/MC.json": () => import("./MC-DtSWC4jS.js"), "../accountFormats/MD.json": () => import("./MD-DVc0183a.js"), "../accountFormats/ME.json": () => import("./ME-DiJhSuli.js"), "../accountFormats/MK.json": () => import("./MK-BZxslBTS.js"), "../accountFormats/MP.json": () => import("./MP-7IpnbfCj.js"), "../accountFormats/MQ.json": () => import("./MQ-DusG_no1.js"), "../accountFormats/MR.json": () => import("./MR-DaBVNHqN.js"), "../accountFormats/MT.json": () => import("./MT-DeDMQ1f_.js"), "../accountFormats/MU.json": () => import("./MU-D3gGVu1R.js"), "../accountFormats/MX.json": () => import("./MX-CZVOFg3D.js"), "../accountFormats/MY.json": () => import("./MY-ym71svTa.js"), "../accountFormats/NC.json": () => import("./NC-xzMvjp9-.js"), "../accountFormats/NL.json": () => import("./NL-aVL0NAp-.js"), "../accountFormats/NO.json": () => import("./NO-D7EOiQA1.js"), "../accountFormats/NZ.json": () => import("./NZ-BP7_Q9Om.js"), "../accountFormats/PE.json": () => import("./PE-CdxgPh3v.js"), "../accountFormats/PF.json": () => import("./PF-CstaOd9Z.js"), "../accountFormats/PH.json": () => import("./PH-BYgMDYIH.js"), "../accountFormats/PK.json": () => import("./PK-bLhtgsEk.js"), "../accountFormats/PL.json": () => import("./PL-Bg7axKQA.js"), "../accountFormats/PM.json": () => import("./PM-BWbxAh4u.js"), "../accountFormats/PR.json": () => import("./PR-CFPKXEXp.js"), "../accountFormats/PS.json": () => import("./PS-B8obOOWY.js"), "../accountFormats/PT.json": () => import("./PT-hB1HnBM2.js"), "../accountFormats/QA.json": () => import("./QA-CSfx-mvb.js"), "../accountFormats/RE.json": () => import("./RE-BApq1FJ6.js"), "../accountFormats/RO.json": () => import("./RO-BLlC4CKq.js"), "../accountFormats/RS.json": () => import("./RS-BCenke-W.js"), "../accountFormats/RU.json": () => import("./RU-D27RC7dq.js"), "../accountFormats/SA.json": () => import("./SA-C9VgxCgm.js"), "../accountFormats/SE.json": () => import("./SE-q25Qt85B.js"), "../accountFormats/SG.json": () => import("./SG-DoCqjlFi.js"), "../accountFormats/SI.json": () => import("./SI-BzA-ozn6.js"), "../accountFormats/SJ.json": () => import("./SJ-Z9jwQQlz.js"), "../accountFormats/SK.json": () => import("./SK-DOTdLJPw.js"), "../accountFormats/SM.json": () => import("./SM-B4BIgmhk.js"), "../accountFormats/TF.json": () => import("./TF-BOWng-Dz.js"), "../accountFormats/TH.json": () => import("./TH-CvyXLcZK.js"), "../accountFormats/TL.json": () => import("./TL-BWslydRz.js"), "../accountFormats/TN.json": () => import("./TN-Cjd3bM_V.js"), "../accountFormats/TR.json": () => import("./TR-BBx5CuWS.js"), "../accountFormats/TT.json": () => import("./TT-D4-z5BA-.js"), "../accountFormats/TW.json": () => import("./TW-BC8YpnMr.js"), "../accountFormats/UA.json": () => import("./UA-DrXUnAe6.js"), "../accountFormats/US.json": () => import("./US-D8dI5_i1.js"), "../accountFormats/UY.json": () => import("./UY-DEHqLXhX.js"), "../accountFormats/VA.json": () => import("./VA-bPXdCnwD.js"), "../accountFormats/VG.json": () => import("./VG-DnKAVCsi.js"), "../accountFormats/VI.json": () => import("./VI-CU9MA9ux.js"), "../accountFormats/VN.json": () => import("./VN-CTSqsmB6.js"), "../accountFormats/WF.json": () => import("./WF-CwHbsjtJ.js"), "../accountFormats/YT.json": () => import("./YT-BCyAAbo7.js"), "../accountFormats/ZA.json": () => import("./ZA-NU7slima.js") });
+const getAccountFormatsForCountry = async (country) => {
+  const importForCountry = accountFormatsImports[`../accountFormats/${country}.json`];
+  if (!importForCountry) {
+    throw Error(`No account formats available for ${country}`);
+  }
+  return (await importForCountry()).default;
+};
+const rules = ({
+  data,
+  requiredFields,
+  isExperimentEnabled
+}) => createFormRules({
+  whenUsingManualVerification: () => {
+    var _a;
+    if (!data.payoutVerificationMethod) return;
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "manualVerification") {
+      return "REQUIRED";
+    }
+  },
+  whenUsingInstantVerification: () => {
+    var _a;
+    if (!data.payoutVerificationMethod) {
+      return "REQUIRED";
+    }
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "instantVerification") {
+      return "REQUIRED";
+    }
+  },
+  verifiedBankAccountNumber: () => {
+    var _a;
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "instantVerification") {
+      return "REQUIRED";
+    }
+  },
+  bankStatementRequirement: () => {
+    var _a, _b;
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) !== "instantVerification" && ((isExperimentEnabled == null ? void 0 : isExperimentEnabled("EnableCheckOnCreateBankAccount")) || (isExperimentEnabled == null ? void 0 : isExperimentEnabled("BankVerificationFlowOptimization_CAASIntegration")))) {
+      return "REQUIRED";
+    }
+    if (((_b = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _b.payoutVerificationMethod) === "manualVerification") {
+      return requiredFields == null ? void 0 : requiredFields.bankStatementRequirement;
+    }
+  },
+  // "bankStatement description" field is always "optional" and it's coupled with bank statement document.
+  bankStatementDescription: () => {
+    var _a;
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "manualVerification" && !!(requiredFields == null ? void 0 : requiredFields.bankStatementRequirement)) {
+      return "OPTIONAL";
+    }
+  }
+});
+const mapApiDocumentToPayoutDocuments = (entityId) => {
+  const bankStatement = getDocument(entityId, "bankStatement") || null;
+  return {
+    bankStatementDocument: bankStatement ? [mapExistingFile(getPageName(bankStatement))] : null,
+    description: bankStatement.description
+  };
+};
+const mapPayoutDetailsToTransferInstrument = ({
+  data,
+  legalEntity
+}) => ({
+  bankAccount: mapPayoutAccountSchemaToApiBankAccount(
+    data.payoutAccountDetails,
+    data.payoutVerificationMethod.bankCountry
+  ),
+  legalEntityId: legalEntity.id,
+  type: "bankAccount"
+});
+const mapPayoutDocumentsToApiDocuments = async (data, entityId) => {
+  const { payoutAccountDocuments = {} } = data;
+  const { bankStatementDocument, description } = payoutAccountDocuments;
+  const entityType = "bankAccount";
+  const existingDocument = getDocument(entityId, "bankStatement");
+  return createDocumentRequest({
+    entityId,
+    entityType,
+    documentType: "bankStatement",
+    page1: bankStatementDocument == null ? void 0 : bankStatementDocument[0],
+    description,
+    existingDocument
+  });
+};
+const mapTransferInstrumentToPayoutAccount = (transferInstrument) => mapWith(transferInstrument, payoutComponentKeyMapping);
+const CUSTOM_LABELS = {
+  verifiedAccountHolder: "accountHolder",
+  verifiedBankCountry: "bankCountry",
+  verifiedBankName: "bankName",
+  verifiedCurrencyCode: "currencyCode",
+  verifiedBankAccountNumber: "bankAccountNumber"
+};
+const formatAccountVerificationSummary = (data) => {
+  if (!data) return {};
+  const summary = {};
+  keysOf(CUSTOM_LABELS).forEach((key) => {
+    if (!data[key]) return;
+    summary[key] = summaryItem(CUSTOM_LABELS[key], data[key]);
+  });
+  return summary;
+};
+const caasModalFooter = "adyen-kyc-caas-modal-footer";
+const styles = {
+  caasModalFooter
+};
+const obscuredPayoutFields = ["bankAccountNumber", "iban"];
+const payoutDetailsCountryConfig = {
+  [CountryCodes.Canada]: {
+    bankStatementDocument: {
+      label: "listitemVoidedChequeBankLetterBankStatementOnline"
+    }
+  },
+  [CountryCodes.UnitedKingdom]: {
+    bankCity: {
+      label: "bankCityTown"
+    },
+    bankStatementDocument: {
+      label: "listitemVoidedChequeBankLetterBankStatementOnline"
+    }
+  }
+};
+const parseConfiguration = ({
+  requiredFields,
+  country,
+  bankVerificationAvailable
+}) => parsePayoutScenarios({
+  requiredFields: requiredFields == null ? void 0 : requiredFields.fields,
+  country,
+  bankVerificationAvailable
+});
+function parsePayoutScenarios({
+  requiredFields,
+  country,
+  bankVerificationAvailable
+}) {
+  if (!requiredFields) return {};
+  let formConfig = {
+    payoutVerificationMethod: {
+      rule: "REQUIRED"
+    },
+    bankCountry: {
+      rule: "REQUIRED"
+    },
+    bankStatementDocument: {
+      rule: "bankStatementRequirement"
+    },
+    description: {
+      rule: "bankStatementDescription"
+    }
+  };
+  requiredFields.forEach((fieldName) => {
+    formConfig[fieldName] = {
+      rule: bankVerificationAvailable ? "whenUsingManualVerification" : "REQUIRED",
+      obscured: obscuredPayoutFields.includes(fieldName)
+    };
+  });
+  if (bankVerificationAvailable) {
+    formConfig = {
+      ...formConfig,
+      verifiedAccountHolder: {
+        rule: "whenUsingInstantVerification"
+      },
+      verifiedBankCountry: {
+        rule: "whenUsingInstantVerification"
+      },
+      verifiedBankName: {
+        rule: "whenUsingInstantVerification"
+      },
+      verifiedCurrencyCode: {
+        rule: "whenUsingInstantVerification"
+      },
+      verifiedBankAccountNumber: {
+        rule: "whenUsingInstantVerification"
+      }
+    };
+  }
+  return augmentWithCountryConfigs(payoutDetailsCountryConfig[country], formConfig);
+}
+const getAppropriatePayoutDetailsSteps = (isEditing, instantVerificationAvailable, canChangeCountry) => {
+  const dependentSteps = {
+    payoutAccountDetails: payoutSteps.payoutAccountDetails,
+    payoutAccountDocuments: payoutSteps.payoutAccountDocuments,
+    payoutAccountVerification: payoutSteps.payoutAccountVerification
+  };
+  if (!isEditing && (instantVerificationAvailable || canChangeCountry)) {
+    return {
+      payoutVerificationMethod: payoutSteps.payoutVerificationMethod,
+      ...dependentSteps
+    };
+  }
+  return dependentSteps;
+};
+const getInvalidFieldsErrorHeader = (invalidField) => {
+  switch (invalidField) {
+    case "LEGAL_BUSINESS_NAME":
+    case "FIRST_NAME":
+    case "LAST_NAME":
+      return "caasBankAccountHolderDoesNotMatch";
+    default:
+      return "weCouldntCompleteTheAccountCheck";
+  }
+};
+const getInvalidFieldsErrorContent = (invalidField) => {
+  switch (invalidField) {
+    case "LEGAL_BUSINESS_NAME":
+      return "caasBankAccountMustBeInYourNameYourBusinessLegalNameOrDoingBusinessAs";
+    case "FIRST_NAME":
+    case "LAST_NAME":
+      return "caasBankAccountMustBeInYourName";
+    default:
+      return "weCouldntCompleteTheAccountCheck";
+  }
+};
+const defaultInvalidErrorMessage = {
+  header: "weCouldntCompleteTheAccountCheck",
+  content: "weCouldntCompleteTheAccountCheck"
+};
+const getInvalidFieldsErrorMessage = (errors) => {
+  if (!errors || errors.length === 0) {
+    return defaultInvalidErrorMessage;
+  }
+  const [firstError] = errors;
+  const { invalidFields } = firstError;
+  if (!invalidFields || invalidFields.length === 0) {
+    return defaultInvalidErrorMessage;
+  }
+  const [firstInvalidField] = invalidFields;
+  return {
+    header: getInvalidFieldsErrorHeader(firstInvalidField),
+    content: getInvalidFieldsErrorContent(firstInvalidField)
+  };
+};
+function PayoutDetailsDropin({
+  legalEntityResponse,
+  associatedLegalArrangement,
+  problems: propProblems,
+  onSubmit: externalOnSubmit,
+  onChange,
+  asModal = false,
+  handleCloseClick,
+  taskType: propTaskType,
+  capabilities,
+  handleHomeClick,
+  currentTransferInstrumentId,
+  setCurrentTransferInstrumentId,
+  navigateBackToTaskList,
+  handleBackClick: externalBackClick,
+  hideSidebar,
+  openBankingPartnerConfigId
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { baseUrl, rootLegalEntityId } = useApiContext();
+  const {
+    data: transferInstrument,
+    refetch: refetchTransferInstrument,
+    isLoading: isTransferInstrumentLoading
+  } = useTransferInstrument(currentTransferInstrumentId ?? skipToken);
+  const { mutateAsync: handleUpdateTransferInstrument } = useUpdateTransferInstrument();
+  const { mutateAsync: handleCreateTrustedTransferInstrument } = useCreateTrustedTransferInstrument();
+  const { i18n } = useI18nContext();
+  const userEvents = useAnalyticsContext();
+  const { showToast, clearToasts } = useToastContext();
+  const { isExperimentEnabled } = useExperimentsContext();
+  const { isSettingEnabled } = useSettingsContext();
+  const defaultPayoutCountry = getLegalEntityCountry(legalEntityResponse);
+  const existingPayoutDetails = useMemo(
+    () => transferInstrument ? mapTransferInstrumentToPayoutAccount(transferInstrument) : void 0,
+    [transferInstrument]
+  );
+  const [documents, setDocuments] = useState();
+  const [isCaasCalled, setIsCaasCalled] = useState(false);
+  const enableCheckOnCreateBankAccount = isExperimentEnabled("EnableCheckOnCreateBankAccount") || isExperimentEnabled("BankVerificationFlowOptimization_CAASIntegration");
+  const accountHolder = getPayoutAccountHolderName(legalEntityResponse, i18n);
+  const fallbackCurrency = (_a = currencyByCountry[defaultPayoutCountry]) == null ? void 0 : _a[0];
+  const accountHolderName = accountHolder || getLegalEntityNameBasedOnType(legalEntityResponse);
+  const instantVerificationEnabled = Boolean(
+    !isTransferInstrumentLoading && !transferInstrument && isSettingEnabled("instantBankVerification")
+  );
+  const taskType = propTaskType ?? TaskTypes.PAYOUT;
+  const [trustedTransferInstrumentId, setTrustedTransferInstrumentId] = useState();
+  const prefilledData = {
+    payoutAccountDetails: {
+      accountHolder: accountHolderName,
+      currency: fallbackCurrency,
+      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails
+    },
+    payoutVerificationMethod: {
+      payoutVerificationMethod: transferInstrument ? isInstantVerifiedAccount(transferInstrument) ? "instantVerification" : "manualVerification" : instantVerificationEnabled ? "instantVerification" : void 0,
+      bankCountry: defaultPayoutCountry,
+      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutVerificationMethod
+    },
+    payoutAccountVerification: {
+      verifiedAccountHolder: accountHolderName,
+      verifiedBankCountry: defaultPayoutCountry,
+      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountVerification
+    }
+  };
+  const documentUtils = documentApiUtils({
+    baseUrl: baseUrl.value,
+    rootLegalEntityId: rootLegalEntityId.value
+  });
+  const {
+    state: { currentState }
+  } = useStateContext();
+  const formValidity = currentState.validityByForm;
+  const bankAccountCountry = ((_c = (_b = currentState == null ? void 0 : currentState.data) == null ? void 0 : _b.payoutVerificationMethod) == null ? void 0 : _c.bankCountry) ?? defaultPayoutCountry;
+  const [hideFooterAndSidebar, setHideFooterAndSidebar] = useState(false);
+  const [hideFooter, setHideFooter] = useState(false);
+  const [skipSubmit, setSkipSubmit] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState("loading");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [configurationLoadingStatus, setConfigurationLoadingStatus] = useState("loading");
+  const [data, setData] = useState(prefilledData);
+  const [problems, setProblems] = useState(
+    propProblems || ((transferInstrument == null ? void 0 : transferInstrument.id) ? (_e = (_d = getCapabilityProblems(legalEntityResponse, bankAccountCountry)) == null ? void 0 : _d.BankAccount) == null ? void 0 : _e[transferInstrument.id] : void 0)
+  );
+  const [accountDetailsFromInput, setAccountDetailsFromInput] = useState(
+    prefilledData.payoutAccountDetails
+  );
+  const existingBankAccountFormat = transferInstrument ? ((_f = existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails) == null ? void 0 : _f.iban) ? "iban" : "local" : void 0;
+  useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
+    userEvents.addTaskEvent("Landed on page", {
+      actionType: "start"
+    });
+  }, []);
+  useEffect(() => {
+    var _a2, _b2;
+    setData({
+      ...currentState.data,
+      payoutAccountDetails: {
+        ...(_a2 = currentState.data) == null ? void 0 : _a2.payoutAccountDetails,
+        currency: (_b2 = currencyByCountry[bankAccountCountry]) == null ? void 0 : _b2[0]
+      }
+    });
+    onChange == null ? void 0 : onChange(currentState);
+  }, [bankAccountCountry, currentState, onChange]);
+  const {
+    data: providers,
+    refetch: refetchBankVerificationProviders,
+    status: bankVendorsLoadingStatus
+  } = useBankVerificationProviders(
+    {
+      country: bankAccountCountry,
+      configId: openBankingPartnerConfigId,
+      locale: i18n.locale
+    },
+    {
+      enabled: instantVerificationEnabled
+    }
+  );
+  const instantVerificationAvailable = useMemo(
+    () => {
+      var _a2;
+      return Boolean(instantVerificationEnabled && ((_a2 = providers == null ? void 0 : providers[0]) == null ? void 0 : _a2.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,
+      requiredFields,
+      isExperimentEnabled
+    }),
+    [bankAccountCountry, data, taskType, isExperimentEnabled]
+  );
+  const apiBankAccount = useMemo(() => {
+    const payoutAccountDetails = data.payoutAccountDetails ?? { bankAccountNumber: "" };
+    return mapPayoutAccountSchemaToApiBankAccount(payoutAccountDetails, bankAccountCountry);
+  }, [data, bankAccountCountry]);
+  const {
+    data: checkAsAServiceData,
+    refetch: refetchCheckAsAService,
+    isLoading: isCheckAsAServiceLoading,
+    isError: isCheckAsAServiceError
+  } = useCheck(apiBankAccount.accountIdentification, {
+    enabled: false
+  });
+  const checkAsAServiceResultStatus = checkAsAServiceData == null ? void 0 : checkAsAServiceData.status;
+  const checkAsAServiceResultErrors = checkAsAServiceData == null ? void 0 : checkAsAServiceData.errors;
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const payoutDetailsSteps = useMemo(() => {
+    var _a2;
+    const appropriatePayoutDetailsSteps = getAppropriatePayoutDetailsSteps(
+      Boolean((_a2 = prefilledData == null ? void 0 : prefilledData.payoutAccountDetails) == null ? void 0 : _a2.transferInstrumentId),
+      instantVerificationAvailable,
+      isSettingEnabled(SettingNames.AllowIntraRegionCrossBorderPayout)
+    );
+    const { payoutAccountDocuments: _, ...restOfAppropriatePayoutDetailsSteps } = appropriatePayoutDetailsSteps;
+    if (enableCheckOnCreateBankAccount && !isCheckAsAServiceError && (checkAsAServiceResultStatus === "VALID" || checkAsAServiceResultStatus === void 0)) {
+      return restOfAppropriatePayoutDetailsSteps;
+    }
+    return appropriatePayoutDetailsSteps;
+  }, [
+    providers,
+    enableCheckOnCreateBankAccount,
+    checkAsAServiceResultStatus,
+    isCheckAsAServiceError
+  ]);
+  const derivedProps = useMemo(() => {
+    return getPropsFromConfigurations(
+      fieldConfigurations,
+      payoutDetailsSteps,
+      (problems == null ? void 0 : problems.remediationActions) ? Object.values(problems == null ? void 0 : problems.remediationActions) : [],
+      (problems == null ? void 0 : problems.missingData) ?? [],
+      [],
+      fieldsFromCustomRules,
+      {},
+      {},
+      legalEntityResponse.type
+    );
+  }, [
+    fieldConfigurations,
+    fieldsFromCustomRules,
+    problems == null ? void 0 : problems.remediationActions,
+    legalEntityResponse,
+    payoutDetailsSteps
+  ]);
+  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 == null ? void 0 : derivedProps.requiredFields,
+      derivedProps == null ? void 0 : derivedProps.optionalFields
+    );
+    return addValidityToForms(requiredForms, formValidity, problems);
+  }, [derivedProps, formValidity, problems, payoutDetailsSteps]);
+  useEffect(() => {
+    var _a2;
+    if (!((_a2 = transferInstrument == null ? void 0 : transferInstrument.documentDetails) == null ? void 0 : _a2.length)) return;
+    if (transferInstrument.id) {
+      documentUtils.fetchDocuments(transferInstrument.documentDetails, transferInstrument.id).then(() => {
+        setDocuments(mapApiDocumentToPayoutDocuments(transferInstrument.id));
+      }).catch(() => {
+        showToast({ label: i18n.get("failedToFetchRelevantDocuments"), variant: "error" });
+      });
+    }
+  }, [transferInstrument == null ? void 0 : transferInstrument.documentDetails]);
+  const submitDocuments = async ({
+    forms: forms2,
+    transferInstrument: transferInstrument2,
+    dataSubmitted
+  }) => {
+    const isRequiredDocuments = isDocumentsRequired(forms2);
+    if (isRequiredDocuments) {
+      const documentToUpload = await mapPayoutDocumentsToApiDocuments(
+        dataSubmitted,
+        transferInstrument2.id
+      );
+      if (documentToUpload) {
+        try {
+          const documents2 = await documentUtils.uploadDocuments(
+            [documentToUpload],
+            transferInstrument2.id
+          );
+          documents2.forEach((document) => {
+            var _a2, _b2;
+            userEvents.addTaskEvent("Success", {
+              actionType: "upload",
+              documentType: ((_a2 = dataSubmitted.payoutAccountDocuments) == null ? void 0 : _a2.documentType) ?? document.type,
+              // tracks BankDocumentTypes
+              fileExtention: ((_b2 = document.attachments) == null ? void 0 : _b2.map((item) => getFileExtention(item.pageName ?? ""))) ?? null
+            });
+          });
+        } catch {
+          setProblems({
+            ...problems,
+            validationErrors: {
+              payoutAccountDocuments: { bankStatementDocument: true }
+            }
+          });
+          throw new Error(i18n.get("remediationMessage_1_704"));
+        } finally {
+          await (refetchTransferInstrument == null ? void 0 : refetchTransferInstrument());
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    var _a2;
+    const payoutAccountData = (_a2 = cloneObject(data)) == null ? void 0 : _a2.payoutAccountDetails;
+    if (payoutAccountData) setAccountDetailsFromInput(payoutAccountData);
+  }, [data]);
+  const onSubmit = async () => {
+    setIsSubmitting(true);
+    const dataSubmitted = cloneObject(data);
+    const { payoutAccountDetails, payoutVerificationMethod } = dataSubmitted;
+    const baseTracking = {
+      actionType: "submit",
+      documentType: "bankStatement",
+      bankCountry: (payoutVerificationMethod == null ? void 0 : payoutVerificationMethod.bankCountry) ?? defaultPayoutCountry,
+      bankCurrency: (payoutAccountDetails == null ? void 0 : payoutAccountDetails.currency) ?? null
+    };
+    let transferInstrumentFromInput = mapPayoutDetailsToTransferInstrument({
+      data: dataSubmitted,
+      legalEntity: legalEntityResponse
+    });
+    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
+      ));
+      setCurrentTransferInstrumentId == null ? void 0 : setCurrentTransferInstrumentId(response == null ? void 0 : response.id);
+      userEvents.addTaskEvent("Success", baseTracking);
+      try {
+        await submitDocuments({ forms, transferInstrument: response, dataSubmitted });
+        clearToasts();
+        externalOnSubmit == null ? void 0 : externalOnSubmit({ ...dataSubmitted, id: response == null ? void 0 : response.id });
+      } catch (e) {
+        showToast({ label: e.message, variant: "error" });
+      } finally {
+        setIsSubmitting(false);
+      }
+    } catch (e) {
+      if (isValidationError(e)) {
+        const validationErrors = processValidationErrors(e, taskType);
+        setProblems({ ...problems, validationErrors });
+      } else if (isIdDocumentUploadError(e)) {
+        showToast({ label: i18n.get("idDocumentAlreadyUploaded"), variant: "error" });
+      } else if (isBankStatementUploadError(e)) {
+        showToast({ label: i18n.get("bankStatementAlreadyUploaded"), variant: "error" });
+      } else if (isMaintenanceModeError(e)) {
+        showToast({
+          label: i18n.get("maintenanceModeMessage"),
+          variant: "error",
+          duration: "indefinite"
+        });
+      } else {
+        const errorTranslatable = mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable(e);
+        showToast({ label: i18n.get(errorTranslatable), variant: "error" });
+      }
+      setIsSubmitting(false);
+      userEvents.addTaskEvent("Encountered error", {
+        ...baseTracking,
+        returnType: (e == null ? void 0 : e.errorCode) || "backend",
+        returnValue: (e == null ? void 0 : e.title) || (e == null ? void 0 : e.message)
+      });
+    }
+  };
+  const isDocumentsRequired = (forms2) => forms2.some((form) => form.formId === payoutSteps.payoutAccountDocuments.formId);
+  const formatFileSummaryData = (bankDocuments) => {
+    var _a2;
+    const bankStatementDocument = (_a2 = bankDocuments == null ? void 0 : bankDocuments.bankStatementDocument) == null ? void 0 : _a2[0];
+    return {
+      ...bankStatementDocument && {
+        fileName: bankStatementDocument.name
+      }
+    };
+  };
+  const canSubmit = () => {
+    var _a2;
+    if (((_a2 = data.payoutVerificationMethod) == null ? void 0 : _a2.payoutVerificationMethod) === "instantVerification") {
+      return false;
+    }
+    const bankDetails = data.payoutAccountDetails;
+    return !isEmpty(bankDetails) && Object.values(bankDetails).every(Boolean);
+  };
+  const datasetUtils = datasetUtilities(i18n.locale);
+  const formatDataForSummary = () => {
+    var _a2;
+    const summaryData = cloneObject(data);
+    summaryData.payoutAccountDetails.accountHolder = accountHolderName;
+    if (((_a2 = summaryData.payoutVerificationMethod) == null ? void 0 : _a2.bankCountry) && summaryData.payoutAccountDetails) {
+      summaryData.payoutAccountDetails.bankCountry = datasetUtils.getCountryName(
+        summaryData.payoutVerificationMethod.bankCountry
+      );
+    }
+    if (summaryData.payoutAccountDocuments) {
+      summaryData.payoutAccountDocuments.bankStatementDocument = formatFileSummaryData(
+        data == null ? void 0 : data.payoutAccountDocuments
+      );
+    }
+    summaryData.payoutAccountVerification = formatAccountVerificationSummary(
+      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: i18n.get(errorTranslatable), variant: "error" });
+      }
+      throw e;
+    }
+  };
+  const {
+    handleNextClick,
+    handleBackClick,
+    activeForm,
+    shouldValidate,
+    setShouldValidate,
+    gotoFormByFormIndex,
+    steps
+  } = useFormComposer({
+    problems,
+    forms,
+    externalBackClick,
+    onSubmit: skipSubmit ? () => {
+      if (trustedTransferInstrumentId) {
+        externalOnSubmit == null ? void 0 : externalOnSubmit({ ...data, id: trustedTransferInstrumentId });
+      }
+      userEvents.addTaskEvent("Success", {
+        actionType: "submit"
+      });
+      navigateBackToTaskList == null ? void 0 : navigateBackToTaskList();
+    } : onSubmit
+  });
+  useEffect(() => {
+    if (isCaasCalled && forms) {
+      if (checkAsAServiceResultStatus !== "VALID") {
+        const formIndex = forms.findIndex((f) => f.formId === "payoutAccountDocuments");
+        if (formIndex > -1) {
+          gotoFormByFormIndex(formIndex);
+        }
+      }
+      if (checkAsAServiceResultStatus === "VALID") {
+        handleNextClick();
+      }
+    }
+    setIsCaasCalled(false);
+  }, [forms, checkAsAServiceResultStatus, isCaasCalled]);
+  const handleFormNextClick = async () => {
+    if (enableCheckOnCreateBankAccount && activeForm.formId === "payoutAccountDetails" && activeForm.isValid && data.payoutAccountDetails) {
+      try {
+        const { data: response } = await refetchCheckAsAService();
+        setIsCaasCalled(true);
+        if ((response == null ? void 0 : response.status) === "INCOMPLETE_INPUT") {
+          setIsModalOpen(true);
+        } else {
+          handleNextClick();
+        }
+      } catch {
+        handleNextClick();
+      }
+    } else {
+      handleNextClick();
+    }
+  };
+  const omittedForms = ((_g = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _g.payoutVerificationMethod) === "instantVerification" ? [] : [payoutSteps.payoutVerificationMethod.formId];
+  const { header: invalidFieldHeader, content: invalidFieldContent } = getInvalidFieldsErrorMessage(
+    checkAsAServiceResultErrors ?? []
+  );
+  return /* @__PURE__ */ jsxs(
+    LoaderWrapper,
+    {
+      showSpinner: true,
+      status: isCheckAsAServiceLoading || isModalOpen ? "loading" : "success",
+      formOpacityWhenLoading: 0.3,
+      children: [
+        isModalOpen && /* @__PURE__ */ jsxs(
+          Modal,
+          {
+            size: "small",
+            onClose: () => setIsModalOpen(false),
+            ariaLabel: i18n.get("caasBankAccountHolderDoesNotMatch"),
+            children: [
+              /* @__PURE__ */ jsx(ModalHeader, { children: i18n.get(invalidFieldHeader) }),
+              /* @__PURE__ */ jsx(ModalContent, { children: /* @__PURE__ */ jsx(Typography, { el: "p", variant: "body", children: i18n.get(invalidFieldContent) }) }),
+              /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsxs("div", { className: styles.caasModalFooter, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => {
+                      handleNextClick();
+                      setIsModalOpen(false);
+                    },
+                    children: i18n.get("continueAnyway")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => {
+                      gotoFormByFormIndex(0);
+                      setIsModalOpen(false);
+                    },
+                    children: i18n.get("editDetails")
+                  }
+                )
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormWrapper,
+          {
+            taskName: taskType === TaskTypes.PAYIN ? "payinDetails" : "payoutDetails",
+            activeForm,
+            summary: {
+              data: formatDataForSummary(),
+              omitted: {
+                keys: ["transferInstrumentId", "payoutVerificationMethod"],
+                forms: omittedForms,
+                summaryEditButton: ["payoutVerificationMethod"]
+              },
+              labels: derivedProps == null ? void 0 : derivedProps.labels
+            },
+            handleBackClick,
+            handleNextClick: handleFormNextClick,
+            handleHomeClick,
+            handleCloseClick,
+            hideSidebar: hideSidebar || hideFooterAndSidebar,
+            hideFooter: hideFooter || hideFooterAndSidebar,
+            loadingStatus: isTransferInstrumentLoading ? "loading" : loadingStatus,
+            asModal,
+            forms,
+            onSubmit,
+            gotoFormByFormIndex,
+            validateForm: () => setShouldValidate(true),
+            canSubmit: canSubmit(),
+            problems,
+            steps,
+            children: (!isTransferInstrumentLoading || isSubmitting) && /* @__PURE__ */ jsx(
+              PayoutDetails,
+              {
+                ...derivedProps,
+                capabilities,
+                data: { ...prefilledData, payoutAccountDocuments: documents },
+                country: defaultPayoutCountry,
+                activeForm,
+                forms,
+                problems,
+                onBack: handleBackClick,
+                accountHolder: accountHolder ?? getLegalEntityNameBasedOnType(legalEntityResponse),
+                setHideSidebar: setHideFooterAndSidebar,
+                setHideFooter,
+                setSkipSubmit,
+                onChange,
+                legalEntityResponse,
+                associatedLegalArrangement,
+                provider: providers == null ? void 0 : providers[0],
+                bankVendorsLoadingStatus,
+                instantVerificationAvailable,
+                shouldValidate,
+                createTrustedTransferInstrument: createTrustedTransferInstrumentHandler,
+                accountDetailsFromInput,
+                trustedTransferInstrumentId
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function CreateTransferInstrumentComponent({
+  legalEntityId,
+  transferInstrumentId,
+  openBankingPartnerConfigId,
+  modalView = false,
+  onClose,
+  onUnmount,
+  onSubmitSuccess,
+  handleBackClick
+}) {
+  const [currentTransferInstrumentId, setCurrentTransferInstrumentId] = useState(transferInstrumentId);
+  const { data: legalEntity, isLoading: isLegalEntityLoading } = useLegalEntity(legalEntityId);
+  const { data: associatedEntity } = useAssociatedLegalEntity(legalEntity, [
+    LegalEntityType.SOLE_PROPRIETORSHIP,
+    LegalEntityType.TRUST,
+    LegalEntityType.UNINCORPORATED_PARTNERSHIP
+  ]);
+  const handleOnClose = () => {
+    if (modalView) {
+      onUnmount == null ? void 0 : onUnmount();
+    }
+    onClose == null ? void 0 : onClose();
+  };
+  return isLegalEntityLoading || !legalEntity ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsx(
+    PayoutDetailsDropin,
+    {
+      legalEntityResponse: legalEntity,
+      associatedLegalArrangement: associatedEntity,
+      openBankingPartnerConfigId,
+      handleBackClick,
+      handleCloseClick: handleOnClose,
+      currentTransferInstrumentId,
+      setCurrentTransferInstrumentId,
+      onSubmit: onSubmitSuccess,
+      taskType: TaskTypes.PAYOUT,
+      hideSidebar: true,
+      asModal: modalView
+    }
+  );
+}
+export {
+  CreateTransferInstrumentComponent as C,
+  FormWrapper as F,
+  PayoutDetailsDropin as P,
+  mapTransferInstrumentToPayoutAccount as m,
+  useTransferInstrument as u
+};