@adyen/adyen-platform-experience-web 1.7.1 → 1.8.0

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

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

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

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

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

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

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

@@ -1,22 +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);
+import { PayoutsOverview as s } from "../PayoutsOverview/PayoutsOverview.js";
+import { BASE_CLASS as u } from "./constants.js";
+function p({ ...o }) {
+  const { balanceAccounts: a, isBalanceAccountIdWrong: e, isFetching: n, error: t } = c(o.balanceAccountId);
   return /* @__PURE__ */ r(
     i,
     {
-      balanceAccountsError: n,
-      className: s,
-      errorMessage: "weCouldNotLoadThePayoutsOverview",
-      isBalanceAccountIdWrong: a,
+      balanceAccountsError: t,
+      className: u,
+      errorMessage: "payouts.overview.errors.unavailable",
+      isBalanceAccountIdWrong: e,
       onContactSupport: o.onContactSupport,
-      children: /* @__PURE__ */ r(u, { ...o, balanceAccounts: t, isLoadingBalanceAccount: e })
+      children: /* @__PURE__ */ r(s, { ...o, balanceAccounts: a, isLoadingBalanceAccount: n })
     }
   );
 }
 export {
-  f as default
+  p as default
 };