@adyen/adyen-platform-experience-web 1.7.0 → 1.8.0

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

@@ -1,6 +1,6 @@
 import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import V from "classnames";
-import { useState as S, useMemo as X, useCallback as i, useLayoutEffect as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+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";
@@ -8,62 +8,62 @@ import { AlertVariantOption as h, AlertTypeOption as Y } from "../../../../inter
 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 St from "../../../../internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js";
-import Rt from "../../../../internal/StatusBox/useStatusBox.js";
-import { TypographyVariant as H, TypographyModifier as Et } from "../../../../internal/Typography/types.js";
-import $ from "../../../../internal/Typography/Typography.js";
-import { ActiveView as a, RefundMode as y } from "../../context/types.js";
-import { TX_DATA_ACTION_BAR as _t, TX_REFUND_STATUSES_CONTAINER as Dt, TX_REFUND_RESPONSE_ICON as G, 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 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 j from "../details/TransactionDetailsDataContainer.js";
+import $ from "../details/TransactionDetailsDataContainer.js";
 import Ct from "../../../../internal/StatusBox/StatusBox.js";
-import { TransactionRefundFullAmountInput as Pt, TransactionRefundPartialAmountInput as Bt } from "../refund/TransactionRefundAmount.js";
-import Lt from "../refund/TransactionRefundNotice.js";
-import Ut from "../refund/TransactionRefundReason.js";
+import { TransactionRefundFullAmountInput as Pt, TransactionRefundPartialAmountInput as Ut } from "../refund/TransactionRefundAmount.js";
+import Bt from "../refund/TransactionRefundNotice.js";
+import Lt from "../refund/TransactionRefundReason.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 q from "../../../../internal/Button/Button.js";
-import { Icon as z } from "../../../../internal/Icon/Icon.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 W = ({
+const z = ({
   children: s,
-  renderViewActionButtons: r,
-  renderViewMessageBox: c
+  renderViewActionButtons: a,
+  renderViewMessageBox: i
 }) => /* @__PURE__ */ t("div", { className: Ot, children: [
   s,
-  c && c(),
-  r()
+  i && i(),
+  a()
 ] }), J = ({
   action: s,
-  title: r,
-  renderIcon: c,
+  title: a,
+  renderIcon: i,
   subtitle: p
 }) => /* @__PURE__ */ t("div", { className: yt, children: [
-  c && c(),
-  /* @__PURE__ */ t($, { className: Et.MEDIUM, variant: H.TITLE, children: r }),
-  /* @__PURE__ */ t($, { variant: H.BODY, children: p }),
+  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: r, dataCustomization: c }) => {
+] }), Ie = ({ transaction: s, extraFields: a, dataCustomization: i }) => {
   var M, k;
-  const [p, R] = S(a.DETAILS), [O, Z] = S(), [g, K] = S(), [l, C] = S(!1), { fetchingTransaction: Q, refreshTransaction: A, transaction: e, transactionNavigator: tt } = Ft(s), {
+  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: E,
+    refundableAmountLabel: _,
     refundAvailable: ot,
-    refundCurrency: rt,
+    refundCurrency: at,
     refundDisabled: P,
-    refundedState: at,
+    refundedState: rt,
     refundStatuses: u,
     refundMode: T,
-    refundLocked: _
-  } = wt(e), d = X(() => P || l, [P, l]), { i18n: o } = pt(), ct = Object.freeze((e == null ? void 0 : e.lineItems) ?? xt), it = i((n) => Z(n), []), st = i((n) => K(n), []), D = i(
-    (n) => n === a.REFUND && d,
+    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(
@@ -76,21 +76,21 @@ const W = ({
       }),
       [e.balanceAccountId, e.balanceAccount, f]
     )
-  ), mt = i(
-    (n) => void (D(n) || R(n)),
-    [D]
-  ), B = i(() => {
-    const n = r ? Object.values(r).filter((m) => m.type === "button").map((m) => {
+  ), 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: m.value,
+        title: l.value,
         variant: v.SECONDARY,
-        event: (F = m.config) == null ? void 0 : F.action,
-        classNames: (w = m.config) != null && w.className ? [m.config.className] : []
+        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(j, { className: _t, children: /* @__PURE__ */ t(Tt, { actions: N, layout: Nt.BUTTONS_END }) }) : null;
-  }, [r, O, g]), lt = i(() => {
+    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,
@@ -98,13 +98,13 @@ const W = ({
     amountData: e.amount,
     paymentMethodData: e.paymentMethod,
     bankAccount: e.bankAccount
-  }, dt = Rt(ut), ft = i(() => u != null && u.length || _ || l ? /* @__PURE__ */ t("div", { className: Dt, children: [
-    (_ || l) && /* @__PURE__ */ t(
+  }, 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("refund.theRefundIsBeingProcessed")} ${o.get("pleaseComeBackLater")}`
+        description: o.get("transactions.details.refund.alerts.inProgressBlocked")
       }
     ),
     u.map((n, N) => /* @__PURE__ */ t(
@@ -116,38 +116,38 @@ const W = ({
       },
       `${Math.random()}-${N}`
     ))
-  ] }) : null, [o, u, _, l]), L = e.balanceAccount ?? ((k = I == null ? void 0 : I.data) == null ? void 0 : k.find((n) => n.id === e.balanceAccountId));
+  ] }) : 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(() => {
-    R(a.DETAILS);
+    S(r.DETAILS);
   }, [e]), x(() => {
-    d && R(a.DETAILS);
+    d && S(r.DETAILS);
   }, [d]), Q)
-    return /* @__PURE__ */ t(St, { skeletonRowNumber: 5 });
-  if (D(p)) return null;
-  const U = {
-    lineItems: ct,
+    return /* @__PURE__ */ t(Rt, { skeletonRowNumber: 5 });
+  if (E(p)) return null;
+  const L = {
+    lineItems: it,
     refundAvailable: ot,
     refundDisabled: d,
-    setActiveView: mt,
-    setPrimaryAction: it,
+    setActiveView: lt,
+    setPrimaryAction: ct,
     setSecondaryAction: st
   };
   switch (p) {
-    case a.DETAILS:
-      return /* @__PURE__ */ t(W, { renderViewActionButtons: B, renderViewMessageBox: ft, children: /* @__PURE__ */ t(
+    case r.DETAILS:
+      return /* @__PURE__ */ t(z, { renderViewActionButtons: U, renderViewMessageBox: ft, children: /* @__PURE__ */ t(
         Xt,
         {
-          ...U,
-          transaction: !e.balanceAccount && L ? { ...e, balanceAccount: L } : { ...e },
+          ...L,
+          transaction: !e.balanceAccount && B ? { ...e, balanceAccount: B } : { ...e },
           transactionNavigator: tt,
-          extraFields: r,
-          dataCustomization: c,
+          extraFields: a,
+          dataCustomization: i,
           children: [
-            /* @__PURE__ */ t(j, { className: ht, children: /* @__PURE__ */ t(
+            /* @__PURE__ */ t($, { className: ht, children: /* @__PURE__ */ t(
               Ct,
               {
                 ...dt,
-                tag: /* @__PURE__ */ t(kt, { transaction: e, refundedState: at }),
+                tag: /* @__PURE__ */ t(kt, { transaction: e, refundedState: rt }),
                 classNames: { amount: `${vt}--${Mt(e)}` }
               }
             ) }),
@@ -155,50 +155,51 @@ const W = ({
           ]
         }
       ) });
-    case a.REFUND:
-      return /* @__PURE__ */ t(W, { renderViewActionButtons: B, children: /* @__PURE__ */ t(
+    case r.REFUND:
+      return /* @__PURE__ */ t(z, { renderViewActionButtons: U, children: /* @__PURE__ */ t(
         Vt,
         {
-          ...U,
+          ...L,
           availableAmount: nt,
-          currency: rt,
+          currency: at,
           refundMode: T,
           refreshTransaction: A,
           transactionId: e.id,
+          transactionOriginalAmount: e.originalAmount,
           children: [
-            /* @__PURE__ */ t(Lt, {}),
-            et && /* @__PURE__ */ t(Ut, {}),
+            /* @__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(Bt, { locale: o.locale }),
-            E && /* @__PURE__ */ t(
+            (T === y.PARTIAL_AMOUNT || T === y.PARTIAL_LINE_ITEMS) && /* @__PURE__ */ t(Ut, { locale: o.locale }),
+            _ && /* @__PURE__ */ t(
               b,
               {
                 variant: h.TIP,
-                type: E.type,
-                description: E.description
+                type: _.type,
+                description: _.description
               }
             )
           ]
         }
       ) });
-    case a.REFUND_SUCCESS:
+    case r.REFUND_SUCCESS:
       return /* @__PURE__ */ t(
         J,
         {
-          renderIcon: () => /* @__PURE__ */ t(z, { name: "checkmark-circle-fill", className: V(G, bt) }),
-          title: o.get("refundActionSuccessTitle"),
-          subtitle: o.get("refundActionSuccessSubtitle"),
-          action: () => /* @__PURE__ */ t(q, { variant: v.SECONDARY, onClick: lt, children: o.get("goBack") })
+          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") })
         }
       );
-    case a.REFUND_ERROR:
+    case r.REFUND_ERROR:
       return /* @__PURE__ */ t(
         J,
         {
-          renderIcon: () => /* @__PURE__ */ t(z, { name: "cross-circle-fill", className: V(G, It) }),
-          title: o.get("refundActionErrorTitle"),
-          subtitle: o.get("refundActionErrorSubtitle"),
-          action: () => /* @__PURE__ */ t(q, { variant: v.SECONDARY, onClick: A, children: o.get("goBack") })
+          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") })
         }
       );
     default:

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

@@ -1,23 +1,24 @@
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import p from "../../../../../core/Context/useCoreContext.js";
-import { Tag as a } from "../../../../internal/Tag/Tag.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { Tag as r } from "../../../../internal/Tag/Tag.js";
 import { TagVariant as e } from "../../../../internal/Tag/types.js";
-import { RefundType as m, RefundedState as f } from "../../context/types.js";
-import { TX_DATA_TAGS as T } from "../constants.js";
-import { getRefundTypeForTransaction as s } from "../utils.js";
-import { Fragment as u } from "../../../../../external/preact/dist/preact.module.js";
-const C = ({ transaction: n, refundedState: i }) => {
-  const { i18n: t } = p(), { category: l } = n, o = s(n);
-  return /* @__PURE__ */ r("div", { className: T, children: [
-    l && /* @__PURE__ */ r(a, { label: t.get(`txType.${l}`), variant: e.DEFAULT }),
-    o && /* @__PURE__ */ r(u, { children: [
-      o === m.FULL && /* @__PURE__ */ r(a, { label: t.get("full"), variant: e.SUCCESS }),
-      o === m.PARTIAL && /* @__PURE__ */ r(a, { label: t.get("partial"), variant: e.BLUE })
+import { RefundType as m, RefundedState as l } from "../../context/types.js";
+import f from "../../../../../core/Context/useCoreContext.js";
+import { getTransactionCategory as c } from "../../../../utils/translation/getters.js";
+import { getRefundTypeForTransaction as d } from "../utils.js";
+import { TX_DATA_TAGS as p } from "../constants.js";
+import { Fragment as T } from "../../../../../external/preact/dist/preact.module.js";
+const b = ({ transaction: n, refundedState: i }) => {
+  const { i18n: a } = f(), { category: s } = n, o = d(n);
+  return /* @__PURE__ */ t("div", { className: p, children: [
+    s && /* @__PURE__ */ t(r, { label: c(a, s), variant: e.DEFAULT }),
+    o && /* @__PURE__ */ t(T, { children: [
+      o === m.FULL && /* @__PURE__ */ t(r, { label: a.get("transactions.details.common.refundTypes.full"), variant: e.SUCCESS }),
+      o === m.PARTIAL && /* @__PURE__ */ t(r, { label: a.get("transactions.details.common.refundTypes.partial"), variant: e.BLUE })
     ] }),
-    i === f.FULL && /* @__PURE__ */ r(a, { label: t.get("refunded.full"), variant: e.SUCCESS }),
-    i === f.PARTIAL && /* @__PURE__ */ r(a, { label: t.get("refunded.partial"), variant: e.BLUE })
+    i === l.FULL && /* @__PURE__ */ t(r, { label: a.get("transactions.details.common.refundedStates.full"), variant: e.SUCCESS }),
+    i === l.PARTIAL && /* @__PURE__ */ t(r, { label: a.get("transactions.details.common.refundedStates.partial"), variant: e.BLUE })
   ] });
 };
 export {
-  C as default
+  b as default
 };

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

@@ -1,82 +1,109 @@
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import S from "../../../../internal/CopyText/CopyText.js";
-import { TX_DETAILS_RESERVED_FIELDS_SET as b, TX_DATA_LIST as F, TX_DATA_LABEL as B } from "../constants.js";
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as N, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import B from "../../../../internal/CopyText/CopyText.js";
+import { getTransactionRefundReason as F } from "../../../../utils/translation/getters.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as K, TX_DATA_LIST as O, TX_DATA_LABEL as j } from "../constants.js";
 import { isCustomDataObject as p } from "../../../../internal/DataGrid/components/TableCells.js";
-import C from "../../../../../core/Context/useCoreContext.js";
-import K from "../../../../internal/Link/Link.js";
-import { TypographyVariant as k } from "../../../../internal/Typography/types.js";
-import D from "../../../../internal/Typography/Typography.js";
-import O from "../../../../internal/DataGrid/components/Icon.js";
-import c from "classnames";
-import { useTransactionDetailsContext as j } from "../../context/details/context.js";
-import V from "../../../../internal/StructuredList/StructuredList.js";
-import { isNullish as X } from "../../../../../utils/value/is.js";
-const re = () => {
-  var y;
-  const { i18n: u } = C(), { transaction: m, extraFields: f, dataCustomization: i } = j();
-  return L(() => {
-    const { balanceAccount: l, category: _, id: x, paymentPspReference: R, refundMetadata: n } = m, d = _ === "Refund", a = null, T = (t) => {
-      if (X(t)) return null;
-      const { value: r, currency: o } = t;
-      return u.amount(r, o);
-    }, h = T(m.deductedAmount), A = T(m.originalAmount), P = d ? "refund.refundFee" : "refund.fee", E = d ? "refund.originalPayment" : "refund.originalAmount", I = d ? "refund.paymentPspReference" : "refund.pspReference", N = [
+import V from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import X from "../../../../../core/Context/useCoreContext.js";
+import Y from "../../../../internal/Link/Link.js";
+import { TypographyVariant as x } from "../../../../internal/Typography/types.js";
+import b from "../../../../internal/Typography/Typography.js";
+import q from "../../../../internal/DataGrid/components/Icon.js";
+import y from "classnames";
+import { useTransactionDetailsContext as w } from "../../context/details/context.js";
+import W from "../../../../internal/StructuredList/StructuredList.js";
+import { isNullish as G } from "../../../../../utils/value/is.js";
+const le = () => {
+  var R;
+  const { i18n: u } = X(), { transaction: c, extraFields: f, dataCustomization: o } = w(), m = V(), T = N(() => {
+    var a;
+    (a = m.addEvent) == null || a.call(m, "Clicked button", {
+      label: "Copy button",
+      value: "referenceID",
+      category: "Transaction component",
+      subCategory: "Transaction details"
+    });
+  }, [m]);
+  return S(() => {
+    const { balanceAccount: a, category: I, id: _, paymentPspReference: A, refundMetadata: r } = c, d = I === "Refund", l = null, h = (s) => {
+      if (G(s)) return null;
+      const { value: t, currency: i } = s;
+      return u.amount(t, i);
+    }, k = h(c.deductedAmount), D = h(c.originalAmount), C = d ? "transactions.details.fields.refundFee" : "transactions.details.fields.fee", P = d ? "transactions.details.fields.originalPayment" : "transactions.details.fields.originalAmount", v = d ? "transactions.details.fields.paymentPspReference" : "transactions.details.fields.pspReference", E = [
       ...[
         // amounts
-        A ? { key: E, value: A, id: "originalAmount" } : a,
-        h ? { key: P, value: h, id: "deductedAmount" } : a,
+        D ? { key: P, value: D, id: "originalAmount" } : l,
+        k ? { key: C, value: k, id: "deductedAmount" } : l,
         // balance account
-        l != null && l.description ? { key: "account", value: l.description, id: "description" } : a,
+        a != null && a.description ? { key: "transactions.details.fields.account", value: a.description, id: "description" } : l,
         // refund reason
-        d && (n != null && n.refundReason) ? {
-          key: "refundReason",
-          value: u.has(`refundReason.${n.refundReason}`) ? u.get(`refundReason.${n.refundReason}`) : n.refundReason,
+        d && (r != null && r.refundReason) ? {
+          key: "transactions.details.fields.refundReason",
+          value: F(u, r.refundReason),
           id: "refundReason"
-        } : a,
+        } : l,
         // reference id
-        { key: "referenceID", value: /* @__PURE__ */ s(S, { type: "Default", textToCopy: x, showCopyTextTooltip: !1 }), id: "id" },
-        d && (n != null && n.refundPspReference) ? { key: "refund.refundPspReference", value: n.refundPspReference, id: "refundPspReference" } : a,
+        {
+          key: "transactions.details.fields.referenceID",
+          value: /* @__PURE__ */ n(
+            B,
+            {
+              copyButtonAriaLabelKey: "transactions.details.actions.copyReferenceID",
+              type: "Default",
+              textToCopy: _,
+              onCopyText: T,
+              showCopyTextTooltip: !1
+            }
+          ),
+          id: "id"
+        },
+        d && (r != null && r.refundPspReference) ? {
+          key: "transactions.details.fields.refundPspReference",
+          value: r.refundPspReference,
+          id: "refundPspReference"
+        } : l,
         // psp reference
-        R ? { key: I, value: R, id: "paymentPspReference" } : a
-      ].filter(Boolean).filter((t) => {
-        var r, o;
-        return !((o = (r = i == null ? void 0 : i.details) == null ? void 0 : r.fields) != null && o.some((e) => e.key === t.id && e.visibility === "hidden"));
+        A ? { key: v, value: A, id: "paymentPspReference" } : l
+      ].filter(Boolean).filter((s) => {
+        var t, i;
+        return !((i = (t = o == null ? void 0 : o.details) == null ? void 0 : t.fields) != null && i.some((e) => e.key === s.id && e.visibility === "hidden"));
       }),
-      ...Object.entries(f || {}).filter(([t, r]) => !b.has(t) && r.type !== "button" && r.visibility !== "hidden").map(([t, r]) => ({
-        key: t,
-        value: p(r) ? r.value : r,
-        type: p(r) ? r.type : "text",
-        config: p(r) ? r.config : void 0
+      ...Object.entries(f || {}).filter(([s, t]) => !K.has(s) && t.type !== "button" && t.visibility !== "hidden").map(([s, t]) => ({
+        key: s,
+        value: p(t) ? t.value : t,
+        type: p(t) ? t.type : "text",
+        config: p(t) ? t.config : void 0
       })) || {}
     ];
-    return /* @__PURE__ */ s(
-      V,
+    return /* @__PURE__ */ n(
+      W,
       {
-        classNames: F,
-        items: N,
+        classNames: O,
+        items: E,
         layout: "5-7",
         align: "start",
-        renderLabel: (t) => /* @__PURE__ */ s("div", { className: B, children: t }),
-        renderValue: (t, r, o, e) => {
-          if (o === "link" && e)
-            return /* @__PURE__ */ s(K, { classNames: [c(e == null ? void 0 : e.className)], href: e.href, target: e.target || "_blank", children: t });
-          if (o === "icon" && e) {
-            const v = { url: e == null ? void 0 : e.src, alt: e.alt || t };
-            return /* @__PURE__ */ s("div", { className: c("adyen-pe-transaction-data__list-icon-value", e == null ? void 0 : e.className), children: [
-              /* @__PURE__ */ s(O, { ...v }),
-              /* @__PURE__ */ s(D, { variant: k.BODY, children: [
+        renderLabel: (s) => /* @__PURE__ */ n("div", { className: j, children: s }),
+        renderValue: (s, t, i, e) => {
+          if (i === "link" && e)
+            return /* @__PURE__ */ n(Y, { classNames: [y(e == null ? void 0 : e.className)], href: e.href, target: e.target || "_blank", children: s });
+          if (i === "icon" && e) {
+            const L = { url: e == null ? void 0 : e.src, alt: e.alt || s };
+            return /* @__PURE__ */ n("div", { className: y("adyen-pe-transaction-data__list-icon-value", e == null ? void 0 : e.className), children: [
+              /* @__PURE__ */ n(q, { ...L }),
+              /* @__PURE__ */ n(b, { variant: x.BODY, children: [
                 " ",
-                t,
+                s,
                 " "
               ] })
             ] });
           }
-          return /* @__PURE__ */ s(D, { className: c(e == null ? void 0 : e.className), variant: k.BODY, children: t });
+          return /* @__PURE__ */ n(b, { className: y(e == null ? void 0 : e.className), variant: x.BODY, children: s });
         }
       }
     );
-  }, [(y = i == null ? void 0 : i.details) == null ? void 0 : y.fields, f, u, m]);
+  }, [(R = o == null ? void 0 : o.details) == null ? void 0 : R.fields, f, u, c, T]);
 };
 export {
-  re as default
+  le as default
 };

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

@@ -6,25 +6,25 @@ import O from "../../../../../core/Context/useCoreContext.js";
 import Y from "../../../../internal/FormFields/InputBase.js";
 import h from "../../../../internal/Typography/Typography.js";
 import { TypographyVariant as b, TypographyElement as D } from "../../../../internal/Typography/types.js";
-import { getDecimalAmount as j, getDivider as w } from "../../../../../core/Localization/amount/amount-util.js";
-import { ARIA_ERROR_SUFFIX as W } from "../../../../../core/Errors/constants.js";
-import { TagVariant as k } from "../../../../internal/Tag/types.js";
+import { getDecimalAmount as j, getDivider as W } from "../../../../../core/Localization/amount/amount-util.js";
+import { ARIA_ERROR_SUFFIX as k } from "../../../../../core/Errors/constants.js";
+import { TagVariant as w } from "../../../../internal/Tag/types.js";
 import { Tag as z } from "../../../../internal/Tag/Tag.js";
 import { useTransactionRefundContext as P } from "../../context/refund/context.js";
 import { Icon as G } from "../../../../internal/Icon/Icon.js";
 import { uniqueId as E } from "../../../../../utils/random/uniqueId.js";
 import { boolOrFalse as J } from "../../../../../utils/value/bool.js";
-const x = (r, n) => j(r, n).toFixed(_(n)), _ = (r) => Math.log10(w(r)), y = ({
+const x = (r, n) => j(r, n).toFixed(_(n)), _ = (r) => Math.log10(W(r)), y = ({
   currency: r,
   disabled: n,
   errorMessage: e,
-  errorMessageArg: l,
-  onInput: A,
+  errorMessageArg: u,
+  onInput: p,
   value: T
 }) => {
-  const { i18n: a } = O(), i = v(E()), m = v(E()), p = e ? l ? a.get(e, { values: { amount: l } }) : a.get(e) : "";
+  const { i18n: a } = O(), i = v(E()), l = v(E()), f = e ? u ? a.get(e, { values: { amount: u } }) : 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: D.SPAN, variant: b.BODY, stronger: !0, children: a.get("refundAmount") }) }) }),
+    /* @__PURE__ */ t("div", { className: S, children: /* @__PURE__ */ t("div", { id: l.current, children: /* @__PURE__ */ t(h, { el: D.SPAN, variant: b.BODY, stronger: !0, children: a.get("transactions.details.refund.inputs.amount.label") }) }) }),
     /* @__PURE__ */ t(
       "div",
       {
@@ -35,8 +35,8 @@ const x = (r, n) => j(r, n).toFixed(_(n)), _ = (r) => Math.log10(w(r)), y = ({
           [B]: !!e
         }),
         children: [
-          /* @__PURE__ */ t("label", { htmlFor: i.current, "aria-labelledby": m.current, children: [
-            r && /* @__PURE__ */ t(z, { label: r, variant: k.DEFAULT }),
+          /* @__PURE__ */ t("label", { htmlFor: i.current, "aria-labelledby": l.current, children: [
+            r && /* @__PURE__ */ t(z, { label: r, variant: w.DEFAULT }),
             /* @__PURE__ */ t(
               Y,
               {
@@ -45,54 +45,54 @@ const x = (r, n) => j(r, n).toFixed(_(n)), _ = (r) => Math.log10(w(r)), y = ({
                 className: $,
                 disabled: J(n),
                 lang: a.locale,
-                onInput: A,
+                onInput: p,
                 value: T,
                 uniqueId: i.current
               }
             )
           ] }),
-          e && /* @__PURE__ */ t("div", { className: "adyen-pe-input__refund-invalid-value", id: `${i.current}${W}`, children: [
+          e && /* @__PURE__ */ t("div", { className: "adyen-pe-input__refund-invalid-value", id: `${i.current}${k}`, children: [
             /* @__PURE__ */ t(G, { name: "cross-circle-fill" }),
-            /* @__PURE__ */ t(h, { el: D.SPAN, variant: b.BODY, children: p })
+            /* @__PURE__ */ t(h, { el: D.SPAN, variant: b.BODY, children: f })
           ] })
         ]
       }
     )
   ] });
-}, At = () => {
+}, pt = () => {
   const { availableAmount: r, currency: n } = P();
   return /* @__PURE__ */ t(y, { currency: n, errorMessage: null, value: x(r, n), disabled: !0 });
 }, Tt = ({ locale: r }) => {
-  const { availableAmount: n, currency: e, interactionsDisabled: l, setAmount: A } = P(), [T, a] = R(null), [i, m] = R(`${x(n, e)}`), { i18n: p } = O(), C = 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 { availableAmount: n, currency: e, interactionsDisabled: u, setAmount: p } = P(), [T, a] = R(null), [i, l] = R(`${x(n, e)}`), { i18n: f } = O(), C = V(() => {
+    const m = _(e);
+    return (o) => Math.trunc(+`${parseFloat(o)}e${m}`) || 0;
+  }, [e]), X = (m) => {
+    var N;
+    let o = m.currentTarget.value.trim();
     const c = C(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);
+    let s = null;
+    c || o ? (c < 0 && (s = "transactions.details.refund.inputs.amount.errors.negative"), c > n && (s = "transactions.details.refund.inputs.amount.errors.excess")) : s = "transactions.details.refund.inputs.amount.errors.required";
+    const I = ((N = 1.1.toLocaleString(r).match(/\d(.*?)\d/)) == null ? void 0 : N[1]) || ".", A = o.split(I);
+    if (A.length === 2) {
+      const g = _(e), F = A[0];
+      let d = A[1];
+      d.length >= g && (d = d.substring(0, g), o = F + I + d, m.currentTarget.value = o);
     }
-    m(o), a(u), A(u ? 0 : c);
+    l(o), a(s), p(s ? 0 : c);
   };
   return /* @__PURE__ */ t(
     y,
     {
       currency: e,
       errorMessage: T,
-      errorMessageArg: p.amount(n, e),
+      errorMessageArg: f.amount(n, e),
       onInput: X,
       value: i,
-      disabled: l
+      disabled: u
     }
   );
 };
 export {
-  At as TransactionRefundFullAmountInput,
+  pt as TransactionRefundFullAmountInput,
   Tt as TransactionRefundPartialAmountInput
 };