@adyen/adyen-platform-experience-web 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/ModalContent-88fdb6f4.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-7e2df524.js");require("classnames");const r=t=>n.hasOwnProperty(t,"id");function e({data:t}){const o=r(t)?{transaction:t}:{transactionId:t};return n.o(n.k,{children:o&&n.o(n.TransactionDetails,{...o})})}exports.default=e;
+//# sourceMappingURL=ModalContent-88fdb6f4.js.map

package/dist/ModalContent-88fdb6f4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent-88fdb6f4.js","sources":["../src/components/external/TransactionsOverview/components/ModalContent.tsx"],"sourcesContent":["import { SelectedDetail, TransactionDetailData } from '../../../../components';\nimport TransactionDetails from '../../TransactionDetails/components/TransactionDetails';\nimport { hasOwnProperty } from '../../../../utils/common';\n\nconst isTransactionWithoutId = (data: string | TransactionDetailData): data is TransactionDetailData => hasOwnProperty(data, 'id');\nfunction ModalContent({ data }: SelectedDetail) {\n    const transactionProps = isTransactionWithoutId(data) ? { transaction: data } : { transactionId: data };\n\n    return <>{transactionProps && <TransactionDetails {...transactionProps} />}</>;\n}\nexport default ModalContent;\n"],"names":["isTransactionWithoutId","data","hasOwnProperty","ModalContent","transactionProps","jsx","TransactionDetails"],"mappings":"6IAIA,MAAMA,EAA0BC,GAAwEC,EAAA,eAAeD,EAAM,IAAI,EACjI,SAASE,EAAa,CAAE,KAAAF,GAAwB,CACtC,MAAAG,EAAmBJ,EAAuBC,CAAI,EAAI,CAAE,YAAaA,GAAS,CAAE,cAAeA,GAEjG,gBAAU,SAAoBG,GAAAC,IAACC,EAAAA,mBAAoB,CAAA,GAAGF,CAAkB,CAAA,CAAG,CAAA,CAC/E"}

package/dist/cjs/index.js

