@adyen/kyc-components 3.81.0 → 3.82.0-beta.0

package/dist/{EmbeddedStatus-BS-fmZSm.js → EmbeddedStatus-BIhXDQHZ.js}

@@ -2,15 +2,15 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "cb646361-5441-42e9-9cc9-49ab9d80f815", e._sentryDebugIdIdentifier = "sentry-dbid-cb646361-5441-42e9-9cc9-49ab9d80f815");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "49fce45c-3985-44ea-b532-39f801c2a545", e._sentryDebugIdIdentifier = "sentry-dbid-49fce45c-3985-44ea-b532-39f801c2a545");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
 import cx from "classnames";
-import { A as Avatar } from "./Avatar-Cd_8eqbA.js";
-import { a1 as TaskStatuses, c as useTranslation, J as Skeleton, N as Typography } from "./StoreProvider-pdSV8sgb.js";
+import { A as Avatar } from "./Avatar-DOeLDY6M.js";
+import { O as TaskStatuses, a as useTranslation, v as Skeleton, x as Typography } from "./StoreProvider-B_tFiIdr.js";
 import { T as Tag } from "./Tag-DdkVScyr.js";
 import { O as OnboardingStatuses } from "./view-verification-status-VFcBydkR.js";
 const embeddedStatus = "adyen-kyc-embedded-status";
@@ -59,7 +59,7 @@ const EmbeddedStatus = ({
   actionIndicator,
   ...props
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("common");
   const statusTag = status ? statusToTag(status) : { translationKey: tagLabel, variant: tagVariant };
   const avatarVariant = light ? "tertiary" : "secondary";
   return /* @__PURE__ */ jsxs(

package/dist/{EndStateLayout-qrS2Eh-G.js → EndStateLayout-C80dFrcg.js}

@@ -2,7 +2,7 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "28d0a0af-3c72-4f37-821f-890e17b3096c", e._sentryDebugIdIdentifier = "sentry-dbid-28d0a0af-3c72-4f37-821f-890e17b3096c");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "a6747a13-78bc-45ee-a4e4-1f387c8f3856", e._sentryDebugIdIdentifier = "sentry-dbid-a6747a13-78bc-45ee-a4e4-1f387c8f3856");
   } catch (e) {
   }
 }
@@ -10,7 +10,7 @@
 import { jsxs, jsx } from "preact/jsx-runtime";
 import cx from "classnames";
 import { isValidElement, cloneElement } from "preact";
-import { G as Button, L as Loader, a7 as Icon } from "./StoreProvider-pdSV8sgb.js";
+import { B as Button, L as Loader, V as Icon } from "./StoreProvider-B_tFiIdr.js";
 const endStateLayout = "adyen-kyc-end-state-layout";
 const endStateLayoutHeader = "adyen-kyc-end-state-layout-header";
 const endStateLayoutIcon = "adyen-kyc-end-state-layout-icon";

package/dist/{FormFlow-BjHYz5-l.js → FormFlow-Df3CEE-c.js}

@@ -2,15 +2,21 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "b745e065-bff2-4371-915c-f6a2319fdae8", e._sentryDebugIdIdentifier = "sentry-dbid-b745e065-bff2-4371-915c-f6a2319fdae8");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "c08d8132-3c10-480b-869b-3e38978c6259", e._sentryDebugIdIdentifier = "sentry-dbid-c08d8132-3c10-480b-869b-3e38978c6259");
   } catch (e) {
   }
 }
 ;
 import { jsx, jsxs } from "preact/jsx-runtime";
 import { useMemo, useRef, useState } from "preact/hooks";
-import { dF as FormContext, a3 as useAnalyticsContext, c as useTranslation, bv as MaybeModal, a6 as LoaderWrapper, dG as FormRouterContextProvider, aS as Summary, G as Button, a2 as IconButton, bh as Confirm } from "./StoreProvider-pdSV8sgb.js";
+import { F as FormContext } from "./useFormContext-beqGS11A.js";
 import cx from "classnames";
