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

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

@@ -1,49 +1,64 @@
-import { DATE_FORMAT_TRANSACTION_DETAILS as h } from "../../../internal/DataOverviewDisplay/constants.js";
-import c from "./TransactionDataSkeleton.js";
-import i from "../../../hooks/useTimezoneAwareDateFormatting.js";
-import { Image as g } from "../../../internal/Image/Image.js";
-import { parsePaymentMethodType as v } from "../../TransactionsOverview/components/utils.js";
-import { Tag as t } from "../../../internal/Tag/Tag.js";
-import { TagVariant as m } from "../../../internal/Tag/types.js";
-import s from "../../../../core/Context/useCoreContext.js";
-import { useMemo as f } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { DATE_FORMAT_TRANSACTION_DETAILS as c } from "../../../internal/DataOverviewDisplay/constants.js";
+import N from "./TransactionDataSkeleton.js";
+import D from "../../../hooks/useTimezoneAwareDateFormatting.js";
+import { Image as S } from "../../../internal/Image/Image.js";
+import { parsePaymentMethodType as M } from "../../TransactionsOverview/components/utils.js";
+import { Tag as g } from "../../../internal/Tag/Tag.js";
+import { TagVariant as u } from "../../../internal/Tag/types.js";
+import I from "../../../../core/Context/useCoreContext.js";
+import { useMemo as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import "./TransactionData.scss.js";
+import { TRANSACTION_FIELDS as C } from "../../TransactionsOverview/components/TransactionsTable/TransactionsTable.js";
 import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as N } from "../../../../external/preact/dist/preact.module.js";
