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

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

@@ -1,156 +1,165 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import L from "classnames";
-import { useState as A, useMemo as B, useCallback as i, useLayoutEffect as U } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import ce from "../../../../../core/Context/useCoreContext.js";
-import { useFetch as se } from "../../../../../hooks/useFetch.js";
-import { Alert as N } from "../../../../internal/Alert/Alert.js";
-import { AlertTypeOption as M, AlertVariantOption as D } from "../../../../internal/Alert/types.js";
-import le from "../../../../internal/Button/ButtonActions/ButtonActions.js";
-import { ButtonActionsLayoutBasic as me } from "../../../../internal/Button/ButtonActions/types.js";
-import { ButtonVariant as k } from "../../../../internal/Button/types.js";
-import de from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
-import { TypographyModifier as ue, TypographyVariant as F } from "../../../../internal/Typography/types.js";
-import w from "../../../../internal/Typography/Typography.js";
-import { ActiveView as a, RefundMode as I } from "../../context/types.js";
-import { TX_DATA_ACTION_BAR as fe, TX_REFUND_STATUSES_CONTAINER as pe, TX_REFUND_RESPONSE_ICON as V, TX_REFUND_RESPONSE_ERROR_ICON as Te, TX_REFUND_RESPONSE_SUCCESS_ICON as Ae, TX_STATUS_BOX as Re, TX_DATA_CLASS as Ee, TX_REFUND_RESPONSE as Se } from "../constants.js";
-import _e from "../details/TransactionDataProperties.js";
-import X from "../details/TransactionDetailsDataContainer.js";
-import Ne from "../details/TransactionStatusBox.js";
-import { TransactionRefundFullAmountInput as De, TransactionRefundPartialAmountInput as Ie } from "../refund/TransactionRefundAmount.js";
-import he from "../refund/TransactionRefundNotice.js";
-import be from "../refund/TransactionRefundReason.js";
+import F from "classnames";
+import { useState as N, useMemo as V, useCallback as i, useLayoutEffect as X } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import ue from "../../../../../core/Context/useCoreContext.js";
+import { useFetch as de } from "../../../../../hooks/useFetch.js";
+import { Alert as v } from "../../../../internal/Alert/Alert.js";
+import { AlertTypeOption as Y, AlertVariantOption as h } from "../../../../internal/Alert/types.js";
+import fe from "../../../../internal/Button/ButtonActions/ButtonActions.js";
+import { ButtonActionsLayoutBasic as pe } from "../../../../internal/Button/ButtonActions/types.js";
+import { ButtonVariant as b } from "../../../../internal/Button/types.js";
+import Ae from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
+import { TypographyModifier as Te, TypographyVariant as H } from "../../../../internal/Typography/types.js";
+import x from "../../../../internal/Typography/Typography.js";
+import { ActiveView as a, RefundMode as y } from "../../context/types.js";
+import { TX_DATA_ACTION_BAR as Re, TX_REFUND_STATUSES_CONTAINER as Ne, TX_REFUND_RESPONSE_ICON as G, TX_REFUND_RESPONSE_ERROR_ICON as Ee, TX_REFUND_RESPONSE_SUCCESS_ICON as Se, TX_STATUS_BOX as _e, TX_DATA_CLASS as De, TX_REFUND_RESPONSE as Ie } from "../constants.js";
+import ve from "../details/TransactionDataProperties.js";
+import $ from "../details/TransactionDetailsDataContainer.js";
+import he from "../details/TransactionStatusBox.js";
+import { TransactionRefundFullAmountInput as be, TransactionRefundPartialAmountInput as ye } from "../refund/TransactionRefundAmount.js";
+import Ce from "../refund/TransactionRefundNotice.js";
+import Oe from "../refund/TransactionRefundReason.js";
 /* empty css                     */
