@adyen/kyc-components 4.0.0-beta.5 → 4.0.0-beta.6

package/dist/Dropzone-E3lXPgPY.js

@@ -0,0 +1,218 @@
+;
+{
+  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] = "b2b4b1e0-bd4a-4d1c-82b6-650c4a945395", e._sentryDebugIdIdentifier = "sentry-dbid-b2b4b1e0-bd4a-4d1c-82b6-650c4a945395");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
+import { i as defaultFileValidationOptions, j as fileValidationRules, S as StateContextSetter, D as DropzoneFile, h as bytesToSize } from "./validate-BtJFnIGb.js";
+import cx from "classnames";
+import { useRef, useState, useMemo, useEffect } from "preact/hooks";
+import { a as useTranslation, U as useAnalyticsContext, B as Button, x as Typography, V as Icon } from "./StoreProvider-DOveEVCE.js";
+import { a as useForm } from "./useForm-B58-dXq6.js";
+function Dropzone(props) {
+  const {
+    name,
+    label = "",
+    multiple = false,
+    disabled = false,
+    required = true,
+    defaultData,
+    id,
+    isOptional = false,
+    maxNumberOfFiles = defaultFileValidationOptions.maxNumberOfFiles,
+    maxSize = defaultFileValidationOptions.maxSize,
+    allowedFileTypes = defaultFileValidationOptions.allowedFileTypes,
+    showMinimal,
+    hidePageCount,
+    onChange: propsOnChange,
+    handleFieldChange,
+    errors: errorProp,
+    fieldValidationErrors,
+    valid: validProp,
+    enableTracking = false,
+    extraDropzoneDescription
+  } = props;
+  const { t } = useTranslation("common");
+  const userEvents = useAnalyticsContext();
+  const fileInput = useRef(null);
+  const [dragged, setDragged] = useState(false);
+  const stateRef = useRef({ setState: null });
+  const rules = useMemo(
+    () => fileValidationRules({
+      maxSize,
+      allowedFileTypes,
+      maxNumberOfFiles,
+      isOptional
+    }),
+    [allowedFileTypes, isOptional, maxNumberOfFiles, maxSize]
+  );
+  const form = useForm({
+    ...props,
+    schema: [name],
+    defaultData: defaultData || [],
+    rules: {
+      [name]: rules
+    }
+  });
+  let { data, valid, errors, fieldProblems, handleChangeFor } = form;
+  const { setValid, setData, isValid, triggerValidation } = form;
+  if (handleFieldChange) {
+    handleChangeFor = handleFieldChange;
+    data = defaultData;
+    errors = errorProp;
+    valid = validProp;
+    fieldProblems = fieldValidationErrors;
+  }
+  const isRequired = errors?.[name]?.errorMessage === "fieldIsRequired";
+  const allowedFiletypes = allowedFileTypes.join(", ");
+  const hasMaxNumberOfFiles = data?.[name]?.length >= maxNumberOfFiles;
+  useEffect(() => {
+    stateRef?.current?.setState?.({
+      type: "addToState",
+      value: { data, valid, errors, fieldProblems, dataStoreId: id }
+    });
+  }, [data, valid, errors, isValid]);
+  const selectFile = () => fileInput.current?.click();
+  const handleFileDelete = (fileToDelete) => handleChangeFor(
+    name,
+    "input"
+  )(data?.[name]?.filter((file) => file !== fileToDelete));
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handleDragLeave = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragged(false);
+  };
+  const handleDragOver = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    setDragged(true);
+  };
+  const handleDrop = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) updateFiles(e.dataTransfer);
+    setDragged(false);
+  };
+  const handleFileChange = (e) => updateFiles(e.target);
+  const updateFiles = ({ files }) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "change",
+        field: name || "file picker"
+      });
+    }
+    const currentFiles = data?.[name] || [];
+    handleChangeFor(name, "input")([...currentFiles, ...files ?? []]);
+  };
+  useEffect(() => {
+    const currentFiles = data?.[name] || [];
+    if (isValid) {
+      propsOnChange?.([...currentFiles]);
+    }
+  }, [isValid, data]);
+  useEffect(() => {
+    if (defaultData?.[name]?.[0]) {
+      setData(name, defaultData?.[name]);
+      triggerValidation();
+    } else {
+      setData(name, null);
+    }
+  }, [defaultData]);
+  useEffect(() => {
+    const currentFiles = data?.[name];
+    const hasFiles = currentFiles && currentFiles.length > 0;
+    if (isOptional && !hasFiles) {
+      setValid(name, true);
+    }
+  }, [isOptional, data]);
+  const renderInnerContent = () => showMinimal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__button", children: /* @__PURE__ */ jsx(Button, { onClick: selectFile, disabled, fullWidth: true, children: t(($) => $["browseFiles"]) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone__extras", children: [
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], {
+        maxSize: bytesToSize(maxSize)
+      }) })
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__icon", children: /* @__PURE__ */ jsx(Icon, { name: "upload" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-dropzone__labels", children: [
+      /* @__PURE__ */ jsx(Typography, { el: "h4", variant: "body-strongest", children: t(($) => $[multiple ? "dropFilesToUpload" : "dropFileToUpload"]) }),
+      extraDropzoneDescription && /* @__PURE__ */ jsx(Typography, { color: "secondary", children: extraDropzoneDescription }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["supportedFileTypes"], { fileTypes: allowedFiletypes }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $[hidePageCount ? "maxFileSizeOnly" : "maxFileSize"], {
+        maxSize: bytesToSize(maxSize)
+      }) }),
+      /* @__PURE__ */ jsx(Typography, { color: "secondary", children: t(($) => $["upToFiles"], { maxFiles: maxNumberOfFiles }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-dropzone__button", children: /* @__PURE__ */ jsx(Button, { onClick: selectFile, variant: "secondary", children: t(($) => $["browseFiles"]) }) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(StateContextSetter, { stateRef }),
+    label && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("adyen-kyc-label__text", {
+          "adyen-kyc-label__text--error": isRequired
+        }),
+        children: label
+      }
+    ),
+    data?.[name]?.map((file) => /* @__PURE__ */ jsx(
+      DropzoneFile,
+      {
+        file,
+        onDelete: () => handleFileDelete(file),
+        errorMessage: errors?.[name]?.errorMessage
+      },
+      file
+    )),
+    !hasMaxNumberOfFiles && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "region",
+        className: cx("adyen-kyc-dropzone", {
+          "adyen-kyc-dropzone--dragged": dragged,
+          "adyen-kyc-dropzone--error": !dragged && isRequired
+        }),
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        children: [
+          renderInnerContent(),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "adyen-kyc-dropzone__input",
+              ref: fileInput,
+              disabled,
+              multiple,
+              accept: allowedFiletypes,
+              onChange: handleFileChange,
+              type: "file",
+              "aria-required": required,
+              "aria-label": label,
+              "aria-invalid": !valid,
+              "data-testid": "dropzone-input"
+            }
+          )
+        ]
+      }
+    ),
+    isRequired && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-error-text", children: t(($) => $["fieldIsRequired"]) })
+  ] });
+}
+export {
+  Dropzone as D
+};

