@adyen/adyen-platform-experience-web 1.9.0 → 1.10.1

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

@@ -0,0 +1,76 @@
+import { jsx as m } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as v } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as L, useCallback as y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { Tooltip as I } from "../../../../internal/Tooltip/Tooltip.js";
+import { TX_DATA_LABEL as p, TX_DATA_LIST as k } from "../../constants.js";
+import { TypographyVariant as D, TypographyElement as P } from "../../../../internal/Typography/types.js";
+import { getTransactionAmountAdjustmentType as A, getTransactionAmountAdjustmentTypeInformation as S } from "../../../../utils/translation/getters.js";
+import V from "../../../../../core/Context/useCoreContext.js";
+import _ from "../../../../internal/Typography/Typography.js";
+import f from "classnames";
+import x from "../../../../internal/StructuredList/StructuredList.js";
+import { isNullish as B } from "../../../../../utils/value/is.js";
+const i = {
+  grossAmount: "transactions.details.summary.fields.grossAmount",
+  netAmount: "transactions.details.summary.fields.netAmount",
+  originalAmount: "transactions.details.summary.fields.originalAmount"
+}, C = null, N = ({ transaction: c }) => {
+  const { i18n: o } = V(), g = L(() => {
+    const { additions: t, deductions: a, amountBeforeDeductions: e, netAmount: u, originalAmount: l } = c, r = (n) => {
+      if (B(n)) return null;
+      const { value: s, currency: d } = n;
+      return `${o.amount(s, d, { hideCurrency: !0 })} ${d}`;
+    };
+    return [
+      // original amount
+      l && (t && t.length > 0 || l.value !== e.value) ? {
+        id: "originalAmount",
+        key: i.originalAmount,
+        value: r(l)
+      } : C,
+      // additions
+      ...t?.map(({ type: n, ...s }) => ({
+        key: A(o, n),
+        value: r(s)
+      })) ?? [],
+      // amountBeforeDeductions
+      {
+        id: "grossAmount",
+        key: i.grossAmount,
+        value: r(e)
+      },
+      // deductions
+      ...a?.map(({ type: n, ...s }) => ({
+        key: A(o, n),
+        value: r(s),
+        rawValue: S(o, n)
+        // tooltip content
+      })) ?? [],
+      // netAmount
+      {
+        id: "netAmount",
+        key: i.netAmount,
+        value: r(u)
+      }
+    ].filter(Boolean);
+  }, [o, c]), T = y(
+    (t, a, e) => e ? /* @__PURE__ */ m(I, { content: e, isUnderlineVisible: !0, children: /* @__PURE__ */ m("span", { className: f(p), children: t }) }) : /* @__PURE__ */ m("div", { className: f(p), children: t }),
+    [o]
+  ), h = y((t, a) => {
+    const e = a === i.netAmount, u = D.BODY;
+    return /* @__PURE__ */ m(_, { el: P.DIV, variant: u, strongest: e, children: t });
+  }, []);
+  return /* @__PURE__ */ m(
+    x,
+    {
+      classNames: k,
+      items: g,
+      layout: "5-7",
+      renderLabel: T,
+      renderValue: h
+    }
+  );
+}, z = v(N);
+export {
+  z as default
+};

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