@@ -1,36 +1,2 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-2231054e.js");
-exports.AdyenPlatformExperience = index.AdyenPlatformExperience;
-exports.Core = index.Core;
-exports.TransactionFilterParam = index.TransactionFilterParam;
-exports.TransactionsDetails = index.TransactionsElement$1;
-exports.TransactionsOverview = index.TransactionsElement;
-exports.all_locales = index.all_locales;
-exports.ar = index.ar;
-exports.cs_CZ = index.cs_CZ;
-exports.da_DK = index.da_DK;
-exports.de_DE = index.de_DE;
-exports.el_GR = index.el_GR;
-exports.en_US = index.en_US;
-exports.es_ES = index.es_ES;
-exports.fi_FI = index.fi_FI;
-exports.fr_FR = index.fr_FR;
-exports.hr_HR = index.hr_HR;
-exports.hu_HU = index.hu_HU;
-exports.it_IT = index.it_IT;
-exports.ja_JP = index.ja_JP;
-exports.ko_KR = index.ko_KR;
-exports.nl_NL = index.nl_NL;
-exports.no_NO = index.no_NO;
-exports.pl_PL = index.pl_PL;
-exports.pt_BR = index.pt_BR;
-exports.pt_PT = index.pt_PT;
-exports.ro_RO = index.ro_RO;
-exports.ru_RU = index.ru_RU;
-exports.sk_SK = index.sk_SK;
-exports.sl_SI = index.sl_SI;
-exports.sv_SE = index.sv_SE;
-exports.zh_CN = index.zh_CN;
-exports.zh_TW = index.zh_TW;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../index-7e2df524.js");require("classnames");exports.AdyenPlatformExperience=_.AdyenPlatformExperience;exports.Core=_.Core;exports.TransactionFilterParam=_.TransactionFilterParam;exports.TransactionsDetails=_.TransactionsElement$1;exports.TransactionsOverview=_.TransactionsElement;exports.all_locales=_.all_locales;exports.ar=_.ar;exports.cs_CZ=_.cs_CZ;exports.da_DK=_.da_DK;exports.de_DE=_.de_DE;exports.el_GR=_.el_GR;exports.en_US=_.en_US;exports.es_ES=_.es_ES;exports.fi_FI=_.fi_FI;exports.fr_FR=_.fr_FR;exports.hr_HR=_.hr_HR;exports.hu_HU=_.hu_HU;exports.it_IT=_.it_IT;exports.ja_JP=_.ja_JP;exports.ko_KR=_.ko_KR;exports.nl_NL=_.nl_NL;exports.no_NO=_.no_NO;exports.pl_PL=_.pl_PL;exports.pt_BR=_.pt_BR;exports.pt_PT=_.pt_PT;exports.ro_RO=_.ro_RO;exports.ru_RU=_.ru_RU;exports.sk_SK=_.sk_SK;exports.sl_SI=_.sl_SI;exports.sv_SE=_.sv_SE;exports.zh_CN=_.zh_CN;exports.zh_TW=_.zh_TW;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -1,44 +1,34 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-var _a;
-import { B } from "../../../preact.module-38e5a571.mjs";
-import EventEmitter from "./EventEmitter.js";
-import uuidv4 from "../../utils/uuid.js";
-import { isString } from "../../utils/validator-utils.js";
-class BaseElement {
-  constructor(props) {
-    __publicField(this, "_id", `${(_a = this.constructor) == null ? void 0 : _a.type}-${uuidv4()}`);
-    __publicField(this, "props");
-    __publicField(this, "state");
-    __publicField(this, "defaultProps", {});
-    __publicField(this, "_node");
-    __publicField(this, "_component");
-    __publicField(this, "eventEmitter", new EventEmitter());
-    __publicField(this, "_parentInstance");
-    __publicField(this, "sessionSetupError");
+var a = Object.defineProperty;
+var c = (e, t, s) => t in e ? a(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var o = (e, t, s) => (c(e, typeof t != "symbol" ? t + "" : t, s), s);
+import { render as n } from "../../external/preact/dist/preact.module.js";
+import u from "./EventEmitter.js";
+import m from "../../utils/uuid.js";
+import { isString as d } from "../../utils/validator-utils.js";
+var h;
+class r {
+  constructor(t) {
+    o(this, "_id", `${(h = this.constructor) == null ? void 0 : h.type}-${m()}`);
+    o(this, "props");
+    o(this, "state");
+    o(this, "defaultProps", {});
+    o(this, "_node");
+    o(this, "_component");
+    o(this, "eventEmitter", new u());
+    o(this, "_parentInstance");
+    o(this, "sessionSetupError");
     // provided by AdyenPlatformExperienceCore
-    __publicField(this, "loadingContext");
-    __publicField(this, "i18n");
-    __publicField(this, "session");
-    this.props = this.formatProps({ ...this == null ? void 0 : this.defaultProps, ...props });
-    this._parentInstance = this.props._parentInstance;
-    this._node = null;
-    this.state = {};
-    this.loadingContext = this.props.core.loadingContext;
-    this.i18n = this.props.core.modules.i18n;
-    this.session = this.props.core.session;
-    this.props.core.registerComponent(this);
+    o(this, "loadingContext");
+    o(this, "i18n");
+    o(this, "session");
+    this.props = this.formatProps({ ...this == null ? void 0 : this.defaultProps, ...t }), this._parentInstance = this.props._parentInstance, this._node = null, this.state = {}, this.loadingContext = this.props.core.loadingContext, this.i18n = this.props.core.modules.i18n, this.session = this.props.core.session, this.props.core.registerComponent(this);
   }
   /**
    * Executed during creation of any element.
    * Gives a chance to any component to format the props we're receiving.
    */
-  formatProps(props) {
-    return props;
+  formatProps(t) {
+    return t;
   }
   /**
    * Executed on the `data` getter.
@@ -47,8 +37,8 @@ class BaseElement {
   formatData() {
     return {};
   }
-  setState(newState) {
-    this.state = { ...this.state, ...newState };
+  setState(t) {
+    this.state = { ...this.state, ...t };
   }
   /**
    * Returns the component data ready to submit to the Checkout API
@@ -57,88 +47,58 @@ class BaseElement {
   get data() {
     return {
       ...this.formatData(),
-      clientStateDataIndicator: true
+      clientStateDataIndicator: !0
     };
   }
   render() {
     throw new Error("Component cannot be rendered.");
   }
-  mount(domNode) {
-    var _a2, _b;
-    let node;
-    if (isString(domNode)) {
-      node = document.querySelector(domNode);
-    } else {
-      node = domNode;
-    }
-    if (!node) {
+  mount(t) {
+    var i, p;
+    let s;
+    if (d(t) ? s = document.querySelector(t) : s = t, !s)
       throw new Error("Component could not mount. Root node was not found.");
-    }
-    if (this._node) {
-      this.unmount();
-    } else {
-      if (this.props.modules && this.props.modules.analytics) {
-        this.props.modules.analytics.send({
-          containerWidth: node && node.offsetWidth,
-          component: ((_a2 = this.constructor) == null ? void 0 : _a2.analyticsType) ?? ((_b = this.constructor) == null ? void 0 : _b.type),
-          flavor: "components"
-        });
-      }
-    }
-    this._node = node;
-    this._component = this.render();
-    B(this._component, node);
-    return this;
+    return this._node ? this.unmount() : this.props.modules && this.props.modules.analytics && this.props.modules.analytics.send({
+      containerWidth: s && s.offsetWidth,
+      component: ((i = this.constructor) == null ? void 0 : i.analyticsType) ?? ((p = this.constructor) == null ? void 0 : p.type),
+      flavor: "components"
+    }), this._node = s, this._component = this.render(), n(this._component, s), this;
   }
   /**
    * Updates props, resets the internal state and remounts the element.
    * @param props - props to update
    * @returns this - the element instance
    */
-  update(props) {
-    this.props = this.formatProps({ ...this.props, ...props });
-    this.sessionSetupError = this.props.core.sessionSetupError;
-    this.session = this.props.core.session;
-    this._component = this.render();
-    if (this._node)
-      B(this._component, this._node);
-    return this;
+  update(t) {
+    return this.props = this.formatProps({ ...this.props, ...t }), this.sessionSetupError = this.props.core.sessionSetupError, this.session = this.props.core.session, this._component = this.render(), this._node && n(this._component, this._node), this;
   }
   /**
    * Unmounts an element and mounts it again on the same node i.e. allows mount w/o having to pass a node.
    * Should be "private" & undocumented (although being a public function is useful for testing).
    * Left in for legacy reasons
    */
-  remount(component) {
-    if (!this._node) {
+  remount(t) {
+    if (!this._node)
       throw new Error("Component is not mounted.");
-    }
-    const newComponent = component || this.render();
-    B(newComponent, this._node, void 0);
-    return this;
+    const s = t || this.render();
+    return n(s, this._node, void 0), this;
   }
   /**
    * Unmounts an element from the DOM
    */
   unmount() {
-    if (this._node) {
-      B(null, this._node);
-    }
-    return this;
+    return this._node && n(null, this._node), this;
   }
   /**
    * Unmounts an element and removes it from the parent instance
    * For "destroy" type cleanup - when you don't intend to use the component again
    */
   remove() {
-    this.unmount();
-    if (this._parentInstance) {
-      this._parentInstance.remove(this);
-    }
+    this.unmount(), this._parentInstance && this._parentInstance.remove(this);
   }
 }
-__publicField(BaseElement, "type");
-__publicField(BaseElement, "analyticsType");
+o(r, "type"), o(r, "analyticsType");
+const E = r;
 export {
-  BaseElement as default
+  E as default
 };

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

@@ -1,36 +1,25 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class EventEmitter {
+var f = Object.defineProperty;
+var r = (e, s, t) => s in e ? f(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var h = (e, s, t) => (r(e, typeof s != "symbol" ? s + "" : s, t), t);
+class v {
   constructor() {
-    __publicField(this, "events", {});
-    __publicField(this, "on", (eventName, fn) => {
-      var _a;
-      this.events[eventName] = this.events[eventName] || [];
-      (_a = this.events[eventName]) == null ? void 0 : _a.push(fn);
+    h(this, "events", {});
+    h(this, "on", (s, t) => {
+      var i;
+      this.events[s] = this.events[s] || [], (i = this.events[s]) == null || i.push(t);
     });
-    __publicField(this, "off", (eventName, fn) => {
-      if (this.events[eventName]) {
-        this.events[eventName] = this.events[eventName].reduce((acc, cur) => {
-          if (cur !== fn)
-            acc.push(cur);
-          return acc;
-        }, []);
-      }
+    h(this, "off", (s, t) => {
+      this.events[s] && (this.events[s] = this.events[s].reduce((i, n) => (n !== t && i.push(n), i), []));
     });
-    __publicField(this, "emit", (eventName, data) => {
-      var _a;
-      if (this.events[eventName]) {
-        (_a = this.events[eventName]) == null ? void 0 : _a.forEach((fn) => {
-          fn(data);
-        });
-      }
+    h(this, "emit", (s, t) => {
+      var i;
+      this.events[s] && ((i = this.events[s]) == null || i.forEach((n) => {
+        n(t);
+      }));
     });
   }
 }
+const E = v;
 export {
-  EventEmitter as default
+  E as default
 };

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

@@ -1,24 +1,19 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
-import { UIElement } from "../UIElement.js";
-import TransactionDetails from "./components/TransactionDetails.js";
-class TransactionsElement extends UIElement {
-  constructor(props) {
-    super(props);
-    __publicField(this, "componentToRender", () => {
-      return /* @__PURE__ */ o(TransactionDetails, { ...this.props });
-    });
-    this.elementRef = props && props.elementRef || this;
-    this.componentToRender = this.componentToRender.bind(this);
+var r = Object.defineProperty;
+var i = (n, e, t) => e in n ? r(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var o = (n, e, t) => (i(n, typeof e != "symbol" ? e + "" : e, t), t);
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "../UIElement.js";
+import c from "./components/TransactionDetails.js";
+class s extends m {
+  constructor(t) {
+    super(t);
+    o(this, "componentToRender", () => /* @__PURE__ */ a(c, { ...this.props }));
+    this.elementRef = t && t.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
   }
 }
-__publicField(TransactionsElement, "type", "transactionsDetails");
+o(s, "type", "transactionsDetails");
+const h = s;
 export {
-  TransactionsElement,
-  TransactionsElement as default
+  s as TransactionsElement,
+  h as default
 };

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

@@ -1,16 +1,16 @@
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import TransactionDataSkeleton from "./TransactionDataSkeleton.js";
-import { Image } from "../../../internal/Image/Image.js";
-import { parsePaymentMethodType } from "../../TransactionsOverview/components/utils.js";
-import { T as Tag, a as TagVariant } from "../../../../../Tag-6d02fd64.mjs";
-import useCoreContext from "../../../../core/Context/useCoreContext.js";
-import { F } from "../../../../../hooks.module-8565d716.mjs";
-import { k } from "../../../../../preact.module-38e5a571.mjs";
-const TransactionData = ({ transaction, isFetching }) => {
-  var _a;
-  const { i18n } = useCoreContext();
-  const creationDate = F(
-    () => transaction ? i18n.date(new Date(transaction.creationDate), {
+import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import _ from "./TransactionDataSkeleton.js";
+import { Image as t } from "../../../internal/Image/Image.js";
+import { parsePaymentMethodType as h } from "../../TransactionsOverview/components/utils.js";
+import { Tag as p } from "../../../internal/Tag/Tag.js";
+import { TagVariant as a } from "../../../internal/Tag/types.js";
+import r from "../../../../core/Context/useCoreContext.js";
+import { useMemo as g } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { Fragment as i } from "../../../../external/preact/dist/preact.module.js";
+const T = ({ transaction: e, isFetching: y }) => {
+  var l;
+  const { i18n: m } = r(), o = g(
+    () => e ? m.date(new Date(e.creationDate), {
       weekday: "long",
       month: "long",
       year: "numeric",
@@ -18,54 +18,53 @@ const TransactionData = ({ transaction, isFetching }) => {
       minute: "2-digit",
       timeZoneName: "shortOffset"
     }).toString() : "",
-    [transaction, i18n]
-  );
-  const amountStyle = (transaction == null ? void 0 : transaction.status) === "Booked" ? "default" : (transaction == null ? void 0 : transaction.status) === "Reversed" ? "error" : "pending";
-  return /* @__PURE__ */ o(k, { children: !transaction ? /* @__PURE__ */ o(TransactionDataSkeleton, { isLoading: isFetching, skeletonRowNumber: 6 }) : /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data", children: [
-    /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__container", children: [
-      ((transaction == null ? void 0 : transaction.status) || (transaction == null ? void 0 : transaction.category)) && /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__tag-container", children: [
-        (transaction == null ? void 0 : transaction.status) && /* @__PURE__ */ o(
-          Tag,
+    [e, m]
+  ), u = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending";
+  return /* @__PURE__ */ d(i, { children: e ? /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data", children: [
+    /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__container", children: [
+      ((e == null ? void 0 : e.status) || (e == null ? void 0 : e.category)) && /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__tag-container", children: [
+        (e == null ? void 0 : e.status) && /* @__PURE__ */ d(
+          p,
           {
-            label: i18n.get(transaction.status),
-            variant: transaction.status === "Booked" ? TagVariant.SUCCESS : transaction.status === "Reversed" ? TagVariant.ERROR : TagVariant.DEFAULT
+            label: m.get(e.status),
+            variant: e.status === "Booked" ? a.SUCCESS : e.status === "Reversed" ? a.ERROR : a.DEFAULT
           }
         ),
-        transaction.category && /* @__PURE__ */ o(Tag, { label: i18n.get(`txType.${transaction.category}`), variant: TagVariant.DEFAULT })
+        e.category && /* @__PURE__ */ d(p, { label: m.get(`txType.${e.category}`), variant: a.DEFAULT })
       ] }),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ d(
         "div",
         {
-          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${amountStyle}`,
-          children: transaction.amount ? i18n.amount(transaction.amount.value, transaction.amount.currency, {
+          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${u}`,
+          children: e.amount ? m.amount(e.amount.value, e.amount.currency, {
             currencyDisplay: "symbol"
           }) : null
         }
       ),
-      ((transaction == null ? void 0 : transaction.paymentMethod) || (transaction == null ? void 0 : transaction.bankAccount)) && /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__payment-method", children: [
-        /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__payment-method-logo-container", children: /* @__PURE__ */ o(
-          Image,
+      ((e == null ? void 0 : e.paymentMethod) || (e == null ? void 0 : e.bankAccount)) && /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__payment-method", children: [
+        /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__payment-method-logo-container", children: /* @__PURE__ */ d(
+          t,
           {
-            name: transaction.paymentMethod ? transaction.paymentMethod.type : "bankTransfer",
-            alt: transaction.paymentMethod ? transaction.paymentMethod.type : "bankTransfer",
+            name: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
+            alt: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
             folder: "logos/",
             className: "adyen-pe-transactions__payment-method-logo"
           }
         ) }),
-        /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__payment-method-detail", children: (transaction == null ? void 0 : transaction.paymentMethod) ? parsePaymentMethodType(transaction == null ? void 0 : transaction.paymentMethod, "detail") : (_a = transaction == null ? void 0 : transaction.bankAccount) == null ? void 0 : _a.accountNumberLastFourDigits })
+        /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__payment-method-detail", children: e != null && e.paymentMethod ? h(e == null ? void 0 : e.paymentMethod, "detail") : (l = e == null ? void 0 : e.bankAccount) == null ? void 0 : l.accountNumberLastFourDigits })
       ] }),
-      /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__label", children: creationDate })
+      /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__label", children: o })
     ] }),
-    (transaction == null ? void 0 : transaction.balanceAccountDescription) && /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__container", children: [
-      /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__label", children: i18n.get("account") }),
-      /* @__PURE__ */ o("div", { children: transaction.balanceAccountDescription })
+    (e == null ? void 0 : e.balanceAccountDescription) && /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__container", children: [
+      /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__label", children: m.get("account") }),
+      /* @__PURE__ */ d("div", { children: e.balanceAccountDescription })
     ] }),
-    /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__container", children: [
-      /* @__PURE__ */ o("div", { className: "adyen-pe-transaction-data__label", children: i18n.get("referenceID") }),
-      /* @__PURE__ */ o("div", { "aria-label": i18n.get("referenceID"), children: transaction.id })
+    /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__container", children: [
+      /* @__PURE__ */ d("div", { className: "adyen-pe-transaction-data__label", children: m.get("referenceID") }),
+      /* @__PURE__ */ d("div", { "aria-label": m.get("referenceID"), children: e.id })
     ] })
-  ] }) });
+  ] }) : /* @__PURE__ */ d(_, { isLoading: y, skeletonRowNumber: 6 }) });
 };
 export {
-  TransactionData
+  T as TransactionData
 };

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

