@adyen/adyen-platform-experience-web 1.1.1 → 1.3.0

package/dist/es/components/external/ReportsOverview/components/ReportsTable/ReportsTable.js

@@ -1,24 +1,24 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useState as B, useMemo as n, useCallback as Y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import M from "../../../../../core/Context/useCoreContext.js";
-import P from "../../../../hooks/useFreezePeriod.js";
-import x from "../../../../hooks/useTimezoneAwareDateFormatting.js";
-import I from "../../../../internal/Alert/Alert.js";
+import { useFreezePeriod as P } from "../../../../../hooks/useFreezePeriod.js";
+import I from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { Alert as x } from "../../../../internal/Alert/Alert.js";
 import { AlertTypeOption as V } from "../../../../internal/Alert/types.js";
 import q from "../../../../internal/Button/DownloadButton/DownloadButton.js";
 import { CellTextPosition as z } from "../../../../internal/DataGrid/types.js";
-import { DATE_FORMAT_REPORTS as D } from "../../../../internal/DataOverviewDisplay/constants.js";
 import G from "../../../../internal/DataOverviewError/DataOverviewError.js";
 import U from "../../../../internal/SVGIcons/Warning.js";
 import { TypographyVariant as a } from "../../../../internal/Typography/types.js";
 import i from "../../../../internal/Typography/Typography.js";
 import { getLabel as $ } from "../../../../utils/getLabel.js";
-import { useResponsiveViewport as g, mediaQueries as E } from "../../../../hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as g, mediaQueries as D } from "../../../../../hooks/useResponsiveViewport.js";
 import { BASE_CLASS as j, DATE_TYPE_CLASS as H, DATE_TYPE_DATE_SECTION_CLASS as Q, DISABLED_BUTTONS_TIMEOUT as X } from "./constants.js";
-import "./ReportsTable.scss.js";
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import h from "../../../../internal/DataGrid/DataGrid.js";
+/* empty css                  */
+import E from "../../../../internal/DataGrid/DataGrid.js";
+import { DATE_FORMAT_REPORTS as h } from "../../../../../constants/dateFormats.js";
 import k from "../../../../internal/Pagination/Pagination.js";
