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

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

@@ -1,51 +1,50 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { memo as T } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as p } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { TX_TIMELINE_VALUE as C, TX_TIMELINE_LABEL as D } from "../../constants.js";
 import { getTransactionTimelineTxType as _, getTransactionTimelineTxStatus as g } from "../../../../utils/translation/getters.js";
-import { TimelineDateFormat as M } from "../../../../internal/Timeline/types.js";
-import { TypographyVariant as d, TypographyElement as f } from "../../../../internal/Typography/types.js";
-import { TimelineItem as N } from "../../../../internal/Timeline/components/TimelineItem.js";
-import w from "../../../../../core/Context/useCoreContext.js";
-import y from "../../../../internal/Typography/Typography.js";
-import x from "../../../../internal/Timeline/Timeline.js";
-import P from "../../../../internal/StructuredList/StructuredList.js";
-import { uniqueId as V } from "../../../../../utils/random/uniqueId.js";
-const u = ({ transaction: e }) => {
-  var r;
-  const s = e.createdAt, t = e.events, i = (r = e.balanceAccount) == null ? void 0 : r.timeZone, n = m(
+import { TimelineDateFormat as v } from "../../../../internal/Timeline/types.js";
+import { TypographyVariant as T, TypographyElement as d } from "../../../../internal/Typography/types.js";
+import { TimelineItem as M } from "../../../../internal/Timeline/components/TimelineItem.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import f from "../../../../internal/Typography/Typography.js";
+import w from "../../../../internal/Timeline/Timeline.js";
+import x from "../../../../internal/StructuredList/StructuredList.js";
+import { uniqueId as P } from "../../../../../utils/random/uniqueId.js";
+const c = ({ transaction: t }) => {
+  const m = t.createdAt, r = t.events, a = t.balanceAccount?.timeZone, o = i(
     () => ({
-      format: M.FULL_DATE_EXACT_TIME_WITHOUT_SECONDS,
-      date: new Date(s),
-      timezone: i
+      format: v.FULL_DATE_EXACT_TIME_WITHOUT_SECONDS,
+      date: new Date(m),
+      timezone: a
     }),
-    [s, i]
-  ), l = m(() => {
-    const o = /* @__PURE__ */ new WeakMap();
-    return t == null || t.forEach((c) => o.set(c, V())), o;
-  }, [t]);
-  return t ? /* @__PURE__ */ a(x, { showMore: { limit: 2, placement: "before-last" }, children: t.map((o) => /* @__PURE__ */ a(u.Item, { event: o, defaultTimestamp: n }, l.get(o))) }) : null;
-}, v = (e) => /* @__PURE__ */ a(y, { el: f.DIV, variant: d.CAPTION, className: D, children: e }), S = (e) => /* @__PURE__ */ a(y, { el: f.DIV, variant: d.CAPTION, className: C, children: e });
-u.Item = T(({ defaultTimestamp: e, event: s }) => {
-  const { amount: t, createdAt: i, status: n, type: l } = s, { i18n: r } = w(), o = m(() => ({ ...e, date: new Date(i) }), [e, i]), c = m(() => _(r, l), [r, l]), I = m(() => {
-    const { currency: p, value: E } = t, h = `${r.amount(E, p, { hideCurrency: !0 })} ${p}`, A = g(r, n);
+    [m, a]
+  ), s = i(() => {
+    const e = /* @__PURE__ */ new WeakMap();
+    return r?.forEach((l) => e.set(l, P())), e;
+  }, [r]);
+  return r ? /* @__PURE__ */ n(w, { showMore: { limit: 2, placement: "before-last" }, children: r.map((e) => /* @__PURE__ */ n(c.Item, { event: e, defaultTimestamp: o }, s.get(e))) }) : null;
+}, V = (t) => /* @__PURE__ */ n(f, { el: d.DIV, variant: T.CAPTION, className: D, children: t }), S = (t) => /* @__PURE__ */ n(f, { el: d.DIV, variant: T.CAPTION, className: C, children: t });
+c.Item = p(({ defaultTimestamp: t, event: m }) => {
+  const { amount: r, createdAt: a, status: o, type: s } = m, { i18n: e } = N(), l = i(() => ({ ...t, date: new Date(a) }), [t, a]), y = i(() => _(e, s), [e, s]), I = i(() => {
+    const { currency: u, value: E } = r, h = `${e.amount(E, u, { hideCurrency: !0 })} ${u}`, A = g(e, o);
     return [
       { key: "transactions.details.timeline.fields.amount", value: h },
       { key: "transactions.details.timeline.fields.status", value: A }
     ];
-  }, [r, t, n]), L = n.toLowerCase().includes("refund") ? "Refund" : n.toLowerCase().includes("auth") ? "Capture" : c;
-  return /* @__PURE__ */ a(N, { title: L, timestamp: o, children: /* @__PURE__ */ a(
-    P,
+  }, [e, r, o]), L = o.toLowerCase().includes("refund") ? "Refund" : o.toLowerCase().includes("auth") ? "Capture" : y;
+  return /* @__PURE__ */ n(M, { title: L, timestamp: l, children: /* @__PURE__ */ n(
+    x,
     {
       align: "start",
       layout: "3-9",
       items: I,
-      renderLabel: v,
+      renderLabel: V,
       renderValue: S
     }
   ) });
 });
-const K = T(u);
+const K = p(c);
 export {
   K as default
 };

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

@@ -1,9 +1,9 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { sharedTransactionDetailsEventProperties as C, TX_DATA_CLASS as M, TX_REFUND_RESPONSE as L, TX_REFUND_RESPONSE_ICON as F, TX_REFUND_RESPONSE_SUCCESS_ICON as b, TX_REFUND_RESPONSE_ERROR_ICON as w, REFUND_REASONS as K } from "../../constants.js";
-import { memo as U } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useState as A, useCallback as y, useRef as D, useEffect as S, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { sharedTransactionDetailsEventProperties as v, TX_DATA_CLASS as M, TX_REFUND_RESPONSE as L, TX_REFUND_RESPONSE_ICON as F, TX_REFUND_RESPONSE_SUCCESS_ICON as b, TX_REFUND_RESPONSE_ERROR_ICON as w, REFUND_REASONS as K } from "../../constants.js";
+import { memo as C } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useState as T, useCallback as _, useRef as P, useEffect as y, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import k from "../../../../../core/Context/analytics/useAnalyticsContext.js";
-import v from "../../../../../core/Context/useCoreContext.js";
+import D from "../../../../../core/Context/useCoreContext.js";
 import X from "../../../../../hooks/useComponentTiming.js";
 import B from "./PaymentRefundActions.js";
 import V from "./PaymentRefundAmount.js";
@@ -11,117 +11,115 @@ import H from "./PaymentRefundNotice.js";
 import Y from "./PaymentRefundReason.js";
 import { Alert as x } from "../../../../internal/Alert/Alert.js";
 import G from "../../../../internal/Button/Button.js";
-import I from "../../../../internal/Typography/Typography.js";
-import { ActiveView as W, RefundMode as m } from "../../types.js";
-import { TypographyVariant as g, TypographyElement as j, TypographyModifier as q } from "../../../../internal/Typography/types.js";
+import h from "../../../../internal/Typography/Typography.js";
+import { ActiveView as W, RefundMode as f } from "../../types.js";
+import { TypographyVariant as I, TypographyElement as j, TypographyModifier as q } from "../../../../internal/Typography/types.js";
 import { AlertTypeOption as z, AlertVariantOption as J } from "../../../../internal/Alert/types.js";
 import { ButtonVariant as Q } from "../../../../internal/Button/types.js";
 import Z from "classnames";
 import { Icon as $ } from "../../../../internal/Icon/Icon.js";
 import { clamp as ee } from "../../../../../utils/value/number.js";
-const _ = ({ disabled: c, refreshTransaction: a, setActiveView: r, setLocked: t, ...f }) => {
-  const [s, p] = A(), R = y(() => void (E.current = !0), []), l = y(() => t(!0), [t]), n = y(() => r(W.DETAILS), [r]), { duration: u } = X(), i = D(!1), E = D(!1), o = k();
-  return S(() => {
-    var d;
-    i.current || (i.current = !0, (d = o.addEvent) == null || d.call(o, "Switched to refund view", C));
-  }, [o]), S(() => {
-    c && !s && n(), s === "done" && l();
-  }, [c, l, s, n]), S(() => () => {
-    var d;
-    u.current !== void 0 && !E.current && ((d = o.addEvent) == null || d.call(o, "Cancelled refund", C));
-  }, [u, o]), s ? /* @__PURE__ */ e(_.Result, { result: s, refreshTransaction: a, showDetails: n }) : /* @__PURE__ */ e(_.Form, { ...f, beginRefund: R, setRefundResult: p, showDetails: n });
+const A = ({ disabled: i, refreshTransaction: s, setActiveView: r, setLocked: t, ...l }) => {
+  const [o, m] = T(), p = _(() => void (R.current = !0), []), c = _(() => t(!0), [t]), n = _(() => r(W.DETAILS), [r]), { duration: u } = X(), a = P(!1), R = P(!1), d = k();
+  return y(() => {
+    a.current || (a.current = !0, d.addEvent?.("Switched to refund view", v));
+  }, [d]), y(() => {
+    i && !o && n(), o === "done" && c();
+  }, [i, c, o, n]), y(() => () => {
+    u.current !== void 0 && !R.current && d.addEvent?.("Cancelled refund", v);
+  }, [u, d]), o ? /* @__PURE__ */ e(A.Result, { result: o, refreshTransaction: s, showDetails: n }) : /* @__PURE__ */ e(A.Form, { ...l, beginRefund: p, setRefundResult: m, showDetails: n });
 };
-_.Form = U(
+A.Form = C(
   ({
-    beginRefund: c,
-    currency: a,
+    beginRefund: i,
+    currency: s,
     maxAmount: r,
     mode: t,
-    refundedAmount: f,
-    refundingAmounts: s,
-    setRefundResult: p,
-    showDetails: R,
-    transaction: l
+    refundedAmount: l,
+    refundingAmounts: o,
+    setRefundResult: m,
+    showDetails: p,
+    transaction: c
   }) => {
-    const [n, u] = A(!1), [i, E] = A(K[0]), [o, d] = A(0), { i18n: N } = v(), O = h(() => {
+    const [n, u] = T(!1), [a, R] = T(K[0]), [d, U] = T(0), { i18n: E } = D(), g = S(() => {
       switch (t) {
-        case m.FULL_AMOUNT:
-        case m.PARTIAL_AMOUNT:
-        case m.PARTIAL_LINE_ITEMS:
+        case f.FULL_AMOUNT:
+        case f.PARTIAL_AMOUNT:
+        case f.PARTIAL_LINE_ITEMS:
           return r;
         // case RefundMode.PARTIAL_LINE_ITEMS:
         //     return refundingItems.reduce((total, { amount, quantity }) => total + amount * quantity, 0);
         default:
           return 0;
       }
-    }, [r, t]), P = h(() => {
+    }, [r, t]), O = S(() => {
       if (r > 0) {
-        const T = { amount: N.amount(r, a) };
+        const N = { amount: E.amount(r, s) };
         switch (t) {
-          case m.FULL_AMOUNT:
-            return N.get("transactions.details.refund.alerts.refundableAmount", { values: T });
-          case m.PARTIAL_AMOUNT:
-            return N.get("transactions.details.refund.alerts.refundableMaximum", { values: T });
+          case f.FULL_AMOUNT:
+            return E.get("transactions.details.refund.alerts.refundableAmount", { values: N });
+          case f.PARTIAL_AMOUNT:
+            return E.get("transactions.details.refund.alerts.refundableMaximum", { values: N });
         }
       }
-    }, [N, a, r, t]);
+    }, [E, s, r, t]);
     return /* @__PURE__ */ e("div", { className: M, children: [
       /* @__PURE__ */ e(H, {}),
-      /* @__PURE__ */ e(Y, { disabled: n, reason: i, onChange: E }),
+      /* @__PURE__ */ e(Y, { disabled: n, reason: a, onChange: R }),
       /* @__PURE__ */ e(
         V,
         {
-          currency: a,
-          disabled: n || t !== m.PARTIAL_AMOUNT,
-          onChange: (T) => d(ee(0, T, O)),
-          value: O
+          currency: s,
+          disabled: n || t !== f.PARTIAL_AMOUNT,
+          onChange: (N) => U(ee(0, N, g)),
+          value: g
         }
       ),
-      P && /* @__PURE__ */ e(x, { variant: J.TIP, type: z.HIGHLIGHT, children: /* @__PURE__ */ e(I, { className: "adyen-pe-alert__description", el: j.DIV, variant: g.BODY, wide: !0, children: P }) }),
+      O && /* @__PURE__ */ e(x, { variant: J.TIP, type: z.HIGHLIGHT, children: /* @__PURE__ */ e(h, { className: "adyen-pe-alert__description", el: j.DIV, variant: I.BODY, wide: !0, children: O }) }),
       /* @__PURE__ */ e(
         B,
         {
-          beginRefund: c,
-          currency: a,
+          beginRefund: i,
+          currency: s,
           disabled: n,
           maxAmount: r,
-          refundAmount: o,
-          refundedAmount: f,
-          refundingAmounts: s,
-          refundReason: i,
+          refundAmount: d,
+          refundedAmount: l,
+          refundingAmounts: o,
+          refundReason: a,
           setRefundInProgress: u,
-          setRefundResult: p,
-          showDetails: R,
-          transactionId: l.id
+          setRefundResult: m,
+          showDetails: p,
+          transactionId: c.id
         }
       )
     ] });
   }
 );
-_.Result = U(({ result: c, refreshTransaction: a, showDetails: r }) => {
-  const { i18n: t } = v(), { isErrorResult: f, iconName: s, titleKey: p, descriptionKey: R } = h(() => {
-    let l = "checkmark-circle-fill", n = "transactions.details.refund.alerts.refundSent", u = "transactions.details.refund.alerts.refundSuccess";
-    const i = c === "error";
-    return i && (l = "cross-circle-fill", n = "common.errors.somethingWentWrong", u = "transactions.details.refund.alerts.refundFailure"), { isErrorResult: i, iconName: l, titleKey: n, descriptionKey: u };
-  }, [c]);
+A.Result = C(({ result: i, refreshTransaction: s, showDetails: r }) => {
+  const { i18n: t } = D(), { isErrorResult: l, iconName: o, titleKey: m, descriptionKey: p } = S(() => {
+    let c = "checkmark-circle-fill", n = "transactions.details.refund.alerts.refundSent", u = "transactions.details.refund.alerts.refundSuccess";
+    const a = i === "error";
+    return a && (c = "cross-circle-fill", n = "common.errors.somethingWentWrong", u = "transactions.details.refund.alerts.refundFailure"), { isErrorResult: a, iconName: c, titleKey: n, descriptionKey: u };
+  }, [i]);
   return /* @__PURE__ */ e("div", { className: L, children: [
     /* @__PURE__ */ e(
       $,
       {
         className: Z(F, {
-          [w]: f,
-          [b]: !f
+          [w]: l,
+          [b]: !l
         }),
-        name: s
+        name: o
       }
     ),
-    /* @__PURE__ */ e(I, { className: q.MEDIUM, variant: g.TITLE, children: t.get(p) }),
-    /* @__PURE__ */ e(I, { variant: g.BODY, children: t.get(R) }),
+    /* @__PURE__ */ e(h, { className: q.MEDIUM, variant: I.TITLE, children: t.get(m) }),
+    /* @__PURE__ */ e(h, { variant: I.BODY, children: t.get(p) }),
     /* @__PURE__ */ e(
       G,
       {
         onClick: () => {
-          r(), a();
+          r(), s();
         },
         variant: Q.SECONDARY,
         children: t.get("transactions.details.refund.actions.back")
@@ -130,5 +128,5 @@ _.Result = U(({ result: c, refreshTransaction: a, showDetails: r }) => {
   ] });
 });
 export {
-  _ as default
+  A as default
 };

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

@@ -1,7 +1,7 @@
-import { jsx as A } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import E from "classnames";
-import { useMemo as s, useEffect as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { ButtonVariant as T } from "../../../../internal/Button/types.js";
+import { jsx as b } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "classnames";
+import { useMemo as e, useEffect as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { ButtonVariant as A } from "../../../../internal/Button/types.js";
 import { ButtonActionsLayoutBasic as O } from "../../../../internal/Button/ButtonActions/types.js";
 import { TX_DATA_CONTAINER as F, TX_DATA_ACTION_BAR as M, sharedTransactionDetailsEventProperties as W } from "../../constants.js";
 import j from "../../../../internal/Button/ButtonActions/ButtonActions.js";
@@ -9,58 +9,57 @@ import k from "../../../../../core/Context/analytics/useAnalyticsContext.js";
 import I from "../../../../../hooks/useMutation/useMutation.js";
 import S from "../../../../../core/Context/useCoreContext.js";
 import { useConfigContext as X } from "../../../../../core/ConfigContext/context.js";
-const tt = ({
-  beginRefund: g,
-  currency: e,
-  disabled: r,
-  maxAmount: c,
+const Z = ({
+  beginRefund: T,
+  currency: a,
+  disabled: s,
+  maxAmount: i,
   refundAmount: n,
-  refundedAmount: B,
-  refundingAmounts: h,
-  refundReason: l,
-  setRefundInProgress: u,
-  setRefundResult: d,
-  showDetails: v,
-  transactionId: C
+  refundedAmount: g,
+  refundingAmounts: v,
+  refundReason: r,
+  setRefundInProgress: c,
+  setRefundResult: l,
+  showDetails: B,
+  transactionId: h
 }) => {
-  const { initiateRefund: L } = X().endpoints, { isLoading: o, mutate: N } = I({ queryFn: L }), { i18n: t } = S(), m = n > 0 && n <= c, D = B === 0 && h.length === 0 && n === c, f = r || o || !m, R = s(() => t.get("transactions.details.refund.actions.back"), [t]), p = s(
+  const { initiateRefund: C } = X().endpoints, { isLoading: o, mutate: E } = I({ queryFn: C }), { i18n: t } = S(), u = n > 0 && n <= i, L = g === 0 && v.length === 0 && n === i, d = s || o || !u, N = e(() => t.get("transactions.details.refund.actions.back"), [t]), m = e(
     () => ({
       idle: t.get("transactions.details.refund.actions.refund.labels.payment"),
       inProgress: `${t.get("transactions.details.refund.actions.refund.labels.inProgress")}..`
     }),
     [t]
-  ), y = s(() => {
-    const a = { amount: t.amount(n, e) };
-    return t.get("transactions.details.refund.actions.refund.labels.amount", { values: a });
-  }, [t, e, n]), b = o ? p.inProgress : m ? y : p.idle, i = k(), _ = {
-    disabled: f,
+  ), f = e(() => {
+    const y = { amount: t.amount(n, a) };
+    return t.get("transactions.details.refund.actions.refund.labels.amount", { values: y });
+  }, [t, a, n]), p = o ? m.inProgress : u ? f : m.idle, D = k(), R = {
+    disabled: d,
     event: async () => {
-      var a;
-      if (!f) {
-        g(), (a = i.addEvent) == null || a.call(i, "Completed refund", {
+      if (!d) {
+        T(), D.addEvent?.("Completed refund", {
           ...W,
-          isFullRefund: D,
-          refundReason: l
+          isFullRefund: L,
+          refundReason: r
         });
         try {
-          await N({ contentType: "application/json", body: { amount: { currency: e, value: n }, refundReason: l } }, { path: { transactionId: C } }), d("done");
+          await E({ contentType: "application/json", body: { amount: { currency: a, value: n }, refundReason: r } }, { path: { transactionId: h } }), l("done");
         } catch {
-          d("error");
+          l("error");
         }
       }
     },
     state: o ? "loading" : void 0,
-    title: b,
-    variant: T.PRIMARY,
-    ariaLabel: o ? y : b
-  }, x = {
-    disabled: r,
-    event: v,
-    title: R,
-    variant: T.SECONDARY
+    title: p,
+    variant: A.PRIMARY,
+    ariaLabel: o ? f : p
+  }, _ = {
+    disabled: s,
+    event: B,
+    title: N,
+    variant: A.SECONDARY
   };
-  return P(() => u(o), [o, u]), /* @__PURE__ */ A("div", { className: E(F, M), children: /* @__PURE__ */ A(j, { actions: [_, x], layout: O.BUTTONS_END }) });
+  return P(() => c(o), [o, c]), /* @__PURE__ */ b("div", { className: x(F, M), children: /* @__PURE__ */ b(j, { actions: [R, _], layout: O.BUTTONS_END }) });
 };
 export {
-  tt as default
+  Z as default
 };

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

@@ -1,81 +1,80 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { TX_DATA_CONTAINER as $, TX_DATA_INPUT_HEAD as B, TX_DATA_INPUT as C, TX_DATA_INPUT_CONTAINER_WITH_ERROR as H, TX_DATA_INPUT_CONTAINER_TEXT as L, TX_DATA_INPUT_CONTAINER_SHORT as V, TX_DATA_INPUT_CONTAINER as Y } from "../../constants.js";
-import j from "classnames";
-import { memo as k } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { Tag as W } from "../../../../internal/Tag/Tag.js";
-import { TagVariant as w } from "../../../../internal/Tag/types.js";
-import { ARIA_ERROR_SUFFIX as z } from "../../../../../core/Errors/constants.js";
-import { getDecimalAmount as G, getDivider as J } from "../../../../../core/Localization/amount/amount-util.js";
-import { TypographyVariant as E, TypographyElement as h } from "../../../../internal/Typography/types.js";
-import { useState as D, useMemo as P, useRef as b, useCallback as K, useEffect as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import Z from "../../../../../core/Context/useCoreContext.js";
-import O from "../../../../internal/Typography/Typography.js";
-import ee from "../../../../internal/FormFields/InputBase.js";
-import { useUniqueId as x } from "../../../../../hooks/useUniqueId.js";
-import { Icon as te } from "../../../../internal/Icon/Icon.js";
-const _e = k(({ currency: n, disabled: d, onChange: u, value: U }) => {
-  const { i18n: t } = Z(), f = x(), N = x(), i = Math.log10(J(n)), r = parseInt(`${U}`, 10), p = G(r, n).toFixed(i), [X, y] = D(p), [T, S] = D(), q = P(() => {
+import { TX_DATA_CONTAINER as F, TX_DATA_INPUT_HEAD as M, TX_DATA_INPUT as $, TX_DATA_INPUT_CONTAINER_WITH_ERROR as B, TX_DATA_INPUT_CONTAINER_TEXT as H, TX_DATA_INPUT_CONTAINER_SHORT as L, TX_DATA_INPUT_CONTAINER as V } from "../../constants.js";
+import Y from "classnames";
+import { memo as j } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { Tag as k } from "../../../../internal/Tag/Tag.js";
+import { TagVariant as W } from "../../../../internal/Tag/types.js";
+import { ARIA_ERROR_SUFFIX as w } from "../../../../../core/Errors/constants.js";
+import { getDecimalAmount as z, getDivider as G } from "../../../../../core/Localization/amount/amount-util.js";
+import { TypographyVariant as R, TypographyElement as h } from "../../../../internal/Typography/types.js";
+import { useState as E, useMemo as D, useRef as P, useCallback as J, useEffect as K } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import Q from "../../../../../core/Context/useCoreContext.js";
+import b from "../../../../internal/Typography/Typography.js";
+import Z from "../../../../internal/FormFields/InputBase.js";
+import { useUniqueId as O } from "../../../../../hooks/useUniqueId.js";
+import { Icon as ee } from "../../../../internal/Icon/Icon.js";
+const Ae = j(({ currency: n, disabled: c, onChange: g, value: x }) => {
+  const { i18n: t } = Q(), d = O(), I = O(), i = Math.log10(G(n)), r = parseInt(`${x}`, 10), f = z(r, n).toFixed(i), [U, X] = E(f), [p, y] = E(), C = D(() => {
     const a = { amount: t.amount(r, n) };
     return {
       excess: t.get("transactions.details.refund.inputs.amount.errors.excess", { values: a }),
       negative: t.get("transactions.details.refund.inputs.amount.errors.negative"),
       required: t.get("transactions.details.refund.inputs.amount.errors.required")
     };
-  }, [t, n, r]), A = T && q[T], F = P(() => t.get("transactions.details.refund.inputs.amount.label"), [t]), s = b(null), _ = K(
+  }, [t, n, r]), T = p && C[p], S = D(() => t.get("transactions.details.refund.inputs.amount.label"), [t]), s = P(null), A = J(
     (a) => {
-      var R;
       let l, o = a.value.trim();
-      const m = Math.trunc(+`${parseFloat(o)}e${i}`) || 0;
-      m || o ? (m < 0 && (l = "negative"), m > r && (l = "excess")) : l = "required";
-      const g = ((R = 1.1.toLocaleString(t.locale).match(/\d(.*?)\d/)) == null ? void 0 : R[1]) || ".", I = o.split(g);
-      if (I.length === 2) {
-        const M = I[0];
-        let c = I[1];
-        c.length >= i && (c = c.substring(0, i), o = M + g + c, a.value = o);
+      const u = Math.trunc(+`${parseFloat(o)}e${i}`) || 0;
+      u || o ? (u < 0 && (l = "negative"), u > r && (l = "excess")) : l = "required";
+      const v = 1.1.toLocaleString(t.locale).match(/\d(.*?)\d/)?.[1] || ".", _ = o.split(v);
+      if (_.length === 2) {
+        const q = _[0];
+        let m = _[1];
+        m.length >= i && (m = m.substring(0, i), o = q + v + m, a.value = o);
       }
-      y(o), S(l), u == null || u(l ? 0 : m);
+      X(o), y(l), g?.(l ? 0 : u);
     },
-    [i, r, u]
-  ), v = b();
-  return Q(() => {
-    if (v.current !== r)
-      v.current = r;
-    else if (d && T && s.current)
-      s.current.value = p;
+    [i, r, g]
+  ), N = P();
+  return K(() => {
+    if (N.current !== r)
+      N.current = r;
+    else if (c && p && s.current)
+      s.current.value = f;
     else return;
-    s.current && _(s.current);
-  }, [_, d, p, r]), /* @__PURE__ */ e("div", { className: $, children: [
-    /* @__PURE__ */ e("div", { className: B, children: /* @__PURE__ */ e("div", { id: N, children: /* @__PURE__ */ e(O, { el: h.SPAN, variant: E.BODY, stronger: !0, children: F }) }) }),
+    s.current && A(s.current);
+  }, [A, c, f, r]), /* @__PURE__ */ e("div", { className: F, children: [
+    /* @__PURE__ */ e("div", { className: M, children: /* @__PURE__ */ e("div", { id: I, children: /* @__PURE__ */ e(b, { el: h.SPAN, variant: R.BODY, stronger: !0, children: S }) }) }),
     /* @__PURE__ */ e(
       "div",
       {
-        className: j({
-          [Y]: !0,
+        className: Y({
           [V]: !0,
           [L]: !0,
-          [H]: A
+          [H]: !0,
+          [B]: T
         }),
         children: [
-          /* @__PURE__ */ e("label", { htmlFor: f, "aria-labelledby": N, children: [
-            n && /* @__PURE__ */ e(W, { label: n, variant: w.DEFAULT }),
+          /* @__PURE__ */ e("label", { htmlFor: d, "aria-labelledby": I, children: [
+            n && /* @__PURE__ */ e(k, { label: n, variant: W.DEFAULT }),
             /* @__PURE__ */ e(
-              ee,
+              Z,
               {
                 min: 0,
                 type: "number",
-                className: C,
-                disabled: d,
+                className: $,
+                disabled: c,
                 lang: t.locale,
-                onInput: (a) => _(a.currentTarget),
-                value: X,
-                uniqueId: f,
+                onInput: (a) => A(a.currentTarget),
+                value: U,
+                uniqueId: d,
                 ref: s
               }
             )
           ] }),
-          A && /* @__PURE__ */ e("div", { className: "adyen-pe-input__refund-invalid-value", id: `${f}${z}`, children: [
-            /* @__PURE__ */ e(te, { name: "cross-circle-fill" }),
-            /* @__PURE__ */ e(O, { el: h.SPAN, variant: E.BODY, children: A })
+          T && /* @__PURE__ */ e("div", { className: "adyen-pe-input__refund-invalid-value", id: `${d}${w}`, children: [
+            /* @__PURE__ */ e(ee, { name: "cross-circle-fill" }),
+            /* @__PURE__ */ e(b, { el: h.SPAN, variant: R.BODY, children: T })
           ] })
         ]
       }
@@ -83,5 +82,5 @@ const _e = k(({ currency: n, disabled: d, onChange: u, value: U }) => {
   ] });
 });
 export {
-  _e as default
+  Ae as default
 };

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

@@ -1,43 +1,42 @@
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { REFUND_REASONS as p, TX_DATA_CONTAINER as f, TX_DATA_INPUT_HEAD as u, TX_DATA_INPUT_CONTAINER as N, TX_DATA_INPUT_CONTAINER_SHORT as A } from "../../constants.js";
-import { useMemo as l, useCallback as _ } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { getTransactionRefundReason as R } from "../../../../utils/translation/getters.js";
-import { TypographyVariant as y, TypographyElement as g } from "../../../../internal/Typography/types.js";
-import h from "../../../../../core/Context/useCoreContext.js";
-import I from "../../../../internal/Typography/Typography.js";
-import { useUniqueId as b } from "../../../../../hooks/useUniqueId.js";
-import C from "../../../../internal/FormFields/Select/Select.js";
-const q = ({ disabled: i, onChange: r, reason: m }) => {
-  const { i18n: a } = h(), o = b(), c = l(() => a.get("transactions.details.refund.inputs.reason.label"), [a]), d = l(
-    () => p.map((t) => ({
-      name: R(a, t),
+import { REFUND_REASONS as T, TX_DATA_CONTAINER as p, TX_DATA_INPUT_HEAD as f, TX_DATA_INPUT_CONTAINER as u, TX_DATA_INPUT_CONTAINER_SHORT as N } from "../../constants.js";
+import { useMemo as n, useCallback as A } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { getTransactionRefundReason as _ } from "../../../../utils/translation/getters.js";
+import { TypographyVariant as R, TypographyElement as y } from "../../../../internal/Typography/types.js";
+import g from "../../../../../core/Context/useCoreContext.js";
+import h from "../../../../internal/Typography/Typography.js";
+import { useUniqueId as I } from "../../../../../hooks/useUniqueId.js";
+import b from "../../../../internal/FormFields/Select/Select.js";
+const x = ({ disabled: l, onChange: r, reason: i }) => {
+  const { i18n: a } = g(), o = I(), m = n(() => a.get("transactions.details.refund.inputs.reason.label"), [a]), c = n(
+    () => T.map((t) => ({
+      name: _(a, t),
       id: t
     })),
     [a]
-  ), T = _(
+  ), d = A(
     (t) => {
-      var n;
-      const s = (n = t.target) == null ? void 0 : n.value;
+      const s = t.target?.value;
       s && r(s);
     },
     [r]
   );
-  return /* @__PURE__ */ e("div", { className: f, children: [
-    /* @__PURE__ */ e("div", { id: o, className: u, children: /* @__PURE__ */ e(I, { el: g.SPAN, variant: y.BODY, stronger: !0, children: c }) }),
-    /* @__PURE__ */ e("div", { className: `${N} ${A}`, children: /* @__PURE__ */ e(
-      C,
+  return /* @__PURE__ */ e("div", { className: p, children: [
+    /* @__PURE__ */ e("div", { id: o, className: f, children: /* @__PURE__ */ e(h, { el: y.SPAN, variant: R.BODY, stronger: !0, children: m }) }),
+    /* @__PURE__ */ e("div", { className: `${u} ${N}`, children: /* @__PURE__ */ e(
+      b,
       {
         "aria-labelledby": o,
         filterable: !1,
         multiSelect: !1,
-        readonly: i,
-        items: d,
-        onChange: T,
-        selected: m
+        readonly: l,
+        items: c,
+        onChange: d,
+        selected: i
       }
     ) })
   ] });
 };
 export {
-  q as default
+  x as default
 };