package/dist/{EmbeddedStatus-8yA_zZvi.js → EmbeddedStatus-C17AoFjV.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] = "329b7a5a-166f-4da4-9867-7c3c1020ed02", e._sentryDebugIdIdentifier = "sentry-dbid-329b7a5a-166f-4da4-9867-7c3c1020ed02");
+    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-DL_WbHEO.js";
-import { a1 as TaskStatuses, c as useTranslation, J as Skeleton, N as Typography } from "./StoreProvider-QThALSrj.js";
+import { A as Avatar } from "./Avatar-CZRMcyig.js";
+import { O as TaskStatuses, a as useTranslation, v as Skeleton, x as Typography } from "./StoreProvider-DOveEVCE.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-Bc-JoLaP.js

@@ -0,0 +1,71 @@
+;
+{
+  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] = "a6747a13-78bc-45ee-a4e4-1f387c8f3856", e._sentryDebugIdIdentifier = "sentry-dbid-a6747a13-78bc-45ee-a4e4-1f387c8f3856");
+  } catch (e) {
+  }
+}
+;
+import { jsxs, jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+import { isValidElement, cloneElement } from "preact";
+import { B as Button, L as Loader, V as Icon } from "./StoreProvider-DOveEVCE.js";
+const endStateLayout = "adyen-kyc-end-state-layout";
+const endStateLayoutHeader = "adyen-kyc-end-state-layout-header";
+const endStateLayoutIcon = "adyen-kyc-end-state-layout-icon";
+const endStateLayoutIconSuccess = "adyen-kyc-end-state-layout-icon-success";
+const endStateLayoutIconError = "adyen-kyc-end-state-layout-icon-error";
+const endStateLayoutIconInfo = "adyen-kyc-end-state-layout-icon-info";
+const endStateLayoutIconWarning = "adyen-kyc-end-state-layout-icon-warning";
+const endStateLayoutTitle = "adyen-kyc-end-state-layout-title";
+const endStateLayoutDescription = "adyen-kyc-end-state-layout-description";
+const endStateLayoutAction = "adyen-kyc-end-state-layout-action";
+const styles = {
+  endStateLayout,
+  endStateLayoutHeader,
+  endStateLayoutIcon,
+  endStateLayoutIconSuccess,
+  endStateLayoutIconError,
+  endStateLayoutIconInfo,
+  endStateLayoutIconWarning,
+  endStateLayoutTitle,
+  endStateLayoutDescription,
+  endStateLayoutAction
+};
+const EndStateLayout = ({
+  action,
+  description,
+  loading = false,
+  title,
+  variant = "success"
+}) => {
+  if (action && (!isValidElement(action) || action.type !== Button)) {
+    throw new Error('EndStateLayout component only accepts Button component as "action".');
+  }
+  const iconClassname = cx(styles.endStateLayoutIcon, {
+    [styles.endStateLayoutIconSuccess]: variant === "success",
+    [styles.endStateLayoutIconError]: variant === "error",
+    [styles.endStateLayoutIconWarning]: variant === "warning",
+    [styles.endStateLayoutIconInfo]: variant === "info" || variant === "basic"
+  });
+  const iconName = {
+    basic: "info-circle",
+    error: "cross",
+    info: "info-circle",
+    success: "check",
+    warning: "warning"
+  };
+  const actionButton = action ? cloneElement(action, { disabled: loading }) : null;
+  return /* @__PURE__ */ jsxs("article", { className: styles.endStateLayout, children: [
+    /* @__PURE__ */ jsxs("header", { className: styles.endStateLayoutHeader, children: [
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.endStateLayoutIcon, role: "progressbar", children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx("div", { className: iconClassname, role: "img", "aria-label": variant, children: /* @__PURE__ */ jsx(Icon, { name: iconName[variant] }) }),
+      /* @__PURE__ */ jsx("h1", { className: styles.endStateLayoutTitle, children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: styles.endStateLayoutDescription, children: description })
+    ] }),
+    actionButton && /* @__PURE__ */ jsx("div", { className: styles.endStateLayoutAction, role: "toolbar", children: actionButton })
+  ] });
+};
+export {
+  EndStateLayout as E
+};

package/dist/{FormFlow-6j8qCSuK.js → FormFlow-Di-9Yq0J.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] = "eb7431c1-a9b3-43db-916d-b2527dc9f871", e._sentryDebugIdIdentifier = "sentry-dbid-eb7431c1-a9b3-43db-916d-b2527dc9f871");
+    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 { dC as FormContext, a3 as useAnalyticsContext, c as useTranslation, bw as MaybeModal, a6 as LoaderWrapper, dD as FormRouterContextProvider, aR as Summary, G as Button, a2 as IconButton, bi as Confirm } from "./StoreProvider-QThALSrj.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-DOveEVCE.js";
+import { L as LoaderWrapper } from "./useForm-B58-dXq6.js";
+import { M as MaybeModal } from "./MaybeModal-DebkHJrB.js";
+import { F as FormRouterContextProvider } from "./dropinUtils-1GeCqEl1.js";
+import { C as Confirm } from "./Confirm-CgkKXlLy.js";
+import { S as Summary } from "./CountryField-DrVg4pbc.js";
 function FormContextProvider({
   children,
   form

package/dist/FormNavigation-Ch8lpQQK.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-DOveEVCE.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
+};