@adyen/adyen-platform-experience-web 1.1.0 → 1.2.0

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

@@ -0,0 +1,187 @@
+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 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 "./TransactionData.scss.js";
+import ve from "../../hooks/useTransaction/useTransaction.js";
+import ye from "../../hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js";
+import 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 { useAuthContext as Le } from "../../../../../core/Auth/context.js";
+const Y = ({
+  children: c,
+  renderViewActionButtons: s,
+  renderViewMessageBox: o
+}) => /* @__PURE__ */ e("div", { className: Ee, children: [
+  c,
+  o && o(),
+  s()
+] }), $ = ({
+  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()
+] }), Be = ({ transaction: c, extraFields: s }) => {
+  var g;
+  const [o, l] = A(a.DETAILS), [h, G] = 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,
+    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) => G(t), []), ne = i((t) => j(t), []), S = i(
+    (t) => t === a.REFUND && u,
+    [u]
+  ), { getBalanceAccounts: f } = Le().endpoints, { data: _ } = se(
+    B(
+      () => ({
+        fetchOptions: {
+          enabled: !!f && !n.balanceAccount && !!n.balanceAccountId,
+          keepPrevData: !0
+        },
+        queryFn: async () => f == null ? void 0 : f(ge)
+      }),
+      [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,
+      {
+        type: M.HIGHLIGHT,
+        variant: D.TIP,
+        description: `${r.get("refund.theRefundIsBeingProcessed")} ${r.get("pleaseComeBackLater")}`
+      }
+    ),
+    d.map((t, ie) => /* @__PURE__ */ e(
+      N,
+      {
+        variant: D.TIP,
+        type: (t == null ? void 0 : t.type) ?? M.HIGHLIGHT,
+        description: t == null ? void 0 : t.label
+      },
+      `${Math.random()}-${ie}`
+    ))
+  ] }) : 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
+  };
+  switch (o) {
+    case a.DETAILS:
+      return /* @__PURE__ */ e(Y, { renderViewActionButtons: C, renderViewMessageBox: ae, children: /* @__PURE__ */ e(
+        Oe,
+        {
+          ...P,
+          transaction: !n.balanceAccount && O ? { ...n, balanceAccount: O } : { ...n },
+          transactionNavigator: W,
+          extraFields: s,
+          children: [
+            /* @__PURE__ */ e(X, { className: Re, children: /* @__PURE__ */ e(Ne, { transaction: n, refundedState: Z }) }),
+            /* @__PURE__ */ e(_e, {})
+          ]
+        }
+      ) });
+    case a.REFUND:
+      return /* @__PURE__ */ e(Y, { renderViewActionButtons: C, children: /* @__PURE__ */ e(
+        Ce,
+        {
+          ...P,
+          availableAmount: J,
+          currency: Q,
+          refundMode: T,
+          refreshTransaction: p,
+          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,
+              {
+                variant: D.TIP,
+                type: R.type,
+                description: R.description
+              }
+            )
+          ]
+        }
+      ) });
+    case a.REFUND_SUCCESS:
+      return /* @__PURE__ */ e(
+        $,
+        {
+          renderIcon: () => /* @__PURE__ */ e(x, { name: "checkmark-circle-fill", className: L(V, Ae) }),
+          title: r.get("refundActionSuccessTitle"),
+          subtitle: r.get("refundActionSuccessSubtitle"),
+          action: () => /* @__PURE__ */ e(H, { variant: k.SECONDARY, onClick: oe, children: r.get("goBack") })
+        }
+      );
+    case a.REFUND_ERROR:
+      return /* @__PURE__ */ e(
+        $,
+        {
+          renderIcon: () => /* @__PURE__ */ e(x, { name: "cross-circle-fill", className: L(V, Te) }),
+          title: r.get("refundActionErrorTitle"),
+          subtitle: r.get("refundActionErrorSubtitle"),
+          action: () => /* @__PURE__ */ e(H, { variant: k.SECONDARY, onClick: p, children: r.get("goBack") })
+        }
+      );
+    default:
+      return null;
+  }
+}, mt = Be;
+export {
+  Be as TransactionDataContent,
+  mt as default
+};

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

