@adyen/adyen-platform-experience-web 1.8.1 → 1.10.0

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

@@ -0,0 +1,51 @@
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as T } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TX_TIMELINE_VALUE as C, TX_TIMELINE_LABEL as D } from "../../constants.js";
+import { getTransactionTimelineTxType as _, getTransactionTimelineTxStatus as g } from "../../../../utils/translation/getters.js";
+import { TimelineDateFormat as M } from "../../../../internal/Timeline/types.js";
+import { TypographyVariant as d, TypographyElement as f } from "../../../../internal/Typography/types.js";
+import { TimelineItem as N } from "../../../../internal/Timeline/components/TimelineItem.js";
+import w from "../../../../../core/Context/useCoreContext.js";
+import y from "../../../../internal/Typography/Typography.js";
+import x from "../../../../internal/Timeline/Timeline.js";
+import P from "../../../../internal/StructuredList/StructuredList.js";
+import { uniqueId as V } from "../../../../../utils/random/uniqueId.js";
+const u = ({ transaction: e }) => {
+  var r;
+  const s = e.createdAt, t = e.events, i = (r = e.balanceAccount) == null ? void 0 : r.timeZone, n = m(
+    () => ({
+      format: M.FULL_DATE_EXACT_TIME_WITHOUT_SECONDS,
+      date: new Date(s),
+      timezone: i
+    }),
+    [s, i]
+  ), l = m(() => {
+    const o = /* @__PURE__ */ new WeakMap();
+    return t == null || t.forEach((c) => o.set(c, V())), o;
+  }, [t]);
+  return t ? /* @__PURE__ */ a(x, { showMore: { limit: 2, placement: "before-last" }, children: t.map((o) => /* @__PURE__ */ a(u.Item, { event: o, defaultTimestamp: n }, l.get(o))) }) : null;
+}, v = (e) => /* @__PURE__ */ a(y, { el: f.DIV, variant: d.CAPTION, className: D, children: e }), S = (e) => /* @__PURE__ */ a(y, { el: f.DIV, variant: d.CAPTION, className: C, children: e });
+u.Item = T(({ defaultTimestamp: e, event: s }) => {
+  const { amount: t, createdAt: i, status: n, type: l } = s, { i18n: r } = w(), o = m(() => ({ ...e, date: new Date(i) }), [e, i]), c = m(() => _(r, l), [r, l]), I = m(() => {
+    const { currency: p, value: E } = t, h = `${r.amount(E, p, { hideCurrency: !0 })} ${p}`, A = g(r, n);
+    return [
+      { key: "transactions.details.timeline.fields.amount", value: h },
+      { key: "transactions.details.timeline.fields.status", value: A }
+    ];
+  }, [r, t, n]), L = n.toLowerCase().includes("refund") ? "Refund" : n.toLowerCase().includes("auth") ? "Capture" : c;
+  return /* @__PURE__ */ a(N, { title: L, timestamp: o, children: /* @__PURE__ */ a(
+    P,
+    {
+      align: "start",
+      layout: "3-9",
+      items: I,
+      renderLabel: v,
+      renderValue: S
+    }
+  ) });
+});
+const K = T(u);
+export {
+  K as default
+};

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

