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

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

@@ -1,78 +1,79 @@
-import { DATE_FORMAT_TRANSACTIONS as x } from "../../../../internal/DataOverviewDisplay/constants.js";
-import L from "../Category/Category.js";
-import H from "../../../../internal/DataOverviewError/DataOverviewError.js";
-import { getLabel as O } from "../../../../utils/getLabel.js";
+import { useState as F, useCallback as Y, useMemo as k } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { DATE_FORMAT_TRANSACTIONS_MOBILE as x, DATE_FORMAT_TRANSACTIONS as H } from "../../../../internal/DataOverviewDisplay/constants.js";
+import I from "../Category/Category.js";
+import P from "../../../../internal/DataOverviewError/DataOverviewError.js";
 import V from "../../../../../core/Context/useCoreContext.js";
-import Y from "../../../../hooks/useTimezoneAwareDateFormatting.js";
-import { useState as $, useMemo as d, useCallback as G } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { CellTextPosition as I } from "../../../../internal/DataGrid/types.js";
-import { getCurrencyCode as U } from "../../../../../core/Localization/amount/amount-util.js";
-import { BASE_CLASS as k, DATE_AND_PAYMENT_METHOD_CLASS as T, AMOUNT_CLASS as W } from "./constants.js";
+import { getCurrencyCode as $ } from "../../../../../core/Localization/amount/amount-util.js";
+import B from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { CellTextPosition as G } from "../../../../internal/DataGrid/types.js";
+import { TypographyVariant as r } from "../../../../internal/Typography/types.js";
+import n from "../../../../internal/Typography/Typography.js";
+import { useResponsiveViewport as p, mediaQueries as d } from "../../../../hooks/useResponsiveViewport.js";
+import { BASE_CLASS as U, AMOUNT_CLASS as W, DATE_AND_PAYMENT_METHOD_CLASS as j, DATE_METHOD_CLASS as q } from "./constants.js";
 import "./TransactionTable.scss.js";
-import { useResponsiveViewport as p, mediaQueries as c } from "../../hooks/useResponsiveViewport.js";
-import h from "./PaymentMethodCell.js";
+import y from "./PaymentMethodCell.js";
+import { useTableColumns as z } from "../../../../hooks/useTableColumns.js";
 import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import M from "../../../../internal/DataGrid/DataGrid.js";