@@ -0,0 +1,44 @@
+import { TRANSACTION_FIELDS as o } from "../../TransactionsOverview/components/TransactionsTable/TransactionsTable.js";
+const _ = "adyen-pe-transaction-data", s = `${_}__amount`, E = `${_}__action-bar`, N = `${_}__container`, a = `${_}__head-container`, t = `${_}__input`, T = `${t}-container`, D = `${T}--short`, O = `${T}--text-input`, R = `${T}--with-error`, S = `${t}-head`, r = `${_}__label`, I = `${_}__list`, A = `${_}__payment-method`, X = `${A}-detail`, c = `${A}-logo`, $ = `${c}-container`, i = `${_}__tags`, d = `${_}__status-box`, u = `${_}__refund-response`, n = `${_}__refund-response-icon`, C = `${n}--success`, P = `${n}--error`, U = `${_}__refund-statuses-container`, p = /* @__PURE__ */ new Set([
+  "status",
+  "category",
+  "paymentMethod",
+  "bankAccount",
+  "balanceAccount",
+  "id",
+  "balanceAccountId",
+  ...o,
+  "deductedAmount",
+  "lineItems",
+  "originalAmount",
+  "paymentPspReference",
+  "refundDetails",
+  "refundMetadata"
+]);
+export {
+  E as TX_DATA_ACTION_BAR,
+  s as TX_DATA_AMOUNT,
+  _ as TX_DATA_CLASS,
+  N as TX_DATA_CONTAINER,
+  a as TX_DATA_HEAD_CONTAINER,
+  t as TX_DATA_INPUT,
+  T as TX_DATA_INPUT_CONTAINER,
+  D as TX_DATA_INPUT_CONTAINER_SHORT,
+  O as TX_DATA_INPUT_CONTAINER_TEXT,
+  R as TX_DATA_INPUT_CONTAINER_WITH_ERROR,
+  S as TX_DATA_INPUT_HEAD,
+  r as TX_DATA_LABEL,
+  I as TX_DATA_LIST,
+  A as TX_DATA_PAY_METHOD,
+  X as TX_DATA_PAY_METHOD_DETAIL,
+  c as TX_DATA_PAY_METHOD_LOGO,
+  $ as TX_DATA_PAY_METHOD_LOGO_CONTAINER,
+  i as TX_DATA_TAGS,
+  p as TX_DETAILS_RESERVED_FIELDS_SET,
+  u as TX_REFUND_RESPONSE,
+  P as TX_REFUND_RESPONSE_ERROR_ICON,
+  n as TX_REFUND_RESPONSE_ICON,
+  C as TX_REFUND_RESPONSE_SUCCESS_ICON,
+  U as TX_REFUND_STATUSES_CONTAINER,
+  d as TX_STATUS_BOX
+};

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

@@ -0,0 +1,53 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as v } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import P from "../../../../internal/CopyText/CopyText.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as g, TX_DATA_LIST as x, TX_DATA_LABEL as E } from "../constants.js";
+import { _isCustomDataObject as k } 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 h = () => {
+  const { i18n: s } = C(), { transaction: u, extraFields: l } = I();
+  return v(() => {
+    const { balanceAccount: a, category: p, id: y, paymentPspReference: c, refundMetadata: e } = u, r = p === "Refund", t = null, f = (n) => {
+      if (S(n))
+        return null;
+      const { value: o, currency: _ } = n;
+      return s.amount(o, _);
+    }, m = f(u.deductedAmount), d = f(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]) => !g.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(P, { type: "Default", textToCopy: y, showCopyTextTooltip: !1 }) },
+      r && (e != null && e.refundPspReference) ? { key: "refund.refundPspReference", value: e.refundPspReference } : t,
+      // psp reference
+      c ? { key: A, value: c } : t
+    ].filter(Boolean);
+    return /* @__PURE__ */ i(
+      L,
+      {
+        classNames: x,
+        items: D,
+        layout: "5-7",
+        renderLabel: (n) => /* @__PURE__ */ i("div", { className: E, children: n })
+      }
+    );
+  }, [s, u]);
+}, w = h;
+export {
+  w as default
+};

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

@@ -0,0 +1,7 @@
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DATA_CONTAINER as r } from "../constants.js";
+import s from "classnames";
+const i = ({ children: a, className: t }) => /* @__PURE__ */ o("div", { className: s(r, t), children: a }), c = i;
+export {
+  c as default
+};

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