@@ -0,0 +1,67 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as y } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { RefundedState as T } from "../../types.js";
+import { useMemo as h, useCallback as A, useRef as P, useEffect as _ } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TX_REFUND_STATUSES_CONTAINER as I } from "../../constants.js";
+import { AlertVariantOption as N, AlertTypeOption as p } from "../../../../internal/Alert/types.js";
+import v from "../../../../../core/Context/useCoreContext.js";
+import { Alert as F } from "../../../../internal/Alert/Alert.js";
+import { TypographyVariant as R, TypographyElement as E } from "../../../../internal/Typography/types.js";
+import L from "../../../../internal/Typography/Typography.js";
+const b = {
+  type: p.HIGHLIGHT,
+  variant: N.TIP
+}, k = y(
+  ({
+    fullRefundFailed: m,
+    fullRefundInProgress: d,
+    refundAmounts: s,
+    refundCurrency: l,
+    refundedAmount: c,
+    refundedState: f,
+    refundLocked: u
+  }) => {
+    const { i18n: t } = v(), a = h(() => {
+      const e = new Intl.ListFormat(t.locale, { type: "conjunction" });
+      return (o) => e.format(o.map((g) => t.amount(g, l)));
+    }, [t, l]), r = A(({ description: e, ...o }) => {
+      n.current.push(
+        /* @__PURE__ */ i(F, { ...b, ...o, children: /* @__PURE__ */ i(L, { className: "adyen-pe-alert__description", el: E.DIV, variant: R.BODY, wide: !0, children: e }) })
+      );
+    }, []), n = P([]);
+    if (f === T.FULL)
+      r({ description: t.get("transactions.details.refund.alerts.refundedFull") });
+    else {
+      if (c > 0) {
+        const e = { amount: a([c]) };
+        r({ description: t.get("transactions.details.refund.alerts.refundedAmount", { values: e }) });
+      }
+      if (u)
+        r({ description: t.get("transactions.details.refund.alerts.inProgressBlocked") });
+      else {
+        if (s.in_progress && s.in_progress.length > 0)
+          if (d)
+            r({ description: t.get("transactions.details.refund.alerts.inProgress") });
+          else {
+            const e = { amount: a(s.in_progress) };
+            r({ description: t.get("transactions.details.refund.alerts.inProgressAmount", { values: e }) });
+          }
+        if (s.failed && s.failed.length > 0) {
+          const e = p.WARNING;
+          if (m)
+            r({ type: e, description: t.get("transactions.details.refund.alerts.notPossible") });
+          else {
+            const o = { amount: a(s.failed) };
+            r({ type: e, description: t.get("transactions.details.refund.alerts.notPossibleAmount", { values: o }) });
+          }
+        }
+      }
+    }
+    return _(() => {
+      n.current = [];
+    }), n.current.length > 0 ? /* @__PURE__ */ i("div", { className: I, children: n.current }) : null;
+  }
+);
+export {
+  k as default
+};

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

