@adyen/kyc-components 4.0.1 → 4.2.0-beta.1

package/dist/InputDate-C6lCe4Mh.js

@@ -0,0 +1,43 @@
+;
+{
+  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] = "beef0602-3e73-42e9-a49f-8be7b7981235", e._sentryDebugIdIdentifier = "sentry-dbid-beef0602-3e73-42e9-a49f-8be7b7981235");
+  } catch (e) {
+  }
+}
+;
+import { jsx } from "preact/jsx-runtime";
+import { useMemo } from "preact/hooks";
+import { a as InputBase } from "./InputText-D_BqYXYv.js";
+const checkDateInputSupport = () => {
+  const input = document.createElement("input");
+  input.setAttribute("type", "date");
+  return input.type === "date";
+};
+const formatDate = (value) => {
+  const date = value.replace(/\D|\s/g, "").replace(/^(00)(.*)?/, "01$2").replace(/^(3[2-9])(.*)?/, "0$1$2").replace(/^([4-9])(.*)?/, "0$1").replace(/^([0-9]{2})(00)(.*)?/, "$101").replace(/^(3[01])(02)(.*)?/, "29$2").replace(/^([0-9]{2})([2-9]|1[3-9])(.*)?/, "$10$2").replace(/^([0-9]{2})([0-9]{2})([0-9])/, "$1/$2/$3").replace(/^([0-9]{2})([0-9])/, "$1/$2");
+  const [day = "", month = "", year = ""] = date.split("/");
+  if (year.length === 4 && day === "29" && month === "02" && (Number(year) % 4 !== 0 || year.substring(2, 4) === "00" && Number(year) % 400 !== 0)) {
+    return date.replace(/^29/, "28");
+  }
+  return date;
+};
+const formatDateObj = (date) => date.toJSON().slice(0, 10);
+function InputDate(props) {
+  const isDateInputSupported = useMemo(checkDateInputSupport, []);
+  const { onInput } = props;
+  const handleInput = (e) => {
+    const { value } = e.currentTarget;
+    e.currentTarget.value = formatDate(value);
+    onInput(e);
+  };
+  if (isDateInputSupported) {
+    return /* @__PURE__ */ jsx(InputBase, { ...props, type: "date" });
+  }
+  return /* @__PURE__ */ jsx(InputBase, { ...props, onInput: handleInput, maxLength: 10 });
+}
+export {
+  InputDate as I,
+  formatDateObj as f
+};

package/dist/InputGroup-WBfGDV5F.js

@@ -0,0 +1,32 @@
+;
+{
+  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] = "982492e0-b2a7-4141-82ba-c79e74587917", e._sentryDebugIdIdentifier = "sentry-dbid-982492e0-b2a7-4141-82ba-c79e74587917");
+  } catch (e) {
+  }
+}
+;
+import { jsx } from "preact/jsx-runtime";
+import cx from "classnames";
+const InputGroup = ({
+  id,
+  isFocused,
+  isInvalid = false,
+  className,
+  children
+}) => {
+  const classNames = cx(
+    "adyen-kyc-input-group",
+    {
+      "adyen-kyc-input-group--invalid": isInvalid,
+      "adyen-kyc-input-group--valid": !isInvalid,
+      "adyen-kyc-input-group--focused": isFocused
+    },
+    className
+  );
+  return /* @__PURE__ */ jsx("div", { id, "data-testid": id, className: classNames, children });
+};
+export {
+  InputGroup as I
+};

package/dist/InputText-D_BqYXYv.js

