@adyen/kyc-components 2.61.1 → 2.62.0

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
 );
@@ -3747,11 +3756,11 @@ const Field = ({
     const returnValue = typeof errorMessage === "string" && errorMessage || "invalid";
     userEvents.addFieldEvent("Encountered error", {
       actionType: "input",
-      field: label,
+      field: name,
       returnType: "validation",
       returnValue
     });
-  }, [label, errorMessage]);
+  }, [name, errorMessage]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4035,12 +4044,11 @@ function Checkbox({
   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,
+        field: props.name,
         returnValue: String(newValue)
       });
     }
@@ -4399,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);
@@ -5015,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);
@@ -11011,7 +11019,7 @@ const isExistingFile = (file) => "existing" in file && file.existing;
 const isNewlyUploadedFile = (file) => !isExistingFile(file);
 function DropzoneFile(props) {
   var _a;
-  const { label, file, errorMessage, onDelete } = props;
+  const { file, errorMessage, onDelete } = props;
   const { i18n } = useI18nContext();
   let documentIcon;
   const formatSize = (bytes) => {
@@ -11032,11 +11040,11 @@ function DropzoneFile(props) {
     if (!errorMessage) return;
     userEvents.addFieldEvent("Encountered error", {
       actionType: "change",
-      field: label || "dropzone",
+      field: "dropzone file",
       returnType: "validation",
       returnValue: errorMessage
     });
-  }, [label, errorMessage]);
+  }, [errorMessage]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -11228,7 +11236,7 @@ function Dropzone(props) {
     if (enableTracking) {
       userEvents.addFieldEvent("Interacted with form field", {
         actionType: "change",
-        field: label || "file picker"
+        field: name || "file picker"
       });
     }
     const currentFiles = (data == null ? void 0 : data[name]) || [];
@@ -11266,7 +11274,6 @@ 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
@@ -11316,10 +11323,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 {
@@ -19138,6 +19141,7 @@ function FilePicker({
   errorMessage,
   multiple = false,
   label,
+  name,
   iconPrefix = "generic-document",
   enableTracking = false,
   // file validation options
@@ -19184,7 +19188,7 @@ function FilePicker({
     if (enableTracking) {
       userEvents.addFieldEvent("Interacted with form field", {
         actionType: "change",
-        field: label || "dropzone"
+        field: name || "dropzone"
       });
     }
     setFiles([...newFiles, ...files]);
@@ -19203,7 +19207,6 @@ function FilePicker({
     files.map((file) => /* @__PURE__ */ jsx(
       DropzoneFile,
       {
-        label,
         file,
         onDelete: () => handleFileDelete(file),
         errorMessage,
@@ -19573,6 +19576,7 @@ function BankDocument(props) {
               FilePicker,
               {
                 ...childProps,
+                name: "bankStatementDocument",
                 files: data.bankStatementDocument ?? [],
                 setFiles: handleChangeFor("bankStatementDocument"),
                 isValid: valid.bankStatementDocument ?? isBankStatementOptional,
@@ -23970,9 +23974,9 @@ function Summary({
         icon: "edit",
         onClick: () => {
           trackNavigation2({
-            fromForm: "summary",
+            actionType: "edit",
             toForm: formName,
-            component: "Pencil icon"
+            label: "Pencil icon"
           });
           editForm(formId);
         },
@@ -24050,18 +24054,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) => {
@@ -24118,7 +24122,7 @@ const useFormComposer = ({
     );
   }, [forms]);
   useEffect(() => {
-    userEvents.updateSharedEventProperties({ page: activeForm.formHeading || activeForm.formId });
+    userEvents.updateSharedEventProperties({ page: activeForm.formName });
   }, [activeForm]);
   useEffect(() => {
     if (hasAlreadyNavigatedForm) return;
@@ -24127,14 +24131,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) => {
@@ -24162,6 +24158,12 @@ const useFormComposer = ({
     }
     if (!activeForm.isValid) {
       validateCurrentForm();
+      trackNavigation({
+        actionType: "next",
+        label: "next",
+        returnValue: "validation error",
+        baseTrackingPayload
+      });
       return;
     }
     if (isFinalStep) {
@@ -24169,27 +24171,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
       });
     }
@@ -27665,9 +27665,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) => {
@@ -27676,7 +27677,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) }),
@@ -27754,15 +27763,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
       });
     },
@@ -28632,9 +28635,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);
@@ -28649,7 +28653,6 @@ function BusinessDetailsDropinComponent({
     handleNextClick,
     forms,
     activeForm.formId,
-    activeForm.formName,
     (_e = currentState.validityByForm) == null ? void 0 : _e.basicInformation,
     currentState.data.basicInformation,
     isBusinessSelection,
@@ -28661,9 +28664,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;
       }
@@ -28689,8 +28692,6 @@ function BusinessDetailsDropinComponent({
     }
   }, [
     activeForm.formId,
-    activeForm.formName,
-    i18n,
     country,
     handleBackClick,
     searching,
@@ -28700,9 +28701,9 @@ function BusinessDetailsDropinComponent({
   ]);
   const homeClick = () => {
     trackNavigation({
-      fromForm: activeForm.formName,
+      actionType: "save",
       toForm: "home",
-      component: "home"
+      label: "home"
     });
     handleHomeClick == null ? void 0 : handleHomeClick();
   };
@@ -30122,6 +30123,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(
@@ -30812,6 +30817,12 @@ 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", {
@@ -31139,15 +31150,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",
@@ -31212,7 +31224,7 @@ const Introduction = ({
           onClick: () => {
             userEvents.addEvent("Success", {
               actionLevel: "task",
-              actionType: "start",
+              actionType: "submit",
               label: translationKeys.start
             });
             onExitIntroduction();
@@ -31640,6 +31652,7 @@ const hasPayoutAccount = (legalEntityResponse) => {
   return Boolean((_a = legalEntityResponse.transferInstruments) == null ? void 0 : _a.length);
 };
 const TaskListItem = ({
+  titleKey,
   title,
   icon,
   status,
@@ -31656,18 +31669,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(
@@ -31681,7 +31707,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" }),
@@ -31740,6 +31766,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],
@@ -31898,7 +31925,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,
@@ -31913,7 +31940,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToTaskLegalRepresentative,
                 icon: "decision-maker",
-                title: i18n.get("legalRepresentative"),
+                titleKey: "legalRepresentative",
                 status: legalRepresentative ? getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31927,9 +31954,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToSoleProp,
                 icon: "company",
-                title: i18n.get(
-                  canChangeEntityType ? "soleProprietorshipDetails" : "soleProprietorDetails"
-                ),
+                titleKey: canChangeEntityType ? "soleProprietorshipDetails" : "soleProprietorDetails",
                 status: getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31945,7 +31970,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,
@@ -31961,7 +31986,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,
@@ -31976,7 +32001,7 @@ function TaskListComponent({
               {
                 onNavigateToTask: handleOnNavigateToTaskDecisionMaker,
                 icon: "decision-maker",
-                title: i18n.get("decisionMakers"),
+                titleKey: "decisionMakers",
                 status: hasMinRequiredDecisionMakerCount(legalEntityResponse) ? getTaskStatus(
                   EntityType.LEGAL_ENTITY,
                   capabilityProblems,
@@ -31996,7 +32021,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToTaskTrust,
             icon: "trust",
-            title: i18n.get("trustDetails"),
+            titleKey: "trustDetails",
             status: getTaskStatus(
               EntityType.LEGAL_ENTITY,
               capabilityProblems,
@@ -32011,7 +32036,7 @@ function TaskListComponent({
           {
             onNavigateToTask: handleOnNavigateToTaskTrustMember,
             icon: "decision-maker",
-            title: i18n.get("trustMembers"),
+            titleKey: "trustMembers",
             status: hasRequiredTrustMemberCount2 ? getTaskStatus(
               EntityType.LEGAL_ENTITY,
               capabilityProblems,
@@ -32059,7 +32084,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,
@@ -32078,7 +32103,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
@@ -32089,7 +32114,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,
@@ -32103,7 +32128,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"
@@ -32781,7 +32806,7 @@ function IndividualDropinComponent({
         legalEntityId: updatedLegalEntity.id,
         entityType: updatedLegalEntity.type,
         countryOfRegistration: ((_c2 = dataSubmitted.personalDetails) == null ? void 0 : _c2.residencyCountry) || null,
-        idDocumentType: idDocumentType || null
+        documentType: idDocumentType || null
       });
     }
     return updatedLegalEntity;
@@ -32893,7 +32918,7 @@ function IndividualDropinComponent({
         actionLevel: "task",
         actionType: "submit",
         countryOfRegistration: ((_b2 = dataSubmitted == null ? void 0 : dataSubmitted.personalDetails) == null ? void 0 : _b2.residencyCountry) || null,
-        idDocumentType: idDocumentType || null
+        documentType: idDocumentType || null
       });
       legalEntity.entityAssociations = filterOutUnwantedAssociationsIfRootLE(
         taskType,
@@ -33614,6 +33639,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();
     }
   });
@@ -36065,7 +36094,6 @@ function DropinComposerComponent({
     updateLegalEntityAndCapabilityProblems(legalEntity);
     if (legalEntity) {
       userEvents.updateBaseTrackingPayload({
-        legalEntityId: legalEntity.id,
         entityType: legalEntity.type,
         capabilities: Object.keys(legalEntity.capabilities),
         countryCode: getLegalEntityCountry(legalEntity)
@@ -36367,6 +36395,9 @@ function DropinComposerComponent({
       actionType: "start"
     });
   }, []);
+  useEffect(() => {
+    userEvents.updateBaseTrackingPayload({ task: currentTask });
+  }, [currentTask]);
   useLayoutEffect(() => {
     const fetchConfiguration = async () => {
       const data = await getConfiguration2({
@@ -39681,7 +39712,7 @@ const ConfigurationApiProvider = ({
 }) => {
   const authContext = useAuthContext();
   const { isEmbeddedDropin, loadingContext } = authContext;
-  const sdkVersion = "2.61.1";
+  const sdkVersion = "2.62.0";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -40354,7 +40385,7 @@ const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "2.61.1",
+      sdkVersion: "2.62.0",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -40419,7 +40450,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.1" })
+        /* @__PURE__ */ jsx(Tag, { variant: "green", className: "adyen-kyc-tag--large", children: "2.62.0" })
       ] }) }),
       /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
         /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: "rootLegalEntityId" }),
@@ -40544,14 +40575,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/FormFields/Dropzone/FilePicker.d.ts

@@ -10,7 +10,8 @@ export interface FilePickerProps extends FileValidationOptions {
     errorMessage?: TranslationKey;
     multiple?: boolean;
     label?: string;
+    name: string;
     iconPrefix?: string;
     enableTracking?: boolean;
 }
-export declare function FilePicker({ files, setFiles, isValid, errorMessage, multiple, label, iconPrefix, enableTracking, allowedFileTypes, maxSize, isOptional, maxNumberOfFiles, }: FilePickerProps): JSX.Element;
+export declare function FilePicker({ files, setFiles, isValid, errorMessage, multiple, label, name, iconPrefix, enableTracking, allowedFileTypes, maxSize, isOptional, maxNumberOfFiles, }: FilePickerProps): JSX.Element;

package/dist/types/components/internal/FormFields/Dropzone/types.d.ts

@@ -20,5 +20,4 @@ export interface DropzoneFileProps {
     errorMessage?: TranslationKey;
     onDelete: () => void;
     iconPrefix?: string;
-    label?: string;
 }

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.1",
+  "version": "2.62.0",
   "keywords": [
     "adyen",
     "adyen-kyc",