@@ -0,0 +1,53 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DATA_TAGS as E, TX_DATA_AMOUNT as p, TX_DATA_PAY_METHOD as h, TX_DATA_PAY_METHOD_LOGO_CONTAINER as v, TX_DATA_PAY_METHOD_LOGO as N, TX_DATA_PAY_METHOD_DETAIL as O, TX_DATA_LABEL as S } from "../constants.js";
+import { getPaymentMethodTypeForTransaction as F, getDisplayablePaymentMethodForTransaction as M, getRefundTypeForTransaction as C, getAmountStyleForTransaction as b } from "../utils.js";
+import P from "classnames";
+import { memo as R } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as u } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import U from "../../../../../core/Context/useCoreContext.js";
+import x from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { RefundType as _, RefundedState as f } from "../../context/types.js";
+import { Image as I } from "../../../../internal/Image/Image.js";
+import { TagVariant as a } from "../../../../internal/Tag/types.js";
+import { Tag as o } from "../../../../internal/Tag/Tag.js";
+import { Fragment as D } from "../../../../../external/preact/dist/preact.module.js";
+import { DATE_FORMAT_TRANSACTION_DETAILS as X } from "../../../../../constants/dateFormats.js";
+const $ = ({ refundedState: n, transaction: r }) => {
+  var s;
+  const { i18n: t } = U(), { dateFormat: g } = x((s = r == null ? void 0 : r.balanceAccount) == null ? void 0 : s.timeZone), {
+    amount: l,
+    category: i,
+    createdAt: A
+    /*, status*/
+  } = r, d = u(() => {
+    const { currency: c, value: L } = l;
+    return `${t.amount(L, c, { hideCurrency: !0 })} ${c}`;
+  }, [l, t]), [m, y, T] = u(
+    () => [
+      F(r),
+      M(r),
+      C(r)
+    ],
+    [r]
+  );
+  return /* @__PURE__ */ e(D, { children: [
+    /* @__PURE__ */ e("div", { className: E, children: [
+      i && /* @__PURE__ */ e(o, { label: t.get(`txType.${i}`), variant: a.DEFAULT }),
+      T && /* @__PURE__ */ e(D, { children: [
+        T === _.FULL && /* @__PURE__ */ e(o, { label: t.get("full"), variant: a.SUCCESS }),
+        T === _.PARTIAL && /* @__PURE__ */ e(o, { label: t.get("partial"), variant: a.BLUE })
+      ] }),
+      n === f.FULL && /* @__PURE__ */ e(o, { label: t.get("refunded.full"), variant: a.SUCCESS }),
+      n === f.PARTIAL && /* @__PURE__ */ e(o, { label: t.get("refunded.partial"), variant: a.BLUE })
+    ] }),
+    d && /* @__PURE__ */ e("div", { className: P(p, `${p}--${b(r)}`), children: d }),
+    m && /* @__PURE__ */ e("div", { className: h, children: [
+      /* @__PURE__ */ e("div", { className: v, children: /* @__PURE__ */ e(I, { className: N, name: m, alt: m, folder: "logos/" }) }),
+      /* @__PURE__ */ e("div", { className: O, children: y })
+    ] }),
+    A && /* @__PURE__ */ e("div", { className: S, children: g(new Date(A), X) })
+  ] });
+}, W = R($);
+export {
+  W as default
+};

package/dist/es/components/external/TransactionDetails/components/refund/TransactionRefundAmount.js

