@adyen/adyen-platform-experience-web 1.1.0 → 1.2.0

package/dist/es/components/internal/DataGrid/hooks/useInteractiveDataGrid.js

@@ -1,84 +1,77 @@
 import { useReducer as I, useCallback as a } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import p from "../../../../hooks/useReflex.js";
 import { InteractionKeyCode as s } from "../../../types.js";
-import { INITIAL_STATE as p } from "../DataGrid.js";
-import R from "../../../../hooks/useReflex/useReflex.js";
-const T = ({
-  totalRows: o
-}) => {
-  const [i, x] = I((e, t) => {
-    const n = o;
-    if (n > 1) {
-      const d = t.index;
-      if (d < n && d >= 0)
-        return t.type === "ACTIVE" ? Object.freeze({
-          ...e,
-          index: t.index ?? 0,
-          activeIndex: t.index
-        }) : Object.freeze({
-          ...e,
-          index: t.index ?? 0,
-          activeIndex: -1
-        });
-    }
-    return e;
-  }, p), r = R(a((e) => {
-    var n;
-    if (!(e instanceof Element))
-      return;
-    const t = Number((n = e.dataset) == null ? void 0 : n.index);
-    i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
-  }, [i.activeIndex, i.index])), c = a((e) => {
-    var n, d;
-    if (!(((n = e.target) == null ? void 0 : n.getAttribute("role")) === "row")) {
-      e.code === s.ARROW_LEFT && x({
-        type: "ACTIVE",
-        index: i.index
-      });
-      return;
-    }
-    switch (e.code) {
-      case s.ARROW_DOWN:
-      case s.ARROW_UP:
-        x({
-          type: "ACTIVE",
-          index: e.code === s.ARROW_DOWN ? i.index + 1 : i.index - 1
-        });
-        break;
-      case s.HOME:
-        x({
-          type: "ACTIVE",
-          index: 0
-        });
-        break;
-      case s.END:
-        x({
+import { INITIAL_STATE as R } from "../DataGrid.js";
+const T = ({ totalRows: x }) => {
+  const [i, o] = I(
+    (e, t) => {
+      const n = x;
+      if (n > 1) {
+        const d = t.index;
+        if (d < n && d >= 0)
+          return t.type === "ACTIVE" ? Object.freeze({ ...e, index: t.index ?? 0, activeIndex: t.index }) : Object.freeze({ ...e, index: t.index ?? 0, activeIndex: -1 });
+      }
+      return e;
+    },
+    R
+  ), r = p(
+    a(
+      (e) => {
+        var n;
+        if (!(e instanceof Element))
+          return;
+        const t = Number((n = e.dataset) == null ? void 0 : n.index);
+        i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
+      },
+      [i.activeIndex, i.index]
+    )
+  ), c = a(
+    (e) => {
+      var n, d;
+      if (!(((n = e.target) == null ? void 0 : n.getAttribute("role")) === "row")) {
+        e.code === s.ARROW_LEFT && o({
           type: "ACTIVE",
-          index: o - 1
+          index: i.index
         });
-        break;
-      case s.ENTER:
-        (d = e.currentTarget) == null || d.click();
-        break;
-      default:
         return;
-    }
-    e.stopPropagation();
-  }, [o, i.index]), f = a((e) => (t) => {
-    var d;
-    (!(((d = t.target) == null ? void 0 : d.localName) === "tr") || i.index === -1) && x({
-      type: "CURRENT",
-      index: e
-    });
-  }, [i.index]);
-  return {
-    listeners: {
-      onKeyDownCapture: c,
-      onFocusCapture: f
+      }
+      switch (e.code) {
+        case s.ARROW_DOWN:
+        case s.ARROW_UP:
+          o({
+            type: "ACTIVE",
+            index: e.code === s.ARROW_DOWN ? i.index + 1 : i.index - 1
+          });
+          break;
+        case s.HOME:
+          o({
+            type: "ACTIVE",
+            index: 0
+          });
+          break;
+        case s.END:
+          o({
+            type: "ACTIVE",
+            index: x - 1
+          });
+          break;
+        case s.ENTER:
+          (d = e.currentTarget) == null || d.click();
+          break;
+        default:
+          return;
+      }
+      e.stopPropagation();
+    },
+    [x, i.index]
+  ), f = a(
+    (e) => (t) => {
+      var d;
+      (!(((d = t.target) == null ? void 0 : d.localName) === "tr") || i.index === -1) && o({ type: "CURRENT", index: e });
     },
-    ref: r,
-    activeIndex: i.activeIndex,
-    currentIndex: i.index
-  };
+    [i.index]
+  );
+  return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: r, activeIndex: i.activeIndex, currentIndex: i.index };
 };
 export {
   T as useInteractiveDataGrid

package/dist/es/components/internal/DataGrid/utils/DataGridProvider.js

@@ -1,28 +1,23 @@
-import { DataGridContext as m } from "../hooks/useDataGridContext.js";
-import { toChildArray as d } from "../../../../external/preact/dist/preact.module.js";
-import { useMemo as l, useCallback as s } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { jsx as f } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const x = ({
-  children: i
-}) => {
-  const t = l(() => /* @__PURE__ */ new Map(), []), o = s(({
-    column: r,
-    width: e
-  }) => {
-    if (t.has(r)) {
-      const n = t.get(r);
-      e > n && t.set(r, e);
-    } else
-      t.set(r, e);
-  }, [t]), a = s((r) => t.get(r), [t]);
-  return f(m.Provider, {
-    value: {
-      registerCells: o,
-      getMinWidthByColumn: a
+import { jsx as m } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { DataGridContext as d } from "../hooks/useDataGridContext.js";
+import { toChildArray as l } from "../../../../external/preact/dist/preact.module.js";
+import { useMemo as f, useCallback as s } from "../../../../external/preact/hooks/dist/hooks.module.js";
+const c = ({ children: i }) => {
+  const t = f(() => /* @__PURE__ */ new Map(), []), o = s(
+    ({ column: r, width: e }) => {
+      if (t.has(r)) {
+        const n = t.get(r);
+        e > n && t.set(r, e);
+      } else
+        t.set(r, e);
     },
-    children: d(i)
-  });
+    [t]
+  ), a = s(
+    (r) => t.get(r),
+    [t]
+  );
+  return /* @__PURE__ */ m(d.Provider, { value: { registerCells: o, getMinWidthByColumn: a }, children: l(i) });
 };
 export {
-  x as DataGridProvider
+  c as DataGridProvider
 };

package/dist/es/components/internal/DataOverviewContainer/DataOverviewContainer.js

@@ -1,8 +1,8 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { WITH_ERROR_CLASS as u } from "./constants.js";
 import { ErrorMessageDisplay as t } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
 import c from "classnames";
 import { getErrorMessage as g } from "../../utils/getErrorMessage.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as h } from "../../../external/preact/dist/preact.module.js";
 import { useAuthContext as f } from "../../../core/Auth/context.js";
 function x({
@@ -13,32 +13,32 @@ function x({
   isBalanceAccountIdWrong: i,
   onContactSupport: s
 }) {
-  const {
-    hasError: m
-  } = f();
-  return e("div", {
-    className: c(n, {
-      [u]: m
-    }),
-    children: m ? e(t, {
+  const { hasError: m } = f();
+  return /* @__PURE__ */ e("div", { className: c(n, { [u]: m }), children: m ? /* @__PURE__ */ e(
+    t,
+    {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
       message: [o, "tryRefreshingThePageOrComeBackLater"],
       refreshComponent: !0
-    }) : r ? e(t, {
+    }
+  ) : r ? /* @__PURE__ */ e(
+    t,
+    {
       withImage: !0,
       centered: !0,
       ...g(r, "weCouldNotLoadYourBalanceAccounts", s)
-    }) : i ? e(t, {
+    }
+  ) : i ? /* @__PURE__ */ e(
+    t,
+    {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
       message: [o, "theSelectedBalanceAccountIsIncorrect"]
-    }) : e(h, {
-      children: a
-    })
-  });
+    }
+  ) : /* @__PURE__ */ e(h, { children: a }) });
 }
 export {
   x as default

package/dist/es/components/internal/DataOverviewDetails/DataOverviewDetails.js

@@ -1,88 +1,68 @@
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import "./DataOverviewDetails.scss.js";
-import { useMemo as o } from "../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../core/Context/useCoreContext.js";
-import { useFetch as E } from "../../../hooks/useFetch/useFetch.js";
-import { PayoutData as P } from "../../external/PayoutDetails/components/PayoutData.js";
-import { TransactionData as C } from "../../external/TransactionDetails/components/TransactionData.js";
-import w from "../../hooks/useBalanceAccounts.js";
-import { getErrorMessage as x } from "../../utils/getErrorMessage.js";
-import { ErrorMessageDisplay as N } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import Y from "../Typography/Typography.js";
-import { TypographyVariant as B } from "../Typography/types.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useAuthContext as _ } from "../../../core/Auth/context.js";
-import { EMPTY_OBJECT as s } from "../../../utils/value/constants.js";
-const q = {
+import { useMemo as r } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as I } from "../../../hooks/useFetch.js";
+import { PayoutData as b } from "../../external/PayoutDetails/components/PayoutData.js";
+import w from "../../../hooks/useBalanceAccounts.js";
+import { getErrorMessage as E } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as P } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import x from "../Typography/Typography.js";
+import { TypographyVariant as N } from "../Typography/types.js";
+import C from "./useDataOverviewDetailsTitle.js";
+import { TransactionData as O } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
+import { useAuthContext as B } from "../../../core/Auth/context.js";
+import { EMPTY_OBJECT as d } from "../../../utils/value/constants.js";
+const F = {
   transaction: "getTransaction",
   payout: "getPayout"
-}, M = {
-  transaction: "transactionDetails",
-  payout: "payoutDetails"
-}, d = (t) => !("data" in t);
-function R(t) {
-  var f, D;
-  const a = o(() => d(t) ? null : t.data, [t]), c = o(() => d(t) ? t.id : null, [t]), {
-    i18n: h
-  } = b(), l = _().endpoints[q[t.type]], T = o(() => M[t.type], [t.type]), {
-    data: r,
-    error: i,
-    isFetching: y
-  } = E(o(() => ({
-    fetchOptions: {
-      enabled: !!c && !!l
-    },
-    queryFn: async () => {
-      const I = t.type === "transaction" ? {
-        path: {
-          transactionId: c
+}, m = (t) => !("data" in t);
+function K(t) {
+  var s;
+  const f = r(() => m(t) ? null : t.data, [t]), n = r(() => m(t) ? t.id : null, [t]), l = B().endpoints[F[t.type]], { hideTitle: D, title: h } = C(t), { data: c, error: i, isFetching: y } = I(
+    r(
+      () => ({
+        fetchOptions: { enabled: !!n && !!l },
+        queryFn: async () => {
+          const g = t.type === "transaction" ? {
+            path: { transactionId: n }
+          } : {
+            query: { balanceAccountId: n, createdAt: t.date }
+          };
+          return l(d, { ...g });
         }
-      } : {
-        query: {
-          balanceAccountId: c,
-          createdAt: t.date
-        }
-      };
-      return l(s, {
-        ...I
-      });
-    }
-  }), [c, l, t])), v = t.type === "payout" ? t.balanceAccountDescription : r == null ? void 0 : r.balanceAccountId, A = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : (f = a == null ? void 0 : a.balanceAccount) == null ? void 0 : f.description, {
-    balanceAccounts: n
-  } = w(v, !A), m = o(() => {
+      }),
+      [n, l, t]
+    )
+  ), v = t.type === "payout" ? t.id : c == null ? void 0 : c.balanceAccountId, T = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: e } = w(v, !T), u = r(() => {
     if (i)
-      return x(i, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [i, t.onContactSupport]), g = d(t) && t.type === "transaction" ? t.extraDetails : s, u = a ?? r;
-  return e("div", {
-    className: "adyen-pe-overview-details",
-    children: [!t.hideTitle && e("div", {
-      className: "adyen-pe-overview-details--title",
-      children: e(Y, {
-        variant: B.TITLE,
-        medium: !0,
-        children: h.get(T)
-      })
-    }), i && m && e("div", {
-      className: "adyen-pe-overview-details--error-container",
-      children: e(N, {
-        withImage: !0,
-        ...m
-      })
-    }), t.type === "transaction" && e(C, {
-      transaction: u ? {
-        ...u || s,
-        balanceAccount: (a == null ? void 0 : a.balanceAccount) || (n == null ? void 0 : n[0]),
-        ...g
-      } : void 0,
-      error: !!(i && m),
-      isFetching: y
-    }), t.type === "payout" && u && e(P, {
-      balanceAccountId: c,
-      payout: u,
-      balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((D = n == null ? void 0 : n[0]) == null ? void 0 : D.description),
-      isFetching: y
-    })]
-  });
+      return E(i, "weCouldNotLoadYourTransactions", t.onContactSupport);
+  }, [i, t.onContactSupport]), A = m(t) && t.type === "transaction" ? t.extraDetails : d, o = f ?? c;
+  return /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details", children: [
+    !D && /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ a(x, { variant: N.TITLE, medium: !0, children: h }) }),
+    i && u && /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ a(P, { withImage: !0, ...u }) }),
+    t.type === "transaction" && /* @__PURE__ */ a(
+      O,
+      {
+        transaction: o ? {
+          ...o || d,
+          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (e == null ? void 0 : e[0])
+        } : void 0,
+        error: !!(i && u),
+        isFetching: y,
+        extraFields: A
+      }
+    ),
+    t.type === "payout" && o && /* @__PURE__ */ a(
+      b,
+      {
+        balanceAccountId: n,
+        payout: o,
+        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((s = e == null ? void 0 : e[0]) == null ? void 0 : s.description),
+        isFetching: y
+      }
+    )
+  ] });
 }
 export {
-  R as default
+  K as default
 };

package/dist/es/components/internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "classnames";
+import { memo as l } from "../../../external/preact/compat/dist/compat.module.js";
+import { SKELETON_CLASS as i, SKELETON_LOADING as c, SKELETON_CONTAINER as S, STATUS_SKELETON as N } from "./constants.js";
+const p = ({ skeletonRowNumber: o = 0 }) => {
+  const t = m(i, c), a = Array.from({ length: o }), r = Array.from({ length: 2 });
+  return /* @__PURE__ */ e("div", { className: S, children: [
+    /* @__PURE__ */ e("div", { className: N, children: r.map((n, s) => /* @__PURE__ */ e("span", { className: t }, `status-skeleton-${s}`)) }),
+    a.map((n, s) => /* @__PURE__ */ e("span", { className: t }, `skeleton-${s}`))
+  ] });
+}, k = l(p);
+export {
+  k as default
+};

package/dist/es/components/internal/DataOverviewDetails/constants.js

@@ -0,0 +1,8 @@
+const t = "adyen-pe-overview-details", n = `${t}__skeleton`, e = `${n}-container`, o = `${n}--loading-content`, S = `${t}__status-skeleton`;
+export {
+  t as BASE_CLASS,
+  n as SKELETON_CLASS,
+  e as SKELETON_CONTAINER,
+  o as SKELETON_LOADING,
+  S as STATUS_SKELETON
+};

package/dist/es/components/internal/DataOverviewDetails/useDataOverviewDetailsTitle.js

@@ -0,0 +1,18 @@
+import { useModalContext as c } from "../Modal/Modal.js";
+import { useState as u, useMemo as i, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
+import m from "../../../core/Context/useCoreContext.js";
+import { boolOrFalse as T } from "../../../utils/value/bool.js";
+const d = {
+  transaction: "transactionDetails",
+  payout: "payoutDetails"
+}, p = ({ hideTitle: t, type: e }) => {
+  const { i18n: o } = m(), { withinModal: s } = c(), [a, r] = u(!1), n = i(() => a || T(t), [a, t]), l = i(() => o.get(d[e]), [o, e]);
+  return f(() => {
+    r(s);
+  }, [s]), { hideTitle: n, title: l };
+}, x = p;
+export {
+  d as TITLES_BY_TYPE,
+  x as default,
+  p as useDataOverviewDetailsTitle
+};

package/dist/es/components/internal/DataOverviewDisplay/DataDetailsModal.js

@@ -1,36 +1,35 @@
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useEffect as u } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { popoverUtil as h } from "../Popover/utils/popoverUtil.js";
 import C from "../../../core/Context/useCoreContext.js";
 import M from "../Modal/ModalContent/ModalContent.js";
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import g from "../Modal/Modal.js";
-const j = ({
+const O = ({
   children: p,
   className: f,
   selectedDetail: o,
   resetDetails: i
 }) => {
-  const {
-    i18n: m
-  } = C(), n = !!o;
+  const { i18n: m } = C(), n = !!o;
   return u(() => {
     n && h.closeAll();
-  }, [n]), r("div", {
-    className: f,
-    children: [p, o && r(g, {
-      title: o != null && o.title ? m.get(o.title) : void 0,
-      isOpen: !!o,
-      "aria-label": m.get("payoutDetails"),
-      onClose: i,
-      isDismissible: !0,
-      headerWithBorder: !1,
-      size: (o == null ? void 0 : o.modalSize) ?? "large",
-      children: o && r(M, {
-        ...o == null ? void 0 : o.selection
-      })
-    })]
-  });
+  }, [n]), /* @__PURE__ */ r("div", { className: f, children: [
+    p,
+    o && /* @__PURE__ */ r(
+      g,
+      {
+        title: o != null && o.title ? m.get(o.title) : void 0,
+        isOpen: !!o,
+        "aria-label": m.get("payoutDetails"),
+        onClose: i,
+        isDismissible: !0,
+        headerWithBorder: !1,
+        size: (o == null ? void 0 : o.modalSize) ?? "large",
+        children: o && /* @__PURE__ */ r(M, { ...o == null ? void 0 : o.selection })
+      }
+    )
+  ] });
 };
 export {
-  j as DataDetailsModal
+  O as DataDetailsModal
 };

package/dist/es/components/internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js

@@ -1,43 +1,17 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import a from "../../Typography/Typography.js";
 import m from "../../../../core/Context/useCoreContext.js";
 import { TypographyElement as d, TypographyVariant as c } from "../../Typography/types.js";
 import "./DataOverviewHeader.scss.js";
-import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const h = "adyen-pe-data-overview-header", u = ({
-  baseClassName: e = h,
-  children: t,
-  hideTitle: p,
-  titleKey: i,
-  descriptionKey: o
-}) => {
-  const {
-    i18n: n
-  } = m();
-  return r("header", {
-    className: e,
-    children: [r("div", {
-      className: `${e}__headings`,
-      children: [!p && i && r("div", {
-        className: `${e}__title`,
-        children: r(a, {
-          el: d.SPAN,
-          variant: c.TITLE,
-          medium: !0,
-          children: n.get(i)
-        })
-      }), o && r("p", {
-        className: `${e}__description`,
-        children: r(a, {
-          el: d.SPAN,
-          variant: c.BODY,
-          children: n.get(o)
-        })
-      })]
-    }), t && r("div", {
-      className: `${e}__controls`,
-      children: t
-    })]
-  });
+const h = "adyen-pe-data-overview-header", u = ({ baseClassName: e = h, children: t, hideTitle: p, titleKey: i, descriptionKey: o }) => {
+  const { i18n: n } = m();
+  return /* @__PURE__ */ r("header", { className: e, children: [
+    /* @__PURE__ */ r("div", { className: `${e}__headings`, children: [
+      !p && i && /* @__PURE__ */ r("div", { className: `${e}__title`, children: /* @__PURE__ */ r(a, { el: d.SPAN, variant: c.TITLE, medium: !0, children: n.get(i) }) }),
+      o && /* @__PURE__ */ r("p", { className: `${e}__description`, children: /* @__PURE__ */ r(a, { el: d.SPAN, variant: c.BODY, children: n.get(o) }) })
+    ] }),
+    t && /* @__PURE__ */ r("div", { className: `${e}__controls`, children: t })
+  ] });
 };
 export {
   h as BASE_CLASS,

package/dist/es/components/internal/DataOverviewError/DataOverviewError.js

@@ -1,6 +1,6 @@
-import { ErrorMessageDisplay as i } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { getErrorMessage as m } from "../../utils/getErrorMessage.js";
-import { jsx as u } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as m } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as u } from "../../utils/getErrorMessage.js";
 const c = ({
   error: r,
   errorMessage: t,
@@ -12,16 +12,19 @@ const c = ({
     refreshComponent: s,
     translationValues: n,
     onContactSupport: p
-  } = m(r, t, e);
-  return u(i, {
-    title: o,
-    message: a,
-    translationValues: n,
-    withImage: !0,
-    centered: !0,
-    refreshComponent: s,
-    onContactSupport: p
-  });
+  } = u(r, t, e);
+  return /* @__PURE__ */ i(
+    m,
+    {
+      title: o,
+      message: a,
+      translationValues: n,
+      withImage: !0,
+      centered: !0,
+      refreshComponent: s,
+      onContactSupport: p
+    }
+  );
 }, v = c;
 export {
   v as default