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

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 l } from "../../types.js";
+import { useLandedPageEvent as V } from "../../../../../hooks/useAnalytics/useLandedPageEvent.js";
+import { useState as p, 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,
-    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,
+import { useRefundMetadata as Y } from "../../hooks/useRefundMetadata/useRefundMetadata.js";
+import { EMPTY_ARRAY as A } from "../../../../../utils/value/constants.js";
+const Z = ({
+  dataCustomization: v,
+  extraFields: D,
+  fetchingTransaction: R,
+  refreshTransaction: b,
+  transaction: e,
+  transactionNavigator: k
+}) => {
+  const [w, s] = p(l.DETAILS), [d, f] = p(!1), { withinModal: I } = N(), {
+    fullRefundFailed: L,
+    fullRefundInProgress: P,
+    refundableAmount: E,
+    refundAmounts: u,
+    refundAvailable: M,
+    refundCurrency: a,
+    refundDisabled: i,
+    refundedAmount: m,
+    refundedState: T,
+    refundMode: g,
+    refundLocked: t
+  } = Y(e), y = j(t), r = n(() => t || d, [t, d]), c = n(() => i || r, [i, r]), h = n(() => Object.freeze(e.lineItems ?? A), [e.lineItems]);
+  if (V({
+    ...O,
+    ...I && { fromPage: "Transactions overview" }
+  }), F(() => {
+    (y.current = t) && f(!1);
+  }, [t]), R)
+    return /* @__PURE__ */ o(C, { skeletonRowNumber: 5 });
+  switch (w) {
+    case l.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: a,
+          disabled: c,
+          lineItems: h,
+          maxAmount: E,
+          mode: g,
+          refreshTransaction: b,
+          refundedAmount: m,
+          refundingAmounts: u.in_progress ?? A,
+          setActiveView: s,
+          setLocked: f,
+          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: v,
+          extraFields: D,
+          fullRefundFailed: L,
+          fullRefundInProgress: P,
+          refundAmounts: u,
+          refundAvailable: M,
+          refundCurrency: a,
+          refundDisabled: c,
+          refundedAmount: m,
+          refundedState: T,
+          refundLocked: r,
+          setActiveView: s,
+          transaction: e,
+          transactionNavigator: k
         }
       );
-    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,78 @@
+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 n } from "./types.js";
+const t = "adyen-pe-transaction-data", E = `${t}__amount`, d = `${t}__action-bar`, l = `${t}__container`, N = `${t}__head-container`, o = `${t}__input`, s = `${o}-container`, S = `${s}--short`, R = `${s}--text-input`, I = `${s}--with-error`, D = `${o}-head`, m = `${t}__label`, O = `${t}__list`, X = `${t}__tags`, f = `${t}__status-box`, p = `${t}__timeline-label`, C = `${t}__timeline-value`, U = `${t}__refund-response`, c = `${t}__refund-response-icon`, $ = `${c}--success`, L = `${c}--error`, b = `${t}__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: (e) => {
+    const _ = e?.balanceAccount;
+    if (_ && !_.description) return "account";
+  },
+  description: (e) => {
+    if (e?.balanceAccount?.description) return "account";
+  }
+}, F = [
+  { id: n.SUMMARY, label: "transactions.details.views.summary", content: null },
+  { id: n.DETAILS, label: "transactions.details.views.details", content: null },
+  { id: n.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,
+  t as TX_DATA_CLASS,
+  l as TX_DATA_CONTAINER,
+  N as TX_DATA_HEAD_CONTAINER,
+  o as TX_DATA_INPUT,
+  s 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,72 @@
+import { useMemo as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { RefundMode as f, RefundedState as R } from "../../types.js";
+import { REFUND_STATUSES as S } from "../../constants.js";
+import { boolOrFalse as U } from "../../../../../utils/value/bool.js";
+import { isFunction as _ } from "../../../../../utils/value/is.js";
+import { useConfigContext as h } from "../../../../../core/ConfigContext/context.js";
+const y = (s) => {
+  const u = s?.refundDetails, l = u?.refundMode ?? f.FULL_AMOUNT, N = U(u?.refundLocked), F = l !== f.NON_REFUNDABLE, e = m(() => s ? Math.max(0, u?.refundableAmount?.value ?? 0) : 0, [u, s]), L = _(h().endpoints.initiateRefund), M = L && F && e > 0, p = u?.refundableAmount?.currency ?? s?.netAmount.currency ?? "", E = !M || N, r = m(() => {
+    let d = -1;
+    return (u?.refundStatuses ?? []).reduceRight(
+      (t, { amount: o, status: n }, a) => {
+        if (o.value !== 0 && S.includes(n)) {
+          const i = n !== "failed", c = a > d;
+          if (i && c && (d = a), i || c) {
+            const g = (t[n] ?? []).concat(Math.abs(o.value));
+            return { ...t, [n]: g };
+          }
+        }
+        return t;
+      },
+      {}
+    );
+  }, [u?.refundStatuses]), { fullRefundFailed: I, fullRefundInProgress: T, refundedAmount: A } = m(() => {
+    let d = !1, t = !1;
+    const o = (r.completed ?? []).reduce((i, c) => i + c, 0), n = r.in_progress ?? [], a = r.failed ?? [];
+    return o === 0 && (d = n.length === 0 && a.slice(-1)[0] === e, t = n.length === 1 && n[0] === e), { fullRefundFailed: d, fullRefundInProgress: t, refundedAmount: o };
+  }, [e, r]), b = m(() => {
+    if (A > 0)
+      switch (l) {
+        case f.NON_REFUNDABLE:
+          if (e === 0) return R.FULL;
+          break;
+        case f.PARTIAL_AMOUNT:
+        case f.PARTIAL_LINE_ITEMS:
+          if (e > 0) return R.PARTIAL;
+          break;
+      }
+    return R.INDETERMINATE;
+  }, [e, A, l]);
+  return {
+    fullRefundFailed: I,
+    // whether the last (and only) refund that failed is the full refundable amount
+    fullRefundInProgress: T,
+    // whether the only refund in progress is the full refundable amount
+    refundableAmount: e,
+    // the maximum amount still available for refund
+    refundable: F,
+    // whether the refund mode of the payment allows for refund
+    refundAvailable: M,
+    // whether a refund can be initiated for the payment
+    refundAuthorization: L,
+    // whether the authenticated user has sufficient permission to initiate refunds
+    refundCurrency: p,
+    // the payment currency for any initiated refund
+    refundDisabled: E,
+    // whether refund action for the payment is disabled (refund view should be prevented)
+    refundAmounts: r,
+    // lookup of refund amounts by refund statuses
+    refundedAmount: A,
+    // the total amount already refunded
+    refundedState: b,
+    // whether the payment is yet to be, partially or fully refunded
+    refundLocked: N,
+    // whether refund action for the payment is temporarily locked
+    refundMode: l
+    // the refund mode of the payment
+  };
+};
+export {
+  y as default,
+  y as useRefundMetadata
+};

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

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

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

@@ -1,44 +1,52 @@
-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,
-    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;
+import S from "../../../../../hooks/useBalanceAccounts.js";
+import { createDuplexTransactionNavigator as y } from "./transactionNavigator/createDuplexTransactionNavigator.js";
+import { useRef as m, useState as l, useMemo as h, useCallback as C, useEffect as s } 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 = (e) => {
+  const { onNavigation: n, reset: a, ...r } = e;
+  return r;
+}, J = (e) => {
+  const n = m(y()).current, [a, r] = l(e), [t, N] = l(), [b, A] = l(() => v(n)), { balanceAccounts: T } = S(), { getTransaction: i } = B().endpoints, {
+    data: u,
+    error: f,
+    isFetching: o
+  } = x(
+    h(() => {
+      const c = E(i) && !!a, g = { transactionId: a };
+      return {
+        fetchOptions: { enabled: c },
+        queryFn: () => i(M, { path: g })
+      };
+    }, [i, a])
+  ), p = m(o), d = m(a), F = h(() => {
+    if (!t) return;
+    const c = T?.find((g) => g.id === t.balanceAccountId);
+    return { ...t, balanceAccount: c };
+  }, [T, t]), I = C(() => r(void 0), []);
+  return s(() => {
+    switch (t?.id === e && t?.category) {
+      case "Refund": {
+        n.reset(t?.id, t?.refundMetadata?.originalPaymentId), n.onNavigation = ({ to: c }) => r(c);
+        break;
       }
-  }, [o, T, c, t, C]), { fetchingTransaction: c, refreshTransaction: q, transaction: i, transactionNavigator: b };
+    }
+    A(v(n));
+  }, [e, t, n]), s(() => {
+    p.current !== o && ((p.current = o) || (!u || f ? r(d.current) : (N(u), d.current = a)));
+  }, [u, f, o, a]), s(() => {
+    a || r(d.current);
+  }, [t, a]), s(() => () => {
+    n.onNavigation = null, n.reset();
+  }, [n]), {
+    error: f,
+    fetchingTransaction: o,
+    refreshTransaction: I,
+    transaction: F,
+    transactionNavigator: b
+  };
 };
 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 n } from "../../../utils/value/constants.js";
+const a = (e) => {
+  switch (e?.status) {
+    case "Booked":
+      return "default";
+    case "Reversed":
+      return "error";
+    default:
+      return "pending";
+  }
+}, s = (e) => {
+  if (e?.category === "Refund") {
+    const { refundType: t } = e.refundMetadata ?? n;
+    switch (t) {
+      case r.FULL:
+        return r.FULL;
+      case r.PARTIAL:
+        return r.PARTIAL;
+    }
+  }
+};
+export {
+  a as getAmountStyleForTransaction,
+  s as getRefundTypeForTransaction
+};