@adyen/kyc-components 2.61.2 → 2.62.1

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

@@ -24,7 +24,6 @@ class UserEvents {
       subCategory: "hosted onboarding",
       countryCode: void 0,
       capabilities: void 0,
-      legalEntityId: void 0,
       task: void 0
     };
     this.sharedEventProperties = {};
@@ -47,11 +46,14 @@ class UserEvents {
     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
+   * Adds an event with context specific to page-related events
    */
-  startEvent(eventName) {
-    this.add({ type: "start_event", name: eventName });
-    this.notifySubscribers();
+  addPageEvent(eventName, properties) {
+    this.addEvent(eventName, {
+      actionLevel: "page",
+      page: this.sharedEventProperties.page,
+      ...properties
+    });
   }
   /**
    * Adds an event with context specific to field-related events
@@ -63,6 +65,13 @@ class UserEvents {
       ...properties
     });
   }
+  /**
+   * 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.
@@ -110,7 +119,7 @@ const getAssociatedLeAnalyticsPayload = ({
     associatedLegalEntityOrgType: associatedLegalEntityOrg == null ? void 0 : associatedLegalEntityOrg.type
   } : {}
 });
-const debouncedInputEvent$1 = debounce$1(
+const debouncedInputEvent = debounce$1(
   (properties) => userEvents.addFieldEvent("Interacted with form field", properties),
   500
 );
@@ -4398,7 +4407,7 @@ const Select = ({
     (e) => {
       const { value } = e.target;
       if (enableTracking) {
-        debouncedInputEvent$1({ actionType: "input", field: name });
+        debouncedInputEvent({ actionType: "input", field: name });
       }
       if (isSearch && value.length > 2) {
         debouncedOnSearch(value);
@@ -5014,7 +5023,7 @@ const InputBase = forwardRef((props, ref) => {
   const handleInput = (e) => {
     var _a;
     if (enableTracking) {
-      debouncedInputEvent$1({ actionType: "input", field: name });
+      debouncedInputEvent({ actionType: "input", field: name });
     }
     e.target.value = convertFullToHalf(e.target.value);
     (_a = props.onInput) == null ? void 0 : _a.call(props, e);
@@ -5655,7 +5664,7 @@ const businessRegistrationNumberMasks = {
   },
   [CountryCodes.Luxembourg]: {
     default: {
-      mask: makeMask(...alphaInputs(1), ...numericInputs(5), ...numericInputs(2, true)),
+      mask: makeMask(...alphaInputs(1), ...numericInputs(9, true)),
       transformOnType: uppercase
     }
   },
@@ -6439,7 +6448,7 @@ const businessRegistrationNumberPatterns = {
   [CountryCodes.Latvia]: { default: /^\d{11}$/ },
   [CountryCodes.Liechtenstein]: { default: /FL-[0-9]{4}[.][0-9]{3}[.][0-9]{3}-[0-9]$/ },
   [CountryCodes.Lithuania]: { default: /^\d{6,9}$/ },
-  [CountryCodes.Luxembourg]: { default: /^[a-zA-Z]\d{5,7}$/ },
+  [CountryCodes.Luxembourg]: { default: /^[a-zA-Z]\d{1,9}$/ },
   [CountryCodes.Malaysia]: { default: /^[A-Za-z0-9]{7,8}$|^[A-Za-z0-9]{12}$/ },
   [CountryCodes.Malta]: { default: /^C\s?\d{4,6}$/ },
   [CountryCodes.Monaco]: {
@@ -6985,10 +6994,8 @@ const defaultFieldConfig$9 = {
       businessRegistrationNumberPatterns[CountryCodes.Luxembourg].default
     ),
     guidanceText: {
-      key: "enter1LetterAndThenXToYDigitsForExample",
+      key: "enter1LetterAndThenNDigitsForExample",
       values: {
-        minDigits: "5",
-        maxDigits: "7",
         example: "C127766"
       }
     }
@@ -11314,10 +11321,6 @@ 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 {
@@ -23969,9 +23972,9 @@ function Summary({
         icon: "edit",
         onClick: () => {
           trackNavigation2({
-            fromForm: "summary",
+            actionType: "edit",
             toForm: formName,
-            component: "Pencil icon"
+            label: "Pencil icon"
           });
           editForm(formId);
         },
@@ -24049,18 +24052,18 @@ function Summary({
   ] });
 }
 const trackNavigation = ({
-  fromForm,
+  actionType,
   toForm,
-  component,
+  label,
+  returnValue,
   baseTrackingPayload
 }) => {
-  userEvents.addEvent("Clicked button", {
-    ...baseTrackingPayload,
-    actionLevel: "page",
-    actionType: "navigate",
-    page: fromForm,
-    label: component,
-    toPage: toForm
+  userEvents.addPageEvent("Clicked button", {
+    actionType,
+    toPage: toForm,
+    label,
+    returnValue,
+    ...baseTrackingPayload
   });
 };
 const useHideButton = (condition, setHideState) => {
@@ -24117,7 +24120,7 @@ const useFormComposer = ({
     );
   }, [forms]);
   useEffect(() => {
-    userEvents.updateSharedEventProperties({ page: activeForm.formHeading || activeForm.formId });
+    userEvents.updateSharedEventProperties({ page: activeForm.formName });
   }, [activeForm]);
   useEffect(() => {
     if (hasAlreadyNavigatedForm) return;
@@ -24126,14 +24129,6 @@ const useFormComposer = ({
       setActiveForm(openingStep);
     }
   }, [activeForm, forms, problems == null ? void 0 : problems.remediationActions, hasAlreadyNavigatedForm]);
-  const trackSectionCompletion = (formName) => {
-    userEvents.addEvent("Success", {
-      ...baseTrackingPayload,
-      actionLevel: "page",
-      actionType: "next",
-      page: formName
-    });
-  };
   const gotoFormByFormIndex = (nextFormIndex) => {
     if (formRef == null ? void 0 : formRef.current.verifyForm) {
       formRef.current.verifyForm(activeForm.formId).then((isVerified) => {
@@ -24161,6 +24156,12 @@ const useFormComposer = ({
     }
     if (!activeForm.isValid) {
       validateCurrentForm();
+      trackNavigation({
+        actionType: "next",
+        label: "next",
+        returnValue: "validation error",
+        baseTrackingPayload
+      });
       return;
     }
     if (isFinalStep) {
@@ -24168,27 +24169,25 @@ const useFormComposer = ({
       return;
     }
     setShouldValidate(false);
-    const toFormIndex = forms.findIndex((form) => form.formId === activeForm.formId) + 1;
+    const toFormIndex = currentStep + 1;
     gotoFormByFormIndex(toFormIndex);
     trackNavigation({
-      fromForm: activeForm.formName,
+      actionType: "next",
       toForm: forms[toFormIndex].formName,
-      component: "ActionBar",
+      label: "next",
+      returnValue: "success",
       baseTrackingPayload
     });
-    trackSectionCompletion(activeForm.formName);
   };
   const handleBackClick = () => {
-    const currentFormIndex = forms.findIndex((form) => form.formId === activeForm.formId);
-    if (currentFormIndex) {
-      const fromForm = forms[currentFormIndex];
-      const toForm = forms[currentFormIndex - 1];
+    if (currentStep > 0) {
+      const toForm = forms[currentStep - 1];
       setActiveForm(toForm);
       setHasAlreadyNavigatedForm(true);
       trackNavigation({
-        fromForm: fromForm.formName,
+        actionType: "back",
         toForm: toForm.formName,
-        component: "ActionBar",
+        label: "back",
         baseTrackingPayload
       });
     }
@@ -27664,9 +27663,10 @@ function FormNavigation({
     if (form.formId === activeForm.formId) return;
     gotoForm(getFormIndex(form));
     trackNavigation2({
-      fromForm: form.formName,
-      toForm: activeForm.formName,
-      component: "FormNavigation"
+      actionType: "navigate",
+      toForm: form.formName,
+      label: form.formName,
+      returnValue: "success"
     });
   };
   const getNavigateHandler = (form, activeForm2) => {
@@ -27675,7 +27675,15 @@ function FormNavigation({
     if (allPriorFormsValid || !validateForm) {
       return goToForm(form);
     }
-    return activeForm2.isValid ? void 0 : validateForm;
+    return activeForm2.isValid ? void 0 : () => {
+      trackNavigation2({
+        actionType: "navigate",
+        toForm: form.formName,
+        label: form.formName,
+        returnValue: "validation error"
+      });
+      validateForm();
+    };
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("adyen-kyc-form-navigation", className), children: [
     /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-navigation__header", children: i18n.get(taskName) }),
@@ -27753,15 +27761,9 @@ const FormWrapper = ({
   );
   const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && ((_a = summaryData.companyRegistrationDetails) == null ? void 0 : _a.vatAbsenceReason) && ["companyDetails", "businessDetails"].includes(taskName);
   const handleTrackNavigation = useCallback(
-    ({
-      fromForm,
-      toForm,
-      component
-    }) => {
+    (props) => {
       trackNavigation({
-        fromForm,
-        toForm,
-        component,
+        ...props,
         baseTrackingPayload
       });
     },
@@ -28631,9 +28633,10 @@ function BusinessDetailsDropinComponent({
       case "basicInformation":
         if (((_b2 = currentState.validityByForm) == null ? void 0 : _b2.basicInformation) && !isBusinessSelection && !verifiedBusiness) {
           trackNavigation({
-            fromForm: activeForm.formName,
+            actionType: "next",
             toForm: toFormName || "home",
-            component: "next"
+            label: "next",
+            returnValue: "success"
           });
           findBusiness(currentState.data.basicInformation);
           setShowBusinessSelection(true);
@@ -28648,7 +28651,6 @@ function BusinessDetailsDropinComponent({
     handleNextClick,
     forms,
     activeForm.formId,
-    activeForm.formName,
     (_e = currentState.validityByForm) == null ? void 0 : _e.basicInformation,
     currentState.data.basicInformation,
     isBusinessSelection,
@@ -28660,9 +28662,9 @@ function BusinessDetailsDropinComponent({
     switch (activeForm.formId) {
       case "basicInformation": {
         trackNavigation({
-          fromForm: activeForm.formName,
+          actionType: "back",
           toForm: "basicDetails",
-          component: "back"
+          label: "back"
         });
         return showBusinessSelection ? setShowBusinessSelection(false) : void 0;
       }
@@ -28688,8 +28690,6 @@ function BusinessDetailsDropinComponent({
     }
   }, [
     activeForm.formId,
-    activeForm.formName,
-    i18n,
     country,
     handleBackClick,
     searching,
@@ -28699,9 +28699,9 @@ function BusinessDetailsDropinComponent({
   ]);
   const homeClick = () => {
     trackNavigation({
-      fromForm: activeForm.formName,
+      actionType: "save",
       toForm: "home",
-      component: "home"
+      label: "home"
     });
     handleHomeClick == null ? void 0 : handleHomeClick();
   };
@@ -30121,6 +30121,10 @@ const BusinessTypeSelection = ({
     if (loadingStatus === "loading") return;
     triggerValidation();
     if (isValid) {
+      userEvents.addEvent("Clicked button", {
+        actionLevel: "task",
+        actionType: "next"
+      });
       if (((_a2 = data.businessType) == null ? void 0 : _a2.id) === "legalArrangement") {
         if (currentStep !== 1) {
           setCurrentStep(
@@ -30811,13 +30815,19 @@ const DecisionMakersComponent = ({
   }, {});
   const uniqueDecisionMakers = mappedDecisionMakers ? Object.values(mappedDecisionMakers) : [];
   const showWarning = Boolean(remediationMessages.DECISION_MAKER && uniqueDecisionMakers.length);
+  useEffect(() => {
+    userEvents.addEvent("Landed on page", {
+      actionLevel: "task",
+      actionType: "start"
+    });
+  }, []);
   useEffect(() => {
     if (showWarning) {
       userEvents.addEvent("Encountered error", {
         task: TaskTypes.DECISION_MAKER_OVERVIEW,
         actionLevel: "task",
         actionType: "alert",
-        label: "missingDecisionMaker"
+        label: remediationMessages.DECISION_MAKER
       });
     }
   }, [remediationMessages.DECISION_MAKER, showWarning]);
@@ -31138,15 +31148,16 @@ const Introduction = ({
     page: (introductionScreens == null ? void 0 : introductionScreens.length) ? introductionScreens[activeIndex] : void 0
   };
   useEffect(() => {
-    if (introductionScreens == null ? void 0 : introductionScreens.length) {
-      userEvents.addEvent("Landed on page", {
-        actionLevel: "task",
-        actionType: "start"
-      });
-    } else {
+    userEvents.addEvent("Landed on page", {
+      actionLevel: "task",
+      actionType: "start"
+    });
+  }, []);
+  useEffect(() => {
+    if (!(introductionScreens == null ? void 0 : introductionScreens.length)) {
       onExitIntroduction();
     }
-  }, [introductionScreens]);
+  }, [introductionScreens, onExitIntroduction]);
   const translationKeys = {
     skip: "goToOverviewFromIntroduction",
     back: "back",
@@ -31211,7 +31222,7 @@ const Introduction = ({
           onClick: () => {
             userEvents.addEvent("Success", {
               actionLevel: "task",
-              actionType: "start",
+              actionType: "submit",
               label: translationKeys.start
             });
             onExitIntroduction();
@@ -31639,6 +31650,7 @@ const hasPayoutAccount = (legalEntityResponse) => {
   return Boolean((_a = legalEntityResponse.transferInstruments) == null ? void 0 : _a.length);
 };
 const TaskListItem = ({
+  titleKey,
   title,
   icon,
   status,
@@ -31655,18 +31667,31 @@ const TaskListItem = ({
   removeEntity,
   isRemoveDisabled = false,
   handleIsRemoveDisabled,
-  testId
+  testId,
+  enableTracking = true
 }) => {
+  const { i18n } = useI18nContext();
   const shouldShowErrorAlert = showErrorAlerts === "always" || showErrorAlerts === "onErrorStatus" && status === TaskStatus.ERROR;
   const [isStatusRemoving, setIsStatusRemoving] = useState(false);
+  const handleNavigateToTask = () => {
+    if (enableTracking) {
+      userEvents.addEvent("Clicked button", {
+        actionLevel: "journey",
+        actionType: "open",
+        task: void 0,
+        label: titleKey
+      });
+    }
+    onNavigateToTask == null ? void 0 : onNavigateToTask();
+  };
   return /* @__PURE__ */ jsx(
     Card,
     {
       stateful: onNavigateToTask && !loading && !disabled,
       warning: showWarningAlert,
       warningMessage,
-      onClick: loading ? void 0 : onNavigateToTask,
-      onKeyDown: handleKeys(["Enter"], onNavigateToTask ?? noop),
+      onClick: loading ? void 0 : handleNavigateToTask,
+      onKeyDown: handleKeys(["Enter"], handleNavigateToTask ?? noop),
       className: "adyen-task",
       disabled,
       children: /* @__PURE__ */ jsxs(
@@ -31680,7 +31705,7 @@ const TaskListItem = ({
               /* @__PURE__ */ jsxs("div", { className: "adyen-task-item__header", children: [
                 /* @__PURE__ */ jsxs("div", { className: "adyen-task-item__heading", children: [
                   /* @__PURE__ */ jsx("span", { className: "adyen-task-item__icon-wrapper", children: /* @__PURE__ */ jsx(Icon, { name: icon }) }),
-                  /* @__PURE__ */ jsx("div", { className: "adyen-task-item__body", children: /* @__PURE__ */ jsx("span", { className: "adyen-task-item__title", children: title }) })
+                  /* @__PURE__ */ jsx("div", { className: "adyen-task-item__body", children: /* @__PURE__ */ jsx("span", { className: "adyen-task-item__title", children: title || i18n.get(titleKey) }) })
                 ] }),
                 info && /* @__PURE__ */ jsxs("div", { className: "adyen-task-item__info", children: [
                   /* @__PURE__ */ jsx(Icon, { name: "info-circle" }),
@@ -31739,6 +31764,7 @@ const PayoutAccountTaskListItem = ({
       disabled: isInstantVerificationAccount && status === TaskStatus.PROCESSING,
       onNavigateToTask: isInstantVerificationAccount ? void 0 : onNavigateToTask,
       icon: "payout",
+      titleKey: "bankAccountNumber",
       title: obscuredAccountNumber,
       status,
       problems: (_a = capabilityProblems == null ? void 0 : capabilityProblems.BankAccount) == null ? void 0 : _a[account.id],
@@ -31850,7 +31876,7 @@ function TaskListComponent({
         task: TaskTypes.TASKS_OVERVIEW,
         actionLevel: "task",
         actionType: "alert",
-        label: "missingDecisionMaker"
+        label: remediationMessages.DECISION_MAKER
       });
     }
   }, [showDecisionMakersWarning]);
@@ -31897,7 +31923,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToTaskIndividual,
                 icon: "decision-maker",
-                title: hasTrust ? i18n.get("trusteePersonalDetails") : i18n.get("personalDetails"),
+                titleKey: hasTrust ? "trusteePersonalDetails" : "personalDetails",
                 status: getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31912,7 +31938,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToTaskLegalRepresentative,
                 icon: "decision-maker",
-                title: i18n.get("legalRepresentative"),
+                titleKey: "legalRepresentative",
                 status: legalRepresentative ? getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31926,9 +31952,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToSoleProp,
                 icon: "company",
-                title: i18n.get(
-                  canChangeEntityType ? "soleProprietorshipDetails" : "soleProprietorDetails"
-                ),
+                titleKey: canChangeEntityType ? "soleProprietorshipDetails" : "soleProprietorDetails",
                 status: getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31944,7 +31968,7 @@ function TaskListComponent({
                 testId: TaskTypes.COMPANY,
                 onNavigateToTask: handleOnNavigateToTaskCompany,
                 icon: "company",
-                title: hasTrust ? i18n.get("companyTrusteeDetails") : i18n.get("companyDetails"),
+                titleKey: hasTrust ? "companyTrusteeDetails" : "companyDetails",
                 status: getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31960,7 +31984,7 @@ function TaskListComponent({
                 testId: TaskTypes.BUSINESS_DETAILS,
                 onNavigateToTask: handleOnNavigateToTaskBusinessDetails,
                 icon: "company",
-                title: hasTrust ? i18n.get("businessTrusteeDetails") : i18n.get("businessDetails"),
+                titleKey: hasTrust ? "businessTrusteeDetails" : "businessDetails",
                 status: getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31975,7 +31999,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToTaskDecisionMaker,
                 icon: "decision-maker",
-                title: i18n.get("decisionMakers"),
+                titleKey: "decisionMakers",
                 status: hasMinRequiredDecisionMakerCount(legalEntityResponse) ? getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31995,7 +32019,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToTaskTrust,
             icon: "trust",
-            title: i18n.get("trustDetails"),
+            titleKey: "trustDetails",
             status: getTaskStatus(
               EntityType.LEGAL_ENTITY,
               capabilityProblems,
@@ -32010,7 +32034,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToTaskTrustMember,
             icon: "decision-maker",
-            title: i18n.get("trustMembers"),
+            titleKey: "trustMembers",
             status: hasRequiredTrustMemberCount2 ? getTaskStatus(
               EntityType.LEGAL_ENTITY,
               capabilityProblems,
@@ -32058,7 +32082,7 @@ function TaskListComponent({
             {
               onNavigateToTask: () => handleOnNavigateToTaskPayout(),
               icon: "payout",
-              title: canChangeEntityType ? i18n.get("bankAccountDetails") : i18n.get(hasPayinTaskNotPayout ? "payinDetails" : "payoutDetails"),
+              titleKey: canChangeEntityType ? "bankAccountDetails" : hasPayinTaskNotPayout ? "payinDetails" : "payoutDetails",
               status: hasPayoutAccount(legalEntityResponse) ? getTaskStatus(
                 EntityType.BANK_ACCOUNT,
                 capabilityProblems,
@@ -32077,7 +32101,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToServiceAgreement,
             icon: "contract",
-            title: i18n.get("signServiceAgreement"),
+            titleKey: "signServiceAgreement",
             disabled: areServiceAgreementTasksDisabled,
             status: (serviceAgreementTypes == null ? void 0 : serviceAgreementTypes.length) ? TaskStatus.SIGN : TaskStatus.SIGNED,
             info: areServiceAgreementTasksDisabled ? i18n.get("requiresSignatory") : null
@@ -32088,7 +32112,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToPci,
             icon: "pci",
-            title: i18n.get("pciDssQuestionnaire"),
+            titleKey: "pciDssQuestionnaire",
             status: canDownloadPci ? TaskStatus.DOWNLOAD : TaskStatus.SIGN,
             statusLabel: canDownloadPci && i18n.get("downloadACopy"),
             downloadHandler: onPciDownload,
@@ -32102,7 +32126,7 @@ function TaskListComponent({
         {
           onNavigateToTask: handleOnNavigateToTaskReview,
           icon: "review",
-          title: i18n.get("submitReviewOfYourData"),
+          titleKey: "submitReviewOfYourData",
           status: TaskStatus.SUBMIT,
           problems: (_m = capabilityProblems == null ? void 0 : capabilityProblems.LegalEntity) == null ? void 0 : _m[legalEntityResponse.id],
           showErrorAlerts: "always"
@@ -33613,6 +33637,10 @@ function PayoutDetailsDropinComponent({
       if (trustedTransferInstrumentId) {
         externalOnSubmit == null ? void 0 : externalOnSubmit({ ...data, id: trustedTransferInstrumentId });
       }
+      userEvents.addEvent("Success", {
+        actionLevel: "task",
+        actionType: "submit"
+      });
       navigateBackToTaskList == null ? void 0 : navigateBackToTaskList();
     }
   });
@@ -36064,7 +36092,6 @@ function DropinComposerComponent({
     updateLegalEntityAndCapabilityProblems(legalEntity);
     if (legalEntity) {
       userEvents.updateBaseTrackingPayload({
-        legalEntityId: legalEntity.id,
         entityType: legalEntity.type,
         capabilities: Object.keys(legalEntity.capabilities),
         countryCode: getLegalEntityCountry(legalEntity)
@@ -36366,6 +36393,9 @@ function DropinComposerComponent({
       actionType: "start"
     });
   }, []);
+  useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: currentTask });
+  }, [currentTask]);
   useLayoutEffect(() => {
     const fetchConfiguration = async () => {
       const data = await getConfiguration2({
@@ -39680,7 +39710,7 @@ const ConfigurationApiProvider = ({
 }) => {
   const authContext = useAuthContext();
   const { isEmbeddedDropin, loadingContext } = authContext;
-  const sdkVersion = "2.61.2";
+  const sdkVersion = "2.62.1";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -40353,7 +40383,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "2.61.2",
+      sdkVersion: "2.62.1",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -40418,7 +40448,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.61.2" })
+        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.62.1" })
       ] }) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "rootLegalEntityId" }),
@@ -40543,14 +40573,11 @@ const getBaseTracking = (componentProps) => {
     const { legalEntityResponse } = componentProps;
     return {
       entityType: legalEntityResponse.type,
-      legalEntityId: legalEntityResponse.id,
       capabilities: Object.keys(legalEntityResponse.capabilities || {}),
       countryCode: getLegalEntityCountry(legalEntityResponse)
     };
   }
-  return {
-    legalEntityId: componentProps.legalEntityId
-  };
+  return {};
 };
 class UIElement extends BaseElement {
   constructor() {

package/dist/types/components/Dropins/FormNavigation/types.d.ts

@@ -2,6 +2,7 @@ import type { EntityProblems } from '../../../core/models/errors/entity-problems
 import type { FormVerificationErrors } from '../../../core/models/errors/form-verification-errors';
 import type { FormModelWithValidity } from '../../../core/models/form';
 import type { TranslationKey } from '../../../language/types';
+import type { TrackNavigationProps } from '../../../utils/trackNavigation';
 export interface FormNavigationProps {
     forms: FormModelWithValidity[];
     activeForm: FormModelWithValidity;
@@ -13,11 +14,7 @@ export interface FormNavigationProps {
     verificationErrors?: {
         [formId: string]: FormVerificationErrors;
     };
-    trackNavigation?: (props: {
-        fromForm: TranslationKey;
-        toForm: TranslationKey;
-        component: string;
-    }) => void;
+    trackNavigation?: (props: TrackNavigationProps) => void;
 }
 export interface FormNavigationItemProps {
     form: FormModelWithValidity;

package/dist/types/components/TaskList/component/TaskListItem.d.ts

@@ -1,4 +1,4 @@
 import '../TaskListItem.scss';
 import type { TaskListItemProps } from '../types';
-declare const TaskListItem: ({ title, icon, status, statusLabel, onNavigateToTask, disabled, problems, downloadHandler, info, loading, showErrorAlerts, showWarningAlert, warningMessage, removeEntity, isRemoveDisabled, handleIsRemoveDisabled, testId, }: TaskListItemProps) => import("preact").JSX.Element;
+declare const TaskListItem: ({ titleKey, title, icon, status, statusLabel, onNavigateToTask, disabled, problems, downloadHandler, info, loading, showErrorAlerts, showWarningAlert, warningMessage, removeEntity, isRemoveDisabled, handleIsRemoveDisabled, testId, enableTracking, }: TaskListItemProps) => import("preact").JSX.Element;
 export default TaskListItem;

package/dist/types/components/TaskList/types.d.ts

@@ -4,6 +4,7 @@ import type { PciStatus } from '../../core/models/api/contracts';
 import type { ExistingLegalEntity } from '../../core/models/api/legal-entity';
 import type { CapabilityProblems } from '../../core/models/errors/capability-problems';
 import type { EntityProblems } from '../../core/models/errors/entity-problems';
+import type { TranslationKey } from '../../language/types';
 import type { ServiceAgreementAcceptanceInfo, ServiceAgreementType } from '../Dropins/ServiceAgreementDropinComponent/types';
 import type { IconName } from '../internal/Icon/Icon';
 import type { ActionsMenuOption } from '../internal/Menu/ActionsMenu';
@@ -74,7 +75,8 @@ export interface TaskListGroupProps {
 }
 export interface TaskListItemProps extends TaskStatusProps {
     icon: IconName;
-    title: string;
+    titleKey: TranslationKey;
+    title?: string;
     statusLabel?: string;
     disabled?: boolean;
     problems?: EntityProblems;
@@ -89,4 +91,5 @@ export interface TaskListItemProps extends TaskStatusProps {
     isRemoveDisabled?: boolean;
     handleIsRemoveDisabled?: Dispatch<StateUpdater<boolean>>;
     testId?: string;
+    enableTracking?: boolean;
 }

package/dist/types/components/internal/Summary/types.d.ts

@@ -1,12 +1,8 @@
 import type { EntityProblems } from '../../../core/models/errors/entity-problems';
 import type { FormModel } from '../../../core/models/form';
-import type { TranslationKey } from '../../../language/types';
+import type { TrackNavigationProps } from '../../../utils/trackNavigation';
 export interface SummaryProps<Schema> {
-    trackNavigation?: (props: {
-        fromForm: TranslationKey;
-        toForm: TranslationKey;
-        component: string;
-    }) => void;
+    trackNavigation?: (props: TrackNavigationProps) => void;
     data: Schema;
     forms: FormModel[];
     omittedKeys?: string[];

package/dist/types/core/user-events.d.ts

@@ -9,7 +9,7 @@ type ActionLevel = 'journey' | 'task' | 'page' | 'field';
 /**
  * The type of action associated with the event
  */
-type ActionType = 'start' | 'submit' | 'save' | 'add' | 'edit' | 'remove' | 'open' | 'close' | 'next' | 'back' | 'skip' | 'download' | 'upload' | 'sign' | 'navigate' | 'blur' | 'input' | 'focus' | 'change' | 'select' | 'alert';
+export type ActionType = 'start' | 'submit' | 'save' | 'add' | 'edit' | 'remove' | 'open' | 'close' | 'next' | 'back' | 'skip' | 'download' | 'upload' | 'sign' | 'navigate' | 'blur' | 'input' | 'focus' | 'change' | 'select' | 'alert';
 /**
  * The base event properties that are sent with every event
  */
@@ -18,7 +18,6 @@ type BaseEventProperties = {
     subCategory: 'hosted onboarding';
     countryCode?: string;
     capabilities?: string[];
-    legalEntityId?: string;
     entityType?: LegalEntityType;
     task?: TaskTypes;
 };
@@ -66,13 +65,19 @@ declare class UserEvents {
      */
     addEvent(eventName: EventName, properties: AdditionalEventProperties): void;
     /**
-     * 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
+     * Adds an event with context specific to page-related events
      */
-    startEvent(eventName: EventName): void;
+    addPageEvent(eventName: EventName, properties: SetOptional<AdditionalEventProperties, 'actionLevel'>): void;
     /**
      * Adds an event with context specific to field-related events
      */
-    addFieldEvent(eventName: EventName, properties: SetOptional<AdditionalEventProperties, 'actionLevel'>): void;
+    addFieldEvent(eventName: EventName, properties: SetOptional<AdditionalEventProperties, 'actionLevel'> & {
+        field?: string;
+    }): void;
+    /**
+     * 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: EventName): void;
     /**
      * 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.

package/dist/types/utils/trackNavigation.d.ts

@@ -1,8 +1,10 @@
-import type { BaseTrackingPayload } from '../core/analytics';
+import type { ActionType, AdditionalEventProperties } from '../core/user-events';
 import type { TranslationKey } from '../language/types';
-export declare const trackNavigation: ({ fromForm, toForm, component, baseTrackingPayload, }: {
-    fromForm: TranslationKey;
-    toForm: TranslationKey;
-    component: string;
-    baseTrackingPayload?: BaseTrackingPayload;
-}) => void;
+export interface TrackNavigationProps {
+    actionType: ActionType;
+    toForm?: TranslationKey;
+    label: string;
+    returnValue?: 'success' | 'validation error';
+    baseTrackingPayload?: Partial<AdditionalEventProperties>;
+}
+export declare const trackNavigation: ({ actionType, toForm, label, returnValue, baseTrackingPayload, }: TrackNavigationProps) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/kyc-components",
-  "version": "2.61.2",
+  "version": "2.62.1",
   "keywords": [
     "adyen",
     "adyen-kyc",