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

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

@@ -1,212 +1,84 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import V from "classnames";
-import { useState as R, useMemo as X, useCallback as c, useLayoutEffect as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import pt from "../../../../../core/Context/useCoreContext.js";
-import { useFetch as At } from "../../../../../hooks/useFetch.js";
-import { Alert as b } from "../../../../internal/Alert/Alert.js";
-import { AlertVariantOption as h, AlertTypeOption as Y } from "../../../../internal/Alert/types.js";
-import Tt from "../../../../internal/Button/ButtonActions/ButtonActions.js";
-import { ButtonActionsLayoutBasic as Nt } from "../../../../internal/Button/ButtonActions/types.js";
-import { ButtonVariant as v } from "../../../../internal/Button/types.js";
-import Rt from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
-import St from "../../../../internal/StatusBox/useStatusBox.js";
-import { TypographyVariant as H, TypographyModifier as _t } from "../../../../internal/Typography/types.js";
-import G from "../../../../internal/Typography/Typography.js";
-import { ActiveView as r, RefundMode as y } from "../../context/types.js";
-import { TX_DATA_ACTION_BAR as Dt, TX_REFUND_STATUSES_CONTAINER as Et, TX_REFUND_RESPONSE_ICON as W, TX_REFUND_RESPONSE_ERROR_ICON as It, TX_REFUND_RESPONSE_SUCCESS_ICON as bt, TX_STATUS_BOX as ht, TX_DATA_AMOUNT as vt, TX_REFUND_RESPONSE as yt, TX_DATA_CLASS as Ot } from "../constants.js";
-import gt from "../details/TransactionDataProperties.js";
-import $ from "../details/TransactionDetailsDataContainer.js";
-import Ct from "../../../../internal/StatusBox/StatusBox.js";
-import { TransactionRefundFullAmountInput as Pt, TransactionRefundPartialAmountInput as Ut } from "../refund/TransactionRefundAmount.js";
-import Bt from "../refund/TransactionRefundNotice.js";
-import Lt from "../refund/TransactionRefundReason.js";
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "../PaymentRefund/PaymentRefund.js";
+import S from "../PaymentDetails/PaymentDetails.js";
+import C from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
+import { ActiveView as c } from "../../types.js";
+import { useLandedPageEvent as V } from "../../../../../hooks/useAnalytics/useLandedPageEvent.js";
+import { useState as l, useRef as j, useMemo as n, useEffect as F } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useModalContext as N } from "../../../../internal/Modal/Modal.js";
+import { sharedTransactionDetailsEventProperties as O } from "../../constants.js";
 /* empty css                     */