+import { U as useAnalyticsContext, a as useTranslation, B as Button, P as IconButton } from "./StoreProvider-B_tFiIdr.js";
+import { L as LoaderWrapper } from "./useForm-Dah8AZ3S.js";
+import { M as MaybeModal } from "./MaybeModal-BBBahxa3.js";
+import { F as FormRouterContextProvider } from "./dropinUtils-Bs4XZJuG.js";
+import { C as Confirm } from "./Confirm-Dj-igSqL.js";
+import { S as Summary } from "./CountryField-B2dh1VXh.js";
 function FormContextProvider({
   children,
   form

package/dist/FormNavigation-UiyNK4Uw.js

@@ -0,0 +1,162 @@
+;
+{
+  try {
+    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "e1e802a0-2c24-4ffc-964b-9ecfcd877bab", e._sentryDebugIdIdentifier = "sentry-dbid-e1e802a0-2c24-4ffc-964b-9ecfcd877bab");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { B as Button, a as useTranslation, V as Icon, U as useAnalyticsContext, x as Typography, W as noop } from "./StoreProvider-B_tFiIdr.js";
+import cx from "classnames";
+import { K as KEYBOARD_KEYS } from "./keys-BpNgnAsD.js";
+const ActionBar = ({
+  onNext,
+  onBack,
+  onHome,
+  homeButtonLabel,
+  backButtonLabel,
+  nextButtonLabel,
+  hideBackButton,
+  hideNextButton,
+  nextButtonDisabled = false
+}) => /* @__PURE__ */ jsxs("div", { className: "adyen-action-bar", children: [
+  (onBack || onNext) && /* @__PURE__ */ jsxs("div", { className: "adyen-action-bar__action", children: [
+    onBack && !hideBackButton && backButtonLabel && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onBack(), testId: "backBtn", children: backButtonLabel }),
+    onNext && !hideNextButton && nextButtonLabel && /* @__PURE__ */ jsx(Button, { onClick: onNext, disabled: nextButtonDisabled, children: nextButtonLabel })
+  ] }),
+  onHome && homeButtonLabel && /* @__PURE__ */ jsx("div", { className: "adyen-action-bar__action", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onHome(), children: homeButtonLabel }) })
+] });
+const FormNavigationItem = ({
+  form,
+  isActive,
+  onClick,
+  hasVerificationErrors
+}) => {
+  const { t } = useTranslation("common");
+  const hasError = form.hasServerValidationErrors || hasVerificationErrors;
+  const handleKeyDown = (e) => {
+    if (onClick && (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space)) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "aria-label": t(($) => $[form.formName]),
+      "aria-current": isActive,
+      className: cx("adyen-kyc-form-navigation__item", {
+        "adyen-kyc-form-navigation__item--active": isActive,
+        "adyen-kyc-form-navigation__item--valid": form.isValid,
+        "adyen-kyc-form-navigation__item--isnav": Boolean(onClick)
+      }),
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick,
+          onKeyDown: onClick ? handleKeyDown : void 0,
+          tabIndex: onClick ? 0 : void 0,
+          children: [
+            t(($) => $[form.formName]),
+            form.hasServerValidationErrors && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--error", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "warning" }),
+              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepInvalid"]) })
+            ] }),
+            form.isValid && !hasError && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--success", children: [
+              /* @__PURE__ */ jsx(Icon, { name: "checkmark-small" }),
+              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepCompleted"]) })
+            ] })
+          ]
+        }
+      )
+    },
+    form.formId
+  );
+};
+function FormNavigation({
+  forms,
+  activeForm,
+  gotoForm,
+  validateForm,
+  className,
+  taskName,
+  verificationErrors,
+  trackNavigation = noop
+}) {
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const taskNameTranslated = t(($) => $[taskName]);
+  const getFormIndex = (form) => forms.findIndex((f) => f.formId === form.formId);
+  const goToForm = (form) => () => {
+    if (form.formId === activeForm.formId) return;
+    gotoForm(getFormIndex(form));
+    trackNavigation({
+      userEvents,
+      actionType: "navigate",
+      toForm: form.formName,
+      label: form.formName,
+      returnValue: "success"
+    });
+  };
+  const getNavigateHandler = (form, activeForm2) => {
+    const priorForms = forms.slice(0, getFormIndex(form));
+    const allPriorFormsValid = priorForms.every((subForm) => subForm.isValid);
+    if (allPriorFormsValid || !validateForm) {
+      return goToForm(form);
+    }
+    return activeForm2.isValid ? void 0 : () => {
+      trackNavigation({
+        userEvents,
+        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(
+      Typography,
+      {
+        el: "h3",
+        variant: "body",
+        color: "secondary",
+        className: "adyen-kyc-form-navigation__header",
+        children: taskNameTranslated
+      }
+    ),
+    forms && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          color: "tertiary",
+          variant: "caption-stronger",
+          className: "adyen-kyc-form-navigation__step-count",
+          children: t(($) => $["stepsX/YofForm"], {
+            activeFormIndex: getFormIndex(activeForm) + 1,
+            totalForms: forms.length,
+            taskNameTranslated
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx("ul", { className: "adyen-kyc-form-navigation__items", children: forms.map((form) => /* @__PURE__ */ jsx(
+        FormNavigationItem,
+        {
+          form,
+          isActive: form.formId === activeForm.formId,
+          onClick: getNavigateHandler(form, activeForm),
+          hasVerificationErrors: Boolean(verificationErrors?.[form.formId] ?? false)
+        },
+        form.formId
+      )) })
+    ] })
+  ] });
+}
+export {
+  ActionBar as A,
+  FormNavigation as F
+};