@adyen/kyc-components 2.2.6 → 2.3.1

package/dist/es/adyen-kyc-components.es.js

@@ -318,6 +318,7 @@ const invalidFormatIdentityNumberSE = "Please use the Personnummer format: YYYYM
 const invalidFormatIdentityNumberUS = "Please provide last 4 digits";
 const invalidFormatIdentityNumberUS9 = "Please use the SSN format: XXXXXXXXX";
 const invalidFormatIdentityNumberSG = "Please use the NRIC format: S1234567A";
+const invalidFormatBankStatementDescription = "Please ensure your input contains solely letters, digits, currency codes, and the specified special characters: -._,:;'*!@#%()+?¿/「」";
 const residencyCountry = "Country of residence";
 const stateOrProvince = "State or province";
 const selectStateOrProvince = "Select a state or province";
@@ -1272,6 +1273,7 @@ const defaultTrans = {
   invalidFormatIdentityNumberUS,
   invalidFormatIdentityNumberUS9,
   invalidFormatIdentityNumberSG,
+  invalidFormatBankStatementDescription,
   residencyCountry,
   stateOrProvince,
   selectStateOrProvince,
@@ -4507,6 +4509,7 @@ const lengthValidationPatterns = {
     message: "validationEnter9Or12Digits"
   }
 };
