@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta

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

@@ -1,34 +1,44 @@
-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 AdyenFPCore
-    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);
+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");
+    // 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);
   }
   /**
    * Executed during creation of any element.
    * Gives a chance to any component to format the props we're receiving.
    */
-  formatProps(t) {
-    return t;
+  formatProps(props) {
+    return props;
   }
   /**
    * Executed on the `data` getter.
@@ -37,8 +47,8 @@ class r {
   formatData() {
     return {};
   }
-  setState(t) {
-    this.state = { ...this.state, ...t };
+  setState(newState) {
+    this.state = { ...this.state, ...newState };
   }
   /**
    * Returns the component data ready to submit to the Checkout API
@@ -47,58 +57,88 @@ class r {
   get data() {
     return {
       ...this.formatData(),
-      clientStateDataIndicator: !0
+      clientStateDataIndicator: true
     };
   }
   render() {
     throw new Error("Component cannot be rendered.");
   }
-  mount(t) {
-    var i, p;
-    let s;
-    if (d(t) ? s = document.querySelector(t) : s = t, !s)
+  mount(domNode) {
+    var _a2, _b;
+    let node;
+    if (isString(domNode)) {
+      node = document.querySelector(domNode);
+    } else {
+      node = domNode;
+    }
+    if (!node) {
       throw new Error("Component could not mount. Root node was not found.");
-    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;
+    }
+    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;
   }
   /**
    * Updates props, resets the internal state and remounts the element.
    * @param props - props to update
    * @returns this - the element instance
    */
-  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;
+  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;
   }
   /**
    * 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(t) {
-    if (!this._node)
+  remount(component) {
+    if (!this._node) {
       throw new Error("Component is not mounted.");
-    const s = t || this.render();
-    return n(s, this._node, void 0), this;
+    }
+    const newComponent = component || this.render();
+    B(newComponent, this._node, void 0);
+    return this;
   }
   /**
    * Unmounts an element from the DOM
    */
   unmount() {
-    return this._node && n(null, this._node), this;
+    if (this._node) {
+      B(null, this._node);
+    }
+    return 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(), this._parentInstance && this._parentInstance.remove(this);
+    this.unmount();
+    if (this._parentInstance) {
+      this._parentInstance.remove(this);
+    }
   }
 }
-o(r, "type"), o(r, "analyticsType");
-const E = r;
+__publicField(BaseElement, "type");
+__publicField(BaseElement, "analyticsType");
 export {
-  E as default
+  BaseElement as default
 };

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

@@ -1,25 +1,36 @@
-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 {
+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 {
   constructor() {
-    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, "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, "off", (s, t) => {
-      this.events[s] && (this.events[s] = this.events[s].reduce((i, n) => (n !== t && i.push(n), i), []));
+    __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, "emit", (s, t) => {
-      var i;
-      this.events[s] && ((i = this.events[s]) == null || i.forEach((n) => {
-        n(t);
-      }));
+    __publicField(this, "emit", (eventName, data) => {
+      var _a;
+      if (this.events[eventName]) {
+        (_a = this.events[eventName]) == null ? void 0 : _a.forEach((fn) => {
+          fn(data);
+        });
+      }
     });
   }
 }
-const E = v;
 export {
-  E as default
+  EventEmitter as default
 };

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

@@ -0,0 +1,78 @@
+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 { UIElement } from "./UIElement.js";
+class FormElement extends UIElement {
+  constructor(props) {
+    super(props);
+    __publicField(this, "componentRef");
+    __publicField(this, "triggerValidation");
+    __publicField(this, "setTriggerValidation", (callBack) => {
+      this.triggerValidation = callBack;
+    });
+    __publicField(this, "handleError", (error) => {
+      if (this.props.onError) {
+        this.props.onError(error, this.elementRef);
+      }
+    });
+    this.submit = this.submit.bind(this);
+    this.onValid = this.onValid.bind(this);
+    this.onComplete = this.onComplete.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.componentRef = null;
+    this.triggerValidation = void 0;
+  }
+  onChange() {
+    const isValid = this.isValid;
+    const state = { data: this.data, errors: this.state.errors, valid: this.state.valid, isValid };
+    if (this.props.onChange)
+      this.props.onChange(state, this.elementRef);
+    if (isValid)
+      this.onValid();
+    return state;
+  }
+  onSubmit() {
+  }
+  onValid() {
+    const state = { data: this.data };
+    if (this.props.onValid)
+      this.props.onValid(state, this.elementRef);
+    return state;
+  }
+  onComplete(state) {
+    if (this.props.onComplete)
+      this.props.onComplete(state, this.elementRef);
+  }
+  /**
+   * Submit data. If the form is not valid, it will trigger validation.
+   */
+  submit() {
+    if (!this.isValid) {
+      this.showValidation();
+      return;
+    }
+    this.onSubmit();
+  }
+  showValidation() {
+    var _a, _b;
+    if ((_a = this.componentRef) == null ? void 0 : _a.showValidation) {
+      this.componentRef.showValidation();
+    } else {
+      (_b = this.triggerValidation) == null ? void 0 : _b.call(this);
+    }
+    return this;
+  }
+  /**
+   * Get the current validation status of the element
+   */
+  get isValid() {
+    return false;
+  }
+}
+export {
+  FormElement,
+  FormElement as default
+};

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

@@ -1,19 +1,24 @@
-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);
+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);
   }
 }