@@ -1,20 +1,20 @@
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { F } from "../../../../../hooks.module-8565d716.mjs";
-import { k } from "../../../../../preact.module-38e5a571.mjs";
-const TransactionDataSkeleton = ({ isLoading, skeletonRowNumber = 0 }) => {
-  const skeletonRows = F(() => Array.from({ length: skeletonRowNumber }, (_, index) => index), [skeletonRowNumber]);
-  return /* @__PURE__ */ o(k, { children: skeletonRows.map((key) => /* @__PURE__ */ o(
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import s from "classnames";
+import { useMemo as c } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
+const i = ({ isLoading: o, skeletonRowNumber: a = 0 }) => {
+  const e = c(() => Array.from({ length: a }, (t, r) => r), [a]);
+  return /* @__PURE__ */ n(m, { children: e.map((t) => /* @__PURE__ */ n(
     "span",
     {
-      className: cx({
-        "adyen-pe-transaction-data__skeleton": true,
-        "adyen-pe-transaction-data__skeleton-loading-content": isLoading
+      className: s({
+        "adyen-pe-transaction-data__skeleton": !0,
+        "adyen-pe-transaction-data__skeleton-loading-content": o
       })
     },
-    `transaction-data-skeleton-${key}`
+    `transaction-data-skeleton-${t}`
   )) });
-};
+}, k = i;
 export {
-  TransactionDataSkeleton as default
+  k as default
 };

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

@@ -1,44 +1,33 @@
-import '../../../../../TransactionDetails.css';
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import { TransactionData } from "./TransactionData.js";
-import { ErrorMessageDisplay } from "../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { getErrorMessage } from "../../../utils/transactionResourceErrorCodes.js";
-import useCoreContext from "../../../../core/Context/useCoreContext.js";
-import { useFetch } from "../../../../hooks/useFetch/useFetch.js";
-import { useSetupEndpoint } from "../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
-import "../../../../utils/common/index.js";
-import { F, T } from "../../../../../hooks.module-8565d716.mjs";
-import { EMPTY_OBJECT } from "../../../../utils/common/constants.js";
-const TransactionDetails$1 = "";
-const isTransactionWithoutId = (props) => "transaction" in props;
-function TransactionDetails(props) {
-  const transaction = F(() => isTransactionWithoutId(props) ? props.transaction : null, [props]);
-  const transactionId = F(() => !isTransactionWithoutId(props) ? props.transactionId : null, [props]);
-  const { i18n } = useCoreContext();
-  const getTransactionDetail = useSetupEndpoint("getTransaction");
-  const fetchCallback = T(async () => {
-    if (transactionId) {
-      return getTransactionDetail(EMPTY_OBJECT, {
-        path: { transactionId }
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TransactionData as h } from "./TransactionData.js";
+import { ErrorMessageDisplay as g } from "../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as T } from "../../../utils/transactionResourceErrorCodes.js";
+import C from "../../../../core/Context/useCoreContext.js";
+import { useFetch as p } from "../../../../hooks/useFetch/useFetch.js";
+import { useSetupEndpoint as y } from "../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { useMemo as e, useCallback as D } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import "./TransactionDetails.scss.js";
+import { EMPTY_OBJECT as E } from "../../../../utils/common/constants.js";
+const c = (t) => "transaction" in t;
+function P(t) {
+  const s = e(() => c(t) ? t.transaction : null, [t]), n = e(() => c(t) ? null : t.transactionId, [t]), { i18n: m } = C(), o = y("getTransaction"), l = D(async () => {
+    if (n)
+      return o(E, {
+        path: { transactionId: n }
       });
-    }
-  }, [getTransactionDetail, transactionId]);
-  const { data, error, isFetching } = useFetch({
-    fetchOptions: F(() => ({ enabled: !!transactionId }), [transactionId]),
-    queryFn: fetchCallback
-  });
-  const errorProps = F(() => {
-    if (error) {
-      return getErrorMessage(error, props.onContactSupport);
-    }
-  }, [error, props.onContactSupport]);
-  const transactionData = transaction ?? data;
-  return /* @__PURE__ */ o("div", { className: "adyen-pe-transaction", children: [
-    props.title && /* @__PURE__ */ o("div", { className: "adyen-pe-title", children: i18n.get(props.title) }),
-    error && errorProps && /* @__PURE__ */ o("div", { className: "adyen-pe-transaction--error-container", children: /* @__PURE__ */ o(ErrorMessageDisplay, { centered: true, withImage: true, ...errorProps }) }),
-    /* @__PURE__ */ o(TransactionData, { transaction: transactionData, isFetching })
+  }, [o, n]), { data: u, error: r, isFetching: d } = p({
+    fetchOptions: e(() => ({ enabled: !!n }), [n]),
+    queryFn: l
+  }), i = e(() => {
+    if (r)
+      return T(r, t.onContactSupport);
+  }, [r, t.onContactSupport]), f = s ?? u;
+  return /* @__PURE__ */ a("div", { className: "adyen-pe-transaction", children: [
+    t.title && /* @__PURE__ */ a("div", { className: "adyen-pe-title", children: m.get(t.title) }),
+    r && i && /* @__PURE__ */ a("div", { className: "adyen-pe-transaction--error-container", children: /* @__PURE__ */ a(g, { centered: !0, withImage: !0, ...i }) }),
+    /* @__PURE__ */ a(h, { transaction: f, isFetching: d })
   ] });
 }
 export {
-  TransactionDetails as default
+  P as default
 };

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

@@ -0,0 +1,4 @@
+const a = "";
+export {
+  a as default
+};