@adyen/adyen-platform-experience-web 1.9.0 → 1.10.1

package/dist/es/components/internal/FormFields/CurrencyInput/CurrencyInput.js

@@ -0,0 +1,92 @@
+import { jsx as I } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useRef as b, useState as $, useCallback as U, useEffect as L, useMemo as x } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import Y from "../InputBase.js";
+import z from "../../../../core/Context/useCoreContext.js";
+import { CURRENCY_INPUT_BASE_CLASS as V } from "./constants.js";
+import { useFetch as j } from "../../../../hooks/useFetch.js";
+import { formatAmount as y, getCurrencyExponent as E } from "../../../../utils/currency/main.js";
+import { useConfigContext as k } from "../../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as G } from "../../../../utils/value/constants.js";
+import { uniqueId as D } from "../../../../utils/random/uniqueId.js";
+const J = ["EUR", "GBP", "USD"], Q = (s) => {
+  const t = new Map(J.map((o, a) => [o, a]));
+  return [...s].sort((o, a) => {
+    const d = o.id.toUpperCase(), m = a.id.toUpperCase(), i = t.get(d), l = t.get(m);
+    return i !== void 0 || l !== void 0 ? i === void 0 ? 1 : l === void 0 ? -1 : i - l : d.localeCompare(m);
+  });
+}, se = ({
+  amount: s,
+  currency: t,
+  currencyItems: o,
+  hideCurrencySelector: a,
+  interactionsDisabled: d,
+  isInvalid: m = !1,
+  maxValue: i,
+  name: l,
+  onAmountChange: w,
+  onCurrencyChange: F,
+  selectedCurrencyCode: v
+}) => {
+  const P = b(t), { i18n: f } = z(), { currencies: h } = k().endpoints, [A, S] = $(s ? `${y(s, t)}` : ""), B = U(
+    (n) => {
+      const e = 1.1.toLocaleString(f.locale).match(/\d(.*?)\d/)?.[1] || ".", r = e === "." ? n : n.replace(e, "."), u = E(t);
+      return Math.trunc(+`${parseFloat(r)}e${u}`) || 0;
+    },
+    [t, f.locale]
+  );
+  L(() => {
+    t !== P.current && (S(s ? `${y(s, t)}` : ""), P.current = t);
+  }, [s, t]);
+  const q = (n) => {
+    let e = n.currentTarget.value.trim();
+    const r = 1.1.toLocaleString(f.locale).match(/\d(.*?)\d/)?.[1] || ".", u = e.split(r);
+    if (u.length === 2) {
+      const g = E(t), C = u[0];
+      let c = u[1];
+      c.length >= g && (c = c.substring(0, g), e = C + r + c, n.currentTarget.value = e);
+    }
+    if (e.endsWith(r) && (e = e.slice(0, -r.length), n.currentTarget.value = e), typeof i == "number") {
+      const g = r === "." ? e : e.replace(r, "."), C = parseFloat(g);
+      if (Number.isFinite(C) && C > i) {
+        const c = E(t), N = i.toFixed(c);
+        e = r === "." ? N : N.replace(".", r), n.currentTarget.value = e;
+      }
+    }
+    S(e), w(B(e));
+  }, p = j({
+    fetchOptions: { enabled: !!h && !o?.length },
+    queryFn: U(async () => h?.(G), [h])
+  }), T = x(() => (p.data?.data ?? []).map((r) => ({
+    id: r,
+    name: r
+  })), [p.data]), R = x(() => {
+    const n = o?.length ? o : T;
+    return Q(n);
+  }, [T, o]), _ = b(D()), M = b(D()), O = x(() => a ? {} : {
+    onDropdownInput: F,
+    dropdown: {
+      items: R,
+      value: v,
+      readonly: p.isFetching
+    }
+  }, [a, R, v, p.isFetching, F]);
+  return /* @__PURE__ */ I("div", { className: "adyen-pe-currency-input__container", children: /* @__PURE__ */ I("label", { htmlFor: _.current, "aria-labelledby": M.current, children: /* @__PURE__ */ I(
+    Y,
+    {
+      ...O,
+      type: "number",
+      className: V,
+      disabled: d || p.isFetching,
+      isInvalid: m,
+      lang: f.locale,
+      min: 0,
+      name: l,
+      onInput: q,
+      uniqueId: _.current,
+      value: A
+    }
+  ) }) });
+};
+export {
+  se as CurrencyInput
+};

package/dist/es/components/internal/FormFields/CurrencyInput/constants.js