-o(s, "type", "transactionsDetails");
-const h = s;
+__publicField(TransactionsElement, "type", "transactionsDetails");
 export {
-  s as TransactionsElement,
-  h as default
+  TransactionsElement,
+  TransactionsElement as default
 };

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

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

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

@@ -1,17 +1,20 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "classnames";
-import { useMemo as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
-const f = ({ isLoading: o, skeletonRowNumber: a = 0 }) => {
-  const e = m(() => Array.from({ length: a }, (t, r) => r), [a]);
-  return /* @__PURE__ */ n(c, { children: e.map((t) => /* @__PURE__ */ n(
+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(
     "span",
     {
-      className: s({ "adyen-fp-transaction-data__skeleton": !0, "adyen-fp-transaction-data__skeleton-loading-content": o })
+      className: cx({
+        "adyen-pe-transaction-data__skeleton": true,
+        "adyen-pe-transaction-data__skeleton-loading-content": isLoading
+      })
     },
-    `transaction-data-skeleton-${t}`
+    `transaction-data-skeleton-${key}`
   )) });
 };
 export {
-  f as default
+  TransactionDataSkeleton as default
 };

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

@@ -1,33 +1,44 @@
-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 o, 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 = o(() => c(t) ? t.transaction : null, [t]), n = o(() => c(t) ? null : t.transactionId, [t]), { i18n: m } = C(), e = y("getTransaction"), l = D(async () => {
-    if (n)
-      return e(E, {
-        path: { transactionId: n }
+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 }
       });
-  }, [e, n]), { data: u, error: r, isFetching: f } = p({
-    fetchOptions: o(() => ({ enabled: !!n }), [n]),
-    queryFn: l
-  }), i = o(() => {
-    if (r)
-      return T(r, t.onContactSupport);
-  }, [r, t.onContactSupport]), d = s ?? u;
-  return /* @__PURE__ */ a("div", { className: "adyen-fp-transaction", children: [
-    t.title && /* @__PURE__ */ a("div", { className: "adyen-fp-title", children: m.get(t.title) }),
-    r && i && /* @__PURE__ */ a("div", { className: "adyen-fp-transaction--error-container", children: /* @__PURE__ */ a(g, { centered: !0, withImage: !0, ...i }) }),
-    /* @__PURE__ */ a(h, { transaction: d, isFetching: f })
+    }
+  }, [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 })
   ] });
 }
 export {
-  P as default
+  TransactionDetails as default
 };

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

@@ -0,0 +1,4 @@
+import { TransactionsElement } from "./TransactionDetails.js";
+export {
+  TransactionsElement as TransactionsDetails
+};