@@ -0,0 +1,134 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { sharedTransactionDetailsEventProperties as C, TX_DATA_CLASS as M, TX_REFUND_RESPONSE as L, TX_REFUND_RESPONSE_ICON as F, TX_REFUND_RESPONSE_SUCCESS_ICON as b, TX_REFUND_RESPONSE_ERROR_ICON as w, REFUND_REASONS as K } from "../../constants.js";
+import { memo as U } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useState as A, useCallback as y, useRef as D, useEffect as S, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import k from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import v from "../../../../../core/Context/useCoreContext.js";
+import X from "../../../../../hooks/useComponentTiming.js";
+import B from "./PaymentRefundActions.js";
+import V from "./PaymentRefundAmount.js";
+import H from "./PaymentRefundNotice.js";
+import Y from "./PaymentRefundReason.js";
+import { Alert as x } from "../../../../internal/Alert/Alert.js";
+import G from "../../../../internal/Button/Button.js";
+import I from "../../../../internal/Typography/Typography.js";
+import { ActiveView as W, RefundMode as m } from "../../types.js";
+import { TypographyVariant as g, TypographyElement as j, TypographyModifier as q } from "../../../../internal/Typography/types.js";
+import { AlertTypeOption as z, AlertVariantOption as J } from "../../../../internal/Alert/types.js";
+import { ButtonVariant as Q } from "../../../../internal/Button/types.js";
+import Z from "classnames";
+import { Icon as $ } from "../../../../internal/Icon/Icon.js";
+import { clamp as ee } from "../../../../../utils/value/number.js";
+const _ = ({ disabled: c, refreshTransaction: a, setActiveView: r, setLocked: t, ...f }) => {
+  const [s, p] = A(), R = y(() => void (E.current = !0), []), l = y(() => t(!0), [t]), n = y(() => r(W.DETAILS), [r]), { duration: u } = X(), i = D(!1), E = D(!1), o = k();
+  return S(() => {
+    var d;
+    i.current || (i.current = !0, (d = o.addEvent) == null || d.call(o, "Switched to refund view", C));
+  }, [o]), S(() => {
+    c && !s && n(), s === "done" && l();
+  }, [c, l, s, n]), S(() => () => {
+    var d;
+    u.current !== void 0 && !E.current && ((d = o.addEvent) == null || d.call(o, "Cancelled refund", C));
+  }, [u, o]), s ? /* @__PURE__ */ e(_.Result, { result: s, refreshTransaction: a, showDetails: n }) : /* @__PURE__ */ e(_.Form, { ...f, beginRefund: R, setRefundResult: p, showDetails: n });
+};
+_.Form = U(
+  ({
+    beginRefund: c,
+    currency: a,
+    maxAmount: r,
+    mode: t,
+    refundedAmount: f,
+    refundingAmounts: s,
+    setRefundResult: p,
+    showDetails: R,
+    transaction: l
+  }) => {
+    const [n, u] = A(!1), [i, E] = A(K[0]), [o, d] = A(0), { i18n: N } = v(), O = h(() => {
+      switch (t) {
+        case m.FULL_AMOUNT:
+        case m.PARTIAL_AMOUNT:
+        case m.PARTIAL_LINE_ITEMS:
+          return r;
+        // case RefundMode.PARTIAL_LINE_ITEMS:
+        //     return refundingItems.reduce((total, { amount, quantity }) => total + amount * quantity, 0);
+        default:
+          return 0;
+      }
+    }, [r, t]), P = h(() => {
+      if (r > 0) {
+        const T = { amount: N.amount(r, a) };
+        switch (t) {
+          case m.FULL_AMOUNT:
+            return N.get("transactions.details.refund.alerts.refundableAmount", { values: T });
+          case m.PARTIAL_AMOUNT:
+            return N.get("transactions.details.refund.alerts.refundableMaximum", { values: T });
+        }
+      }
+    }, [N, a, r, t]);
+    return /* @__PURE__ */ e("div", { className: M, children: [
+      /* @__PURE__ */ e(H, {}),
+      /* @__PURE__ */ e(Y, { disabled: n, reason: i, onChange: E }),
+      /* @__PURE__ */ e(
+        V,
+        {
+          currency: a,
+          disabled: n || t !== m.PARTIAL_AMOUNT,
+          onChange: (T) => d(ee(0, T, O)),
+          value: O
+        }
+      ),
+      P && /* @__PURE__ */ e(x, { variant: J.TIP, type: z.HIGHLIGHT, children: /* @__PURE__ */ e(I, { className: "adyen-pe-alert__description", el: j.DIV, variant: g.BODY, wide: !0, children: P }) }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          beginRefund: c,
+          currency: a,
+          disabled: n,
+          maxAmount: r,
+          refundAmount: o,
+          refundedAmount: f,
+          refundingAmounts: s,
+          refundReason: i,
+          setRefundInProgress: u,
+          setRefundResult: p,
+          showDetails: R,
+          transactionId: l.id
+        }
+      )
+    ] });
+  }
+);
+_.Result = U(({ result: c, refreshTransaction: a, showDetails: r }) => {
+  const { i18n: t } = v(), { isErrorResult: f, iconName: s, titleKey: p, descriptionKey: R } = h(() => {
+    let l = "checkmark-circle-fill", n = "transactions.details.refund.alerts.refundSent", u = "transactions.details.refund.alerts.refundSuccess";
+    const i = c === "error";
+    return i && (l = "cross-circle-fill", n = "common.errors.somethingWentWrong", u = "transactions.details.refund.alerts.refundFailure"), { isErrorResult: i, iconName: l, titleKey: n, descriptionKey: u };
+  }, [c]);
+  return /* @__PURE__ */ e("div", { className: L, children: [
+    /* @__PURE__ */ e(
+      $,
+      {
+        className: Z(F, {
+          [w]: f,
+          [b]: !f
+        }),
+        name: s
+      }
+    ),
+    /* @__PURE__ */ e(I, { className: q.MEDIUM, variant: g.TITLE, children: t.get(p) }),
+    /* @__PURE__ */ e(I, { variant: g.BODY, children: t.get(R) }),
+    /* @__PURE__ */ e(
+      G,
+      {
+        onClick: () => {
+          r(), a();
+        },
+        variant: Q.SECONDARY,
+        children: t.get("transactions.details.refund.actions.back")
+      }
+    )
+  ] });
+});
+export {
+  _ as default
+};

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