@@ -0,0 +1,134 @@
+;
+{
+  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] = "640ed60b-e92d-4e2b-97e7-e20154b2b172", e._sentryDebugIdIdentifier = "sentry-dbid-640ed60b-e92d-4e2b-97e7-e20154b2b172");
+  } catch (e) {
+  }
+}
+;
+import { jsx } from "preact/jsx-runtime";
+import { forwardRef } from "preact/compat";
+import { useRef, useState, useCallback, useLayoutEffect } from "preact/hooks";
+import cx from "classnames";
+import { p as useAnalyticsContext } from "./StoreProvider-CISxF69y.js";
+import { d as debouncedInputEvent } from "./debouncedInputEvent-Cv2S512Y.js";
+const InputBase = forwardRef((props, ref) => {
+  const userEvents = useAnalyticsContext();
+  const { enableTracking = false, ...passedProps } = props;
+  const { isInvalid, isValid, type = "text", disabled, name } = props;
+  const handleInput = (e) => {
+    if (enableTracking) {
+      debouncedInputEvent(userEvents, { actionType: "input", field: name });
+    }
+    props.onInput?.(e);
+  };
+  const handleBlur = (e) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "blur",
+        field: name
+      });
+    }
+    props.onBlurHandler?.(e);
+    if (props.trimOnBlur) {
+      e.currentTarget.value = e.currentTarget.value.trim();
+    }
+    props.onBlur?.(e);
+  };
+  const handleFocus = (e) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "focus",
+        field: name
+      });
+    }
+    props.onFocusHandler?.(e);
+  };
+  const inputClassNames = cx("adyen-kyc-input", [`adyen-kyc-input--${type}`], props.className, {
+    "adyen-kyc-input--invalid": isInvalid,
+    "adyen-kyc-field--valid": isValid,
+    "adyen-kyc-input--disabled": disabled
+  });
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...passedProps,
+      name,
+      "aria-disabled": disabled,
+      "aria-invalid": !isValid,
+      "aria-required": passedProps.required || passedProps["aria-required"],
+      className: inputClassNames,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onInput: handleInput,
+      ref,
+      type
+    }
+  );
+});
+InputBase.displayName = "InputBase";
+const useForwardedRef = (forwardedRef) => {
+  const backupRef = useRef();
+  return forwardedRef ?? backupRef;
+};
+const InputText = forwardRef(
+  ({ onInput, onBlur, transformInput, transformMode, ...props }, ref) => {
+    const [cursorPosition, setCursorPosition] = useState(null);
+    const localRef = useForwardedRef(ref);
+    const inputHandler = useCallback(
+      (event) => {
+        const inputEl = event.currentTarget;
+        if (transformInput && (!transformMode || transformMode === "input")) {
+          setCursorPosition(inputEl.selectionStart);
+          const transformedInput = transformInput(inputEl.value);
+          const eventWithTransformedValue = {
+            ...event,
+            target: { ...event.target, value: transformedInput }
+          };
+          onInput(eventWithTransformedValue);
+        } else {
+          onInput(event);
+        }
+      },
+      [transformInput, transformMode, onInput]
+    );
+    const blurHandler = useCallback(
+      (event) => {
+        const inputEl = event.currentTarget;
+        if (transformInput && transformMode === "blur") {
+          setCursorPosition(inputEl.selectionStart);
+          const transformedInput = transformInput(inputEl.value);
+          const eventWithTransformedValue = {
+            ...event,
+            target: { ...event.target, value: transformedInput }
+          };
+          onBlur?.(eventWithTransformedValue);
+        } else {
+          onBlur?.(event);
+        }
+      },
+      [transformInput, transformMode, onBlur]
+    );
+    useLayoutEffect(() => {
+      if (cursorPosition && localRef.current?.selectionStart !== cursorPosition) {
+        localRef?.current?.setSelectionRange(cursorPosition, cursorPosition, "none");
+      }
+    }, [cursorPosition, localRef]);
+    return /* @__PURE__ */ jsx(
+      InputBase,
+      {
+        ...props,
+        onInput: inputHandler,
+        onBlur: blurHandler,
+        ref: localRef,
+        type: "text"
+      }
+    );
+  }
+);
+export {
+  InputText as I,
+  InputBase as a,
+  useForwardedRef as u
+};

package/dist/Introduction-B3dnyHAw.js