+const bankStatementDescriptionPattern = /^[$\xA2-\xA5\u058F\u060B\u09F2\u09F3\u09FB\u0AF1\u0BF9\u0E3F\u17DB\u20A0-\u20BD\uA838\uFDFC\uFE69\uFF04\uFFE0\uFFE1\uFFE5\uFFE6a-zA-Z0-9-."_,:;'*!@#%()+?¿/&「」]*$/;
 const businessRegistrationNumberPatterns = {
   [CountryCodes.Australia]: {
     default: {
@@ -6760,6 +6763,13 @@ const Select = ({
   return o("div", {
     className: cx(["adyen-kyc-dropdown", styles$2["adyen-kyc-dropdown"], className, ...classNameModifiers.map((m2) => `adyen-kyc-dropdown--${m2}`)]),
     ref: selectContainerRef,
+    onClick: (e2) => {
+      e2.stopPropagation();
+      if (filterInputRef.current) {
+        filterInputRef.current.focus();
+      }
+    },
+    role: "presentation",
     children: [o(SelectButton, {
       id: uniqueId2 ?? null,
       active,
@@ -9815,7 +9825,7 @@ function TextArea(props) {
       onInput: handleInput,
       onBlur: handleBlur,
       onFocus: handleFocus
-    }), maxLength && charactersLeft >= 0 ? o("span", {
+    }), !isInvalid && maxLength && charactersLeft >= 0 ? o("span", {
       className: "adyen-kyc-input__counter",
       children: i18n.get("xCharactersLeft", {
         values: {
@@ -10596,88 +10606,92 @@ const createPatternByDigits = (digits) => ({
   pattern: new RegExp(`\\d{${digits}}`)
 });
 const postalCodePatterns = {
-  AT: createPatternByDigits(4),
-  AU: createPatternByDigits(4),
-  BE: {
+  [CountryCodes.Australia]: createPatternByDigits(4),
+  [CountryCodes.Austria]: createPatternByDigits(4),
+  [CountryCodes.Belgium]: {
     pattern: /(?:(?:[1-9])(?:\d{3}))/
   },
-  BG: createPatternByDigits(4),
-  BR: createPatternByDigits(8),
-  CA: {
+  [CountryCodes.Brazil]: createPatternByDigits(8),
+  [CountryCodes.Bulgaria]: createPatternByDigits(4),
+  [CountryCodes.Canada]: {
     pattern: /(?:[ABCEGHJ-NPRSTVXY]\d[A-Z][ -]?\d[A-Z]\d)/
   },
-  CH: {
-    pattern: /[1-9]\d{3}/
+  [CountryCodes.Croatia]: {
+    pattern: /^([1-5])[0-9]{4}$/
   },
-  CY: createPatternByDigits(4),
-  CZ: {
+  [CountryCodes.Cyprus]: createPatternByDigits(4),
+  [CountryCodes.CzechRepublic]: {
     pattern: /\d{3}\s?\d{2}/
   },
-  DE: createPatternByDigits(5),
-  DK: {
+  [CountryCodes.Denmark]: {
     pattern: /^(DK-)?[0-9]{4}$/
   },
-  EE: createPatternByDigits(5),
-  ES: {
-    pattern: /(?:0[1-9]|[1-4]\d|5[0-2])\d{3}/
-  },
-  FI: createPatternByDigits(5),
-  FR: createPatternByDigits(5),
-  GB: {
-    pattern: /^([A-Za-z][A-Ha-hK-Yk-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/
+  [CountryCodes.Estonia]: createPatternByDigits(5),
+  [CountryCodes.Finland]: createPatternByDigits(5),
+  [CountryCodes.France]: createPatternByDigits(5),
+  [CountryCodes.Georgia]: createPatternByDigits(4),
+  [CountryCodes.Germany]: createPatternByDigits(5),
+  [CountryCodes.Gibraltar]: {
+    pattern: /^GX11[ -]?1AA$/
   },
-  GE: createPatternByDigits(4),
-  GR: {
+  [CountryCodes.Greece]: {
     pattern: /^\d{3}\s{0,1}\d{2}$/
   },
-  HR: {
-    pattern: /^([1-5])[0-9]{4}$/
-  },
-  HU: createPatternByDigits(4),
-  IE: {
+  [CountryCodes.Hungary]: createPatternByDigits(4),
+  [CountryCodes.Iceland]: createPatternByDigits(3),
+  [CountryCodes.Ireland]: {
     pattern: /(?:^[AC-FHKNPRTV-Y][0-9]{2}|D6W)[ -]?[0-9AC-FHKNPRTV-Y]{4}/
   },
-  IS: createPatternByDigits(3),
-  IT: createPatternByDigits(5),
-  LI: createPatternByDigits(4),
-  LT: {
-    pattern: /^(LT-)?[0-9]{4,5}$/
+  [CountryCodes.Italy]: createPatternByDigits(5),
+  [CountryCodes.Japan]: {
+    pattern: /^\d{3}[-]\d{4}$/
   },
-  LU: createPatternByDigits(4),
-  LV: {
+  [CountryCodes.Latvia]: {
     pattern: /^(LV-)?[0-9]{4}$/
   },
-  MC: {
-    pattern: /^980\d{2}$/
+  [CountryCodes.Liechtenstein]: createPatternByDigits(4),
+  [CountryCodes.Lithuania]: {
+    pattern: /^(LT-)?[0-9]{4,5}$/
   },
-  MT: {
+  [CountryCodes.Luxembourg]: createPatternByDigits(4),
+  [CountryCodes.Malaysia]: createPatternByDigits(5),
+  [CountryCodes.Malta]: {
     pattern: /^[A-Za-z]{2,3}[ ]?\d{2}(?:\d{2})?$/
   },
-  MY: createPatternByDigits(5),
-  NZ: createPatternByDigits(4),
-  NL: {
+  [CountryCodes.Monaco]: {
+    pattern: /^980\d{2}$/
+  },
+  [CountryCodes.Netherlands]: {
     pattern: /(?:NL-)?(?:[1-9]\d{3} ?(?:[A-EGHJ-NPRTVWXZ][A-EGHJ-NPRSTVWXZ]|S[BCEGHJ-NPRTVWXZ]))/
   },
-  NO: createPatternByDigits(4),
-  PL: {
+  [CountryCodes.NewZealand]: createPatternByDigits(4),
+  [CountryCodes.Norway]: createPatternByDigits(4),
+  [CountryCodes.Poland]: {
     pattern: /^\d{2}[-]\d{3}$/
   },
-  PT: {
+  [CountryCodes.Portugal]: {
     pattern: /^([1-9]\d{3})([- ]?(\d{3})? *)$/
   },
-  RO: createPatternByDigits(6),
-  SI: {
+  [CountryCodes.PuertoRico]: createPatternByDigits(5),
+  [CountryCodes.Romania]: createPatternByDigits(6),
+  [CountryCodes.Slovakia]: {
+    pattern: /^(SK-)?[0-9]{5}$/
+  },
+  [CountryCodes.Slovenia]: {
     pattern: /^(SI-)?[0-9]{4}$/
   },
-  SE: createPatternByDigits(5),
-  SG: createPatternByDigits(6),
-  SK: {
-    pattern: /^(SK-)?[0-9]{5}$/
+  [CountryCodes.Singapore]: createPatternByDigits(6),
+  [CountryCodes.Spain]: {
+    pattern: /(?:0[1-9]|[1-4]\d|5[0-2])\d{3}/
   },
-  JP: {
-    pattern: /^\d{3}[-]\d{4}$/
+  [CountryCodes.Sweden]: createPatternByDigits(5),
+  [CountryCodes.Switzerland]: {
+    pattern: /[1-9]\d{3}/
   },
-  US: {
+  [CountryCodes.UnitedKingdom]: {
+    pattern: /^([A-Za-z][A-Ha-hK-Yk-y]?[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})$/
+  },
+  [CountryCodes.UnitedStates]: {
     pattern: /^(\d{5})([-]?(\d{4})? *)$/
   }
 };
@@ -14471,9 +14485,10 @@ function IdentityAuComponent(props) {
     maskedFields: props.maskedFields
   });
   p(() => {
+    console.log("triggerValidation");
     if (data.typeOfIdentity)
       triggerValidation(["idNumber"]);
-  }, [triggerValidation, data.typeOfIdentity]);
+  }, [data.typeOfIdentity]);
   const {
     sliceData,
     updateStateSlice
@@ -15856,6 +15871,33 @@ const currencyByCountry = {
   [CountryCodes.UnitedKingdom]: [Currency.GBP, Currency.EUR],
   [CountryCodes.UnitedStates]: [Currency.USD]
 };
+const bankVerificationValidationRules = {
+  verifiedAccountHolder: {
+    modes: ["blur"],
+    validate: (verifiedAccountHolder) => !isEmpty(verifiedAccountHolder),
+    errorMessage: "fieldIsRequired"
+  },
+  verifiedBankCountry: {
+    modes: ["blur"],
+    validate: (verifiedBankCountry) => !isEmpty(verifiedBankCountry),
+    errorMessage: "fieldIsRequired"
+  },
+  verifiedBankName: {
+    modes: ["blur"],
+    validate: (verifiedBankName) => !isEmpty(verifiedBankName),
+    errorMessage: "fieldIsRequired"
+  },
+  verifiedCurrencyCode: {
+    modes: ["blur"],
+    validate: (verifiedCurrencyCode) => !isEmpty(verifiedCurrencyCode),
+    errorMessage: "fieldIsRequired"
+  },
+  verifiedBankAccountNumber: {
+    modes: ["blur"],
+    validate: (verifiedBankAccountNumber) => !isEmpty(verifiedBankAccountNumber),
+    errorMessage: "fieldIsRequired"
+  }
+};
 const BankVerificationWidget$1 = "";
 class AdyenKycSdkError extends Error {
   constructor(message, sourceError) {
@@ -15893,11 +15935,10 @@ const removeElementSiblings = (element) => {
     child = child.nextSibling;
   }
 };
-const vendorIdentifiers = ["Tink", "PayWithMyBank"];
-const [TINK_VENDOR, TRUSTLY_VENDOR] = vendorIdentifiers;
 const RELEVANT_MESSAGE_TYPES = ["account_verification_report_id", "error"];
 const TERMINAL_DATA_PROPS = ["accounts", "error", "reference"];
 const MOUNT_TIMEOUT = 10 * 1e3;
+const TINK_VENDOR = "Tink";
 const logger$7 = createLogger("iframeWidget");
 const isObjectData = (data) => typeof data === "object" && !Array.isArray(data) && data !== null;
 const isTerminalMessageData = (data) => Object.entries(data).some(([prop]) => TERMINAL_DATA_PROPS.includes(prop));
@@ -16191,7 +16232,7 @@ const usePreferredVendorForCountry = (country2, getBankVerificationVendors) => {
     const getPreferredVendor = async () => {
       const vendors = await getBankVerificationVendors(country2);
       const preferredVendor2 = vendors[0];
-      setPreferredVendor(vendorIdentifiers.includes(preferredVendor2.name) ? preferredVendor2 : null);
+      setPreferredVendor(preferredVendor2.name ? preferredVendor2 : null);
     };
     getPreferredVendor().catch(logger$6.error);
   }, [country2, getBankVerificationVendors]);
@@ -16279,7 +16320,11 @@ function BankVerification(props) {
     getBankVerificationVendors,
     setBankVerificationError,
     onBack,
-    hideDropinLayout
+    hideDropinLayout,
+    setBankInfoValidated,
+    hideOnHomeButton,
+    bankInfoValidated,
+    formIsActive
   } = props;
   const {
     i18n
@@ -16302,7 +16347,7 @@ function BankVerification(props) {
     ...props,
     schema,
     defaultData: props.data,
-    rules: props.validators,
+    rules: bankVerificationValidationRules,
     fieldProblems: props == null ? void 0 : props.fieldValidationErrors
   });
   const retrieveBankAccountInfo = async ({
@@ -16316,9 +16361,9 @@ function BankVerification(props) {
     handleChangeFor("verifiedBankCountry")(props.country);
     handleChangeFor("verifiedAccountHolder")(props.data.verifiedAccountHolder);
     handleChangeFor("verifiedCurrencyCode")(props.data.verifiedCurrencyCode ?? ((_a = currencyByCountry[props.country]) == null ? void 0 : _a[0]));
-    props.setBankInfoValidated(true);
+    setBankInfoValidated(true);
     hideDropinLayout(false);
-    props.hideOnHomeButton();
+    hideOnHomeButton(true);
     triggerValidation();
     await ((_b = props.refreshLegalEntity) == null ? void 0 : _b.call(props));
   };
@@ -16337,14 +16382,14 @@ function BankVerification(props) {
     });
   }, [data, valid, errors, isValid]);
   p(() => {
-    hideDropinLayout(props.formIsActive && !props.bankInfoValidated);
+    hideDropinLayout(formIsActive && !bankInfoValidated);
     return () => hideDropinLayout(false);
-  }, [props.bankInfoValidated, props.formIsActive]);
+  }, [bankInfoValidated, formIsActive]);
   return o(Fragment, {
     children: [o(StateContextSetter, {
       owner: ACCOUNT_VERIFICATION,
       stateRef
-    }), props.bankInfoValidated && o(Fragment, {
+    }), bankInfoValidated && o(Fragment, {
       children: [o(FormHeader, {
         heading: props.heading
       }), o("div", {
@@ -16359,7 +16404,7 @@ function BankVerification(props) {
           children: [" ", i18n.get("youSuccessfullyVerifiedAccount")]
         })]
       })]
-    }), typeof getBankVerificationVendors === "function" && props.formIsActive && !props.bankInfoValidated && o("div", {
+    }), typeof getBankVerificationVendors === "function" && formIsActive && !bankInfoValidated && o("div", {
       className: "adyen-kyc-bank-verification-container",
       children: o(InstantBankVerification, {
         getBankVerificationVendors,
@@ -17381,6 +17426,13 @@ const BankDocumentRequirements = ({
     })]
   });
 };
+const payoutBankStatementValidationRules = {
+  description: {
+    modes: ["blur"],
+    validate: (description2) => description2 ? bankStatementDescriptionPattern.test(description2) : true,
+    errorMessage: "invalidFormatBankStatementDescription"
+  }
+};
 const CHARACTERS_LIMIT$1 = 200;
 const bankStatementFields = ["bankStatementDocument", "description"];
 function PayoutBankStatementComponent(props) {
@@ -17403,7 +17455,7 @@ function PayoutBankStatementComponent(props) {
     isOptional: isBankStatementOptional
   }), [isBankStatementOptional]);
   const rules2 = F$1(() => ({
-    ...props.validators,
+    ...props.validators || payoutBankStatementValidationRules,
     bankStatementDocument: fileValidationRules(bankStatementValidationOptions)
   }), [bankStatementValidationOptions, props.validators]);
   const {
@@ -17420,7 +17472,7 @@ function PayoutBankStatementComponent(props) {
     defaultData: props.data,
     rules: rules2,
     fieldProblems: props == null ? void 0 : props.fieldValidationErrors,
-    shouldValidate: true
+    shouldValidate: props == null ? void 0 : props.shouldValidate
   });
   const alreadyUploadedDocuments = F$1(() => {
     var _a2;
@@ -17861,12 +17913,17 @@ function PayoutDetailsComponent(props) {
     activeForm,
     taskType,
     legalEntityResponse,
-    handleGetBankVerificationVendors
+    handleGetBankVerificationVendors,
+    setHideDropinLayout,
+    setHideOnHomeButton,
+    setSkipSubmit,
+    setHideBackButton,
+    setSubmitButtonLabel
   } = props;
   const [instantVerificationError, setInstantVerificationError] = useInstantVerificationErrorNotification(1e4);
   const verificationMethodFormProps = getFormProps(props, payoutSteps.payoutVerificationMethod.formId);
   const accountVerificationFormProps = getFormProps(props, payoutSteps.payoutAccountVerification.formId);
-  const payoutAccountFormProps = getFormProps(props, payoutSteps.payoutAccountDetails(props.taskType).formId);
+  const payoutAccountFormProps = getFormProps(props, payoutSteps.payoutAccountDetails(taskType).formId);
   const payoutBankStatementFormProps = getFormProps(props, payoutSteps.payoutAccountDocuments.formId);
   const taskHeading = i18n.get(taskHeadings[taskType]);
   const isBankStatementDocumentOptional = formUtilities(payoutBankStatementFormProps, i18n).isOptionalField("bankStatementDocument");
@@ -17875,16 +17932,15 @@ function PayoutDetailsComponent(props) {
   const resetData = useResetGlobalData();
   const verifyInstantly = ((_a = data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "instantVerification";
   const bankCountry2 = (_b = data.payoutVerificationMethod) == null ? void 0 : _b.bankCountry;
-  p(() => props.evaluateConfiguration(data), [data.payoutVerificationMethod]);
   p(() => resetData(), [resetData]);
   p(() => {
     if (activeForm.formId === summaryStep.formId && verifyInstantly) {
-      props.setSkipSubmitAndGoTaskList(true);
-      props.setHideOnHomeButton(true);
-      props.setHideBackButton(true);
-      props.setSubmitButtonLabel("continue");
+      setSkipSubmit(true);
+      setHideOnHomeButton(true);
+      setHideBackButton(true);
+      setSubmitButtonLabel("continue");
     }
-  }, [props.activeForm]);
+  }, [activeForm]);
   const [bankInfoValidated, setBankInfoValidated] = h(false);
   return o("div", {
     className: "adyen-kyc-payout",
@@ -17912,11 +17968,10 @@ function PayoutDetailsComponent(props) {
         id: payoutSteps.payoutAccountVerification.formId,
         country: bankCountry2,
         onBack: props.onBack,
-        onNext: props.onNext,
-        hideDropinLayout: (hideStatus) => props.setHideDropinLayout(hideStatus),
+        hideDropinLayout: setHideDropinLayout,
         getBankVerificationVendors: handleGetBankVerificationVendors,
         setBankVerificationError: setInstantVerificationError,
-        hideOnHomeButton: () => props.setHideOnHomeButton(true),
+        hideOnHomeButton: setHideOnHomeButton,
         bankInfoValidated,
         setBankInfoValidated,
         formIsActive: activeForm.formId === payoutSteps.payoutAccountVerification.formId,
@@ -18528,6 +18583,7 @@ const remediationActionMappings = {
   }]
 };
 const dataMissingRemediationsToFieldsMap = {
+  "1_501": [DocumentType.REGISTRATION_DOCUMENT],
   "2_158": ["vatNumber", "exemptedFromVat", "vatAbsenceReason"]
 };
 var EntityType = /* @__PURE__ */ ((EntityType2) => {
@@ -19046,7 +19102,9 @@ const useFormComposer = ({
   forms,
   formRef,
   submitButtonLabel,
-  onSubmit
+  onSubmit,
+  skipSubmit,
+  onSkipSubmit
 }) => {
   const {
     i18n
@@ -19101,6 +19159,10 @@ const useFormComposer = ({
       return;
     }
     if (isFormSummaryStep(activeForm)) {
+      if (skipSubmit && onSkipSubmit) {
+        onSkipSubmit();
+        return;
+      }
       onSubmit();
       return;
     }
@@ -19952,8 +20014,9 @@ const mapField = (lePath, dropinTask) => {
     case TaskTypes.PAYOUT:
     case TaskTypes.PAYIN:
       return remediationPayoutApiKeyMapping[lePath];
+    default:
+      return null;
   }
-  return null;
 };
 const getRequiredForms = (forms, requiredFields, optionalFields) => {
   const requiredForms = Object.values(forms).filter(({
@@ -20254,16 +20317,13 @@ const FormWrapper = ({
       hasVerificationErrors: Object.keys((problems == null ? void 0 : problems.verificationErrors) ?? {}).length > 0
     })
   });
-  if (hideDropinLayout) {
-    return multiStepForm;
-  }
   return o(DropinLayout, {
     content: o(Fragment, {
       children: [sidebar, multiStepForm]
     })
   });
 };
-const parseConfiguration$1 = ({
+const parseConfiguration$2 = ({
   country: country2,
   matchingScenario
 }) => parseCompanyScenarios(matchingScenario == null ? void 0 : matchingScenario[LegalEntityType.ORGANIZATION], country2);
@@ -20356,7 +20416,7 @@ function CompanyDropinComponent({
     fieldConfigurations,
     requiredFields
   } = useScenarioConfiguration({
-    parseConfiguration: parseConfiguration$1,
+    parseConfiguration: parseConfiguration$2,
     getConfigurationData,
     setLoadingStatus,
     country: country2
@@ -22170,7 +22230,7 @@ function Toast({
     })]
   });
 }
-const parseConfiguration = ({
+const parseConfiguration$1 = ({
   country: country2,
   matchingScenario
 }) => parseIndividualScenarios(matchingScenario == null ? void 0 : matchingScenario[LegalEntityType.INDIVIDUAL], country2);
@@ -22247,7 +22307,7 @@ function IndividualDropinComponent({
   const {
     fieldConfigurations
   } = useScenarioConfiguration({
-    parseConfiguration,
+    parseConfiguration: parseConfiguration$1,
     getConfigurationData,
     setLoadingStatus,
     country: country2
@@ -22622,934 +22682,447 @@ function IndividualDropinComponent({
     })
   });
 }
-function removeObjectPropsWithEmptyValues(obj) {
-  Object.keys(obj).forEach((key) => {
-    if (obj[key] === null || isEmpty(obj[key]))
-      delete obj[key];
-  });
-  return obj;
-}
-const INITIAL_STATE = {
-  data: {},
-  allData: {},
-  initialData: {},
-  errors: {},
-  valid: {},
-  fieldProblems: {},
-  isValid: false
+const isInstantVerificationAvailable = ({
+  country: country2,
+  verificationVendorsCallback,
+  bankVerificationVendors
+}) => Boolean(verificationVendorsCallback && (bankVerificationVendors == null ? void 0 : bankVerificationVendors[country2]));
+const rules = ({
+  data,
+  requiredFields
+}) => ({
+  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;
+    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.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 getRegistrationCountry = (legalEntityResponse) => {
+  var _a, _b;
+  if (legalEntityResponse.type === LegalEntityType.INDIVIDUAL) {
+    return (_a = legalEntityResponse.individual) == null ? void 0 : _a.residentialAddress.country;
+  }
+  if (legalEntityResponse.type === LegalEntityType.ORGANIZATION) {
+    return (_b = legalEntityResponse.organization) == null ? void 0 : _b.registeredAddress.country;
+  }
 };
-function StateReducer() {
-  const [schemas, setSchemas] = h({});
-  const [activeForms, setActiveForms] = h([]);
-  const setCurrentForms = (forms) => {
-    setActiveForms(forms);
+const labels$1 = () => ({
+  verifiedAccountHolder: () => "accountHolder",
+  verifiedBankCountry: () => "bankCountry",
+  verifiedBankName: () => "bankName",
+  verifiedCurrencyCode: () => "currencyCode",
+  verifiedBankAccountNumber: () => "bankAccountNumber"
+});
+const parseConfiguration = ({
+  requiredFields,
+  country: country2,
+  bankVerificationAvailable
+}) => parsePayoutScenarios({
+  requiredFields: requiredFields == null ? void 0 : requiredFields.fields,
+  country: country2,
+  bankVerificationAvailable
+});
+function PayoutDetailsDropinComponent({
+  transferInstrument,
+  setTransferInstrument,
+  handleCreateDocument,
+  handleGetDocument,
+  handleUpdateDocument,
+  handleUpdateTransferInstrument,
+  handleCreateTransferInstrument,
+  handleGetBankVerificationVendors,
+  legalEntityResponse,
+  trackingConfig,
+  accountHolder: accountHolder2,
+  country: country2,
+  problems: propProblems,
+  onSubmit: externalOnSubmit,
+  onChange,
+  taskType,
+  taskName,
+  eventEmitter,
+  capabilities,
+  handleHomeClick,
+  homeButtonLabel,
+  refreshLegalEntity,
+  navigateBackToTaskList
+}) {
+  var _a, _b, _c;
+  const {
+    i18n
+  } = useCoreContext();
+  const {
+    showToast,
+    clearToasts
+  } = useToastContext();
+  const {
+    isSettingEnabled
+  } = useSettingsContext();
+  const {
+    getConfiguration: getConfiguration2,
+    getPayoutAccountFormat: getPayoutAccountFormat2
+  } = useKycExternalApi();
+  const defaultPayoutCountry = getRegistrationCountry(legalEntityResponse) ?? country2;
+  const [bankAccountCountry2, setBankAccountCountry] = h(defaultPayoutCountry);
+  const existingPayoutDetails = transferInstrument ? mapTransferInstrumentToPayoutAccount(transferInstrument) : void 0;
+  const [documents2, setDocuments] = h();
+  const fallbackCurrency = (_a = currencyByCountry[defaultPayoutCountry]) == null ? void 0 : _a[0];
+  const accountHolderName = accountHolder2 || getLegalEntityNameBasedOnType(legalEntityResponse);
+  const instantVerificationEnabled = Boolean(!transferInstrument && handleGetBankVerificationVendors);
+  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
+    }
   };
-  function reducer2({
-    currentState: currState
-  }, action) {
-    var _a, _b, _c, _d, _e;
-    switch (action.type) {
-      case "addToState": {
-        const state2 = structuredClone(currState);
-        const dataStoreId = action.value.dataStoreId ?? action.value.caller;
-        const schema = action.value.schema || null;
-        const schemaHasChanged = schema && ((_a = schemas == null ? void 0 : schemas[dataStoreId]) == null ? void 0 : _a.toString()) !== schema.toString();
-        const mergedState = {
-          ...state2,
-          data: {
-            ...state2.data,
-            [dataStoreId]: {
-              ...state2.data[dataStoreId],
-              ...action.value.data
-            }
-          },
-          // Add data in allData state prop in case we will need them later
-          allData: {
-            ...state2.allData,
-            [dataStoreId]: {
-              ...state2.allData[dataStoreId],
-              ...removeObjectPropsWithEmptyValues(action.value.data)
-            }
-          },
-          errors: {
-            ...state2.errors,
-            [dataStoreId]: {
-              ...state2.errors[dataStoreId],
-              ...action.value.errors
-            }
-          },
-          valid: {
-            ...state2.valid,
-            [dataStoreId]: {
-              ...state2.valid[dataStoreId],
-              ...action.value.valid
-            }
-          },
-          fieldProblems: {
-            ...state2.fieldProblems,
-            [dataStoreId]: {
-              ...state2.fieldProblems[dataStoreId],
-              ...action.value.fieldProblems
-            }
-          }
-        };
-        if (schemaHasChanged) {
-          setSchemas({
-            ...schemas,
-            [dataStoreId]: schema
+  const documentUtils = documentApiUtils(handleCreateDocument, handleGetDocument, handleUpdateDocument);
+  const [hideDropinLayout, setHideDropinLayout] = h(false);
+  const [submitButtonLabel, setSubmitButtonLabel] = h();
+  const [skipSubmit, setSkipSubmit] = h(false);
+  const [hideHomeButton, setHideHomeButton] = h(false);
+  const [hideBackButton, setHideBackButton] = h(false);
+  const [loadingStatus, setLoadingStatus] = h("success");
+  const [data, setData] = h(prefilledData);
+  const [problems, setProblems] = h(propProblems || ((_c = (_b = getCapabilityProblems(legalEntityResponse)) == null ? void 0 : _b.BankAccount) == null ? void 0 : _c[transferInstrument == null ? void 0 : transferInstrument.id]));
+  const baseTrackingPayload = getBaseTrackingPayload({
+    trackingConfig,
+    task: taskType
+  });
+  p(() => {
+    userEvents.addPageView("Payout dropin");
+    userEvents.addEvent("Started payout task", {
+      segmentation: {
+        ...baseTrackingPayload
+      }
+    });
+  }, []);
+  const getConfigurationData = T$1(() => getConfiguration2({
+    legalEntityType: legalEntityResponse.type,
+    capabilities,
+    country: bankAccountCountry2 ?? defaultPayoutCountry
+  }), [bankAccountCountry2, capabilities]);
+  const getPayoutAccountFormatData = T$1(() => getPayoutAccountFormat2(bankAccountCountry2 ?? defaultPayoutCountry), [bankAccountCountry2]);
+  const {
+    fieldConfigurations,
+    requiredFields,
+    bankVerificationVendors
+  } = useScenarioConfiguration({
+    parseConfiguration,
+    getConfigurationData,
+    getPayoutAccountFormatData,
+    instantVerificationEnabled,
+    setLoadingStatus,
+    country: bankAccountCountry2 ?? defaultPayoutCountry
+  });
+  const fieldsFromCustomRules = F$1(() => rules({
+    data,
+    country: bankAccountCountry2 ?? defaultPayoutCountry,
+    taskType,
+    requiredFields
+  }), [bankAccountCountry2, data, taskType]);
+  const fieldsFormCustomLabels = F$1(() => labels$1 ? labels$1() : {}, [data, bankAccountCountry2]);
+  const payoutDetailsSteps = F$1(() => {
+    var _a2, _b2;
+    return getAppropriatePayoutDetailsSteps(taskType, Boolean((_a2 = prefilledData == null ? void 0 : prefilledData.payoutAccountDetails) == null ? void 0 : _a2.transferInstrumentId), !transferInstrument && isInstantVerificationAvailable({
+      country: (_b2 = prefilledData == null ? void 0 : prefilledData.payoutVerificationMethod) == null ? void 0 : _b2.bankCountry,
+      bankVerificationVendors,
+      verificationVendorsCallback: handleGetBankVerificationVendors
+    }), isSettingEnabled("allowIntraRegionCrossBorderPayout"));
+  }, [bankVerificationVendors]);
+  const derivedProps = F$1(() => getPropsFromConfigurations(fieldConfigurations, payoutDetailsSteps, (problems == null ? void 0 : problems.remediationActions) ? Object.values(problems == null ? void 0 : problems.remediationActions) : [], (problems == null ? void 0 : problems.missingData) ?? [], [], fieldsFromCustomRules, fieldsFormCustomLabels), [fieldConfigurations, fieldsFromCustomRules, problems == null ? void 0 : problems.remediationActions]);
+  const {
+    state: {
+      currentState
+    }
+  } = useStateContext();
+  const formValidity = currentState.validityByForm;
+  p(() => {
+    var _a2, _b2;
+    setData({
+      ...currentState.data
+    });
+    setBankAccountCountry((_b2 = (_a2 = currentState == null ? void 0 : currentState.data) == null ? void 0 : _a2.payoutVerificationMethod) == null ? void 0 : _b2.bankCountry);
+    onChange == null ? void 0 : onChange(currentState);
+  }, [currentState, onChange]);
+  const forms = F$1(() => {
+    const requiredForms = getRequiredForms(payoutDetailsSteps, derivedProps == null ? void 0 : derivedProps.requiredFields, derivedProps == null ? void 0 : derivedProps.optionalFields);
+    return addValidityToForms(requiredForms, formValidity, problems);
+  }, [derivedProps, formValidity, problems]);
+  p(() => {
+    var _a2;
+    const documentIds = ((_a2 = transferInstrument == null ? void 0 : transferInstrument.documentDetails) == null ? void 0 : _a2.map((documentReference) => documentReference.id)) || [];
+    if (documentIds.length) {
+      documentUtils.fetchDocuments(documentIds, transferInstrument == null ? void 0 : transferInstrument.id).then(() => {
+        setDocuments(mapApiDocumentToPayoutDocuments(transferInstrument == null ? void 0 : transferInstrument.id));
+      }).catch(() => {
+        showToast({
+          label: i18n.get("failedToFetchRelevantDocuments"),
+          type: ToastType.ERROR
+        });
+      });
+    }
+  }, []);
+  const submitDocuments = async ({
+    forms: forms2,
+    transferInstrument: transferInstrument2,
+    dataSubmitted
+  }) => {
+    if (isDocumentsRequired2(forms2)) {
+      const documentToUpload = await mapPayoutDocumentsToApiDocuments(dataSubmitted, transferInstrument2.id);
+      if (documentToUpload) {
+        try {
+          const documents22 = await documentUtils.uploadDocuments([documentToUpload], transferInstrument2.id);
+          documents22.forEach((document2) => {
+            var _a2;
+            userEvents.addEvent("Saved document", {
+              segmentation: {
+                ...baseTrackingPayload,
+                documentType: document2.type,
+                fileExtention: (_a2 = document2.attachments) == null ? void 0 : _a2.map((item) => getFileExtention(item.pageName))
+              }
+            });
           });
-          const processedBySchema = schema.reduce((acc, fieldKey) => {
-            const dataObjByFormId = mergedState.data[dataStoreId];
-            const allDataObjByFormId = mergedState.allData[dataStoreId];
-            const validObjByFormId = mergedState.valid[dataStoreId];
-            const errorsObjByFormId = mergedState.errors[dataStoreId];
-            const fieldProblemsObjByFormId = mergedState.fieldProblems[dataStoreId];
-            return {
-              data: {
-                ...acc.data,
-                [fieldKey]: dataObjByFormId[fieldKey] ?? allDataObjByFormId[fieldKey]
-              },
-              valid: {
-                ...acc.valid,
-                [fieldKey]: validObjByFormId[fieldKey]
-              },
-              errors: {
-                ...acc.errors,
-                [fieldKey]: errorsObjByFormId[fieldKey]
-              },
-              fieldProblems: {
-                ...acc.fieldProblems,
-                [fieldKey]: fieldProblemsObjByFormId[fieldKey]
+        } catch (e2) {
+          setProblems({
+            ...problems,
+            validationErrors: {
+              payoutAccountDocuments: {
+                bankStatementDocument: true
               }
-            };
-          }, {
-            data: {},
-            valid: {},
-            errors: {},
-            fieldProblems: {}
+            }
           });
-          mergedState.data[dataStoreId] = processedBySchema.data;
-          mergedState.valid[dataStoreId] = processedBySchema.valid;
-          mergedState.errors[dataStoreId] = processedBySchema.errors;
-          mergedState.fieldProblems[dataStoreId] = processedBySchema.fieldProblems;
+          setTransferInstrument(transferInstrument2);
+          throw new Error(i18n.get("remediationMessage_1_704"));
         }
-        mergedState.validityByForm = {
-          ...mergedState.validityByForm,
-          [dataStoreId]: Object.values(mergedState.valid[dataStoreId]).every((isValid) => isValid)
-        };
-        mergedState.hasDataChanged = {
-          ...state2.hasDataChanged,
-          [dataStoreId]: {
-            hasDataChanged: hasDataChanged((_b = state2.initialData) == null ? void 0 : _b[dataStoreId], (_c = mergedState.data) == null ? void 0 : _c[dataStoreId])
-          }
-        };
-        mergedState.hasAnyDataChanged = Object.values(mergedState.hasDataChanged).some(({
-          hasDataChanged: hasDataChanged2
-        }) => hasDataChanged2);
-        mergedState.allValid = Object.values(mergedState.validityByForm).every((isValid) => isValid);
-        mergedState.isValid = !activeForms.length ? mergedState.allValid : activeForms.every((item) => mergedState.validityByForm[item]);
-        mergedState.initialData = structuredClone(state2.initialData);
-        return {
-          currentState: mergedState,
-          prevState: state2,
-          changeInitiatedBy: dataStoreId
-        };
-      }
-      case "resetState": {
-        const dataStoreId = ((_d = action.value) == null ? void 0 : _d.dataStoreId) ?? ((_e = action.value) == null ? void 0 : _e.caller);
-        return {
-          currentState: INITIAL_STATE,
-          prevState: currState,
-          changeInitiatedBy: dataStoreId
-        };
-      }
-      default: {
-        throw new Error(`Unhandled action type: ${action.type}`);
       }
     }
-  }
-  return {
-    reducer: reducer2,
-    setCurrentForms
   };
-}
-function StateProvider({
-  defaultData = {},
-  children
-}) {
-  const defaultState = {
-    currentState: {
-      data: defaultData,
-      allData: defaultData,
-      valid: {},
-      errors: {},
-      fieldProblems: {},
-      validityByForm: {},
-      initialData: defaultData
-    },
-    prevState: {},
-    changeInitiatedBy: null
+  const omitMaskedFieldsIfUnchanged = (maskedFields, dataSubmitted, savedData) => {
+    maskedFields.forEach((maskedField) => {
+      if (dataSubmitted[maskedField] === (savedData == null ? void 0 : savedData[maskedField])) {
+        delete dataSubmitted[maskedField];
+      }
+    });
   };
-  const reducerObj = StateReducer();
-  const [state2, dispatch] = s(reducerObj.reducer, defaultState);
-  const contextValue = F$1(() => ({
-    state: state2,
-    dispatch,
-    setActiveForms: reducerObj.setCurrentForms,
-    getData: () => {
-      var _a;
-      return ((_a = state2 == null ? void 0 : state2.currentState) == null ? void 0 : _a.data) ?? {};
-    },
-    getState: () => state2 == null ? void 0 : state2.currentState
-  }), [reducerObj, state2]);
-  return o(StateContext.Provider, {
-    value: contextValue,
-    children
-  });
-}
-const isInstantVerificationAvailable = ({
-  country: country2,
-  verificationVendorsCallback,
-  bankVerificationVendors
-}) => Boolean(verificationVendorsCallback && (bankVerificationVendors == null ? void 0 : bankVerificationVendors[country2]));
-const rules = ({
-  data,
-  requiredFields
-}) => ({
-  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;
-    if (((_a = data == null ? void 0 : data.payoutVerificationMethod) == null ? void 0 : _a.payoutVerificationMethod) === "manualVerification") {
-      return requiredFields == null ? void 0 : requiredFields.bankStatementRequirement;
+  const onSubmit = async () => {
+    var _a2;
+    setLoadingStatus("loading");
+    const dataSubmitted = data;
+    dataSubmitted.payoutAccountDetails.currency = dataSubmitted.payoutAccountDetails.currency ?? fallbackCurrency;
+    if (defaultPayoutCountry === CountryCodes.Sweden && "iban" in dataSubmitted.payoutAccountDetails) {
+      dataSubmitted.payoutAccountDetails.currency = Currency.EUR;
     }
-  },
-  // "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 getOpeningStep = (forms, remediationActions) => {
-  var _a;
-  if (remediationActions && Object.keys(remediationActions).length > 0) {
-    const allRemediationActions = Object.values(remediationActions).flat().filter((rem) => {
-      var _a2;
-      return ((_a2 = rem.forms) == null ? void 0 : _a2.length) > 0;
-    });
-    if (allRemediationActions.length === 1 && ((_a = allRemediationActions[0]) == null ? void 0 : _a.forms.length) === 1) {
-      const form = forms.find((form2) => {
-        var _a2;
-        return (form2 == null ? void 0 : form2.formId) === ((_a2 = allRemediationActions[0]) == null ? void 0 : _a2.forms[0]);
-      });
-      if (form)
-        return form;
-    }
-    return forms[forms.length - 1];
-  }
-  return forms[0];
-};
-function withFormComposer(WrappedComponent, {
-  getComponentForms,
-  parseConfiguration: parseConfiguration2,
-  rules: rules2,
-  labels: labels2,
-  defaultTaskName,
-  getConfigFor = "contextCountry"
-}) {
-  const WithFormComposer = (props) => {
-    var _a, _b, _c, _d, _e;
-    const {
-      i18n,
-      loadingContext,
-      clientKey,
-      contextCountry: initialContextCountry,
-      setContextCountry: setInitialContextCountry,
-      isReview
-    } = useCoreContext();
-    const {
-      isSettingEnabled
-    } = useSettingsContext();
-    const {
-      getData,
-      getState
-    } = useStateContext();
-    const {
-      getOmittedKeys: getSummaryOmittedKeys = null,
-      formatData: formatDataForSummary = null,
-      omittedForms
-    } = props.summary || {};
-    const taskName = props.taskName ?? defaultTaskName;
-    const [hideDropinLayout, setHideDropinLayout] = h(false);
-    const [hideNavigation, setHideNavigation] = h(false);
-    const [hideFooter, setHideFooter] = h(false);
-    const [hideOnHomeButton, setHideOnHomeButton] = h(false);
-    const [hideBackButton, setHideBackButton] = h(false);
-    const [submitButtonLabel, setSubmitButtonLabel] = h(null);
-    const [skipSubmitAndGoTaskList, setSkipSubmitAndGoTaskList] = h(false);
-    const [customFormNavigationHandlers, setCustomFormNavigationHandlers] = h({});
-    const [shouldValidate, setShouldValidate] = h(false);
-    const [formValidity, setFormValidity] = h({});
-    const formRef = _$1(null);
-    const [loadingStatus, setLoadingStatus] = h("success");
-    const [derivedProps, setDerivedProps] = h(props);
-    const [contextCountry, setContextCountry] = h(props.country || initialContextCountry);
-    const {
-      sliceData: payoutMethodData
-    } = useGlobalDataSlice("payoutVerificationMethod");
-    const configCountry = (getConfigFor === "bankCountry" ? payoutMethodData == null ? void 0 : payoutMethodData.bankCountry : contextCountry) ?? contextCountry;
-    p(() => {
-      loadDocumentGuidance(loadingContext);
-    }, [loadingContext]);
-    const getConfigurationData = T$1(() => getConfiguration({
-      loadingContext,
-      clientKey
-    }, {
-      legalEntityType: props.legalEntityType,
-      capabilities: props.capabilities,
-      // for payout forms, we need to get config for the selected bankCountry, not necessarily the same as the residency/registration country
-      country: configCountry
-    }), [clientKey, configCountry, loadingContext, props.capabilities, props.legalEntityType]);
-    const getPayoutAccountFormatData = T$1(() => getPayoutAccountFormat({
-      loadingContext,
-      clientKey
-    }, configCountry), [clientKey, configCountry, loadingContext]);
-    const {
-      fieldConfigurations,
-      requiredFields,
-      bankVerificationVendors
-    } = useScenarioConfiguration({
-      getConfigurationData,
-      getPayoutAccountFormatData,
-      parseConfiguration: parseConfiguration2,
-      country: configCountry,
-      instantVerificationEnabled: derivedProps.instantVerificationEnabled && derivedProps.handleGetBankVerificationVendors,
-      setLoadingStatus
-    });
-    const isFormStepVisible = (formId) => {
-      if (derivedProps.requiredFields || derivedProps.optionalFields) {
-        return !!derivedProps.requiredFields[formId] || !!derivedProps.optionalFields[formId];
+    const event = {
+      segmentation: {
+        ...baseTrackingPayload,
+        documentType: DocumentType.BANK_STATEMENT,
+        bankCountry: dataSubmitted.payoutVerificationMethod.bankCountry,
+        bankCurrency: dataSubmitted.payoutAccountDetails.currency
       }
-      return true;
     };
-    const isFormSummaryStep = (form) => form.formId === summaryStep.formId;
-    const componentForms = F$1(() => getComponentForms({
-      ...props,
-      bankVerificationVendors
-    }, isSettingEnabled), [bankVerificationVendors, isSettingEnabled, props]);
-    const componentFormsWithSummary = [...Object.values(componentForms), summaryStep];
-    const allowedForms = componentFormsWithSummary.filter((form) => isFormStepVisible(form.formId) || isFormSummaryStep(form));
-    const [activeForm, setActiveForm] = h(getOpeningStep(allowedForms, (_a = props == null ? void 0 : props.problems) == null ? void 0 : _a.remediationActions));
-    const [hasAlreadyNavigatedForm, setHasAlreadyNavigatedForm] = h(false);
-    const getFormIndex = (formId) => allowedForms.findIndex((form) => form.formId === formId);
-    const isFinalStep = getFormIndex(activeForm.formId) === allowedForms.length - 1;
-    const isFirstStep = getFormIndex(activeForm.formId) === 0;
-    p(() => {
-      var _a2;
-      if (hasAlreadyNavigatedForm)
-        return;
-      const openingStep = getOpeningStep(allowedForms, (_a2 = props == null ? void 0 : props.problems) == null ? void 0 : _a2.remediationActions);
-      if (activeForm !== openingStep) {
-        setActiveForm(openingStep);
+    userEvents.addEvent("Provided payout details", event);
+    omitMaskedFieldsIfUnchanged(maskedPayoutFields, dataSubmitted.payoutAccountDetails, existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails);
+    let transferInstrument2 = mapPayoutAccountToTransferInstrument({
+      data: dataSubmitted,
+      legalEntity: legalEntityResponse
+    });
+    const transferInstrumentId = (_a2 = existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails) == null ? void 0 : _a2.transferInstrumentId;
+    try {
+      if (!transferInstrumentId) {
+        transferInstrument2 = await handleCreateTransferInstrument(transferInstrument2);
+      } else {
+        transferInstrument2 = await handleUpdateTransferInstrument(drop("id").from(transferInstrument2), transferInstrumentId);
       }
-    }, [activeForm, allowedForms, (_b = props == null ? void 0 : props.problems) == null ? void 0 : _b.remediationActions, hasAlreadyNavigatedForm]);
-    const evaluateConfiguration = T$1((scenarioConfiguration, country2, formData, isSettingEnabled2, requiredFields2) => {
-      var _a2, _b2, _c2;
-      const fieldsFromCustomRules = rules2 ? rules2({
-        data: formData,
-        country: country2,
-        taskType: props.taskType,
-        isSettingEnabled: isSettingEnabled2,
-        requiredFields: requiredFields2
-      }) : {};
-      const fieldsFormCustomLabels = labels2 ? labels2(formData, country2) : {};
-      const scenarioProps = getPropsFromConfigurations(scenarioConfiguration, componentForms, ((_a2 = props == null ? void 0 : props.problems) == null ? void 0 : _a2.remediationActions) ? Object.values((_b2 = props == null ? void 0 : props.problems) == null ? void 0 : _b2.remediationActions) : [], ((_c2 = props.problems) == null ? void 0 : _c2.missingData) ?? [], props.legalEntityResponse ? getFieldsWithExistingData(props.legalEntityResponse) : [], fieldsFromCustomRules, fieldsFormCustomLabels);
-      setShouldValidate(false);
-      setDerivedProps({
-        ...props,
-        ...scenarioProps,
-        country: configCountry
-      });
-    }, [componentForms, configCountry, props]);
-    p(() => {
-      if (!fieldConfigurations)
-        return;
-      evaluateConfiguration(fieldConfigurations, configCountry, getData(), isSettingEnabled, requiredFields);
-    }, [fieldConfigurations, configCountry, evaluateConfiguration, getData, isSettingEnabled, requiredFields]);
-    const trackNavigation2 = ({
-      fromForm,
-      toForm,
-      component
-    }) => {
-      userEvents.addEvent("Navigated form", {
+      userEvents.addEvent("Saved payout details", event);
+      try {
+        await submitDocuments({
+          forms,
+          transferInstrument: transferInstrument2,
+          dataSubmitted
+        });
+        setLoadingStatus("success");
+        clearToasts();
+        externalOnSubmit == null ? void 0 : externalOnSubmit(dataSubmitted);
+      } catch (e2) {
+        setLoadingStatus("success");
+        showToast({
+          label: e2.message,
+          type: ToastType.ERROR
+        });
+      }
+    } catch (e2) {
+      if (isValidationError(e2)) {
+        const validationErrors = processValidationErrors(e2, taskType);
+        setProblems({
+          ...problems,
+          validationErrors
+        });
+      } else if (isMaintenanceModeError(e2)) {
+        showToast({
+          label: i18n.get("failedToUpdateDetails"),
+          subLabel: i18n.get("maintenanceModeMessage"),
+          type: ToastType.ERROR,
+          duration: "indefinite"
+        });
+      } else {
+        showToast({
+          label: i18n.get("failedToUpdateDetails"),
+          type: ToastType.ERROR
+        });
+      }
+      setLoadingStatus("success");
+      userEvents.addEvent("Encountered error payout details", {
         segmentation: {
-          ...props == null ? void 0 : props.baseTrackingPayload,
-          component,
-          from: fromForm.formId,
-          fromLabel: i18n.get(fromForm.formName),
-          to: toForm.formId,
-          toLabel: i18n.get(toForm.formName)
+          ...baseTrackingPayload,
+          errorCode: e2.errorCode,
+          errorMessage: e2.title,
+          errorType: "BE"
         }
       });
-    };
-    const trackSectionCompletion = (form) => {
-      userEvents.addEvent("Completed form section", {
-        segmentation: {
-          ...props == null ? void 0 : props.baseTrackingPayload,
-          sectionName: form.formId
+    }
+  };
+  const isDocumentsRequired2 = (forms2) => forms2.some((form) => form.formId === payoutDetailsSteps.payoutAccountDocuments.formId);
+  const formatFileSummaryData2 = (documents22) => {
+    var _a2, _b2;
+    return {
+      ...(documents22 == null ? void 0 : documents22.bankStatementDocument) && {
+        bankStatementDocument: {
+          fileName: (_b2 = (_a2 = documents22.bankStatementDocument) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.name
         }
-      });
-    };
-    const gotoFormByFormIndex = (nextFormIndex) => {
-      if (formRef.current.verifyForm) {
-        formRef.current.verifyForm(activeForm.formId).then((isVerified) => {
-          if (isVerified) {
-            setHasAlreadyNavigatedForm(true);
-            setActiveForm(allowedForms[nextFormIndex]);
-          }
-        });
-      } else {
-        setHasAlreadyNavigatedForm(true);
-        setActiveForm(allowedForms[nextFormIndex]);
       }
     };
-    const validateCurrentForm = () => {
-      setShouldValidate(true);
-    };
-    const handleNextClick = () => {
-      var _a2, _b2;
-      if (formRef.current.customNavigationHandler) {
-        formRef.current.customNavigationHandler();
-        return;
-      }
-      if ((_a2 = customFormNavigationHandlers[activeForm.formId]) == null ? void 0 : _a2.onNext) {
-        (_b2 = customFormNavigationHandlers[activeForm.formId]) == null ? void 0 : _b2.onNext();
-        return;
-      }
-      const allFields = (derivedProps == null ? void 0 : derivedProps.allFields) || {};
-      if (isFormSummaryStep(activeForm)) {
-        if (skipSubmitAndGoTaskList) {
-          props.navigateBackToTaskList();
-        } else {
-          props.onSubmit({
-            data: getData(),
-            forms: allowedForms,
-            allFields,
-            setLoadingStatus
-          });
-        }
-        return;
-      }
-      if (formValidity[activeForm.formId]) {
-        if (isFinalStep) {
-          props.onSubmit({
-            data: getData(),
-            forms: allowedForms,
-            allFields,
-            setLoadingStatus
-          });
-          return;
-        }
-        setShouldValidate(false);
-        const toFormIndex = allowedForms.findIndex((form) => form.formId === activeForm.formId) + 1;
-        gotoFormByFormIndex(toFormIndex);
-        const toForm = allowedForms[toFormIndex];
-        trackNavigation2({
-          fromForm: activeForm,
-          toForm,
-          component: "ActionBar"
-        });
-        trackSectionCompletion(activeForm);
-      } else {
-        validateCurrentForm();
-      }
-    };
-    const handleBackClick = () => {
-      const currentFormIndex = allowedForms.findIndex((form) => form.formId === activeForm.formId);
-      if (currentFormIndex) {
-        const fromForm = allowedForms[currentFormIndex];
-        const toForm = allowedForms[currentFormIndex - 1];
-        setActiveForm(toForm);
-        setHasAlreadyNavigatedForm(true);
-        trackNavigation2({
-          fromForm,
-          toForm,
-          component: "ActionBar"
-        });
-      }
-    };
-    const setCustomHandlers = (formId, onNext, onBack) => {
-      setCustomFormNavigationHandlers({
-        ...customFormNavigationHandlers,
-        [formId]: {
-          onNext,
-          onBack
-        }
-      });
-    };
-    const nextButtonText = isReview ? isFormSummaryStep(activeForm) ? i18n.get("confirm") : i18n.get("next") : isFinalStep ? i18n.get(submitButtonLabel ?? "submit") : i18n.get("next");
-    p(() => {
-      props.eventEmitter.on("next", handleNextClick);
-      props.eventEmitter.on("back", handleBackClick);
-      props.eventEmitter.on("validate", validateCurrentForm);
-      return () => {
-        props.eventEmitter.off("next", handleNextClick);
-        props.eventEmitter.off("back", handleNextClick);
-        props.eventEmitter.off("validate", validateCurrentForm);
-      };
-    }, [activeForm, allowedForms]);
-    const onCountryChange = (country2) => {
-      setContextCountry(country2);
-    };
-    const onWrappedComponentChange = (state2) => {
-      var _a2;
-      setFormValidity(state2.validityByForm);
-      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, state2);
-    };
-    const handleStateChange = ({
-      currentState
-    }) => {
-      onWrappedComponentChange(currentState);
-    };
-    const handleLeaveDropin = async () => {
-      var _a2;
-      const data = getData();
-      const hasDataChanged2 = getState().hasAnyDataChanged;
-      if (hasDataChanged2 && ((_a2 = props.canSubmit) == null ? void 0 : _a2.call(props, data))) {
-        setInitialContextCountry(contextCountry);
-        const allFields = (derivedProps == null ? void 0 : derivedProps.allFields) || {};
-        await props.onSubmit({
-          data,
-          forms: allowedForms,
-          allFields,
-          setLoadingStatus
-        });
-      } else {
-        props.handleHomeClick();
-      }
-    };
-    const formFooter = !hideDropinLayout && !hideFooter && o(ActionBar, {
-      onNext: handleNextClick,
-      onBack: isFirstStep ? props.handleBackClick : handleBackClick,
-      backButtonLabel: i18n.get("back"),
-      nextButtonLabel: nextButtonText,
-      onHome: handleLeaveDropin,
-      homeButtonLabel: props.homeButtonLabel,
-      hideOnHomeButton,
-      hideBackButton
-    });
-    const wrappedComponent = o("div", {
-      className: "adyen-kyc-form-container",
-      children: o(LoaderWrapper, {
-        status: loadingStatus,
-        formOpacityWhenLoading: 0.3,
-        loaderSize: "large",
-        children: o(FormRouterContextProvider, {
-          setFormIndex: gotoFormByFormIndex,
-          forms: allowedForms,
-          handleGetIdVerificationToken: props.handleGetIdVerificationToken,
-          children: [o(StateContextWatcher, {
-            owner: "FormComposer",
-            onChange: handleStateChange
-          }), o(WrappedComponent, {
-            ref: formRef,
-            forms: allowedForms,
-            activeForm,
-            ...derivedProps,
-            data: props.data,
-            onChange: onWrappedComponentChange,
-            evaluateConfiguration: (data) => evaluateConfiguration(fieldConfigurations, configCountry, data, isSettingEnabled, requiredFields),
-            country: contextCountry,
-            onCountryChange,
-            legalEntityId: props.legalEntityId,
-            problems: props == null ? void 0 : props.problems,
-            shouldValidate,
-            onNext: handleNextClick,
-            onBack: handleBackClick,
-            setHideDropinLayout,
-            setHideNavigation,
-            setHideFooter,
-            setCustomFormNavigationHandlers: setCustomHandlers,
-            setHideOnHomeButton,
-            setHideBackButton,
-            setSubmitButtonLabel,
-            setSkipSubmitAndGoTaskList,
-            bankVerificationVendors
-          }), activeForm.formId === summaryStep.formId && o("div", {
-            className: "adyen-kyc-form-wrapper",
-            children: o(Summary, {
-              trackNavigation: trackNavigation2,
-              data: formatDataForSummary ? formatDataForSummary(getData(), allowedForms) : getData(),
-              omittedKeys: getSummaryOmittedKeys ? getSummaryOmittedKeys(getData()) : null,
-              omittedForms,
-              forms: allowedForms,
-              gotoForm: gotoFormByFormIndex,
-              labels: derivedProps.labels,
-              problems: props == null ? void 0 : props.problems
-            })
-          }), formFooter]
-        })
-      })
-    });
-    const allowedFormsWithValidity = addValidityToForms(allowedForms, formValidity, props.problems);
-    const sidebar = !hideDropinLayout && !hideNavigation && o(LoaderWrapper, {
-      status: loadingStatus,
-      formOpacityWhenLoading: 0.3,
-      showSpinner: false,
-      className: "adyen-kyc-dropin__sidebar-wrapper",
-      children: o(FormNavigation, {
-        forms: allowedFormsWithValidity,
-        activeForm: allowedFormsWithValidity.find((form) => form.formId === activeForm.formId),
-        gotoForm: gotoFormByFormIndex,
-        validateForm: validateCurrentForm,
-        taskName,
-        trackNavigation: trackNavigation2,
-        hasVerificationErrors: ((_c = props == null ? void 0 : props.problems) == null ? void 0 : _c.verificationErrors) && ((_e = Object.keys((_d = props == null ? void 0 : props.problems) == null ? void 0 : _d.verificationErrors)) == null ? void 0 : _e.length) > 0
-      })
-    });
-    const content = o(Fragment, {
-      children: [sidebar, wrappedComponent]
-    });
-    if (!props.hideDropinLayout) {
-      return o(DropinLayout, {
-        content
-      });
-    }
-    return wrappedComponent;
   };
-  return WithFormComposer;
-}
-const getRegistrationCountry = (legalEntityResponse) => {
-  var _a, _b;
-  if (legalEntityResponse.type === LegalEntityType.INDIVIDUAL) {
-    return (_a = legalEntityResponse.individual) == null ? void 0 : _a.residentialAddress.country;
-  }
-  if (legalEntityResponse.type === LegalEntityType.ORGANIZATION) {
-    return (_b = legalEntityResponse.organization) == null ? void 0 : _b.registeredAddress.country;
-  }
-};
-const labels$1 = () => ({
-  verifiedAccountHolder: () => "accountHolder",
-  verifiedBankCountry: () => "bankCountry",
-  verifiedBankName: () => "bankName",
-  verifiedCurrencyCode: () => "currencyCode",
-  verifiedBankAccountNumber: () => "bankAccountNumber"
-});
-const PayoutAccountWithFormComposer = withFormComposer(PayoutDetailsComponent, {
-  getComponentForms: (props, isSettingEnabled) => {
-    var _a, _b, _c, _d;
-    return getAppropriatePayoutDetailsSteps(props.currentTask, Boolean((_b = (_a = props.data) == null ? void 0 : _a.payoutAccountDetails) == null ? void 0 : _b.transferInstrumentId), props.instantVerificationEnabled && isInstantVerificationAvailable({
-      country: (_d = (_c = props.data) == null ? void 0 : _c.payoutVerificationMethod) == null ? void 0 : _d.bankCountry,
-      bankVerificationVendors: props.bankVerificationVendors,
-      verificationVendorsCallback: props.handleGetBankVerificationVendors
-    }), isSettingEnabled("allowIntraRegionCrossBorderPayout"));
-  },
-  parseConfiguration: ({
-    requiredFields,
-    country: country2,
-    bankVerificationAvailable
-  }) => parsePayoutScenarios({
-    requiredFields: requiredFields == null ? void 0 : requiredFields.fields,
-    country: country2,
-    bankVerificationAvailable
-  }),
-  rules,
-  defaultTaskName: "payoutDetails",
-  labels: labels$1,
-  getConfigFor: "bankCountry"
-});
-function PayoutDetailsDropinComponent(props) {
-  var _a, _b, _c;
-  const {
-    transferInstrument,
-    setTransferInstrument,
-    handleCreateDocument,
-    handleGetDocument,
-    handleUpdateDocument,
-    handleUpdateTransferInstrument,
-    handleCreateTransferInstrument,
-    legalEntityResponse,
-    trackingConfig,
-    accountHolder: accountHolder2
-  } = props;
-  const [bankAccountCountry2, setBankAccountCountry] = h(getRegistrationCountry(legalEntityResponse));
-  const defaultPayoutCountry = bankAccountCountry2 ?? props.country;
-  const {
-    i18n
-  } = useCoreContext();
-  const {
-    showToast,
-    clearToasts
-  } = useToastContext();
-  const [problems, setProblems] = h(props.problems || ((_b = (_a = getCapabilityProblems(legalEntityResponse)) == null ? void 0 : _a.BankAccount) == null ? void 0 : _b[transferInstrument == null ? void 0 : transferInstrument.id]));
-  const documentUtils = documentApiUtils(handleCreateDocument, handleGetDocument, handleUpdateDocument);
-  const existingPayoutDetails = transferInstrument ? mapTransferInstrumentToPayoutAccount(transferInstrument) : void 0;
-  const fallbackCurrency = (_c = currencyByCountry[defaultPayoutCountry]) == null ? void 0 : _c[0];
-  const accountHolderName = accountHolder2 || getLegalEntityNameBasedOnType(legalEntityResponse);
-  const prefilledData = {
-    payoutAccountDetails: {
-      accountHolder: accountHolderName,
-      currency: fallbackCurrency,
-      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails
-    },
-    payoutVerificationMethod: {
-      payoutVerificationMethod: transferInstrument ? isInstantVerifiedAccount(transferInstrument) ? "instantVerification" : "manualVerification" : void 0,
-      bankCountry: defaultPayoutCountry,
-      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutVerificationMethod
-    },
-    payoutAccountVerification: {
-      verifiedAccountHolder: accountHolderName,
-      verifiedBankCountry: defaultPayoutCountry,
-      ...existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountVerification
-    }
-  };
-  const [data, setData] = h(prefilledData || props.data);
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    task: props.taskType
-  });
-  p(() => {
-    userEvents.addPageView("Payout dropin");
-    userEvents.addEvent("Started payout task", {
-      segmentation: {
-        ...baseTrackingPayload
-      }
-    });
-  }, []);
-  p(() => {
-    var _a2;
-    const documentIds = ((_a2 = transferInstrument == null ? void 0 : transferInstrument.documentDetails) == null ? void 0 : _a2.map((documentReference) => documentReference.id)) || [];
-    if (documentIds.length) {
-      documentUtils.fetchDocuments(documentIds, transferInstrument == null ? void 0 : transferInstrument.id).then(() => {
-        const mappedDocuments = mapApiDocumentToPayoutDocuments(transferInstrument == null ? void 0 : transferInstrument.id);
-        setData({
-          ...data,
-          payoutAccountDocuments: mappedDocuments
-        });
-      }).catch(() => {
-        showToast({
-          label: i18n.get("failedToFetchRelevantDocuments"),
-          type: ToastType.ERROR
-        });
-      });
-    }
-  }, []);
-  const submitDocuments = async ({
-    forms,
-    transferInstrument: transferInstrument2,
-    dataSubmitted
-  }) => {
-    if (isDocumentsRequired2(forms)) {
-      const documentToUpload = await mapPayoutDocumentsToApiDocuments(dataSubmitted, transferInstrument2.id);
-      if (documentToUpload) {
-        try {
-          const documents2 = await documentUtils.uploadDocuments([documentToUpload], transferInstrument2.id);
-          documents2.forEach((document2) => {
-            var _a2;
-            userEvents.addEvent("Saved document", {
-              segmentation: {
-                ...baseTrackingPayload,
-                documentType: document2.type,
-                fileExtention: (_a2 = document2.attachments) == null ? void 0 : _a2.map((item) => getFileExtention(item.pageName))
-              }
-            });
-          });
-        } catch (e2) {
-          setProblems({
-            ...problems,
-            validationErrors: {
-              payoutAccountDocuments: {
-                bankStatementDocument: true
-              }
-            }
-          });
-          setTransferInstrument(transferInstrument2);
-          throw new Error(i18n.get("remediationMessage_1_704"));
-        }
-      }
-    }
-  };
-  const omitMaskedFieldsIfUnchanged = (maskedFields, dataSubmitted, savedData) => {
-    maskedFields.forEach((maskedField) => {
-      if (dataSubmitted[maskedField] === (savedData == null ? void 0 : savedData[maskedField])) {
-        delete dataSubmitted[maskedField];
-      }
-    });
-  };
-  const onSubmit = async ({
-    data: dataSubmitted,
-    forms,
-    setLoadingStatus
-  }) => {
-    var _a2, _b2;
-    setLoadingStatus("loading");
-    dataSubmitted.payoutAccountDetails.currency = dataSubmitted.payoutAccountDetails.currency ?? fallbackCurrency;
-    if (defaultPayoutCountry === CountryCodes.Sweden && "iban" in dataSubmitted.payoutAccountDetails) {
-      dataSubmitted.payoutAccountDetails.currency = Currency.EUR;
-    }
-    const event = {
-      segmentation: {
-        ...baseTrackingPayload,
-        documentType: DocumentType.BANK_STATEMENT,
-        bankCountry: dataSubmitted.payoutVerificationMethod.bankCountry,
-        bankCurrency: dataSubmitted.payoutAccountDetails.currency
-      }
-    };
-    userEvents.addEvent("Provided payout details", event);
-    omitMaskedFieldsIfUnchanged(maskedPayoutFields, dataSubmitted.payoutAccountDetails, existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails);
-    let transferInstrument2 = mapPayoutAccountToTransferInstrument({
-      data: dataSubmitted,
-      legalEntity: legalEntityResponse
-    });
-    const transferInstrumentId = (_a2 = existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails) == null ? void 0 : _a2.transferInstrumentId;
-    try {
-      if (!transferInstrumentId) {
-        transferInstrument2 = await handleCreateTransferInstrument(transferInstrument2);
-      } else {
-        transferInstrument2 = await handleUpdateTransferInstrument(drop("id").from(transferInstrument2), transferInstrumentId);
-      }
-      userEvents.addEvent("Saved payout details", event);
-      try {
-        await submitDocuments({
-          forms,
-          transferInstrument: transferInstrument2,
-          dataSubmitted
-        });
-        setLoadingStatus("success");
-        clearToasts();
-        (_b2 = props.onSubmit) == null ? void 0 : _b2.call(props, dataSubmitted);
-      } catch (e2) {
-        setLoadingStatus("success");
-        showToast({
-          label: e2.message,
-          type: ToastType.ERROR
-        });
-      }
-    } catch (e2) {
-      if (isValidationError(e2)) {
-        const validationErrors = processValidationErrors(e2, props.taskType);
-        setProblems({
-          ...problems,
-          validationErrors
-        });
-      } else if (isMaintenanceModeError(e2)) {
-        showToast({
-          label: i18n.get("failedToUpdateDetails"),
-          subLabel: i18n.get("maintenanceModeMessage"),
-          type: ToastType.ERROR,
-          duration: "indefinite"
-        });
-      } else {
-        showToast({
-          label: i18n.get("failedToUpdateDetails"),
-          type: ToastType.ERROR
-        });
-      }
-      setLoadingStatus("success");
-      userEvents.addEvent("Encountered error payout details", {
-        segmentation: {
-          ...baseTrackingPayload,
-          errorCode: e2.errorCode,
-          errorMessage: e2.title,
-          errorType: "BE"
-        }
-      });
-    }
-  };
-  const isDocumentsRequired2 = (forms) => forms.some((form) => form.formId === payoutSteps.payoutAccountDocuments.formId);
-  const formatFileSummaryData2 = (documents2) => {
-    var _a2, _b2;
-    return {
-      ...(documents2 == null ? void 0 : documents2.bankStatementDocument) && {
-        bankStatementDocument: {
-          fileName: (_b2 = (_a2 = documents2.bankStatementDocument) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.name
-        }
-      }
-    };
-  };
-  const canSubmit2 = (data2) => {
+  const canSubmit2 = () => {
     var _a2;
-    if (((_a2 = data2.payoutVerificationMethod) == null ? void 0 : _a2.payoutVerificationMethod) === "instantVerification") {
+    if (((_a2 = data.payoutVerificationMethod) == null ? void 0 : _a2.payoutVerificationMethod) === "instantVerification") {
       return false;
     }
-    const bankDetails = data2.payoutAccountDetails;
-    return Object.values(bankDetails).every(Boolean);
+    const bankDetails = data.payoutAccountDetails;
+    return !isEmpty(bankDetails) && Object.values(bankDetails).every(Boolean);
   };
   const datasetUtils = datasetUtilities(i18n.locale);
-  const formatDataForSummary = (data2) => {
+  const formatDataForSummary = () => {
     var _a2;
-    const summaryData = cloneObject(data2);
+    const summaryData = cloneObject(data);
     if (((_a2 = summaryData.payoutVerificationMethod) == null ? void 0 : _a2.bankCountry) && summaryData.payoutAccountDetails) {
       summaryData.payoutAccountDetails.bankCountry = datasetUtils.getCountryName(summaryData.payoutVerificationMethod.bankCountry);
     }
     if (summaryData == null ? void 0 : summaryData.payoutAccountDocuments) {
-      summaryData.payoutAccountDocuments.bankStatementDocument = formatFileSummaryData2(data2 == null ? void 0 : data2.payoutAccountDocuments);
+      summaryData.payoutAccountDocuments.bankStatementDocument = formatFileSummaryData2(data == null ? void 0 : data.payoutAccountDocuments);
     }
     return summaryData;
   };
-  return o(StateProvider, {
-    defaultData: data,
-    children: [o(StateContextWatcher, {
-      onChange: ({
-        currentState
-      }) => {
-        var _a2, _b2;
-        return setBankAccountCountry((_b2 = (_a2 = currentState == null ? void 0 : currentState.data) == null ? void 0 : _a2.payoutVerificationMethod) == null ? void 0 : _b2.bankCountry);
-      }
-    }), o(PayoutAccountWithFormComposer, {
-      baseTrackingPayload,
-      taskType: props.taskType,
-      taskName: props.taskName,
-      capabilities: props.capabilities,
-      data,
+  const {
+    handleNextClick,
+    handleBackClick,
+    activeForm,
+    shouldValidate,
+    setShouldValidate,
+    gotoFormByFormIndex,
+    nextButtonLabel
+  } = useFormComposer({
+    problems,
+    baseTrackingPayload,
+    forms,
+    submitButtonLabel,
+    onSubmit,
+    skipSubmit,
+    onSkipSubmit: navigateBackToTaskList
+  });
+  return o(FormWrapper, {
+    taskName: taskName ?? "payoutDetails",
+    activeForm,
+    summary: {
+      data: formatDataForSummary(),
+      omittedKeys: ["transferInstrumentId"],
+      omittedForms: [payoutSteps.payoutVerificationMethod.formId],
+      labels: derivedProps == null ? void 0 : derivedProps.labels
+    },
+    handleBackClick,
+    handleNextClick,
+    handleHomeClick,
+    hideDropinLayout,
+    hideHomeButton,
+    hideBackButton,
+    loadingStatus,
+    forms,
+    onSubmit,
+    baseTrackingPayload,
+    gotoFormByFormIndex,
+    nextButtonLabel,
+    homeButtonLabel,
+    validateForm: () => setShouldValidate(true),
+    canSubmit: canSubmit2() && hasDataChanged(prefilledData, data),
+    problems,
+    children: o(PayoutDetailsComponent, {
+      ...derivedProps,
+      capabilities,
+      data: {
+        ...prefilledData,
+        payoutAccountDocuments: documents2
+      },
       country: defaultPayoutCountry,
+      activeForm,
+      forms,
       problems,
-      eventEmitter: props.eventEmitter,
-      accountHolder: props.accountHolder ?? getLegalEntityNameBasedOnType(props.legalEntityResponse),
-      hideDropinLayout: props.hideDropinLayout,
-      onChange: props.onChange,
-      handleHomeClick: props.handleHomeClick,
-      homeButtonLabel: props.homeButtonLabel,
-      legalEntityType: legalEntityResponse.type,
+      eventEmitter,
+      onBack: handleBackClick,
+      accountHolder: accountHolder2 ?? getLegalEntityNameBasedOnType(legalEntityResponse),
+      setHideDropinLayout,
+      setSubmitButtonLabel,
+      setHideOnHomeButton: setHideHomeButton,
+      setHideBackButton,
+      setSkipSubmit,
+      onChange,
       legalEntityResponse,
-      summary: {
-        formatData: formatDataForSummary,
-        getOmittedKeys: () => ["transferInstrumentId"],
-        omittedForms: [payoutSteps.payoutVerificationMethod.formId]
-      },
-      canSubmit: canSubmit2,
-      onSubmit,
-      handleBackClick: props.handleBackClick,
-      handleCreateTransferInstrument: props.handleCreateTransferInstrument,
-      handleUpdateTransferInstrument: props.handleUpdateTransferInstrument,
-      handleGetBankVerificationVendors: props.handleGetBankVerificationVendors,
-      navigateBackToTaskList: props.navigateBackToTaskList,
-      instantVerificationEnabled: !transferInstrument,
-      refreshLegalEntity: props.refreshLegalEntity
-    })]
+      handleGetBankVerificationVendors,
+      instantVerificationEnabled,
+      refreshLegalEntity,
+      shouldValidate,
+      bankVerificationVendors
+    })
   });
 }
 const ContractViewer$1 = "";
@@ -24260,658 +23833,1233 @@ function TrustRoleAndEntityTypeComponent(props) {
     } = e2.target;
     handleChangeFor("descriptionUndefinedBeneficiary")(value);
   };
-  const changeRoles = (roles) => {
-    handleChangeFor("role")(roles);
-    if (roles.includes("undefinedBeneficiary")) {
-      handleChangeFor("entityType")(void 0);
+  const changeRoles = (roles) => {
+    handleChangeFor("role")(roles);
+    if (roles.includes("undefinedBeneficiary")) {
+      handleChangeFor("entityType")(void 0);
+    } else {
+      handleChangeFor("descriptionUndefinedBeneficiary")(void 0);
+    }
+  };
+  const changeSettlorExemptionReasons = (exemptionReasons) => {
+    var _a;
+    if (exemptionReasons.includes("noneOfTheAbove")) {
+      handleChangeFor("settlorExemptionReason")(((_a = data.settlorExemptionReason) == null ? void 0 : _a.includes("noneOfTheAbove")) ? exemptionReasons.filter((reason) => reason !== "noneOfTheAbove") : ["noneOfTheAbove"]);
+      return;
+    }
+    handleChangeFor("settlorExemptionReason")(exemptionReasons);
+  };
+  return o("form", {
+    className: "adyen-kyc-trust__role-and-entity-type adl-u-width-full",
+    children: [o(FormHeader, {
+      heading: i18n.get("roleAndEntityType")
+    }), o(ErrorPanel, {
+      verificationErrors: props == null ? void 0 : props.formVerificationErrors,
+      validationErrors: props == null ? void 0 : props.fieldValidationErrors,
+      formUtils,
+      id: "ariaErrorField"
+    }), o(Field, {
+      name: "role",
+      label: formUtils.getLabel("role", "selectTheApplicableRoles"),
+      classNameModifiers: ["role"],
+      errorMessage: formUtils.getErrorMessage("role", errors, fieldProblems),
+      isValid: valid.role,
+      disabled: availableRoles.length === 0,
+      showErrorIconBottom: true,
+      children: (childProps) => o(MultiSelectList, {
+        ...childProps,
+        options: Object.values(TrustMemberTypes),
+        selected: data.role ?? [],
+        onSelect: changeRoles,
+        mapToSelectItem: (role2) => ({
+          ...makeSelectItemForTrustRole(role2, i18n),
+          disabled: !availableRoles.includes(role2)
+        })
+      })
+    }), (schema == null ? void 0 : schema.includes("entityType")) && o(Field, {
+      name: "entityType",
+      useLabelElement: false,
+      errorMessage: formUtils.getErrorMessage("entityType", errors, fieldProblems),
+      label: formUtils.getLabel("entityType", "whatTypeOfYourMembersEntity"),
+      classNameModifiers: ["entityType"],
+      disabled: !!(trustMember == null ? void 0 : trustMember.reference),
+      children: (childProps) => o(RadioCardSelect, {
+        ...childProps,
+        options: trustMemberLegalEntityTypes,
+        onSelect: handleChangeFor("entityType"),
+        selected: data.entityType,
+        optionId: (option) => leTypeCardDetails[option].id,
+        optionName: (option) => leTypeCardDetails[option].name,
+        optionDescription: (option) => leTypeCardDetails[option].description,
+        "aria-required": true,
+        "aria-label": formUtils.getLabel("entityType", "whatTypeOfYourMembersEntity"),
+        "aria-invalid": !valid.entityType
+      })
+    }), (schema == null ? void 0 : schema.includes("descriptionUndefinedBeneficiary")) && o(Field, {
+      name: "descriptionUndefinedBeneficiary",
+      label: formUtils.getLabel("description"),
+      isValid: valid.descriptionUndefinedBeneficiary,
+      errorMessage: formUtils.getErrorMessage("descriptionUndefinedBeneficiary", errors, fieldProblems),
+      children: (childProps) => o(TextArea, {
+        ...childProps,
+        name: "descriptionUndefinedBeneficiary",
+        value: data.descriptionUndefinedBeneficiary,
+        classNameModifiers: ["descriptionUndefinedBeneficiary"],
+        maxLength: CHARACTERS_LIMIT,
+        onInput: onInputDescription,
+        helper: i18n.get("describeWhoIsABeneficiaryInYourTrust"),
+        "aria-required": true,
+        "aria-label": formUtils.getLabel("descriptionUndefinedBeneficiary"),
+        "aria-invalid": !valid.descriptionUndefinedBeneficiary
+      })
+    }), (schema == null ? void 0 : schema.includes("settlorExemptionReason")) && o(Field, {
+      name: "settlorExemptionReason",
+      label: formUtils.getLabel("settlorExemptionReason", "whichOfTheseApplyToTheSettlor"),
+      isValid: valid.settlorExemptionReason,
+      errorMessage: formUtils.getErrorMessage("settlorExemptionReason", errors, fieldProblems),
+      showErrorIconBottom: true,
+      children: (childProps) => o(MultiSelectList, {
+        ...childProps,
+        options: settlorExemptionReasonWithNoneOfTheAbove,
+        selected: data.settlorExemptionReason ?? [],
+        onSelect: changeSettlorExemptionReasons,
+        mapToSelectItem: (reason) => ({
+          id: reason,
+          name: i18n.get(reason)
+        })
+      })
+    })]
+  });
+}
+const summary = {
+  formId: "summary",
+  formName: "summary"
+};
+const roleAndTypeForms = {
+  roleAndEntityType: {
+    formId: "roleAndEntityType",
+    formName: "roleAndEntityType",
+    fields: ["role", "entityType"]
+  },
+  memberDetails: {
+    formId: "memberDetails",
+    formName: "memberDetails"
+  },
+  summary
+};
+const undefinedBeneficiaryForms = {
+  roleAndEntityType: {
+    formId: "roleAndEntityType",
+    formName: "roleAndEntityType",
+    fields: ["role", "entityType", "descriptionUndefinedBeneficiary"]
+  },
+  summary
+};
+const exemptSettlorForms = {
+  roleAndEntityType: {
+    formId: "roleAndEntityType",
+    formName: "roleAndEntityType",
+    fields: ["role", "entityType", "settlorExemptionReason"]
+  },
+  summary
+};
+const logger$3 = createLogger("RoleAndTypeDropin");
+function RoleAndTypeDropinComponent(props) {
+  var _a, _b;
+  const {
+    i18n
+  } = useCoreContext();
+  const {
+    showToast
+  } = useToastContext();
+  const [trustMember, setTrustMember] = h(props.trustMember);
+  const [shouldValidate, setShouldValidate] = h(false);
+  const roleAndEntityTypeFormID = "roleAndEntityType";
+  const [formList, setFormList] = h([...Object.values(roleAndTypeForms)]);
+  const [formValidity, setFormValidity] = h({
+    [roleAndEntityTypeFormID]: false
+  });
+  const taskName = "trustMembers";
+  const [activeForm, setActiveForm] = h(formList[0]);
+  const isSummaryStep = activeForm.formId === summaryStep.formId;
+  const trustMemberCase = ((_a = trustMember == null ? void 0 : trustMember.settlorExemptionReason) == null ? void 0 : _a.length) ? "exemptSettlor" : ((_b = trustMember == null ? void 0 : trustMember.types) == null ? void 0 : _b.includes(TrustMemberTypes.UNDEFINED_BENEFICIARY)) ? "undefinedBeneficiary" : "fullEntity";
+  const navigateToTrustMember = () => {
+    const trustMemberAssociation = {
+      ...props.trustMember,
+      legalEntityType: trustMember == null ? void 0 : trustMember.legalEntityType,
+      types: trustMember == null ? void 0 : trustMember.types
+    };
+    props.navigateNext(trustMemberAssociation);
+  };
+  const submitExemptSettlor = async (exemptSettlor, trustLE) => {
+    var _a2;
+    const existingTrustMembers = getOwnTrustMembers(trustLE);
+    const existingSettlor = existingTrustMembers.find((member) => member.type === "settlor");
+    const updatedAssociations = [...(trustLE.entityAssociations ?? []).filter((association) => association !== existingSettlor), exemptSettlor];
+    const updatedTrustLE = {
+      ...trustLE,
+      entityAssociations: updatedAssociations
+    };
+    try {
+      await ((_a2 = props.handleUpdateLegalEntity) == null ? void 0 : _a2.call(props, updatedTrustLE, trustLE.id));
+      showToast({
+        label: i18n.get("successfullyUpdatedDetails"),
+        type: ToastType.SUCCESS
+      });
+      props.onSubmit(updatedTrustLE);
+    } catch (e2) {
+      logger$3.error(e2);
+      showToast({
+        label: i18n.get("failedToUpdateDetails"),
+        type: ToastType.ERROR
+      });
+    }
+  };
+  const submitUndefinedBeneficiary = async () => {
+    var _a2, _b2, _c;
+    if (((_a2 = props.trustMember) == null ? void 0 : _a2.descriptionUndefinedBeneficiary) === (trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary)) {
+      props.onSubmit(props.trust);
+      return;
+    }
+    const existingUndefinedBeneficiaryInfo = (((_b2 = props.trust.trust) == null ? void 0 : _b2.undefinedBeneficiaryInfo) ?? []).filter((ub) => ub.reference !== (trustMember == null ? void 0 : trustMember.reference));
+    const updatedTrust = {
+      trust: {
+        undefinedBeneficiaryInfo: [{
+          ...(trustMember == null ? void 0 : trustMember.reference) && {
+            reference: trustMember == null ? void 0 : trustMember.reference
+          },
+          description: (trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary) || ""
+        }, ...existingUndefinedBeneficiaryInfo]
+      }
+    };
+    try {
+      await ((_c = props.handleUpdateLegalEntity) == null ? void 0 : _c.call(props, updatedTrust, props.trust.id));
+      showToast({
+        label: i18n.get("successfullyUpdatedDetails"),
+        type: ToastType.SUCCESS
+      });
+      props.onSubmit(updatedTrust);
+    } catch (e2) {
+      logger$3.error(e2);
+      showToast({
+        label: i18n.get("failedToUpdateDetails"),
+        type: ToastType.ERROR
+      });
+    }
+  };
+  const formatRolesForSummary = (roles) => roles.map((role2) => i18n.get(getTrustMemberName(role2))).join(", ");
+  const formatSettlorExemptionReasonsForSummary = (reasons) => reasons.map((reason) => i18n.get(reason)).join(", ");
+  const summaryData = {
+    roleAndEntityType: {
+      role: formatRolesForSummary((trustMember == null ? void 0 : trustMember.types) ?? []),
+      entityType: (trustMember == null ? void 0 : trustMember.legalEntityType) ? i18n.get(trustMember == null ? void 0 : trustMember.legalEntityType) : void 0,
+      descriptionUndefinedBeneficiary: trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary,
+      otherInformation: formatSettlorExemptionReasonsForSummary((trustMember == null ? void 0 : trustMember.settlorExemptionReason) ?? [])
+    }
+  };
+  const onNavigateToNextStep = () => {
+    if (isSummaryStep) {
+      switch (trustMemberCase) {
+        case "exemptSettlor":
+          if (!trustMember)
+            return;
+          submitExemptSettlor(trustMember, props.trust).catch(logger$3.error);
+          break;
+        case "undefinedBeneficiary":
+          submitUndefinedBeneficiary().catch(logger$3.error);
+          break;
+        default:
+          return;
+      }
+    }
+    if (!formValidity[roleAndEntityTypeFormID]) {
+      setShouldValidate(true);
+      return;
+    }
+    if (trustMemberCase === "fullEntity") {
+      navigateToTrustMember();
+    } else {
+      setActiveForm(summary);
+    }
+  };
+  const onTrustMemberChange = ({
+    data,
+    isValid = false,
+    dataStoreId = void 0
+  }) => {
+    if (dataStoreId) {
+      setFormValidity({
+        ...formValidity,
+        [dataStoreId]: isValid
+      });
+    }
+    if ((data == null ? void 0 : data.role) && data.role.includes(TrustMemberTypes.UNDEFINED_BENEFICIARY)) {
+      setFormList([...Object.values(undefinedBeneficiaryForms)]);
+    } else if (isExemptSettlor(data)) {
+      setFormList([...Object.values(exemptSettlorForms)]);
     } else {
-      handleChangeFor("descriptionUndefinedBeneficiary")(void 0);
+      setFormList([...Object.values(roleAndTypeForms)]);
     }
+    setTrustMember({
+      ...props.trustMember,
+      ...data.role ? {
+        types: data.role
+      } : {},
+      legalEntityType: data.entityType,
+      ...data.descriptionUndefinedBeneficiary ? {
+        descriptionUndefinedBeneficiary: data.descriptionUndefinedBeneficiary
+      } : {},
+      ...isExemptSettlor(data) ? {
+        settlorExemptionReason: data.settlorExemptionReason.filter((reason) => reason !== "noneOfTheAbove")
+      } : {}
+    });
   };
-  const changeSettlorExemptionReasons = (exemptionReasons) => {
-    var _a;
-    if (exemptionReasons.includes("noneOfTheAbove")) {
-      handleChangeFor("settlorExemptionReason")(((_a = data.settlorExemptionReason) == null ? void 0 : _a.includes("noneOfTheAbove")) ? exemptionReasons.filter((reason) => reason !== "noneOfTheAbove") : ["noneOfTheAbove"]);
+  const saveRolesAndNavigate = async () => {
+    var _a2, _b2, _c;
+    if (!trustMember) {
       return;
     }
-    handleChangeFor("settlorExemptionReason")(exemptionReasons);
+    const {
+      reference
+    } = trustMember;
+    if (reference && hasRolesChanged(trustMember.types, (_a2 = props.trustMember) == null ? void 0 : _a2.types) && props.trust.id) {
+      const existingTrustAssociations = getOwnEntityAssociations(props.trust);
+      const updatedTrustAssociations = {
+        entityAssociations: [...((_b2 = trustMember.types) == null ? void 0 : _b2.map((role2) => ({
+          type: role2,
+          reference
+        }))) || [], ...existingTrustAssociations.filter((ea) => ea.legalEntityId !== trustMember.reference) || []]
+      };
+      await ((_c = props.handleUpdateLegalEntity) == null ? void 0 : _c.call(props, updatedTrustAssociations, props.trust.id));
+    }
+    props.navigateBack();
   };
-  return o("form", {
-    className: "adyen-kyc-trust__role-and-entity-type adl-u-width-full",
-    children: [o(FormHeader, {
-      heading: i18n.get("roleAndEntityType")
-    }), o(ErrorPanel, {
-      verificationErrors: props == null ? void 0 : props.formVerificationErrors,
-      validationErrors: props == null ? void 0 : props.fieldValidationErrors,
-      formUtils,
-      id: "ariaErrorField"
-    }), o(Field, {
-      name: "role",
-      label: formUtils.getLabel("role", "selectTheApplicableRoles"),
-      classNameModifiers: ["role"],
-      errorMessage: formUtils.getErrorMessage("role", errors, fieldProblems),
-      isValid: valid.role,
-      disabled: availableRoles.length === 0,
-      showErrorIconBottom: true,
-      children: (childProps) => o(MultiSelectList, {
-        ...childProps,
-        options: Object.values(TrustMemberTypes),
-        selected: data.role ?? [],
-        onSelect: changeRoles,
-        mapToSelectItem: (role2) => ({
-          ...makeSelectItemForTrustRole(role2, i18n),
-          disabled: !availableRoles.includes(role2)
+  const hasRolesChanged = (newRoles = [], existingRoles = []) => newRoles.length !== existingRoles.length || !newRoles.every((newRole) => existingRoles.includes(newRole));
+  const formsWithValidity = Object.values(formList).map((form) => ({
+    formId: form.formId,
+    formName: form.formName,
+    isValid: formValidity[form.formId]
+  }));
+  const gotoFormByFormIndex = (formIndex) => {
+    setActiveForm(formList[formIndex]);
+  };
+  const content = o(Fragment, {
+    children: [o(FormNavigation, {
+      forms: formsWithValidity,
+      activeForm: formsWithValidity.find((form) => form.formId === activeForm.formId),
+      taskName,
+      gotoForm: noop
+    }), o("div", {
+      className: "adyen-kyc-form-container",
+      children: [o("div", {
+        className: activeForm.formId !== "roleAndEntityType" ? "adyen-kyc-form-wrapper adyen-kyc-form-wrapper--hidden" : "adyen-kyc-form-wrapper",
+        children: o(TrustRoleAndEntityTypeComponent, {
+          id: roleAndEntityTypeFormID,
+          trustMember: props.trustMember,
+          onChange: onTrustMemberChange,
+          shouldValidate
         })
-      })
-    }), (schema == null ? void 0 : schema.includes("entityType")) && o(Field, {
-      name: "entityType",
-      useLabelElement: false,
-      errorMessage: formUtils.getErrorMessage("entityType", errors, fieldProblems),
-      label: formUtils.getLabel("entityType", "whatTypeOfYourMembersEntity"),
-      classNameModifiers: ["entityType"],
-      disabled: !!(trustMember == null ? void 0 : trustMember.reference),
-      children: (childProps) => o(RadioCardSelect, {
-        ...childProps,
-        options: trustMemberLegalEntityTypes,
-        onSelect: handleChangeFor("entityType"),
-        selected: data.entityType,
-        optionId: (option) => leTypeCardDetails[option].id,
-        optionName: (option) => leTypeCardDetails[option].name,
-        optionDescription: (option) => leTypeCardDetails[option].description,
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("entityType", "whatTypeOfYourMembersEntity"),
-        "aria-invalid": !valid.entityType
-      })
-    }), (schema == null ? void 0 : schema.includes("descriptionUndefinedBeneficiary")) && o(Field, {
-      name: "descriptionUndefinedBeneficiary",
-      label: formUtils.getLabel("description"),
-      isValid: valid.descriptionUndefinedBeneficiary,
-      errorMessage: formUtils.getErrorMessage("descriptionUndefinedBeneficiary", errors, fieldProblems),
-      children: (childProps) => o(TextArea, {
-        ...childProps,
-        name: "descriptionUndefinedBeneficiary",
-        value: data.descriptionUndefinedBeneficiary,
-        classNameModifiers: ["descriptionUndefinedBeneficiary"],
-        maxLength: CHARACTERS_LIMIT,
-        onInput: onInputDescription,
-        helper: i18n.get("describeWhoIsABeneficiaryInYourTrust"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("descriptionUndefinedBeneficiary"),
-        "aria-invalid": !valid.descriptionUndefinedBeneficiary
-      })
-    }), (schema == null ? void 0 : schema.includes("settlorExemptionReason")) && o(Field, {
-      name: "settlorExemptionReason",
-      label: formUtils.getLabel("settlorExemptionReason", "whichOfTheseApplyToTheSettlor"),
-      isValid: valid.settlorExemptionReason,
-      errorMessage: formUtils.getErrorMessage("settlorExemptionReason", errors, fieldProblems),
-      showErrorIconBottom: true,
-      children: (childProps) => o(MultiSelectList, {
-        ...childProps,
-        options: settlorExemptionReasonWithNoneOfTheAbove,
-        selected: data.settlorExemptionReason ?? [],
-        onSelect: changeSettlorExemptionReasons,
-        mapToSelectItem: (reason) => ({
-          id: reason,
-          name: i18n.get(reason)
+      }), isSummaryStep && o("div", {
+        className: "adyen-kyc-form-wrapper",
+        children: o(Summary, {
+          data: summaryData,
+          forms: [undefinedBeneficiaryForms.roleAndEntityType],
+          gotoForm: gotoFormByFormIndex
         })
-      })
+      }), o(ActionBar, {
+        onNext: onNavigateToNextStep,
+        onHome: saveRolesAndNavigate,
+        nextButtonLabel: isSummaryStep ? i18n.get("submit") : i18n.get("next"),
+        homeButtonLabel: i18n.get("saveAndGoToOverview")
+      })]
     })]
   });
+  return o(DropinLayout, {
+    content
+  });
 }
-const summary = {
-  formId: "summary",
-  formName: "summary"
-};
-const roleAndTypeForms = {
-  roleAndEntityType: {
-    formId: "roleAndEntityType",
-    formName: "roleAndEntityType",
-    fields: ["role", "entityType"]
-  },
-  memberDetails: {
-    formId: "memberDetails",
-    formName: "memberDetails"
+const serviceAgreementValidationRules = {
+  signer: {
+    modes: ["blur"],
+    validate: (signer2) => !!signer2,
+    errorMessage: "fieldIsRequired"
   },
-  summary
+  acceptServiceAgreement: {
+    modes: ["blur"],
+    validate: (acceptServiceAgreement) => !!acceptServiceAgreement,
+    errorMessage: "fieldIsRequired"
+  }
 };
-const undefinedBeneficiaryForms = {
-  roleAndEntityType: {
-    formId: "roleAndEntityType",
-    formName: "roleAndEntityType",
-    fields: ["role", "entityType", "descriptionUndefinedBeneficiary"]
-  },
-  summary
+const logger$2 = createLogger("useServiceAgreement");
+const FALLBACK_LANGUAGE_CODE = "en";
+const useServiceAgreement = ({
+  handleGetServiceAgreement,
+  handleServiceAgreementIsNotAvailableInThatLanguage,
+  legalEntityId,
+  serviceAgreementType,
+  language
+}) => {
+  const [serviceAgreement, setServiceAgreement] = h();
+  const [loading2, setLoading] = h("loading");
+  const [agreementLanguage, setAgreementLanguage] = h(language);
+  p(() => {
+    if (agreementLanguage !== language) {
+      setAgreementLanguage(language);
+    }
+  }, [language]);
+  p(() => {
+    const requestServiceAgreement = async () => {
+      setLoading("loading");
+      try {
+        const {
+          termsOfServiceDocumentId,
+          document: document2
+        } = await handleGetServiceAgreement(legalEntityId, {
+          type: serviceAgreementType,
+          language: agreementLanguage
+        });
+        if (!document2) {
+          logger$2.log('"document" field was missing in response');
+          return;
+        }
+        const contract = JSON.parse(decodeURIComponent(escape(window.atob(document2))));
+        setServiceAgreement({
+          id: termsOfServiceDocumentId,
+          contract
+        });
+        setLoading("success");
+      } catch (err) {
+        if (agreementLanguage !== FALLBACK_LANGUAGE_CODE) {
+          handleServiceAgreementIsNotAvailableInThatLanguage();
+          setAgreementLanguage(FALLBACK_LANGUAGE_CODE);
+          return;
+        }
+        throw err;
+      }
+    };
+    requestServiceAgreement().catch(logger$2.error);
+  }, [handleGetServiceAgreement, handleServiceAgreementIsNotAvailableInThatLanguage, agreementLanguage, legalEntityId, serviceAgreementType]);
+  return {
+    loading: loading2,
+    serviceAgreement
+  };
 };
-const exemptSettlorForms = {
-  roleAndEntityType: {
-    formId: "roleAndEntityType",
-    formName: "roleAndEntityType",
-    fields: ["role", "entityType", "settlorExemptionReason"]
-  },
-  summary
+const serviceAgreementTypesTranslationMapping = {
+  adyenForPlatformsManage: "paymentProcessingTerms",
+  adyenIssuing: "accountHolderTerms",
+  adyenForPlatformsAdvanced: "paymentProcessingTerms",
+  adyenCapital: "capitalUserTerms",
+  adyenAccount: "businessAccountTerms",
+  adyenCard: "cardUserTerms",
+  adyenFranchisee: "franchiseesTAndCs"
 };
-const logger$3 = createLogger("RoleAndTypeDropin");
-function RoleAndTypeDropinComponent(props) {
-  var _a, _b;
+function ServiceAgreementDropinComponent({
+  legalEntity,
+  handleGetServiceAgreement,
+  handleHomeClick,
+  handleSign,
+  taskType,
+  serviceAgreementTypes,
+  serviceAgreementAcceptanceInfos,
+  trackingConfig
+}) {
+  var _a, _b, _c, _d;
   const {
     i18n
   } = useCoreContext();
   const {
     showToast
   } = useToastContext();
-  const [trustMember, setTrustMember] = h(props.trustMember);
-  const [shouldValidate, setShouldValidate] = h(false);
-  const roleAndEntityTypeFormID = "roleAndEntityType";
-  const [formList, setFormList] = h([...Object.values(roleAndTypeForms)]);
-  const [formValidity, setFormValidity] = h({
-    [roleAndEntityTypeFormID]: false
+  const baseTrackingPayload = getBaseTrackingPayload({
+    trackingConfig,
+    legalEntity,
+    task: taskType
   });
-  const taskName = "trustMembers";
-  const [activeForm, setActiveForm] = h(formList[0]);
-  const isSummaryStep = activeForm.formId === summaryStep.formId;
-  const trustMemberCase = ((_a = trustMember == null ? void 0 : trustMember.settlorExemptionReason) == null ? void 0 : _a.length) ? "exemptSettlor" : ((_b = trustMember == null ? void 0 : trustMember.types) == null ? void 0 : _b.includes(TrustMemberTypes.UNDEFINED_BENEFICIARY)) ? "undefinedBeneficiary" : "fullEntity";
-  const navigateToTrustMember = () => {
-    const trustMemberAssociation = {
-      ...props.trustMember,
-      legalEntityType: trustMember == null ? void 0 : trustMember.legalEntityType,
-      types: trustMember == null ? void 0 : trustMember.types
-    };
-    props.navigateNext(trustMemberAssociation);
-  };
-  const submitExemptSettlor = async (exemptSettlor, trustLE) => {
-    var _a2;
-    const existingTrustMembers = getOwnTrustMembers(trustLE);
-    const existingSettlor = existingTrustMembers.find((member) => member.type === "settlor");
-    const updatedAssociations = [...(trustLE.entityAssociations ?? []).filter((association) => association !== existingSettlor), exemptSettlor];
-    const updatedTrustLE = {
-      ...trustLE,
-      entityAssociations: updatedAssociations
-    };
-    try {
-      await ((_a2 = props.handleUpdateLegalEntity) == null ? void 0 : _a2.call(props, updatedTrustLE, trustLE.id));
-      showToast({
-        label: i18n.get("successfullyUpdatedDetails"),
-        type: ToastType.SUCCESS
-      });
-      props.onSubmit(updatedTrustLE);
-    } catch (e2) {
-      logger$3.error(e2);
-      showToast({
-        label: i18n.get("failedToUpdateDetails"),
-        type: ToastType.ERROR
-      });
-    }
-  };
-  const submitUndefinedBeneficiary = async () => {
-    var _a2, _b2, _c;
-    if (((_a2 = props.trustMember) == null ? void 0 : _a2.descriptionUndefinedBeneficiary) === (trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary)) {
-      props.onSubmit(props.trust);
+  const [loadingStatus, setLoadingStatus] = h();
+  const formsToBeSigned = serviceAgreementTypes.map((serviceAgreementType) => ({
+    formId: serviceAgreementType,
+    formName: serviceAgreementTypesTranslationMapping[serviceAgreementType],
+    isValid: false
+  }));
+  const signedForms = serviceAgreementAcceptanceInfos.map((serviceAgreementAcceptanceInfo) => ({
+    formId: serviceAgreementAcceptanceInfo.type,
+    formName: serviceAgreementTypesTranslationMapping[serviceAgreementAcceptanceInfo.type],
+    isValid: true
+  }));
+  const forms = [...formsToBeSigned, ...signedForms];
+  const [activeForm, setActiveForm] = h(forms[0]);
+  const canSign = serviceAgreementTypes.includes(activeForm.formId);
+  const handleServiceAgreementIsNotAvailableInThatLanguage = T$1(() => {
+    showToast({
+      label: i18n.get("failedToGetServiceAgreementInSelectedLanguageFallbackToEn"),
+      type: ToastType.ERROR
+    });
+  }, [i18n, showToast]);
+  const {
+    loading: contractLoadingStatus,
+    serviceAgreement
+  } = useServiceAgreement({
+    handleGetServiceAgreement,
+    handleServiceAgreementIsNotAvailableInThatLanguage,
+    legalEntityId: legalEntity.id,
+    serviceAgreementType: activeForm.formId,
+    language: i18n.languageCode
+  });
+  const {
+    handleChangeFor,
+    triggerValidation,
+    data,
+    valid,
+    isValid,
+    errors
+  } = useForm({
+    schema: ["signer", "acceptServiceAgreement"],
+    rules: serviceAgreementValidationRules
+  });
+  const signers = legalEntity.type === LegalEntityType.ORGANIZATION ? getOwnSignatories(legalEntity).map(({
+    legalEntityId: id2,
+    name
+  }) => ({
+    id: id2 ?? "",
+    name: name ?? ""
+  })) : [{
+    id: legalEntity == null ? void 0 : legalEntity.id,
+    name: `${(_a = legalEntity == null ? void 0 : legalEntity.individual) == null ? void 0 : _a.name.firstName} ${(_b = legalEntity == null ? void 0 : legalEntity.individual) == null ? void 0 : _b.name.lastName}`
+  }];
+  const handleSignClick = async () => {
+    userEvents.addEvent("Clicked ToS signing", {
+      segmentation: {
+        ...baseTrackingPayload
+      }
+    });
+    if (loadingStatus === "loading" || !serviceAgreement || !data.signer)
       return;
-    }
-    const existingUndefinedBeneficiaryInfo = (((_b2 = props.trust.trust) == null ? void 0 : _b2.undefinedBeneficiaryInfo) ?? []).filter((ub) => ub.reference !== (trustMember == null ? void 0 : trustMember.reference));
-    const updatedTrust = {
-      trust: {
-        undefinedBeneficiaryInfo: [{
-          ...(trustMember == null ? void 0 : trustMember.reference) && {
-            reference: trustMember == null ? void 0 : trustMember.reference
-          },
-          description: (trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary) || ""
-        }, ...existingUndefinedBeneficiaryInfo]
+    triggerValidation();
+    if (isValid) {
+      try {
+        setLoadingStatus("loading");
+        await handleSign(legalEntity.id, serviceAgreement.id, {
+          acceptedBy: data.signer
+        });
+        setLoadingStatus("success");
+        showToast({
+          label: i18n.get("serviceAgreementSignedSuccessfully"),
+          type: ToastType.SUCCESS
+        });
+        userEvents.addEvent("Succeeded ToS signing", {
+          segmentation: {
+            ...baseTrackingPayload
+          }
+        });
+      } catch {
+        setLoadingStatus("success");
+        showToast({
+          label: i18n.get("serviceAgreementSignFailed"),
+          type: ToastType.ERROR
+        });
+        userEvents.addEvent("Failed ToS signing", {
+          segmentation: {
+            ...baseTrackingPayload
+          }
+        });
       }
-    };
-    try {
-      await ((_c = props.handleUpdateLegalEntity) == null ? void 0 : _c.call(props, updatedTrust, props.trust.id));
-      showToast({
-        label: i18n.get("successfullyUpdatedDetails"),
-        type: ToastType.SUCCESS
-      });
-      props.onSubmit(updatedTrust);
-    } catch (e2) {
-      logger$3.error(e2);
-      showToast({
-        label: i18n.get("failedToUpdateDetails"),
-        type: ToastType.ERROR
+    } else {
+      userEvents.addEvent("Encountered ToS validation error", {
+        segmentation: {
+          ...baseTrackingPayload,
+          fields: Object.entries(valid).filter(([, value]) => !value).map(([key]) => key)
+        }
       });
     }
   };
-  const formatRolesForSummary = (roles) => roles.map((role2) => i18n.get(getTrustMemberName(role2))).join(", ");
-  const formatSettlorExemptionReasonsForSummary = (reasons) => reasons.map((reason) => i18n.get(reason)).join(", ");
-  const summaryData = {
-    roleAndEntityType: {
-      role: formatRolesForSummary((trustMember == null ? void 0 : trustMember.types) ?? []),
-      entityType: (trustMember == null ? void 0 : trustMember.legalEntityType) ? i18n.get(trustMember == null ? void 0 : trustMember.legalEntityType) : void 0,
-      descriptionUndefinedBeneficiary: trustMember == null ? void 0 : trustMember.descriptionUndefinedBeneficiary,
-      otherInformation: formatSettlorExemptionReasonsForSummary((trustMember == null ? void 0 : trustMember.settlorExemptionReason) ?? [])
-    }
-  };
-  const onNavigateToNextStep = () => {
-    if (isSummaryStep) {
-      switch (trustMemberCase) {
-        case "exemptSettlor":
-          if (!trustMember)
-            return;
-          submitExemptSettlor(trustMember, props.trust).catch(logger$3.error);
-          break;
-        case "undefinedBeneficiary":
-          submitUndefinedBeneficiary().catch(logger$3.error);
-          break;
+  const goHome = () => {
+    userEvents.addEvent("Returned to task overview from ToS", {
+      segmentation: {
+        ...baseTrackingPayload
       }
-      return;
-    }
-    if (!formValidity[roleAndEntityTypeFormID]) {
-      setShouldValidate(true);
-      return;
-    }
-    if (trustMemberCase === "fullEntity") {
-      navigateToTrustMember();
-    } else {
-      setActiveForm(summary);
-    }
+    });
+    handleHomeClick();
+  };
+  const handleExpandSection = (title) => {
+    userEvents.addEvent("Expanded ToS section", {
+      segmentation: {
+        ...baseTrackingPayload,
+        statementExtended: title
+      }
+    });
   };
-  const onTrustMemberChange = ({
-    data,
-    isValid = false,
-    dataStoreId = void 0
-  }) => {
-    if (dataStoreId) {
-      setFormValidity({
-        ...formValidity,
-        [dataStoreId]: isValid
-      });
-    }
-    if ((data == null ? void 0 : data.role) && data.role.includes(TrustMemberTypes.UNDEFINED_BENEFICIARY)) {
-      setFormList([...Object.values(undefinedBeneficiaryForms)]);
-    } else if (isExemptSettlor(data)) {
-      setFormList([...Object.values(exemptSettlorForms)]);
+  p(() => {
+    if (forms.length) {
+      setActiveForm(forms[0]);
     } else {
-      setFormList([...Object.values(roleAndTypeForms)]);
+      goHome();
     }
-    setTrustMember({
-      ...props.trustMember,
-      ...data.role ? {
-        types: data.role
-      } : {},
-      legalEntityType: data.entityType,
-      ...data.descriptionUndefinedBeneficiary ? {
-        descriptionUndefinedBeneficiary: data.descriptionUndefinedBeneficiary
-      } : {},
-      ...isExemptSettlor(data) ? {
-        settlorExemptionReason: data.settlorExemptionReason.filter((reason) => reason !== "noneOfTheAbove")
-      } : {}
+  }, [serviceAgreementTypes]);
+  p(() => {
+    userEvents.addPageView("ToS dropin");
+    userEvents.addEvent("Started ToS task", {
+      segmentation: {
+        ...baseTrackingPayload
+      }
     });
+  }, []);
+  const gotoForm = (index) => {
+    setActiveForm(forms[index]);
   };
-  const saveRolesAndNavigate = async () => {
-    var _a2, _b2, _c;
-    if (!trustMember) {
-      return;
-    }
-    const {
-      reference
-    } = trustMember;
-    if (reference && hasRolesChanged(trustMember.types, (_a2 = props.trustMember) == null ? void 0 : _a2.types) && props.trust.id) {
-      const existingTrustAssociations = getOwnEntityAssociations(props.trust);
-      const updatedTrustAssociations = {
-        entityAssociations: [...((_b2 = trustMember.types) == null ? void 0 : _b2.map((role2) => ({
-          type: role2,
-          reference
-        }))) || [], ...existingTrustAssociations.filter((ea) => ea.legalEntityId !== trustMember.reference) || []]
-      };
-      await ((_c = props.handleUpdateLegalEntity) == null ? void 0 : _c.call(props, updatedTrustAssociations, props.trust.id));
+  const sidebar = o(LoaderWrapper, {
+    status: loadingStatus,
+    formOpacityWhenLoading: 0.3,
+    showSpinner: false,
+    className: "adyen-kyc-dropin__sidebar-wrapper",
+    children: [!!formsToBeSigned.length && o(FormNavigation, {
+      forms: formsToBeSigned,
+      activeForm,
+      gotoForm,
+      taskName: "signServiceAgreement",
+      className: "adl-u-margin-bottom-24"
+    }), !!signedForms.length && o(FormNavigation, {
+      forms: signedForms,
+      activeForm,
+      gotoForm: (index) => gotoForm(formsToBeSigned.length + index),
+      taskName: "signedDocuments"
+    })]
+  });
+  const content = o(LoaderWrapper, {
+    status: loadingStatus,
+    formOpacityWhenLoading: 0.3,
+    showSpinner: false,
+    className: "adyen-kyc-form-container",
+    children: [o(LoaderWrapper, {
+      status: contractLoadingStatus,
+      formOpacityWhenLoading: 0.3,
+      showSpinner: false,
+      children: serviceAgreement && o(ContractViewer, {
+        contract: serviceAgreement.contract,
+        onExpandSection: handleExpandSection
+      })
+    }), canSign && o(Fragment, {
+      children: [o(Field, {
+        name: "signer",
+        label: i18n.get("signer"),
+        classNameModifiers: ["col-50"],
+        className: "adl-u-margin-y-32",
+        errorMessage: i18n.get((_c = errors.signer) == null ? void 0 : _c.errorMessage),
+        isValid: valid.signer,
+        children: (childProps) => o(Select, {
+          ...childProps,
+          onChange: handleChangeFor("signer", "blur"),
+          name: "signer",
+          placeholder: i18n.get("selectSigner"),
+          selected: data.signer,
+          items: signers
+        })
+      }), o(Field, {
+        name: "acceptServiceAgreement",
+        errorMessage: i18n.get((_d = errors.acceptServiceAgreement) == null ? void 0 : _d.errorMessage),
+        isValid: valid.acceptServiceAgreement,
+        children: (childProps) => o(Checkbox, {
+          ...childProps,
+          label: i18n.get("iHaveReadAndIAcceptTheseTerms"),
+          checked: data.acceptServiceAgreement ?? false,
+          name: "acceptServiceAgreement",
+          onChange: handleChangeFor("acceptServiceAgreement")
+        })
+      })]
+    }), o(ActionBar, {
+      onHome: goHome,
+      homeButtonLabel: i18n.get("goToOverview"),
+      onNext: canSign ? handleSignClick : void 0,
+      nextButtonLabel: canSign ? i18n.get("sign") : void 0
+    })]
+  });
+  return o(DropinLayout, {
+    content: o(Fragment, {
+      children: [sidebar, content]
+    })
+  });
+}
+function removeObjectPropsWithEmptyValues(obj) {
+  Object.keys(obj).forEach((key) => {
+    if (obj[key] === null || isEmpty(obj[key]))
+      delete obj[key];
+  });
+  return obj;
+}
+const INITIAL_STATE = {
+  data: {},
+  allData: {},
+  initialData: {},
+  errors: {},
+  valid: {},
+  fieldProblems: {},
+  isValid: false
+};
+function StateReducer() {
+  const [schemas, setSchemas] = h({});
+  const [activeForms, setActiveForms] = h([]);
+  const setCurrentForms = (forms) => {
+    setActiveForms(forms);
+  };
+  function reducer2({
+    currentState: currState
+  }, action) {
+    var _a, _b, _c, _d, _e;
+    switch (action.type) {
+      case "addToState": {
+        const state2 = structuredClone(currState);
+        const dataStoreId = action.value.dataStoreId ?? action.value.caller;
+        const schema = action.value.schema || null;
+        const schemaHasChanged = schema && ((_a = schemas == null ? void 0 : schemas[dataStoreId]) == null ? void 0 : _a.toString()) !== schema.toString();
+        const mergedState = {
+          ...state2,
+          data: {
+            ...state2.data,
+            [dataStoreId]: {
+              ...state2.data[dataStoreId],
+              ...action.value.data
+            }
+          },
+          // Add data in allData state prop in case we will need them later
+          allData: {
+            ...state2.allData,
+            [dataStoreId]: {
+              ...state2.allData[dataStoreId],
+              ...removeObjectPropsWithEmptyValues(action.value.data)
+            }
+          },
+          errors: {
+            ...state2.errors,
+            [dataStoreId]: {
+              ...state2.errors[dataStoreId],
+              ...action.value.errors
+            }
+          },
+          valid: {
+            ...state2.valid,
+            [dataStoreId]: {
+              ...state2.valid[dataStoreId],
+              ...action.value.valid
+            }
+          },
+          fieldProblems: {
+            ...state2.fieldProblems,
+            [dataStoreId]: {
+              ...state2.fieldProblems[dataStoreId],
+              ...action.value.fieldProblems
+            }
+          }
+        };
+        if (schemaHasChanged) {
+          setSchemas({
+            ...schemas,
+            [dataStoreId]: schema
+          });
+          const processedBySchema = schema.reduce((acc, fieldKey) => {
+            const dataObjByFormId = mergedState.data[dataStoreId];
+            const allDataObjByFormId = mergedState.allData[dataStoreId];
+            const validObjByFormId = mergedState.valid[dataStoreId];
+            const errorsObjByFormId = mergedState.errors[dataStoreId];
+            const fieldProblemsObjByFormId = mergedState.fieldProblems[dataStoreId];
+            return {
+              data: {
+                ...acc.data,
+                [fieldKey]: dataObjByFormId[fieldKey] ?? allDataObjByFormId[fieldKey]
+              },
+              valid: {
+                ...acc.valid,
+                [fieldKey]: validObjByFormId[fieldKey]
+              },
+              errors: {
+                ...acc.errors,
+                [fieldKey]: errorsObjByFormId[fieldKey]
+              },
+              fieldProblems: {
+                ...acc.fieldProblems,
+                [fieldKey]: fieldProblemsObjByFormId[fieldKey]
+              }
+            };
+          }, {
+            data: {},
+            valid: {},
+            errors: {},
+            fieldProblems: {}
+          });
+          mergedState.data[dataStoreId] = processedBySchema.data;
+          mergedState.valid[dataStoreId] = processedBySchema.valid;
+          mergedState.errors[dataStoreId] = processedBySchema.errors;
+          mergedState.fieldProblems[dataStoreId] = processedBySchema.fieldProblems;
+        }
+        mergedState.validityByForm = {
+          ...mergedState.validityByForm,
+          [dataStoreId]: Object.values(mergedState.valid[dataStoreId]).every((isValid) => isValid)
+        };
+        mergedState.hasDataChanged = {
+          ...state2.hasDataChanged,
+          [dataStoreId]: {
+            hasDataChanged: hasDataChanged((_b = state2.initialData) == null ? void 0 : _b[dataStoreId], (_c = mergedState.data) == null ? void 0 : _c[dataStoreId])
+          }
+        };
+        mergedState.hasAnyDataChanged = Object.values(mergedState.hasDataChanged).some(({
+          hasDataChanged: hasDataChanged2
+        }) => hasDataChanged2);
+        mergedState.allValid = Object.values(mergedState.validityByForm).every((isValid) => isValid);
+        mergedState.isValid = !activeForms.length ? mergedState.allValid : activeForms.every((item) => mergedState.validityByForm[item]);
+        mergedState.initialData = structuredClone(state2.initialData);
+        return {
+          currentState: mergedState,
+          prevState: state2,
+          changeInitiatedBy: dataStoreId
+        };
+      }
+      case "resetState": {
+        const dataStoreId = ((_d = action.value) == null ? void 0 : _d.dataStoreId) ?? ((_e = action.value) == null ? void 0 : _e.caller);
+        return {
+          currentState: INITIAL_STATE,
+          prevState: currState,
+          changeInitiatedBy: dataStoreId
+        };
+      }
+      default: {
+        throw new Error(`Unhandled action type: ${action.type}`);
+      }
     }
-    props.navigateBack();
+  }
+  return {
+    reducer: reducer2,
+    setCurrentForms
   };
-  const hasRolesChanged = (newRoles = [], existingRoles = []) => newRoles.length !== existingRoles.length || !newRoles.every((newRole) => existingRoles.includes(newRole));
-  const formsWithValidity = Object.values(formList).map((form) => ({
-    formId: form.formId,
-    formName: form.formName,
-    isValid: formValidity[form.formId]
-  }));
-  const gotoFormByFormIndex = (formIndex) => {
-    setActiveForm(formList[formIndex]);
+}
+function StateProvider({
+  defaultData = {},
+  children
+}) {
+  const defaultState = {
+    currentState: {
+      data: defaultData,
+      allData: defaultData,
+      valid: {},
+      errors: {},
+      fieldProblems: {},
+      validityByForm: {},
+      initialData: defaultData
+    },
+    prevState: {},
+    changeInitiatedBy: null
   };
-  const content = o(Fragment, {
-    children: [o(FormNavigation, {
-      forms: formsWithValidity,
-      activeForm: formsWithValidity.find((form) => form.formId === activeForm.formId),
-      taskName,
-      gotoForm: noop
-    }), o("div", {
-      className: "adyen-kyc-form-container",
-      children: [o("div", {
-        className: activeForm.formId !== "roleAndEntityType" ? "adyen-kyc-form-wrapper adyen-kyc-form-wrapper--hidden" : "adyen-kyc-form-wrapper",
-        children: o(TrustRoleAndEntityTypeComponent, {
-          id: roleAndEntityTypeFormID,
-          trustMember: props.trustMember,
-          onChange: onTrustMemberChange,
-          shouldValidate
-        })
-      }), isSummaryStep && o("div", {
-        className: "adyen-kyc-form-wrapper",
-        children: o(Summary, {
-          data: summaryData,
-          forms: [undefinedBeneficiaryForms.roleAndEntityType],
-          gotoForm: gotoFormByFormIndex
-        })
-      }), o(ActionBar, {
-        onNext: onNavigateToNextStep,
-        onHome: saveRolesAndNavigate,
-        nextButtonLabel: isSummaryStep ? i18n.get("submit") : i18n.get("next"),
-        homeButtonLabel: i18n.get("saveAndGoToOverview")
-      })]
-    })]
-  });
-  return o(DropinLayout, {
-    content
+  const reducerObj = StateReducer();
+  const [state2, dispatch] = s(reducerObj.reducer, defaultState);
+  const contextValue = F$1(() => ({
+    state: state2,
+    dispatch,
+    setActiveForms: reducerObj.setCurrentForms,
+    getData: () => {
+      var _a;
+      return ((_a = state2 == null ? void 0 : state2.currentState) == null ? void 0 : _a.data) ?? {};
+    },
+    getState: () => state2 == null ? void 0 : state2.currentState
+  }), [reducerObj, state2]);
+  return o(StateContext.Provider, {
+    value: contextValue,
+    children
   });
 }
-const serviceAgreementValidationRules = {
-  signer: {
-    modes: ["blur"],
-    validate: (signer2) => !!signer2,
-    errorMessage: "fieldIsRequired"
-  },
-  acceptServiceAgreement: {
-    modes: ["blur"],
-    validate: (acceptServiceAgreement) => !!acceptServiceAgreement,
-    errorMessage: "fieldIsRequired"
+const labels = (data, country2) => ({
+  registrationNumber: () => {
+    var _a;
+    if (country2 === CountryCodes.Monaco && ((_a = data == null ? void 0 : data.solePropNameAndCountry) == null ? void 0 : _a.companyCountry) === CountryCodes.Monaco) {
+      return "mcRegistrationNumberSoleProp";
+    }
   }
-};
-const logger$2 = createLogger("useServiceAgreement");
-const FALLBACK_LANGUAGE_CODE = "en";
-const useServiceAgreement = ({
-  handleGetServiceAgreement,
-  handleServiceAgreementIsNotAvailableInThatLanguage,
-  legalEntityId,
-  serviceAgreementType,
-  language
-}) => {
-  const [serviceAgreement, setServiceAgreement] = h();
-  const [loading2, setLoading] = h("loading");
-  const [agreementLanguage, setAgreementLanguage] = h(language);
-  p(() => {
-    if (agreementLanguage !== language) {
-      setAgreementLanguage(language);
+});
+const getOpeningStep = (forms, remediationActions) => {
+  var _a;
+  if (remediationActions && Object.keys(remediationActions).length > 0) {
+    const allRemediationActions = Object.values(remediationActions).flat().filter((rem) => {
+      var _a2;
+      return ((_a2 = rem.forms) == null ? void 0 : _a2.length) > 0;
+    });
+    if (allRemediationActions.length === 1 && ((_a = allRemediationActions[0]) == null ? void 0 : _a.forms.length) === 1) {
+      const form = forms.find((form2) => {
+        var _a2;
+        return (form2 == null ? void 0 : form2.formId) === ((_a2 = allRemediationActions[0]) == null ? void 0 : _a2.forms[0]);
+      });
+      if (form)
+        return form;
     }
-  }, [language]);
-  p(() => {
-    const requestServiceAgreement = async () => {
-      setLoading("loading");
-      try {
-        const {
-          termsOfServiceDocumentId,
-          document: document2
-        } = await handleGetServiceAgreement(legalEntityId, {
-          type: serviceAgreementType,
-          language: agreementLanguage
-        });
-        if (!document2) {
-          logger$2.log('"document" field was missing in response');
-          return;
-        }
-        const contract = JSON.parse(decodeURIComponent(escape(window.atob(document2))));
-        setServiceAgreement({
-          id: termsOfServiceDocumentId,
-          contract
-        });
-        setLoading("success");
-      } catch (err) {
-        if (agreementLanguage !== FALLBACK_LANGUAGE_CODE) {
-          handleServiceAgreementIsNotAvailableInThatLanguage();
-          setAgreementLanguage(FALLBACK_LANGUAGE_CODE);
-          return;
-        }
-        throw err;
+    return forms[forms.length - 1];
+  }
+  return forms[0];
+};
+function withFormComposer(WrappedComponent, {
+  getComponentForms,
+  parseConfiguration: parseConfiguration2,
+  rules: rules2,
+  labels: labels2,
+  defaultTaskName,
+  getConfigFor = "contextCountry"
+}) {
+  const WithFormComposer = (props) => {
+    var _a, _b, _c, _d, _e;
+    const {
+      i18n,
+      loadingContext,
+      clientKey,
+      contextCountry: initialContextCountry,
+      setContextCountry: setInitialContextCountry,
+      isReview
+    } = useCoreContext();
+    const {
+      isSettingEnabled
+    } = useSettingsContext();
+    const {
+      getData,
+      getState
+    } = useStateContext();
+    const {
+      getOmittedKeys: getSummaryOmittedKeys = null,
+      formatData: formatDataForSummary = null,
+      omittedForms
+    } = props.summary || {};
+    const taskName = props.taskName ?? defaultTaskName;
+    const [hideDropinLayout, setHideDropinLayout] = h(false);
+    const [hideNavigation, setHideNavigation] = h(false);
+    const [hideFooter, setHideFooter] = h(false);
+    const [hideOnHomeButton, setHideOnHomeButton] = h(false);
+    const [hideBackButton, setHideBackButton] = h(false);
+    const [submitButtonLabel, setSubmitButtonLabel] = h(null);
+    const [skipSubmitAndGoTaskList, setSkipSubmitAndGoTaskList] = h(false);
+    const [customFormNavigationHandlers, setCustomFormNavigationHandlers] = h({});
+    const [shouldValidate, setShouldValidate] = h(false);
+    const [formValidity, setFormValidity] = h({});
+    const formRef = _$1(null);
+    const [loadingStatus, setLoadingStatus] = h("success");
+    const [derivedProps, setDerivedProps] = h(props);
+    const [contextCountry, setContextCountry] = h(props.country || initialContextCountry);
+    const {
+      sliceData: payoutMethodData
+    } = useGlobalDataSlice("payoutVerificationMethod");
+    const configCountry = (getConfigFor === "bankCountry" ? payoutMethodData == null ? void 0 : payoutMethodData.bankCountry : contextCountry) ?? contextCountry;
+    p(() => {
+      loadDocumentGuidance(loadingContext);
+    }, [loadingContext]);
+    const getConfigurationData = T$1(() => getConfiguration({
+      loadingContext,
+      clientKey
+    }, {
+      legalEntityType: props.legalEntityType,
+      capabilities: props.capabilities,
+      // for payout forms, we need to get config for the selected bankCountry, not necessarily the same as the residency/registration country
+      country: configCountry
+    }), [clientKey, configCountry, loadingContext, props.capabilities, props.legalEntityType]);
+    const getPayoutAccountFormatData = T$1(() => getPayoutAccountFormat({
+      loadingContext,
+      clientKey
+    }, configCountry), [clientKey, configCountry, loadingContext]);
+    const {
+      fieldConfigurations,
+      requiredFields,
+      bankVerificationVendors
+    } = useScenarioConfiguration({
+      getConfigurationData,
+      getPayoutAccountFormatData,
+      parseConfiguration: parseConfiguration2,
+      country: configCountry,
+      instantVerificationEnabled: derivedProps.instantVerificationEnabled && derivedProps.handleGetBankVerificationVendors,
+      setLoadingStatus
+    });
+    const isFormStepVisible = (formId) => {
+      if (derivedProps.requiredFields || derivedProps.optionalFields) {
+        return !!derivedProps.requiredFields[formId] || !!derivedProps.optionalFields[formId];
       }
+      return true;
     };
-    requestServiceAgreement().catch(logger$2.error);
-  }, [handleGetServiceAgreement, handleServiceAgreementIsNotAvailableInThatLanguage, agreementLanguage, legalEntityId, serviceAgreementType]);
-  return {
-    loading: loading2,
-    serviceAgreement
-  };
-};
-const serviceAgreementTypesTranslationMapping = {
-  adyenForPlatformsManage: "paymentProcessingTerms",
-  adyenIssuing: "accountHolderTerms",
-  adyenForPlatformsAdvanced: "paymentProcessingTerms",
-  adyenCapital: "capitalUserTerms",
-  adyenAccount: "businessAccountTerms",
-  adyenCard: "cardUserTerms",
-  adyenFranchisee: "franchiseesTAndCs"
-};
-function ServiceAgreementDropinComponent({
-  legalEntity,
-  handleGetServiceAgreement,
-  handleHomeClick,
-  handleSign,
-  taskType,
-  serviceAgreementTypes,
-  serviceAgreementAcceptanceInfos,
-  trackingConfig
-}) {
-  var _a, _b, _c, _d;
-  const {
-    i18n
-  } = useCoreContext();
-  const {
-    showToast
-  } = useToastContext();
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    legalEntity,
-    task: taskType
-  });
-  const [loadingStatus, setLoadingStatus] = h();
-  const formsToBeSigned = serviceAgreementTypes.map((serviceAgreementType) => ({
-    formId: serviceAgreementType,
-    formName: serviceAgreementTypesTranslationMapping[serviceAgreementType],
-    isValid: false
-  }));
-  const signedForms = serviceAgreementAcceptanceInfos.map((serviceAgreementAcceptanceInfo) => ({
-    formId: serviceAgreementAcceptanceInfo.type,
-    formName: serviceAgreementTypesTranslationMapping[serviceAgreementAcceptanceInfo.type],
-    isValid: true
-  }));
-  const forms = [...formsToBeSigned, ...signedForms];
-  const [activeForm, setActiveForm] = h(forms[0]);
-  const canSign = serviceAgreementTypes.includes(activeForm.formId);
-  const handleServiceAgreementIsNotAvailableInThatLanguage = T$1(() => {
-    showToast({
-      label: i18n.get("failedToGetServiceAgreementInSelectedLanguageFallbackToEn"),
-      type: ToastType.ERROR
-    });
-  }, [i18n, showToast]);
-  const {
-    loading: contractLoadingStatus,
-    serviceAgreement
-  } = useServiceAgreement({
-    handleGetServiceAgreement,
-    handleServiceAgreementIsNotAvailableInThatLanguage,
-    legalEntityId: legalEntity.id,
-    serviceAgreementType: activeForm.formId,
-    language: i18n.languageCode
-  });
-  const {
-    handleChangeFor,
-    triggerValidation,
-    data,
-    valid,
-    isValid,
-    errors
-  } = useForm({
-    schema: ["signer", "acceptServiceAgreement"],
-    rules: serviceAgreementValidationRules
-  });
-  const signers = legalEntity.type === LegalEntityType.ORGANIZATION ? getOwnSignatories(legalEntity).map(({
-    legalEntityId: id2,
-    name
-  }) => ({
-    id: id2 ?? "",
-    name: name ?? ""
-  })) : [{
-    id: legalEntity == null ? void 0 : legalEntity.id,
-    name: `${(_a = legalEntity == null ? void 0 : legalEntity.individual) == null ? void 0 : _a.name.firstName} ${(_b = legalEntity == null ? void 0 : legalEntity.individual) == null ? void 0 : _b.name.lastName}`
-  }];
-  const handleSignClick = async () => {
-    userEvents.addEvent("Clicked ToS signing", {
-      segmentation: {
-        ...baseTrackingPayload
+    const isFormSummaryStep = (form) => form.formId === summaryStep.formId;
+    const componentForms = F$1(() => getComponentForms({
+      ...props,
+      bankVerificationVendors
+    }, isSettingEnabled), [bankVerificationVendors, isSettingEnabled, props]);
+    const componentFormsWithSummary = [...Object.values(componentForms), summaryStep];
+    const allowedForms = componentFormsWithSummary.filter((form) => isFormStepVisible(form.formId) || isFormSummaryStep(form));
+    const [activeForm, setActiveForm] = h(getOpeningStep(allowedForms, (_a = props == null ? void 0 : props.problems) == null ? void 0 : _a.remediationActions));
+    const [hasAlreadyNavigatedForm, setHasAlreadyNavigatedForm] = h(false);
+    const getFormIndex = (formId) => allowedForms.findIndex((form) => form.formId === formId);
+    const isFinalStep = getFormIndex(activeForm.formId) === allowedForms.length - 1;
+    const isFirstStep = getFormIndex(activeForm.formId) === 0;
+    p(() => {
+      var _a2;
+      if (hasAlreadyNavigatedForm)
+        return;
+      const openingStep = getOpeningStep(allowedForms, (_a2 = props == null ? void 0 : props.problems) == null ? void 0 : _a2.remediationActions);
+      if (activeForm !== openingStep) {
+        setActiveForm(openingStep);
       }
-    });
-    if (loadingStatus === "loading" || !serviceAgreement || !data.signer)
-      return;
-    triggerValidation();
-    if (isValid) {
-      try {
-        setLoadingStatus("loading");
-        await handleSign(legalEntity.id, serviceAgreement.id, {
-          acceptedBy: data.signer
-        });
-        setLoadingStatus("success");
-        showToast({
-          label: i18n.get("serviceAgreementSignedSuccessfully"),
-          type: ToastType.SUCCESS
-        });
-        userEvents.addEvent("Succeeded ToS signing", {
-          segmentation: {
-            ...baseTrackingPayload
+    }, [activeForm, allowedForms, (_b = props == null ? void 0 : props.problems) == null ? void 0 : _b.remediationActions, hasAlreadyNavigatedForm]);
+    const evaluateConfiguration = T$1((scenarioConfiguration, country2, formData, isSettingEnabled2, requiredFields2) => {
+      var _a2, _b2, _c2;
+      const fieldsFromCustomRules = rules2 ? rules2({
+        data: formData,
+        country: country2,
+        taskType: props.taskType,
+        isSettingEnabled: isSettingEnabled2,
+        requiredFields: requiredFields2
+      }) : {};
+      const fieldsFormCustomLabels = labels2 ? labels2(formData, country2) : {};
+      const scenarioProps = getPropsFromConfigurations(scenarioConfiguration, componentForms, ((_a2 = props == null ? void 0 : props.problems) == null ? void 0 : _a2.remediationActions) ? Object.values((_b2 = props == null ? void 0 : props.problems) == null ? void 0 : _b2.remediationActions) : [], ((_c2 = props.problems) == null ? void 0 : _c2.missingData) ?? [], props.legalEntityResponse ? getFieldsWithExistingData(props.legalEntityResponse) : [], fieldsFromCustomRules, fieldsFormCustomLabels);
+      setShouldValidate(false);
+      setDerivedProps({
+        ...props,
+        ...scenarioProps,
+        country: configCountry
+      });
+    }, [componentForms, configCountry, props]);
+    p(() => {
+      if (!fieldConfigurations)
+        return;
+      evaluateConfiguration(fieldConfigurations, configCountry, getData(), isSettingEnabled, requiredFields);
+    }, [fieldConfigurations, configCountry, evaluateConfiguration, getData, isSettingEnabled, requiredFields]);
+    const trackNavigation2 = ({
+      fromForm,
+      toForm,
+      component
+    }) => {
+      userEvents.addEvent("Navigated form", {
+        segmentation: {
+          ...props == null ? void 0 : props.baseTrackingPayload,
+          component,
+          from: fromForm.formId,
+          fromLabel: i18n.get(fromForm.formName),
+          to: toForm.formId,
+          toLabel: i18n.get(toForm.formName)
+        }
+      });
+    };
+    const trackSectionCompletion = (form) => {
+      userEvents.addEvent("Completed form section", {
+        segmentation: {
+          ...props == null ? void 0 : props.baseTrackingPayload,
+          sectionName: form.formId
+        }
+      });
+    };
+    const gotoFormByFormIndex = (nextFormIndex) => {
+      if (formRef.current.verifyForm) {
+        formRef.current.verifyForm(activeForm.formId).then((isVerified) => {
+          if (isVerified) {
+            setHasAlreadyNavigatedForm(true);
+            setActiveForm(allowedForms[nextFormIndex]);
           }
         });
-      } catch {
-        setLoadingStatus("success");
-        showToast({
-          label: i18n.get("serviceAgreementSignFailed"),
-          type: ToastType.ERROR
+      } else {
+        setHasAlreadyNavigatedForm(true);
+        setActiveForm(allowedForms[nextFormIndex]);
+      }
+    };
+    const validateCurrentForm = () => {
+      setShouldValidate(true);
+    };
+    const handleNextClick = () => {
+      var _a2, _b2;
+      if (formRef.current.customNavigationHandler) {
+        formRef.current.customNavigationHandler();
+        return;
+      }
+      if ((_a2 = customFormNavigationHandlers[activeForm.formId]) == null ? void 0 : _a2.onNext) {
+        (_b2 = customFormNavigationHandlers[activeForm.formId]) == null ? void 0 : _b2.onNext();
+        return;
+      }
+      const allFields = (derivedProps == null ? void 0 : derivedProps.allFields) || {};
+      if (isFormSummaryStep(activeForm)) {
+        if (skipSubmitAndGoTaskList) {
+          props.navigateBackToTaskList();
+        } else {
+          props.onSubmit({
+            data: getData(),
+            forms: allowedForms,
+            allFields,
+            setLoadingStatus
+          });
+        }
+        return;
+      }
+      if (formValidity[activeForm.formId]) {
+        if (isFinalStep) {
+          props.onSubmit({
+            data: getData(),
+            forms: allowedForms,
+            allFields,
+            setLoadingStatus
+          });
+          return;
+        }
+        setShouldValidate(false);
+        const toFormIndex = allowedForms.findIndex((form) => form.formId === activeForm.formId) + 1;
+        gotoFormByFormIndex(toFormIndex);
+        const toForm = allowedForms[toFormIndex];
+        trackNavigation2({
+          fromForm: activeForm,
+          toForm,
+          component: "ActionBar"
         });
-        userEvents.addEvent("Failed ToS signing", {
-          segmentation: {
-            ...baseTrackingPayload
-          }
+        trackSectionCompletion(activeForm);
+      } else {
+        validateCurrentForm();
+      }
+    };
+    const handleBackClick = () => {
+      const currentFormIndex = allowedForms.findIndex((form) => form.formId === activeForm.formId);
+      if (currentFormIndex) {
+        const fromForm = allowedForms[currentFormIndex];
+        const toForm = allowedForms[currentFormIndex - 1];
+        setActiveForm(toForm);
+        setHasAlreadyNavigatedForm(true);
+        trackNavigation2({
+          fromForm,
+          toForm,
+          component: "ActionBar"
         });
       }
-    } else {
-      userEvents.addEvent("Encountered ToS validation error", {
-        segmentation: {
-          ...baseTrackingPayload,
-          fields: Object.entries(valid).filter(([, value]) => !value).map(([key]) => key)
+    };
+    const setCustomHandlers = (formId, onNext, onBack) => {
+      setCustomFormNavigationHandlers({
+        ...customFormNavigationHandlers,
+        [formId]: {
+          onNext,
+          onBack
         }
       });
-    }
-  };
-  const goHome = () => {
-    userEvents.addEvent("Returned to task overview from ToS", {
-      segmentation: {
-        ...baseTrackingPayload
-      }
-    });
-    handleHomeClick();
-  };
-  const handleExpandSection = (title) => {
-    userEvents.addEvent("Expanded ToS section", {
-      segmentation: {
-        ...baseTrackingPayload,
-        statementExtended: title
+    };
+    const nextButtonText = isReview ? isFormSummaryStep(activeForm) ? i18n.get("confirm") : i18n.get("next") : isFinalStep ? i18n.get(submitButtonLabel ?? "submit") : i18n.get("next");
+    p(() => {
+      props.eventEmitter.on("next", handleNextClick);
+      props.eventEmitter.on("back", handleBackClick);
+      props.eventEmitter.on("validate", validateCurrentForm);
+      return () => {
+        props.eventEmitter.off("next", handleNextClick);
+        props.eventEmitter.off("back", handleNextClick);
+        props.eventEmitter.off("validate", validateCurrentForm);
+      };
+    }, [activeForm, allowedForms]);
+    const onCountryChange = (country2) => {
+      setContextCountry(country2);
+    };
+    const onWrappedComponentChange = (state2) => {
+      var _a2;
+      setFormValidity(state2.validityByForm);
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, state2);
+    };
+    const handleStateChange = ({
+      currentState
+    }) => {
+      onWrappedComponentChange(currentState);
+    };
+    const handleLeaveDropin = async () => {
+      var _a2;
+      const data = getData();
+      const hasDataChanged2 = getState().hasAnyDataChanged;
+      if (hasDataChanged2 && ((_a2 = props.canSubmit) == null ? void 0 : _a2.call(props, data))) {
+        setInitialContextCountry(contextCountry);
+        const allFields = (derivedProps == null ? void 0 : derivedProps.allFields) || {};
+        await props.onSubmit({
+          data,
+          forms: allowedForms,
+          allFields,
+          setLoadingStatus
+        });
+      } else {
+        props.handleHomeClick();
       }
+    };
+    const formFooter = !hideDropinLayout && !hideFooter && o(ActionBar, {
+      onNext: handleNextClick,
+      onBack: isFirstStep ? props.handleBackClick : handleBackClick,
+      backButtonLabel: i18n.get("back"),
+      nextButtonLabel: nextButtonText,
+      onHome: handleLeaveDropin,
+      homeButtonLabel: props.homeButtonLabel,
+      hideOnHomeButton,
+      hideBackButton
     });
-  };
-  p(() => {
-    if (forms.length) {
-      setActiveForm(forms[0]);
-    } else {
-      goHome();
-    }
-  }, [serviceAgreementTypes]);
-  p(() => {
-    userEvents.addPageView("ToS dropin");
-    userEvents.addEvent("Started ToS task", {
-      segmentation: {
-        ...baseTrackingPayload
-      }
+    const wrappedComponent = o("div", {
+      className: "adyen-kyc-form-container",
+      children: o(LoaderWrapper, {
+        status: loadingStatus,
+        formOpacityWhenLoading: 0.3,
+        loaderSize: "large",
+        children: o(FormRouterContextProvider, {
+          setFormIndex: gotoFormByFormIndex,
+          forms: allowedForms,
+          handleGetIdVerificationToken: props.handleGetIdVerificationToken,
+          children: [o(StateContextWatcher, {
+            owner: "FormComposer",
+            onChange: handleStateChange
+          }), o(WrappedComponent, {
+            ref: formRef,
+            forms: allowedForms,
+            activeForm,
+            ...derivedProps,
+            data: props.data,
+            onChange: onWrappedComponentChange,
+            evaluateConfiguration: (data) => evaluateConfiguration(fieldConfigurations, configCountry, data, isSettingEnabled, requiredFields),
+            country: contextCountry,
+            onCountryChange,
+            legalEntityId: props.legalEntityId,
+            problems: props == null ? void 0 : props.problems,
+            shouldValidate,
+            onNext: handleNextClick,
+            onBack: handleBackClick,
+            setHideDropinLayout,
+            setHideNavigation,
+            setHideFooter,
+            setCustomFormNavigationHandlers: setCustomHandlers,
+            setHideOnHomeButton,
+            setHideBackButton,
+            setSubmitButtonLabel,
+            setSkipSubmitAndGoTaskList,
+            bankVerificationVendors
+          }), activeForm.formId === summaryStep.formId && o("div", {
+            className: "adyen-kyc-form-wrapper",
+            children: o(Summary, {
+              trackNavigation: trackNavigation2,
+              data: formatDataForSummary ? formatDataForSummary(getData(), allowedForms) : getData(),
+              omittedKeys: getSummaryOmittedKeys ? getSummaryOmittedKeys(getData()) : null,
+              omittedForms,
+              forms: allowedForms,
+              gotoForm: gotoFormByFormIndex,
+              labels: derivedProps.labels,
+              problems: props == null ? void 0 : props.problems
+            })
+          }), formFooter]
+        })
+      })
     });
-  }, []);
-  const gotoForm = (index) => {
-    setActiveForm(forms[index]);
-  };
-  const sidebar = o(LoaderWrapper, {
-    status: loadingStatus,
-    formOpacityWhenLoading: 0.3,
-    showSpinner: false,
-    className: "adyen-kyc-dropin__sidebar-wrapper",
-    children: [!!formsToBeSigned.length && o(FormNavigation, {
-      forms: formsToBeSigned,
-      activeForm,
-      gotoForm,
-      taskName: "signServiceAgreement",
-      className: "adl-u-margin-bottom-24"
-    }), !!signedForms.length && o(FormNavigation, {
-      forms: signedForms,
-      activeForm,
-      gotoForm: (index) => gotoForm(formsToBeSigned.length + index),
-      taskName: "signedDocuments"
-    })]
-  });
-  const content = o(LoaderWrapper, {
-    status: loadingStatus,
-    formOpacityWhenLoading: 0.3,
-    showSpinner: false,
-    className: "adyen-kyc-form-container",
-    children: [o(LoaderWrapper, {
-      status: contractLoadingStatus,
+    const allowedFormsWithValidity = addValidityToForms(allowedForms, formValidity, props.problems);
+    const sidebar = !hideDropinLayout && !hideNavigation && o(LoaderWrapper, {
+      status: loadingStatus,
       formOpacityWhenLoading: 0.3,
       showSpinner: false,
-      children: serviceAgreement && o(ContractViewer, {
-        contract: serviceAgreement.contract,
-        onExpandSection: handleExpandSection
+      className: "adyen-kyc-dropin__sidebar-wrapper",
+      children: o(FormNavigation, {
+        forms: allowedFormsWithValidity,
+        activeForm: allowedFormsWithValidity.find((form) => form.formId === activeForm.formId),
+        gotoForm: gotoFormByFormIndex,
+        validateForm: validateCurrentForm,
+        taskName,
+        trackNavigation: trackNavigation2,
+        hasVerificationErrors: ((_c = props == null ? void 0 : props.problems) == null ? void 0 : _c.verificationErrors) && ((_e = Object.keys((_d = props == null ? void 0 : props.problems) == null ? void 0 : _d.verificationErrors)) == null ? void 0 : _e.length) > 0
       })
-    }), canSign && o(Fragment, {
-      children: [o(Field, {
-        name: "signer",
-        label: i18n.get("signer"),
-        classNameModifiers: ["col-50"],
-        className: "adl-u-margin-y-32",
-        errorMessage: i18n.get((_c = errors.signer) == null ? void 0 : _c.errorMessage),
-        isValid: valid.signer,
-        children: (childProps) => o(Select, {
-          ...childProps,
-          onChange: handleChangeFor("signer", "blur"),
-          name: "signer",
-          placeholder: i18n.get("selectSigner"),
-          selected: data.signer,
-          items: signers
-        })
-      }), o(Field, {
-        name: "acceptServiceAgreement",
-        errorMessage: i18n.get((_d = errors.acceptServiceAgreement) == null ? void 0 : _d.errorMessage),
-        isValid: valid.acceptServiceAgreement,
-        children: (childProps) => o(Checkbox, {
-          ...childProps,
-          label: i18n.get("iHaveReadAndIAcceptTheseTerms"),
-          checked: data.acceptServiceAgreement ?? false,
-          name: "acceptServiceAgreement",
-          onChange: handleChangeFor("acceptServiceAgreement")
-        })
-      })]
-    }), o(ActionBar, {
-      onHome: goHome,
-      homeButtonLabel: i18n.get("goToOverview"),
-      onNext: canSign ? handleSignClick : void 0,
-      nextButtonLabel: canSign ? i18n.get("sign") : void 0
-    })]
-  });
-  return o(DropinLayout, {
-    content: o(Fragment, {
-      children: [sidebar, content]
-    })
-  });
-}
-const labels = (data, country2) => ({
-  registrationNumber: () => {
-    var _a;
-    if (country2 === CountryCodes.Monaco && ((_a = data == null ? void 0 : data.solePropNameAndCountry) == null ? void 0 : _a.companyCountry) === CountryCodes.Monaco) {
-      return "mcRegistrationNumberSoleProp";
+    });
+    const content = o(Fragment, {
+      children: [sidebar, wrappedComponent]
+    });
+    if (!props.hideDropinLayout) {
+      return o(DropinLayout, {
+        content
+      });
     }
-  }
-});
+    return wrappedComponent;
+  };
+  return WithFormComposer;
+}
 const SolePropWithFormComposer = withFormComposer(SolePropComponent, {
   getComponentForms: () => solePropForms,
   // TODO: change trust to soleprop once the configurations for soleprops are added in backend.