-import { useTransaction as ve } from "../../hooks/useTransaction/useTransaction.js";
-import { useTransactionRefundMetadata as ye } from "../../hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js";
-import { Icon as x } from "../../../../internal/Icon/Icon.js";
-import H from "../../../../internal/Button/Button.js";
-import { TransactionRefundProvider as Ce } from "../../context/refund/context.js";
-import { TransactionDetailsProvider as Oe } from "../../context/details/context.js";
-import { EMPTY_ARRAY as Pe, EMPTY_OBJECT as ge } from "../../../../../utils/value/constants.js";
-import { useConfigContext as Le } from "../../../../../core/ConfigContext/context.js";
-const Y = ({
-  children: c,
-  renderViewActionButtons: s,
-  renderViewMessageBox: o
-}) => /* @__PURE__ */ e("div", { className: Ee, children: [
-  c,
-  o && o(),
-  s()
-] }), G = ({
-  action: c,
-  title: s,
-  renderIcon: o,
-  subtitle: l
-}) => /* @__PURE__ */ e("div", { className: Se, children: [
-  o && o(),
-  /* @__PURE__ */ e(w, { className: ue.MEDIUM, variant: F.TITLE, children: s }),
-  /* @__PURE__ */ e(w, { variant: F.BODY, children: l }),
-  c && c()
-] }), lt = ({ transaction: c, extraFields: s }) => {
-  var g;
-  const [o, l] = A(a.DETAILS), [h, $] = A(), [b, j] = A(), [m, v] = A(!1), { fetchingTransaction: q, refreshTransaction: p, transaction: n, transactionNavigator: W } = ve(c), {
-    refundable: z,
-    refundableAmount: J,
-    refundableAmountLabel: R,
-    refundAvailable: K,
-    refundCurrency: Q,
-    refundDisabled: y,
-    refundedState: Z,
-    refundStatuses: d,
+import { useTransaction as ge } from "../../hooks/useTransaction/useTransaction.js";
+import { useTransactionRefundMetadata as Pe } from "../../hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js";
+import { Icon as j } from "../../../../internal/Icon/Icon.js";
+import q from "../../../../internal/Button/Button.js";
+import { TransactionRefundProvider as Le } from "../../context/refund/context.js";
+import { TransactionDetailsProvider as Be } from "../../context/details/context.js";
+import { EMPTY_ARRAY as Ue, EMPTY_OBJECT as Me } from "../../../../../utils/value/constants.js";
+import { useConfigContext as ke } from "../../../../../core/ConfigContext/context.js";
+const W = ({
+  children: s,
+  renderViewActionButtons: o,
+  renderViewMessageBox: c
+}) => /* @__PURE__ */ e("div", { className: De, children: [
+  s,
+  c && c(),
+  o()
+] }), z = ({
+  action: s,
+  title: o,
+  renderIcon: c,
+  subtitle: p
+}) => /* @__PURE__ */ e("div", { className: Ie, children: [
+  c && c(),
+  /* @__PURE__ */ e(x, { className: Te.MEDIUM, variant: H.TITLE, children: o }),
+  /* @__PURE__ */ e(x, { variant: H.BODY, children: p }),
+  s && s()
+] }), ft = ({ transaction: s, extraFields: o, dataCustomization: c }) => {
+  var M;
+  const [p, E] = N(a.DETAILS), [C, J] = N(), [O, K] = N(), [m, g] = N(!1), { fetchingTransaction: Q, refreshTransaction: A, transaction: n, transactionNavigator: Z } = ge(s), {
+    refundable: ee,
+    refundableAmount: te,
+    refundableAmountLabel: S,
+    refundAvailable: ne,
+    refundCurrency: re,
+    refundDisabled: P,
+    refundedState: oe,
+    refundStatuses: u,
     refundMode: T,
-    refundLocked: E
-  } = ye(n), u = B(() => y || m, [y, m]), { i18n: r } = ce(), ee = Object.freeze((n == null ? void 0 : n.lineItems) ?? Pe), te = i((t) => $(t), []), ne = i((t) => j(t), []), S = i(
-    (t) => t === a.REFUND && u,
-    [u]
-  ), { getBalanceAccounts: f } = Le().endpoints, { data: _ } = se(
-    B(
+    refundLocked: _
+  } = Pe(n), d = V(() => P || m, [P, m]), { i18n: r } = ue(), ae = Object.freeze((n == null ? void 0 : n.lineItems) ?? Ue), ce = i((t) => J(t), []), ie = i((t) => K(t), []), D = i(
+    (t) => t === a.REFUND && d,
+    [d]
+  ), { getBalanceAccounts: f } = ke().endpoints, { data: I } = de(
+    V(
       () => ({
         fetchOptions: {
           enabled: !!f && !n.balanceAccount && !!n.balanceAccountId,
           keepPrevData: !0
         },
-        queryFn: async () => f == null ? void 0 : f(ge)
+        queryFn: async () => f == null ? void 0 : f(Me)
       }),
       [n.balanceAccountId, n.balanceAccount, f]
     )
-  ), re = i(
-    (t) => void (S(t) || l(t)),
-    [S]
-  ), C = i(() => {
-    const t = [h, b].filter(Boolean);
-    return t.length ? /* @__PURE__ */ e(X, { className: fe, children: /* @__PURE__ */ e(le, { actions: t, layout: me.BUTTONS_END }) }) : null;
-  }, [h, b]), oe = i(() => {
-    p(), v(!0);
-  }, [v, p]), ae = i(() => d != null && d.length || E || m ? /* @__PURE__ */ e("div", { className: pe, children: [
-    (E || m) && /* @__PURE__ */ e(
-      N,
+  ), se = i(
+    (t) => void (D(t) || E(t)),
+    [D]
+  ), L = i(() => {
+    const t = o ? Object.values(o).filter((l) => l.type === "button").map((l) => {
+      var k, w;
+      return {
+        title: l.value,
+        variant: b.SECONDARY,
+        event: (k = l.config) == null ? void 0 : k.action,
+        classNames: (w = l.config) != null && w.className ? [l.config.className] : []
+      };
+    }) : [], R = [C, O, ...t].filter(Boolean);
+    return R.length ? /* @__PURE__ */ e($, { className: Re, children: /* @__PURE__ */ e(fe, { actions: R, layout: pe.BUTTONS_END }) }) : null;
+  }, [o, C, O]), le = i(() => {
+    A(), g(!0);
+  }, [g, A]), me = i(() => u != null && u.length || _ || m ? /* @__PURE__ */ e("div", { className: Ne, children: [
+    (_ || m) && /* @__PURE__ */ e(
+      v,
       {
-        type: M.HIGHLIGHT,
-        variant: D.TIP,
+        type: Y.HIGHLIGHT,
+        variant: h.TIP,
         description: `${r.get("refund.theRefundIsBeingProcessed")} ${r.get("pleaseComeBackLater")}`
       }
     ),
-    d.map((t, ie) => /* @__PURE__ */ e(
-      N,
+    u.map((t, R) => /* @__PURE__ */ e(
+      v,
       {
-        variant: D.TIP,
-        type: (t == null ? void 0 : t.type) ?? M.HIGHLIGHT,
+        variant: h.TIP,
+        type: (t == null ? void 0 : t.type) ?? Y.HIGHLIGHT,
         description: t == null ? void 0 : t.label
       },
-      `${Math.random()}-${ie}`
+      `${Math.random()}-${R}`
     ))
-  ] }) : null, [r, d, E, m]), O = n.balanceAccount ?? ((g = _ == null ? void 0 : _.data) == null ? void 0 : g.find((t) => t.id === n.balanceAccountId));
-  if (U(() => {
-    l(a.DETAILS);
-  }, [n]), U(() => {
-    u && l(a.DETAILS);
-  }, [u]), q)
-    return /* @__PURE__ */ e(de, { skeletonRowNumber: 5 });
-  if (S(o)) return null;
-  const P = {
-    lineItems: ee,
-    refundAvailable: K,
-    refundDisabled: u,
-    setActiveView: re,
-    setPrimaryAction: te,
-    setSecondaryAction: ne
+  ] }) : null, [r, u, _, m]), B = n.balanceAccount ?? ((M = I == null ? void 0 : I.data) == null ? void 0 : M.find((t) => t.id === n.balanceAccountId));
+  if (X(() => {
+    E(a.DETAILS);
+  }, [n]), X(() => {
+    d && E(a.DETAILS);
+  }, [d]), Q)
+    return /* @__PURE__ */ e(Ae, { skeletonRowNumber: 5 });
+  if (D(p)) return null;
+  const U = {
+    lineItems: ae,
+    refundAvailable: ne,
+    refundDisabled: d,
+    setActiveView: se,
+    setPrimaryAction: ce,
+    setSecondaryAction: ie
   };
-  switch (o) {
+  switch (p) {
     case a.DETAILS:
-      return /* @__PURE__ */ e(Y, { renderViewActionButtons: C, renderViewMessageBox: ae, children: /* @__PURE__ */ e(
-        Oe,
+      return /* @__PURE__ */ e(W, { renderViewActionButtons: L, renderViewMessageBox: me, children: /* @__PURE__ */ e(
+        Be,
         {
-          ...P,
-          transaction: !n.balanceAccount && O ? { ...n, balanceAccount: O } : { ...n },
-          transactionNavigator: W,
-          extraFields: s,
+          ...U,
+          transaction: !n.balanceAccount && B ? { ...n, balanceAccount: B } : { ...n },
+          transactionNavigator: Z,
+          extraFields: o,
+          dataCustomization: c,
           children: [
-            /* @__PURE__ */ e(X, { className: Re, children: /* @__PURE__ */ e(Ne, { transaction: n, refundedState: Z }) }),
-            /* @__PURE__ */ e(_e, {})
+            /* @__PURE__ */ e($, { className: _e, children: /* @__PURE__ */ e(he, { transaction: n, refundedState: oe }) }),
+            /* @__PURE__ */ e(ve, {})
           ]
         }
       ) });
     case a.REFUND:
-      return /* @__PURE__ */ e(Y, { renderViewActionButtons: C, children: /* @__PURE__ */ e(
-        Ce,
+      return /* @__PURE__ */ e(W, { renderViewActionButtons: L, children: /* @__PURE__ */ e(
+        Le,
         {
-          ...P,
-          availableAmount: J,
-          currency: Q,
+          ...U,
+          availableAmount: te,
+          currency: re,
           refundMode: T,
-          refreshTransaction: p,
+          refreshTransaction: A,
           transactionId: n.id,
           children: [
-            /* @__PURE__ */ e(he, {}),
-            z && /* @__PURE__ */ e(be, {}),
-            T === I.FULL_AMOUNT && /* @__PURE__ */ e(De, {}),
-            (T === I.PARTIAL_AMOUNT || T === I.PARTIAL_LINE_ITEMS) && /* @__PURE__ */ e(Ie, { locale: r.locale }),
-            R && /* @__PURE__ */ e(
-              N,
+            /* @__PURE__ */ e(Ce, {}),
+            ee && /* @__PURE__ */ e(Oe, {}),
+            T === y.FULL_AMOUNT && /* @__PURE__ */ e(be, {}),
+            (T === y.PARTIAL_AMOUNT || T === y.PARTIAL_LINE_ITEMS) && /* @__PURE__ */ e(ye, { locale: r.locale }),
+            S && /* @__PURE__ */ e(
+              v,
               {
-                variant: D.TIP,
-                type: R.type,
-                description: R.description
+                variant: h.TIP,
+                type: S.type,
+                description: S.description
               }
             )
           ]
@@ -158,22 +167,22 @@ const Y = ({
       ) });
     case a.REFUND_SUCCESS:
       return /* @__PURE__ */ e(
-        G,
+        z,
         {
-          renderIcon: () => /* @__PURE__ */ e(x, { name: "checkmark-circle-fill", className: L(V, Ae) }),
+          renderIcon: () => /* @__PURE__ */ e(j, { name: "checkmark-circle-fill", className: F(G, Se) }),
           title: r.get("refundActionSuccessTitle"),
           subtitle: r.get("refundActionSuccessSubtitle"),
-          action: () => /* @__PURE__ */ e(H, { variant: k.SECONDARY, onClick: oe, children: r.get("goBack") })
+          action: () => /* @__PURE__ */ e(q, { variant: b.SECONDARY, onClick: le, children: r.get("goBack") })
         }
       );
     case a.REFUND_ERROR:
       return /* @__PURE__ */ e(
-        G,
+        z,
         {
-          renderIcon: () => /* @__PURE__ */ e(x, { name: "cross-circle-fill", className: L(V, Te) }),
+          renderIcon: () => /* @__PURE__ */ e(j, { name: "cross-circle-fill", className: F(G, Ee) }),
           title: r.get("refundActionErrorTitle"),
           subtitle: r.get("refundActionErrorSubtitle"),
-          action: () => /* @__PURE__ */ e(H, { variant: k.SECONDARY, onClick: p, children: r.get("goBack") })
+          action: () => /* @__PURE__ */ e(q, { variant: b.SECONDARY, onClick: A, children: r.get("goBack") })
         }
       );
     default:
@@ -181,6 +190,6 @@ const Y = ({
   }
 };
 export {
-  lt as TransactionDataContent,
-  lt as default
+  ft as TransactionDataContent,
+  ft as default
 };

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

@@ -1,52 +1,82 @@
-import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useMemo as v } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import g from "../../../../internal/CopyText/CopyText.js";
-import { TX_DETAILS_RESERVED_FIELDS_SET as x, TX_DATA_LIST as E, TX_DATA_LABEL as P } from "../constants.js";
-import { _isCustomDataObject as k } from "../../../../internal/DataGrid/components/TableCells.js";
+import S from "../../../../internal/CopyText/CopyText.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as b, TX_DATA_LIST as F, TX_DATA_LABEL as B } from "../constants.js";
+import { isCustomDataObject as p } from "../../../../internal/DataGrid/components/TableCells.js";
 import C from "../../../../../core/Context/useCoreContext.js";
-import { useTransactionDetailsContext as I } from "../../context/details/context.js";
-import L from "../../../../internal/StructuredList/StructuredList.js";
-import { isNullish as S } from "../../../../../utils/value/is.js";
-const $ = () => {
-  const { i18n: s } = C(), { transaction: u, extraFields: l } = I();
+import K from "../../../../internal/Link/Link.js";
+import { TypographyVariant as k } from "../../../../internal/Typography/types.js";
+import D from "../../../../internal/Typography/Typography.js";
+import O from "../../../../internal/DataGrid/components/Icon.js";
+import c from "classnames";
+import { useTransactionDetailsContext as j } from "../../context/details/context.js";
+import V from "../../../../internal/StructuredList/StructuredList.js";
+import { isNullish as X } from "../../../../../utils/value/is.js";
+const re = () => {
+  var y;
+  const { i18n: u } = C(), { transaction: m, extraFields: f, dataCustomization: i } = j();
   return v(() => {
-    const { balanceAccount: a, category: p, id: y, paymentPspReference: f, refundMetadata: e } = u, r = p === "Refund", t = null, c = (n) => {
-      if (S(n)) return null;
-      const { value: o, currency: _ } = n;
-      return s.amount(o, _);
-    }, m = c(u.deductedAmount), d = c(u.originalAmount), R = r ? "refund.refundFee" : "refund.fee", T = r ? "refund.originalPayment" : "refund.originalAmount", A = r ? "refund.paymentPspReference" : "refund.pspReference", D = [
-      // amounts
-      d ? { key: T, value: d } : t,
-      m ? { key: R, value: m } : t,
-      // balance account
-      a != null && a.description ? { key: "account", value: a.description } : t,
-      // custom data
-      ...Object.entries(l || {}).filter(([n]) => !x.has(n)).map(([n, o]) => ({
-        key: n,
-        value: k(o) ? o.value : o
-      })) || {},
-      // refund reason
-      r && (e != null && e.refundReason) ? {
-        key: "refundReason",
-        value: s.has(`refundReason.${e.refundReason}`) ? s.get(`refundReason.${e.refundReason}`) : e.refundReason
-      } : t,
-      // reference id
-      { key: "referenceID", value: /* @__PURE__ */ i(g, { type: "Default", textToCopy: y, showCopyTextTooltip: !1 }) },
-      r && (e != null && e.refundPspReference) ? { key: "refund.refundPspReference", value: e.refundPspReference } : t,
-      // psp reference
-      f ? { key: A, value: f } : t
-    ].filter(Boolean);
-    return /* @__PURE__ */ i(
-      L,
+    const { balanceAccount: l, category: _, id: x, paymentPspReference: R, refundMetadata: n } = m, d = _ === "Refund", a = null, T = (t) => {
+      if (X(t)) return null;
+      const { value: r, currency: o } = t;
+      return u.amount(r, o);
+    }, h = T(m.deductedAmount), A = T(m.originalAmount), P = d ? "refund.refundFee" : "refund.fee", E = d ? "refund.originalPayment" : "refund.originalAmount", I = d ? "refund.paymentPspReference" : "refund.pspReference", N = [
+      ...[
+        // amounts
+        A ? { key: E, value: A, id: "originalAmount" } : a,
+        h ? { key: P, value: h, id: "deductedAmount" } : a,
+        // balance account
+        l != null && l.description ? { key: "account", value: l.description, id: "description" } : a,
+        // refund reason
+        d && (n != null && n.refundReason) ? {
+          key: "refundReason",
+          value: u.has(`refundReason.${n.refundReason}`) ? u.get(`refundReason.${n.refundReason}`) : n.refundReason,
+          id: "refundReason"
+        } : a,
+        // reference id
+        { key: "referenceID", value: /* @__PURE__ */ s(S, { type: "Default", textToCopy: x, showCopyTextTooltip: !1 }), id: "id" },
+        d && (n != null && n.refundPspReference) ? { key: "refund.refundPspReference", value: n.refundPspReference, id: "refundPspReference" } : a,
+        // psp reference
+        R ? { key: I, value: R, id: "paymentPspReference" } : a
+      ].filter(Boolean).filter((t) => {
+        var r, o;
+        return !((o = (r = i == null ? void 0 : i.details) == null ? void 0 : r.fields) != null && o.some((e) => e.key === t.id && e.visibility === "hidden"));
+      }),
+      ...Object.entries(f || {}).filter(([t, r]) => !b.has(t) && r.type !== "button" && r.visibility !== "hidden").map(([t, r]) => ({
+        key: t,
+        value: p(r) ? r.value : r,
+        type: p(r) ? r.type : "text",
+        config: p(r) ? r.config : void 0
+      })) || {}
+    ];
+    return /* @__PURE__ */ s(
+      V,
       {
-        classNames: E,
-        items: D,
+        classNames: F,
+        items: N,
         layout: "5-7",
-        renderLabel: (n) => /* @__PURE__ */ i("div", { className: P, children: n })
+        align: "start",
+        renderLabel: (t) => /* @__PURE__ */ s("div", { className: B, children: t }),
+        renderValue: (t, r, o, e) => {
+          if (o === "link" && e)
+            return /* @__PURE__ */ s(K, { classNames: [c(e == null ? void 0 : e.className)], href: e.href, target: e.target || "_blank", children: t });
+          if (o === "icon" && e) {
+            const L = { url: e == null ? void 0 : e.src, alt: e.alt || t };
+            return /* @__PURE__ */ s("div", { className: c("adyen-pe-transaction-data__list-icon-value", e == null ? void 0 : e.className), children: [
+              /* @__PURE__ */ s(O, { ...L }),
+              /* @__PURE__ */ s(D, { variant: k.BODY, children: [
+                " ",
+                t,
+                " "
+              ] })
+            ] });
+          }
+          return /* @__PURE__ */ s(D, { className: c(e == null ? void 0 : e.className), variant: k.BODY, children: t });
+        }
       }
     );
-  }, [s, u]);
+  }, [(y = i == null ? void 0 : i.details) == null ? void 0 : y.fields, f, u, m]);
 };
 export {
-  $ as default
+  re as default
 };

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

@@ -1,90 +1,98 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { memo as I } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { createContext as N, Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
-import { useMemo as o, useCallback as R, useEffect as w, useContext as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import j from "../../../../../core/Context/useCoreContext.js";
-import { ButtonVariant as y } from "../../../../internal/Button/types.js";
+import { memo as N } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { createContext as O, Fragment as R } from "../../../../../external/preact/dist/preact.module.js";
+import { useMemo as o, useCallback as w, useEffect as y, useContext as j } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import z from "../../../../../core/Context/useCoreContext.js";
+import { ButtonVariant as A } from "../../../../internal/Button/types.js";
 import { ActiveView as B } from "../types.js";
-import { Icon as A } from "../../../../internal/Icon/Icon.js";
-import { EMPTY_ARRAY as _, EMPTY_OBJECT as E } from "../../../../../utils/value/constants.js";
+import { Icon as E } from "../../../../internal/Icon/Icon.js";
+import { EMPTY_ARRAY as _, EMPTY_OBJECT as f } from "../../../../../utils/value/constants.js";
 import { noop as D } from "../../../../../utils/common.js";
-const M = N({
+const M = O({
   availableItems: _,
   primaryAction: D,
   secondaryAction: D,
-  transaction: E,
-  extraFields: E
-}), Q = I(
+  transaction: f,
+  extraFields: f,
+  dataCustomization: f
+}), S = N(
   ({
     children: P,
     lineItems: Y,
     refundAvailable: n,
-    refundDisabled: f,
+    refundDisabled: u,
     setActiveView: l,
-    setPrimaryAction: u,
-    setSecondaryAction: p,
+    setPrimaryAction: p,
+    setSecondaryAction: v,
     transaction: i,
     transactionNavigator: k,
-    extraFields: F
+    extraFields: F,
+    dataCustomization: I
   }) => {
-    const { i18n: r } = j(), { currentTransaction: v, canNavigateBackward: T, canNavigateForward: g, backward: x, forward: C } = k, b = o(() => ({ title: r.get("refundAction") }), [r]), a = o(() => !n || f, [n, f]), s = R(
+    const { i18n: r } = z(), { currentTransaction: T, canNavigateBackward: g, canNavigateForward: C, backward: x, forward: b } = k, h = o(() => ({ title: r.get("refundAction") }), [r]), a = o(() => !n || u, [n, u]), s = w(
       () => void (!a && l(B.REFUND)),
       [a, l]
     ), t = o(() => {
-      if (v === i.id) {
-        if (T) return 2;
-        if (g) return 1;
+      if (T === i.id) {
+        if (g) return 2;
+        if (C) return 1;
       }
-    }, [T, g, v, i]), c = R(() => {
+    }, [g, C, T, i]), c = w(() => {
       switch (t) {
         case 2:
           return void x();
         case 1:
-          return void C();
+          return void b();
       }
-    }, [t, x, C]), d = o(() => {
+    }, [t, x, b]), d = o(() => {
       switch (t) {
         case 2:
           return {
             title: r.get("refund.returnToRefund"),
-            renderTitle: (m) => /* @__PURE__ */ e(h, { children: [
-              /* @__PURE__ */ e(A, { style: { transform: "scaleX(-1)" }, name: "angle-right" }),
+            renderTitle: (m) => /* @__PURE__ */ e(R, { children: [
+              /* @__PURE__ */ e(E, { style: { transform: "scaleX(-1)" }, name: "angle-right" }),
               /* @__PURE__ */ e("span", { children: m })
             ] })
           };
         case 1:
           return {
             title: r.get("refund.goToPayment"),
-            renderTitle: (m) => /* @__PURE__ */ e(h, { children: [
-              /* @__PURE__ */ e(A, { name: "angle-right" }),
+            renderTitle: (m) => /* @__PURE__ */ e(R, { children: [
+              /* @__PURE__ */ e(E, { name: "angle-right" }),
               /* @__PURE__ */ e("span", { children: m })
             ] })
           };
       }
     }, [t, r]);
-    return w(() => {
-      u(
+    return y(() => {
+      p(
         n ? Object.freeze({
           disabled: a,
           event: s,
-          variant: y.PRIMARY,
-          ...b
+          variant: A.PRIMARY,
+          ...h
         }) : void 0
       );
-    }, [s, n, a, b, u]), w(() => {
-      p(
+    }, [s, n, a, h, p]), y(() => {
+      v(
         t && d ? Object.freeze({
           disabled: !1,
           event: c,
-          variant: y.SECONDARY,
+          variant: A.SECONDARY,
           ...d
         }) : void 0
       );
-    }, [t, c, d, p]), /* @__PURE__ */ e(M.Provider, { value: { availableItems: Y, primaryAction: s, secondaryAction: c, transaction: i, extraFields: F }, children: P });
+    }, [t, c, d, v]), /* @__PURE__ */ e(
+      M.Provider,
+      {
+        value: { availableItems: Y, primaryAction: s, secondaryAction: c, transaction: i, extraFields: F, dataCustomization: I },
+        children: P
+      }
+    );
   }
-), S = () => O(M);
+), W = () => j(M);
 export {
-  Q as TransactionDetailsProvider,
-  S as default,
-  S as useTransactionDetailsContext
+  S as TransactionDetailsProvider,
+  W as default,
+  W as useTransactionDetailsContext
 };

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

@@ -1,27 +1,27 @@
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as u } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveViewport as t, mediaQueries as o } from "../../../../../hooks/useResponsiveViewport.js";
+import { useResponsiveContainer as t, containerQueries as o } from "../../../../../hooks/useResponsiveContainer.js";
 import c from "../../../../internal/FormFields/Select/Select.js";
 const y = u(
   ({
-    placeholder: i,
+    placeholder: n,
     selection: r,
     selectionOptions: e,
-    updateSelection: l
+    updateSelection: i
   }) => {
-    const s = t(o.down.xs), m = t(o.only.sm), n = t(o.only.md);
+    const l = t(o.down.xs), s = t(o.only.sm), m = t(o.only.md);
     return e && e.length > 1 ? /* @__PURE__ */ a(
       c,
       {
-        onChange: l,
+        onChange: i,
         filterable: !1,
         multiSelect: !0,
-        placeholder: i,
+        placeholder: n,
         selected: r,
         withoutCollapseIndicator: !0,
         items: e,
-        showOverlay: s,
-        fitPosition: n || m
+        showOverlay: l,
+        fitPosition: m || s
       }
     ) : null;
   }