@@ -0,0 +1,4 @@
+const e = "adyen-pe-currency-input";
+export {
+  e as CURRENCY_INPUT_BASE_CLASS
+};

package/dist/es/components/internal/FormFields/FieldError/FieldError.js

@@ -0,0 +1,11 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+/* empty css                */
+import a from "classnames";
+import { Icon as s } from "../../Icon/Icon.js";
+const d = ({ id: e, errorMessage: o, withTopMargin: i }) => /* @__PURE__ */ r("div", { className: a("adyen-pe-field-error", { "adyen-pe-field-error--with-top-margin": i }), id: e, children: [
+  /* @__PURE__ */ r(s, { name: "cross-circle-fill", className: "adyen-pe-field-error__icon" }),
+  /* @__PURE__ */ r("span", { className: "adyen-pe-field-error__message", children: o })
+] });
+export {
+  d as FieldError
+};

package/dist/es/components/internal/FormFields/FileInput/FileInput.js

@@ -1,53 +1,56 @@
-import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import S from "../../../../core/Context/useCoreContext.js";
-import { useState as y, useRef as M, useCallback as f, useMemo as T, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { UploadedFile as w } from "./components/UploadedFile.js";
-import { Dropzone as O } from "./components/Dropzone.js";
-import { validationErrors as u, BASE_CLASS as Y } from "./constants.js";
+import { jsx as u } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import A from "../../../../core/Context/useCoreContext.js";
+import { useState as M, useRef as R, useCallback as a, useMemo as D, useEffect as h } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { UploadedFile as y } from "./components/UploadedFile.js";
+import { Dropzone as C } from "./components/Dropzone.js";
+import { validationErrors as i, BASE_CLASS as N } from "./constants.js";
 /* empty css               */
-import { fixedForwardRef as g } from "../../../../utils/preact/fixedForwardRef.js";
-import { isFunction as k } from "../../../../utils/value/is.js";
-const Q = g(({ onChange: i, mapError: l, onDelete: n, ...m }, I) => {
-  const [r, d] = y([]), p = M(r), c = r[0], { i18n: o } = S(), { disabled: s } = m, L = f(
-    (e) => {
-      switch (e) {
-        case u.DISALLOWED_FILE_TYPE:
-          return o.get("common.inputs.file.errors.disallowedType");
-        case u.FILE_REQUIRED:
-          return o.get("common.inputs.file.errors.required");
-        case u.TOO_MANY_FILES:
-          return o.get("common.inputs.file.errors.tooMany");
-        case u.VERY_LARGE_FILE:
-          return o.get("common.inputs.file.errors.tooLarge");
+import { fixedForwardRef as O } from "../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as T } from "../../../../utils/value/is.js";
+const z = O(({ onChange: m, mapError: n, onDelete: c, ...f }, I) => {
+  const [e, d] = M([]), p = R(e), l = e[0], { i18n: r } = A(), { disabled: s } = f, L = a(
+    (o) => {
+      switch (o) {
+        case i.DISALLOWED_FILE_TYPE:
+          return r.get("common.inputs.file.errors.disallowedType");
+        case i.FILE_REQUIRED:
+          return r.get("common.inputs.file.errors.required");
+        case i.TOO_MANY_FILES:
+          return r.get("common.inputs.file.errors.tooMany");
+        case i.VERY_LARGE_FILE:
+          return r.get("common.inputs.file.errors.tooLarge");
+        case i.MAX_DIMENSIONS:
+          return r.get("common.inputs.file.errors.maxDimensions");
       }
+      return "";
     },
-    [o]
-  ), _ = T(() => k(l) ? l : L, [l]), x = f(
-    (e) => {
+    [r]
+  ), _ = D(() => T(n) ? n : L, [n]), S = a(
+    (o) => {
       s || (d((t) => {
-        const E = t.findIndex((R) => R === e);
+        const E = t.findIndex((x) => x === o);
         if (E < 0)
           return t;
         const [...F] = t;
         return F.splice(E, 1), F;
-      }), n == null || n());
+      }), c?.());
     },
-    [s, n]
-  ), A = f(
-    (e) => {
-      s || d((t) => t.length === 0 && e.length === 0 ? t : e);
+    [s, c]
+  ), g = a(
+    (o) => {
+      s || d((t) => t.length === 0 && o.length === 0 ? t : o);
     },
     [s]
   );
-  return b(() => {
-    p.current !== r && (p.current = r, i == null || i([...r]));
-  }, [r, i]), /* @__PURE__ */ a("div", {
-    className: Y,
+  return h(() => {
+    p.current !== e && (p.current = e, m?.([...e]));
+  }, [e, m]), /* @__PURE__ */ u("div", {
+    className: N,
     // prettier-ignore
-    children: c ? /* @__PURE__ */ a(w, { disabled: s, file: c, deleteFile: () => x(c) }) : /* @__PURE__ */ a(O, { ...m, ref: I, mapError: _, uploadFiles: A })
+    children: l ? /* @__PURE__ */ u(y, { disabled: s, file: l, deleteFile: () => S(l) }) : /* @__PURE__ */ u(C, { ...f, ref: I, mapError: _, uploadFiles: g })
   });
 });
 export {
-  Q as FileInput,
-  Q as default
+  z as FileInput,
+  z as default
 };

package/dist/es/components/internal/FormFields/FileInput/components/Dropzone.js

@@ -1,142 +1,155 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import x from "classnames";
-import { useState as h, useMemo as Q, useCallback as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../Typography/Typography.js";
-import { useTrackedRef as X } from "../../../../../hooks/useTrackedRef.js";
-import Z from "../../../../../core/Context/useCoreContext.js";
-import { DEFAULT_MAX_FILE_SIZE as A, DEFAULT_FILE_TYPES as H, validationErrors as i, BASE_CLASS as t } from "../constants.js";
-import { TypographyVariant as O, TypographyElement as $ } from "../../../Typography/types.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import T from "classnames";
+import { useState as F, useMemo as H, useCallback as w } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../Typography/Typography.js";
+import { useTrackedRef as J } from "../../../../../hooks/useTrackedRef.js";
+import K from "../../../../../core/Context/useCoreContext.js";
+import { DEFAULT_MAX_FILE_SIZE as A, DEFAULT_FILE_TYPES as ee, validationErrors as l, BASE_CLASS as a } from "../constants.js";
+import { TypographyVariant as O, TypographyElement as R } from "../../../Typography/types.js";
 /* empty css                */
-import { fixedForwardRef as J } from "../../../../../utils/preact/fixedForwardRef.js";
-import { getUploadedFilesFromSource as K } from "../../../../../utils/file/upload.js";
-import { Icon as v } from "../../../Icon/Icon.js";
-import { Fragment as ee } from "../../../../../external/preact/dist/preact.module.js";
-import { uniqueId as re } from "../../../../../utils/random/uniqueId.js";
-import { isFunction as R } from "../../../../../utils/value/is.js";
+import { fixedForwardRef as re } from "../../../../../utils/preact/fixedForwardRef.js";
+import { getUploadedFilesFromSource as oe } from "../../../../../utils/file/upload.js";
+import { Icon as D } from "../../../Icon/Icon.js";
+import { Fragment as te } from "../../../../../external/preact/dist/preact.module.js";
+import { uniqueId as ae } from "../../../../../utils/random/uniqueId.js";
+import { isFunction as $ } from "../../../../../utils/value/is.js";
 const o = {
-  dropzone: `${t}__dropzone`,
-  dropzoneDisabled: `${t}__dropzone--disabled`,
-  dropzoneDragOver: `${t}__dropzone--dragover`,
-  dropzoneError: `${t}__dropzone--error`,
-  label: `${t}__label`,
-  labelDefault: `${t}__label-default-content`,
-  labelIcon: `${t}__label-icon`,
-  labelText: `${t}__label-text`,
-  error: `${t}__error`,
-  errorIcon: `${t}__error-icon`,
-  errorText: `${t}__error-text`
-}, ge = J((C, Y) => {
+  dropzone: `${a}__dropzone`,
+  dropzoneDisabled: `${a}__dropzone--disabled`,
+  dropzoneDragOver: `${a}__dropzone--dragover`,
+  dropzoneError: `${a}__dropzone--error`,
+  label: `${a}__label`,
+  labelDefault: `${a}__label-default-content`,
+  labelIcon: `${a}__label-icon`,
+  labelText: `${a}__label-text`,
+  error: `${a}__error`,
+  errorIcon: `${a}__error-icon`,
+  errorText: `${a}__error-text`
+}, Fe = re((M, C) => {
   const {
-    id: F,
-    name: f,
+    id: v,
+    name: Y,
     children: q,
-    disabled: s = !1,
-    required: w = !1,
-    maxFileSize: c = A,
-    allowedFileTypes: _ = H,
-    mapError: I,
-    uploadFiles: D
-  } = C, { i18n: y } = Z(), [p, M] = h(""), [m, b] = h(), [V, E] = h(!1), u = !!p, B = f == null ? void 0 : f.trim(), L = Q(() => F || re(), [F]), g = X(Y), P = (e) => {
-    var n;
-    Array.from(((n = e.dataTransfer) == null ? void 0 : n.types) ?? []).some((l) => l === "Files") && (e.preventDefault(), E(!0));
-  }, k = (e) => {
+    disabled: c = !1,
+    required: P = !1,
+    maxDimensions: d,
+    maxFileSize: u = A,
+    allowedFileTypes: g = ee,
+    mapError: y,
+    uploadFiles: L
+  } = M, { i18n: b } = K(), [f, U] = F(""), [h, S] = F(), [V, E] = F(!1), _ = !!f, B = Y?.trim(), z = H(() => v || ae(), [v]), I = J(C), k = (e) => {
+    Array.from(e.dataTransfer?.types ?? []).some((i) => i === "Files") && (e.preventDefault(), E(!0));
+  }, X = (e) => {
     e.preventDefault(), E(!1);
-  }, U = (e) => {
-    e.preventDefault(), E(!1), z(e.dataTransfer);
+  }, j = (e) => {
+    e.preventDefault(), E(!1), N(e.dataTransfer);
   }, G = (e) => {
-    m && b(void 0), z(e.target);
+    h && S(void 0), N(e.target);
   }, W = async (e) => {
-    var r;
-    e.target !== document.activeElement && ((r = e.target) == null || r.checkValidity());
-  }, j = async (e) => {
-    !p && e.target.validity.valueMissing && d(i.FILE_REQUIRED);
-  }, d = S(
+    e.target !== document.activeElement && e.target?.checkValidity();
+  }, Q = async (e) => {
+    !f && e.target.validity.valueMissing && m(l.FILE_REQUIRED);
+  }, m = w(
     (e) => {
-      const r = g.current;
+      const r = I.current;
       if (r) {
-        const n = r.required;
-        r.required = !1, r.setCustomValidity(e), M(r.validationMessage ?? ""), r.required = n;
+        const i = r.required;
+        r.required = !1, r.setCustomValidity(e), U(r.validationMessage ?? ""), r.required = i;
       }
     },
-    [g]
-  ), z = S(
-    (e) => {
-      const r = K(e);
+    [I]
+  ), Z = async (e) => new Promise((r, i) => {
+    const s = new Image(), n = URL.createObjectURL(e);
+    s.src = n, s.onerror = i, s.onload = function() {
+      r({ width: s.width, height: s.height });
+    };
+  }), N = w(
+    async (e) => {
+      const r = oe(e);
       if (r.length > 1)
-        return d(i.TOO_MANY_FILES);
+        return m(l.TOO_MANY_FILES);
       try {
-        const n = r.filter((l) => {
-          if (!_.includes(l.type))
-            throw i.DISALLOWED_FILE_TYPE;
-          const T = R(c) ? c(l.type) ?? A : c;
-          if (l.size > T)
-            throw b({ type: l.type, limit: T }), i.VERY_LARGE_FILE;
+        const s = (await Promise.all(
+          r.map(async (n) => {
+            if (!d || !d?.width || !d?.height) return n;
+            const p = await Z(n);
+            if (d?.width !== p.width || d?.height !== p.height)
+              throw l.MAX_DIMENSIONS;
+            return n;
+          })
+        )).filter((n) => {
+          if (!g.includes(n.type))
+            throw l.DISALLOWED_FILE_TYPE;
+          const p = $(u) ? u(n.type) ?? A : u;
+          if (n.size > p)
+            throw S({ type: n.type, limit: p }), l.VERY_LARGE_FILE;
           return !0;
         });
-        d(""), D(n);
-      } catch (n) {
-        switch (n) {
-          case i.DISALLOWED_FILE_TYPE:
-          case i.VERY_LARGE_FILE:
-            return d(n);
+        m(""), L(s);
+      } catch (i) {
+        switch (i) {
+          case l.DISALLOWED_FILE_TYPE:
+          case l.VERY_LARGE_FILE:
+          case l.MAX_DIMENSIONS:
+            return m(i);
         }
       }
     },
-    [_, c, d, D]
+    [g, u, m, L, d]
   );
-  return /* @__PURE__ */ a(ee, { children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ t(te, { children: [
+    /* @__PURE__ */ t(
       "div",
       {
         role: "region",
-        className: x(o.dropzone, {
-          [o.dropzoneDisabled]: s,
+        className: T(o.dropzone, {
+          [o.dropzoneDisabled]: c,
           [o.dropzoneDragOver]: V,
-          [o.dropzoneError]: u
+          [o.dropzoneError]: _
         }),
-        onDragOver: s ? void 0 : P,
-        onDragLeave: s ? void 0 : k,
-        onDrop: s ? void 0 : U,
+        onDragOver: c ? void 0 : k,
+        onDragLeave: c ? void 0 : X,
+        onDrop: c ? void 0 : j,
         children: [
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "input",
             {
               type: "file",
               className: "adyen-pe-visually-hidden",
-              id: L,
-              ref: g,
+              id: z,
+              ref: I,
               name: B,
-              disabled: s,
-              required: w,
-              accept: String(_),
+              disabled: c,
+              required: P,
+              accept: String(g),
               onBlur: W,
               onChange: G,
-              onInvalid: j,
-              "aria-invalid": u,
+              onInvalid: Q,
+              "aria-invalid": _,
               "data-testId": "dropzone-input"
             }
           ),
-          /* @__PURE__ */ a("label", { className: o.label, htmlFor: L, children: q ?? /* @__PURE__ */ a("div", {
-            className: x(o.labelDefault),
+          /* @__PURE__ */ t("label", { className: o.label, htmlFor: z, children: q ?? /* @__PURE__ */ t("div", {
+            className: T(o.labelDefault),
             // prettier-ignore
             children: [
-              u ? /* @__PURE__ */ a(v, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(v, { name: "upload", className: o.labelIcon }),
-              /* @__PURE__ */ a(N, { className: o.labelText, el: $.SPAN, variant: O.BODY, stronger: !0, children: y.get("common.inputs.file.labels.default") })
+              _ ? /* @__PURE__ */ t(D, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ t(D, { name: "upload", className: o.labelIcon }),
+              /* @__PURE__ */ t(x, { className: o.labelText, el: R.SPAN, variant: O.BODY, stronger: !0, children: b.get("common.inputs.file.labels.default") })
             ]
           }) })
         ]
       }
     ),
-    u && /* @__PURE__ */ a("div", { className: o.error, children: [
-      /* @__PURE__ */ a(v, { name: "cross-circle-fill", className: o.errorIcon }),
-      /* @__PURE__ */ a(N, { className: o.errorText, el: $.SPAN, variant: O.BODY, children: R(I) ? I(
-        p,
-        m ? { size: m.limit, type: m.type } : void 0
-      ) : y.get(p) })
+    _ && /* @__PURE__ */ t("div", { className: o.error, children: [
+      /* @__PURE__ */ t(D, { name: "cross-circle-fill", className: o.errorIcon }),
+      /* @__PURE__ */ t(x, { className: o.errorText, el: R.SPAN, variant: O.BODY, children: $(y) ? y(
+        f,
+        h ? { size: h.limit, type: h.type } : void 0
+      ) : b.get(f) })
     ] })
   ] });
 });
 export {
-  ge as Dropzone,
-  ge as default
+  Fe as Dropzone,
+  Fe as default
 };

package/dist/es/components/internal/FormFields/FileInput/constants.js

@@ -2,7 +2,9 @@ const _ = "adyen-pe-file-input", e = ["application/pdf", "image/jpeg", "image/jp
   DISALLOWED_FILE_TYPE: "disallowed_file_type",
   FILE_REQUIRED: "file_required",
   TOO_MANY_FILES: "too_many_files",
-  VERY_LARGE_FILE: "very_large_file"
+  VERY_LARGE_FILE: "very_large_file",
+  MAX_FILE_SIZE: "max_file_size",
+  MAX_DIMENSIONS: "max_dimensions"
 };
 export {
   _ as BASE_CLASS,

package/dist/es/components/internal/FormFields/FileInput/helpers/defaultMapError.js

@@ -0,0 +1,20 @@
+import { validationErrors as r } from "../constants.js";
+const s = (e) => {
+  switch (e) {
+    case r.DISALLOWED_FILE_TYPE:
+      return "common.inputs.file.errors.disallowedType";
+    case r.FILE_REQUIRED:
+      return "common.inputs.file.errors.required";
+    case r.TOO_MANY_FILES:
+      return "common.inputs.file.errors.tooMany";
+    case r.VERY_LARGE_FILE:
+      return "common.inputs.file.errors.tooLarge";
+    case r.MAX_DIMENSIONS:
+      return "common.inputs.file.errors.maxDimensions";
+  }
+  return "common.inputs.file.errors.default";
+};
+export {
+  s as default,
+  s as defaultMapErrors
+};