@@ -0,0 +1,50 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as p } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as i } 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 v } from "../../../../internal/Timeline/types.js";
+import { TypographyVariant as T, TypographyElement as d } from "../../../../internal/Typography/types.js";
+import { TimelineItem as M } from "../../../../internal/Timeline/components/TimelineItem.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import f from "../../../../internal/Typography/Typography.js";
+import w from "../../../../internal/Timeline/Timeline.js";
+import x from "../../../../internal/StructuredList/StructuredList.js";
+import { uniqueId as P } from "../../../../../utils/random/uniqueId.js";
+const c = ({ transaction: t }) => {
+  const m = t.createdAt, r = t.events, a = t.balanceAccount?.timeZone, o = i(
+    () => ({
+      format: v.FULL_DATE_EXACT_TIME_WITHOUT_SECONDS,
+      date: new Date(m),
+      timezone: a
+    }),
+    [m, a]
+  ), s = i(() => {
+    const e = /* @__PURE__ */ new WeakMap();
+    return r?.forEach((l) => e.set(l, P())), e;
+  }, [r]);
+  return r ? /* @__PURE__ */ n(w, { showMore: { limit: 2, placement: "before-last" }, children: r.map((e) => /* @__PURE__ */ n(c.Item, { event: e, defaultTimestamp: o }, s.get(e))) }) : null;
+}, V = (t) => /* @__PURE__ */ n(f, { el: d.DIV, variant: T.CAPTION, className: D, children: t }), S = (t) => /* @__PURE__ */ n(f, { el: d.DIV, variant: T.CAPTION, className: C, children: t });
+c.Item = p(({ defaultTimestamp: t, event: m }) => {
+  const { amount: r, createdAt: a, status: o, type: s } = m, { i18n: e } = N(), l = i(() => ({ ...t, date: new Date(a) }), [t, a]), y = i(() => _(e, s), [e, s]), I = i(() => {
+    const { currency: u, value: E } = r, h = `${e.amount(E, u, { hideCurrency: !0 })} ${u}`, A = g(e, o);
+    return [
+      { key: "transactions.details.timeline.fields.amount", value: h },
+      { key: "transactions.details.timeline.fields.status", value: A }
+    ];
+  }, [e, r, o]), L = o.toLowerCase().includes("refund") ? "Refund" : o.toLowerCase().includes("auth") ? "Capture" : y;
+  return /* @__PURE__ */ n(M, { title: L, timestamp: l, children: /* @__PURE__ */ n(
+    x,
+    {
+      align: "start",
+      layout: "3-9",
+      items: I,
+      renderLabel: V,
+      renderValue: S
+    }
+  ) });
+});
+const K = p(c);
+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,132 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { sharedTransactionDetailsEventProperties as v, 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 C } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useState as T, useCallback as _, useRef as P, useEffect as y, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import k from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import D 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 h from "../../../../internal/Typography/Typography.js";
+import { ActiveView as W, RefundMode as f } from "../../types.js";
+import { TypographyVariant as I, 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 A = ({ disabled: i, refreshTransaction: s, setActiveView: r, setLocked: t, ...l }) => {
+  const [o, m] = T(), p = _(() => void (R.current = !0), []), c = _(() => t(!0), [t]), n = _(() => r(W.DETAILS), [r]), { duration: u } = X(), a = P(!1), R = P(!1), d = k();
+  return y(() => {
+    a.current || (a.current = !0, d.addEvent?.("Switched to refund view", v));
+  }, [d]), y(() => {
+    i && !o && n(), o === "done" && c();
+  }, [i, c, o, n]), y(() => () => {
+    u.current !== void 0 && !R.current && d.addEvent?.("Cancelled refund", v);
+  }, [u, d]), o ? /* @__PURE__ */ e(A.Result, { result: o, refreshTransaction: s, showDetails: n }) : /* @__PURE__ */ e(A.Form, { ...l, beginRefund: p, setRefundResult: m, showDetails: n });
+};
+A.Form = C(
+  ({
+    beginRefund: i,
+    currency: s,
+    maxAmount: r,
+    mode: t,
+    refundedAmount: l,
+    refundingAmounts: o,
+    setRefundResult: m,
+    showDetails: p,
+    transaction: c
+  }) => {
+    const [n, u] = T(!1), [a, R] = T(K[0]), [d, U] = T(0), { i18n: E } = D(), g = S(() => {
+      switch (t) {
+        case f.FULL_AMOUNT:
+        case f.PARTIAL_AMOUNT:
+        case f.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]), O = S(() => {
+      if (r > 0) {
+        const N = { amount: E.amount(r, s) };
+        switch (t) {
+          case f.FULL_AMOUNT:
+            return E.get("transactions.details.refund.alerts.refundableAmount", { values: N });
+          case f.PARTIAL_AMOUNT:
+            return E.get("transactions.details.refund.alerts.refundableMaximum", { values: N });
+        }
+      }
+    }, [E, s, r, t]);
+    return /* @__PURE__ */ e("div", { className: M, children: [
+      /* @__PURE__ */ e(H, {}),
+      /* @__PURE__ */ e(Y, { disabled: n, reason: a, onChange: R }),
+      /* @__PURE__ */ e(
+        V,
+        {
+          currency: s,
+          disabled: n || t !== f.PARTIAL_AMOUNT,
+          onChange: (N) => U(ee(0, N, g)),
+          value: g
+        }
+      ),
+      O && /* @__PURE__ */ e(x, { variant: J.TIP, type: z.HIGHLIGHT, children: /* @__PURE__ */ e(h, { className: "adyen-pe-alert__description", el: j.DIV, variant: I.BODY, wide: !0, children: O }) }),
+      /* @__PURE__ */ e(
+        B,
+        {
+          beginRefund: i,
+          currency: s,
+          disabled: n,
+          maxAmount: r,
+          refundAmount: d,
+          refundedAmount: l,
+          refundingAmounts: o,
+          refundReason: a,
+          setRefundInProgress: u,
+          setRefundResult: m,
+          showDetails: p,
+          transactionId: c.id
+        }
+      )
+    ] });
+  }
+);
+A.Result = C(({ result: i, refreshTransaction: s, showDetails: r }) => {
+  const { i18n: t } = D(), { isErrorResult: l, iconName: o, titleKey: m, descriptionKey: p } = S(() => {
+    let c = "checkmark-circle-fill", n = "transactions.details.refund.alerts.refundSent", u = "transactions.details.refund.alerts.refundSuccess";
+    const a = i === "error";
+    return a && (c = "cross-circle-fill", n = "common.errors.somethingWentWrong", u = "transactions.details.refund.alerts.refundFailure"), { isErrorResult: a, iconName: c, titleKey: n, descriptionKey: u };
+  }, [i]);
+  return /* @__PURE__ */ e("div", { className: L, children: [
+    /* @__PURE__ */ e(
+      $,
+      {
+        className: Z(F, {
+          [w]: l,
+          [b]: !l
+        }),
+        name: o
+      }
+    ),
+    /* @__PURE__ */ e(h, { className: q.MEDIUM, variant: I.TITLE, children: t.get(m) }),
+    /* @__PURE__ */ e(h, { variant: I.BODY, children: t.get(p) }),
+    /* @__PURE__ */ e(
+      G,
+      {
+        onClick: () => {
+          r(), s();
+        },
+        variant: Q.SECONDARY,
+        children: t.get("transactions.details.refund.actions.back")
+      }
+    )
+  ] });
+});
+export {
+  A as default
+};

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

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

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

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

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

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