@adyen/kyc-components 2.60.0 → 2.61.0

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

@@ -1,16 +1,120 @@
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import { useContext, useState, useCallback, useEffect, useMemo, useReducer, useId, useRef, useLayoutEffect } from "preact/hooks";
+import { debounce as debounce$1 } from "lodash-es";
 import { createContext, isValidElement, createElement, render } from "preact";
 import DOMPurify from "isomorphic-dompurify";
 import cx from "classnames";
 import { lazy, Suspense, forwardRef, memo, useMemo as useMemo$1 } from "preact/compat";
-import debounce$1 from "lodash-es/debounce";
+import debounce$2 from "lodash-es/debounce";
 import isISIN from "validator/es/lib/isISIN.js";
 import { Onfido } from "onfido-sdk-ui";
 import OpenBankingSDK from "@adyen/openbankingsdk";
 import { jsxs as jsxs$1, jsx as jsx$1 } from "preact/compat/jsx-runtime";
 import "@adyen/adyen-document-viewer/dist/adyen-document-viewer.min.css";
 import AdyenDocumentViewer from "@adyen/adyen-document-viewer";
+class UserEvents {
+  constructor() {
+    this.queue = [];
+    this.subscriptions = /* @__PURE__ */ new Set();
+    this.updateSharedEventProperties = (props) => {
+      this.sharedEventProperties = { ...this.sharedEventProperties, ...props };
+    };
+    this.baseTrackingPayload = {
+      category: "onboarding",
+      subCategory: "hosted onboarding",
+      countryCode: void 0,
+      capabilities: void 0,
+      legalEntityId: void 0,
+      task: void 0
+    };
+    this.sharedEventProperties = {};
+  }
+  add(...args) {
+    this.queue.push(...args);
+  }
+  notifySubscribers() {
+    while (this.queue.length > 0) {
+      const lastEvent = this.queue.pop();
+      this.subscriptions.forEach((callback) => callback(lastEvent));
+    }
+  }
+  /**
+   * Adds an analytics event.
+   */
+  addEvent(eventName, properties) {
+    const completeEvent = { ...this.baseTrackingPayload, ...properties };
+    this.add({ type: "add_event", name: eventName, properties: { ...completeEvent } });
+    console.log("addevent", "name", eventName, completeEvent);
+    this.notifySubscribers();
+  }
+  /**
+   * Starts a timer for an event to measure the time it takes for an event to occur. Time is ended when `addEvent` is executed with the same key
+   */
+  startEvent(eventName) {
+    this.add({ type: "start_event", name: eventName });
+    this.notifySubscribers();
+  }
+  /**
+   * Adds an event with context specific to field-related events
+   */
+  addFieldEvent(eventName, properties) {
+    this.addEvent(eventName, {
+      actionLevel: "field",
+      page: this.sharedEventProperties.page,
+      ...properties
+    });
+  }
+  /**
+   * Subscribes a callback to analytics events. It gets called every time
+   * one of the above public methods get called, and the event data is passed back as an array.
+   * The callback must have a single argument which is an array of [eventName, eventPayload?].
+   * @example
+   * ```js
+   * const callback = ([eventName, eventPayload]) => console.log(eventName, eventPayload);
+   * this.subscribe(callback);
+   *
+   * const exampleEventPayload = { count: 1, segmentation: { foo: 'bar' } };
+   * this.addEvent('exampleEventDidOccur', exampleEventPayload);
+   *
+   * // `callback` will get called with `['exampleEventDidOccur', exampleEventPayload]`
+   * ```
+   */
+  subscribe(callback) {
+    this.subscriptions.add(callback);
+  }
+  /** Sets params that are sent on every event */
+  updateBaseTrackingPayload(baseTrackingPayload) {
+    this.baseTrackingPayload = { ...this.baseTrackingPayload, ...baseTrackingPayload };
+  }
+  /**
+   * Removes a subscribed callback
+   */
+  unsubscribe(callback) {
+    if (this.subscriptions.has(callback)) {
+      this.subscriptions.delete(callback);
+    }
+  }
+}
+const userEvents = new UserEvents();
+const getAssociatedLeAnalyticsPayload = ({
+  task,
+  associatedLegalEntity,
+  associatedLegalEntityOrg
+}) => ({
+  task,
+  ...associatedLegalEntity ? {
+    associatedLegalEntityId: associatedLegalEntity == null ? void 0 : associatedLegalEntity.id,
+    associatedLegalEntityType: associatedLegalEntity == null ? void 0 : associatedLegalEntity.type
+  } : {},
+  ...associatedLegalEntityOrg ? {
+    associatedLegalEntityOrgId: associatedLegalEntityOrg == null ? void 0 : associatedLegalEntityOrg.id,
+    associatedLegalEntityOrgType: associatedLegalEntityOrg == null ? void 0 : associatedLegalEntityOrg.type
+  } : {}
+});
+const debouncedInputEvent$1 = debounce$1(
+  (properties) => userEvents.addFieldEvent("Interacted with form field", properties),
+  500
+);
 const ConfigurationApiContext = createContext(void 0);
 const useConfigurationApi = () => {
   const configurationApi = useContext(ConfigurationApiContext);
@@ -3639,6 +3743,16 @@ const Field = ({
     passedValue: focused,
     skipUpdate: focused === void 0
   });
+  useEffect(() => {
+    if (!errorMessage) return;
+    const returnValue = typeof errorMessage === "string" && errorMessage || "invalid";
+    userEvents.addFieldEvent("Encountered error", {
+      actionType: "input",
+      field: label,
+      returnType: "validation",
+      returnValue
+    });
+  }, [label, errorMessage]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3766,6 +3880,7 @@ function SelectButtonElement({
   return /* @__PURE__ */ jsx("button", { ...props, ref: toggleButtonRef, type: "button" });
 }
 function SelectButton({
+  name,
   active,
   readonly,
   showList,
@@ -3783,14 +3898,25 @@ function SelectButton({
   isMulti,
   id,
   isSearch,
-  hideSearchIcon = false,
   loading,
-  textFilter
+  hideSearchIcon = false,
+  textFilter,
+  enableTracking = false
 }) {
-  const title = (active == null ? void 0 : active.length) ? active.map(({ name }) => name).join(",") : placeholder;
+  const title = (active == null ? void 0 : active.length) ? active.map(({ name: name2 }) => name2).join(",") : placeholder;
+  const handleSelect = (e, callback) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    }
+    callback(e);
+  };
   return /* @__PURE__ */ jsx(
     SelectButtonElement,
     {
+      name,
       "aria-disabled": readonly,
       "aria-expanded": showList,
       "aria-haspopup": "listbox",
@@ -3803,8 +3929,8 @@ function SelectButton({
         "adyen-kyc-dropdown-button-search": isSearch
       }),
       filterable,
-      onClick: !readonly ? toggleList : void 0,
-      onKeyDown: !readonly ? onButtonKeyDown : void 0,
+      onClick: !readonly ? (e) => handleSelect(e, toggleList) : void 0,
+      onKeyDown: !readonly ? (e) => handleSelect(e, onButtonKeyDown) : void 0,
       role: filterable || isMulti ? "button" : void 0,
       tabIndex: 0,
       title,
@@ -3907,8 +4033,20 @@ function Checkbox({
   helper,
   checked,
   disabled,
+  enableTracking = false,
   ...props
 }) {
+  const field = typeof label === "string" ? label : props.name;
+  const handleChange = (newValue) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field,
+        returnValue: String(newValue)
+      });
+    }
+    onChange(newValue);
+  };
   return /* @__PURE__ */ jsxs("label", { className: "adyen-kyc-checkbox", children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -3925,7 +4063,7 @@ function Checkbox({
         type: "checkbox",
         onClick: (event) => {
           event.stopPropagation();
-          onChange(!checked);
+          handleChange(!checked);
         }
       }
     ),
@@ -4137,7 +4275,8 @@ const Select = ({
   getSearchItem,
   searchText,
   onSearchTextChange,
-  showSearchList
+  showSearchList,
+  enableTracking = false
 }) => {
   const filterInputRef = useRef(null);
   const selectContainerRef = useRef(null);
@@ -4149,7 +4288,7 @@ const Select = ({
   const active = items.filter((i) => !isMulti ? i.id === selected : selected == null ? void 0 : selected.includes(i.id)) || [];
   const [isShowListAbove, setIsShowListAbove] = useState(false);
   const [scrollParent, setScrollParent] = useState(null);
-  const debouncedOnSearch = useCallback(debounce$1(onSearch, 500), [onSearch]);
+  const debouncedOnSearch = useCallback(debounce$2(onSearch, 500), [onSearch]);
   const closeList = () => {
     if (!onSearchTextChange) setTextFilter(null);
     setIsShowList(false);
@@ -4175,17 +4314,28 @@ const Select = ({
   const hideList = () => {
     setIsShowList(false);
   };
-  const handleSelect = (selectedItem) => {
-    if (readonly) return;
-    if (isMulti) {
-      const isAlreadySelected = active.find((item) => item.id === selectedItem.id);
-      const newActiveItems = isAlreadySelected ? [...active.filter((i) => i.id !== selectedItem.id).map((i) => i.id)] : [...active.map((i) => i.id), selectedItem.id];
-      onChange({ target: { value: newActiveItems, name } });
-    } else {
-      closeList();
-      onChange({ target: { value: selectedItem.id, name } });
-    }
-  };
+  const handleSelect = useCallback(
+    (selectedItem) => {
+      if (readonly) return;
+      if (isMulti) {
+        const isAlreadySelected = active.find((item) => item.id === selectedItem.id);
+        const newActiveItems = isAlreadySelected ? [...active.filter((i) => i.id !== selectedItem.id).map((i) => i.id)] : [...active.map((i) => i.id), selectedItem.id];
+        onChange({ target: { value: newActiveItems, name } });
+      } else {
+        const handleOnChange = onChange;
+        closeList();
+        handleOnChange({ target: { value: selectedItem.id, name } });
+      }
+      if (enableTracking) {
+        userEvents.addFieldEvent("Interacted with form field", {
+          actionType: "select",
+          field: name
+        });
+      }
+      if (showSearchList) setIsShowList(showSearchList);
+    },
+    [active, closeList, isMulti, name, onChange, readonly, showSearchList, enableTracking]
+  );
   const handleButtonKeyDown = (e) => {
     var _a;
     if (e.key === KEYBOARD_KEYS.enter && filterable && isShowList && textFilter) {
@@ -4246,18 +4396,24 @@ const Select = ({
         break;
     }
   };
-  const handleTextFilter = (e) => {
-    const { value } = e.target;
-    if (isSearch && value.length > 2) {
-      debouncedOnSearch(value);
-    }
-    if (onSearchTextChange) {
-      onSearchTextChange == null ? void 0 : onSearchTextChange(value);
-      setTextFilter(value);
-    } else {
-      setTextFilter(value.toLowerCase());
-    }
-  };
+  const handleTextFilter = useCallback(
+    (e) => {
+      const { value } = e.target;
+      if (enableTracking) {
+        debouncedInputEvent$1({ actionType: "input", field: name });
+      }
+      if (isSearch && value.length > 2) {
+        debouncedOnSearch(value);
+      }
+      if (onSearchTextChange) {
+        onSearchTextChange == null ? void 0 : onSearchTextChange(value);
+        setTextFilter(value);
+      } else {
+        setTextFilter(value.toLowerCase());
+      }
+    },
+    [debouncedOnSearch, isSearch, onSearchTextChange, enableTracking, name]
+  );
   const toggleList = (e) => {
     e.preventDefault();
     if (isShowList) {
@@ -4309,6 +4465,7 @@ const Select = ({
           SelectButton,
           {
             id: uniqueId ?? null,
+            name,
             active,
             filterInputRef,
             filterable,
@@ -4328,7 +4485,8 @@ const Select = ({
             isSearch,
             hideSearchIcon: !!onSearchTextChange,
             loading,
-            textFilter
+            textFilter,
+            enableTracking
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4853,15 +5011,24 @@ const useForwardedRef = (forwardedRef) => {
 };
 const convertFullToHalf = (str) => str.replace(/[！-～]/g, (r) => String.fromCharCode(r.charCodeAt(0) - 65248));
 const InputBase = forwardRef((props, ref) => {
-  const { classNameModifiers = [], uniqueId, ...passedProps } = props;
-  const { isInvalid, isValid, type = "text", disabled } = props;
+  const { classNameModifiers = [], uniqueId, enableTracking = false, ...passedProps } = props;
+  const { isInvalid, isValid, type = "text", disabled, name } = props;
   const handleInput = (e) => {
     var _a;
+    if (enableTracking) {
+      debouncedInputEvent$1({ actionType: "input", field: name });
+    }
     e.target.value = convertFullToHalf(e.target.value);
     (_a = props.onInput) == null ? void 0 : _a.call(props, e);
   };
   const handleBlur = (e) => {
     var _a, _b;
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "blur",
+        field: name
+      });
+    }
     (_a = props.onBlurHandler) == null ? void 0 : _a.call(props, e);
     if (props.trimOnBlur) {
       e.target.value = e.target.value.trim();
@@ -4870,6 +5037,12 @@ const InputBase = forwardRef((props, ref) => {
   };
   const handleFocus = (e) => {
     var _a;
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    }
     (_a = props.onFocusHandler) == null ? void 0 : _a.call(props, e);
   };
   const inputClassNames = cx(
@@ -4887,6 +5060,7 @@ const InputBase = forwardRef((props, ref) => {
     "input",
     {
       ...passedProps,
+      name,
       "aria-disabled": disabled,
       "aria-invalid": !isValid,
       "aria-required": passedProps.required,
@@ -7594,9 +7768,20 @@ function RadioGroup({
   disabled = false,
   horizontal = false,
   showContentOnlyOnSelected = false,
-  className
+  className,
+  enableTracking = false
 }) {
   const { i18n } = useI18nContext();
+  const handleChange = (id) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: value
+      });
+    }
+    onChange(id);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -7617,7 +7802,7 @@ function RadioGroup({
             groupName: name,
             checked: isSelected,
             disabled,
-            onClick: () => onChange(item.id)
+            onClick: () => handleChange(item.id)
           },
           item.id
         );
@@ -7970,74 +8155,6 @@ function BusinessRegistrationNumberField({
     )
   ] });
 }
-class UserEvents {
-  constructor() {
-    this.queue = [];
-    this.subscriptions = /* @__PURE__ */ new Set();
-    this.baseTrackingPayload = {
-      category: "onboarding",
-      subCategory: "hosted onboarding",
-      countryCode: void 0,
-      capabilities: void 0,
-      legalEntityId: void 0
-    };
-  }
-  add(...args) {
-    this.queue.push(...args);
-  }
-  notifySubscribers() {
-    while (this.queue.length > 0) {
-      const lastEvent = this.queue.pop();
-      this.subscriptions.forEach((callback) => callback(lastEvent));
-    }
-  }
-  /**
-   * Adds an analytics event. Optionally can include a payload.
-   */
-  addEvent(eventName, properties) {
-    const completeEvent = { ...this.baseTrackingPayload, ...properties };
-    this.add({ type: "add_event", name: eventName, properties: { ...completeEvent } });
-    this.notifySubscribers();
-  }
-  /**
-   * Starts a timer for an event to measure the time it takes for an event to occur. Time is ended when `addEvent` is executed with the same key
-   */
-  startEvent(eventName) {
-    this.add({ type: "start_event", name: eventName });
-    this.notifySubscribers();
-  }
-  /**
-   * Subscribes a callback to analytics events. It gets called every time
-   * one of the above public methods get called, and the event data is passed back as an array.
-   * The callback must have a single argument which is an array of [eventName, eventPayload?].
-   * @example
-   * ```js
-   * const callback = ([eventName, eventPayload]) => console.log(eventName, eventPayload);
-   * this.subscribe(callback);
-   *
-   * const exampleEventPayload = { count: 1, segmentation: { foo: 'bar' } };
-   * this.addEvent('exampleEventDidOccur', exampleEventPayload);
-   *
-   * // `callback` will get called with `['exampleEventDidOccur', exampleEventPayload]`
-   * ```
-   */
-  subscribe(callback) {
-    this.subscriptions.add(callback);
-  }
-  /** Sets params that are sent on every event */
-  updateBaseTrackingPayload(baseTrackingPayload) {
-    this.baseTrackingPayload = { ...this.baseTrackingPayload, ...baseTrackingPayload };
-  }
-  /**
-   * Removes a subscribed callback
-   */
-  unsubscribe(callback) {
-    if (this.subscriptions.has(callback)) {
-      this.subscriptions.delete(callback);
-    }
-  }
-}
-const userEvents = new UserEvents();
 function ContextGuidance({
   page,
   title,
@@ -10895,7 +11012,7 @@ const isExistingFile = (file) => "existing" in file && file.existing;
 const isNewlyUploadedFile = (file) => !isExistingFile(file);
 function DropzoneFile(props) {
   var _a;
-  const { file, errorMessage, onDelete } = props;
+  const { label, file, errorMessage, onDelete } = props;
   const { i18n } = useI18nContext();
   let documentIcon;
   const formatSize = (bytes) => {
@@ -10912,6 +11029,15 @@ function DropzoneFile(props) {
     default:
       documentIcon = "document";
   }
+  useEffect(() => {
+    if (!errorMessage) return;
+    userEvents.addFieldEvent("Encountered error", {
+      actionType: "change",
+      field: label || "dropzone",
+      returnType: "validation",
+      returnValue: errorMessage
+    });
+  }, [label, errorMessage]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11024,7 +11150,8 @@ function Dropzone(props) {
     isOptional,
     maxNumberOfFiles = defaultFileValidationOptions.maxNumberOfFiles,
     maxSize = defaultFileValidationOptions.maxSize,
-    allowedFileTypes = defaultFileValidationOptions.allowedFileTypes
+    allowedFileTypes = defaultFileValidationOptions.allowedFileTypes,
+    enableTracking = false
   } = props;
   const { i18n } = useI18nContext();
   const fileInput = useRef(null);
@@ -11099,6 +11226,12 @@ function Dropzone(props) {
   };
   const handleFileChange = (e) => updateFiles(e.target);
   const updateFiles = ({ files }) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "change",
+        field: label || "file picker"
+      });
+    }
     const currentFiles = (data == null ? void 0 : data[name]) || [];
     handleChangeFor(name, "input")([...currentFiles, ...files]);
   };
@@ -11134,6 +11267,7 @@ function Dropzone(props) {
       return /* @__PURE__ */ jsx(
         DropzoneFile,
         {
+          label,
           file,
           onDelete: () => handleFileDelete(file),
           errorMessage: (_a2 = errors == null ? void 0 : errors[name]) == null ? void 0 : _a2.errorMessage
@@ -11183,6 +11317,10 @@ function Dropzone(props) {
   ] });
 }
 const logger$z = createLogger("TextArea");
+const debouncedInputEvent = debounce$2(
+  (properties) => userEvents.addFieldEvent("Interacted with form field", properties),
+  500
+);
 function TextArea(props) {
   const { classNameModifiers, uniqueId, ...passedProps } = props;
   const {
@@ -11192,7 +11330,9 @@ function TextArea(props) {
     readonly = null,
     spellCheck,
     disabled,
-    maxLength
+    maxLength,
+    enableTracking = false,
+    name
   } = props;
   const { i18n } = useI18nContext();
   const [value, setValue] = useState("");
@@ -11201,12 +11341,24 @@ function TextArea(props) {
   }
   const handleInput = (e) => {
     var _a;
+    if (enableTracking) {
+      debouncedInputEvent({
+        actionType: "input",
+        field: name
+      });
+    }
     e.target.value = convertFullToHalf(e.target.value);
     setValue(e.target.value);
     (_a = props == null ? void 0 : props.onInput) == null ? void 0 : _a.call(props, e);
   };
   const handleBlur = (e) => {
     var _a, _b;
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "blur",
+        field: name
+      });
+    }
     (_a = props == null ? void 0 : props.onBlurHandler) == null ? void 0 : _a.call(props, e);
     if (props.trimOnBlur) {
       e.target.value = e.target.value.trim();
@@ -11215,6 +11367,12 @@ function TextArea(props) {
   };
   const handleFocus = (e) => {
     var _a;
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    }
     (_a = props == null ? void 0 : props.onFocusHandler) == null ? void 0 : _a.call(props, e);
   };
   const inputClassNames = cx(
@@ -15675,27 +15833,40 @@ const RadioCardSelect = ({
   renderOptionBody,
   renderOptionFooter,
   isOptionDisabled,
-  floatingRadio
-}) => /* @__PURE__ */ jsx("div", { className: className ?? "adyen-kyc-radio-group-card", children: options.map((option) => /* @__PURE__ */ jsx(
-  RadioCard,
-  {
-    optionId: optionId(option),
-    optionName: optionName(option),
-    optionDescription: optionDescription == null ? void 0 : optionDescription(option),
-    optionSubtitle: optionSubtitle == null ? void 0 : optionSubtitle(option),
-    isInvalid,
-    isSelected: selected === option,
-    onSelect: () => onSelect(option),
-    name,
-    classNames: optionClassNames == null ? void 0 : optionClassNames(option),
-    icon: renderOptionIcon == null ? void 0 : renderOptionIcon(option),
-    body: renderOptionBody == null ? void 0 : renderOptionBody(option),
-    footer: renderOptionFooter == null ? void 0 : renderOptionFooter(option),
-    disabled: isOptionDisabled == null ? void 0 : isOptionDisabled(option),
-    floatingRadio
-  },
-  optionId(option)
-)) });
+  floatingRadio,
+  enableTracking = false
+}) => {
+  const handleSelect = (option) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: typeof option === "string" ? option : void 0
+      });
+    }
+    onSelect(option);
+  };
+  return /* @__PURE__ */ jsx("div", { className: className ?? "adyen-kyc-radio-group-card", children: options.map((option) => /* @__PURE__ */ jsx(
+    RadioCard,
+    {
+      optionId: optionId(option),
+      optionName: optionName(option),
+      optionDescription: optionDescription == null ? void 0 : optionDescription(option),
+      optionSubtitle: optionSubtitle == null ? void 0 : optionSubtitle(option),
+      isInvalid,
+      isSelected: selected === option,
+      onSelect: () => handleSelect(option),
+      name,
+      classNames: optionClassNames == null ? void 0 : optionClassNames(option),
+      icon: renderOptionIcon == null ? void 0 : renderOptionIcon(option),
+      body: renderOptionBody == null ? void 0 : renderOptionBody(option),
+      footer: renderOptionFooter == null ? void 0 : renderOptionFooter(option),
+      disabled: isOptionDisabled == null ? void 0 : isOptionDisabled(option),
+      floatingRadio
+    },
+    optionId(option)
+  )) });
+};
 const idVerificationMethodsMetadata = {
   instantVerification: {
     name: "instantVerification",
@@ -15855,47 +16026,6 @@ var TrustedFieldsProvider = /* @__PURE__ */ ((TrustedFieldsProvider2) => {
   TrustedFieldsProvider2["KOMPANY"] = "kompany";
   return TrustedFieldsProvider2;
 })(TrustedFieldsProvider || {});
-function getBaseTrackingPayload({
-  trackingConfig = {
-    topLevelLegalEntity: {}
-  },
-  parentLegalEntity,
-  legalEntity,
-  task
-}) {
-  const { topLevelLegalEntity } = trackingConfig;
-  const baseTrackingPayload = {
-    task,
-    entityType: topLevelLegalEntity == null ? void 0 : topLevelLegalEntity.type,
-    topLevelLegalEntityId: topLevelLegalEntity == null ? void 0 : topLevelLegalEntity.id,
-    topLevelLegalEntityType: topLevelLegalEntity == null ? void 0 : topLevelLegalEntity.type
-  };
-  if (parentLegalEntity) {
-    baseTrackingPayload.parentLegalEntityId = parentLegalEntity.id;
-    baseTrackingPayload.parentLegalEntityType = parentLegalEntity.type;
-  }
-  if (legalEntity) {
-    baseTrackingPayload.legalEntityId = legalEntity.id;
-    baseTrackingPayload.entityType = legalEntity.type;
-  }
-  return baseTrackingPayload;
-}
-const removeOldDataBySchema = (dataSubmitted, savedLegalEntityData) => {
-  Object.keys(savedLegalEntityData).forEach((formId) => {
-    if (savedLegalEntityData[formId]) {
-      Object.keys(savedLegalEntityData[formId]).forEach((key) => {
-        if (dataSubmitted[formId][key] === void 0) {
-          if (Array.isArray(savedLegalEntityData[formId][key])) {
-            dataSubmitted[formId][key] = [];
-          } else {
-            dataSubmitted[formId][key] = "";
-          }
-        }
-      });
-    }
-  });
-  return dataSubmitted;
-};
 const getLegalEntityCountry = (legalEntityResponse) => legalEntityResponse.type === LegalEntityType.INDIVIDUAL ? legalEntityResponse.individual.residentialAddress.country : legalEntityResponse.organization.registeredAddress.country;
 const getAgeToday = (birthdate) => {
   const today = /* @__PURE__ */ new Date();
@@ -18264,11 +18394,9 @@ function PersonalDetailsComponent(props) {
     }
   };
   const alertProps = getAlertProps();
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig: {
-      topLevelLegalEntity: props.parentLegalEntity
-    },
-    task: props.taskType
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    task: props.taskType,
+    ...isDecisionMakerTask ? { associatedLegalEntity: props.parentLegalEntity } : {}
   });
   return /* @__PURE__ */ jsxs(LoaderWrapper, { status, formOpacityWhenLoading: 0.3, loaderSize: "large", children: [
     /* @__PURE__ */ jsx(StateContextSetter, { owner: PERSONAL_DETAILS, stateRef }),
@@ -19012,6 +19140,7 @@ function FilePicker({
   multiple = false,
   label,
   iconPrefix = "generic-document",
+  enableTracking = false,
   // file validation options
   allowedFileTypes,
   maxSize,
@@ -19053,6 +19182,12 @@ function FilePicker({
     if (fileInput2.files) addFiles(fileInput2.files);
   };
   const addFiles = (newFiles) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "change",
+        field: label || "dropzone"
+      });
+    }
     setFiles([...newFiles, ...files]);
   };
   const allowedFileTypesString = allowedFileTypes.join(", ");
@@ -19069,6 +19204,7 @@ function FilePicker({
     files.map((file) => /* @__PURE__ */ jsx(
       DropzoneFile,
       {
+        label,
         file,
         onDelete: () => handleFileDelete(file),
         errorMessage,
@@ -21768,12 +21904,6 @@ function PayoutVerificationMethod(props) {
   const { dataset: countries } = useDataset(datasetIdentifier.country);
   const bankCountryName = ((_b = countries.find((country2) => country2.id === data.bankCountry)) == null ? void 0 : _b.name) ?? data.bankCountry;
   const allowedBankCountries = getAllowedBankCountries(country);
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig: {
-      topLevelLegalEntity: legalEntityResponse
-    },
-    task: TaskTypes.PAYOUT
-  });
   const countryField = /* @__PURE__ */ jsx(
     CountryField,
     {
@@ -21913,7 +22043,7 @@ function PayoutVerificationMethod(props) {
           /* @__PURE__ */ jsx(Typography, { children: i18n.get("adyenWillOnlyGetTemporaryAccess") }),
           /* @__PURE__ */ jsx(Link, { href: "https://www.adyen.com/policies-and-disclaimer/privacy-policy", external: true, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: i18n.get("learnMore") }) })
         ] }),
-        baseTrackingPayload
+        baseTrackingPayload: { task: TaskTypes.PAYOUT }
       }
     ) : void 0
   ] });
@@ -23924,16 +24054,15 @@ const trackNavigation = ({
   fromForm,
   toForm,
   component,
-  baseTrackingPayload,
-  i18n
+  baseTrackingPayload
 }) => {
   userEvents.addEvent("Clicked button", {
     ...baseTrackingPayload,
     actionLevel: "page",
     actionType: "navigate",
-    page: i18n.get(fromForm),
+    page: fromForm,
     label: component,
-    toPage: i18n.get(toForm)
+    toPage: toForm
   });
 };
 const useHideButton = (condition, setHideState) => {
@@ -23989,6 +24118,9 @@ const useFormComposer = ({
       (activeForm2) => forms.find(({ formId }) => formId === activeForm2.formId) ?? activeForm2
     );
   }, [forms]);
+  useEffect(() => {
+    userEvents.updateSharedEventProperties({ page: activeForm.formHeading || activeForm.formId });
+  }, [activeForm]);
   useEffect(() => {
     if (hasAlreadyNavigatedForm) return;
     const openingStep = getOpeningStep(forms, problems == null ? void 0 : problems.remediationActions);
@@ -24044,8 +24176,7 @@ const useFormComposer = ({
       fromForm: activeForm.formName,
       toForm: forms[toFormIndex].formName,
       component: "ActionBar",
-      baseTrackingPayload,
-      i18n
+      baseTrackingPayload
     });
     trackSectionCompletion(activeForm.formName);
   };
@@ -24060,8 +24191,7 @@ const useFormComposer = ({
         fromForm: fromForm.formName,
         toForm: toForm.formName,
         component: "ActionBar",
-        baseTrackingPayload,
-        i18n
+        baseTrackingPayload
       });
     }
   };
@@ -27624,10 +27754,25 @@ const FormWrapper = ({
     ExperimentNames.ShowExtraTaxExemptionReasons
   );
   const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && ((_a = summaryData.companyRegistrationDetails) == null ? void 0 : _a.vatAbsenceReason) && ["companyDetails", "businessDetails"].includes(taskName);
+  const handleTrackNavigation = useCallback(
+    ({
+      fromForm,
+      toForm,
+      component
+    }) => {
+      trackNavigation({
+        fromForm,
+        toForm,
+        component,
+        baseTrackingPayload
+      });
+    },
+    [baseTrackingPayload]
+  );
   const summaryContent = /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-wrapper", children: /* @__PURE__ */ jsx(
     Summary,
     {
-      trackNavigation: (payload) => trackNavigation({ ...payload, i18n, baseTrackingPayload }),
+      trackNavigation: handleTrackNavigation,
       data: summaryData,
       omittedKeys,
       omittedForms,
@@ -27717,7 +27862,7 @@ const FormWrapper = ({
           gotoForm: gotoFormByFormIndex,
           validateForm,
           taskName,
-          trackNavigation: ({ fromForm, toForm, component }) => trackNavigation({ fromForm, toForm, component, baseTrackingPayload, i18n }),
+          trackNavigation: handleTrackNavigation,
           verificationErrors: problems == null ? void 0 : problems.verificationErrors
         }
       )
@@ -27747,6 +27892,22 @@ const validateErrorCode = (error, errorCode) => error && "errorCode" in error &&
 const isValidationError = (error) => validateErrorCode(error, API_VALIDATION_ERROR_CODE);
 const isIdDocumentUploadError = (error) => validateErrorCode(error, ID_DOCUMENT_UPLOAD_ERROR_CODE);
 const isBankStatementUploadError = (error) => validateErrorCode(error, BANK_STATEMENT_UPLOAD_ERROR_CODE);
+const removeOldDataBySchema = (dataSubmitted, savedLegalEntityData) => {
+  Object.keys(savedLegalEntityData).forEach((formId) => {
+    if (savedLegalEntityData[formId]) {
+      Object.keys(savedLegalEntityData[formId]).forEach((key) => {
+        if (dataSubmitted[formId][key] === void 0) {
+          if (Array.isArray(savedLegalEntityData[formId][key])) {
+            dataSubmitted[formId][key] = [];
+          } else {
+            dataSubmitted[formId][key] = "";
+          }
+        }
+      });
+    }
+  });
+  return dataSubmitted;
+};
 const processValidationErrors = (validationError, dropinTask, keyMappings) => {
   if ((validationError == null ? void 0 : validationError.invalidFields) && (validationError == null ? void 0 : validationError.invalidFields.length) > 0) {
     return validationError == null ? void 0 : validationError.invalidFields.reduce((acc, invalidField) => {
@@ -28101,7 +28262,6 @@ function BusinessDetailsDropinComponent({
   legalEntityResponse,
   isTargetLegalEntityType,
   parentLegalEntity,
-  trackingConfig,
   capabilities,
   taskName,
   hideDropinLayout,
@@ -28127,17 +28287,20 @@ function BusinessDetailsDropinComponent({
   const {
     state: { currentState }
   } = useStateContext();
+  const baseTrackingPayload = useMemo(
+    () => getAssociatedLeAnalyticsPayload({
+      task: taskType,
+      associatedLegalEntity: parentLegalEntity
+    }),
+    [parentLegalEntity, taskType]
+  );
   useEffect(() => {
     onChange == null ? void 0 : onChange(currentState);
   }, [currentState, onChange]);
   useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     userEvents.addEvent("Landed on page", {
-      ...getBaseTrackingPayload({
-        trackingConfig,
-        parentLegalEntity,
-        legalEntity: legalEntityResponse,
-        task: taskType
-      }),
+      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "start"
     });
@@ -28183,15 +28346,6 @@ function BusinessDetailsDropinComponent({
   );
   const [showCompanyStructure, setShowCompanyStructure] = useState(currentCountry !== "US");
   const [showBusinessSelection, setShowBusinessSelection] = useState(false);
-  const baseTrackingPayload = useMemo(
-    () => getBaseTrackingPayload({
-      trackingConfig,
-      parentLegalEntity,
-      legalEntity: legalEntityResponse,
-      task: taskType
-    }),
-    [legalEntityResponse, parentLegalEntity, taskType, trackingConfig]
-  );
   const getConfigurationData = useCallback(
     () => getConfiguration2({
       legalEntityType: LegalEntityType.ORGANIZATION,
@@ -28472,11 +28626,17 @@ function BusinessDetailsDropinComponent({
     ]
   );
   const nextClick = useCallback(() => {
-    var _a2;
+    var _a2, _b2;
     if (!COUNTRIES_USING_COMPANY_SEARCH.includes(currentCountry)) return handleNextClick();
+    const toFormName = (_a2 = forms[forms.findIndex((form) => form.formId === activeForm.formId) + 1]) == null ? void 0 : _a2.formName;
     switch (activeForm.formId) {
       case "basicInformation":
-        if (((_a2 = currentState.validityByForm) == null ? void 0 : _a2.basicInformation) && !isBusinessSelection && !verifiedBusiness) {
+        if (((_b2 = currentState.validityByForm) == null ? void 0 : _b2.basicInformation) && !isBusinessSelection && !verifiedBusiness) {
+          trackNavigation({
+            fromForm: activeForm.formName,
+            toForm: toFormName || "home",
+            component: "next"
+          });
           findBusiness(currentState.data.basicInformation);
           setShowBusinessSelection(true);
           break;
@@ -28488,17 +28648,24 @@ function BusinessDetailsDropinComponent({
   }, [
     currentCountry,
     handleNextClick,
+    forms,
     activeForm.formId,
-    verifiedBusiness,
+    activeForm.formName,
     (_e = currentState.validityByForm) == null ? void 0 : _e.basicInformation,
     currentState.data.basicInformation,
     isBusinessSelection,
+    verifiedBusiness,
     findBusiness
   ]);
   const backClick = useCallback(() => {
     if (!COUNTRIES_USING_COMPANY_SEARCH.includes(country)) return handleBackClick == null ? void 0 : handleBackClick();
     switch (activeForm.formId) {
       case "basicInformation": {
+        trackNavigation({
+          fromForm: activeForm.formName,
+          toForm: "basicDetails",
+          component: "back"
+        });
         return showBusinessSelection ? setShowBusinessSelection(false) : void 0;
       }
       case "companyStructure": {
@@ -28523,6 +28690,8 @@ function BusinessDetailsDropinComponent({
     }
   }, [
     activeForm.formId,
+    activeForm.formName,
+    i18n,
     country,
     handleBackClick,
     searching,
@@ -28530,6 +28699,14 @@ function BusinessDetailsDropinComponent({
     showBusinessSelection,
     verifiedBusiness
   ]);
+  const homeClick = () => {
+    trackNavigation({
+      fromForm: activeForm.formName,
+      toForm: "home",
+      component: "home"
+    });
+    handleHomeClick == null ? void 0 : handleHomeClick();
+  };
   const proceedToManualDataEntry = useCallback(async () => {
     await clearTrustedBusinessData().then(() => setShowCompanyStructure(true));
   }, [clearTrustedBusinessData]);
@@ -28575,7 +28752,7 @@ function BusinessDetailsDropinComponent({
       backButtonLabel: i18n.get("goBack"),
       handleNextClick: nextClick,
       handleBackClick: backClick,
-      handleHomeClick,
+      handleHomeClick: homeClick,
       children: /* @__PURE__ */ jsx(
         BusinessDetailsComponent,
         {
@@ -28654,7 +28831,6 @@ function CompanyDropinComponent({
   capabilities,
   homeButtonLabel,
   taskType = TaskTypes.COMPANY,
-  trackingConfig,
   associationDetail,
   parentLegalEntity,
   legalEntityResponse,
@@ -28679,6 +28855,7 @@ function CompanyDropinComponent({
   const { i18n } = useI18nContext();
   const canChangeEntityType = isSettingEnabled(SettingNames.AllowLegalEntityTypeChange);
   const dataFromResponse = mapLegalEntityToCompany(legalEntityResponse);
+  const isTrustMemberCompany = taskType === TaskTypes.TRUST_MEMBER_COMPANY;
   const { getConfiguration: getConfiguration2 } = useConfigurationApi();
   const [data, setData] = useState(dataFromResponse);
   const [problems, setProblems] = useState(propProblems);
@@ -28687,13 +28864,15 @@ function CompanyDropinComponent({
   );
   const [loadingStatus, setLoadingStatus] = useState("success");
   const formRef = useRef(null);
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity: legalEntityResponse,
-    task: taskType
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    task: taskType,
+    ...isTrustMemberCompany ? {
+      associatedLegalEntity: legalEntityResponse,
+      associatedLegalEntityOrg: parentLegalEntity
+    } : {}
   });
   useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     userEvents.addEvent("Landed on page", {
       ...baseTrackingPayload,
       actionLevel: "task",
@@ -28791,7 +28970,7 @@ function CompanyDropinComponent({
   };
   const attachAssociationToParentLegalEntity = async ({ legalEntity }) => {
     var _a2;
-    if (taskType === TaskTypes.TRUST_MEMBER_COMPANY) {
+    if (isTrustMemberCompany) {
       const existingEntityAssociations = getOwnEntityAssociations(parentLegalEntity);
       const existingRoles = (_a2 = existingEntityAssociations == null ? void 0 : existingEntityAssociations.filter((ea) => ea.legalEntityId === parentLegalEntity.id)) == null ? void 0 : _a2.map(({ type }) => type);
       const newRoles = associationDetail == null ? void 0 : associationDetail.roles;
@@ -29933,13 +30112,8 @@ const BusinessTypeSelection = ({
       )
     );
   }, [data.businessType, data.legalArrangement, currentStep]);
-  const baseTrackingPayload = getBaseTrackingPayload({
-    legalEntity: legalEntityResponse,
-    task: TaskTypes.BUSINESS_TYPE_SELECTION
-  });
   useEffect(() => {
     userEvents.addEvent("Landed on page", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "start"
     });
@@ -29984,7 +30158,6 @@ const BusinessTypeSelection = ({
   };
   const updateLegalEntityAndSelectAccountHolder = async () => {
     const trackingPayload = {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "submit"
     };
@@ -30599,8 +30772,6 @@ const EntityGuidanceStatus = ({
   ] });
 };
 const DecisionMakersComponent = ({
-  trackingConfig,
-  parentLegalEntity,
   legalEntityResponse,
   capabilityProblems,
   onNavigateToIndividual,
@@ -30640,17 +30811,27 @@ const DecisionMakersComponent = ({
   }, {});
   const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
   const showWarning = Boolean(remediationMessages.DECISION_MAKER && uniqueDecisionMakers.length);
+  useEffect(() => {
+    if (showWarning) {
+      userEvents.addEvent("Encountered error", {
+        task: TaskTypes.DECISION_MAKER_OVERVIEW,
+        actionLevel: "task",
+        actionType: "alert",
+        label: remediationMessages.DECISION_MAKER
+      });
+    }
+  }, [showWarning]);
   const uniqueDecisionMakersPerType = (roleType) => uniqueDecisionMakers.filter(({ types }) => types.includes(roleType)).length;
   const allowedDecisionMakerTypes = getAllowedDecisionMakerRoles(
     legalEntityResponse,
     TaskTypes.DECISION_MAKER
   );
   const haveMaxDecisionMakers = allowedDecisionMakerTypes.length === 0;
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity: legalEntityResponse,
-    task: TaskTypes.DECISION_MAKER_OVERVIEW
+  const getDecisionMakerTrackingParams = (decisionMaker) => ({
+    task: TaskTypes.DECISION_MAKER_OVERVIEW,
+    associatedLegalEntityId: decisionMaker.reference,
+    associatedLegalEntityType: decisionMaker.legalEntityType,
+    roles: decisionMaker.types
   });
   const addDecisionMakerOnClick = (e) => {
     e.stopPropagation();
@@ -30659,12 +30840,9 @@ const DecisionMakersComponent = ({
   const editDecisionMaker = (decisionMaker) => {
     onNavigateToIndividual(decisionMaker.reference);
     userEvents.addEvent("Clicked button", {
-      ...baseTrackingPayload,
+      ...getDecisionMakerTrackingParams(decisionMaker),
       actionLevel: "task",
-      actionType: "edit",
-      legalEntityId: decisionMaker.reference,
-      entityType: decisionMaker.legalEntityType,
-      roles: decisionMaker.types
+      actionType: "edit"
     });
   };
   const deleteDecisionMaker = async (decisionMaker) => {
@@ -30680,12 +30858,9 @@ const DecisionMakersComponent = ({
         (curr) => curr.legalEntityId !== decisionMaker.reference
       );
       userEvents.addEvent("Clicked button", {
-        ...baseTrackingPayload,
+        ...getDecisionMakerTrackingParams(decisionMaker),
         actionLevel: "task",
         actionType: "remove",
-        legalEntityId: decisionMaker.reference,
-        entityType: decisionMaker.legalEntityType,
-        roles: decisionMaker.types,
         remainingDecisionMakers
       });
       showToast({ type: "success", label: i18n.get("successFullyRemovedDecisionMaker") });
@@ -30734,7 +30909,7 @@ const DecisionMakersComponent = ({
             )) }),
             titleId: "whatIsTheDifferenceBetweenTheseRoles",
             contentId: "differenceBetweenAnOwnerControllingPersonAndSignatory",
-            baseTrackingPayload
+            baseTrackingPayload: { task: TaskTypes.DECISION_MAKER_OVERVIEW }
           }
         ),
         showWarning && /* @__PURE__ */ jsx(
@@ -30779,7 +30954,7 @@ const DecisionMakersComponent = ({
           {
             onHome: () => {
               userEvents.addEvent("Clicked button", {
-                ...baseTrackingPayload,
+                task: TaskTypes.DECISION_MAKER_OVERVIEW,
                 actionLevel: "task",
                 actionType: "back",
                 label: homeButtonLabel,
@@ -30958,20 +31133,13 @@ const Introduction = ({
   const { i18n } = useI18nContext();
   const introductionScreens = useIntroductionScreens({ legalEntity, tasks });
   const [activeIndex, setActiveIndex] = useState(0);
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig: { topLevelLegalEntity: legalEntity },
-    legalEntity,
-    task: TaskTypes.INTRODUCTION
-  });
   const pageEventDetails = {
-    ...baseTrackingPayload,
     actionLevel: "page",
     page: (introductionScreens == null ? void 0 : introductionScreens.length) ? introductionScreens[activeIndex] : void 0
   };
   useEffect(() => {
     if (introductionScreens == null ? void 0 : introductionScreens.length) {
       userEvents.addEvent("Landed on page", {
-        ...baseTrackingPayload,
         actionLevel: "task",
         actionType: "start"
       });
@@ -31042,7 +31210,6 @@ const Introduction = ({
           label: buttonLabels.start,
           onClick: () => {
             userEvents.addEvent("Success", {
-              ...baseTrackingPayload,
               actionLevel: "task",
               actionType: "start",
               label: buttonLabels.start
@@ -31597,7 +31764,6 @@ const LEGAL_ENTITY_BASE_TASKS = [
 const CONTRACT_TASKS = [TaskTypes.SERVICE_AGREEMENT, TaskTypes.PCI_DSS];
 function TaskListComponent({
   tasks,
-  trackingConfig,
   onNavigateToTask,
   legalEntityResponse,
   capabilityProblems,
@@ -31672,16 +31838,22 @@ function TaskListComponent({
   const payoutTaskDescriptionKey = isReview ? "payoutAccountsDescriptionReview" : "payoutAccountsDescription";
   const onEditBusinessSetupClick = () => {
     userEvents.addEvent("Clicked button", {
-      ...getBaseTrackingPayload({
-        trackingConfig,
-        legalEntity: legalEntityResponse,
-        task: TaskTypes.TASKS_OVERVIEW
-      }),
+      task: TaskTypes.TASKS_OVERVIEW,
       actionLevel: "task",
       actionType: "edit"
     });
     onNavigateToTask(TaskTypes.BUSINESS_TYPE_SELECTION);
   };
+  useEffect(() => {
+    if (showDecisionMakersWarning) {
+      userEvents.addEvent("Encountered error", {
+        task: TaskTypes.TASKS_OVERVIEW,
+        actionLevel: "task",
+        actionType: "alert",
+        label: remediationMessages.DECISION_MAKER
+      });
+    }
+  }, [showDecisionMakersWarning]);
   return /* @__PURE__ */ jsxs("div", { className: "adyen-task-list__container", children: [
     canSeeIntroduction && /* @__PURE__ */ jsx("div", { className: "adyen-task-list__nav", children: /* @__PURE__ */ jsx(
       Button,
@@ -32388,7 +32560,6 @@ function IndividualDropinComponent({
   handleGetIdVerificationStartCheck,
   handleOpenSingpassAuthorizationLink,
   taskType = TaskTypes.INDIVIDUAL,
-  trackingConfig,
   parentLegalEntity,
   legalEntityResponse,
   taskName,
@@ -32446,13 +32617,18 @@ function IndividualDropinComponent({
     accountHolder,
     handleOpenSingpassAuthorizationLink
   });
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity: legalEntityResponse,
-    task: taskType
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    task: taskType,
+    ...taskType === TaskTypes.INDIVIDUAL ? {} : taskType === TaskTypes.TRUST_MEMBER_COMPANY_OWNER ? {
+      associatedLegalEntity: legalEntityResponse,
+      associatedLegalEntityOrg: parentLegalEntity
+    } : {
+      // i.e. legal arrangement, decision maker, or trust member individual
+      associatedLegalEntity: legalEntityResponse
+    }
   });
   useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     userEvents.addEvent("Landed on page", {
       ...baseTrackingPayload,
       actionLevel: "task",
@@ -33074,7 +33250,6 @@ function PayoutDetailsDropinComponent({
   handleGetBankVerificationVendors,
   legalEntityResponse,
   associatedLegalArrangement,
-  trackingConfig,
   accountHolder,
   problems: propProblems,
   onSubmit: externalOnSubmit,
@@ -33146,13 +33321,9 @@ function PayoutDetailsDropinComponent({
     propProblems || ((transferInstrument == null ? void 0 : transferInstrument.id) ? (_c = (_b = getCapabilityProblems(legalEntityResponse, bankAccountCountry)) == null ? void 0 : _b.BankAccount) == null ? void 0 : _c[transferInstrument.id] : void 0)
   );
   const existingBankAccountFormat = transferInstrument ? ((_d = existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails) == null ? void 0 : _d.iban) ? "iban" : "local" : void 0;
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    task: taskType
-  });
   useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     userEvents.addEvent("Landed on page", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "start"
     });
@@ -33281,7 +33452,6 @@ function PayoutDetailsDropinComponent({
           documents2.forEach((document2) => {
             var _a2;
             userEvents.addEvent("Success", {
-              ...baseTrackingPayload,
               actionLevel: "task",
               actionType: "upload",
               documentType: document2.type,
@@ -33318,7 +33488,6 @@ function PayoutDetailsDropinComponent({
       );
     }
     const baseTracking = {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "submit",
       documentType: DocumentType.BANK_STATEMENT,
@@ -33434,7 +33603,7 @@ function PayoutDetailsDropinComponent({
     nextButtonLabel
   } = useFormComposer({
     problems,
-    baseTrackingPayload,
+    baseTrackingPayload: {},
     forms,
     submitButtonLabel,
     externalBackClick,
@@ -33475,7 +33644,7 @@ function PayoutDetailsDropinComponent({
       loadingStatus,
       forms,
       onSubmit,
-      baseTrackingPayload,
+      baseTrackingPayload: {},
       gotoFormByFormIndex,
       nextButtonLabel,
       homeButtonLabel,
@@ -33553,17 +33722,11 @@ function PciDropinComponent({
   pciTemplateResponse,
   handleHomeClick,
   handleSign,
-  taskType = TaskTypes.PCI_DSS,
-  trackingConfig
+  taskType = TaskTypes.PCI_DSS
 }) {
   var _a, _b, _c, _d;
   const { i18n } = useI18nContext();
   const { showToast } = useToastContext();
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    legalEntity: legalEntityResponse,
-    task: taskType
-  });
   const [loadingStatus, setLoadingStatus] = useState();
   const hasExpired = useHasExpired();
   const signButtonLabel = i18n.get("sign");
@@ -33595,7 +33758,6 @@ function PciDropinComponent({
   const handleSignClick = async () => {
     if (loadingStatus === "loading") return;
     const baseTracking = {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "sign",
       label: signButtonLabel
@@ -33629,7 +33791,6 @@ function PciDropinComponent({
   };
   const goHome = () => {
     userEvents.addEvent("Clicked button", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "back",
       label: homeButtonLabel
@@ -33638,15 +33799,14 @@ function PciDropinComponent({
   };
   const handleExpandSection = (title) => {
     userEvents.addEvent("Clicked accordion", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "open",
       label: title
     });
   };
   useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     userEvents.addEvent("Landed on page", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "start"
     });
@@ -34551,21 +34711,14 @@ function ServiceAgreementDropinComponent({
   handleHomeClick,
   handleAddSigner,
   handleSign,
-  taskType,
   serviceAgreementTypes,
-  serviceAgreementAcceptanceInfos,
-  trackingConfig
+  serviceAgreementAcceptanceInfos
 }) {
   var _a, _b;
   const { i18n } = useI18nContext();
   const { showToast } = useToastContext();
   const { isExperimentEnabled } = useExperimentsContext();
   const isAgeVerificationEnabled = isExperimentEnabled("EnableAgeVerification");
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    legalEntity: legalEntityResponse,
-    task: taskType
-  });
   const [loadingStatus, setLoadingStatus] = useState();
   const signedForms = serviceAgreementAcceptanceInfos.map((serviceAgreementAcceptanceInfo) => ({
     formId: serviceAgreementAcceptanceInfo.id,
@@ -34630,7 +34783,6 @@ function ServiceAgreementDropinComponent({
   const signers = getSigners();
   const handleSignClick = async () => {
     const baseTracking = {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "sign"
     };
@@ -34668,7 +34820,6 @@ function ServiceAgreementDropinComponent({
   };
   const goHome = () => {
     userEvents.addEvent("Clicked button", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "back",
       label: homeButtonLabel
@@ -34677,7 +34828,6 @@ function ServiceAgreementDropinComponent({
   };
   const handleExpandSection = (title) => {
     userEvents.addEvent("Clicked accordion", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "open",
       label: title
@@ -34689,7 +34839,6 @@ function ServiceAgreementDropinComponent({
   }, [serviceAgreementAcceptanceInfos]);
   useEffect(() => {
     userEvents.addEvent("Landed on page", {
-      ...baseTrackingPayload,
       actionLevel: "task",
       actionType: "start"
     });
@@ -34958,7 +35107,6 @@ function SolePropDropinComponent({
   onSubmit: onExternalSubmit,
   onChange,
   taskType,
-  trackingConfig,
   handleHomeClick,
   handleCreateDocument,
   handleGetDocument,
@@ -34992,11 +35140,9 @@ function SolePropDropinComponent({
   const dataFromResponse = getDataWithDefaultAddress(legalEntityResponse, parentLegalEntity);
   const [data, setData] = useState(dataFromResponse);
   const country = ((_b = (_a = currentState.data) == null ? void 0 : _a.solePropNameAndCountry) == null ? void 0 : _b.country) || ((_c = dataFromResponse == null ? void 0 : dataFromResponse.solePropRegistrationAddress) == null ? void 0 : _c.registrationAddress.country) || externalCountry;
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity: legalEntityResponse,
-    task: taskType
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    task: taskType,
+    associatedLegalEntity: legalEntityResponse
   });
   const getConfigurationData = useCallback(
     () => getConfiguration2({
@@ -35075,6 +35221,7 @@ function SolePropDropinComponent({
   };
   useEffect(() => {
     var _a2;
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     const documentIds = ((_a2 = legalEntityResponse == null ? void 0 : legalEntityResponse.documentDetails) == null ? void 0 : _a2.map((documentReference) => documentReference.id)) || [];
     try {
       if (documentIds.length) {
@@ -35281,7 +35428,6 @@ function TrustDropinComponent({
   handleUpdateDocument,
   handleAddressSearch,
   handleFindAddress,
-  trackingConfig,
   taskType,
   problems: problemsProp,
   onSubmit: externalOnSubmit,
@@ -35360,6 +35506,7 @@ function TrustDropinComponent({
   }, [derivedProps, formValidity, problems]);
   useEffect(() => {
     var _a2;
+    userEvents.updateBaseTrackingPayload({ task: taskType });
     const documentIds = ((_a2 = legalEntityResponse == null ? void 0 : legalEntityResponse.documentDetails) == null ? void 0 : _a2.map((documentReference) => documentReference.id)) || [];
     try {
       if (documentIds.length) {
@@ -35501,11 +35648,9 @@ function TrustDropinComponent({
     const value = getProp(data2, detail);
     return !isEmpty$1(value);
   });
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity: legalEntityResponse,
-    task: taskType
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    task: taskType,
+    associatedLegalEntity: legalEntityResponse
   });
   const {
     handleNextClick,
@@ -35592,6 +35737,13 @@ const useNavigation = ({
   const shouldShowSingpassSelection = isEligibleForSingpass && !hasSeenSingpassSelection;
   const [taskHistory, setTaskHistory] = useState(["default"]);
   const actualTasks = taskHistory.filter((task) => task !== "default");
+  const handleNavigation = useCallback(
+    (task) => {
+      userEvents.updateBaseTrackingPayload({ task });
+      onNavigate == null ? void 0 : onNavigate(task);
+    },
+    [onNavigate]
+  );
   const navigateTo = useCallback(
     (task, deletePreviousHistory = false) => {
       const pushNewTask = () => setTaskHistory((taskHistory2) => deletePreviousHistory ? [task] : [...taskHistory2, task]);
@@ -35599,10 +35751,10 @@ const useNavigation = ({
         setTimeout(pushNewTask);
       } else {
         pushNewTask();
-        onNavigate == null ? void 0 : onNavigate(task);
+        handleNavigation(task);
       }
     },
-    [onNavigate]
+    [handleNavigation]
   );
   const navigateBack = useCallback(
     (stepCount = 1) => {
@@ -35613,13 +35765,14 @@ const useNavigation = ({
       }
       if (prevTask === TaskTypes.TASKS_OVERVIEW) {
         setTaskHistory([TaskTypes.TASKS_OVERVIEW]);
-        onNavigate == null ? void 0 : onNavigate(TaskTypes.TASKS_OVERVIEW);
+        handleNavigation == null ? void 0 : handleNavigation(TaskTypes.TASKS_OVERVIEW);
         return;
       }
       setTaskHistory(taskHistory.slice(0, -1 * stepCount));
-      onNavigate == null ? void 0 : onNavigate(prevTask);
+      handleNavigation == null ? void 0 : handleNavigation(prevTask);
+      userEvents.updateBaseTrackingPayload({ task: prevTask });
     },
-    [taskHistory, onNavigate]
+    [taskHistory, handleNavigation]
   );
   useEffect(() => {
     if (!window.history.state) window.history.pushState({}, "");
@@ -35908,6 +36061,7 @@ function DropinComposerComponent({
     if (legalEntity) {
       userEvents.updateBaseTrackingPayload({
         legalEntityId: legalEntity.id,
+        entityType: legalEntity.type,
         capabilities: Object.keys(legalEntity.capabilities),
         countryCode: getLegalEntityCountry(legalEntity)
       });
@@ -36196,13 +36350,7 @@ function DropinComposerComponent({
       showToast({ label: i18n.get("failedToDownloadPci"), type: "error" });
     } finally {
       userEvents.addEvent("Clicked button", {
-        ...getBaseTrackingPayload({
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
-          legalEntity: rootLegalEntity,
-          task: TaskTypes.PCI_DSS
-        }),
+        task: TaskTypes.PCI_DSS,
         actionLevel: "task",
         actionType: "download"
       });
@@ -36210,12 +36358,6 @@ function DropinComposerComponent({
   };
   useEffect(() => {
     userEvents.addEvent("Landed on page", {
-      ...getBaseTrackingPayload({
-        trackingConfig: {
-          topLevelLegalEntity: rootLegalEntity
-        },
-        task: TaskTypes.TASKS_OVERVIEW
-      }),
       actionLevel: "journey",
       actionType: "start"
     });
@@ -36339,7 +36481,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         TaskListComponent,
         {
-          trackingConfig: { topLevelLegalEntity: legalEntityResponse },
           onNavigateToTask,
           tasks,
           legalEntityResponse: rootLegalEntity,
@@ -36358,9 +36499,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         DecisionMakersComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           parentLegalEntity: associatedLegalEntityParent,
           legalEntityResponse: rootLegalEntity,
           onNavigateToIndividual: (legalEntityId) => onNavigateToDecisionMakerIndividual(TaskTypes.DECISION_MAKER, legalEntityId),
@@ -36375,9 +36513,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         IndividualDropinComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.INDIVIDUAL,
           taskName: hasTrust ? "individualTrusteeDetails" : "individualDetails",
           parentLegalEntity: null,
@@ -36422,9 +36557,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         IndividualDropinComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.DECISION_MAKER,
           parentLegalEntity: associatedLegalEntityParent,
           legalEntityResponse: associatedLegalEntity,
@@ -36454,9 +36586,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         IndividualDropinComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.TRUST_MEMBER_COMPANY_OWNER,
           parentLegalEntity: associatedLegalEntityParent,
           legalEntityResponse: associatedLegalEntity,
@@ -36485,9 +36614,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         IndividualDropinComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.TRUST_MEMBER_INDIVIDUAL,
           parentLegalEntity: associatedLegalArrangement,
           legalEntityResponse: associatedLegalEntity,
@@ -36516,9 +36642,6 @@ function DropinComposerComponent({
         CompanyDropinComponent,
         {
           ...args,
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.COMPANY,
           taskName: hasTrust ? "companyTrusteeDetails" : "companyDetails",
           legalEntityResponse: rootLegalEntity,
@@ -36545,9 +36668,6 @@ function DropinComposerComponent({
         BusinessDetailsDropinComponent,
         {
           ...args,
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.BUSINESS_DETAILS,
           taskName: hasTrust ? "businessTrusteeDetails" : "businessDetails",
           legalEntityResponse: rootLegalEntity,
@@ -36583,9 +36703,6 @@ function DropinComposerComponent({
         CompanyDropinComponent,
         {
           ...args,
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.TRUST_MEMBER_COMPANY,
           parentLegalEntity: associatedLegalArrangement,
           legalEntityResponse: associatedLegalEntity,
@@ -36606,7 +36723,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         PayoutDetailsDropinComponent,
         {
-          trackingConfig: { topLevelLegalEntity: legalEntityResponse },
           taskType: currentTask,
           taskName: currentTask === TaskTypes.PAYIN ? "payinDetails" : "payoutDetails",
           problems: (_f = capabilityProblems == null ? void 0 : capabilityProblems.BankAccount) == null ? void 0 : _f[transferInstrument == null ? void 0 : transferInstrument.id],
@@ -36635,9 +36751,6 @@ function DropinComposerComponent({
         TrustDropinComponent,
         {
           ...args,
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskType: TaskTypes.TRUST,
           problems: (_g = capabilityProblems == null ? void 0 : capabilityProblems.LegalEntity) == null ? void 0 : _g[associatedLegalArrangement == null ? void 0 : associatedLegalArrangement.id],
           parentLegalEntity: rootLegalEntity,
@@ -36700,7 +36813,6 @@ function DropinComposerComponent({
         {
           legalEntityResponse: rootLegalEntity,
           pciTemplateResponse,
-          trackingConfig: { topLevelLegalEntity: legalEntityResponse },
           taskType: TaskTypes.PCI_DSS,
           handleHomeClick: navigateBack,
           handleSign: async (...params) => {
@@ -36733,7 +36845,6 @@ function DropinComposerComponent({
         ServiceAgreementDropinComponent,
         {
           legalEntityResponse: rootLegalEntity,
-          trackingConfig: { topLevelLegalEntity: legalEntityResponse },
           taskType: TaskTypes.SERVICE_AGREEMENT,
           serviceAgreementTypes,
           serviceAgreementAcceptanceInfos: serviceAgreementAcceptanceInfosWithNames,
@@ -36771,9 +36882,6 @@ function DropinComposerComponent({
       return /* @__PURE__ */ jsx(
         IndividualDropinComponent,
         {
-          trackingConfig: {
-            topLevelLegalEntity: legalEntityResponse
-          },
           taskName: "legalRepresentative",
           taskType: TaskTypes.LEGAL_REPRESENTATIVE_DETAILS,
           parentLegalEntity: rootLegalEntity,
@@ -38807,7 +38915,6 @@ function UpdateLegalEntityForHighExposure({
   parentLegalEntity,
   capabilities,
   country,
-  trackingConfig,
   problems: problemsProp,
   onSubmit: externalOnSubmit,
   onChange,
@@ -38941,10 +39048,8 @@ function UpdateLegalEntityForHighExposure({
     const value = getProp(data2, detail);
     return !isEmpty$1(value);
   });
-  const baseTrackingPayload = getBaseTrackingPayload({
-    trackingConfig,
-    parentLegalEntity,
-    legalEntity
+  const baseTrackingPayload = getAssociatedLeAnalyticsPayload({
+    associatedLegalEntity: parentLegalEntity
   });
   const {
     handleNextClick,
@@ -39244,33 +39349,38 @@ const useAnalytics = async ({
   const { i18n } = useI18nContext();
   const { isEmbeddedDropin, loadingContext: base } = useAuthContext();
   const loadingContext = `${base}api/${COMPONENTS_API_VERSION}/`;
-  (async () => {
-    if (isEmbeddedDropin) {
-      try {
-        const sessionData = {
-          sdkVersion,
-          componentName,
-          userAgent: navigator.userAgent,
-          legalEntityId
-        };
-        const sessionResponse = await getAnalyticsSession(loadingContext, sessionData);
-        if (!(sessionResponse == null ? void 0 : sessionResponse.id)) {
-          throw Error("Analytics session Id not received");
+  useEffect(() => {
+    (async () => {
+      const sessionData = {
+        sdkVersion,
+        componentName,
+        userAgent: navigator.userAgent,
+        legalEntityId,
+        locale: i18n.locale
+      };
+      if (isEmbeddedDropin) {
+        try {
+          const sessionResponse = await getAnalyticsSession(loadingContext, sessionData);
+          if (!(sessionResponse == null ? void 0 : sessionResponse.id)) {
+            throw Error("Analytics session Id not received");
+          }
+          userEvents.subscribe((data) => {
+            const eventItem = convertToEmbeddedEvent(data, sessionData);
+            pushEvents(loadingContext, sessionResponse.id, eventItem);
+          });
+        } catch (e) {
+          console.error("Failed to initiate analytics for component", e);
         }
+      } else if (onUserEvent) {
         userEvents.subscribe((data) => {
-          const eventItem = convertToEmbeddedEvent(data, sessionData);
-          if (eventItem.eventData) {
-            eventItem.eventData.locale = i18n.locale;
-          }
-          pushEvents(loadingContext, sessionResponse.id, eventItem);
+          onUserEvent({
+            ...data,
+            properties: { ...data.properties || {}, ...sessionData }
+          });
         });
-      } catch (e) {
-        console.error("Failed to initiate analytics for component", e);
       }
-    } else if (onUserEvent) {
-      userEvents.subscribe(onUserEvent);
-    }
-  })();
+    })();
+  }, []);
 };
 const logger$8 = createLogger("loadCountries");
 const countriesImports = /* @__PURE__ */ Object.assign({ "./de-DE.json": () => import("./de-DE-Cx8Uim1K.js"), "./el-GR.json": () => import("./el-GR-B7_JR3z5.js"), "./en-US.json": () => import("./en-US-CkdCbOCX.js"), "./es-ES.json": () => import("./es-ES-NBv3HHhn.js"), "./fr-FR.json": () => import("./fr-FR-DdSVMVsp.js"), "./it-IT.json": () => import("./it-IT-Bwdk3zuj.js"), "./ja-JP.json": () => import("./ja-JP-Bsvzm8zu.js"), "./nl-NL.json": () => import("./nl-NL-DofKaNkk.js"), "./pt-PT.json": () => import("./pt-PT-DFEvMD1M.js"), "./ru-RU.json": () => import("./ru-RU-PiM0ZI5h.js"), "./sv-SE.json": () => import("./sv-SE-C0GoLwTg.js"), "./zh-CN.json": () => import("./zh-CN-DJs6Hct-.js"), "./zh-TW.json": () => import("./zh-TW-BWhLbns8.js") });
@@ -39566,7 +39676,7 @@ const ConfigurationApiProvider = ({
 }) => {
   const authContext = useAuthContext();
   const { isEmbeddedDropin, loadingContext } = authContext;
-  const sdkVersion = "2.60.0";
+  const sdkVersion = "2.61.0";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -40239,7 +40349,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "2.60.0",
+      sdkVersion: "2.61.0",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -40304,7 +40414,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
     /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__meta", children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsxs("tbody", { children: [
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "SDK version" }),
-        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.60.0" })
+        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.61.0" })
       ] }) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "rootLegalEntityId" }),