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

package/dist/fieldConfigurations-Bct_fXIF.js

@@ -0,0 +1,458 @@
+;
+{
+  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] = "e591264f-1b15-46c2-99b5-c5fdbfc18102", e._sentryDebugIdIdentifier = "sentry-dbid-e591264f-1b15-46c2-99b5-c5fdbfc18102");
+  } catch (e) {
+  }
+}
+;
+import { c as useLegalEntity, R as ROOT_LE, X as useExperimentsContext, am as getCapabilityProblems, g as getLegalEntityCountry, N as createLogger, b as useApiContext, an as hasText, ao as isValidMinLength, ap as matchesRegex, a9 as isEmpty, aq as NO_ALPHABET_REGEX, ar as EMOJI_REGEX, as as hasRepeatedCharacters, at as isInvalidName, au as OTHER_ENTITIES_VALID_CHAR_REGEX, av as LATIN_SPACE_MARK_PUNCTUATION_REGEX, aw as standardKatakanaValidator, ax as standardKanjiValidator, U as useAnalyticsContext, a as useTranslation, L as Loader } from "./StoreProvider-_YW7glEh.js";
+import { useContext, useMemo, useRef, useState, useEffect } from "preact/hooks";
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { createContext } from "preact";
+import { a as Alert } from "./Alert-JxANwoOi.js";
+import cx from "classnames";
+import { d as debouncedInputEvent } from "./analytics-BY--2-JY.js";
+import { c as convertFullToHalf } from "./InputText-CufyDwPI.js";
+import { Suspense } from "preact/compat";
+import { b as useId } from "./useForm-C66YXYZG.js";
+import { R as Radio } from "./CountryField-ziRVRc5r.js";
+const useCapabilityProblems = () => {
+  const { data: rootLegalEntity } = useLegalEntity(ROOT_LE);
+  const { isExperimentEnabled } = useExperimentsContext();
+  return rootLegalEntity ? getCapabilityProblems(
+    rootLegalEntity,
+    getLegalEntityCountry(rootLegalEntity),
+    isExperimentEnabled
+  ) : void 0;
+};
+const getProblemsForEntity = (capabilityProblems, entityType, entityId) => capabilityProblems[entityType]?.[entityId];
+const TrustedFieldsProviders = {
+  SINGPASS: "singpass",
+  KOMPANY: "kompany"
+};
+const IgnoreLocalStorageContext = createContext(false);
+const useIgnoreLocalStorage = () => useContext(IgnoreLocalStorageContext);
+const logger$1 = createLogger();
+const useLocalStorage = (key, defaultValue, options) => {
+  const { serializer, parser, syncData } = useMemo(
+    () => ({
+      serializer: JSON.stringify,
+      parser: JSON.parse,
+      syncData: true,
+      ...options
+    }),
+    [options]
+  );
+  const ignoreLocalStorage = useIgnoreLocalStorage() || typeof window === "undefined";
+  const rawValueRef = useRef(null);
+  const [value, setValue] = useState(() => {
+    if (ignoreLocalStorage) return defaultValue;
+    try {
+      rawValueRef.current = window.localStorage.getItem(key);
+      const res = rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
+      return res;
+    } catch (err) {
+      logger$1.error(err);
+      return defaultValue;
+    }
+  });
+  useEffect(() => {
+    if (ignoreLocalStorage) return;
+    const updateLocalStorage = () => {
+      if (value !== void 0) {
+        const newValue = serializer(value);
+        const oldValue = rawValueRef.current;
+        rawValueRef.current = newValue;
+        window.localStorage.setItem(key, newValue);
+        window.dispatchEvent(
+          new StorageEvent("storage", {
+            storageArea: window.localStorage,
+            url: window.location.href,
+            key,
+            newValue,
+            oldValue
+          })
+        );
+      } else {
+        window.localStorage.removeItem(key);
+        window.dispatchEvent(
+          new StorageEvent("storage", {
+            storageArea: window.localStorage,
+            url: window.location.href,
+            key
+          })
+        );
+      }
+    };
+    try {
+      updateLocalStorage();
+    } catch (err) {
+      logger$1.error(err);
+    }
+  }, [value, ignoreLocalStorage]);
+  useEffect(() => {
+    if (!syncData) return;
+    const handleStorageChange = (event) => {
+      if (event.key !== key || event.storageArea !== window.localStorage) return;
+      try {
+        if (event.newValue !== rawValueRef.current) {
+          rawValueRef.current = event.newValue;
+          setValue(event.newValue ? parser(event.newValue) : void 0);
+        }
+      } catch (err) {
+        logger$1.error(err);
+      }
+    };
+    if (ignoreLocalStorage) return;
+    window.addEventListener("storage", handleStorageChange);
+    return () => window.removeEventListener("storage", handleStorageChange);
+  }, [key, syncData, ignoreLocalStorage]);
+  return [value, setValue];
+};
+const getAccountHolderStorageKey = (legalEntityId) => `ACCOUNT_HOLDER-${legalEntityId}`;
+const useAccountHolder = () => {
+  const { rootLegalEntityId } = useApiContext();
+  const [accountHolderFromLocalStorage, setAccountHolderIntoLocalStorage] = useLocalStorage(getAccountHolderStorageKey(rootLegalEntityId.value), void 0);
+  return {
+    accountHolder: accountHolderFromLocalStorage,
+    setAccountHolder: setAccountHolderIntoLocalStorage
+  };
+};
+const validateNotEmptyOnBlur = {
+  modes: ["blur"],
+  validate: (val) => !isEmpty(val),
+  errorMessage: "fieldIsRequired"
+};
+const validateLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(NO_ALPHABET_REGEX, input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateJaHaniLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => standardKanjiValidator(input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateJaKanaLegalCompanyName = [
+  {
+    modes: ["blur"],
+    validate: hasText,
+    errorMessage: "fieldIsRequired"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => standardKatakanaValidator(input),
+    errorMessage: "nameMustContainLetters"
+  },
+  {
+    modes: ["blur"],
+    validate: (input) => !matchesRegex(EMOJI_REGEX, input) && !hasRepeatedCharacters(input) && isValidMinLength(input, 3) && !isInvalidName(input) && matchesRegex(OTHER_ENTITIES_VALID_CHAR_REGEX, input),
+    errorMessage: "checkForTypos"
+  }
+];
+const validateLatinSpaceMarkPunctuationOnlyOnBlur = {
+  modes: ["blur"],
+  validate: (input) => matchesRegex(LATIN_SPACE_MARK_PUNCTUATION_REGEX, input),
+  errorMessage: "kanjiAndKanaCharactersAreNotAllowed"
+};
+const validatePatternOnBlur = (pattern) => ({
+  modes: ["blur"],
+  validate: (val) => !!val && pattern.test(val)
+});
+function ContextGuidance({
+  title,
+  content,
+  titleId,
+  contentId,
+  trackingParams
+}) {
+  const userEvents = useAnalyticsContext();
+  const onGuidanceToggle = (status) => {
+    userEvents.addFieldEvent("Clicked accordion", {
+      actionType: status,
+      field: "context guidance",
+      label: titleId,
+      content: contentId,
+      ...trackingParams
+    });
+  };
+  return /* @__PURE__ */ jsx(Alert, { title, type: "collapsible", variant: "info", onToggle: onGuidanceToggle, children: content });
+}
+const logger = createLogger();
+function TextArea(props) {
+  const {
+    autoCorrect,
+    isInvalid,
+    isValid,
+    readonly = null,
+    spellCheck,
+    disabled,
+    maxLength,
+    className,
+    trimOnBlur,
+    enableTracking = false,
+    name,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-labelledby": ariaLabelledBy
+  } = props;
+  const { t } = useTranslation("ui");
+  const userEvents = useAnalyticsContext();
+  const [value, setValue] = useState("");
+  if (Object.prototype.hasOwnProperty.call(props, "onChange")) {
+    logger.error("Error: Form fields that rely on InputBase may not have an onChange property");
+  }
+  const handleInput = (e) => {
+    if (enableTracking) {
+      debouncedInputEvent({
+        actionType: "input",
+        field: name
+      });
+    }
+    e.currentTarget.value = convertFullToHalf(e.currentTarget.value);
+    setValue(e.currentTarget.value);
+    props?.onInput?.(e);
+  };
+  const handleBlur = (e) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "blur",
+        field: name
+      });
+    }
+    props?.onBlurHandler?.(e);
+    if (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--textarea", className, {
+    "adyen-kyc-input--invalid": isInvalid,
+    "adyen-kyc-field--valid": isValid,
+    "adyen-kyc-input--disabled": disabled
+  });
+  const charactersLeft = maxLength - value.length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        className: inputClassNames,
+        readOnly: readonly,
+        spellCheck,
+        autoCorrect,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": ariaInvalid,
+        "aria-labelledby": ariaLabelledBy,
+        ...disabled && { "aria-disabled": true },
+        onInput: handleInput,
+        onBlur: handleBlur,
+        onFocus: handleFocus
+      }
+    ),
+    !isInvalid && maxLength && charactersLeft >= 0 ? /* @__PURE__ */ jsx("span", { className: "adyen-kyc-input__counter", children: t(($) => $["xCharactersLeft"], { charactersLeft }) }) : null
+  ] });
+}
+const Image = ({
+  lazyLoadedImage,
+  className
+}) => {
+  const LazyLoadedImageComponent = lazyLoadedImage;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loader, {}), children: /* @__PURE__ */ jsx(LazyLoadedImageComponent, { className, "aria-hidden": true }) });
+};
+const RadioCard = ({
+  optionId,
+  optionName,
+  optionDescription,
+  optionSubtitle,
+  name,
+  isInvalid,
+  isSelected,
+  onSelect,
+  classNames,
+  disabled,
+  loading,
+  icon,
+  body,
+  footer,
+  floatingRadio
+}) => {
+  const id = useId("radio");
+  const { t } = useTranslation("common");
+  const elementIds = {
+    label: `${id}-label`,
+    description: `${id}-description`,
+    subtitle: `${id}-subtitle`
+  };
+  const ariaDescribedBy = `${optionSubtitle ? elementIds.subtitle : ""} ${optionDescription || body ? elementIds.description : ""}`.trim();
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      "data-testId": optionId,
+      className: cx([
+        "adyen-kyc-radio-card",
+        classNames?.label,
+        { "adyen-kyc-radio-card--disabled": disabled }
+      ]),
+      children: [
+        icon && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__icon", classNames?.icon), "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-radio-card__content", children: [
+          /* @__PURE__ */ jsx("div", { className: "adyen-kyc-radio-card__header adyen-kyc-u-display-flex adyen-kyc-u-align-items-center", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx([
+                "adyen-kyc-radio-group-card__label",
+                classNames?.header,
+                { "adyen-kyc-radio-group-card__label--invalid": isInvalid }
+              ]),
+              children: [
+                optionSubtitle && /* @__PURE__ */ jsxs("div", { id: elementIds.subtitle, className: "adyen-kyc-radio-group-card__subtitle", children: [
+                  t(($) => $[optionSubtitle]) ?? optionSubtitle,
+                  /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: "." })
+                ] }),
+                /* @__PURE__ */ jsx("span", { id: elementIds.label, children: t(($) => $[optionName]) ?? optionName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: elementIds.description,
+              className: cx("adyen-kyc-radio-card__body", classNames?.body),
+              children: body ?? (optionDescription && t(($) => $[optionDescription])) ?? optionDescription
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { className: cx("adyen-kyc-radio-card__footer", classNames?.footer), children: footer })
+        ] }),
+        loading ? /* @__PURE__ */ jsx("span", { className: "adyen-kyc-radio-card__loading-icon", children: /* @__PURE__ */ jsx(Loader, { size: "small", dot: true }) }) : /* @__PURE__ */ jsx(
+          Radio,
+          {
+            id,
+            "aria-describedby": ariaDescribedBy,
+            "aria-labelledby": elementIds.label,
+            checked: isSelected,
+            groupName: name,
+            onClick: onSelect,
+            value: optionId,
+            disabled,
+            className: cx({ "adyen-kyc-radio-group-card__radio--floating": floatingRadio })
+          }
+        )
+      ]
+    },
+    optionId
+  );
+};
+const RadioGroupCard = ({
+  options,
+  name,
+  onSelect,
+  selected,
+  isInvalid,
+  className,
+  optionId,
+  optionName,
+  optionDescription,
+  optionSubtitle,
+  optionClassNames,
+  renderOptionIcon,
+  renderOptionBody,
+  renderOptionFooter,
+  isOptionDisabled,
+  floatingRadio,
+  enableTracking = false
+}) => {
+  const userEvents = useAnalyticsContext();
+  const handleSelect = (option) => {
+    if (enableTracking) {
+      userEvents.addFieldEvent("Interacted with form field", {
+        actionType: "input",
+        field: name,
+        returnValue: typeof option === "string" ? option : void 0
+      });
+    }
+    onSelect(option);
+  };
+  return /* @__PURE__ */ jsx("div", { className: className ?? "adyen-kyc-radio-group-card", children: options.map((option) => /* @__PURE__ */ jsx(
+    RadioCard,
+    {
+      optionId: optionId(option),
+      optionName: optionName(option),
+      optionDescription: optionDescription?.(option),
+      optionSubtitle: optionSubtitle?.(option),
+      isInvalid,
+      isSelected: selected === option,
+      onSelect: () => handleSelect(option),
+      name,
+      classNames: optionClassNames?.(option),
+      icon: renderOptionIcon?.(option),
+      body: renderOptionBody?.(option),
+      footer: renderOptionFooter?.(option),
+      disabled: isOptionDisabled?.(option),
+      floatingRadio
+    },
+    optionId(option)
+  )) });
+};
+const resolveFieldMetadata = (countryEntry, params, defaultMetadata) => {
+  if (typeof countryEntry === "object") {
+    return countryEntry;
+  }
+  if (typeof countryEntry === "function") {
+    return countryEntry(params);
+  }
+  return defaultMetadata;
+};
+export {
+  ContextGuidance as C,
+  Image as I,
+  RadioGroupCard as R,
+  TextArea as T,
+  useAccountHolder as a,
+  useCapabilityProblems as b,
+  validateNotEmptyOnBlur as c,
+  validateLatinSpaceMarkPunctuationOnlyOnBlur as d,
+  TrustedFieldsProviders as e,
+  validatePatternOnBlur as f,
+  getProblemsForEntity as g,
+  validateJaKanaLegalCompanyName as h,
+  validateJaHaniLegalCompanyName as i,
+  resolveFieldMetadata as r,
+  useLocalStorage as u,
+  validateLegalCompanyName as v
+};

package/dist/form-rules-DhbF2mY4.js

@@ -0,0 +1,13 @@
+;
+{
+  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] = "61ce024f-93e3-46b9-9c46-7202c91ce26e", e._sentryDebugIdIdentifier = "sentry-dbid-61ce024f-93e3-46b9-9c46-7202c91ce26e");
+  } catch (e) {
+  }
+}
+;
+const createFormRules = (rules) => rules;
+export {
+  createFormRules as c
+};