@adyen/adyen-platform-experience-web 1.3.1 → 1.4.1

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

@@ -1,119 +1,169 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import T from "classnames";
-import { useMemo as N } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import H from "../../../../core/Context/useCoreContext.js";
-import M from "../../../internal/Accordion/Accordion.js";
-import S from "../../../internal/Card/Card.js";
-import { TypographyVariant as e } from "../../../internal/Typography/types.js";
-import m from "../../../internal/Typography/Typography.js";
-import k from "../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
-import z from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import l from "classnames";
+import { useMemo as C } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import F from "../../../../core/Context/useCoreContext.js";
+import x from "../../../internal/Accordion/Accordion.js";
+import g from "../../../internal/Card/Card.js";
+import { TypographyVariant as m } from "../../../internal/Typography/types.js";
+import a from "../../../internal/Typography/Typography.js";
+import G from "../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
+import J from "../../../../hooks/useTimezoneAwareDateFormatting.js";
 /* empty css                */
-import { PD_BASE_CLASS as G, PD_TITLE_CLASS as J, PD_TITLE_CONTAINER_CLASS as K, PD_SECTION_CLASS as l, PD_TITLE_BA_CLASS as q, PD_CONTENT_CLASS as Q, PD_CARD_CLASS as _, PD_SECTION_AMOUNT_CLASS as f, PD_SECTION_GROSS_AMOUNT_CLASS as R, PD_CARD_TITLE_CLASS as F, PD_SECTION_NET_AMOUNT_CLASS as W, PD_UNPAID_AMOUNT as X } from "./constants.js";
-import { Tag as Z } from "../../../internal/Tag/Tag.js";
-import { TagVariant as b } from "../../../internal/Tag/types.js";
-import { DATE_FORMAT_PAYOUT_DETAILS as j } from "../../../../constants/dateFormats.js";
-import y from "../../../internal/StructuredList/StructuredList.js";
-import { Fragment as w } from "../../../../external/preact/dist/preact.module.js";
-import { EMPTY_OBJECT as V } from "../../../../utils/value/constants.js";
-const Si = ({
-  balanceAccountId: $,
-  balanceAccountDescription: p,
-  payout: s,
-  isFetching: ii
+import { PD_BASE_CLASS as K, PD_TITLE_CLASS as W, PD_TITLE_CLASS_WITH_EXTRA_DETAILS as q, PD_TITLE_CONTAINER_CLASS as Q, PD_SECTION_CLASS as _, PD_TITLE_BA_CLASS as Z, PD_EXTRA_DETAILS_CLASS as j, PD_EXTRA_DETAILS_LABEL as w, PD_EXTRA_DETAILS_ICON as V, PD_CONTENT_CLASS as tt, PD_CARD_CLASS as D, PD_SECTION_AMOUNT_CLASS as L, PD_SECTION_GROSS_AMOUNT_CLASS as $, PD_CARD_TITLE_CLASS as X, PD_SECTION_NET_AMOUNT_CLASS as it, PD_UNPAID_AMOUNT as nt, PD_BUTTON_ACTIONS as rt } from "./constants.js";
+import { Tag as ot } from "../../../internal/Tag/Tag.js";
+import { TagVariant as et } from "../../../internal/Tag/types.js";
+import st from "../../../internal/Link/Link.js";
+import mt from "../../../internal/DataGrid/components/Icon.js";
+import { isCustomDataObject as B } from "../../../internal/DataGrid/components/TableCells.js";
+import { ButtonVariant as at } from "../../../internal/Button/types.js";
+import { ButtonActionsLayoutBasic as ct } from "../../../internal/Button/ButtonActions/types.js";
+import dt from "../../../internal/Button/ButtonActions/ButtonActions.js";
+import { DATE_FORMAT_PAYOUT_DETAILS as ht } from "../../../../constants/dateFormats.js";
+import S from "../../../internal/StructuredList/StructuredList.js";
+import { Fragment as At } from "../../../../external/preact/dist/preact.module.js";
+import { EMPTY_OBJECT as lt } from "../../../../utils/value/constants.js";
+const $t = ({
+  balanceAccountId: H,
+  balanceAccountDescription: P,
+  payout: h,
+  extraFields: O
 }) => {
-  var B;
-  const { payout: t } = s ?? V, { dateFormat: P } = z("UTC"), { i18n: r } = H(), o = N(() => {
-    var a, h;
-    const c = (h = (a = s == null ? void 0 : s.amountBreakdowns) == null ? void 0 : a.adjustmentBreakdown) == null ? void 0 : h.reduce(
-      (d, i) => {
-        var L, E, I, D, Y, U, u;
-        const v = (L = i == null ? void 0 : i.amount) != null && L.value && ((E = i == null ? void 0 : i.amount) != null && E.currency) ? r.amount((I = i == null ? void 0 : i.amount) == null ? void 0 : I.value, (D = i == null ? void 0 : i.amount) == null ? void 0 : D.currency, { hideCurrency: !0 }) : (((Y = i == null ? void 0 : i.amount) == null ? void 0 : Y.value) ?? "").toString(), A = `${i == null ? void 0 : i.category}`, g = r.get(A), C = i != null && i.category && g !== A ? g : i == null ? void 0 : i.category;
-        return i != null && i.category && v && C && d[(U = i == null ? void 0 : i.amount) != null && U.value && ((u = i == null ? void 0 : i.amount) == null ? void 0 : u.value) < 0 ? "subtractions" : "additions"].push({ key: C, value: v }), d;
+  var u;
+  const { payout: o } = h ?? lt, { dateFormat: E } = J("UTC"), { i18n: s } = F(), r = C(() => {
+    var d, c;
+    const e = (c = (d = h == null ? void 0 : h.amountBreakdowns) == null ? void 0 : d.adjustmentBreakdown) == null ? void 0 : c.reduce(
+      (n, t) => {
+        var f, Y, R, U, M, b, k;
+        const A = (f = t == null ? void 0 : t.amount) != null && f.value && ((Y = t == null ? void 0 : t.amount) != null && Y.currency) ? s.amount((R = t == null ? void 0 : t.amount) == null ? void 0 : R.value, (U = t == null ? void 0 : t.amount) == null ? void 0 : U.currency, { hideCurrency: !0 }) : (((M = t == null ? void 0 : t.amount) == null ? void 0 : M.value) ?? "").toString(), v = `${t == null ? void 0 : t.category}`, T = s.get(v), N = t != null && t.category && T !== v ? T : t == null ? void 0 : t.category;
+        return t != null && t.category && A && N && n[(b = t == null ? void 0 : t.amount) != null && b.value && ((k = t == null ? void 0 : t.amount) == null ? void 0 : k.value) < 0 ? "subtractions" : "additions"].push({ key: N, value: A }), n;
       },
       { subtractions: [], additions: [] }
     );
-    return c == null || c.subtractions.sort((d, i) => d.key.localeCompare(i.key)), c == null || c.additions.sort((d, i) => d.key.localeCompare(i.key)), c;
-  }, [r, s]), O = N(() => {
-    var a, h;
-    const c = (h = (a = s == null ? void 0 : s.amountBreakdowns) == null ? void 0 : a.fundsCapturedBreakdown) == null ? void 0 : h.reduce((d, i) => {
-      var v, A, g, C;
-      return ((v = i == null ? void 0 : i.amount) == null ? void 0 : v.value) === 0 || (A = i == null ? void 0 : i.amount) != null && A.value && i.category && d.push({
-        key: i.category,
-        value: r.amount((g = i == null ? void 0 : i.amount) == null ? void 0 : g.value, (C = i == null ? void 0 : i.amount) == null ? void 0 : C.currency, { hideCurrency: !0 })
-      }), d;
+    return e == null || e.subtractions.sort((n, t) => n.key.localeCompare(t.key)), e == null || e.additions.sort((n, t) => n.key.localeCompare(t.key)), e;
+  }, [s, h]), y = C(() => {
+    var d, c;
+    const e = (c = (d = h == null ? void 0 : h.amountBreakdowns) == null ? void 0 : d.fundsCapturedBreakdown) == null ? void 0 : c.reduce((n, t) => {
+      var A, v, T, N;
+      return ((A = t == null ? void 0 : t.amount) == null ? void 0 : A.value) === 0 || (v = t == null ? void 0 : t.amount) != null && v.value && t.category && n.push({
+        key: t.category,
+        value: s.amount((T = t == null ? void 0 : t.amount) == null ? void 0 : T.value, (N = t == null ? void 0 : t.amount) == null ? void 0 : N.currency, { hideCurrency: !0 })
+      }), n;
     }, []);
-    return c == null || c.sort((d, i) => d.key === "capture" ? -1 : i.key === "capture" ? 1 : d.key.localeCompare(i.key)), c;
-  }, [s, r]), x = N(
-    () => t != null && t.createdAt ? P(new Date(t == null ? void 0 : t.createdAt), j) : "",
-    [t, P]
-  );
-  return /* @__PURE__ */ n(w, { children: t ? /* @__PURE__ */ n("div", { className: G, children: [
-    /* @__PURE__ */ n("div", { className: J, children: [
-      /* @__PURE__ */ n("div", { className: K, children: [
-        /* @__PURE__ */ n(m, { variant: e.SUBTITLE, stronger: !0, children: r.get("netPayout") }),
-        t.isSumOfSameDayPayouts && /* @__PURE__ */ n(Z, { variant: b.BLUE, label: r.get("sumOfSameDayPayouts") })
-      ] }),
-      /* @__PURE__ */ n(m, { variant: e.TITLE, large: !0, children: `${r.amount(t.payoutAmount.value, t.payoutAmount.currency, {
-        hideCurrency: !0
-      })} ${t.payoutAmount.currency}` }),
-      /* @__PURE__ */ n(m, { variant: e.BODY, children: x }),
-      /* @__PURE__ */ n("div", { className: l, children: [
-        p && /* @__PURE__ */ n(m, { variant: e.CAPTION, stronger: !0, wide: !0, children: `${p}` }),
-        /* @__PURE__ */ n(m, { variant: e.CAPTION, className: q, children: `${$}` })
-      ] })
-    ] }),
-    /* @__PURE__ */ n("div", { className: Q, children: [
-      /* @__PURE__ */ n("div", { className: l, children: (t == null ? void 0 : t.fundsCapturedAmount) && (O && Object.keys(O).length > 0 ? /* @__PURE__ */ n(
-        M,
+    return e == null || e.sort((n, t) => n.key === "capture" ? -1 : t.key === "capture" ? 1 : n.key.localeCompare(t.key)), e;
+  }, [h, s]), z = C(
+    () => o != null && o.createdAt ? E(new Date(o == null ? void 0 : o.createdAt), ht) : "",
+    [o, E]
+  ), p = Object.entries(O || {}).filter(([, e]) => e.type !== "button" && e.visibility !== "hidden").map(([e, d]) => ({
+    key: e,
+    value: B(d) ? d.value : d,
+    type: B(d) ? d.type : "text",
+    config: B(d) ? d.config : void 0
+  })) || [], I = C(() => [...O ? Object.values(O).filter((c) => c.type === "button").map((c) => {
+    var n, t, A;
+    return {
+      title: c.value,
+      variant: at.SECONDARY,
+      event: (n = c.config) == null ? void 0 : n.action,
+      classNames: (t = c == null ? void 0 : c.config) != null && t.className ? [(A = c == null ? void 0 : c.config) == null ? void 0 : A.className] : []
+    };
+  }) : []].filter(Boolean), [O]);
+  return /* @__PURE__ */ i(At, { children: o ? /* @__PURE__ */ i("div", { className: K, children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: l(W, {
+          [q]: p.length
+        }),
+        children: [
+          /* @__PURE__ */ i("div", { className: Q, children: [
+            /* @__PURE__ */ i(a, { variant: m.SUBTITLE, stronger: !0, children: s.get("netPayout") }),
+            o.isSumOfSameDayPayouts && /* @__PURE__ */ i(ot, { variant: et.BLUE, label: s.get("sumOfSameDayPayouts") })
+          ] }),
+          /* @__PURE__ */ i(a, { variant: m.TITLE, large: !0, children: `${s.amount(o.payoutAmount.value, o.payoutAmount.currency, {
+            hideCurrency: !0
+          })} ${o.payoutAmount.currency}` }),
+          /* @__PURE__ */ i(a, { variant: m.BODY, children: z }),
+          /* @__PURE__ */ i("div", { className: _, children: [
+            P && /* @__PURE__ */ i(a, { variant: m.CAPTION, stronger: !0, wide: !0, children: `${P}` }),
+            /* @__PURE__ */ i(a, { variant: m.CAPTION, className: Z, children: `${H}` })
+          ] })
+        ]
+      }
+    ),
+    p.length > 0 ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+      S,
+      {
+        classNames: j,
+        items: p,
+        align: "start",
+        layout: "5-7",
+        renderLabel: (e) => /* @__PURE__ */ i("div", { className: w, children: e }),
+        renderValue: (e, d, c, n) => {
+          if (c === "link" && n)
+            return /* @__PURE__ */ i(st, { classNames: [l(n == null ? void 0 : n.className)], href: n.href, target: n.target || "_blank", children: e });
+          if (c === "icon" && n) {
+            const t = { url: n.src, alt: n.alt || e };
+            return /* @__PURE__ */ i("div", { className: l(V, n == null ? void 0 : n.className), children: [
+              /* @__PURE__ */ i(mt, { ...t }),
+              /* @__PURE__ */ i(a, { variant: m.BODY, children: e })
+            ] });
+          }
+          return /* @__PURE__ */ i(a, { className: l(n == null ? void 0 : n.className), variant: m.BODY, children: e });
+        }
+      }
+    ) }) : null,
+    /* @__PURE__ */ i("div", { className: tt, children: [
+      /* @__PURE__ */ i("div", { className: _, children: (o == null ? void 0 : o.fundsCapturedAmount) && (y && Object.keys(y).length > 0 ? /* @__PURE__ */ i(
+        x,
         {
-          header: /* @__PURE__ */ n(m, { variant: e.BODY, children: r.get("fundsCaptured") }),
-          headerInformation: /* @__PURE__ */ n(m, { variant: e.BODY, children: r.amount(t.fundsCapturedAmount.value, t.fundsCapturedAmount.currency) }),
-          children: /* @__PURE__ */ n("div", { className: l, children: /* @__PURE__ */ n("div", { className: _, children: /* @__PURE__ */ n(S, { noPadding: !0, children: /* @__PURE__ */ n(y, { items: O }) }) }) })
+          header: /* @__PURE__ */ i(a, { variant: m.BODY, children: s.get("fundsCaptured") }),
+          headerInformation: /* @__PURE__ */ i(a, { variant: m.BODY, children: s.amount(o.fundsCapturedAmount.value, o.fundsCapturedAmount.currency) }),
+          children: /* @__PURE__ */ i("div", { className: _, children: /* @__PURE__ */ i("div", { className: D, children: /* @__PURE__ */ i(g, { noPadding: !0, children: /* @__PURE__ */ i(S, { items: y }) }) }) })
         }
-      ) : /* @__PURE__ */ n("div", { className: T(f, R), children: [
-        /* @__PURE__ */ n(m, { variant: e.BODY, children: r.get("fundsCaptured") }),
-        /* @__PURE__ */ n(m, { variant: e.BODY, children: r.amount(t.fundsCapturedAmount.value, t.fundsCapturedAmount.currency) })
+      ) : /* @__PURE__ */ i("div", { className: l(L, $), children: [
+        /* @__PURE__ */ i(a, { variant: m.BODY, children: s.get("fundsCaptured") }),
+        /* @__PURE__ */ i(a, { variant: m.BODY, children: s.amount(o.fundsCapturedAmount.value, o.fundsCapturedAmount.currency) })
       ] })) }),
-      /* @__PURE__ */ n("div", { className: l, children: o != null && o.subtractions && Object.keys(o == null ? void 0 : o.subtractions).length > 0 || o != null && o.additions && Object.keys(o == null ? void 0 : o.additions).length > 0 ? /* @__PURE__ */ n(
-        M,
+      /* @__PURE__ */ i("div", { className: _, children: r != null && r.subtractions && Object.keys(r == null ? void 0 : r.subtractions).length > 0 || r != null && r.additions && Object.keys(r == null ? void 0 : r.additions).length > 0 ? /* @__PURE__ */ i(
+        x,
         {
-          header: /* @__PURE__ */ n(m, { variant: e.BODY, children: r.get("adjustments") }),
-          headerInformation: /* @__PURE__ */ n(m, { variant: e.BODY, children: r.amount(t.adjustmentAmount.value, t.adjustmentAmount.currency) }),
+          header: /* @__PURE__ */ i(a, { variant: m.BODY, children: s.get("adjustments") }),
+          headerInformation: /* @__PURE__ */ i(a, { variant: m.BODY, children: s.amount(o.adjustmentAmount.value, o.adjustmentAmount.currency) }),
           children: [
-            (o == null ? void 0 : o.additions) && Object.keys(o == null ? void 0 : o.additions).length > 0 && /* @__PURE__ */ n("div", { className: _, children: /* @__PURE__ */ n(
-              S,
+            (r == null ? void 0 : r.additions) && Object.keys(r == null ? void 0 : r.additions).length > 0 && /* @__PURE__ */ i("div", { className: D, children: /* @__PURE__ */ i(
+              g,
               {
                 noPadding: !0,
-                renderHeader: /* @__PURE__ */ n(m, { className: F, variant: e.CAPTION, stronger: !0, children: r.get("additions") }),
-                children: /* @__PURE__ */ n(y, { items: o == null ? void 0 : o.additions })
+                renderHeader: /* @__PURE__ */ i(a, { className: X, variant: m.CAPTION, stronger: !0, children: s.get("additions") }),
+                children: /* @__PURE__ */ i(S, { items: r == null ? void 0 : r.additions })
               }
             ) }),
-            (o == null ? void 0 : o.subtractions) && Object.keys(o == null ? void 0 : o.subtractions).length > 0 && /* @__PURE__ */ n("div", { className: _, children: /* @__PURE__ */ n(
-              S,
+            (r == null ? void 0 : r.subtractions) && Object.keys(r == null ? void 0 : r.subtractions).length > 0 && /* @__PURE__ */ i("div", { className: D, children: /* @__PURE__ */ i(
+              g,
               {
                 noPadding: !0,
-                renderHeader: /* @__PURE__ */ n(m, { className: F, variant: e.CAPTION, stronger: !0, children: r.get("subtractions") }),
-                children: /* @__PURE__ */ n(y, { items: o == null ? void 0 : o.subtractions })
+                renderHeader: /* @__PURE__ */ i(a, { className: X, variant: m.CAPTION, stronger: !0, children: s.get("subtractions") }),
+                children: /* @__PURE__ */ i(S, { items: r == null ? void 0 : r.subtractions })
               }
             ) })
           ]
         }
-      ) : /* @__PURE__ */ n("div", { className: T(f, R), children: [
-        /* @__PURE__ */ n(m, { variant: e.BODY, children: r.get("adjustments") }),
-        /* @__PURE__ */ n(m, { variant: e.BODY, children: r.amount(t.adjustmentAmount.value, t.adjustmentAmount.currency) })
+      ) : /* @__PURE__ */ i("div", { className: l(L, $), children: [
+        /* @__PURE__ */ i(a, { variant: m.BODY, children: s.get("adjustments") }),
+        /* @__PURE__ */ i(a, { variant: m.BODY, children: s.amount(o.adjustmentAmount.value, o.adjustmentAmount.currency) })
       ] }) }),
-      /* @__PURE__ */ n("div", { className: T(l), children: /* @__PURE__ */ n("div", { className: T(f, W), children: [
-        /* @__PURE__ */ n(m, { variant: e.BODY, stronger: !0, children: r.get("netPayout") }),
-        /* @__PURE__ */ n(m, { variant: e.BODY, stronger: !0, children: r.amount(t.payoutAmount.value, t.payoutAmount.currency) })
+      /* @__PURE__ */ i("div", { className: l(_), children: /* @__PURE__ */ i("div", { className: l(L, it), children: [
+        /* @__PURE__ */ i(a, { variant: m.BODY, stronger: !0, children: s.get("netPayout") }),
+        /* @__PURE__ */ i(a, { variant: m.BODY, stronger: !0, children: s.amount(o.payoutAmount.value, o.payoutAmount.currency) })
       ] }) })
     ] }),
-    ((B = s == null ? void 0 : s.payout) == null ? void 0 : B.unpaidAmount) && /* @__PURE__ */ n("div", { className: X, children: [
-      /* @__PURE__ */ n(m, { variant: e.BODY, children: r.get("remainingAmount") }),
-      /* @__PURE__ */ n(m, { variant: e.BODY, children: r.amount(s.payout.unpaidAmount.value, s.payout.unpaidAmount.currency) })
-    ] })
-  ] }) : /* @__PURE__ */ n(k, { skeletonRowNumber: 6 }) });
+    ((u = h == null ? void 0 : h.payout) == null ? void 0 : u.unpaidAmount) && /* @__PURE__ */ i("div", { className: nt, children: [
+      /* @__PURE__ */ i(a, { variant: m.BODY, children: s.get("remainingAmount") }),
+      /* @__PURE__ */ i(a, { variant: m.BODY, children: s.amount(h.payout.unpaidAmount.value, h.payout.unpaidAmount.currency) })
+    ] }),
+    I.length ? /* @__PURE__ */ i("div", { className: rt, children: /* @__PURE__ */ i(dt, { actions: I, layout: ct.BUTTONS_END }) }) : null
+  ] }) : /* @__PURE__ */ i(G, { skeletonRowNumber: 6 }) });
 };
 export {
-  Si as PayoutData
+  $t as PayoutData
 };

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

@@ -1,15 +1,20 @@
-const _ = "adyen-pe-payout-data", o = `${_}__title-container`, T = `${_}__title`, C = `${_}__title--ba-id`, t = `${_}__content`, n = `${t}--section`, A = `${t}--card`, c = `${A}-title`, S = `${n}-amount`, s = `${S}-gross`, D = `${S}-net`, L = `${_}--unpaid-amount`;
+const _ = "adyen-pe-payout-data", n = `${_}__title-container`, o = `${_}__title`, s = `${_}__title--with-extra-details`, D = `${_}__title--ba-id`, t = `${_}__content`, L = `${_}__extra-details`, c = `${_}__extra-details-label`, C = `${_}__extra-details-icon`, E = `${_}__button-actions`, T = `${t}--section`, A = `${t}--card`, e = `${A}-title`, S = `${T}-amount`, a = `${S}-gross`, I = `${S}-net`, P = `${_}--unpaid-amount`;
 export {
   _ as PD_BASE_CLASS,
+  E as PD_BUTTON_ACTIONS,
   A as PD_CARD_CLASS,
-  c as PD_CARD_TITLE_CLASS,
+  e as PD_CARD_TITLE_CLASS,
   t as PD_CONTENT_CLASS,
+  L as PD_EXTRA_DETAILS_CLASS,
+  C as PD_EXTRA_DETAILS_ICON,
+  c as PD_EXTRA_DETAILS_LABEL,
   S as PD_SECTION_AMOUNT_CLASS,
-  n as PD_SECTION_CLASS,
-  s as PD_SECTION_GROSS_AMOUNT_CLASS,
-  D as PD_SECTION_NET_AMOUNT_CLASS,
-  C as PD_TITLE_BA_CLASS,
-  T as PD_TITLE_CLASS,
-  o as PD_TITLE_CONTAINER_CLASS,
-  L as PD_UNPAID_AMOUNT
+  T as PD_SECTION_CLASS,
+  a as PD_SECTION_GROSS_AMOUNT_CLASS,
+  I as PD_SECTION_NET_AMOUNT_CLASS,
+  D as PD_TITLE_BA_CLASS,
+  o as PD_TITLE_CLASS,
+  s as PD_TITLE_CLASS_WITH_EXTRA_DETAILS,
+  n as PD_TITLE_CONTAINER_CLASS,
+  P as PD_UNPAID_AMOUNT
 };

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

@@ -1,119 +1,137 @@
-import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { BASE_CLASS as G, EARLIEST_PAYOUT_SINCE_DATE as H, BASE_CLASS_DETAILS as Y } from "./constants.js";
-import { PayoutsTable as J } from "../PayoutsTable/PayoutsTable.js";
-import { LIMIT_OPTIONS as Q, DEFAULT_PAGE_LIMIT as V } from "../../../../internal/Pagination/constants.js";
-import W from "../../../../../hooks/useBalanceAccountSelection.js";
-import X from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
-import Z from "../../../../../hooks/useModalDetails/useModalDetails.js";
-import $ from "../../../../../hooks/useDefaultOverviewFilterParams.js";
-import { DataOverviewHeader as B } from "../../../../internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js";
-import { FilterParam as o } from "../../../../types.js";
-import { useCallback as D, useMemo as s, useEffect as v } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DataDetailsModal as tt } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { BASE_CLASS as z, EARLIEST_PAYOUT_SINCE_DATE as ee, BASE_CLASS_DETAILS as re } from "./constants.js";
+import { PayoutsTable as se, PAYOUT_TABLE_FIELDS as te } from "../PayoutsTable/PayoutsTable.js";
+import { LIMIT_OPTIONS as le, DEFAULT_PAGE_LIMIT as oe } from "../../../../internal/Pagination/constants.js";
+import ie from "../../../../../hooks/useBalanceAccountSelection.js";
+import me from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import pe from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import fe from "../../../../../hooks/useDefaultOverviewFilterParams.js";
+import { FilterParam as i } from "../../../../types.js";
+import { useCallback as D, useMemo as o, useEffect as de } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { DataDetailsModal as ne } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
 /* empty css                     */
-import { useFilterBarState as et, FilterBarMobileSwitch as rt, FilterBar as it } from "../../../../internal/FilterBar/FilterBar.js";
-import ot from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import st from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import { useConfigContext as at } from "../../../../../core/ConfigContext/context.js";
-import { isFunction as lt } from "../../../../../utils/value/is.js";
-const Nt = ({
-  onFiltersChanged: a,
-  balanceAccounts: d,
-  allowLimitSelection: p,
-  preferredLimit: y = V,
-  onRecordSelection: u,
-  showDetails: l,
-  isLoadingBalanceAccount: F,
-  onContactSupport: f,
-  hideTitle: C
+import { useCustomColumnsData as De } from "../../../../../hooks/useCustomColumnsData.js";
+import { hasCustomField as Ee } from "../../../../utils/customData/hasCustomField.js";
+import { mergeRecords as ce } from "../../../../utils/customData/mergeRecords.js";
+import { useFilterBarState as Te, FilterBarMobileSwitch as Se, FilterBar as Fe } from "../../../../internal/FilterBar/FilterBar.js";
+import ye from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import { DataOverviewHeader as Pe } from "../../../../internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js";
+import _e from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { useConfigContext as ue } from "../../../../../core/ConfigContext/context.js";
+import { isFunction as Ie } from "../../../../../utils/value/is.js";
+const We = ({
+  onFiltersChanged: m,
+  balanceAccounts: E,
+  allowLimitSelection: c,
+  preferredLimit: h = oe,
+  onRecordSelection: T,
+  showDetails: p,
+  isLoadingBalanceAccount: N,
+  onContactSupport: S,
+  hideTitle: b,
+  dataCustomization: r
 }) => {
-  const { getPayouts: m } = at().endpoints, { activeBalanceAccount: t, balanceAccountSelectionOptions: P, onBalanceAccountSelection: I } = W(d), { defaultParams: i, nowTimestamp: _, refreshNowTimestamp: n } = $("payouts", t), A = D(
-    async (r, j) => m({ signal: j, errorLevel: "error" }, {
+  var I, L, O, A;
+  const { getPayouts: f } = ue().endpoints, { activeBalanceAccount: e, balanceAccountSelectionOptions: g, onBalanceAccountSelection: U } = ie(E), { defaultParams: l, nowTimestamp: w, refreshNowTimestamp: d } = fe("payouts", e), M = D(
+    async (s, n) => f({ signal: n, errorLevel: "error" }, {
       query: {
-        ...r,
-        createdSince: r[o.CREATED_SINCE] ?? i.current.defaultFilterParams[o.CREATED_SINCE],
-        createdUntil: r[o.CREATED_UNTIL] ?? i.current.defaultFilterParams[o.CREATED_UNTIL],
-        balanceAccountId: (t == null ? void 0 : t.id) ?? ""
+        ...s,
+        createdSince: s[i.CREATED_SINCE] ?? l.current.defaultFilterParams[i.CREATED_SINCE],
+        createdUntil: s[i.CREATED_UNTIL] ?? l.current.defaultFilterParams[i.CREATED_UNTIL],
+        balanceAccountId: (e == null ? void 0 : e.id) ?? ""
       }
     }),
-    [t == null ? void 0 : t.id, i, m]
-  ), c = et(), L = s(() => lt(a) ? a : void 0, [a]), O = s(() => p ? Q : void 0, [p]), { canResetFilters: N, error: b, fetching: h, filters: E, limit: g, limitOptions: w, records: M, resetFilters: mt, updateFilters: R, updateLimit: U, ...k } = ot({
-    fetchRecords: A,
+    [e == null ? void 0 : e.id, l, f]
+  ), F = Te(), k = o(() => Ie(m) ? m : void 0, [m]), x = o(() => c ? le : void 0, [c]), { canResetFilters: q, error: K, fetching: Y, filters: y, limit: j, limitOptions: G, records: P, resetFilters: Le, updateFilters: H, updateLimit: J, ...Q } = ye({
+    fetchRecords: M,
     dataField: "data",
-    filterParams: i.current.defaultFilterParams,
+    filterParams: l.current.defaultFilterParams,
     initialFiltersSameAsDefault: !0,
-    onFiltersChanged: L,
-    preferredLimit: y,
-    preferredLimitOptions: O,
-    enabled: !!(t != null && t.id) && !!m
+    onFiltersChanged: k,
+    preferredLimit: h,
+    preferredLimitOptions: x,
+    enabled: !!(e != null && e.id) && !!f
   });
-  v(() => {
-    n();
-  }, [E, n]);
-  const S = s(
+  de(() => {
+    d();
+  }, [y, d]);
+  const _ = o(
     () => ({
-      showDetails: l ?? !0,
-      callback: u
+      showDetails: p ?? !0,
+      callback: T
     }),
-    [l, u]
-  ), x = s(() => ({ payout: S }), [S]), { updateDetails: T, resetDetails: q, selectedDetail: z } = Z(x), K = D(
-    (r) => {
-      T({
+    [p, T]
+  ), V = D(
+    ({ records: s, retrievedData: n }) => ce(s, n, (R, a) => R.createdAt === a.createdAt),
+    []
+  ), W = o(() => {
+    var s;
+    return Ee((s = r == null ? void 0 : r.list) == null ? void 0 : s.fields, te);
+  }, [(I = r == null ? void 0 : r.list) == null ? void 0 : I.fields]), { customRecords: X, loadingCustomRecords: Z } = De({
+    records: P,
+    hasCustomColumn: W,
+    onDataRetrieve: (L = r == null ? void 0 : r.list) == null ? void 0 : L.onDataRetrieve,
+    mergeCustomData: V
+  }), $ = o(() => ({ payout: _ }), [_]), { updateDetails: u, resetDetails: v, selectedDetail: B } = pe($), C = D(
+    (s) => {
+      u({
         selection: {
           type: "payout",
-          data: { id: t == null ? void 0 : t.id, balanceAccountDescription: (t == null ? void 0 : t.description) || "", date: r.createdAt }
+          data: { id: e == null ? void 0 : e.id, balanceAccountDescription: (e == null ? void 0 : e.description) || "", date: s.createdAt }
         },
         modalSize: "small"
-      }).callback({ balanceAccountId: (t == null ? void 0 : t.id) || "", date: r.createdAt });
+      }).callback({ balanceAccountId: (e == null ? void 0 : e.id) || "", date: s.createdAt });
     },
-    [T, t]
+    [u, e == null ? void 0 : e.id, e == null ? void 0 : e.description]
   );
-  return /* @__PURE__ */ e("div", { className: G, children: [
-    /* @__PURE__ */ e(B, { hideTitle: C, titleKey: "payoutsTitle", descriptionKey: "payoutsNotice", children: /* @__PURE__ */ e(rt, { ...c }) }),
-    /* @__PURE__ */ e(it, { ...c, children: [
-      /* @__PURE__ */ e(
-        st,
+  return /* @__PURE__ */ t("div", { className: z, children: [
+    /* @__PURE__ */ t(Pe, { hideTitle: b, titleKey: "payoutsTitle", descriptionKey: "payoutsNotice", children: /* @__PURE__ */ t(Se, { ...F }) }),
+    /* @__PURE__ */ t(Fe, { ...F, children: [
+      /* @__PURE__ */ t(
+        _e,
         {
-          activeBalanceAccount: t,
-          balanceAccountSelectionOptions: P,
-          onBalanceAccountSelection: I
+          activeBalanceAccount: e,
+          balanceAccountSelectionOptions: g,
+          onBalanceAccountSelection: U
         }
       ),
-      /* @__PURE__ */ e(
-        X,
+      /* @__PURE__ */ t(
+        me,
         {
-          canResetFilters: N,
-          defaultParams: i,
-          filters: E,
-          nowTimestamp: _,
-          refreshNowTimestamp: n,
-          sinceDate: H,
+          canResetFilters: q,
+          defaultParams: l,
+          filters: y,
+          nowTimestamp: w,
+          refreshNowTimestamp: d,
+          sinceDate: ee,
           timezone: "UTC",
-          updateFilters: R
+          updateFilters: H
         }
       )
     ] }),
-    /* @__PURE__ */ e(
-      tt,
+    /* @__PURE__ */ t(
+      ne,
       {
-        className: Y,
-        onContactSupport: f,
-        selectedDetail: z,
-        resetDetails: q,
-        children: /* @__PURE__ */ e(
-          J,
+        className: re,
+        onContactSupport: S,
+        selectedDetail: B,
+        resetDetails: v,
+        dataCustomization: r == null ? void 0 : r.details,
+        children: /* @__PURE__ */ t(
+          se,
           {
-            loading: h || F || !d,
-            data: M,
+            loading: Y || N || !E || Z,
+            data: (O = r == null ? void 0 : r.list) != null && O.onDataRetrieve ? X : P,
             showPagination: !0,
-            onRowClick: K,
-            showDetails: l,
-            limit: g,
-            limitOptions: w,
-            onContactSupport: f,
-            onLimitSelection: U,
-            error: b,
-            ...k
+            onRowClick: C,
+            showDetails: p,
+            limit: j,
+            limitOptions: G,
+            onContactSupport: S,
+            onLimitSelection: J,
+            error: K,
+            customColumns: (A = r == null ? void 0 : r.list) == null ? void 0 : A.fields,
+            ...Q
           }
         )
       }
@@ -121,5 +139,5 @@ const Nt = ({
   ] });
 };
 export {
-  Nt as PayoutsOverview
+  We as PayoutsOverview
 };