@@ -0,0 +1,256 @@
+;
+{
+  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] = "8af77aac-e017-40cf-9261-f10e3f8e284c", e._sentryDebugIdIdentifier = "sentry-dbid-8af77aac-e017-40cf-9261-f10e3f8e284c");
+  } catch (e) {
+  }
+}
+;
+import { j as TaskTypes, o as LegalEntityTypes, u as useTranslation, c as useLegalEntity, a as addResourceBundles, L as Loader, R as ROOT_LE, p as useAnalyticsContext, V as Button, _ as __variableDynamicImportRuntimeHelper } from "./StoreProvider-CISxF69y.js";
+import { jsxs, Fragment, jsx } from "preact/jsx-runtime";
+import { useState, useEffect } from "preact/hooks";
+import { S as StepProgressIndicator } from "./StepProgressIndicator-BlYqsR2g.js";
+import { useMemo } from "preact/compat";
+import { u as useCanSeeIntroduction, a as useLegalEntityType } from "./useCanSeeIntroduction--oO1qdiT.js";
+const IntroductionScreens = {
+  PROLOGUE: "PROLOGUE",
+  INDIVIDUAL: TaskTypes.INDIVIDUAL,
+  DECISION_MAKER: TaskTypes.DECISION_MAKER,
+  SOLE_PROPRIETOR_COMPANY: TaskTypes.SOLE_PROPRIETOR_COMPANY,
+  TRUST: TaskTypes.TRUST,
+  TRUST_MEMBER: TaskTypes.TRUST_MEMBER,
+  ACCOUNT: "ACCOUNT",
+  EPILOGUE: "EPILOGUE"
+};
+const introductionScreensByLegalEntityType = {
+  [LegalEntityTypes.INDIVIDUAL]: [
+    IntroductionScreens.PROLOGUE,
+    IntroductionScreens.INDIVIDUAL,
+    IntroductionScreens.ACCOUNT,
+    IntroductionScreens.EPILOGUE
+  ],
+  [LegalEntityTypes.ORGANIZATION]: [
+    IntroductionScreens.PROLOGUE,
+    IntroductionScreens.DECISION_MAKER,
+    IntroductionScreens.ACCOUNT,
+    IntroductionScreens.EPILOGUE
+  ],
+  [LegalEntityTypes.SOLE_PROPRIETORSHIP]: [
+    IntroductionScreens.PROLOGUE,
+    IntroductionScreens.INDIVIDUAL,
+    IntroductionScreens.SOLE_PROPRIETOR_COMPANY,
+    IntroductionScreens.ACCOUNT,
+    IntroductionScreens.EPILOGUE
+  ],
+  [LegalEntityTypes.TRUST]: [
+    IntroductionScreens.PROLOGUE,
+    IntroductionScreens.INDIVIDUAL,
+    IntroductionScreens.DECISION_MAKER,
+    IntroductionScreens.TRUST,
+    IntroductionScreens.TRUST_MEMBER,
+    IntroductionScreens.ACCOUNT,
+    IntroductionScreens.EPILOGUE
+  ],
+  // TODO SOE-2109: Update to use Unincorporated Partnership screens
+  [LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]: [
+    IntroductionScreens.PROLOGUE,
+    IntroductionScreens.INDIVIDUAL,
+    IntroductionScreens.DECISION_MAKER,
+    IntroductionScreens.TRUST,
+    IntroductionScreens.TRUST_MEMBER,
+    IntroductionScreens.ACCOUNT,
+    IntroductionScreens.EPILOGUE
+  ]
+};
+const useIntroductionScreens = ({ legalEntity, tasks }) => {
+  const canSeeIntroduction = useCanSeeIntroduction({ legalEntity });
+  const legalEntityType = useLegalEntityType({ legalEntity });
+  const introductionScreens = useMemo(
+    () => legalEntityType ? introductionScreensByLegalEntityType[legalEntityType].filter((screen) => {
+      const isAccountScreen = screen === IntroductionScreens.ACCOUNT;
+      const hasAccountTask = tasks.includes(TaskTypes.PAYIN) || tasks.includes(TaskTypes.PAYOUT);
+      const isSoleProprietorScreen = screen === IntroductionScreens.SOLE_PROPRIETOR_COMPANY;
+      const isSoleProprietor = legalEntityType === LegalEntityTypes.SOLE_PROPRIETORSHIP;
+      const isTrustScreen = screen === IntroductionScreens.TRUST || screen === IntroductionScreens.TRUST_MEMBER;
+      const isTrust = legalEntityType === LegalEntityTypes.TRUST;
+      if (isAccountScreen) return hasAccountTask;
+      if (isSoleProprietorScreen) return isSoleProprietor;
+      if (isTrustScreen) return isTrust;
+      return tasks.some((task) => screen === task);
+    }) : [],
+    [legalEntityType, tasks]
+  );
+  return canSeeIntroduction && introductionScreens?.length > 0 ? [IntroductionScreens.PROLOGUE, ...introductionScreens, IntroductionScreens.EPILOGUE] : void 0;
+};
+const toCapitalized = (s) => `${s[0].toUpperCase()}${s.slice(1).toLowerCase()}`;
+const toPascalCase = (s) => s.split(/[^A-Za-z]/).map((word) => toCapitalized(word)).join("");
+const IntroductionScreenTranslationKeyElements = {
+  ListItem: "LI",
+  Paragraph: "P"
+};
+const getIntroductionScreenTranslationKeys = (factors, i18n) => {
+  const introductionStrings = i18n.getResourceBundle(i18n.language, "introduction");
+  if (!introductionStrings || !factors.legalEntityType) return;
+  const elForKey = (factors.elementType || "").toUpperCase();
+  const lForKey = toPascalCase(factors.legalEntityType || "");
+  const iForKey = toPascalCase(factors.introductionScreen);
+  const keyPrefix = `introductionScreen${iForKey}Description${elForKey}`;
+  const keyPrefixWithL = `introductionScreen${iForKey}${lForKey}Description${elForKey}`;
+  const keys = Object.keys(introductionStrings).filter((key) => key.startsWith(keyPrefix));
+  const keysWithL = Object.keys(introductionStrings).filter(
+    (key) => key.startsWith(keyPrefixWithL)
+  );
+  return (keysWithL.length ? keysWithL : keys).sort(
+    (a, b) => Number(a.at(-1)) - Number(b.at(-1))
+  );
+};
+const IntroductionScreen = ({
+  introductionScreen,
+  legalEntity,
+  number
+}) => {
+  const { t, i18n } = useTranslation("introduction");
+  const legalEntityType = useLegalEntityType({ legalEntity });
+  const paragraphKeys = getIntroductionScreenTranslationKeys(
+    {
+      introductionScreen,
+      legalEntityType,
+      elementType: IntroductionScreenTranslationKeyElements.Paragraph
+    },
+    i18n
+  );
+  const listItemKeys = getIntroductionScreenTranslationKeys(
+    {
+      introductionScreen,
+      legalEntityType,
+      elementType: IntroductionScreenTranslationKeyElements.ListItem
+    },
+    i18n
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-introduction__number", children: number }),
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-introduction__title", children: t(
+      ($) => $[`introductionScreen${toPascalCase(introductionScreen)}Title`]
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-introduction__description", children: [
+      !!paragraphKeys?.length && paragraphKeys.map((key) => /* @__PURE__ */ jsx("p", { children: t(($) => $[key]) }, key)),
+      !!listItemKeys?.length && /* @__PURE__ */ jsx("ul", { children: listItemKeys.map((key) => /* @__PURE__ */ jsx("li", { children: t(($) => $[key]) }, key)) })
+    ] })
+  ] });
+};
+function Introduction({ onExitIntroduction, tasks }) {
+  const { data: rootLe, isLoading } = useLegalEntity(ROOT_LE);
+  const { i18n } = useTranslation();
+  addResourceBundles(i18n, [
+    { ns: "introduction", importFn: (lang) => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/introduction/bg-BG.json": () => import("./bg-BG-BY3Wa361.js"), "../language/introduction/cs-CZ.json": () => import("./cs-CZ-BEFeaKsV.js"), "../language/introduction/da-DK.json": () => import("./da-DK-D6UK8XT9.js"), "../language/introduction/de-DE.json": () => import("./de-DE-DUl6gRKv.js"), "../language/introduction/el-GR.json": () => import("./el-GR-B5j7VZ3E.js"), "../language/introduction/en-US.json": () => import("./en-US-BSQXKu6d.js"), "../language/introduction/es-ES.json": () => import("./es-ES-Cavm0szq.js"), "../language/introduction/et-EE.json": () => import("./et-EE-DUWZ2Vqm.js"), "../language/introduction/fi-FI.json": () => import("./fi-FI-DVa-ccaW.js"), "../language/introduction/fr-FR.json": () => import("./fr-FR-CY9emHgF.js"), "../language/introduction/hr-HR.json": () => import("./hr-HR-CnP5sqih.js"), "../language/introduction/hu-HU.json": () => import("./hu-HU-BTlpbCpc.js"), "../language/introduction/it-IT.json": () => import("./it-IT-GgHc0cHR.js"), "../language/introduction/ja-JP.json": () => import("./ja-JP-CbgaW99b.js"), "../language/introduction/lt-LT.json": () => import("./lt-LT-DTQGR9M0.js"), "../language/introduction/lv-LV.json": () => import("./lv-LV-BQ4F1GrV.js"), "../language/introduction/nl-NL.json": () => import("./nl-NL-CUcML482.js"), "../language/introduction/no-NO.json": () => import("./no-NO-BBCvsecq.js"), "../language/introduction/pl-PL.json": () => import("./pl-PL-kGaeUP-w.js"), "../language/introduction/pt-BR.json": () => import("./pt-BR-nU_2Wbo5.js"), "../language/introduction/pt-PT.json": () => import("./pt-PT-JVqqgvPs.js"), "../language/introduction/ro-RO.json": () => import("./ro-RO-C83h2zHZ.js"), "../language/introduction/sk-SK.json": () => import("./sk-SK-CgLJIuJw.js"), "../language/introduction/sl-SI.json": () => import("./sl-SI-BzeVaC1Z.js"), "../language/introduction/sv-SE.json": () => import("./sv-SE-CVmo11gI.js") }), `../language/introduction/${lang}.json`, 4) }
+  ]);
+  if (isLoading || !rootLe) {
+    return /* @__PURE__ */ jsx(Loader, { size: "large" });
+  }
+  return /* @__PURE__ */ jsx(IntroductionInner, { legalEntity: rootLe, onExitIntroduction, tasks });
+}
+const IntroductionInner = ({
+  legalEntity,
+  onExitIntroduction,
+  tasks
+}) => {
+  const { t } = useTranslation(["common", "introduction"]);
+  const userEvents = useAnalyticsContext();
+  const introductionScreens = useIntroductionScreens({ legalEntity, tasks });
+  const [activeIndex, setActiveIndex] = useState(0);
+  const pageEventDetails = {
+    page: introductionScreens?.length ? introductionScreens[activeIndex] : void 0
+  };
+  useEffect(() => {
+    userEvents.addTaskEvent("Landed on page", {
+      actionType: "start"
+    });
+  }, [userEvents]);
+  useEffect(() => {
+    if (!introductionScreens?.length) {
+      onExitIntroduction();
+    }
+  }, [introductionScreens, onExitIntroduction]);
+  return introductionScreens?.length ? /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-introduction", children: [
+    /* @__PURE__ */ jsx(
+      StepProgressIndicator,
+      {
+        activeStepIndex: activeIndex + 1,
+        stepsCount: introductionScreens.length
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-introduction__skip", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => {
+          userEvents.addPageEvent("Clicked button", {
+            ...pageEventDetails,
+            actionType: "skip",
+            label: "goToOverviewFromIntroduction"
+          });
+          onExitIntroduction();
+        },
+        variant: "link",
+        children: t(($) => $["goToOverviewFromIntroduction"], { ns: "introduction" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      IntroductionScreen,
+      {
+        introductionScreen: introductionScreens[activeIndex],
+        legalEntity,
+        number: activeIndex > 0 && activeIndex < introductionScreens.length - 1 ? activeIndex : void 0
+      },
+      introductionScreens[activeIndex]
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-introduction__nav", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: activeIndex === 0,
+          onClick: () => {
+            userEvents.addPageEvent("Clicked button", {
+              ...pageEventDetails,
+              actionType: "back",
+              label: "back"
+            });
+            setActiveIndex((currentValue) => currentValue - 1);
+          },
+          variant: "secondary",
+          children: t(($) => $["back"])
+        }
+      ),
+      activeIndex + 1 === introductionScreens.length ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            userEvents.addTaskEvent("Success", {
+              actionType: "submit",
+              label: "start"
+            });
+            onExitIntroduction();
+          },
+          children: t(($) => $["start"])
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            userEvents.addPageEvent("Clicked button", {
+              ...pageEventDetails,
+              actionType: "next",
+              label: "next"
+            });
+            setActiveIndex((currentValue) => currentValue + 1);
+          },
+          children: t(($) => $["continue"])
+        }
+      )
+    ] })
+  ] }) : null;
+};
+export {
+  Introduction,
+  IntroductionInner
+};