@@ -0,0 +1,66 @@
+import { jsx as A } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import E from "classnames";
+import { useMemo as s, useEffect as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { ButtonVariant as T } from "../../../../internal/Button/types.js";
+import { ButtonActionsLayoutBasic as O } from "../../../../internal/Button/ButtonActions/types.js";
+import { TX_DATA_CONTAINER as F, TX_DATA_ACTION_BAR as M, sharedTransactionDetailsEventProperties as W } from "../../constants.js";
+import j from "../../../../internal/Button/ButtonActions/ButtonActions.js";
+import k from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import I from "../../../../../hooks/useMutation/useMutation.js";
+import S from "../../../../../core/Context/useCoreContext.js";
+import { useConfigContext as X } from "../../../../../core/ConfigContext/context.js";
+const tt = ({
+  beginRefund: g,
+  currency: e,
+  disabled: r,
+  maxAmount: c,
+  refundAmount: n,
+  refundedAmount: B,
+  refundingAmounts: h,
+  refundReason: l,
+  setRefundInProgress: u,
+  setRefundResult: d,
+  showDetails: v,
+  transactionId: C
+}) => {
+  const { initiateRefund: L } = X().endpoints, { isLoading: o, mutate: N } = I({ queryFn: L }), { i18n: t } = S(), m = n > 0 && n <= c, D = B === 0 && h.length === 0 && n === c, f = r || o || !m, R = s(() => t.get("transactions.details.refund.actions.back"), [t]), p = s(
+    () => ({
+      idle: t.get("transactions.details.refund.actions.refund.labels.payment"),
+      inProgress: `${t.get("transactions.details.refund.actions.refund.labels.inProgress")}..`
+    }),
+    [t]
+  ), y = s(() => {
+    const a = { amount: t.amount(n, e) };
+    return t.get("transactions.details.refund.actions.refund.labels.amount", { values: a });
+  }, [t, e, n]), b = o ? p.inProgress : m ? y : p.idle, i = k(), _ = {
+    disabled: f,
+    event: async () => {
+      var a;
+      if (!f) {
+        g(), (a = i.addEvent) == null || a.call(i, "Completed refund", {
+          ...W,
+          isFullRefund: D,
+          refundReason: l
+        });
+        try {
+          await N({ contentType: "application/json", body: { amount: { currency: e, value: n }, refundReason: l } }, { path: { transactionId: C } }), d("done");
+        } catch {
+          d("error");
+        }
+      }
+    },
+    state: o ? "loading" : void 0,
+    title: b,
+    variant: T.PRIMARY,
+    ariaLabel: o ? y : b
+  }, x = {
+    disabled: r,
+    event: v,
+    title: R,
+    variant: T.SECONDARY
+  };
+  return P(() => u(o), [o, u]), /* @__PURE__ */ A("div", { className: E(F, M), children: /* @__PURE__ */ A(j, { actions: [_, x], layout: O.BUTTONS_END }) });
+};
+export {
+  tt as default
+};

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

@@ -0,0 +1,87 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DATA_CONTAINER as $, TX_DATA_INPUT_HEAD as B, TX_DATA_INPUT as C, TX_DATA_INPUT_CONTAINER_WITH_ERROR as H, TX_DATA_INPUT_CONTAINER_TEXT as L, TX_DATA_INPUT_CONTAINER_SHORT as V, TX_DATA_INPUT_CONTAINER as Y } from "../../constants.js";
+import j from "classnames";
+import { memo as k } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { Tag as W } from "../../../../internal/Tag/Tag.js";
+import { TagVariant as w } from "../../../../internal/Tag/types.js";
+import { ARIA_ERROR_SUFFIX as z } from "../../../../../core/Errors/constants.js";
+import { getDecimalAmount as G, getDivider as J } from "../../../../../core/Localization/amount/amount-util.js";
+import { TypographyVariant as E, TypographyElement as h } from "../../../../internal/Typography/types.js";
+import { useState as D, useMemo as P, useRef as b, useCallback as K, useEffect as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import Z from "../../../../../core/Context/useCoreContext.js";
+import O from "../../../../internal/Typography/Typography.js";
+import ee from "../../../../internal/FormFields/InputBase.js";
+import { useUniqueId as x } from "../../../../../hooks/useUniqueId.js";
+import { Icon as te } from "../../../../internal/Icon/Icon.js";
+const _e = k(({ currency: n, disabled: d, onChange: u, value: U }) => {
+  const { i18n: t } = Z(), f = x(), N = x(), i = Math.log10(J(n)), r = parseInt(`${U}`, 10), p = G(r, n).toFixed(i), [X, y] = D(p), [T, S] = D(), q = P(() => {
+    const a = { amount: t.amount(r, n) };
+    return {
+      excess: t.get("transactions.details.refund.inputs.amount.errors.excess", { values: a }),
+      negative: t.get("transactions.details.refund.inputs.amount.errors.negative"),
+      required: t.get("transactions.details.refund.inputs.amount.errors.required")
+    };
+  }, [t, n, r]), A = T && q[T], F = P(() => t.get("transactions.details.refund.inputs.amount.label"), [t]), s = b(null), _ = K(
+    (a) => {
+      var R;
+      let l, o = a.value.trim();
+      const m = Math.trunc(+`${parseFloat(o)}e${i}`) || 0;
+      m || o ? (m < 0 && (l = "negative"), m > r && (l = "excess")) : l = "required";
+      const g = ((R = 1.1.toLocaleString(t.locale).match(/\d(.*?)\d/)) == null ? void 0 : R[1]) || ".", I = o.split(g);
+      if (I.length === 2) {
+        const M = I[0];
+        let c = I[1];
+        c.length >= i && (c = c.substring(0, i), o = M + g + c, a.value = o);
+      }
+      y(o), S(l), u == null || u(l ? 0 : m);
+    },
+    [i, r, u]
+  ), v = b();
+  return Q(() => {
+    if (v.current !== r)
+      v.current = r;
+    else if (d && T && s.current)
+      s.current.value = p;
+    else return;
+    s.current && _(s.current);
+  }, [_, d, p, r]), /* @__PURE__ */ e("div", { className: $, children: [
+    /* @__PURE__ */ e("div", { className: B, children: /* @__PURE__ */ e("div", { id: N, children: /* @__PURE__ */ e(O, { el: h.SPAN, variant: E.BODY, stronger: !0, children: F }) }) }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: j({
+          [Y]: !0,
+          [V]: !0,
+          [L]: !0,
+          [H]: A
+        }),
+        children: [
+          /* @__PURE__ */ e("label", { htmlFor: f, "aria-labelledby": N, children: [
+            n && /* @__PURE__ */ e(W, { label: n, variant: w.DEFAULT }),
+            /* @__PURE__ */ e(
+              ee,
+              {
+                min: 0,
+                type: "number",
+                className: C,
+                disabled: d,
+                lang: t.locale,
+                onInput: (a) => _(a.currentTarget),
+                value: X,
+                uniqueId: f,
+                ref: s
+              }
+            )
+          ] }),
+          A && /* @__PURE__ */ e("div", { className: "adyen-pe-input__refund-invalid-value", id: `${f}${z}`, children: [
+            /* @__PURE__ */ e(te, { name: "cross-circle-fill" }),
+            /* @__PURE__ */ e(O, { el: h.SPAN, variant: E.BODY, children: A })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+export {
+  _e as default
+};

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

@@ -0,0 +1,18 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "classnames";
+import { memo as s } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useModalContext as p } from "../../../../internal/Modal/Modal.js";
+import { TX_DATA_CONTAINER as l, TX_DATA_HEAD_CONTAINER as c } from "../../constants.js";
+import { TypographyElement as o, TypographyVariant as e } from "../../../../internal/Typography/types.js";
+import f from "../../../../../core/Context/useCoreContext.js";
+import n from "../../../../internal/Typography/Typography.js";
+const N = s(() => {
+  const { i18n: r } = f(), { withinModal: i } = p(), a = i ? o.H2 : o.DIV;
+  return /* @__PURE__ */ t("div", { className: m(l, c), children: [
+    /* @__PURE__ */ t(n, { el: a, variant: e.SUBTITLE, stronger: !0, children: r.get("transactions.details.refund.title") }),
+    /* @__PURE__ */ t(n, { variant: e.BODY, children: r.get("transactions.details.refund.processingInfo") })
+  ] });
+});
+export {
+  N as default
+};

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

@@ -0,0 +1,43 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { REFUND_REASONS as p, TX_DATA_CONTAINER as f, TX_DATA_INPUT_HEAD as u, TX_DATA_INPUT_CONTAINER as N, TX_DATA_INPUT_CONTAINER_SHORT as A } from "../../constants.js";
+import { useMemo as l, useCallback as _ } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { getTransactionRefundReason as R } from "../../../../utils/translation/getters.js";
+import { TypographyVariant as y, TypographyElement as g } from "../../../../internal/Typography/types.js";
+import h from "../../../../../core/Context/useCoreContext.js";
+import I from "../../../../internal/Typography/Typography.js";
+import { useUniqueId as b } from "../../../../../hooks/useUniqueId.js";
+import C from "../../../../internal/FormFields/Select/Select.js";
+const q = ({ disabled: i, onChange: r, reason: m }) => {
+  const { i18n: a } = h(), o = b(), c = l(() => a.get("transactions.details.refund.inputs.reason.label"), [a]), d = l(
+    () => p.map((t) => ({
+      name: R(a, t),
+      id: t
+    })),
+    [a]
+  ), T = _(
+    (t) => {
+      var n;
+      const s = (n = t.target) == null ? void 0 : n.value;
+      s && r(s);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e("div", { className: f, children: [
+    /* @__PURE__ */ e("div", { id: o, className: u, children: /* @__PURE__ */ e(I, { el: g.SPAN, variant: y.BODY, stronger: !0, children: c }) }),
+    /* @__PURE__ */ e("div", { className: `${N} ${A}`, children: /* @__PURE__ */ e(
+      C,
+      {
+        "aria-labelledby": o,
+        filterable: !1,
+        multiSelect: !1,
+        readonly: i,
+        items: d,
+        onChange: T,
+        selected: m
+      }
+    ) })
+  ] });
+};
+export {
+  q as default
+};

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

@@ -1,8 +1,52 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
-import { TransactionDataContent as s } from "./TransactionDataContent.js";
-import { boolOrFalse as m } from "../../../../../utils/value/bool.js";
-const h = ({ error: n, isFetching: i, transaction: o, extraFields: r, dataCustomization: e }) => m(i) || !(o || n) ? /* @__PURE__ */ t(a, { skeletonRowNumber: 5 }) : o ? /* @__PURE__ */ t(s, { dataCustomization: e, transaction: o, extraFields: r }) : null;
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as M, TX_DETAILS_FIELDS_REMAPS as b } from "../../constants.js";
+import I from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
+import { normalizeCustomFields as x } from "../../../../utils/customData/normalizeCustomFields.js";
+import { TransactionDataContent as A } from "./TransactionDataContent.js";
+import { useModalContext as H } from "../../../../internal/Modal/Modal.js";
+import { useState as u, useMemo as w, useRef as L, useEffect as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { ErrorMessageDisplay as N } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as P } from "../../../../utils/getErrorMessage.js";
+import { useTransaction as O } from "../../hooks/useTransaction/useTransaction.js";
+import { boolOrFalse as X } from "../../../../../utils/value/bool.js";
+import { Header as j } from "../../../../internal/Header/Header.js";
+const C = ({ id: i, dataCustomization: e, hideTitle: m, onContactSupport: f }) => {
+  const { error: c, fetchingTransaction: T, refreshTransaction: g, transaction: r, transactionNavigator: k } = O(i), { withinModal: l } = H(), [R, p] = u(), [v, _] = u(!1), F = w(() => v || X(m), [v, m]), n = L(r), E = w(
+    () => P(c, "transactions.details.errors.unavailable", f),
+    [c, f]
+  );
+  return !n.current && r && (n.current = r), S(() => {
+    _(l);
+  }, [l]), S(() => {
+    r && r.id === i ? (async () => {
+      var a, d, y, h;
+      const t = await ((d = (a = e == null ? void 0 : e.details) == null ? void 0 : a.onDataRetrieve) == null ? void 0 : d.call(a, r));
+      p(
+        (h = x(
+          (y = e == null ? void 0 : e.details) == null ? void 0 : y.fields,
+          b,
+          t
+        )) == null ? void 0 : h.reduce((D, s) => !M.has(s.key) && (s == null ? void 0 : s.visibility) !== "hidden" ? {
+          ...D,
+          ...(t == null ? void 0 : t[s.key]) && { [s.key]: t[s.key] }
+        } : D, {})
+      );
+    })() : p(void 0);
+  }, [r, i, e]), /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details", children: [
+    /* @__PURE__ */ o(j, { hideTitle: F, titleKey: "transactions.details.title", forwardedToRoot: !l }),
+    n.current ? /* @__PURE__ */ o(
+      A,
+      {
+        extraFields: R,
+        dataCustomization: e,
+        fetchingTransaction: T,
+        refreshTransaction: g,
+        transaction: r ?? n.current,
+        transactionNavigator: k
+      }
+    ) : T ? /* @__PURE__ */ o(I, { skeletonRowNumber: 5 }) : c && E && /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ o(N, { outlined: !1, absolutePosition: !1, withBackground: !1, withImage: !0, ...E }) })
+  ] });
+};
 export {
-  h as TransactionData
+  C as TransactionData
 };