@adyen/kyc-components 3.92.1 → 3.93.0-beta.2

package/dist/{SourceOfFundsPage-y4UhFduk.js → SourceOfFundsPage-CzUTeF1S.js}

@@ -2,53 +2,51 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "02baaaea-3d85-4147-8d4f-dd90fea13d46", e._sentryDebugIdIdentifier = "sentry-dbid-02baaaea-3d85-4147-8d4f-dd90fea13d46");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "7e45adf3-9ed0-44f5-ac7b-3a57b6860a2e", e._sentryDebugIdIdentifier = "sentry-dbid-7e45adf3-9ed0-44f5-ac7b-3a57b6860a2e");
   } catch (e) {
   }
 }
 ;
-import { b as useApiContext, am as useMutation, k as httpPost, j as useQuery, m as httpGet, u as useTranslation, G as Typography, B as Button, aj as useI18nContext, as as isEmpty, L as Loader, W as Icon, X as IconButton, H as createLogger, ao as useQueryClient, c as useLegalEntity, R as ROOT_LE, V as useAnalyticsContext, bM as useLegalEntities, a as addResourceBundles, O as EntityTypes, g as getLegalEntityCountry, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-BY1HQxMn.js";
+import { b as useApiContext, j as httpPost, k as httpGet, u as useTranslation, x as Typography, B as Button, ag as useI18nContext, L as Loader, U as Icon, V as IconButton, z as createLogger, c as useLegalEntity, R as ROOT_LE, P as useAnalyticsContext, bC as useLegalEntities, a as addResourceBundles, M as EntityTypes, g as getLegalEntityCountry, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-D5FOVv9p.js";
 import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
-import { I as Image, u as useCapabilityProblems, g as getProblemsForEntity } from "./Image-Dv-RB-a6.js";
-import { useState, useMemo, useEffect, useCallback, useRef } from "preact/hooks";
-import { n as normalizedTaskStatusStore, g as useBusinessLines } from "./OnboardingDropinComponent-tQW1hXKP.js";
-import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-BG3cHfke.js";
-import { u as useCreateLegalEntity } from "./useCreateLegalEntity-CmZ_Xs5Y.js";
-import { u as useUpdateLegalEntity } from "./useUpdateLegalEntity-DJomQK33.js";
-import { h as hasDataChanged } from "./hasDataChanged-DzGl3k7N.js";
-import { u as useGlobalDataSlice, c as useStateContext } from "./useGlobalData-Dk70ESMH.js";
-import { g as getPropsFromConfigurations } from "./process-field-configurations-2fq1Bq8j.js";
-import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-DqJ1Ds6F.js";
-import { F as FormWrapper } from "./FormWrapper-BCkcULLO.js";
-import { c as createDocumentRequest, d as documentApiUtils } from "./validate-D5t_i90f.js";
+import { I as Image, u as useCapabilityProblems, g as getProblemsForEntity } from "./Image-D2r8auP6.js";
+import { useState, useMemo, useCallback, useEffect } from "preact/hooks";
+import { f as useTaskStatus, T as TASK_STATUS_POLLING_INTERVAL_MS, i as useBusinessLines } from "./OnboardingDropinComponent-Druuv3sE.js";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/preact-query";
+import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-CY5gBg6O.js";
+import { u as useCreateLegalEntity } from "./useCreateLegalEntity-DEc1Kwc9.js";
+import { u as useUpdateLegalEntity } from "./useUpdateLegalEntity-CV9zKmhh.js";
+import { u as useFormContext, F as FormContextProvider, a as FormFlow } from "./useFormContext-7UjLuyeC.js";
+import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-D59ldyqp.js";
+import { u as useMultiForm } from "./useMultiForm-B3D5YMQv.js";
+import { c as createDocumentRequest, d as documentApiUtils } from "./validate-CDvp3PSV.js";
 import { f as formatObject } from "./utils-DNSfZiio.js";
 import { signal } from "@preact/signals";
-import { a as getFormProps } from "./getProps-CLJfvUMb.js";
-import { u as useForm } from "./useForm-DpYu-ydO.js";
-import { E as ErrorPanel } from "./ErrorPanel-DNtK56tD.js";
-import { c as createFormUtils } from "./formUtils-6n_sAj9f.js";
-import { F as Field } from "./Field-BEoeMy3u.js";
-import { S as Select } from "./Select-DglmHz2C.js";
-import { T as TextArea } from "./TextArea-DaEM1LmR.js";
-import { I as InputDate } from "./InputDate-BcSMepXz.js";
+import { E as ErrorPanel } from "./ErrorPanel-CQ5mK5uz.js";
+import { c as createFormUtils } from "./formUtils-BUyxO4Zy.js";
+import { F as Field } from "./Field-QQ5BBCkn.js";
+import { S as Select } from "./Select-mBoYJnAZ.js";
+import { T as TextArea } from "./TextArea-DeNjm7Gm.js";
+import { I as InputDate } from "./InputDate-DplEveci.js";
 import { I as InputGroup } from "./InputGroup-WBfGDV5F.js";
-import { I as InputText } from "./InputText-D0zIJLdp.js";
-import { a as allowedCurrencies, T as TODAY_DATE, S as SOF_CHARACTERS_LIMIT, b as formatDateForInput, g as getInputErrors, c as formatAmountWithCurrency, d as getAdditionalDataSchemaKeys, s as sofCategoryItemMapper, e as getPageHeadings, h as getServiceTranslationSelectTitle, i as sourceOfFundsForms, j as getSofCardDetails, k as getGettingStartedCardDetails, l as getServiceTranslation, p as parseSOFDocumentDescription, m as getRelevantErrors, n as getUniqueRemediationActions, o as SOF_INVALID_INPUT_ERROR_CODES, q as getServiceTranslationKey, r as getDocumentLists, t as getDocumentRequirements, M as MISSING_DATA_SOF_UPLOAD_CODE, u as parseOriginatorDetails, v as getSourceOfFundsRequiredForms, w as sourceOfFundsRequiredFields, x as getSourceOfFundsPayload, y as parseSofOriginatorPayload, A as ALLOWED_SOF_SERVICES } from "./utils-DkGVdk7W.js";
-import { R as RadioGroup } from "./RadioGroup-Bg_8BEDn.js";
-import { C as CountryField } from "./CountryField-B0daMnwW.js";
-import { A as Avatar } from "./Avatar-wQ0mYsYL.js";
-import { a as Alert } from "./Alert-E_a_csSs.js";
-import { M as Modal } from "./Modal-1Hv5tfNy.js";
-import { C as Confirm } from "./Confirm-Ba5lqFqd.js";
-import { v as validateDateNotInTheFuture } from "./validate-DUJOPfMa.js";
-import { T as TileGroup } from "./TileGroup-B9NP0xL_.js";
+import { I as InputText } from "./InputText-V4X24bPM.js";
+import { a as allowedCurrencies, T as TODAY_DATE, S as SOF_CHARACTERS_LIMIT, b as formatDateForInput, g as getInputErrors, c as formatAmountWithCurrency, s as sofCategoryItemMapper, d as getPageHeadings, e as getServiceTranslationSelectTitle, h as getSofCardDetails, i as getGettingStartedCardDetails, j as getAdditionalDataSchemaKeys, k as getServiceTranslation, p as parseSOFDocumentDescription, l as getRelevantErrors, m as getUniqueRemediationActions, n as SOF_INVALID_INPUT_ERROR_CODES, o as getServiceTranslationKey, q as getDocumentRequirements, r as getDocumentLists, t as getSourceOfFundsRequiredFields, M as MISSING_DATA_SOF_UPLOAD_CODE, u as parseOriginatorDetails, v as getSourceOfFundsRequiredForms, w as getSourceOfFundsPayload, A as ALLOWED_SOF_SERVICES, x as parseSofOriginatorPayload } from "./utils-9A5Vx0Md.js";
+import { R as RadioGroup } from "./RadioGroup-DUYNpTgM.js";
+import { C as CountryField } from "./CountryField-DelOJ_90.js";
+import { A as Avatar } from "./Avatar-C2jFofpv.js";
+import { a as Alert } from "./Alert-0L9Okc_j.js";
+import { M as Modal } from "./Modal-DjqZRXyy.js";
+import { C as Confirm } from "./Confirm-DvCDgyAD.js";
+import { T as TileGroup } from "./TileGroup-CZWfBoyM.js";
 import { lazy } from "preact/compat";
-import { H as Header } from "./Header-87H731cQ.js";
-import { L as LandingLayout } from "./LandingLayout-oK1JT5Lv.js";
-import { i as isEmpty$1 } from "./isEmpty-COLZr49P.js";
+import { H as Header } from "./Header-DVxe8YCk.js";
+import { L as LandingLayout } from "./LandingLayout-DZt1EtCP.js";
+import { S as StackLayout } from "./unincorporated-partnership-MeN1dp53.js";
+import { i as isEmpty } from "./isEmpty-BCB0E6W3.js";
+import { C as Card } from "./Card-OQuFzmxm.js";
 import { S as StructuredList } from "./StructuredList-9dnJRdx_.js";
-import { C as Card } from "./Card-BSfGetza.js";
-import { D as Dropzone } from "./Dropzone-CJTj99Jm.js";
+import { D as Dropzone } from "./Dropzone-BgrGUcIm.js";
+import { v as validateDateNotInTheFuture } from "./validate-BjjltZlf.js";
 const updateSourceOfFunds = async (businessLineId, legalEntityId, baseUrl, data) => {
   return httpPost(
     {
@@ -120,7 +118,6 @@ const sourceOfFundsGettingStarted = "adyen-kyc-source-of-funds-getting-started";
 const sourceOfFundsGettingStartedError = "adyen-kyc-source-of-funds-getting-started-error";
 const sourceOfFundsGettingStartedErrorActions = "adyen-kyc-source-of-funds-getting-started-error-actions";
 const sourceOfFundsGettingStartedCards = "adyen-kyc-source-of-funds-getting-started-cards";
-const sourceOfFundsGettingStartedCardsCard = "adyen-kyc-source-of-funds-getting-started-cards-card";
 const sourceOfFundsGettingStartedCardsCardHeader = "adyen-kyc-source-of-funds-getting-started-cards-card-header";
 const sourceOfFundsGettingStartedCardsCardBody = "adyen-kyc-source-of-funds-getting-started-cards-card-body";
 const sourceOfFundsGettingStartedActions = "adyen-kyc-source-of-funds-getting-started-actions";
@@ -146,7 +143,6 @@ const styles = {
   sourceOfFundsGettingStartedError,
   sourceOfFundsGettingStartedErrorActions,
   sourceOfFundsGettingStartedCards,
-  sourceOfFundsGettingStartedCardsCard,
   sourceOfFundsGettingStartedCardsCardHeader,
   sourceOfFundsGettingStartedCardsCardBody,
   sourceOfFundsGettingStartedActions,
@@ -608,7 +604,6 @@ function AdditionalDataForDonation(props) {
   ] });
 }
 function AdditionalDataForGambling(props) {
-  const { t: sofT } = useTranslation("sof");
   const { t: commonT } = useTranslation("common");
   const [focusedInput, setFocusedInput] = useState();
   const { formUtils, data, errors, valid, fieldProblems, handleChangeFor, handleAmountChange } = props;
@@ -616,10 +611,6 @@ function AdditionalDataForGambling(props) {
     setFocusedInput(void 0);
     handleAmountChange("amount");
   };
-  const handleWebsiteBlur = () => {
-    setFocusedInput(void 0);
-    handleChangeFor("website", "blur");
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Field,
@@ -695,10 +686,8 @@ function AdditionalDataForGambling(props) {
       Field,
       {
         name: "website",
-        label: formUtils.getLabel("website", "sourceOfWinnings"),
+        label: formUtils.getLabel("website", "gamblingEstablishmentWebsite"),
         errorMessage: formUtils.getErrorMessage("website", errors, fieldProblems),
-        helper: sofT(($) => $["nameOfCasinoLottery"]),
-        helperPosition: "below",
         children: (childProps) => /* @__PURE__ */ jsx(
           InputGroup,
           {
@@ -715,7 +704,7 @@ function AdditionalDataForGambling(props) {
                 value: data.website,
                 readonly: formUtils.isReadOnly("website"),
                 onInput: handleChangeFor("website", "input"),
-                onBlur: handleWebsiteBlur,
+                onBlur: handleChangeFor("website", "blur"),
                 "aria-required": true,
                 "aria-invalid": !valid.website,
                 isValid: valid.website,
@@ -1153,282 +1142,54 @@ function AdditionalDataForThirdParty(props) {
     )
   ] });
 }
-function canParseUrl(url) {
-  if (URL.canParse) {
-    return URL.canParse(url);
-  }
-  try {
-    new URL(url);
-    return true;
-  } catch {
-    return false;
-  }
-}
-const sourceOfFundsTypeValidations = {
-  type: {
-    modes: ["blur"],
-    validate: (type) => !isEmpty(type),
-    errorMessage: "fieldIsRequired"
-  }
-};
-const sourceOfFundsAdditionalDataValidations = {
-  description: {
-    modes: ["blur"],
-    validate: (description) => !isEmpty(description),
-    errorMessage: "fieldIsRequired"
-  },
-  website: [
-    {
-      modes: ["blur"],
-      validate: (website) => !isEmpty(website),
-      errorMessage: "fieldIsRequired"
-    },
-    {
-      modes: ["blur"],
-      validate: (website) => website ? canParseUrl(
-        website?.startsWith("http:") || website?.startsWith("https:") ? website : `https://${website}`
-      ) : false,
-      errorMessage: "validationPleaseEnterAValidUrl"
-    }
-  ],
-  amount: [
-    {
-      modes: ["blur"],
-      validate: (amount) => !isEmpty(amount?.currency),
-      errorMessage: "currencyIsRequired"
-    },
-    {
-      modes: ["blur"],
-      validate: (amount) => !isEmpty(amount?.value),
-      errorMessage: "amountIsRequired"
-    },
-    {
-      modes: ["blur"],
-      validate: (amount) => !Number.isNaN(Number(amount?.value)),
-      errorMessage: "pleaseEnterAValidAmount"
-    }
-  ],
-  dateOfSourceEvent: [
-    {
-      modes: ["blur"],
-      validate: (dateOfSourceEvent) => !isEmpty(dateOfSourceEvent),
-      errorMessage: "fieldIsRequired"
-    },
-    {
-      modes: ["blur"],
-      validate: (dateOfSourceEvent) => validateDateNotInTheFuture(dateOfSourceEvent),
-      errorMessage: "dateCannotBeInTheFuture"
-    }
-  ],
-  cryptocurrencyExchange: {
-    modes: ["blur"],
-    validate: (cryptocurrencyExchange) => !isEmpty(cryptocurrencyExchange),
-    errorMessage: "fieldIsRequired"
-  },
-  legalName: {
-    modes: ["blur"],
-    validate: (legalName) => !isEmpty(legalName),
-    errorMessage: "fieldIsRequired"
-  },
-  firstName: {
-    modes: ["blur"],
-    validate: (firstName) => !isEmpty(firstName),
-    errorMessage: "fieldIsRequired"
-  },
-  lastName: {
-    modes: ["blur"],
-    validate: (lastName) => !isEmpty(lastName),
-    errorMessage: "fieldIsRequired"
-  },
-  originatorType: {
-    modes: ["blur"],
-    validate: (originatorType) => !isEmpty(originatorType),
-    errorMessage: "fieldIsRequired"
-  },
-  relationship: {
-    modes: ["blur"],
-    validate: (relationship) => !isEmpty(relationship),
-    errorMessage: "fieldIsRequired"
-  },
-  country: {
-    modes: ["blur"],
-    validate: (country) => !isEmpty(country),
-    errorMessage: "fieldIsRequired"
-  },
-  dateOfFundsReceived: [
-    {
-      modes: ["blur"],
-      validate: (dateOfFundsReceived) => !isEmpty(dateOfFundsReceived),
-      errorMessage: "fieldIsRequired"
-    },
-    {
-      modes: ["blur"],
-      validate: (dateOfFundsReceived) => validateDateNotInTheFuture(dateOfFundsReceived),
-      errorMessage: "dateCannotBeInTheFuture"
-    }
-  ],
-  financiers: {
-    modes: ["blur"],
-    validate: (financiers) => !isEmpty(financiers),
-    errorMessage: "fieldIsRequired"
-  },
-  purpose: {
-    modes: ["blur"],
-    validate: (purpose) => !isEmpty(purpose),
-    errorMessage: "fieldIsRequired"
-  }
-};
 function SourceOfFundsAdditionalData(props) {
   const { t } = useTranslation("common");
+  const { form } = useFormContext();
   const {
-    data: defaultData,
-    validators,
-    formVerificationErrors,
-    fieldValidationErrors,
-    shouldValidate,
-    sourceOfFundsType
-  } = props;
-  const getFormSchema = useMemo(
-    () => getAdditionalDataSchemaKeys(sourceOfFundsType, defaultData?.originatorType),
-    [sourceOfFundsType, defaultData?.originatorType]
+    handleChangeFor: multiFormHandleChangeFor,
+    data: { additionalData: data, sourceOfFundsType },
+    errors: { additionalData: errors },
+    valid: { additionalData: valid },
+    fieldProblems: { additionalData: fieldProblems }
+  } = form;
+  const handleChangeFor = useMemo(
+    () => (key, mode) => multiFormHandleChangeFor(key, "additionalData", mode),
+    [multiFormHandleChangeFor]
   );
-  const [schema, setSchema] = useState(getFormSchema);
-  const {
-    handleChangeFor,
-    data: formData,
-    schema: formSchema,
-    valid: formValid,
-    errors: formErrors,
-    fieldProblems: formFieldProblems
-  } = useForm({
-    ...props,
-    schema,
-    defaultData,
-    rules: validators || sourceOfFundsAdditionalDataValidations,
-    fieldProblems: fieldValidationErrors,
-    shouldValidate
-  });
-  useEffect(() => {
-    setSchema(getAdditionalDataSchemaKeys(sourceOfFundsType, formData?.originatorType));
-  }, [formData.originatorType]);
   const handleAmountChange = (key) => (e) => {
-    const isCurrencyKey = key === "currency";
-    const amountValue = {
-      currency: isCurrencyKey ? e.target.value : formData.amount?.currency,
-      value: isCurrencyKey ? formData.amount?.value : e.target.value
-    };
-    const fieldEvent = {
-      target: {
-        name: "amount",
-        value: amountValue
-      }
+    const rawValue = e.target.value;
+    const updatedAmount = {
+      ...data?.amount,
+      ...key === "currency" ? { currency: rawValue } : { value: rawValue === "" ? void 0 : Number(rawValue) }
     };
-    handleChangeFor("amount")(fieldEvent);
+    handleChangeFor("amount")({ target: { name: "amount", value: updatedAmount } });
   };
   const formUtils = createFormUtils(props, t);
-  const { updateStateSlice } = useGlobalDataSlice("additionalData");
-  useEffect(() => {
-    updateStateSlice({
-      data: formData,
-      valid: formValid,
-      errors: formErrors,
-      fieldProblems: formFieldProblems,
-      schema: formSchema
-    });
-  }, [formData, formValid, formErrors, formSchema, formFieldProblems]);
+  const additionalDataProps = {
+    formUtils,
+    handleChangeFor,
+    data,
+    errors,
+    valid,
+    fieldProblems,
+    handleAmountChange
+  };
   const renderSubForms = () => {
-    switch (sourceOfFundsType) {
+    switch (sourceOfFundsType?.type) {
       case "gamblingWinnings":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForGambling,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForGambling, { ...additionalDataProps });
       case "cryptocurrencyIncome":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForCryptocurrency,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForCryptocurrency, { ...additionalDataProps });
       case "business":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForBusiness,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForBusiness, { ...additionalDataProps });
       case "assetSale":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForAssetSale,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForAssetSale, { ...additionalDataProps });
       case "thirdPartyFunding":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForThirdParty,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForThirdParty, { ...additionalDataProps });
       case "inheritance":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForInheritance,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForInheritance, { ...additionalDataProps });
       case "donations":
-        return /* @__PURE__ */ jsx(
-          AdditionalDataForDonation,
-          {
-            formUtils,
-            handleChangeFor,
-            data: formData,
-            errors: formErrors,
-            valid: formValid,
-            fieldProblems: formFieldProblems,
-            handleAmountChange
-          }
-        );
+        return /* @__PURE__ */ jsx(AdditionalDataForDonation, { ...additionalDataProps });
       default:
         return null;
     }
@@ -1437,7 +1198,7 @@ function SourceOfFundsAdditionalData(props) {
     /* @__PURE__ */ jsx(
       ErrorPanel,
       {
-        verificationErrors: formVerificationErrors,
+        verificationErrors: props?.formVerificationErrors,
         validationErrors: props?.fieldValidationErrors,
         formUtils,
         id: "ariaErrorField"
@@ -1446,43 +1207,19 @@ function SourceOfFundsAdditionalData(props) {
     renderSubForms()
   ] });
 }
-const sourceOfFundsTypeFields = ["type"];
 function SourceOfFundsType(props) {
   const { t } = useTranslation(["common", "sof"]);
   const { i18n } = useI18nContext();
   const {
-    data: sourceOfFundsTypeDefaultData,
-    validators,
-    fieldValidationErrors,
-    shouldValidate,
-    categories
-  } = props;
-  const {
-    handleChangeFor,
     data: formData,
-    schema: formSchema,
-    valid: formValid,
+    categories,
     errors: formErrors,
-    fieldProblems: formFieldProblems
-  } = useForm({
-    ...props,
-    schema: sourceOfFundsTypeFields,
-    defaultData: sourceOfFundsTypeDefaultData,
-    rules: validators || sourceOfFundsTypeValidations,
-    fieldProblems: fieldValidationErrors,
-    shouldValidate
-  });
+    fieldValidationErrors: formFieldProblems
+  } = props;
+  const { form } = useFormContext();
+  const { handleChangeFor } = form;
+  const handleFieldChange = (fieldName, mode) => handleChangeFor(fieldName, "sourceOfFundsType", mode);
   const formUtils = createFormUtils(props, t);
-  const { updateStateSlice } = useGlobalDataSlice("sourceOfFundsType");
-  useEffect(() => {
-    updateStateSlice({
-      data: formData,
-      valid: formValid,
-      errors: formErrors,
-      fieldProblems: formFieldProblems,
-      schema: formSchema
-    });
-  }, [formData, formValid, formErrors, formSchema, formFieldProblems]);
   const categoryItems = [
     {
       value: "adyen",
@@ -1503,7 +1240,7 @@ function SourceOfFundsType(props) {
       tiles: categoryItems,
       errorMessage: typeof errorMessage !== "boolean" ? i18n.get(errorMessage) : errorMessage,
       selected: formData?.type ? formData.type : [],
-      onChange: handleChangeFor("type", "input")
+      onChange: handleFieldChange("type", "input")
     }
   ) });
 }
@@ -1547,9 +1284,10 @@ function getIconById(id) {
 }
 function SourceOfFunds(props) {
   const { activeForm, activeBusinessLine, sourceOfFundsType } = props;
+  const { form } = useFormContext();
+  const { data: formData, errors, valid, fieldProblems: fieldValidationErrors } = form;
   const { data: sourceOfFundsTypesData, isLoading } = useSourceOfFundsTypes();
   const { t: sofT } = useTranslation("sof");
-  const formWrapperClasses = (formId) => activeForm?.formId !== formId ? "adyen-kyc-form-wrapper adyen-kyc-form-wrapper--hidden" : "adyen-kyc-form-wrapper";
   const pageHeadings = useMemo(
     () => getPageHeadings(sourceOfFundsType ?? "adyen"),
     [sourceOfFundsType]
@@ -1580,34 +1318,32 @@ function SourceOfFunds(props) {
         ]
       }
     ),
-    activeForm?.formId === "sourceOfFundsType" && /* @__PURE__ */ jsx("div", { className: formWrapperClasses("sourceOfFundsType"), children: /* @__PURE__ */ jsx(
+    activeForm?.formId === "sourceOfFundsType" && /* @__PURE__ */ jsx(
       SourceOfFundsType,
       {
         categories: sourceOfFundsTypesData,
-        ...getFormProps(props, sourceOfFundsForms.sourceOfFundsType.formId)
+        data: formData?.sourceOfFundsType,
+        errors: errors?.sourceOfFundsType,
+        valid: valid?.sourceOfFundsType,
+        fieldValidationErrors: fieldValidationErrors?.sourceOfFundsType
       }
-    ) }),
-    activeForm?.formId === "additionalData" && /* @__PURE__ */ jsx("div", { className: formWrapperClasses("additionalData"), children: /* @__PURE__ */ jsx(
+    ),
+    activeForm?.formId === "additionalData" && /* @__PURE__ */ jsx(
       SourceOfFundsAdditionalData,
       {
-        ...getFormProps(props, sourceOfFundsForms.additionalData.formId),
-        sourceOfFundsType
+        fieldValidationErrors: fieldValidationErrors?.additionalData
       }
-    ) }),
-    activeForm?.formId === "companySourceOfFunds" && /* @__PURE__ */ jsx("div", { className: formWrapperClasses("companySourceOfFunds"), children: /* @__PURE__ */ jsx("div", { children: sofT(($) => $["uploadADocument"]) }) })
+    ),
+    activeForm?.formId === "companySourceOfFunds" && /* @__PURE__ */ jsx("div", { children: sofT(($) => $["uploadADocument"]) })
   ] });
 }
 function SourceOfFundsGettingStartedCard(props) {
   const { id, title, onClick, isEdit, meta } = props;
   const { t: commonT } = useTranslation("common");
-  return /* @__PURE__ */ jsx(
-    Card,
-    {
-      className: styles.sourceOfFundsGettingStartedCardsCard,
-      headerClassName: styles.sourceOfFundsGettingStartedCardsCardHeader,
-      bodyClassName: styles.sourceOfFundsGettingStartedCardsCardBody,
-      title,
-      headerButton: isEdit ? /* @__PURE__ */ jsx(IconButton, { ariaLabel: "edit", icon: "edit", onClick, variant: "tertiary" }) : /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Card, { variant: "secondary", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.sourceOfFundsGettingStartedCardsCardHeader, children: [
+      /* @__PURE__ */ jsx(Typography, { el: "h3", variant: "title", children: title }),
+      isEdit ? /* @__PURE__ */ jsx(IconButton, { ariaLabel: "edit", icon: "edit", onClick, variant: "tertiary" }) : /* @__PURE__ */ jsx(
         Button,
         {
           variant: "primary",
@@ -1615,17 +1351,16 @@ function SourceOfFundsGettingStartedCard(props) {
           onClick,
           children: commonT(($) => $["start"])
         }
-      ),
-      children: isEdit && meta?.length && /* @__PURE__ */ jsx(
-        StructuredList,
-        {
-          className: styles.sourceOfFundsGettingStartedCardsCardDescription,
-          items: meta
-        }
       )
-    },
-    id
-  );
+    ] }),
+    isEdit && meta?.length && /* @__PURE__ */ jsx("div", { className: styles.sourceOfFundsGettingStartedCardsCardBody, children: /* @__PURE__ */ jsx(
+      StructuredList,
+      {
+        className: styles.sourceOfFundsGettingStartedCardsCardDescription,
+        items: meta
+      }
+    ) })
+  ] }, id);
 }
 const digitalWallet = lazy(() => import("./digital-wallet-Bx5YM1LY.js"));
 const SourceOfFundsGettingStarted = ({
@@ -1642,8 +1377,11 @@ const SourceOfFundsGettingStarted = ({
   const { t: commonT } = useTranslation("common");
   const { i18n } = useI18nContext();
   const hasSourceOfFunds = businessLines?.some(
-    (businessLine) => !isEmpty$1(businessLine.sourceOfFunds)
+    (businessLine) => !isEmpty(businessLine.sourceOfFunds)
   );
+  const { data: normalizedTasks } = useTaskStatus({
+    refetchInterval: TASK_STATUS_POLLING_INTERVAL_MS
+  });
   const sofDocuments = useMemo(
     () => legalEntity?.documentDetails?.filter((doc) => doc.type === "proofOfFundingOrWealthSource") ?? [],
     [legalEntity]
@@ -1755,7 +1493,7 @@ const SourceOfFundsGettingStarted = ({
             {
               title: sofT(($) => $["fundingSourcesForFinancialProducts"]),
               description: sofT(($) => $["addAllSourcesOfFundsBeingUsed"]),
-              status: normalizedTaskStatusStore?.value?.SOURCE_OF_FUNDS?.status,
+              status: normalizedTasks?.SOURCE_OF_FUNDS?.status,
               align: "center"
             }
           ),
@@ -1785,7 +1523,7 @@ const SourceOfFundsGettingStarted = ({
               `error-${index}`
             );
           }),
-          /* @__PURE__ */ jsx("div", { className: styles.sourceOfFundsGettingStartedCards, children: mapBusinessLines(businessLines) }),
+          /* @__PURE__ */ jsx("div", { className: styles.sourceOfFundsGettingStartedCards, children: /* @__PURE__ */ jsx(StackLayout, { children: mapBusinessLines(businessLines) }) }),
           handleCancelClick && /* @__PURE__ */ jsx(
             Button,
             {
@@ -2071,6 +1809,44 @@ const SourceOfFundsUpload = ({
     )
   ] });
 };
+function canParseUrl(url) {
+  if (URL.canParse) {
+    return URL.canParse(url);
+  }
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+const sourceOfFundsTypeValidations = {};
+const HAS_PROTOCOL_REGEX = /^https?:\/\//i;
+const sourceOfFundsAdditionalDataValidations = {
+  website: {
+    modes: ["blur"],
+    validate: (val) => !!val && canParseUrl(val),
+    errorMessage: (val) => {
+      if (val && !HAS_PROTOCOL_REGEX.test(val)) return "validationUrlMustStartWithHttpOrHttps";
+      return "validationPleaseEnterAValidUrl";
+    }
+  },
+  amount: {
+    modes: ["blur"],
+    validate: (amount) => amount?.value != null && !Number.isNaN(Number(amount.value)),
+    errorMessage: "pleaseEnterAValidAmount"
+  },
+  dateOfSourceEvent: {
+    modes: ["blur"],
+    validate: (dateOfSourceEvent) => validateDateNotInTheFuture(dateOfSourceEvent),
+    errorMessage: "dateCannotBeInTheFuture"
+  },
+  dateOfFundsReceived: {
+    modes: ["blur"],
+    validate: (dateOfFundsReceived) => validateDateNotInTheFuture(dateOfFundsReceived),
+    errorMessage: "dateCannotBeInTheFuture"
+  }
+};
 const logger = createLogger();
 function SourceOfFundsDropin({
   country,
@@ -2080,16 +1856,14 @@ function SourceOfFundsDropin({
   const { data: legalEntity, isLoading: isLoadingRootLegalEntity } = useLegalEntity(ROOT_LE);
   const [loadingStatus, setLoadingStatus] = useState("success");
   const [activeBusinessLine, setActiveBusinessLine] = useState();
-  const [activeSourceOfFund, setActiveSourceOfFund] = useState({});
+  const [activeSourceOfFund, setActiveSourceOfFund] = useState({
+    sourceOfFundsType: {},
+    additionalData: {}
+  });
   const [allBusinessLines, setAllBusinessLines] = useState([]);
   const [gettingStarted, setGettingStarted] = useState(true);
   const [showUploadPage, setShowUploadPage] = useState(false);
   const [loading, setLoading] = useState(false);
-  const formRef = useRef(null);
-  const {
-    state: { currentState }
-  } = useStateContext();
-  const formValidity = currentState.validityByForm;
   const { baseUrl, rootLegalEntityId } = useApiContext();
   const { t: sofT } = useTranslation("sof");
   const userEvents = useAnalyticsContext();
@@ -2098,6 +1872,21 @@ function SourceOfFundsDropin({
   const { mutateAsync: createLegalEntity } = useCreateLegalEntity();
   const { mutateAsync: updateLegalEntity } = useUpdateLegalEntity();
   const { mutateAsync: updateSoFMutation } = useUpdateSourceOfFunds();
+  const form = useMultiForm({
+    requiredFields: getSourceOfFundsRequiredFields,
+    rules: {
+      sourceOfFundsType: sourceOfFundsTypeValidations,
+      additionalData: sourceOfFundsAdditionalDataValidations
+    },
+    defaultData: activeSourceOfFund
+  });
+  const {
+    data = activeSourceOfFund,
+    setFormData,
+    requiredFields,
+    isValid,
+    triggerValidation
+  } = form;
   const isSoFDocumentMissing = useMemo(
     () => legalEntity?.problems?.some(
       (problem) => problem?.verificationErrors?.some(
@@ -2155,8 +1944,15 @@ function SourceOfFundsDropin({
           );
           if (firstBusinessLine) {
             setActiveBusinessLine(firstBusinessLine);
-            setActiveSourceOfFund(sourceOfFundsMap[0]);
+            const mappedSof = sourceOfFundsMap[0];
+            setActiveSourceOfFund(mappedSof);
             setAllBusinessLines(normalizedBusinessLines);
+            if (mappedSof?.sourceOfFundsType) {
+              setFormData("sourceOfFundsType", mappedSof.sourceOfFundsType);
+            }
+            if (mappedSof?.additionalData) {
+              setFormData("additionalData", mappedSof.additionalData);
+            }
           }
         }
       } catch (error) {
@@ -2172,37 +1968,19 @@ function SourceOfFundsDropin({
       actionType: "start"
     });
   }, [userEvents]);
-  const canSubmitForm = useMemo(
-    () => activeSourceOfFund ? !isEmpty(currentState.data?.sourceOfFundsType?.type) && hasDataChanged(activeSourceOfFund, currentState.data) : false,
-    [activeSourceOfFund, currentState.data]
-  );
-  const derivedProps = useMemo(
-    () => getPropsFromConfigurations({
-      scenarioConfiguration: {},
-      forms: sourceOfFundsForms,
-      remediationActions: problems?.remediationActions ? Object.values(problems?.remediationActions) : [],
-      dataMissingErrors: problems?.missingData ?? [],
-      // TODO fix this to take existing fields into account
-      // getFieldsWithExistingData(legalEntityResponse, sourceOfFundsApiKeyMapping),
-      fieldsWithExistingData: [],
-      customRules: {},
-      legalEntityType: legalEntity?.type
-    }),
-    [problems?.remediationActions, problems?.missingData, legalEntity]
-  );
   const sourceOfFundsRequiredForms = useMemo(
-    () => getSourceOfFundsRequiredForms(currentState?.data?.sourceOfFundsType),
-    [currentState?.data?.sourceOfFundsType]
+    () => getSourceOfFundsRequiredForms(data?.sourceOfFundsType),
+    [data?.sourceOfFundsType]
   );
   const forms = useMemo(() => {
     const requiredForms = getRequiredForms(
       sourceOfFundsRequiredForms,
-      sourceOfFundsRequiredFields,
+      requiredFields,
       void 0,
       true
     );
-    return addValidityToForms(requiredForms, formValidity, problems);
-  }, [derivedProps, formValidity, problems]);
+    return addValidityToForms(requiredForms, isValid, problems);
+  }, [sourceOfFundsRequiredForms, requiredFields, isValid, problems]);
   const createOrUpdateOriginator = async (additionalData, prevAdditionalData) => {
     let originatorLegalEntityId;
     const sofOriginator = parseSofOriginatorPayload(additionalData);
@@ -2232,7 +2010,7 @@ function SourceOfFundsDropin({
     return originatorLegalEntityId;
   };
   const handleSubmit = useCallback(async () => {
-    const sofData = { ...currentState?.data };
+    const sofData = { ...data };
     const sofType = sofData?.sourceOfFundsType?.type;
     if (!sofType || !activeBusinessLine?.id) {
       return;
@@ -2269,7 +2047,7 @@ function SourceOfFundsDropin({
       });
       setGettingStarted(true);
       setShowUploadPage(false);
-      setActiveSourceOfFund({});
+      setActiveSourceOfFund({ sourceOfFundsType: {}, additionalData: {} });
       gotoFormByFormIndex(0);
       setSofErrorMessage("");
       showToast({ label: sofT(($) => $["successAddedFundingSources"]), variant: "success" });
@@ -2279,7 +2057,7 @@ function SourceOfFundsDropin({
       logger.log("Error updating source of funds", e);
     }
     setLoadingStatus("success");
-  }, [currentState?.data, activeSourceOfFund, handleHomeClick]);
+  }, [data, activeSourceOfFund, handleHomeClick]);
   const handleGettingStarted = useCallback(() => {
     setGettingStarted(!gettingStarted);
   }, [gettingStarted]);
@@ -2288,18 +2066,11 @@ function SourceOfFundsDropin({
     setActiveSourceOfFund(SoF);
     setGettingStarted(false);
   };
-  const {
-    handleNextClick,
-    handleBackClick,
-    activeForm,
-    shouldValidate,
-    setShouldValidate,
-    gotoFormByFormIndex,
-    steps
-  } = useFormComposer({
+  const { handleNextClick, activeForm, gotoFormByFormIndex, steps, handleBackClick } = useFormComposer({
     problems,
     forms,
-    onSubmit: handleSubmit
+    onSubmit: handleSubmit,
+    triggerValidation
   });
   const documentUtils = documentApiUtils({
     baseUrl: baseUrl.value,
@@ -2335,38 +2106,31 @@ function SourceOfFundsDropin({
         handleNavigateToSummary
       }
     ),
-    !gettingStarted && !showUploadPage && /* @__PURE__ */ jsx(
-      FormWrapper,
+    !gettingStarted && !showUploadPage && /* @__PURE__ */ jsx(FormContextProvider, { form, children: /* @__PURE__ */ jsx(
+      FormFlow,
       {
-        taskName: "sourceOfFunds",
-        gotoFormByFormIndex,
-        hideSidebar: true,
-        loadingStatus,
         forms,
+        disableNextButton: !activeForm.isValid,
         activeForm,
-        validateForm: () => setShouldValidate(true),
-        onSubmit: handleSubmit,
-        problems,
-        canSubmit: canSubmitForm,
-        handleNextClick,
-        showBackButton: true,
+        gotoFormByFormIndex,
         handleBackClick: steps.current === 0 ? handleGettingStarted : handleBackClick,
-        handleHomeClick,
-        steps,
+        handleCancelClick: handleHomeClick,
+        handleNextClick,
+        loadingStatus,
+        currentStep: steps.current,
+        totalSteps: steps.total,
         children: /* @__PURE__ */ jsx(
           SourceOfFunds,
           {
             country,
             activeForm,
-            shouldValidate,
             activeBusinessLine,
-            sourceOfFundsType: currentState?.data?.sourceOfFundsType?.type,
-            ref: formRef,
+            sourceOfFundsType: data?.sourceOfFundsType?.type,
             data: activeSourceOfFund
           }
         )
       }
-    )
+    ) })
   ] }) });
 }
 const SourceOfFundsPage = ({ onSubmit, handleHomeClick }) => {