-import { getAmountStyleForTransaction as Mt } from "../utils.js";
-import kt from "./TransactionStatusTag.js";
-import { useTransaction as Ft } from "../../hooks/useTransaction/useTransaction.js";
-import { useTransactionRefundMetadata as wt } from "../../hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js";
-import j from "../../../../internal/Button/Button.js";
-import { Icon as q } from "../../../../internal/Icon/Icon.js";
-import { TransactionRefundProvider as Vt } from "../../context/refund/context.js";
-import { TransactionDetailsProvider as Xt } from "../../context/details/context.js";
-import { EMPTY_ARRAY as xt, EMPTY_OBJECT as Yt } from "../../../../../utils/value/constants.js";
-import { useConfigContext as Ht } from "../../../../../core/ConfigContext/context.js";
-const z = ({
-  children: s,
-  renderViewActionButtons: a,
-  renderViewMessageBox: i
-}) => /* @__PURE__ */ t("div", { className: Ot, children: [
-  s,
-  i && i(),
-  a()
-] }), J = ({
-  action: s,
-  title: a,
-  renderIcon: i,
-  subtitle: p
-}) => /* @__PURE__ */ t("div", { className: yt, children: [
-  i && i(),
-  /* @__PURE__ */ t(G, { className: _t.MEDIUM, variant: H.TITLE, children: a }),
-  /* @__PURE__ */ t(G, { variant: H.BODY, children: p }),
-  s && s()
-] }), Ie = ({ transaction: s, extraFields: a, dataCustomization: i }) => {
-  var M, k;
-  const [p, S] = R(r.DETAILS), [O, Z] = R(), [g, K] = R(), [m, C] = R(!1), { fetchingTransaction: Q, refreshTransaction: A, transaction: e, transactionNavigator: tt } = Ft(s), {
-    refundable: et,
-    refundableAmount: nt,
-    refundableAmountLabel: _,
-    refundAvailable: ot,
-    refundCurrency: at,
-    refundDisabled: P,
-    refundedState: rt,
-    refundStatuses: u,
+import { useRefundMetadata as Y } from "../../hooks/useRefundMetadata/useRefundMetadata.js";
+import { EMPTY_ARRAY as p } from "../../../../../utils/value/constants.js";
+const Z = ({
+  dataCustomization: A,
+  extraFields: v,
+  fetchingTransaction: D,
+  refreshTransaction: R,
+  transaction: e,
+  transactionNavigator: b
+}) => {
+  const [k, s] = l(c.DETAILS), [r, d] = l(!1), { withinModal: w } = N(), {
+    fullRefundFailed: I,
+    fullRefundInProgress: L,
+    refundableAmount: P,
+    refundAmounts: f,
+    refundAvailable: E,
+    refundCurrency: u,
+    refundDisabled: a,
+    refundedAmount: i,
+    refundedState: M,
     refundMode: T,
-    refundLocked: D
-  } = wt(e), d = X(() => P || m, [P, m]), { i18n: o } = pt(), it = Object.freeze((e == null ? void 0 : e.lineItems) ?? xt), ct = c((n) => Z(n), []), st = c((n) => K(n), []), E = c(
-    (n) => n === r.REFUND && d,
-    [d]
-  ), { getBalanceAccounts: f } = Ht().endpoints, { data: I } = At(
-    X(
-      () => ({
-        fetchOptions: {
-          enabled: !!f && !e.balanceAccount && !!e.balanceAccountId,
-          keepPrevData: !0
-        },
-        queryFn: async () => f == null ? void 0 : f(Yt)
-      }),
-      [e.balanceAccountId, e.balanceAccount, f]
-    )
-  ), lt = c(
-    (n) => void (E(n) || S(n)),
-    [E]
-  ), U = c(() => {
-    const n = a ? Object.values(a).filter((l) => l.type === "button").map((l) => {
-      var F, w;
-      return {
-        title: l.value,
-        variant: v.SECONDARY,
-        event: (F = l.config) == null ? void 0 : F.action,
-        classNames: (w = l.config) != null && w.className ? [l.config.className] : []
-      };
-    }) : [], N = [O, g, ...n].filter(Boolean);
-    return N.length ? /* @__PURE__ */ t($, { className: Dt, children: /* @__PURE__ */ t(Tt, { actions: N, layout: Nt.BUTTONS_END }) }) : null;
-  }, [a, O, g]), mt = c(() => {
-    A(), C(!0);
-  }, [C, A]), ut = {
-    timezone: (M = e.balanceAccount) == null ? void 0 : M.timeZone,
-    createdAt: e.createdAt,
-    amountData: e.amount,
-    paymentMethodData: e.paymentMethod,
-    bankAccount: e.bankAccount
-  }, dt = St(ut), ft = c(() => u != null && u.length || D || m ? /* @__PURE__ */ t("div", { className: Et, children: [
-    (D || m) && /* @__PURE__ */ t(
-      b,
-      {
-        type: Y.HIGHLIGHT,
-        variant: h.TIP,
-        description: o.get("transactions.details.refund.alerts.inProgressBlocked")
-      }
-    ),
-    u.map((n, N) => /* @__PURE__ */ t(
-      b,
-      {
-        variant: h.TIP,
-        type: (n == null ? void 0 : n.type) ?? Y.HIGHLIGHT,
-        description: n == null ? void 0 : n.label
-      },
-      `${Math.random()}-${N}`
-    ))
-  ] }) : null, [o, u, D, m]), B = e.balanceAccount ?? ((k = I == null ? void 0 : I.data) == null ? void 0 : k.find((n) => n.id === e.balanceAccountId));
-  if (x(() => {
-    S(r.DETAILS);
-  }, [e]), x(() => {
-    d && S(r.DETAILS);
-  }, [d]), Q)
-    return /* @__PURE__ */ t(Rt, { skeletonRowNumber: 5 });
-  if (E(p)) return null;
-  const L = {
-    lineItems: it,
-    refundAvailable: ot,
-    refundDisabled: d,
-    setActiveView: lt,
-    setPrimaryAction: ct,
-    setSecondaryAction: st
-  };
-  switch (p) {
-    case r.DETAILS:
-      return /* @__PURE__ */ t(z, { renderViewActionButtons: U, renderViewMessageBox: ft, children: /* @__PURE__ */ t(
-        Xt,
+    refundLocked: t
+  } = Y(e), g = j(t), m = n(() => a || r, [a, r]), y = n(() => t || r, [t, r]), h = n(() => Object.freeze(e.lineItems ?? p), [e.lineItems]);
+  if (V({
+    ...O,
+    ...w && { fromPage: "Transactions overview" }
+  }), F(() => {
+    (g.current = t) && d(!1);
+  }, [t]), D)
+    return /* @__PURE__ */ o(C, { skeletonRowNumber: 5 });
+  switch (k) {
+    case c.REFUND:
+      return /* @__PURE__ */ o(
+        x,
         {
-          ...L,
-          transaction: !e.balanceAccount && B ? { ...e, balanceAccount: B } : { ...e },
-          transactionNavigator: tt,
-          extraFields: a,
-          dataCustomization: i,
-          children: [
-            /* @__PURE__ */ t($, { className: ht, children: /* @__PURE__ */ t(
-              Ct,
-              {
-                ...dt,
-                tag: /* @__PURE__ */ t(kt, { transaction: e, refundedState: rt }),
-                classNames: { amount: `${vt}--${Mt(e)}` }
-              }
-            ) }),
-            /* @__PURE__ */ t(gt, {})
-          ]
-        }
-      ) });
-    case r.REFUND:
-      return /* @__PURE__ */ t(z, { renderViewActionButtons: U, children: /* @__PURE__ */ t(
-        Vt,
-        {
-          ...L,
-          availableAmount: nt,
-          currency: at,
-          refundMode: T,
-          refreshTransaction: A,
-          transactionId: e.id,
-          transactionOriginalAmount: e.originalAmount,
-          children: [
-            /* @__PURE__ */ t(Bt, {}),
-            et && /* @__PURE__ */ t(Lt, {}),
-            T === y.FULL_AMOUNT && /* @__PURE__ */ t(Pt, {}),
-            (T === y.PARTIAL_AMOUNT || T === y.PARTIAL_LINE_ITEMS) && /* @__PURE__ */ t(Ut, { locale: o.locale }),
-            _ && /* @__PURE__ */ t(
-              b,
-              {
-                variant: h.TIP,
-                type: _.type,
-                description: _.description
-              }
-            )
-          ]
-        }
-      ) });
-    case r.REFUND_SUCCESS:
-      return /* @__PURE__ */ t(
-        J,
-        {
-          renderIcon: () => /* @__PURE__ */ t(q, { name: "checkmark-circle-fill", className: V(W, bt) }),
-          title: o.get("transactions.details.refund.alerts.refundSent"),
-          subtitle: o.get("transactions.details.refund.alerts.refundSuccess"),
-          action: () => /* @__PURE__ */ t(j, { variant: v.SECONDARY, onClick: mt, children: o.get("transactions.details.refund.actions.back") })
+          currency: u,
+          disabled: m,
+          lineItems: h,
+          maxAmount: P,
+          mode: T,
+          refreshTransaction: R,
+          refundedAmount: i,
+          refundingAmounts: f.in_progress ?? p,
+          setActiveView: s,
+          setLocked: d,
+          transaction: e
         }
       );
-    case r.REFUND_ERROR:
-      return /* @__PURE__ */ t(
-        J,
+    default:
+      return /* @__PURE__ */ o(
+        S,
         {
-          renderIcon: () => /* @__PURE__ */ t(q, { name: "cross-circle-fill", className: V(W, It) }),
-          title: o.get("common.errors.somethingWentWrong"),
-          subtitle: o.get("transactions.details.refund.alerts.refundFailure"),
-          action: () => /* @__PURE__ */ t(j, { variant: v.SECONDARY, onClick: A, children: o.get("transactions.details.refund.actions.back") })
+          dataCustomization: A,
+          extraFields: v,
+          fullRefundFailed: I,
+          fullRefundInProgress: L,
+          refundAmounts: f,
+          refundAvailable: E,
+          refundCurrency: u,
+          refundDisabled: m,
+          refundedAmount: i,
+          refundedState: M,
+          refundLocked: y,
+          setActiveView: s,
+          transaction: e,
+          transactionNavigator: b
         }
       );
-    default:
-      return null;
   }
 };
 export {
-  Ie as TransactionDataContent,
-  Ie as default
+  Z as TransactionDataContent,
+  Z as default
 };

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

@@ -0,0 +1,79 @@
+import { TRANSACTION_ANALYTICS_SUBCATEGORY_DETAILS as a, TRANSACTION_ANALYTICS_CATEGORY as T } from "../TransactionsOverview/constants.js";
+import { TRANSACTION_FIELDS as r } from "../TransactionsOverview/components/TransactionsTable/TransactionsTable.js";
+import { DetailsTab as s } from "./types.js";
+const e = "adyen-pe-transaction-data", E = `${e}__amount`, d = `${e}__action-bar`, l = `${e}__container`, N = `${e}__head-container`, o = `${e}__input`, _ = `${o}-container`, S = `${_}--short`, R = `${_}--text-input`, I = `${_}--with-error`, D = `${o}-head`, m = `${e}__label`, O = `${e}__list`, X = `${e}__tags`, f = `${e}__status-box`, p = `${e}__timeline-label`, C = `${e}__timeline-value`, U = `${e}__refund-response`, c = `${e}__refund-response-icon`, $ = `${c}--success`, L = `${c}--error`, b = `${e}__refund-statuses-container`, P = /* @__PURE__ */ new Set([
+  "status",
+  "category",
+  "paymentMethod",
+  "bankAccount",
+  "balanceAccount",
+  "id",
+  "balanceAccountId",
+  ...r,
+  "account",
+  "deductedAmount",
+  "description",
+  "lineItems",
+  "merchantReference",
+  "originalAmount",
+  "paymentPspReference",
+  "pspReference",
+  "refundDetails",
+  "refundMetadata",
+  "refundPspReference",
+  "refundReason"
+]), h = {
+  balanceAccount: "account",
+  balanceAccountId: (t) => {
+    const n = t == null ? void 0 : t.balanceAccount;
+    if (n && !n.description) return "account";
+  },
+  description: (t) => {
+    var n;
+    if ((n = t == null ? void 0 : t.balanceAccount) != null && n.description) return "account";
+  }
+}, F = [
+  { id: s.SUMMARY, label: "transactions.details.views.summary", content: null },
+  { id: s.DETAILS, label: "transactions.details.views.details", content: null },
+  { id: s.TIMELINE, label: "transactions.details.views.timeline", content: null }
+], y = ["completed", "in_progress", "failed"], M = ["requested_by_customer", "issue_with_item_sold", "fraudulent", "duplicate", "other"], w = Object.freeze({
+  requested_by_customer: "transactions.details.common.refundReasons.requestedByCustomer",
+  issue_with_item_sold: "transactions.details.common.refundReasons.issueWithItemSold",
+  fraudulent: "transactions.details.common.refundReasons.fraudulent",
+  duplicate: "transactions.details.common.refundReasons.duplicate",
+  other: "transactions.details.common.refundReasons.other"
+}), B = {
+  category: T,
+  subCategory: a
+};
+export {
+  M as REFUND_REASONS,
+  w as REFUND_REASONS_KEYS,
+  y as REFUND_STATUSES,
+  d as TX_DATA_ACTION_BAR,
+  E as TX_DATA_AMOUNT,
+  e as TX_DATA_CLASS,
+  l as TX_DATA_CONTAINER,
+  N as TX_DATA_HEAD_CONTAINER,
+  o as TX_DATA_INPUT,
+  _ as TX_DATA_INPUT_CONTAINER,
+  S as TX_DATA_INPUT_CONTAINER_SHORT,
+  R as TX_DATA_INPUT_CONTAINER_TEXT,
+  I as TX_DATA_INPUT_CONTAINER_WITH_ERROR,
+  D as TX_DATA_INPUT_HEAD,
+  m as TX_DATA_LABEL,
+  O as TX_DATA_LIST,
+  X as TX_DATA_TAGS,
+  h as TX_DETAILS_FIELDS_REMAPS,
+  P as TX_DETAILS_RESERVED_FIELDS_SET,
+  F as TX_DETAILS_TABS,
+  U as TX_REFUND_RESPONSE,
+  L as TX_REFUND_RESPONSE_ERROR_ICON,
+  c as TX_REFUND_RESPONSE_ICON,
+  $ as TX_REFUND_RESPONSE_SUCCESS_ICON,
+  b as TX_REFUND_STATUSES_CONTAINER,
+  f as TX_STATUS_BOX,
+  p as TX_TIMELINE_LABEL,
+  C as TX_TIMELINE_VALUE,
+  B as sharedTransactionDetailsEventProperties
+};

package/dist/es/components/external/TransactionDetails/hooks/useRefundMetadata/useRefundMetadata.js

@@ -0,0 +1,76 @@
+import { useMemo as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { RefundMode as l, RefundedState as N } from "../../types.js";
+import { REFUND_STATUSES as U } from "../../constants.js";
+import { boolOrFalse as _ } from "../../../../../utils/value/bool.js";
+import { isFunction as h } from "../../../../../utils/value/is.js";
+import { useConfigContext as D } from "../../../../../core/ConfigContext/context.js";
+const C = (u) => {
+  var E;
+  const e = u == null ? void 0 : u.refundDetails, c = (e == null ? void 0 : e.refundMode) ?? l.FULL_AMOUNT, F = _(e == null ? void 0 : e.refundLocked), L = c !== l.NON_REFUNDABLE, n = R(() => {
+    var f;
+    return u ? Math.max(0, ((f = e == null ? void 0 : e.refundableAmount) == null ? void 0 : f.value) ?? 0) : 0;
+  }, [e, u]), M = h(D().endpoints.initiateRefund), p = M && L && n > 0, I = ((E = e == null ? void 0 : e.refundableAmount) == null ? void 0 : E.currency) ?? (u == null ? void 0 : u.netAmount.currency) ?? "", T = !p || F, d = R(() => {
+    let f = -1;
+    return ((e == null ? void 0 : e.refundStatuses) ?? []).reduceRight(
+      (o, { amount: t, status: r }, s) => {
+        if (t.value !== 0 && U.includes(r)) {
+          const m = r !== "failed", A = s > f;
+          if (m && A && (f = s), m || A) {
+            const S = (o[r] ?? []).concat(Math.abs(t.value));
+            return { ...o, [r]: S };
+          }
+        }
+        return o;
+      },
+      {}
+    );
+  }, [e == null ? void 0 : e.refundStatuses]), { fullRefundFailed: a, fullRefundInProgress: b, refundedAmount: i } = R(() => {
+    let f = !1, o = !1;
+    const t = (d.completed ?? []).reduce((m, A) => m + A, 0), r = d.in_progress ?? [], s = d.failed ?? [];
+    return t === 0 && (f = r.length === 0 && s.slice(-1)[0] === n, o = r.length === 1 && r[0] === n), { fullRefundFailed: f, fullRefundInProgress: o, refundedAmount: t };
+  }, [n, d]), g = R(() => {
+    if (i > 0)
+      switch (c) {
+        case l.NON_REFUNDABLE:
+          if (n === 0) return N.FULL;
+          break;
+        case l.PARTIAL_AMOUNT:
+        case l.PARTIAL_LINE_ITEMS:
+          if (n > 0) return N.PARTIAL;
+          break;
+      }
+    return N.INDETERMINATE;
+  }, [n, i, c]);
+  return {
+    fullRefundFailed: a,
+    // whether the last (and only) refund that failed is the full refundable amount
+    fullRefundInProgress: b,
+    // whether the only refund in progress is the full refundable amount
+    refundableAmount: n,
+    // the maximum amount still available for refund
+    refundable: L,
+    // whether the refund mode of the payment allows for refund
+    refundAvailable: p,
+    // whether a refund can be initiated for the payment
+    refundAuthorization: M,
+    // whether the authenticated user has sufficient permission to initiate refunds
+    refundCurrency: I,
+    // the payment currency for any initiated refund
+    refundDisabled: T,
+    // whether refund action for the payment is disabled (refund view should be prevented)
+    refundAmounts: d,
+    // lookup of refund amounts by refund statuses
+    refundedAmount: i,
+    // the total amount already refunded
+    refundedState: g,
+    // whether the payment is yet to be, partially or fully refunded
+    refundLocked: F,
+    // whether refund action for the payment is temporarily locked
+    refundMode: c
+    // the refund mode of the payment
+  };
+};
+export {
+  C as default,
+  C as useRefundMetadata
+};

package/dist/es/components/external/TransactionDetails/hooks/useTransaction/transactionNavigator/createDuplexTransactionNavigator.js

@@ -1,8 +1,8 @@
-import { isEmptyString as l } from "../../../../../../utils/value/string.js";
 import { EMPTY_ARRAY as T } from "../../../../../../utils/value/constants.js";
-import { struct as g } from "../../../../../../utils/struct/main.js";
+import { struct as l } from "../../../../../../utils/struct/main.js";
 import { enumerable as d, getter as e } from "../../../../../../utils/struct/property.js";
 import { isNullish as k, isFunction as b } from "../../../../../../utils/value/is.js";
+import { isEmptyString as g } from "../../../../../../utils/value/string.js";
 const A = () => {
   let [t, i, a, o] = T;
   const m = () => !!(t && t === o && a), u = () => !!(t && t === a && o);
@@ -13,19 +13,19 @@ const A = () => {
     u() && (i = t, t = o, c());
   }, w = (r, s) => {
     const f = t;
-    t = i = a = o = void 0, !l(r) && !l(s) && (a = r, o = s, t = f === a || f === o ? f : a, f !== t && c());
+    t = i = a = o = void 0, !g(r) && !g(s) && (a = r, o = s, t = f === a || f === o ? f : a, f !== t && c());
   }, N = (r) => {
     k(r) ? n = null : b(r) && n !== (n = r) && c();
   }, c = () => {
     const r = i, s = t;
     i = void 0, n == null || n(
-      g({
+      l({
         from: e(() => r),
         to: e(() => s)
       })
     );
   };
-  return g({
+  return l({
     backward: d(v),
     forward: d(p),
     canNavigateBackward: e(m),

package/dist/es/components/external/TransactionDetails/hooks/useTransaction/useTransaction.js

@@ -1,44 +1,53 @@
-import { createDuplexTransactionNavigator as w } from "./transactionNavigator/createDuplexTransactionNavigator.js";
-import { useState as d, useRef as e, useMemo as A, useCallback as I, useEffect as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useFetch as O } from "../../../../../hooks/useFetch.js";
-import { useConfigContext as P } from "../../../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as N } from "../../../../../utils/value/constants.js";
-const J = (s) => {
-  const [i, y] = d(s), [t, r] = d(s.id), [C, E] = d(performance.now()), { getTransaction: a } = P().endpoints, h = e(w()), b = h.current, u = e(!1), l = e(!1), g = e(s), p = e(t), x = A(() => !!a && !!t && u.current, [t, a]), M = I(
-    () => a(N, {
-      path: { transactionId: t }
-    }),
-    [t, a]
-  ), {
-    data: o,
-    error: T,
+import y from "../../../../../hooks/useBalanceAccounts.js";
+import { createDuplexTransactionNavigator as A } from "./transactionNavigator/createDuplexTransactionNavigator.js";
+import { useRef as l, useState as T, useMemo as h, useCallback as C, useEffect as u } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useFetch as x } from "../../../../../hooks/useFetch.js";
+import { useConfigContext as B } from "../../../../../core/ConfigContext/context.js";
+import { isFunction as E } from "../../../../../utils/value/is.js";
+import { EMPTY_OBJECT as M } from "../../../../../utils/value/constants.js";
+const v = (o) => {
+  const { onNavigation: n, reset: e, ...r } = o;
+  return r;
+}, J = (o) => {
+  const n = l(A()).current, [e, r] = T(o), [t, N] = T(), [F, I] = T(() => v(n)), { balanceAccounts: i } = y(), { getTransaction: f } = B().endpoints, {
+    data: d,
+    error: g,
     isFetching: c
-  } = O({
-    fetchOptions: { enabled: x },
-    queryFn: M
-  }), q = I(() => r(void 0), []);
-  return m(() => {
-    t || r(i.id);
-  }, [t, i]), m(() => {
-    var v;
-    const n = h.current, f = g.current;
-    return f.category === "Refund" && (n.reset(f.id, (v = f.refundMetadata) == null ? void 0 : v.originalPaymentId), n.onNavigation = ({ to: F }) => {
-      u.current = !0, E(performance.now()), F && r(F);
-    }), () => {
-      u.current = !1, n.onNavigation = null, n.reset();
-    };
-  }, []), m(() => {
-    if (l.current !== c && !(l.current = c))
-      if (!o || T)
-        r(p.current);
-      else {
-        const n = g.current;
-        y(() => ({
-          ...o.id === n.id ? n : N,
-          ...o
-        })), p.current = t;
+  } = x(
+    h(() => {
+      const a = E(f) && !!e, s = { transactionId: e };
+      return {
+        fetchOptions: { enabled: a },
+        queryFn: () => f(M, { path: s })
+      };
+    }, [f, e])
+  ), p = l(c), m = l(e), S = h(() => {
+    if (!t) return;
+    const a = i == null ? void 0 : i.find((s) => s.id === t.balanceAccountId);
+    return { ...t, balanceAccount: a };
+  }, [i, t]), b = C(() => r(void 0), []);
+  return u(() => {
+    var a;
+    switch ((t == null ? void 0 : t.id) === o && (t == null ? void 0 : t.category)) {
+      case "Refund": {
+        n.reset(t == null ? void 0 : t.id, (a = t == null ? void 0 : t.refundMetadata) == null ? void 0 : a.originalPaymentId), n.onNavigation = ({ to: s }) => r(s);
+        break;
       }
-  }, [o, T, c, t, C]), { fetchingTransaction: c, refreshTransaction: q, transaction: i, transactionNavigator: b };
+    }
+    I(v(n));
+  }, [o, t, n]), u(() => {
+    p.current !== c && ((p.current = c) || (!d || g ? r(m.current) : (N(d), m.current = e)));
+  }, [d, g, c, e]), u(() => {
+    e || r(m.current);
+  }, [t, e]), u(() => () => {
+    n.onNavigation = null, n.reset();
+  }, [n]), {
+    error: g,
+    fetchingTransaction: c,
+    refreshTransaction: b,
+    transaction: S,
+    transactionNavigator: F
+  };
 };
 export {
   J as default,

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

@@ -0,0 +1,8 @@
+var L = /* @__PURE__ */ ((r) => (r.DETAILS = "details", r.REFUND = "refund", r))(L || {}), A = /* @__PURE__ */ ((r) => (r.DETAILS = "details", r.SUMMARY = "summary", r.TIMELINE = "timeline", r))(A || {}), l = /* @__PURE__ */ ((r) => (r[r.INDETERMINATE = 0] = "INDETERMINATE", r[r.PARTIAL = 1] = "PARTIAL", r[r.FULL = 2] = "FULL", r))(l || {}), _ = /* @__PURE__ */ ((r) => (r.NON_REFUNDABLE = "non_refundable", r.PARTIAL_AMOUNT = "partially_refundable_any_amount", r.PARTIAL_LINE_ITEMS = "partially_refundable_with_line_items_required", r.FULL_AMOUNT = "fully_refundable_only", r))(_ || {}), E = /* @__PURE__ */ ((r) => (r.PARTIAL = "partial", r.FULL = "full", r))(E || {});
+export {
+  L as ActiveView,
+  A as DetailsTab,
+  _ as RefundMode,
+  E as RefundType,
+  l as RefundedState
+};

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

@@ -0,0 +1,26 @@
+import { RefundType as r } from "./types.js";
+import { EMPTY_OBJECT as d } from "../../../utils/value/constants.js";
+const o = (e) => {
+  switch (e == null ? void 0 : e.status) {
+    case "Booked":
+      return "default";
+    case "Reversed":
+      return "error";
+    default:
+      return "pending";
+  }
+}, t = (e) => {
+  if ((e == null ? void 0 : e.category) === "Refund") {
+    const { refundType: u } = e.refundMetadata ?? d;
+    switch (u) {
+      case r.FULL:
+        return r.FULL;
+      case r.PARTIAL:
+        return r.PARTIAL;
+    }
+  }
+};
+export {
+  o as getAmountStyleForTransaction,
+  t as getRefundTypeForTransaction
+};

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

@@ -0,0 +1,29 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import f from "classnames";
+import e from "../../../../internal/Typography/Typography.js";
+import g from "../../../../../core/Context/useCoreContext.js";
+import { TypographyVariant as o, TypographyElement as m } from "../../../../internal/Typography/types.js";
+import { Tooltip as N } from "../../../../internal/Tooltip/Tooltip.js";
+import { useMemo as c } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { classes as t } from "./constants.js";
+/* empty css                   */
+import { Icon as P } from "../../../../internal/Icon/Icon.js";
+const U = ({ amount: p, currency: n, description: s, label: l, large: a }) => {
+  const { i18n: i } = g(), [u, T] = c(() => {
+    const h = a ? { variant: o.TITLE, large: !0 } : { variant: o.SUBTITLE, stronger: !0 }, d = a ? { variant: o.SUBTITLE, stronger: !0 } : { variant: o.CAPTION, stronger: !0 };
+    return [h, d];
+  }, [a]), y = c(() => i.amount(p, n), [i, p, n]);
+  return /* @__PURE__ */ r("div", { className: t.root, children: [
+    /* @__PURE__ */ r("div", { className: t.label, children: [
+      /* @__PURE__ */ r(e, { el: m.SPAN, variant: o.CAPTION, children: l }),
+      s && /* @__PURE__ */ r(N, { content: s, children: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(P, { name: "info" }) }) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: f(t.amount, { [t.amountLarge]: a }), children: [
+      /* @__PURE__ */ r(e, { el: m.SPAN, ...u, children: y }),
+      /* @__PURE__ */ r(e, { el: m.SPAN, className: t.currency, ...T, children: n })
+    ] })
+  ] });
+};
+export {
+  U as default
+};

package/dist/es/components/external/TransactionsOverview/components/AmountDisplay/constants.js

@@ -0,0 +1,11 @@
+const a = "adyen-pe-transaction-amount-display", n = {
+  root: a,
+  amount: a + "__amount",
+  amountLarge: a + "__amount--large",
+  currency: a + "__currency",
+  label: a + "__label"
+};
+export {
+  a as BASE_CLASS,
+  n as classes
+};