-import { useAuthContext as J } from "../../../../../core/Auth/context.js";
+import { useConfigContext as J } from "../../../../../core/ConfigContext/context.js";
 const K = ["createdAt", "dateAndReportType", "reportType", "reportFile"], Ee = ({
   error: s,
   loading: p,
@@ -28,121 +28,90 @@ const K = ["createdAt", "dateAndReportType", "reportType", "reportFile"], Ee = (
   data: T,
   ...R
 }) => {
-  const {
-    i18n: t
-  } = M(), {
-    dateFormat: u
-  } = x("UTC"), {
-    freeze: S,
-    frozen: O
-  } = P(X), [d, m] = B(null), {
-    refreshing: f
-  } = J(), b = n(() => p || f, [p, f]), c = g(E.up.sm), A = g(E.down.xs), y = n(() => ({
-    dateAndReportType: A,
-    createdAt: c,
-    reportType: c,
-    reportFile: !0
-  }), [A, c]), C = n(() => K.map((e) => {
-    const o = t.get($(e));
-    return {
-      key: e,
-      label: o,
-      position: A && e === "reportFile" ? z.RIGHT : void 0,
-      visible: y[e]
-    };
-  }), [t, T, y]), F = Y(() => {
-    m(null);
+  const { i18n: t } = M(), { dateFormat: u } = I("UTC"), { freeze: S, frozen: C } = P(X), [A, d] = B(null), { refreshing: f } = J(), b = n(() => p || f, [p, f]), m = g(D.up.sm), c = g(D.down.xs), y = n(
+    () => ({
+      dateAndReportType: c,
+      createdAt: m,
+      reportType: m,
+      reportFile: !0
+    }),
+    [c, m]
+  ), F = n(
+    () => K.map((e) => {
+      const o = t.get($(e));
+      return {
+        key: e,
+        label: o,
+        position: c && e === "reportFile" ? z.RIGHT : void 0,
+        visible: y[e]
+      };
+    }),
+    [t, T, y]
+  ), O = Y(() => {
+    d(null);
   }, []), N = {
     title: "noReportsFound",
     message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
-  }, v = n(() => () => r(G, {
-    error: s,
-    errorMessage: "weCouldNotLoadYourReports",
-    onContactSupport: l
-  }), [s, l]), L = n(() => r(U, {}), []), W = n(() => (e) => {
-    const o = {};
-    switch (e == null ? void 0 : e.errorCode) {
-      case "999_429_001":
-        o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("reportsError.tooManyDownloads");
-        break;
-      case "00_500":
-      default:
-        o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("error.pleaseTryAgainLater");
-        break;
-    }
-    m(o);
-  }, [s, l]);
-  return p && m(null), r("div", {
-    className: j,
-    children: [d && r(I, {
-      isOpen: !!d,
-      onClose: F,
-      type: V.WARNING,
-      className: "adyen-pe-reports-table-alert",
-      ...d
-    }), r(h, {
-      errorDisplay: v,
-      error: s,
-      columns: C,
-      data: T,
-      loading: b,
-      outline: !1,
-      emptyTableMessage: N,
-      customCells: {
-        createdAt: ({
-          value: e
-        }) => e ? e && r(i, {
-          variant: a.BODY,
-          children: u(e, D)
-        }) : null,
-        dateAndReportType: ({
-          item: e
-        }) => r("div", {
-          className: H,
-          children: [r(i, {
-            variant: a.BODY,
-            stronger: !0,
-            children: t.get(`reportType.${e == null ? void 0 : e.type}`)
-          }), r(i, {
-            className: Q,
-            variant: a.BODY,
-            children: u(e.createdAt, D)
-          })]
-        }),
-        reportType: ({
-          item: e
-        }) => (e == null ? void 0 : e.type) && r(i, {
-          variant: a.BODY,
-          children: t.get(`reportType.${e == null ? void 0 : e.type}`)
-        }),
-        reportFile: ({
-          item: e
-        }) => {
-          const o = {
-            query: {
-              balanceAccountId: w,
-              createdAt: e.createdAt,
-              type: e.type
-            }
-          };
-          return r(q, {
-            className: "adyen-pe-reports-table--download",
-            endpointName: "downloadReport",
-            disabled: O,
-            params: o,
-            onDownloadRequested: S,
-            setError: W,
-            errorDisplay: L
-          });
-        }
-      },
-      children: _ && r(h.Footer, {
-        children: r(k, {
-          ...R
-        })
-      })
-    })]
-  });
+  }, L = n(
+    () => () => /* @__PURE__ */ r(G, { error: s, errorMessage: "weCouldNotLoadYourReports", onContactSupport: l }),
+    [s, l]
+  ), W = n(() => /* @__PURE__ */ r(U, {}), []), v = n(
+    () => (e) => {
+      const o = {};
+      switch (e == null ? void 0 : e.errorCode) {
+        case "999_429_001":
+          o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("reportsError.tooManyDownloads");
+          break;
+        case "00_500":
+        default:
+          o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("error.pleaseTryAgainLater");
+          break;
+      }
+      d(o);
+    },
+    [s, l]
+  );
+  return p && d(null), /* @__PURE__ */ r("div", { className: j, children: [
+    A && /* @__PURE__ */ r(x, { onClose: O, type: V.WARNING, className: "adyen-pe-reports-table-alert", ...A }),
+    /* @__PURE__ */ r(
+      E,
+      {
+        errorDisplay: L,
+        error: s,
+        columns: F,
+        data: T,
+        loading: b,
+        outline: !1,
+        emptyTableMessage: N,
+        customCells: {
+          createdAt: ({ value: e }) => e ? e && /* @__PURE__ */ r(i, { variant: a.BODY, children: u(e, h) }) : null,
+          dateAndReportType: ({ item: e }) => /* @__PURE__ */ r("div", { className: H, children: [
+            /* @__PURE__ */ r(i, { variant: a.BODY, stronger: !0, children: t.get(`reportType.${e == null ? void 0 : e.type}`) }),
+            /* @__PURE__ */ r(i, { className: Q, variant: a.BODY, children: u(e.createdAt, h) })
+          ] }),
+          reportType: ({ item: e }) => (e == null ? void 0 : e.type) && /* @__PURE__ */ r(i, { variant: a.BODY, children: t.get(`reportType.${e == null ? void 0 : e.type}`) }),
+          reportFile: ({ item: e }) => {
+            const o = {
+              query: { balanceAccountId: w, createdAt: e.createdAt, type: e.type }
+            };
+            return /* @__PURE__ */ r(
+              q,
+              {
+                className: "adyen-pe-reports-table--download",
+                endpointName: "downloadReport",
+                disabled: C,
+                params: o,
+                onDownloadRequested: S,
+                setError: v,
+                errorDisplay: W
+              }
+            );
+          }
+        },
+        children: _ && /* @__PURE__ */ r(E.Footer, { children: /* @__PURE__ */ r(k, { ...R }) })
+      }
+    )
+  ] });
 };
 export {
   Ee as ReportsTable

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

@@ -1,23 +1,25 @@
-var s = Object.defineProperty;
-var i = (o, e, t) => e in o ? s(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var n = (o, e, t) => (i(o, typeof e != "symbol" ? e + "" : e, t), t);
-import a from "../UIElement/UIElement.js";
+var r = Object.defineProperty;
+var s = (o, t, e) => t in o ? r(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => s(o, typeof t != "symbol" ? t + "" : t, e);
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { UIElement as a } from "../UIElement/UIElement.js";
 import p from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
-import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-class r extends a {
-  constructor(t) {
-    super(t);
-    n(this, "componentToRender", () => c(p, {
-      ...this.props,
-      type: "transaction",
-      ref: (t) => void (this.componentRef = t)
-    }));
+class m extends a {
+  constructor(e) {
+    super(e);
+    n(this, "componentToRender", () => /* @__PURE__ */ i(
+      p,
+      {
+        ...this.props,
+        type: "transaction",
+        ref: (e) => void (this.componentRef = e)
+      }
+    ));
     this.componentToRender = this.componentToRender.bind(this);
   }
 }
-n(r, "type", "transactionDetails");
-const h = r;
+n(m, "type", "transactionDetails");
 export {
-  r as TransactionElement,
-  h as default
+  m as TransactionElement,
+  m as default
 };

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

@@ -0,0 +1,8 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import e from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
+import { TransactionDataContent as a } from "./TransactionDataContent.js";
+import { boolOrFalse as s } from "../../../../../utils/value/bool.js";
+const g = ({ error: n, isFetching: i, transaction: o, extraFields: r }) => s(i) || !(o || n) ? /* @__PURE__ */ t(e, { skeletonRowNumber: 5 }) : o ? /* @__PURE__ */ t(a, { transaction: o, extraFields: r }) : null;
+export {
+  g as TransactionData
+};

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

@@ -0,0 +1,186 @@
+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 { Alert as 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";
+/* empty css                     */
+import { useTransaction as ve } from "../../hooks/useTransaction/useTransaction.js";
+import { useTransactionRefundMetadata as ye } from "../../hooks/useTransactionRefundMetadata/useTransactionRefundMetadata.js";
+import { Icon as 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 { useConfigContext as Le } from "../../../../../core/ConfigContext/context.js";
+const Y = ({
+  children: c,
+  renderViewActionButtons: s,
+  renderViewMessageBox: o
+}) => /* @__PURE__ */ e("div", { className: Ee, children: [
+  c,
+  o && o(),
+  s()
+] }), G = ({
+  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()
+] }), lt = ({ transaction: c, extraFields: s }) => {
+  var g;
+  const [o, l] = A(a.DETAILS), [h, $] = 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) => $(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(
+        G,
+        {
+          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(
+        G,
+        {
+          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;
+  }
+};
+export {
+  lt as TransactionDataContent,
+  lt 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,52 @@
+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 g from "../../../../internal/CopyText/CopyText.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as x, TX_DATA_LIST as E, TX_DATA_LABEL as P } 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 $ = () => {
+  const { i18n: s } = C(), { transaction: u, extraFields: l } = I();
+  return v(() => {
+    const { balanceAccount: a, category: p, id: y, paymentPspReference: f, refundMetadata: e } = u, r = p === "Refund", t = null, c = (n) => {
+      if (S(n)) return null;
+      const { value: o, currency: _ } = n;
+      return s.amount(o, _);
+    }, m = c(u.deductedAmount), d = c(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]) => !x.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(g, { type: "Default", textToCopy: y, showCopyTextTooltip: !1 }) },
+      r && (e != null && e.refundPspReference) ? { key: "refund.refundPspReference", value: e.refundPspReference } : t,
+      // psp reference
+      f ? { key: A, value: f } : t
+    ].filter(Boolean);
+    return /* @__PURE__ */ i(
+      L,
+      {
+        classNames: E,
+        items: D,
+        layout: "5-7",
+        renderLabel: (n) => /* @__PURE__ */ i("div", { className: P, children: n })
+      }
+    );
+  }, [s, u]);
+};
+export {
+  $ as default
+};

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

@@ -0,0 +1,7 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TX_DATA_CONTAINER as r } from "../constants.js";
+import s from "classnames";
+const n = ({ children: a, className: o }) => /* @__PURE__ */ t("div", { className: s(r, o), children: a });
+export {
+  n 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 M, TX_DATA_PAY_METHOD_DETAIL as N, TX_DATA_LABEL as O } from "../constants.js";
+import { getPaymentMethodTypeForTransaction as S, getDisplayablePaymentMethodForTransaction as F, getRefundTypeForTransaction as C, getAmountStyleForTransaction as P } from "../utils.js";
+import R from "classnames";
+import { memo as U } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as u } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import b 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 } = b(), { 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(
+    () => [
+      S(r),
+      F(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: R(p, `${p}--${P(r)}`), children: d }),
+    m && /* @__PURE__ */ e("div", { className: h, children: [
+      /* @__PURE__ */ e("div", { className: v, children: /* @__PURE__ */ e(I, { className: M, name: m, alt: m, folder: "logos/" }) }),
+      /* @__PURE__ */ e("div", { className: N, children: y })
+    ] }),
+    A && /* @__PURE__ */ e("div", { className: O, children: g(new Date(A), X) })
+  ] });
+}, W = U($);
+export {
+  W as default
+};