-const I = ({
+import { Fragment as E } from "../../../../external/preact/dist/preact.module.js";
+const a = ({
+  children: e
+}) => d("div", {
+  className: "adyen-pe-transaction-data__container",
+  children: e
+}), R = ["status", "category", "paymentMethod", "bankAccount", "balanceAccount", "id", "balanceAccountId"], z = ({
   transaction: e,
-  isFetching: r
+  isFetching: y,
+  error: t
 }) => {
-  var p, o, y;
+  var _, h, r;
   const {
-    i18n: a
-  } = s(), {
-    dateFormat: l
-  } = i((p = e.balanceAccount) == null ? void 0 : p.timeZone), u = f(() => e ? l(new Date(e.createdAt), h) : "", [e, l]), _ = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending";
-  return d(N, {
-    children: e ? d("div", {
+    i18n: m
+  } = I(), {
+    dateFormat: o
+  } = D((_ = e == null ? void 0 : e.balanceAccount) == null ? void 0 : _.timeZone), A = b(() => e ? o(new Date(e.createdAt), c) : "", [e, o]), f = (e == null ? void 0 : e.status) === "Booked" ? "default" : (e == null ? void 0 : e.status) === "Reversed" ? "error" : "pending", T = b(() => {
+    const l = /* @__PURE__ */ new Set([...R, ...C]);
+    return Object.entries(e || {}).filter(([p]) => !l.has(p)).map(([p, v]) => ({
+      key: p,
+      value: v
+    }));
+  }, [e]);
+  return d(E, {
+    children: !e && !t || y ? d(N, {
+      isLoading: y,
+      skeletonRowNumber: 5
+    }) : e ? d("div", {
       className: "adyen-pe-transaction-data",
-      children: [d("div", {
-        className: "adyen-pe-transaction-data__container",
+      children: [d(a, {
         children: [((e == null ? void 0 : e.status) || (e == null ? void 0 : e.category)) && d("div", {
           className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__tag-container",
-          children: [(e == null ? void 0 : e.status) && d(t, {
-            label: a.get(e.status),
-            variant: e.status === "Booked" ? m.SUCCESS : e.status === "Reversed" ? m.ERROR : m.DEFAULT
-          }), e.category && d(t, {
-            label: a.get(`txType.${e.category}`),
-            variant: m.DEFAULT
+          children: [(e == null ? void 0 : e.status) && d(g, {
+            label: m.get(e.status),
+            variant: e.status === "Booked" ? u.SUCCESS : e.status === "Reversed" ? u.ERROR : u.DEFAULT
+          }), e.category && d(g, {
+            label: m.get(`txType.${e.category}`),
+            variant: u.DEFAULT
           })]
         }), d("div", {
-          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${_}`,
-          children: e.amount ? `${a.amount(e.amount.value, e.amount.currency, {
+          className: `adyen-pe-transaction-data__section adyen-pe-transaction-data__amount adyen-pe-transaction-data__amount--${f}`,
+          children: e != null && e.amount ? `${m.amount(e.amount.value, e.amount.currency, {
             hideCurrency: !0
           })} ${e.amount.currency}` : null
         }), ((e == null ? void 0 : e.paymentMethod) || (e == null ? void 0 : e.bankAccount)) && d("div", {
           className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__payment-method",
           children: [d("div", {
             className: "adyen-pe-transaction-data__payment-method-logo-container",
-            children: d(g, {
+            children: d(S, {
               name: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
               alt: e.paymentMethod ? e.paymentMethod.type : "bankTransfer",
               folder: "logos/",
@@ -51,36 +66,42 @@ const I = ({
             })
           }), d("div", {
             className: "adyen-pe-transaction-data__payment-method-detail",
-            children: e != null && e.paymentMethod ? v(e == null ? void 0 : e.paymentMethod, "detail") : (o = e == null ? void 0 : e.bankAccount) == null ? void 0 : o.accountNumberLastFourDigits
+            children: e != null && e.paymentMethod ? M(e == null ? void 0 : e.paymentMethod, "detail") : (h = e == null ? void 0 : e.bankAccount) == null ? void 0 : h.accountNumberLastFourDigits
           })]
         }), d("div", {
           className: "adyen-pe-transaction-data__section adyen-pe-transaction-data__label",
-          children: u
+          children: A
         })]
-      }), ((y = e.balanceAccount) == null ? void 0 : y.description) && d("div", {
-        className: "adyen-pe-transaction-data__container",
+      }), ((r = e == null ? void 0 : e.balanceAccount) == null ? void 0 : r.description) && d(a, {
         children: [d("div", {
           className: "adyen-pe-transaction-data__label",
-          children: a.get("account")
+          children: m.get("account")
         }), d("div", {
           children: e.balanceAccount.description
         })]
-      }), d("div", {
-        className: "adyen-pe-transaction-data__container",
+      }), d(a, {
         children: [d("div", {
           className: "adyen-pe-transaction-data__label",
-          children: a.get("referenceID")
+          children: m.get("referenceID")
         }), d("div", {
-          "aria-label": a.get("referenceID"),
-          children: e.id
+          "aria-label": m.get("referenceID"),
+          children: e == null ? void 0 : e.id
         })]
-      })]
-    }) : d(c, {
-      isLoading: r,
-      skeletonRowNumber: 6
-    })
+      }), T.map(({
+        key: l,
+        value: p
+      }) => d(a, {
+        children: [d("div", {
+          className: "adyen-pe-transaction-data__label",
+          children: m.get(l)
+        }), d("div", {
+          "aria-label": m.get(l),
+          children: p
+        })]
+      }, l))]
+    }) : null
   });
 };
 export {
-  I as TransactionData
+  z as TransactionData
 };

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

@@ -1,23 +1,34 @@
-import r from "classnames";
-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 { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
-const i = ({
-  isLoading: o,
-  skeletonRowNumber: a = 0
+import n from "classnames";
+import { useMemo as r } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+const d = ({
+  isLoading: t,
+  skeletonRowNumber: e = 0
 }) => {
-  const e = m(() => Array.from({
-    length: a
-  }, (t, s) => s), [a]);
-  return n(c, {
-    children: e.map((t) => n("span", {
-      className: r({
+  const o = r(() => Array.from({
+    length: e
+  }, (s, c) => c), [e]);
+  return a("div", {
+    className: "adyen-pe-transaction-data__skeleton-container",
+    children: [a("div", {
+      className: "adyen-pe-transaction-data__status-skeleton",
+      children: [a("span", {
+        className: n("adyen-pe-transaction-data__skeleton", {
+          "adyen-pe-transaction-data__skeleton-loading-content": t
+        })
+      }), a("span", {
+        className: n("adyen-pe-transaction-data__skeleton", {
+          "adyen-pe-transaction-data__skeleton-loading-content": t
+        })
+      })]
+    }), o.map((s) => a("span", {
+      className: n({
         "adyen-pe-transaction-data__skeleton": !0,
-        "adyen-pe-transaction-data__skeleton-loading-content": o
+        "adyen-pe-transaction-data__skeleton-loading-content": t
       })
-    }, `transaction-data-skeleton-${t}`))
+    }, `transaction-data-skeleton-${s}`))]
   });
-}, k = i;
+}, p = d;
 export {
-  k as default
+  p as default
 };

package/dist/es/components/external/TransactionsOverview/components/AmountSkeleton/AmountSkeleton.js

@@ -1,21 +1,21 @@
-import e from "classnames";
-import { BASE_CLASS as m, LOADING_CLASS as a, MARGIN_CLASS as r } from "./constants.js";
+import s from "classnames";
+import { BASE_CLASS as m, LOADING_CLASS as r, MARGIN_CLASS as S } from "./constants.js";
 import "./AmountSkeleton.scss.js";
-import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const l = ({
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+const n = ({
   hasMargin: o = !1,
-  isLoading: s = !1,
-  width: t
-}) => S("span", {
-  className: e(m, {
-    [a]: s,
-    [r]: o
+  isLoading: t = !1,
+  width: e
+}) => a("span", {
+  className: s(m, {
+    [r]: t,
+    [S]: o
   }),
   style: {
-    width: t
+    width: e
   }
-}), u = l;
+}), u = n;
 export {
-  l as AmountSkeleton,
+  n as AmountSkeleton,
   u as default
 };

package/dist/es/components/external/TransactionsOverview/components/Category/Category.js

@@ -1,24 +1,29 @@
-import { Tooltip as i } from "../../../../internal/Tooltip/Tooltip.js";
-import m from "../../../../../core/Context/useCoreContext.js";
+import p from "../../../../../core/Context/useCoreContext.js";
+import { Tooltip as e } from "../../../../internal/Tooltip/Tooltip.js";
+import { TypographyVariant as a } from "../../../../internal/Typography/types.js";
+import m from "../../../../internal/Typography/Typography.js";
 import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as p } from "../../../../../external/preact/dist/preact.module.js";
-function l({
-  value: t,
-  isContainerHovered: e
+import { Fragment as s } from "../../../../../external/preact/dist/preact.module.js";
+function g({
+  value: r,
+  isContainerHovered: n
 }) {
   const {
-    i18n: r
-  } = m(), n = `tooltip.${t}`;
-  return o(p, {
-    children: r.has(n) && o(i, {
-      content: r.get(n),
-      isContainerHovered: e,
+    i18n: t
+  } = p(), i = `tooltip.${r}`;
+  return o(s, {
+    children: t.has(i) && o(e, {
+      content: t.get(i),
+      isContainerHovered: n,
       children: o("span", {
-        children: t
+        children: o(m, {
+          variant: a.BODY,
+          children: r
+        })
       })
     })
   });
 }
 export {
-  l as default
+  g as default
 };

package/dist/es/components/external/TransactionsOverview/components/MultiSelectionFilter/MultiSelectionFilter.js

@@ -1,5 +1,5 @@
 import { memo as u } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveViewport as t, mediaQueries as o } from "../../hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as t, mediaQueries as o } from "../../../../hooks/useResponsiveViewport.js";
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "../../../../internal/FormFields/Select/Select.js";
 const f = u(({

package/dist/es/components/external/TransactionsOverview/components/SummaryItem/SummaryItem.js

@@ -1,14 +1,14 @@
 import v from "../AmountSkeleton/AmountSkeleton.js";
-import { BASE_CLASS as y, BODY_CLASS as T, PLACEHOLDER_CLASS as E, LABEL_CLASS as N, AMOUNT_CLASS as _ } from "./constants.js";
+import { BASE_CLASS as y, BODY_CLASS as T, PLACEHOLDER_CLASS as E, LABEL_CLASS as _, AMOUNT_CLASS as b } from "./constants.js";
 import { SummaryItemLabel as h } from "./SummaryItemLabel.js";
-import { Tooltip as b } from "../../../../internal/Tooltip/Tooltip.js";
+import { Tooltip as x } from "../../../../internal/Tooltip/Tooltip.js";
 import { TypographyVariant as p } from "../../../../internal/Typography/types.js";
 import B from "../../../../internal/Typography/Typography.js";
-import O from "../../../../../core/Context/useCoreContext.js";
+import N from "../../../../../core/Context/useCoreContext.js";
 import n from "classnames";
-import { useEffect as x, useCallback as H } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useEffect as O, useCallback as H } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import "./SummaryItem.scss.js";
-import { useResponsiveViewport as I, mediaQueries as w } from "../../hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as I, mediaQueries as w } from "../../../../hooks/useResponsiveViewport.js";
 import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 const X = ({
   columnConfigs: i,
@@ -22,8 +22,8 @@ const X = ({
 }) => {
   const {
     i18n: s
-  } = O();
-  x(() => {
+  } = N();
+  O(() => {
     const e = i.map((r) => {
       var a, o;
       return ((o = (a = r.ref) == null ? void 0 : a.current) == null ? void 0 : o.getBoundingClientRect().width) ?? 0;
@@ -40,7 +40,7 @@ const X = ({
     children: i.map((e, r) => {
       const a = e.getValue(), o = !!a && a.length > 12;
       return t("div", {
-        children: [u && (e.tooltipLabel ? t(b, {
+        children: [u && (e.tooltipLabel ? t(x, {
           content: s.get(`${e.tooltipLabel}`),
           isContainerHovered: c,
           children: t(h, {
@@ -64,8 +64,8 @@ const X = ({
           children: t(B, {
             variant: f(e, o),
             className: n({
-              [N]: e.valueHasLabelStyle,
-              [_]: !e.valueHasLabelStyle
+              [_]: e.valueHasLabelStyle,
+              [b]: !e.valueHasLabelStyle
             }),
             children: a
           })

package/dist/es/components/external/TransactionsOverview/components/SummaryItem/SummaryItemLabel.js

@@ -1,27 +1,27 @@
-import { LABEL_CONTAINER_CLASS as l, LABEL_CONTAINER_CLASS_LOADING as p, LABEL_CLASS as L } from "./constants.js";
-import { TypographyVariant as i } from "../../../../internal/Typography/types.js";
+import { LABEL_CONTAINER_CLASS as l, LABEL_CONTAINER_CLASS_LOADING as L, LABEL_CLASS as i } from "./constants.js";
+import { TypographyVariant as s } from "../../../../internal/Typography/types.js";
 import A from "../../../../internal/Typography/Typography.js";
-import N from "classnames";
+import f from "classnames";
 import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { fixedForwardRef as f } from "../../../../../utils/preact/fixedForwardRef.js";
-const d = f(({
+import { fixedForwardRef as y } from "../../../../../utils/preact/fixedForwardRef.js";
+const d = y(({
   config: r,
   i18n: e,
   isSkeletonVisible: m,
   className: o,
   ...t
-}, s) => a("span", {
-  className: N(l, o, {
-    [p]: m
+}, p) => a("span", {
+  className: f(l, o, {
+    [L]: m
   }),
   style: {
     cursor: "default"
   },
-  ref: s,
+  ref: p,
   ...t,
   children: r.labelKey && a(A, {
-    variant: i.CAPTION,
-    className: L,
+    variant: s.CAPTION,
+    className: i,
     children: e.get(r.labelKey)
   })
 }));

package/dist/es/components/external/TransactionsOverview/components/TransactionTotals/TransactionTotals.js

@@ -2,7 +2,7 @@ import { useCallback as x, useMemo as q } from "../../../../../external/preact/h
 import { useFetch as w } from "../../../../../hooks/useFetch/useFetch.js";
 import { BASE_CLASS as L, ITEM_CLASS as y } from "./constants.js";
 import { memo as M } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveViewport as N, mediaQueries as _ } from "../../hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as N, mediaQueries as _ } from "../../../../hooks/useResponsiveViewport.js";
 import "./TransactionTotals.scss.js";
 import { TotalsCard as p } from "./TotalsCard.js";
 import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";