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

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

@@ -1,48 +1,56 @@
-import { useResponsiveViewport as m, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import l from "classnames";
+import s from "../SVGIcons/Close.js";
+import c from "../SVGIcons/Filter.js";
 import { ButtonVariant as n } from "../Button/types.js";
-import f from "../SVGIcons/Close.js";
-import p from "../SVGIcons/Filter.js";
-import { TypographyVariant as d } from "../Typography/types.js";
-import u from "../Typography/Typography.js";
-import h from "../../../core/Context/useCoreContext.js";
-import y from "classnames";
-import { useState as F, useEffect as b } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as m, useEffect as u } from "../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../core/Context/useCoreContext.js";
+import { useResponsiveViewport as d, mediaQueries as b } from "../../hooks/useResponsiveViewport.js";
 import "./FilterBar.scss.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "../Button/Button.js";
-import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
-function k(t) {
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "../Button/Button.js";
+import { isFunction as p } from "../../../utils/value/is.js";
+const o = "adyen-pe-filter-bar-mobile-switch", V = () => {
+  const t = d(b.down.xs), [e, r] = m(!t);
+  return u(() => {
+    r(!t);
+  }, [t]), {
+    isMobileViewport: t,
+    showingFilters: e,
+    setShowingFilters: r
+  };
+}, w = ({
+  isMobileViewport: t,
+  showingFilters: e,
+  setShowingFilters: r
+}) => t ? i("div", {
+  className: o,
+  children: i(a, {
+    iconButton: !0,
+    className: `${o}__button`,
+    disabled: !p(r),
+    onClick: () => r == null ? void 0 : r(!e),
+    variant: n.SECONDARY,
+    children: e ? i(s, {}) : i(c, {})
+  })
+}) : null, B = (t) => {
   const {
-    i18n: i
-  } = h(), r = m(c.down.xs), [o, a] = F(!r);
-  return b(() => {
-    a(!r);
-  }, [r]), e(_, {
-    children: [r && e("div", {
-      className: "adyen-pe-filter-bar__header",
-      children: [e(u, {
-        variant: d.SUBTITLE,
-        children: i.get("transactions")
-      }), e(s, {
-        className: "adyen-pe-filter-bar__header-icon",
-        variant: n.SECONDARY,
-        iconButton: !0,
-        onClick: () => a((l) => !l),
-        children: o ? e(f, {}) : e(p, {})
-      })]
-    }), o && e("div", {
-      "aria-label": i.get("filterBar"),
-      className: y("adyen-pe-filter-bar", {
-        "adyen-pe-filter-bar__content--mobile": r
-      }),
-      children: [t.children, t.canResetFilters && !!t.resetFilters && e(s, {
-        variant: n.TERTIARY,
-        onClick: t.resetFilters,
-        children: i.get("button.clearAll")
-      })]
+    i18n: e
+  } = f();
+  return t.showingFilters ? i("div", {
+    "aria-label": e.get("filterBar"),
+    className: l("adyen-pe-filter-bar", {
+      "adyen-pe-filter-bar__content--mobile": t.isMobileViewport
+    }),
+    children: [t.children, t.canResetFilters && !!t.resetFilters && i(a, {
+      variant: n.TERTIARY,
+      onClick: t.resetFilters,
+      children: e.get("button.clearAll")
     })]
-  });
-}
+  }) : null;
+}, y = B;
 export {
-  k as default
+  B as FilterBar,
+  w as FilterBarMobileSwitch,
+  y as default,
+  V as useFilterBarState
 };

package/dist/es/components/internal/FilterBar/components/FilterButton/FilterButton.js

@@ -6,9 +6,9 @@ import "./FilterButton.scss.js";
 import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { fixedForwardRef as d } from "../../../../../utils/preact/fixedForwardRef.js";
 import { parseClassName as F } from "../../../../../utils/preact/className.js";
-import { parseBooleanProp as N } from "../../../../../utils/preact/props.js";
-const g = "adyen-pe-filter-button";
-function h({
+import { parseBooleanProp as g } from "../../../../../utils/preact/props.js";
+const h = "adyen-pe-filter-button";
+function E({
   className: o,
   classNameModifiers: a = [],
   children: m,
@@ -16,24 +16,24 @@ function h({
   onClick: n,
   ...s
 }, p) {
-  const i = t(() => F("", o) || "", [o]), l = t(() => N(r), [r]), {
+  const i = t(() => F("", o) || "", [o]), l = t(() => g(r), [r]), {
     classes: u,
     click: f
-  } = c(i, a, g, l, n);
+  } = c(i, a, h, l, n);
   return e("button", {
     className: u,
     ref: p,
     onClick: f,
     ...s,
     children: e(B, {
-      el: y.SPAN,
+      el: y.DIV,
       variant: T.BODY,
       stronger: !0,
       children: m
     })
   });
 }
-const k = d(h);
+const k = d(E);
 export {
   k as default
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.js

@@ -7,15 +7,15 @@ import { jsx as D } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import F from "../BaseFilter/BaseFilter.js";
 import { isUndefined as f } from "../../../../../utils/value/is.js";
 import { EMPTY_OBJECT as O } from "../../../../../utils/value/constants.js";
-const H = ({
-  updateFilters: $,
+const G = ({
+  updateFilters: p,
   selectedCurrencies: t,
   availableCurrencies: m,
   ...y
 }) => {
   const {
     i18n: g
-  } = B(), [S, U] = E(), [M, x] = E(), h = w(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), p = L((n, o) => {
+  } = B(), [h, U] = E(), [$, x] = E(), M = w(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), S = L((n, o) => {
     const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), I = o && A ? {
       style: "currency",
       currency: A,
@@ -30,26 +30,26 @@ const H = ({
     U({
       minAmount: o,
       maxAmount: A
-    }), f(o) && f(A) && x(void 0), $({
-      minAmount: f(o) ? void 0 : String(o * T),
-      maxAmount: f(A) ? void 0 : String(A * T)
+    }), f(o) && f(A) && x(void 0), p({
+      minAmount: f(o) ? void 0 : String(Math.round(o * T)),
+      maxAmount: f(A) ? void 0 : String(Math.round(A * T))
     });
-  }, [$]);
-  if (S && (S.minAmount || S.maxAmount)) {
+  }, [p]);
+  if (h && (h.minAmount || h.maxAmount)) {
     const {
       minAmount: n,
       maxAmount: o
-    } = S ?? {};
-    !f(n) && !f(o) && n <= o ? x(`${p(n, h)} ${g.get("to").toLowerCase()} ${p(o, h)}`) : !f(n) && f(o) && n >= 0 ? x(`${g.get("from")} ${p(n, h)}`) : f(n) && !f(o) ? x(`${g.get("to")} ${p(o, h)}`) : x(void 0);
+    } = h ?? {};
+    !f(n) && !f(o) && n <= o ? x(`${S(n, M)} ${g.get("to").toLowerCase()} ${S(o, M)}`) : !f(n) && f(o) && n >= 0 ? x(`${g.get("from")} ${S(n, M)}`) : f(n) && !f(o) ? x(`${g.get("to")} ${S(o, M)}`) : x(void 0);
   }
   return D(F, {
     ...y,
-    updateFilters: $,
+    updateFilters: p,
     minAmount: y.minAmount,
     maxAmount: y.maxAmount,
     onChange: V,
-    value: M,
-    label: M || y.label,
+    value: $,
+    label: $ || y.label,
     type: "text",
     containerSize: z.MEDIUM,
     selectedCurrencies: t,
@@ -58,5 +58,5 @@ const H = ({
   });
 };
 export {
-  H as AmountFilter
+  G as AmountFilter
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,81 +1,87 @@
-import p from "../../../FormFields/InputBase.js";
+import g from "../../../FormFields/InputBase.js";
 import "./AmountFilter.scss.js";
-import { useState as A, useCallback as g, useEffect as x, useMemo as b } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as p, useCallback as x, useEffect as T, useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import h from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as T } from "./constants.js";
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { isUndefined as i } from "../../../../../utils/value/is.js";
+import { AMOUNT_MULTIPLIER as b } from "./constants.js";
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { isUndefined as m } from "../../../../../utils/value/is.js";
 import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
-const R = ({
-  onChange: l,
-  editAction: u,
-  onValueUpdated: s,
+const S = ({
+  onChange: i,
+  editAction: o,
+  onValueUpdated: u,
   selectedCurrencies: I,
   availableCurrencies: M,
-  value: y,
-  ...m
+  value: V,
+  ...l
 }) => {
   const {
-    i18n: n
-  } = h(), [e, c] = A(i(m.minAmount) ? void 0 : parseFloat(m.minAmount) / T), [t, v] = A(i(m.maxAmount) ? void 0 : parseFloat(m.maxAmount) / T), d = g(() => {
-    l({
-      minAmount: e,
-      maxAmount: t
+    i18n: r
+  } = h(), [t, c] = p(m(l.minAmount) ? void 0 : parseFloat(l.minAmount) / b), [a, d] = p(m(l.maxAmount) ? void 0 : parseFloat(l.maxAmount) / b), v = x(() => {
+    i({
+      minAmount: t,
+      maxAmount: a
     });
-  }, [t, e, l]), f = g(() => {
-    l({
+  }, [a, t, i]), f = x(() => {
+    i({
       minAmount: void 0,
       maxAmount: void 0
-    }), v(void 0), c(void 0);
-  }, [l]);
-  x(() => {
-    u === F.APPLY && d(), u === F.CLEAR && f();
-  }, [d, f, u]);
-  const o = b(() => ({
-    minAmount: e,
-    maxAmount: t
-  }), [t, e]);
-  return x(() => {
-    o.minAmount || o.maxAmount ? s(`${o.minAmount}-${o.maxAmount}`) : s(null);
-  }, [o, s]), r("div", {
+    }), d(void 0), c(void 0);
+  }, [i]);
+  T(() => {
+    o === F.APPLY && v(), o === F.CLEAR && f();
+  }, [v, f, o]);
+  const A = N(() => ({
+    minAmount: Number(t),
+    maxAmount: Number(a)
+  }), [a, t]);
+  return T(() => {
+    const {
+      maxAmount: e,
+      minAmount: s
+    } = A;
+    m(e) && m(s) || s > e ? u(null) : u(`${s}-${e}`);
+  }, [A, u]), n("div", {
     className: "adyen-pe-range-selection-filter",
-    children: [r("div", {
+    children: [n("div", {
       className: "adyen-pe-range-selection-filter__input",
-      children: [r("label", {
+      children: [n("label", {
         htmlFor: "minValue",
-        children: `${n.get("from")}:`
-      }), r(p, {
-        lang: n.locale,
+        children: `${r.get("from")}:`
+      }), n(g, {
+        "data-testid": "minValueFilter",
+        lang: r.locale,
         name: "minValue",
         type: "number",
-        value: e,
-        onInput: (a) => {
-          a.currentTarget && c(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
+        value: t,
+        onInput: (e) => {
+          e.currentTarget && c(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
         },
         min: 0,
-        isInvalid: e ? e < 0 : !1,
-        errorMessage: n.get("noNegativeNumbersAllowed")
+        isInvalid: t ? t < 0 : !1,
+        errorMessage: r.get("noNegativeNumbersAllowed")
       })]
-    }), r("div", {
+    }), n("div", {
       className: "adyen-pe-range-selection-filter__input",
-      children: [r("label", {
+      children: [n("label", {
         htmlFor: "maxValue",
-        children: `${n.get("to")}:`
-      }), r(p, {
-        lang: n.locale,
+        children: `${r.get("to")}:`
+      }), n(g, {
+        "data-testid": "maxValueFilter",
+        lang: r.locale,
         name: "maxValue",
         type: "number",
-        value: t,
-        onInput: (a) => {
-          a.currentTarget && v(a.currentTarget.value !== "" ? parseFloat(a.currentTarget.value) : void 0);
+        value: a,
+        onInput: (e) => {
+          e.currentTarget && d(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
         },
-        min: e,
-        isInvalid: !i(t) && !i(e) && t < e,
-        errorMessage: n.get("toValueShouldBeGreaterThanTheFromValue")
+        min: t,
+        isInvalid: !m(a) && !m(t) && a < t,
+        errorMessage: r.get("toValueShouldBeGreaterThanTheFromValue")
       })]
     })]
   });
 };
 export {
-  R as RangeSelection
+  S as RangeSelection
 };

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -1,4 +1,4 @@
-import { useResponsiveViewport as g, mediaQueries as V } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as g, mediaQueries as V } from "../../../../hooks/useResponsiveViewport.js";
 import Y from "../../components/FilterButton/FilterButton.js";
 import q from "../../../Popover/Popover.js";
 import { PopoverContainerVariant as z, PopoverContainerPosition as H } from "../../../Popover/types.js";

package/dist/es/components/internal/FilterBar/filters/DateFilter/DateFilterCore.js

@@ -1,25 +1,26 @@
-import k from "../../../../hooks/useTimezoneAwareDateFormatting.js";
-import { useState as p, useCallback as v, useMemo as R, useEffect as C, useRef as I } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import x from "../../../../../core/Context/useCoreContext.js";
-import { DateRangeFilterParam as E } from "./types.js";
+import B from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { useState as h, useCallback as M, useMemo as T, useEffect as E, useRef as x } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { BASE_LOCALE as L } from "../../../../../core/Localization/datetime/restamper/constants.js";
+import k from "../../../../../core/Context/useCoreContext.js";
+import { DateRangeFilterParam as b } from "./types.js";
 import "./DateFilterCore.scss.js";
 import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import V from "../BaseFilter/BaseFilter.js";
-import L from "../../../DatePicker/DatePicker.js";
-import { EMPTY_OBJECT as Y } from "../../../../../utils/value/constants.js";
-import { CommitAction as M } from "../../../../../hooks/useCommitAction/types.js";
-const B = {
+import _ from "../BaseFilter/BaseFilter.js";
+import z from "../../../DatePicker/DatePicker.js";
+import { EMPTY_OBJECT as I } from "../../../../../utils/value/constants.js";
+import { CommitAction as A } from "../../../../../hooks/useCommitAction/types.js";
+const V = {
   month: "short",
   day: "numeric",
   year: "numeric"
-}, _ = new Intl.DateTimeFormat("en-US", B), A = (s, t, n, o) => {
-  const e = n && t(n), r = o && t(o);
-  if (e && r)
-    return `${e} - ${r}`;
-  if (e)
+}, v = (s, e, n, o) => {
+  const t = n && e(n), r = o && e(o);
+  if (t && r)
+    return `${t} - ${r}`;
+  if (t)
     return s.get("filter.date.since", {
       values: {
-        date: e
+        date: t
       }
     });
   if (r)
@@ -28,114 +29,118 @@ const B = {
         date: r
       }
     });
-}, a = (s) => {
+}, i = (s) => {
   try {
     return new Date(s || "").toISOString();
   } catch {
     return "";
   }
-}, $ = (() => {
+}, Y = (() => {
   const s = ({
-    editAction: t,
+    editAction: e,
     from: n,
     to: o,
-    now: e,
+    now: t,
     onChange: r,
-    onValueUpdated: g,
+    onValueUpdated: F,
     showTimezoneInfo: w,
     selectedPresetOption: f,
-    timeRangePresetOptions: i,
+    timeRangePresetOptions: c,
     timezone: D,
-    sinceDate: c,
-    untilDate: P
+    sinceDate: m,
+    untilDate: O
   }) => {
     const {
-      i18n: y
-    } = x(), {
+      i18n: P
+    } = k(), {
       fullDateFormat: d
-    } = k(D), [F, O] = p(f), u = R(() => [new Date(n), new Date(o)], [n, o]), m = I(), T = v((l, h) => {
-      g(A(y, d, a(l), a(h)));
-    }, [y, d, g]);
-    return C(() => {
-      var l, h, b;
-      switch (t) {
-        case M.APPLY:
+    } = B(D), [g, R] = h(f), u = T(() => [new Date(n), new Date(o)], [n, o]), a = x(), y = M((l, C) => {
+      F(v(P, d, i(l), i(C)));
+    }, [P, d, F]);
+    return E(() => {
+      var l, C, p;
+      switch (e) {
+        case A.APPLY:
           r({
-            selectedPresetOption: F,
-            [E.FROM]: a((l = m.current) == null ? void 0 : l.from),
-            [E.TO]: a((h = m.current) == null ? void 0 : h.to)
+            selectedPresetOption: g,
+            [b.FROM]: i((l = a.current) == null ? void 0 : l.from),
+            [b.TO]: i((C = a.current) == null ? void 0 : C.to)
           });
           break;
-        case M.CLEAR:
-          (b = m.current) == null || b.clear(), r();
+        case A.CLEAR:
+          (p = a.current) == null || p.clear(), r();
       }
-    }, [t, r, F]), S(L, {
-      ref: m,
-      now: e,
+    }, [e, r, g]), S(z, {
+      ref: a,
+      now: t,
       originDate: u,
-      onHighlight: T,
-      onPresetOptionSelected: O,
+      onHighlight: y,
+      onPresetOptionSelected: R,
       selectedPresetOption: f,
-      timeRangePresetOptions: i,
+      timeRangePresetOptions: c,
       timezone: D,
       showTimezoneInfo: w,
-      sinceDate: a(c),
-      untilDate: a(P)
+      sinceDate: i(m),
+      untilDate: i(O)
     });
   };
-  return (t) => S(s, {
-    ...t
+  return (e) => S(s, {
+    ...e
   });
-})(), j = (s, t, n) => s.formatRange(t, n);
-function X({
+})(), $ = (s, e, n) => s.formatRange(e, n);
+function U({
   title: s,
-  from: t,
+  from: e,
   to: n,
   selectedPresetOption: o,
-  ...e
+  ...t
 }) {
   const {
     i18n: r
-  } = x(), {
-    fullDateFormat: g
-  } = k(e.timezone), [w, f] = p(), [i, D] = p(), [c, P] = p(), y = v((u) => {
+  } = k(), {
+    fullDateFormat: F
+  } = B(t.timezone), [w, f] = h(), [c, D] = h(), [m, O] = h(), P = M((u) => {
     const {
-      from: m,
-      to: T,
+      from: a,
+      to: y,
       selectedPresetOption: l
-    } = u ?? Y;
+    } = u ?? I;
     try {
-      f(w ?? l), D(a(i ?? m)), P(a(c ?? T));
+      f(w ?? l), D(i(c ?? a)), O(i(m ?? y));
     } finally {
-      e.onChange({
-        from: m,
-        to: T,
+      t.onChange({
+        from: a,
+        to: y,
         selectedPresetOption: l
       });
     }
-  }, [w, i, c, e]), [d, F] = R(() => {
-    let u = _;
+  }, [w, c, m, t]), d = T(() => r.get("rangePreset.custom"), [r]), g = T(() => {
+    const u = {
+      ...V,
+      timeZone: t.timezone
+    };
+    let a = new Intl.DateTimeFormat(L, u);
     try {
-      u = new Intl.DateTimeFormat(r.locale, B);
+      a = new Intl.DateTimeFormat(r.locale, u);
     } catch {
     }
-    return [r.get("rangePreset.custom"), u];
-  }, [r]);
-  C(() => f(o), [o]), C(() => D(a(t || Date.now())), [t]), C(() => P(a(n || Date.now())), [n]);
-  const O = R(() => o === d && i && c ? j(F, new Date(i), new Date(c)) : o ?? e.label, [d, F, i, c, o, e.label]);
-  return S(V, {
-    ...e,
-    from: t,
+    return a;
+  }, [r, t.timezone]);
+  E(() => f(o), [o]), E(() => D(i(e || Date.now())), [e]), E(() => O(i(n || Date.now())), [n]);
+  const R = T(() => o === d && c && m ? $(g, new Date(c), new Date(m)) : o ?? t.label, [d, g, c, m, o, t.label]);
+  return S(_, {
+    ...t,
+    from: e,
     to: n,
     type: "date",
-    label: O,
-    onChange: y,
-    render: $,
+    label: R,
+    onChange: P,
+    render: Y,
     selectedPresetOption: o,
-    value: A(r, g, t, n),
+    value: v(r, F, e, n),
     withContentPadding: !1
   });
 }
 export {
-  X as default
+  U as default
 };