@adyen/adyen-platform-experience-web 1.0.0-beta.3 → 1.0.0

package/dist/es/components/external/BaseElement.js

@@ -1,27 +1,19 @@
-var a = Object.defineProperty;
-var c = (e, t, s) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
-var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+var h = Object.defineProperty;
+var p = (r, t, o) => t in r ? h(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o;
+var e = (r, t, o) => (p(r, typeof t != "symbol" ? t + "" : t, o), o);
 import { render as n } from "../../external/preact/dist/preact.module.js";
-import u from "./EventEmitter.js";
-import m from "../../utils/uuid.js";
-import { isString as d } from "../../utils/validator-utils.js";
-var h;
-class r {
+import { uuid as u } from "../../utils/random/uuid.js";
+import { isString as a } from "../../utils/value/is.js";
+var s;
+class i {
   constructor(t) {
-    o(this, "_id", `${(h = this.constructor) == null ? void 0 : h.type}-${m()}`);
-    o(this, "props");
-    o(this, "state");
-    o(this, "defaultProps", {});
-    o(this, "_node");
-    o(this, "_component");
-    o(this, "eventEmitter", new u());
-    o(this, "_parentInstance");
-    o(this, "sessionSetupError");
-    // provided by AdyenPlatformExperienceCore
-    o(this, "loadingContext");
-    o(this, "i18n");
-    o(this, "session");
-    this.props = this.formatProps({ ...this == null ? void 0 : this.defaultProps, ...t }), this._parentInstance = this.props._parentInstance, this._node = null, this.state = {}, this.loadingContext = this.props.core.loadingContext, this.i18n = this.props.core.modules.i18n, this.session = this.props.core.session, this.props.core.registerComponent(this);
+    e(this, "_component");
+    e(this, "_node", null);
+    e(this, "_id", `${(s = this.constructor) == null ? void 0 : s.type}-${u()}`);
+    e(this, "defaultProps", {});
+    e(this, "props");
+    e(this, "state", {});
+    this.props = this.formatProps({ ...this == null ? void 0 : this.defaultProps, ...t }), this.props.core.registerComponent(this);
   }
   /**
    * Executed during creation of any element.
@@ -54,15 +46,10 @@ class r {
     throw new Error("Component cannot be rendered.");
   }
   mount(t) {
-    var i, p;
-    let s;
-    if (d(t) ? s = document.querySelector(t) : s = t, !s)
+    const o = a(t) ? document.querySelector(t) : t;
+    if (!o)
       throw new Error("Component could not mount. Root node was not found.");
-    return this._node ? this.unmount() : this.props.modules && this.props.modules.analytics && this.props.modules.analytics.send({
-      containerWidth: s && s.offsetWidth,
-      component: ((i = this.constructor) == null ? void 0 : i.analyticsType) ?? ((p = this.constructor) == null ? void 0 : p.type),
-      flavor: "components"
-    }), this._node = s, this._component = this.render(), n(this._component, s), this;
+    return this._node && this.unmount(), this._node = o, this._component = this.render(), n(this._component, o), this;
   }
   /**
    * Updates props, resets the internal state and remounts the element.
@@ -70,7 +57,7 @@ class r {
    * @returns this - the element instance
    */
   update(t) {
-    return this.props = this.formatProps({ ...this.props, ...t }), this.sessionSetupError = this.props.core.sessionSetupError, this.session = this.props.core.session, this._component = this.render(), this._node && n(this._component, this._node), this;
+    return this.props = this.formatProps({ ...this.props, ...t }), this._component = this.render(), this._node && n(this._component, this._node), this;
   }
   /**
    * Unmounts an element and mounts it again on the same node i.e. allows mount w/o having to pass a node.
@@ -80,8 +67,8 @@ class r {
   remount(t) {
     if (!this._node)
       throw new Error("Component is not mounted.");
-    const s = t || this.render();
-    return n(s, this._node, void 0), this;
+    const o = t || this.render();
+    return n(o, this._node), this;
   }
   /**
    * Unmounts an element from the DOM
@@ -94,11 +81,11 @@ class r {
    * For "destroy" type cleanup - when you don't intend to use the component again
    */
   remove() {
-    this.unmount(), this._parentInstance && this._parentInstance.remove(this);
+    this.unmount(), this.props.core.remove(this);
   }
 }
-o(r, "type"), o(r, "analyticsType");
-const E = r;
+e(i, "type");
+const _ = i;
 export {
-  E as default
+  _ as default
 };

package/dist/es/components/external/PayoutDetails/PayoutDetails.js

@@ -0,0 +1,19 @@
+var r = Object.defineProperty;
+var i = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => (i(o, typeof t != "symbol" ? t + "" : t, e), e);
+import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "../UIElement/UIElement.js";
+import p from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
+class s extends a {
+  constructor(e) {
+    super(e);
+    n(this, "componentToRender", () => /* @__PURE__ */ m(p, { ...this.props, type: "payout" }));
+    this.elementRef = e && e.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+n(s, "type", "payoutDetails");
+const f = s;
+export {
+  s as PayoutElement,
+  f as default
+};

package/dist/es/components/external/PayoutDetails/components/PayoutData.js

@@ -0,0 +1,90 @@
+import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import S from "classnames";
+import { useMemo as O } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import F from "../../../../core/Context/useCoreContext.js";
+import _ from "../../../internal/Card/Card.js";
+import { DATE_FORMAT as H } from "../../../internal/DataOverviewDisplay/constants.js";
+import { TypographyVariant as d } from "../../../internal/Typography/types.js";
+import c from "../../../internal/Typography/Typography.js";
+import q from "../../TransactionDetails/components/TransactionDataSkeleton.js";
+import "./PayoutData.scss.js";
+import { PD_BASE_CLASS as G, PD_TITLE_CLASS as J, PD_CONTENT_CLASS as K, PD_SECTION_CLASS as N, PD_SECTION_AMOUNT_CLASS as C, PD_SECTION_GROSS_AMOUNT_CLASS as D, PD_CARD_CLASS as l, PD_CARD_TITLE_CLASS as M, PD_SECTION_NET_AMOUNT_CLASS as z, PD_UNPAID_AMOUNT as Q } from "./constants.js";
+import f from "../../../internal/StructuredList/StructuredList.js";
+import { Fragment as W } from "../../../../external/preact/dist/preact.module.js";
+import { EMPTY_OBJECT as X } from "../../../../utils/value/constants.js";
+const ci = ({
+  balanceAccountId: U,
+  payout: t,
+  isFetching: R
+}) => {
+  var B;
+  const { payout: m } = t ?? X, { i18n: n } = F(), s = O(() => {
+    var v, h;
+    return (h = (v = t == null ? void 0 : t.amountBreakdowns) == null ? void 0 : v.adjustmentBreakdown) == null ? void 0 : h.reduce(
+      (r, i) => {
+        var P, L, p, E, y, I, Y;
+        const e = (P = i == null ? void 0 : i.amount) != null && P.value && ((L = i == null ? void 0 : i.amount) != null && L.currency) ? n.amount((p = i == null ? void 0 : i.amount) == null ? void 0 : p.value, (E = i == null ? void 0 : i.amount) == null ? void 0 : E.currency) : (((y = i == null ? void 0 : i.amount) == null ? void 0 : y.value) ?? "").toString(), A = `${i == null ? void 0 : i.category}`, a = n.get(A), g = i != null && i.category && a !== A ? a : i == null ? void 0 : i.category;
+        if (i != null && i.category && e && g) {
+          const $ = r[(I = i == null ? void 0 : i.amount) != null && I.value && ((Y = i == null ? void 0 : i.amount) == null ? void 0 : Y.value) < 0 ? "subtractions" : "additions"];
+          $[g] = e;
+        }
+        return r;
+      },
+      { subtractions: {}, additions: {} }
+    );
+  }, [n, t]), T = O(() => {
+    var v, h;
+    return (h = (v = t == null ? void 0 : t.amountBreakdowns) == null ? void 0 : v.fundsCapturedBreakdown) == null ? void 0 : h.reduce((r, i) => {
+      var e, A, a, g;
+      return ((e = i == null ? void 0 : i.amount) == null ? void 0 : e.value) === 0 || (A = i == null ? void 0 : i.amount) != null && A.value && (r[i.category] = n.amount((a = i == null ? void 0 : i.amount) == null ? void 0 : a.value, (g = i == null ? void 0 : i.amount) == null ? void 0 : g.currency)), r;
+    }, {});
+  }, [t, n]), x = O(() => m != null && m.createdAt ? n.date(new Date(m == null ? void 0 : m.createdAt), H).toString() : "", [m, n]);
+  return /* @__PURE__ */ o(W, { children: m ? /* @__PURE__ */ o("div", { className: G, children: [
+    /* @__PURE__ */ o("div", { className: J, children: [
+      /* @__PURE__ */ o(c, { variant: d.SUBTITLE, stronger: !0, children: n.get("netPayout") }),
+      /* @__PURE__ */ o(c, { variant: d.TITLE, large: !0, children: n.amount(m.payoutAmount.value, m.payoutAmount.currency) }),
+      /* @__PURE__ */ o(c, { variant: d.BODY, children: x }),
+      /* @__PURE__ */ o(c, { variant: d.BODY, stronger: !0, children: `${n.get("balanceAccountId")}: ${U}` })
+    ] }),
+    /* @__PURE__ */ o("div", { className: K, children: [
+      /* @__PURE__ */ o("div", { className: N, children: [
+        /* @__PURE__ */ o("div", { className: S(C, D), children: [
+          /* @__PURE__ */ o(c, { variant: d.BODY, children: n.get("fundsCaptured") }),
+          /* @__PURE__ */ o(c, { variant: d.BODY, children: n.amount(m.fundsCapturedAmount.value, m.fundsCapturedAmount.currency) })
+        ] }),
+        /* @__PURE__ */ o("div", { className: N, children: T && !!Object.keys(T).length && /* @__PURE__ */ o("div", { className: l, children: /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(f, { items: T }) }) }) })
+      ] }),
+      /* @__PURE__ */ o("div", { className: N, children: /* @__PURE__ */ o("div", { className: S(C, D), children: [
+        /* @__PURE__ */ o(c, { variant: d.BODY, children: n.get("adjustments") }),
+        /* @__PURE__ */ o(c, { variant: d.BODY, children: n.amount(m.adjustmentAmount.value, m.adjustmentAmount.currency) })
+      ] }) }),
+      /* @__PURE__ */ o("div", { className: N, children: [
+        (s == null ? void 0 : s.subtractions) && !!Object.keys(s == null ? void 0 : s.subtractions).length && /* @__PURE__ */ o("div", { className: l, children: /* @__PURE__ */ o(
+          _,
+          {
+            renderHeader: /* @__PURE__ */ o(c, { className: M, variant: d.CAPTION, stronger: !0, children: n.get("subtractions") }),
+            children: /* @__PURE__ */ o(f, { items: s == null ? void 0 : s.subtractions })
+          }
+        ) }),
+        (s == null ? void 0 : s.additions) && !!Object.keys(s == null ? void 0 : s.additions).length && /* @__PURE__ */ o("div", { className: l, children: /* @__PURE__ */ o(
+          _,
+          {
+            renderHeader: /* @__PURE__ */ o(c, { className: M, variant: d.CAPTION, stronger: !0, children: n.get("additions") }),
+            children: /* @__PURE__ */ o(f, { items: s == null ? void 0 : s.additions })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ o("div", { className: S(N), children: /* @__PURE__ */ o("div", { className: S(C, z), children: [
+        /* @__PURE__ */ o(c, { variant: d.BODY, stronger: !0, children: n.get("netPayout") }),
+        /* @__PURE__ */ o(c, { variant: d.BODY, stronger: !0, children: n.amount(m.payoutAmount.value, m.payoutAmount.currency) })
+      ] }) })
+    ] }),
+    ((B = t == null ? void 0 : t.payout) == null ? void 0 : B.unpaidAmount) && /* @__PURE__ */ o("div", { className: Q, children: [
+      /* @__PURE__ */ o(c, { variant: d.BODY, children: n.get("remainingAmount") }),
+      /* @__PURE__ */ o(c, { variant: d.BODY, children: n.amount(t.payout.unpaidAmount.value, t.payout.unpaidAmount.currency) })
+    ] })
+  ] }) : /* @__PURE__ */ o(q, { isLoading: R, skeletonRowNumber: 6 }) });
+};
+export {
+  ci as PayoutData
+};

package/dist/es/components/external/PayoutDetails/components/constants.js

@@ -0,0 +1,13 @@
+const _ = "adyen-pe-payout-data", A = `${_}__title`, S = `${_}__content`, n = `${S}--section`, o = `${S}--card`, C = `${o}-title`, t = `${n}-amount`, T = `${t}-gross`, c = `${t}-net`, s = `${_}--unpaid-amount`;
+export {
+  _ as PD_BASE_CLASS,
+  o as PD_CARD_CLASS,
+  C as PD_CARD_TITLE_CLASS,
+  S as PD_CONTENT_CLASS,
+  t as PD_SECTION_AMOUNT_CLASS,
+  n as PD_SECTION_CLASS,
+  T as PD_SECTION_GROSS_AMOUNT_CLASS,
+  c as PD_SECTION_NET_AMOUNT_CLASS,
+  A as PD_TITLE_CLASS,
+  s as PD_UNPAID_AMOUNT
+};

package/dist/es/components/external/PayoutsOverview/PayoutsOverviewElement.js

@@ -0,0 +1,29 @@
+var r = Object.defineProperty;
+var i = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => (i(o, typeof t != "symbol" ? t + "" : t, e), e);
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "./components/PayoutsOverviewContainer/PayoutsOverviewContainer.js";
+import a from "../UIElement/UIElement.js";
+class s extends a {
+  constructor(e) {
+    super(e);
+    n(this, "componentToRender", () => /* @__PURE__ */ c(
+      m,
+      {
+        ...this.props,
+        balanceAccountId: this.props.core.options.balanceAccountId,
+        ref: (e) => {
+          this.componentRef = e;
+        },
+        elementRef: this.elementRef
+      }
+    ));
+    this.elementRef = e && e.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+n(s, "type", "payouts");
+const h = s;
+export {
+  s as PayoutsElement,
+  h as default
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsOverview/PayoutsOverview.js

@@ -0,0 +1,127 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { BASE_CLASS as H, EARLIEST_PAYOUT_SINCE_DATE as J, BASE_CLASS_DETAILS as K } from "./constants.js";
+import { PayoutsTable as Q } from "../PayoutsTable/PayoutsTable.js";
+import { LIMIT_OPTIONS as W, DEFAULT_PAGE_LIMIT as X } from "../../../../internal/Pagination/constants.js";
+import { TypographyVariant as Z } from "../../../../internal/Typography/types.js";
+import $ from "../../../../internal/Typography/Typography.js";
+import B from "../../../../hooks/useBalanceAccountSelection.js";
+import tt from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import rt from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import et from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import { FilterParam as s } from "../../../../types.js";
+import ot from "../../../../../core/Context/useCoreContext.js";
+import { useCallback as D, useMemo as i, useEffect as it } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { DataDetailsModal as st } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
+import "./PayoutsOverview.scss.js";
+import at from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import mt from "../../../../internal/FilterBar/FilterBar.js";
+import lt from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { useAuthContext as nt } from "../../../../../core/Auth/context.js";
+import { isFunction as S } from "../../../../../utils/value/is.js";
+const Rt = ({
+  onFiltersChanged: a,
+  onLimitChanged: m,
+  balanceAccounts: l,
+  allowLimitSelection: u,
+  preferredLimit: C = X,
+  onRecordSelection: f,
+  showDetails: n,
+  isLoadingBalanceAccount: _,
+  onContactSupport: c,
+  hideTitle: I
+}) => {
+  const { i18n: P } = ot(), { getPayouts: d } = nt().endpoints, { activeBalanceAccount: t, balanceAccountSelectionOptions: F, onBalanceAccountSelection: A } = B(l), { defaultParams: o, nowTimestamp: L, refreshNowTimestamp: p } = et("payouts", t), O = D(
+    async (e, v) => d({ signal: v, errorLevel: "error" }, {
+      query: {
+        ...e,
+        createdSince: e[s.CREATED_SINCE] ?? o.current.defaultFilterParams[s.CREATED_SINCE],
+        createdUntil: e[s.CREATED_UNTIL] ?? o.current.defaultFilterParams[s.CREATED_UNTIL],
+        balanceAccountId: (t == null ? void 0 : t.id) ?? ""
+      }
+    }),
+    [t == null ? void 0 : t.id, o, d]
+  ), h = i(() => S(a) ? a : void 0, [a]), N = i(() => S(m) ? m : void 0, [m]), g = i(() => u ? W : void 0, [u]), { canResetFilters: b, error: R, fetching: U, filters: T, limit: x, limitOptions: M, records: k, resetFilters: dt, updateFilters: w, updateLimit: q, ...z } = at({
+    fetchRecords: O,
+    dataField: "data",
+    filterParams: o.current.defaultFilterParams,
+    initialFiltersSameAsDefault: !0,
+    onLimitChanged: N,
+    onFiltersChanged: h,
+    preferredLimit: C,
+    preferredLimitOptions: g,
+    enabled: !!(t != null && t.id) && !!d
+  });
+  it(() => {
+    p();
+  }, [T, p]);
+  const E = i(
+    () => ({
+      showDetails: n ?? !0,
+      callback: f
+    }),
+    [n, f]
+  ), j = i(() => ({ payout: E }), [E]), { updateDetails: y, resetDetails: G, selectedDetail: V } = rt(j), Y = D(
+    (e) => {
+      y({
+        selection: { type: "payout", data: { id: t == null ? void 0 : t.id, date: e.createdAt } },
+        modalSize: "small"
+      }).callback({ balanceAccountId: (t == null ? void 0 : t.id) || "", date: e.createdAt });
+    },
+    [y, t]
+  );
+  return /* @__PURE__ */ r("div", { className: H, children: [
+    !I && /* @__PURE__ */ r($, { variant: Z.TITLE, medium: !0, children: P.get("payoutsTitle") }),
+    /* @__PURE__ */ r(mt, { children: [
+      /* @__PURE__ */ r(
+        lt,
+        {
+          activeBalanceAccount: t,
+          balanceAccountSelectionOptions: F,
+          onBalanceAccountSelection: A
+        }
+      ),
+      /* @__PURE__ */ r(
+        tt,
+        {
+          canResetFilters: b,
+          defaultParams: o,
+          filters: T,
+          nowTimestamp: L,
+          refreshNowTimestamp: p,
+          sinceDate: J,
+          timezone: "UTC",
+          updateFilters: w
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r(
+      st,
+      {
+        className: K,
+        onContactSupport: c,
+        selectedDetail: V,
+        resetDetails: G,
+        children: /* @__PURE__ */ r(
+          Q,
+          {
+            balanceAccounts: l,
+            loading: U || _ || !l,
+            data: k,
+            showPagination: !0,
+            onRowClick: Y,
+            showDetails: n,
+            limit: x,
+            limitOptions: M,
+            onContactSupport: c,
+            onLimitSelection: q,
+            error: R,
+            ...z
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  Rt as PayoutsOverview
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsOverview/constants.js

@@ -0,0 +1,6 @@
+const e = "adyen-pe-payouts-overview", t = "adyen-pe-payouts-details", S = (/* @__PURE__ */ new Date("2024-04-16T00:00:00.000Z")).toString();
+export {
+  e as BASE_CLASS,
+  t as BASE_CLASS_DETAILS,
+  S as EARLIEST_PAYOUT_SINCE_DATE
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsOverviewContainer/PayoutsOverviewContainer.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../../../../hooks/useBalanceAccounts.js";
+import i from "../../../../internal/DataOverviewContainer/DataOverviewContainer.js";
+import { PayoutsOverview as u } from "../PayoutsOverview/PayoutsOverview.js";
+import { BASE_CLASS as s } from "./constants.js";
+function f({ ...o }) {
+  const { balanceAccounts: t, isBalanceAccountIdWrong: a, isFetching: e, error: n } = c(o.balanceAccountId);
+  return /* @__PURE__ */ r(
+    i,
+    {
+      balanceAccountsError: n,
+      className: s,
+      errorMessage: "weCouldNotLoadThePayoutsOverview",
+      isBalanceAccountIdWrong: a,
+      onContactSupport: o.onContactSupport,
+      children: /* @__PURE__ */ r(u, { ...o, balanceAccounts: t, isLoadingBalanceAccount: e })
+    }
+  );
+}
+export {
+  f as default
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsOverviewContainer/constants.js

@@ -0,0 +1,4 @@
+const e = "adyen-pe-payouts-overview-container";
+export {
+  e as BASE_CLASS
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js

@@ -0,0 +1,80 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import L from "../../../../internal/DataOverviewError/DataOverviewError.js";
+import { BASE_CLASS as P, NET_PAYOUT_CLASS as _ } from "./constants.js";
+import { getLabel as w } from "../../../../utils/getLabel.js";
+import F from "../../../../../core/Context/useCoreContext.js";
+import { getCurrencyCode as M } from "../../../../../core/Localization/amount/amount-util.js";
+import { useMemo as s } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useResponsiveViewport as N, mediaQueries as x } from "../../../TransactionsOverview/hooks/useResponsiveViewport.js";
+import { CellTextPosition as j } from "../../../../internal/DataGrid/types.js";
+import O from "classnames";
+import "./PayoutsTable.scss.js";
+import h from "../../../../internal/DataGrid/DataGrid.js";
+import R from "../../../../internal/Pagination/Pagination.js";
+import { useAuthContext as Y } from "../../../../../core/Auth/context.js";
+const C = ["fundsCapturedAmount", "adjustmentAmount", "payoutAmount"], G = ["createdAt", ...C], I = (i) => C.includes(i), rr = ({
+  error: i,
+  loading: c,
+  onContactSupport: l,
+  onRowClick: y,
+  showDetails: U,
+  showPagination: g,
+  data: e,
+  ...S
+}) => {
+  const { i18n: o } = F(), { refreshing: p } = Y(), T = s(() => c || p, [c, p]), n = N(x.up.sm), u = s(
+    () => ({
+      fundsCapturedAmount: n,
+      adjustmentAmount: n
+    }),
+    [n]
+  ), b = s(
+    () => G.map((r) => {
+      var a, d, f, A;
+      const m = o.get(w(r));
+      return I(r) ? {
+        key: r,
+        label: (d = (a = e == null ? void 0 : e[0]) == null ? void 0 : a[r]) != null && d.currency ? `${m} (${M((A = (f = e == null ? void 0 : e[0]) == null ? void 0 : f[r]) == null ? void 0 : A.currency)})` : m,
+        visible: u[r],
+        position: j.RIGHT
+      } : { key: r, label: m, visible: u[r] };
+    }),
+    [o, u, e]
+  ), E = {
+    title: "noPayoutsFound",
+    message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
+  }, D = s(
+    () => () => /* @__PURE__ */ t(L, { error: i, errorMessage: "weCouldNotLoadYourPayouts", onContactSupport: l }),
+    [i, l]
+  );
+  return /* @__PURE__ */ t("div", { className: P, children: /* @__PURE__ */ t(
+    h,
+    {
+      errorDisplay: D,
+      error: i,
+      columns: b,
+      data: e,
+      loading: T,
+      outline: !1,
+      onRowClick: { callback: y },
+      emptyTableMessage: E,
+      customCells: {
+        createdAt: ({ value: r }) => r ? n ? r && o.fullDate(r) : o.date(r, {
+          month: "short",
+          day: "numeric",
+          year: void 0,
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: !1
+        }) : null,
+        fundsCapturedAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { children: o.amount(r.value, r.currency, { hideCurrency: !0 }) }),
+        adjustmentAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { children: o.amount(r.value, r.currency, { hideCurrency: !0 }) }),
+        payoutAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { className: O({ [`${_}--strong`]: !n }), children: o.amount(r.value, r.currency, { hideCurrency: n }) })
+      },
+      children: g && /* @__PURE__ */ t(h.Footer, { children: /* @__PURE__ */ t(R, { ...S }) })
+    }
+  ) });
+};
+export {
+  rr as PayoutsTable
+};

package/dist/es/components/external/PayoutsOverview/components/PayoutsTable/constants.js

@@ -0,0 +1,5 @@
+const t = "adyen-pe-payouts-table", e = `${t}__net-payout`;
+export {
+  t as BASE_CLASS,
+  e as NET_PAYOUT_CLASS
+};

package/dist/es/components/external/TransactionDetails/TransactionDetails.js

@@ -2,12 +2,12 @@ var r = Object.defineProperty;
 var i = (n, e, t) => e in n ? r(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
 var s = (n, e, t) => (i(n, typeof e != "symbol" ? e + "" : e, t), t);
 import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import m from "../UIElement.js";
-import c from "./components/TransactionDetails.js";
+import m from "../UIElement/UIElement.js";
+import c from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
 class o extends m {
   constructor(t) {
     super(t);
-    s(this, "componentToRender", () => /* @__PURE__ */ a(c, { ...this.props }));
+    s(this, "componentToRender", () => /* @__PURE__ */ a(c, { ...this.props, type: "transaction" }));
     this.elementRef = t && t.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
   }
 }

package/dist/es/components/external/TransactionDetails/components/TransactionData.js

@@ -1,26 +1,18 @@
 import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import _ from "./TransactionDataSkeleton.js";
+import { DATE_FORMAT as u } from "../../../internal/DataOverviewDisplay/constants.js";
+import r from "./TransactionDataSkeleton.js";
 import { Image as t } from "../../../internal/Image/Image.js";
 import { parsePaymentMethodType as h } from "../../TransactionsOverview/components/utils.js";
 import { Tag as p } from "../../../internal/Tag/Tag.js";
 import { TagVariant as a } from "../../../internal/Tag/types.js";
-import r from "../../../../core/Context/useCoreContext.js";
-import { useMemo as g } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { Fragment as i } from "../../../../external/preact/dist/preact.module.js";
-const M = ({ transaction: e, isFetching: y }) => {
+import g from "../../../../core/Context/useCoreContext.js";
+import { useMemo as v } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import "./TransactionData.scss.js";
+import { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
+const S = ({ transaction: e, isFetching: y }) => {
   var l;
-  const { i18n: m } = r(), o = g(
-    () => e ? m.date(new Date(e.createdAt), {
-      weekday: "long",
-      month: "long",
-      year: "numeric",
-      hour: "2-digit",
-      minute: "2-digit",
-      timeZoneName: "shortOffset"
-    }).toString() : "",
-    [e, m]
-  ), u = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending";
-  return /* @__PURE__ */ d(i, { children: e ? /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data", children: [
+  const { i18n: m } = g(), o = v(() => e ? m.date(new Date(e.createdAt), u).toString() : "", [e, m]), _ = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending";
+  return /* @__PURE__ */ d(c, { children: e ? /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data", children: [
     /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__container", children: [
       ((e == null ? void 0 : e.status) || (e == null ? void 0 : e.category)) && /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__tag-container", children: [
         (e == null ? void 0 : e.status) && /* @__PURE__ */ d(
@@ -35,7 +27,7 @@ const M = ({ transaction: e, isFetching: y }) => {
       /* @__PURE__ */ d(
         "div",
         {
-          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${u}`,
+          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${_}`,
           children: e.amount ? m.amount(e.amount.value, e.amount.currency, {
             currencyDisplay: "symbol"
           }) : null
@@ -48,7 +40,7 @@ const M = ({ transaction: e, isFetching: y }) => {
             name: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
             alt: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
             folder: "logos/",
-            className: "adyen-pe-transactions__payment-method-logo"
+            className: "adyen-pe-transaction-data__payment-method-logo"
           }
         ) }),
         /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__payment-method-detail", children: e != null && e.paymentMethod ? h(e == null ? void 0 : e.paymentMethod, "detail") : (l = e == null ? void 0 : e.bankAccount) == null ? void 0 : l.accountNumberLastFourDigits })
@@ -63,8 +55,8 @@ const M = ({ transaction: e, isFetching: y }) => {
       /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__label", children: m.get("referenceID") }),
       /* @__PURE__ */ d("div", { "aria-label": m.get("referenceID"), children: e.id })
     ] })
-  ] }) : /* @__PURE__ */ d(_, { isLoading: y, skeletonRowNumber: 6 }) });
+  ] }) : /* @__PURE__ */ d(r, { isLoading: y, skeletonRowNumber: 6 }) });
 };
 export {
-  M as TransactionData
+  S as TransactionData
 };

package/dist/es/components/external/TransactionDetails/components/TransactionDataSkeleton.js

@@ -1,13 +1,13 @@
 import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "classnames";
-import { useMemo as c } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
+import r from "classnames";
+import { useMemo as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
 const i = ({ isLoading: o, skeletonRowNumber: a = 0 }) => {
-  const e = c(() => Array.from({ length: a }, (t, r) => r), [a]);
-  return /* @__PURE__ */ n(m, { children: e.map((t) => /* @__PURE__ */ n(
+  const e = m(() => Array.from({ length: a }, (t, s) => s), [a]);
+  return /* @__PURE__ */ n(c, { children: e.map((t) => /* @__PURE__ */ n(
     "span",
     {
-      className: s({
+      className: r({
         "adyen-pe-transaction-data__skeleton": !0,
         "adyen-pe-transaction-data__skeleton-loading-content": o
       })

package/dist/es/components/external/TransactionsOverview/TransactionsOverviewElement.js

@@ -2,13 +2,13 @@ var r = Object.defineProperty;
 var i = (n, t, e) => t in n ? r(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
 var o = (n, t, e) => (i(n, typeof t != "symbol" ? t + "" : t, e), e);
 import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "../UIElement.js";
-import m from "./components/TransactionsOverviewContainer/TransactionsOverviewContainer.js";
-class s extends a {
+import a from "./components/TransactionsOverviewContainer/TransactionsOverviewContainer.js";
+import m from "../UIElement/UIElement.js";
+class s extends m {
   constructor(e) {
     super(e);
     o(this, "componentToRender", () => /* @__PURE__ */ c(
-      m,
+      a,
       {
         ...this.props,
         balanceAccountId: this.props.core.options.balanceAccountId,

package/dist/es/components/external/TransactionsOverview/components/AmountSkeleton/AmountSkeleton.js

@@ -1,9 +1,9 @@
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import m from "classnames";
-import { BASE_CLASS as r, LOADING_CLASS as S, MARGIN_CLASS as a } from "./constants.js";
+import { BASE_CLASS as a, LOADING_CLASS as r, MARGIN_CLASS as S } from "./constants.js";
 import "./AmountSkeleton.scss.js";
-const n = ({ hasMargin: o = !1, isLoading: t = !1, width: e }) => /* @__PURE__ */ s("span", { className: m(r, { [S]: t, [a]: o }), style: { width: e } }), u = n;
+const l = ({ hasMargin: o = !1, isLoading: s = !1, width: t }) => /* @__PURE__ */ e("span", { className: m(a, { [r]: s, [S]: o }), style: { width: t } }), u = l;
 export {
-  n as AmountSkeleton,
+  l as AmountSkeleton,
   u as default
 };