@adyen/adyen-platform-experience-web 1.0.0 → 1.0.2

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

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

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

@@ -1,22 +1,27 @@
-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 x = ({ 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);
+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
     },
-    [t]
-  ), a = s(
-    (r) => t.get(r),
-    [t]
-  );
-  return /* @__PURE__ */ m(d.Provider, { value: { registerCells: o, getMinWidthByColumn: a }, children: l(i) });
+    children: d(i)
+  });
 };
 export {
   x 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 R({
@@ -13,32 +13,32 @@ function R({
   isBalanceAccountIdWrong: s,
   onContactSupport: i
 }) {
-  const { hasError: a } = f();
-  return /* @__PURE__ */ e("div", { className: c(n, { [u]: a }), children: a ? /* @__PURE__ */ e(
-    t,
-    {
+  const {
+    hasError: a
+  } = f();
+  return e("div", {
+    className: c(n, {
+      [u]: a
+    }),
+    children: a ? e(t, {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
       message: [o, "tryRefreshingThePageOrComeBackLater"],
       refreshComponent: !0
-    }
-  ) : r ? /* @__PURE__ */ e(
-    t,
-    {
+    }) : r ? e(t, {
       withImage: !0,
       centered: !0,
       ...g(r, "weCouldNotLoadYourBalanceAccounts", i)
-    }
-  ) : s ? /* @__PURE__ */ e(
-    t,
-    {
+    }) : s ? e(t, {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
       message: [o, "theSelectedBalanceAccountIsIncorrect"]
-    }
-  ) : /* @__PURE__ */ e(h, { children: m }) });
+    }) : e(h, {
+      children: m
+    })
+  });
 }
 export {
   R as default

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

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

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

@@ -1,8 +1,8 @@
-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 = ({
   children: p,
@@ -10,25 +10,26 @@ const j = ({
   selectedDetail: o,
   resetDetails: i
 }) => {
-  const { i18n: m } = C(), n = !!o;
+  const {
+    i18n: m
+  } = C(), n = !!o;
   return u(() => {
     n && h.closeAll();
-  }, [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 })
-      }
-    )
-  ] });
+  }, [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
+      })
+    })]
+  });
 };
 export {
   j as DataDetailsModal

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

@@ -1,11 +1,30 @@
 const e = {
+  month: "short",
+  day: "numeric",
+  year: void 0,
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: !1
+}, n = {
   weekday: "long",
   month: "long",
   year: "numeric",
   hour: "2-digit",
   minute: "2-digit",
   timeZoneName: "shortOffset"
+}, o = {
+  month: "long",
+  day: "numeric",
+  year: "numeric"
+}, t = {
+  weekday: "long",
+  month: "long",
+  day: "numeric",
+  year: "numeric"
 };
 export {
-  e as DATE_FORMAT
+  o as DATE_FORMAT_PAYOUTS,
+  t as DATE_FORMAT_PAYOUTS_DETAILS,
+  e as DATE_FORMAT_TRANSACTIONS,
+  n as DATE_FORMAT_TRANSACTION_DETAILS
 };

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

@@ -1,6 +1,6 @@
-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";
+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";
 const c = ({
   error: r,
   errorMessage: t,
@@ -12,19 +12,16 @@ const c = ({
     refreshComponent: s,
     translationValues: n,
     onContactSupport: p
-  } = u(r, t, e);
-  return /* @__PURE__ */ i(
-    m,
-    {
-      title: o,
-      message: a,
-      translationValues: n,
-      withImage: !0,
-      centered: !0,
-      refreshComponent: s,
-      onContactSupport: p
-    }
-  );
+  } = m(r, t, e);
+  return u(i, {
+    title: o,
+    message: a,
+    translationValues: n,
+    withImage: !0,
+    centered: !0,
+    refreshComponent: s,
+    onContactSupport: p
+  });
 }, v = c;
 export {
   v as default

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

@@ -1,4 +1,3 @@
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "classnames";
 import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
 import { useState as N, useMemo as r, useCallback as y } from "../../../external/preact/hooks/dist/hooks.module.js";
@@ -7,6 +6,7 @@ import P from "../Calendar/hooks/useTimezone.js";
 import { DEFAULT_FIRST_WEEK_DAY as I } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
 import M from "../Calendar/hooks/useCalendarControlsRendering.js";
 import "./DatePicker.scss.js";
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import v from "../../../hooks/useReflex/useReflex.js";
 import x from "./components/TimeRangeSelector/TimeRangeSelector.js";
 import D from "../Calendar/Calendar.js";
@@ -15,14 +15,30 @@ import { boolOrTrue as E } from "../../../utils/value/bool.js";
 import { EMPTY_OBJECT as S } from "../../../utils/value/constants.js";
 import { noop as A } from "../../../utils/common.js";
 const b = p((e, u) => {
-  const { i18n: i } = O(), [T, k] = M(e.renderControl), [C, a] = N(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = P({ timezone: e.timezone, withClock: t }), z = r(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = v(A, u), R = y(() => {
+  const {
+    i18n: i
+  } = O(), [T, k] = M(e.renderControl), [C, a] = N(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), {
+    clockTime: m,
+    GMTOffset: c
+  } = P({
+    timezone: e.timezone,
+    withClock: t
+  }), z = r(() => _([{
+    "adyen-pe-datepicker--with-timezone": t
+  }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? {
+    values: {
+      offset: c,
+      time: m
+    }
+  } : S, [c, m, t]), o = v(A, u), R = y(() => {
     var l, s, d, f, h;
     a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((d = o.current) == null ? void 0 : d.from), +((f = o.current) == null ? void 0 : f.to)));
   }, [a, e.onHighlight]);
-  return /* @__PURE__ */ n("div", { className: z, children: [
-    /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
-      x,
-      {
+  return n("div", {
+    className: z,
+    children: [n("div", {
+      className: "adyen-pe-datepicker__selector-container",
+      children: n(x, {
         now: e.now,
         calendarRef: o,
         onTimeRangeSelected: e.onPresetOptionSelected,
@@ -30,25 +46,27 @@ const b = p((e, u) => {
         selectedOption: e.selectedPresetOption,
         timestamp: C,
         timezone: e.timezone
-      }
-    ) }),
-    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
-    /* @__PURE__ */ n(
-      D,
-      {
-        ...e,
-        ref: o,
-        firstWeekDay: I,
-        dynamicBlockRows: !0,
-        onlyCellsWithin: !0,
-        controls: e.controls ?? g.controls.MINIMAL,
-        highlight: e.highlight ?? g.highlight.MANY,
-        onHighlight: R,
-        renderControl: T
-      }
-    ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", w) })
-  ] });
+      })
+    }), n("div", {
+      ref: k,
+      role: "group",
+      className: "adyen-pe-datepicker__controls",
+      "aria-label": i.get("calendar.controls")
+    }), n(D, {
+      ...e,
+      ref: o,
+      firstWeekDay: I,
+      dynamicBlockRows: !0,
+      onlyCellsWithin: !0,
+      controls: e.controls ?? g.controls.MINIMAL,
+      highlight: e.highlight ?? g.highlight.MANY,
+      onHighlight: R,
+      renderControl: T
+    }), t && n("div", {
+      className: "adyen-pe-datepicker__timezone",
+      children: i.get("calendar.timezone", w)
+    })]
+  });
 }), Z = b;
 export {
   Z as default