-import j from "../../../../internal/Pagination/Pagination.js";
-const q = ["dateAndPaymentMethod", "createdAt", "paymentMethod", "transactionType", "amount"], co = ({
-  activeBalanceAccount: s,
-  availableCurrencies: n,
-  error: m,
-  hasMultipleCurrencies: i,
-  loading: g,
+import f from "../../../../internal/DataGrid/DataGrid.js";
+import K from "../../../../internal/Pagination/Pagination.js";
+const Q = ["createdAt", "paymentMethod", "transactionType", "amount"], fo = ({
+  activeBalanceAccount: a,
+  availableCurrencies: s,
+  error: i,
+  hasMultipleCurrencies: c,
+  loading: h,
   onContactSupport: l,
-  onRowClick: w,
-  showDetails: z,
-  showPagination: S,
-  transactions: D,
-  ...C
+  onRowClick: M,
+  showDetails: X,
+  showPagination: D,
+  transactions: S,
+  customColumns: C,
+  ...g
 }) => {
   const {
-    i18n: a
+    i18n: m
   } = V(), {
-    dateFormat: E,
-    fullDateFormat: b
-  } = Y(s == null ? void 0 : s.timeZone), [N, u] = $(), r = p(c.up.sm), A = p(c.up.md), y = p(c.down.xs), f = d(() => ({
-    dateAndPaymentMethod: y,
-    createdAt: r,
-    transactionType: A,
-    paymentMethod: r
-  }), [y, r, A]), _ = d(() => q.map((o) => {
-    const e = a.get(O(o));
-    return o === "amount" ? {
-      key: o,
-      label: i ? e : `${e} ${n && n[0] ? `(${U(n[0])})` : ""}`,
-      position: o === "amount" ? I.RIGHT : void 0,
-      flex: r ? 1.5 : void 0
-    } : {
-      key: o,
-      label: e,
-      visible: f[o]
-    };
-  }), [n, f, i, a, r]), R = {
+    dateFormat: T
+  } = B(a == null ? void 0 : a.timeZone), [_, u] = F(), A = p(d.up.sm), E = p(d.up.md), O = p(d.down.xs), v = m.get("amount"), w = z({
+    fields: Q,
+    customColumns: C,
+    columnConfig: {
+      amount: {
+        label: c ? void 0 : `${v} ${s && s[0] ? `(${$(s[0])})` : ""}`,
+        position: G.RIGHT,
+        flex: A ? 1.5 : void 0
+      },
+      transactionType: {
+        visible: E
+      },
+      paymentMethod: {
+        visible: A
+      }
+    }
+  }), N = {
     title: "noTransactionsFound",
     message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
-  }, v = G((o) => {
+  }, R = Y((o) => {
     u(o ?? void 0);
-  }, [u]), F = d(() => () => t(H, {
-    error: m,
+  }, [u]), b = k(() => () => t(P, {
+    error: i,
     onContactSupport: l,
     errorMessage: "weCouldNotLoadYourTransactions"
-  }), [m, l]);
+  }), [i, l]);
   return t("div", {
-    className: k,
-    children: t(M, {
-      errorDisplay: F,
-      error: m,
-      columns: _,
-      data: D,
-      loading: g,
+    className: U,
+    children: t(f, {
+      errorDisplay: b,
+      error: i,
+      columns: w,
+      data: S,
+      loading: h,
       outline: !1,
       onRowClick: {
-        callback: w
+        callback: M
       },
-      onRowHover: v,
-      emptyTableMessage: R,
+      onRowHover: R,
+      emptyTableMessage: N,
       customCells: {
         // Remove status column temporarily
         /* status: ({ value }) => {
@@ -83,59 +84,64 @@ const q = ["dateAndPaymentMethod", "createdAt", "paymentMethod", "transactionTyp
                 />
             );
         },*/
-        dateAndPaymentMethod: ({
-          item: o
-        }) => t("div", {
-          className: T,
-          children: [t(h, {
-            paymentMethod: o.paymentMethod,
-            bankAccount: o.bankAccount
-          }), t("span", {
-            className: T,
-            children: E(o.createdAt, x)
-          })]
-        }),
         transactionType: ({
           item: o,
           rowIndex: e
         }) => {
-          const P = `tooltip.${o.category}`;
-          return o.category ? a.has(P) ? t(L, {
-            value: o.category,
-            isContainerHovered: e === N
-          }) : o.category : null;
+          const L = `tooltip.${o.category}`;
+          return o.category ? m.has(L) ? t(I, {
+            isContainerHovered: e === _,
+            value: o.category
+          }) : t(n, {
+            variant: r.BODY,
+            children: o.category
+          }) : null;
         },
-        createdAt: ({
-          value: o
-        }) => t("span", {
-          children: b(o)
-        }),
         amount: ({
           value: o
         }) => {
-          const e = a.amount(o.value, o.currency, {
-            hideCurrency: !i
+          const e = m.amount(o.value, o.currency, {
+            hideCurrency: !c
           });
-          return t("span", {
+          return t(n, {
+            variant: r.BODY,
             className: W,
             children: e
           });
         },
+        createdAt: ({
+          item: o,
+          value: e
+        }) => O ? t("div", {
+          className: j,
+          children: [t(y, {
+            paymentMethod: o.paymentMethod,
+            bankAccount: o.bankAccount
+          }), t(n, {
+            variant: r.BODY,
+            className: q,
+            children: T(o.createdAt, x)
+          })]
+        }) : t(n, {
+          variant: r.BODY,
+          children: T(e, H)
+        }),
         paymentMethod: ({
           item: o
-        }) => t(h, {
+        }) => t(y, {
           paymentMethod: o.paymentMethod,
           bankAccount: o.bankAccount
         })
       },
-      children: S && t(M.Footer, {
-        children: t(j, {
-          ...C
+      children: D && t(f.Footer, {
+        children: t(K, {
+          ...g
         })
       })
     })
   });
 };
 export {
-  co as TransactionsTable
+  Q as TRANSACTION_FIELDS,
+  fo as TransactionsTable
 };

package/dist/es/components/external/TransactionsOverview/components/TransactionsTable/constants.js

@@ -1,9 +1,10 @@
-const _ = "adyen-pe-transactions-table", t = _ + "__amount", o = _ + "__payment-method", n = _ + "__payment-method-logo-container", A = _ + "__payment-method-logo", e = _ + "__date-and-payment-method";
+const _ = "adyen-pe-transactions-table", t = _ + "__amount", n = _ + "__payment-method", o = _ + "__payment-method-logo-container", e = _ + "__payment-method-logo", A = _ + "__date-and-payment-method", a = _ + "__date-and-payment-method--date";
 export {
   t as AMOUNT_CLASS,
   _ as BASE_CLASS,
-  e as DATE_AND_PAYMENT_METHOD_CLASS,
-  o as PAYMENT_METHOD_CLASS,
-  A as PAYMENT_METHOD_LOGO_CLASS,
-  n as PAYMENT_METHOD_LOGO_CONTAINER_CLASS
+  A as DATE_AND_PAYMENT_METHOD_CLASS,
+  a as DATE_METHOD_CLASS,
+  n as PAYMENT_METHOD_CLASS,
+  e as PAYMENT_METHOD_LOGO_CLASS,
+  o as PAYMENT_METHOD_LOGO_CONTAINER_CLASS
 };

package/dist/es/components/hooks/useCustomColumnsData.js

@@ -0,0 +1,29 @@
+import { useState as n, useCallback as C, useEffect as r } from "../../external/preact/hooks/dist/hooks.module.js";
+const i = ({
+  records: s,
+  onDataRetrieved: t,
+  mergeCustomData: c
+}) => {
+  const [e, u] = n(s), [f, l] = n(!1), a = C((m) => async () => {
+    try {
+      const o = t ? await t(m) : [];
+      u(c({
+        records: s,
+        retrievedData: o
+      }));
+    } catch (o) {
+      u(s), console.error(o);
+    } finally {
+      l(!1);
+    }
+  }, [t, s, c]);
+  return r(() => {
+    t && s.length && (l(!0), a(s)());
+  }, [t, a, s]), {
+    customRecords: e,
+    loadingCustomRecords: f
+  };
+};
+export {
+  i as useCustomColumnsData
+};

package/dist/es/components/hooks/useFreezePeriod.js

@@ -0,0 +1,18 @@
+import { useState as o, useRef as u, useCallback as f, useEffect as i } from "../../external/preact/hooks/dist/hooks.module.js";
+const l = (e = 1e3, a = !1) => {
+  const [r, s] = o(a), t = u(), n = u(), c = f(() => {
+    r || (n.current = setTimeout(() => {
+      t.current = requestAnimationFrame(() => s(!1));
+    }, e), s(!0));
+  }, [r, e]);
+  return i(() => () => {
+    cancelAnimationFrame(t.current), clearTimeout(n.current), t.current = n.current = null;
+  }, [e]), {
+    freeze: c,
+    frozen: r
+  };
+}, F = l;
+export {
+  F as default,
+  l as useFreezePeriod
+};

package/dist/es/components/{external/TransactionsOverview/hooks → hooks}/useResponsiveViewport.js

@@ -1,5 +1,5 @@
-import { BREAKPOINTS as m } from "../../../../constants.js";
-import { useMediaQuery as i } from "../../../../hooks/useMediaQuery/useMediaQuery.js";
+import { BREAKPOINTS as m } from "../../constants.js";
+import { useMediaQuery as i } from "../../hooks/useMediaQuery/useMediaQuery.js";
 const p = {
   up: {
     sm: `(min-width: ${m.sm}px)`,

package/dist/es/components/hooks/useTableColumns.js

@@ -0,0 +1,46 @@
+import { useMemo as p } from "../../external/preact/hooks/dist/hooks.module.js";
+import { getLabel as c } from "../utils/getLabel.js";
+import b from "../../core/Context/useCoreContext.js";
+import { EMPTY_OBJECT as a } from "../../utils/value/constants.js";
+import { isUndefined as l, isString as v } from "../../utils/value/is.js";
+function y(r) {
+  let e = {};
+  for (const t of Object.keys(r))
+    l(r[t]) || (e = {
+      ...e,
+      [t]: r[t]
+    });
+  return e;
+}
+function u(r) {
+  return r.every(v);
+}
+const P = ({
+  fields: r,
+  customColumns: e,
+  columnConfig: t
+}) => {
+  const {
+    i18n: n
+  } = b(), o = p(() => r.map((i) => ({
+    key: i
+  })), [r]);
+  return p(() => ((e ? u(e) ? e.map((s) => ({
+    key: s
+  })) : e : void 0) || o).map(({
+    key: s,
+    flex: f
+  }) => {
+    const d = n.get(c(s)), m = y((t == null ? void 0 : t[s]) || a);
+    return {
+      key: s,
+      label: d,
+      visible: !0,
+      flex: f,
+      ...m || a
+    };
+  }), [t, e, n, o]);
+};
+export {
+  P as useTableColumns
+};

package/dist/es/components/internal/Accordion/Accordion.js

@@ -1,18 +1,18 @@
 import d from "classnames";
-import { useState as C, useRef as m, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
-import h from "../SVGIcons/ChevronDown.js";
-import A from "../SVGIcons/ChevronUp.js";
+import { useState as C, useRef as m, useCallback as h } from "../../../external/preact/hooks/dist/hooks.module.js";
+import A from "../SVGIcons/ChevronDown.js";
+import N from "../SVGIcons/ChevronUp.js";
 import { ACCORDION_BASE_CLASS as O, ACCORDION_HEADER_CLASS as p, ACCORDION_HEADER_CONTAINER_CLASS as E, ACCORDION_HEADER_CONTROLLER_CLASS as S, ACCORDION_CONTENT_CLASS as _ } from "./constants.js";
 import "./Accordion.scss.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 function L({
-  children: s,
+  children: a,
   classNames: c,
-  header: t,
-  headerInformation: a
+  header: n,
+  headerInformation: i
 }) {
-  var i;
-  const [o, l] = C(!1), r = m(null), n = N(() => {
+  var t;
+  const [o, l] = C(!1), r = m(null), s = h(() => {
     l(!o);
   }, [o]);
   return e("div", {
@@ -23,32 +23,32 @@ function L({
         id: "accordion-controller",
         "aria-controls": "accordion-content",
         className: E,
-        onClick: n,
+        onClick: s,
         "aria-expanded": o,
         children: e("div", {
           className: S,
-          children: [t, o ? e(A, {
+          children: [n, o ? e(N, {
             height: 8,
             width: 15
-          }) : e(h, {
+          }) : e(A, {
             height: 8,
             width: 15
           })]
         })
-      }), a && e("div", {
-        children: a
+      }), i && e("div", {
+        children: i
       })]
     }), e("div", {
       role: "region",
       id: "accordion-content",
       "aria-labelledby": "accordion-controller",
       style: {
-        maxHeight: o ? (i = r == null ? void 0 : r.current) == null ? void 0 : i.offsetHeight : 0
+        maxHeight: o ? (t = r == null ? void 0 : r.current) == null ? void 0 : t.offsetHeight : 0
       },
       className: _,
       children: e("div", {
         ref: r,
-        children: s
+        children: a
       })
     })]
   });

package/dist/es/components/internal/Alert/Alert.js

@@ -0,0 +1,62 @@
+import p from "classnames";
+import { ButtonVariant as c } from "../Button/types.js";
+import s from "../SVGIcons/Close.js";
+import h from "../SVGIcons/WarningFilled.js";
+import { TypographyElement as t, TypographyVariant as n } from "../Typography/types.js";
+import i from "../Typography/Typography.js";
+import "./Alert.scss.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import y from "../Button/Button.js";
+import { Fragment as u } from "../../../external/preact/dist/preact.module.js";
+function x({
+  className: o,
+  description: r,
+  title: a,
+  type: l,
+  onClose: m,
+  isOpen: d
+}) {
+  return e(u, {
+    children: d && e("div", {
+      className: p("adyen-pe-alert", o),
+      role: "alert",
+      children: e("div", {
+        className: `adyen-pe-alert__inner-container adyen-pe-alert--${l}`,
+        children: [e("div", {
+          className: "adyen-pe-alert__icon",
+          children: e(h, {})
+        }), e("div", {
+          className: "adyen-pe-alert__content",
+          children: [a && e(i, {
+            className: "adyen-pe-alert__title",
+            el: t.DIV,
+            variant: n.BODY,
+            wide: !0,
+            strongest: !0,
+            children: a
+          }), r && e(i, {
+            className: "adyen-pe-alert__description",
+            el: t.DIV,
+            variant: n.BODY,
+            wide: !0,
+            children: r
+          })]
+        }), e("div", {
+          className: "adyen-pe-alert__close-button",
+          children: e(y, {
+            iconButton: !0,
+            variant: c.TERTIARY,
+            onClick: m,
+            children: e(s, {
+              width: 7.12,
+              height: 7.12
+            })
+          })
+        })]
+      })
+    })
+  });
+}
+export {
+  x as default
+};

package/dist/es/components/internal/Alert/Alert.scss.js

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

package/dist/es/components/internal/Alert/types.js

@@ -0,0 +1,4 @@
+var c = /* @__PURE__ */ ((I) => (I.WARNING = "warning", I.CRITICAL = "critical", I.HIGHLIGHT = "highlight", I.SUCCESS = "success", I))(c || {});
+export {
+  c as AlertTypeOption
+};

package/dist/es/components/internal/Button/DownloadButton/DownloadButton.js

@@ -0,0 +1,81 @@
+import g from "classnames";
+import { useState as k, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../../core/Context/useCoreContext.js";
+import { useResponsiveViewport as B, mediaQueries as C } from "../../../hooks/useResponsiveViewport.js";
+import h from "../../SVGIcons/Download.js";
+import v from "../Button.js";
+import { ButtonVariant as _ } from "../types.js";
+import E from "./useDownload.js";
+import "./DownloadButton.scss.js";
+import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import b from "../../Spinner/Spinner.js";
+function N({
+  blob: r,
+  filename: c
+}) {
+  const t = document.createElement("a"), n = URL.createObjectURL(r);
+  t.href = n, t.download = c || "download";
+  const a = () => {
+    setTimeout(() => {
+      URL.revokeObjectURL(n);
+    }, 150);
+  };
+  t.addEventListener("click", a, {
+    once: !0
+  }), t.click();
+}
+function Y({
+  className: r,
+  disabled: c,
+  endpointName: t,
+  params: n,
+  setError: a,
+  errorDisplay: f,
+  onDownloadRequested: d
+}) {
+  const {
+    i18n: p
+  } = x(), [s, u] = k(!1), L = B(C.down.xs), {
+    data: l,
+    error: i,
+    isFetching: e
+  } = E(t, n, s);
+  m(() => {
+    s && u(!1);
+  }, [s]), m(() => {
+    l && N(l);
+  }, [l]), m(() => {
+    a && i && a(i);
+  }, [i]);
+  const w = () => {
+    u(!0), d == null || d();
+  };
+  return o("div", {
+    className: "adyen-pe-download",
+    children: [L ? o(v, {
+      iconButton: !0,
+      variant: _.TERTIARY,
+      onClick: w,
+      children: e ? o(b, {
+        size: "small"
+      }) : o(h, {})
+    }) : o(v, {
+      className: g("adyen-pe-download__button", {
+        "adyen-pe-download__button--loading": e
+      }, r),
+      disabled: c || e,
+      variant: _.SECONDARY,
+      onClick: w,
+      iconLeft: e ? o(b, {
+        size: "small"
+      }) : o(h, {}),
+      children: e ? `${p.get("downloading")}..` : p.get("download")
+    }), i && f && o("div", {
+      className: "adyen-pe-download__error",
+      children: f
+    })]
+  });
+}
+export {
+  Y as default
+};

package/dist/es/components/internal/Button/DownloadButton/DownloadButton.scss.js

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

package/dist/es/components/internal/Button/DownloadButton/useDownload.js

@@ -0,0 +1,18 @@
+import { useFetch as r } from "../../../../hooks/useFetch/useFetch.js";
+import { useAuthContext as s } from "../../../../core/Auth/context.js";
+import { EMPTY_OBJECT as u } from "../../../../utils/value/constants.js";
+const a = (t, e, n) => {
+  const o = s().endpoints[t];
+  return r({
+    fetchOptions: {
+      enabled: !!o && n,
+      keepPrevData: !0
+    },
+    queryFn: async () => o(u, {
+      ...e
+    })
+  });
+}, i = a;
+export {
+  i as default
+};

package/dist/es/components/internal/Card/Card.js

@@ -1,35 +1,35 @@
-import { CARD_BASE_CLASS as i, CARD_FILLED as o, CARD_NO_OUTLINE as h, CARD_HEADER as L, CARD_HEADER_CONTENT as O, CARD_TITLE as n, CARD_SUBTITLE as p, CARD_BODY as I, CARD_BODY_WITH_TITLE as f, CARD_FOOTER as B } from "./constants.js";
+import { CARD_BASE_CLASS as l, CARD_FILLED as o, CARD_NO_OUTLINE as h, CARD_HEADER as L, CARD_HEADER_CONTENT as O, CARD_TITLE as n, CARD_SUBTITLE as p, CARD_BODY as I, CARD_BODY_WITH_TITLE as f, CARD_FOOTER as B } from "./constants.js";
 import A from "classnames";
 import "./Card.scss.js";
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 const S = ({
   title: c,
-  subTitle: D,
+  subTitle: _,
   children: C,
-  footer: _,
+  footer: m,
   el: R,
   renderHeader: a,
-  renderFooter: m,
+  renderFooter: D,
   filled: E,
   noOutline: N,
-  classNameModifiers: l
+  classNameModifiers: T
 }) => {
-  const T = R || "header";
+  const i = R || "header";
   return s("section", {
-    className: A(i, {
+    className: A(l, {
       [o]: E,
       [h]: N
-    }, l),
-    children: [(c || a) && s(T, {
+    }, T),
+    children: [(c || a) && s(i, {
       className: L,
       children: (c || a) && s("div", {
         className: O,
         children: [a || s("span", {
           className: n,
           children: c
-        }), D && s("div", {
+        }), _ && s("div", {
           className: p,
-          children: D
+          children: _
         })]
       })
     }), s("div", {
@@ -37,12 +37,12 @@ const S = ({
         [f]: c || a
       }),
       children: C
-    }), (_ || m) && s("footer", {
+    }), (m || D) && s("footer", {
       className: B,
-      children: m || _
+      children: D || m
     })]
   });
-}, x = S;
+}, u = S;
 export {
-  x as default
+  u as default
 };