@@ -0,0 +1,98 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DATA_CONTAINER as U, TX_DATA_INPUT_HEAD as S, TX_DATA_INPUT_CONTAINER as $, TX_DATA_INPUT_CONTAINER_SHORT as B, TX_DATA_INPUT_CONTAINER_TEXT as q, TX_DATA_INPUT_CONTAINER_WITH_ERROR as H, TX_DATA_INPUT as L } from "../constants.js";
+import M from "classnames";
+import { useState as R, useMemo as V, useRef as v } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import C from "../../../../../core/Context/useCoreContext.js";
+import Y from "../../../../internal/SVGIcons/CloseCircle.js";
+import j from "../../../../internal/FormFields/InputBase.js";
+import h from "../../../../internal/Typography/Typography.js";
+import { TypographyElement as b, TypographyVariant as D } from "../../../../internal/Typography/types.js";
+import { getDecimalAmount as w, getDivider as W } from "../../../../../core/Localization/amount/amount-util.js";
+import { ARIA_ERROR_SUFFIX as k } from "../../../../../core/Errors/constants.js";
+import { TagVariant as z } from "../../../../internal/Tag/types.js";
+import { Tag as G } from "../../../../internal/Tag/Tag.js";
+import { useTransactionRefundContext as O } from "../../context/refund/context.js";
+import { uniqueId as E } from "../../../../../utils/random/uniqueId.js";
+import { boolOrFalse as J } from "../../../../../utils/value/bool.js";
+const P = (r, n) => w(r, n).toFixed(_(n)), _ = (r) => Math.log10(W(r)), x = ({
+  currency: r,
+  disabled: n,
+  errorMessage: e,
+  errorMessageArg: l,
+  onInput: A,
+  value: T
+}) => {
+  const { i18n: a } = C(), i = v(E()), m = v(E()), p = e ? l ? a.get(e, { values: { amount: l } }) : a.get(e) : "";
+  return /* @__PURE__ */ t("div", { className: U, children: [
+    /* @__PURE__ */ t("div", { className: S, children: /* @__PURE__ */ t("div", { id: m.current, children: /* @__PURE__ */ t(h, { el: b.SPAN, variant: D.BODY, stronger: !0, children: a.get("refundAmount") }) }) }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: M({
+          [$]: !0,
+          [B]: !0,
+          [q]: !0,
+          [H]: !!e
+        }),
+        children: [
+          /* @__PURE__ */ t("label", { htmlFor: i.current, "aria-labelledby": m.current, children: [
+            r && /* @__PURE__ */ t(G, { label: r, variant: z.DEFAULT }),
+            /* @__PURE__ */ t(
+              j,
+              {
+                min: 0,
+                type: "number",
+                className: L,
+                disabled: J(n),
+                lang: a.locale,
+                onInput: A,
+                value: T,
+                uniqueId: i.current
+              }
+            )
+          ] }),
+          e && /* @__PURE__ */ t("div", { className: "adyen-pe-input__refund-invalid-value", id: `${i.current}${k}`, children: [
+            /* @__PURE__ */ t(Y, {}),
+            /* @__PURE__ */ t(h, { el: b.SPAN, variant: D.BODY, children: p })
+          ] })
+        ]
+      }
+    )
+  ] });
+}, At = () => {
+  const { availableAmount: r, currency: n } = O();
+  return /* @__PURE__ */ t(x, { currency: n, errorMessage: null, value: P(r, n), disabled: !0 });
+}, Tt = ({ locale: r }) => {
+  const { availableAmount: n, currency: e, interactionsDisabled: l, setAmount: A } = O(), [T, a] = R(null), [i, m] = R(`${P(n, e)}`), { i18n: p } = C(), y = V(() => {
+    const s = _(e);
+    return (o) => Math.trunc(+`${parseFloat(o)}e${s}`) || 0;
+  }, [e]), X = (s) => {
+    var I;
+    let o = s.currentTarget.value.trim();
+    const c = y(o);
+    let u = null;
+    c || o ? (c < 0 && (u = "noNegativeNumbersAllowed"), c > n && (u = "refundAmount.excess")) : u = "refundAmount.required";
+    const N = ((I = 1.1.toLocaleString(r).match(/\d(.*?)\d/)) == null ? void 0 : I[1]) || ".", f = o.split(N);
+    if (f.length === 2) {
+      const g = _(e), F = f[0];
+      let d = f[1];
+      d.length >= g && (d = d.substring(0, g), o = F + N + d, s.currentTarget.value = o);
+    }
+    m(o), a(u), A(u ? 0 : c);
+  };
+  return /* @__PURE__ */ t(
+    x,
+    {
+      currency: e,
+      errorMessage: T,
+      errorMessageArg: p.amount(n, e),
+      onInput: X,
+      value: i,
+      disabled: l
+    }
+  );
+};
+export {
+  At as TransactionRefundFullAmountInput,
+  Tt as TransactionRefundPartialAmountInput
+};

package/dist/es/components/external/TransactionDetails/components/refund/TransactionRefundNotice.js

@@ -0,0 +1,19 @@
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as n } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TX_DATA_CONTAINER as i, TX_DATA_HEAD_CONTAINER as a } from "../constants.js";
+import m from "../../../../../core/Context/useCoreContext.js";
+import t from "../../../../internal/Typography/Typography.js";
+import { TypographyElement as s, TypographyVariant as e } from "../../../../internal/Typography/types.js";
+const T = () => {
+  const { i18n: r } = m();
+  return n(
+    () => /* @__PURE__ */ o("div", { className: `${i} ${a}`, children: [
+      /* @__PURE__ */ o(t, { el: s.DIV, variant: e.SUBTITLE, stronger: !0, children: r.get("refundAction") }),
+      /* @__PURE__ */ o(t, { variant: e.BODY, children: r.get("refundNotice") })
+    ] }),
+    [r]
+  );
+}, N = T;
+export {
+  N as default
+};

package/dist/es/components/external/TransactionDetails/components/refund/TransactionRefundReason.js

@@ -0,0 +1,41 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as f, useCallback as l } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TX_DATA_CONTAINER as d, TX_DATA_INPUT_HEAD as T, TX_DATA_INPUT_CONTAINER as u, TX_DATA_INPUT_CONTAINER_SHORT as R } from "../constants.js";
+import { REFUND_REASONS as p } from "../../context/constants.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import A from "../../../../internal/Typography/Typography.js";
+import { TypographyElement as _, TypographyVariant as h } from "../../../../internal/Typography/types.js";
+import { useTransactionRefundContext as g } from "../../context/refund/context.js";
+import C from "../../../../internal/FormFields/Select/Select.js";
+const D = () => {
+  const { i18n: o } = N(), { interactionsDisabled: s, refundReason: i, setRefundReason: a } = g(), m = f(
+    () => Object.freeze(
+      p.map((e) => ({ id: e, name: o.has(`refundReason.${e}`) ? o.get(`refundReason.${e}`) : e }))
+    ),
+    [o]
+  ), c = l(
+    (e) => {
+      var t;
+      const r = (t = e.target) == null ? void 0 : t.value;
+      r && a(r);
+    },
+    [a]
+  );
+  return /* @__PURE__ */ n("div", { className: d, children: [
+    /* @__PURE__ */ n("div", { className: T, children: /* @__PURE__ */ n(A, { el: _.SPAN, variant: h.BODY, stronger: !0, children: o.get("refundReason") }) }),
+    /* @__PURE__ */ n("div", { className: `${u} ${R}`, children: /* @__PURE__ */ n(
+      C,
+      {
+        items: m,
+        readonly: s,
+        filterable: !1,
+        multiSelect: !1,
+        onChange: c,
+        selected: i
+      }
+    ) })
+  ] });
+}, P = D;
+export {
+  P as default
+};

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

@@ -0,0 +1,32 @@
+import { RefundType as d } from "../context/types.js";
+import { parsePaymentMethodType as p } from "../../TransactionsOverview/components/utils.js";
+import { EMPTY_OBJECT as r } from "../../../../utils/value/constants.js";
+const f = (e) => {
+  switch (e == null ? void 0 : e.status) {
+    case "Booked":
+      return "default";
+    case "Reversed":
+      return "error";
+    default:
+      return "pending";
+  }
+}, o = (e) => e != null && e.paymentMethod ? e.paymentMethod.type : e != null && e.bankAccount ? "bankTransfer" : null, h = (e) => {
+  var u;
+  return e != null && e.paymentMethod ? p(e.paymentMethod, "detail") : (u = e == null ? void 0 : e.bankAccount) == null ? void 0 : u.accountNumberLastFourDigits;
+}, M = (e) => {
+  if (e.category === "Refund") {
+    const { refundType: u } = e.refundMetadata ?? r;
+    switch (u) {
+      case d.FULL:
+        return d.FULL;
+      case d.PARTIAL:
+        return d.PARTIAL;
+    }
+  }
+};
+export {
+  f as getAmountStyleForTransaction,
+  h as getDisplayablePaymentMethodForTransaction,
+  o as getPaymentMethodTypeForTransaction,
+  M as getRefundTypeForTransaction
+};

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

@@ -0,0 +1,4 @@
+const e = Object.freeze(["requested_by_customer", "issue_with_item_sold", "fraudulent", "duplicate", "other"]);
+export {
+  e as REFUND_REASONS
+};

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

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