@adyen/adyen-platform-experience-web 1.9.0 → 1.10.0

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

@@ -0,0 +1,120 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { INITIAL_FILTERS as q, TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as z, TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as H, TRANSACTION_ANALYTICS_CATEGORY as K, TRANSACTION_CATEGORIES as Q } from "../../constants.js";
+import { compareTransactionsFilters as Z } from "../utils.js";
+import { useRef as J, useState as n, useMemo as o, useCallback as W, useEffect as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useResponsiveContainer as X, containerQueries as $ } from "../../../../../hooks/useResponsiveContainer.js";
+import V from "../../../../../hooks/useBalanceAccountSelection.js";
+import _ from "./TransactionMultiSelectionFilter.js";
+import ee from "./TransactionPspReferenceFilter.js";
+import te from "../../../../../core/Context/useCoreContext.js";
+import re from "../../hooks/useCurrencySelection.js";
+import ce from "./TransactionDateFilter.js";
+import { selectionOptionsFor as P } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
+import ne from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
+import oe from "../../../../internal/FormFields/Select/Select.js";
+import { FilterBar as se } from "../../../../internal/FilterBar/FilterBar.js";
+const s = K, ve = ({
+  availableCurrencies: a,
+  balanceAccounts: B,
+  isTransactionsView: T,
+  onChange: i,
+  setInsightsCurrency: E,
+  ...w
+}) => {
+  var L;
+  const { i18n: l } = te(), c = T ? z : H, e = J({ ...q }), U = X($.down.xs), [y, Y] = n(e.current.statuses), [m, F] = n(e.current.categories), [p, f] = n(e.current.currencies), [A, R] = n(e.current.createdDate), [S, I] = n(e.current.paymentPspReference), [r, O] = n(e.current.balanceAccount), u = o(
+    () => ({ balanceAccount: r, categories: m, createdDate: A, currencies: p, paymentPspReference: S, statuses: y }),
+    [r, m, A, p, S, y]
+  ), D = o(() => Z(u, e.current), [u]), G = W(() => {
+    Y(e.current.statuses), F(e.current.categories), f(e.current.currencies), R(e.current.createdDate), I(e.current.paymentPspReference), O(e.current.balanceAccount);
+  }, []), x = o(() => P(Q), []), k = o(() => l.get("transactions.overview.filters.types.category.label"), [l]), M = o(() => P(a ?? []), [a]), d = o(() => l.get("transactions.overview.filters.types.currency.label"), [l]), v = "Currency filter", { resetBalanceAccountSelection: ae, ...b } = V({
+    allowAllSelection: !1,
+    onUpdateSelection: O,
+    balanceAccounts: B,
+    eventCategory: s,
+    eventSubCategory: c
+  }), { activeCurrency: N, currencySelectionOptions: g, onCurrencySelection: j } = re({
+    eventLabel: v,
+    onUpdateSelection: E,
+    selectedCurrency: r == null ? void 0 : r.defaultCurrencyCode,
+    availableCurrencies: a,
+    eventCategory: s,
+    eventSubCategory: c
+  });
+  return C(() => f(e.current.currencies), [a]), C(() => i == null ? void 0 : i(u), [i, u]), C(() => {
+    !e.current.balanceAccount && r && (e.current.balanceAccount = r);
+  }, [r]), /* @__PURE__ */ t(
+    se,
+    {
+      ...w,
+      ariaLabelKey: "transactions.overview.filters.label",
+      canResetFilters: D && !1,
+      resetFilters: G,
+      children: [
+        /* @__PURE__ */ t(ne, { ...b }),
+        /* @__PURE__ */ t(
+          ce,
+          {
+            createdDate: A,
+            eventCategory: s,
+            eventSubCategory: c,
+            setCreatedDate: R,
+            timezone: (L = b.activeBalanceAccount) == null ? void 0 : L.timeZone
+          }
+        ),
+        T ? /* @__PURE__ */ t(h, { children: [
+          /* @__PURE__ */ t(
+            _,
+            {
+              eventLabel: "Category filter",
+              eventCategory: s,
+              eventSubCategory: c,
+              placeholder: k,
+              selectionOptions: x,
+              selection: m,
+              onUpdateFilter: F
+            }
+          ),
+          /* @__PURE__ */ t(
+            _,
+            {
+              eventCategory: s,
+              eventSubCategory: c,
+              eventLabel: v,
+              placeholder: d,
+              selectionOptions: M,
+              selection: p,
+              onUpdateFilter: f
+            }
+          ),
+          /* @__PURE__ */ t(
+            ee,
+            {
+              eventCategory: s,
+              eventSubCategory: c,
+              onChange: I,
+              value: S
+            }
+          )
+        ] }) : /* @__PURE__ */ t(h, { children: g.length > 1 ? /* @__PURE__ */ t(
+          oe,
+          {
+            filterable: !1,
+            multiSelect: !1,
+            items: g,
+            onChange: j,
+            selected: N,
+            "aria-label": d,
+            placeholder: N || d,
+            showOverlay: U,
+            withoutCollapseIndicator: !0
+          }
+        ) : null })
+      ]
+    }
+  );
+};
+export {
+  ve as default
+};

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionMultiSelectionFilter.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import l from "../../../../../hooks/useMultiSelectionFilterProps.js";
+import s from "../MultiSelectionFilter/MultiSelectionFilter.js";
+const m = ({
+  placeholder: t,
+  ...e
+}) => {
+  const { selection: o, ...r } = l(e);
+  return /* @__PURE__ */ i(s, { ...r, placeholder: t, selection: o });
+};
+export {
+  m as default
+};

package/dist/es/components/external/TransactionsOverview/components/TransactionFilters/TransactionPspReferenceFilter.js

@@ -0,0 +1,81 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as T, useMemo as l, useRef as g, useCallback as P, useEffect as A } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TypographyVariant as x, TypographyElement as F } from "../../../../internal/Typography/types.js";
+import k from "../../../../../hooks/useAnalytics/useFilterAnalyticsEvent.js";
+import S from "../../../../../core/Context/useCoreContext.js";
+import q from "../../../../internal/Typography/Typography.js";
+import B from "../../../../internal/FormFields/InputBase.js";
+/* empty css                                   */
+import L from "../../../../internal/FilterBar/filters/TextFilter/TextFilter.js";
+import { uniqueId as v } from "../../../../../utils/random/uniqueId.js";
+import { CommitAction as E } from "../../../../../hooks/useCommitAction/types.js";
+const R = "adyen-pe-psp-reference-filter", h = {
+  root: R,
+  input: R + "__input",
+  title: R + "__title"
+}, V = ({ eventCategory: p, eventSubCategory: c, onChange: a, value: t }) => {
+  const { i18n: u } = S(), { logEvent: e } = k({ category: p, subCategory: c, label: "PSP reference filter" }), [s, n] = T(!1), f = l(() => u.get("transactions.overview.filters.types.paymentPspReference.label"), [u]), o = g(t), m = P(
+    (i) => {
+      o.current !== i && (o.current = i, e == null || e("update", null), a == null || a(i));
+    },
+    [e, a]
+  ), b = P(() => n(!0), []);
+  return A(() => {
+    s && (n(!1), o.current !== t && (e == null || e("reset")));
+  }, [s, t, e]), /* @__PURE__ */ r(
+    L,
+    {
+      "aria-label": f,
+      label: t ?? f,
+      onChange: m,
+      onResetAction: b,
+      value: t,
+      render: (i) => /* @__PURE__ */ r(V.EditModal, { ...i }),
+      name: "pspReference"
+    }
+  );
+};
+V.EditModal = ({
+  editAction: p,
+  onChange: c,
+  onValueUpdated: a,
+  name: t,
+  type: u,
+  value: e
+}) => {
+  const { i18n: s } = S(), [n, f] = T(e), o = g(null), m = l(v, []), b = l(v, []), i = l(() => s.get("transactions.overview.filters.types.paymentPspReference.label"), [s]), C = l(() => s.get("transactions.overview.filters.types.paymentPspReference.placeholder"), [s]), _ = (w) => {
+    const d = w.currentTarget, I = d.selectionEnd, y = d.value.replace(/[^a-z\d]/gi, "").slice(0, 16).toUpperCase();
+    d.value = y, d.setSelectionRange(I, I), y !== n && (f(y || void 0), a(y || void 0));
+  };
+  return A(() => {
+    switch (p) {
+      case E.APPLY:
+        c(n);
+        break;
+      case E.CLEAR:
+        c();
+        break;
+    }
+  }, [p, c, n]), A(() => {
+    o.current && o.current.focus();
+  }, []), /* @__PURE__ */ r("div", { className: h.root, children: [
+    /* @__PURE__ */ r("div", { className: h.title, children: /* @__PURE__ */ r("label", { id: b, htmlFor: m, children: /* @__PURE__ */ r(q, { el: F.DIV, variant: x.BODY, strongest: !0, children: i }) }) }),
+    /* @__PURE__ */ r("div", { className: h.input, children: /* @__PURE__ */ r(
+      B,
+      {
+        autoComplete: "off",
+        uniqueId: m,
+        ref: o,
+        placeholder: C,
+        "data-testid": t,
+        name: t,
+        type: u,
+        value: n,
+        onInput: _
+      }
+    ) })
+  ] });
+};
+export {
+  V as default
+};

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

@@ -2,21 +2,21 @@ import { jsx as x } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 import V from "../../../../../core/Context/useCoreContext.js";
 import { useRef as t, useMemo as h } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { SummaryItem as C } from "../SummaryItem/SummaryItem.js";
-const K = ({
+const R = ({
   total: e,
   hiddenField: n,
-  isHeader: o = !1,
-  showLabelUnderline: i = !1,
-  isSkeleton: r = !1,
-  isLoading: a = !1,
-  widths: l,
-  onWidthsSet: c,
-  expensesElemId: u,
-  incomingsElemId: g
+  isHeader: r = !1,
+  showLabelUnderline: a = !1,
+  isSkeleton: c = !1,
+  isLoading: l = !1,
+  widths: u,
+  onWidthsSet: g,
+  expensesElemId: o,
+  incomingsElemId: i
 }) => {
   const { i18n: s } = V(), m = t(null), f = t(null), p = t(null), y = h(() => {
     const b = {
-      elemId: g,
+      elemId: i,
       labelKey: "transactions.overview.totals.tags.incoming",
       ref: m,
       skeletonWidth: 80,
@@ -26,7 +26,7 @@ const K = ({
         return `${s.get(this.labelKey)}: ${this.getValue()}`;
       }
     }, v = {
-      elemId: u,
+      elemId: o,
       labelKey: "transactions.overview.totals.tags.outgoing",
       ref: f,
       skeletonWidth: 80,
@@ -46,21 +46,21 @@ const K = ({
         getValue: () => e == null ? void 0 : e.currency
       }
     ];
-  }, [e, n, s]);
+  }, [i, o, n, e, s]);
   return /* @__PURE__ */ x(
     C,
     {
-      showLabelUnderline: i,
+      showLabelUnderline: a,
       isEmpty: !e,
       columnConfigs: y,
-      isHeader: o,
-      isSkeletonVisible: r,
-      isLoading: a,
-      widths: l,
-      onWidthsSet: c
+      isHeader: r,
+      isSkeletonVisible: c,
+      isLoading: l,
+      widths: u,
+      onWidthsSet: g
     }
   );
 };
 export {
-  K as TransactionTotalItem
+  R as TransactionTotalItem
 };

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

@@ -1,75 +1,79 @@
 import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as h } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useState as $, useMemo as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import w from "../../../../../core/Context/useCoreContext.js";
-import y from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { useState as w, useMemo as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import y from "../../../../../core/Context/useCoreContext.js";
+import $ from "../../../../internal/ExpandableCard/ExpandableCard.js";
 import { TransactionTotalItem as v } from "../TransactionTotalItem/TransactionTotalItem.js";
-import { useMaxWidthsState as M } from "../../hooks/useMaxWidths.js";
-/* empty css                       */
-import { Fragment as C } from "../../../../../external/preact/dist/preact.module.js";
+import { useMaxWidthsState as C } from "../../hooks/useMaxWidths.js";
+import { Fragment as M } from "../../../../../external/preact/dist/preact.module.js";
 import { uniqueId as I } from "../../../../../utils/random/uniqueId.js";
-const B = h(({ totals: p, isLoading: o, hiddenField: n, fullWidth: x, ...E }) => {
-  const { i18n: t } = w(), [m, a] = M(), [l, c] = $(!1), d = i(() => t.get("transactions.overview.totals.currency.label"), [t]), [s, ...u] = i(() => p.map((e) => (e.key = `${e.currency}-${Math.random()}`, e.expensesElemId = I("elem"), e.incomingsElemId = I("elem"), e)), [p]), f = i(() => {
-    switch (n) {
+const z = h(({ totals: p, isLoading: o, hiddenField: t, fullWidth: x, ...E }) => {
+  const { i18n: n } = y(), [m, a] = C(), [l, c] = w(!1), d = i(() => n.get("transactions.overview.totals.currency.label"), [n]), [e, ...u] = i(() => p.map((s) => ({
+    ...s,
+    key: s.currency,
+    expensesElemId: I("elem"),
+    incomingsElemId: I("elem")
+  })), [p]), f = i(() => {
+    switch (t) {
       case "expenses":
-        return t.get("transactions.overview.totals.lists.incoming");
+        return n.get("transactions.overview.totals.lists.incoming");
       case "incomings":
-        return t.get("transactions.overview.totals.lists.outgoing");
+        return n.get("transactions.overview.totals.lists.outgoing");
       default:
-        return t.get("transactions.overview.totals.lists.default");
+        return n.get("transactions.overview.totals.lists.default");
     }
-  }, [t, n]), g = i(
+  }, [n, t]), g = i(
     () => /* @__PURE__ */ r(
       "div",
       {
         role: "listitem",
-        "aria-label": s ? `${d}: ${s.currency}` : void 0,
-        "aria-describedby": s ? `${s.incomingsElemId} ${s.expensesElemId}` : void 0,
+        "aria-label": e ? `${d}: ${e.currency}` : void 0,
+        "aria-describedby": e ? `${e.incomingsElemId} ${e.expensesElemId}` : void 0,
         children: /* @__PURE__ */ r(
           v,
           {
             showLabelUnderline: l,
-            total: s,
-            hiddenField: n,
+            total: e,
+            hiddenField: t,
             widths: m,
             isHeader: !0,
             isSkeleton: o,
             isLoading: o,
             onWidthsSet: a,
-            expensesElemId: s == null ? void 0 : s.expensesElemId,
-            incomingsElemId: s == null ? void 0 : s.incomingsElemId
+            expensesElemId: e == null ? void 0 : e.expensesElemId,
+            incomingsElemId: e == null ? void 0 : e.incomingsElemId
           }
         )
       }
     ),
-    [l, s, n, m, o, a, d]
-  ), b = i(() => !o && u.length ? /* @__PURE__ */ r(C, { children: u.map((e) => /* @__PURE__ */ r(
+    [l, e, t, m, o, a, d]
+  ), b = i(() => !o && u.length ? /* @__PURE__ */ r(M, { children: u.map((s) => /* @__PURE__ */ r(
     "div",
     {
       role: "listitem",
-      "aria-label": `${d}: ${e.currency}`,
-      "aria-describedby": `${e.incomingsElemId} ${e.expensesElemId}`,
+      "aria-label": `${d}: ${s.currency}`,
+      "aria-describedby": `${s.incomingsElemId} ${s.expensesElemId}`,
       children: /* @__PURE__ */ r(
         v,
         {
           showLabelUnderline: l,
-          total: e,
-          hiddenField: n,
+          total: s,
+          hiddenField: t,
           widths: m,
           onWidthsSet: a,
-          expensesElemId: e.expensesElemId,
-          incomingsElemId: e.incomingsElemId
+          expensesElemId: s.expensesElemId,
+          incomingsElemId: s.incomingsElemId
         }
       )
     },
-    e.key
-  )) }) : void 0, [o, u, l, n, m, a, d]);
+    s.key
+  )) }) : void 0, [o, u, l, t, m, a, d]);
   return /* @__PURE__ */ r(
-    y,
+    $,
     {
-      renderContent: ({ collapsibleContent: e }) => /* @__PURE__ */ r("div", { role: "list", "aria-label": f, children: [
+      renderContent: ({ collapsibleContent: s }) => /* @__PURE__ */ r("div", { role: "list", "aria-label": f, children: [
         g,
-        e
+        s
       ] }),
       fullWidth: x,
       onMouseEnter: () => c(!0),
@@ -82,5 +86,5 @@ const B = h(({ totals: p, isLoading: o, hiddenField: n, fullWidth: x, ...E }) =>
   );
 });
 export {
-  B as TotalsCard
+  z as TotalsCard
 };

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

@@ -1,81 +1,44 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as T, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../../../core/Context/useCoreContext.js";
-import { useFetch as k } from "../../../../../hooks/useFetch.js";
-import { BASE_CLASS as q, ITEM_CLASS as x } from "./constants.js";
-import { memo as w } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveContainer as L, containerQueries as N } from "../../../../../hooks/useResponsiveContainer.js";
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as d } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { TotalsCard as a } from "./TotalsCard.js";
+import { BASE_CLASS as c, ITEM_CLASS as n } from "./constants.js";
+import { useResponsiveContainer as t, containerQueries as l } from "../../../../../hooks/useResponsiveContainer.js";
+import f from "../../../../../core/Context/useCoreContext.js";
 /* empty css                       */
-import { TotalsCard as p } from "./TotalsCard.js";
-import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
-import { useConfigContext as B } from "../../../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as j } from "../../../../../utils/value/constants.js";
-const U = w(
-  ({
-    availableCurrencies: i,
-    isAvailableCurrenciesFetching: y,
-    balanceAccountId: e,
-    createdSince: f,
-    createdUntil: c,
-    categories: d,
-    statuses: g,
-    maxAmount: C,
-    minAmount: u,
-    currencies: h,
-    fullWidth: n
-  }) => {
-    const { i18n: a } = b(), { getTransactionTotals: s } = B().endpoints, F = T(async () => s == null ? void 0 : s(j, {
-      query: {
-        createdSince: f,
-        createdUntil: c,
-        categories: d,
-        statuses: g,
-        maxAmount: C,
-        minAmount: u,
-        currencies: h,
-        balanceAccountId: e
+import { Fragment as p } from "../../../../../external/preact/dist/preact.module.js";
+const L = d(({ loadingTotals: e, totals: o }) => {
+  const { i18n: r } = f(), m = t(l.only.xs), s = t(l.down.sm);
+  return /* @__PURE__ */ i("div", { className: c, children: m ? /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
+      a,
+      {
+        "aria-label": r.get("transactions.overview.totals.labels.incoming"),
+        totals: o,
+        isLoading: e,
+        hiddenField: "expenses",
+        fullWidth: s
       }
-    }), [e, d, f, c, h, s, C, u, g]), { data: o, isFetching: E } = k({
-      fetchOptions: S(() => ({ enabled: !!e && !!s }), [e, s]),
-      queryFn: F
-    }), m = !e || E || y, l = T(() => {
-      if (!i || !o)
-        return o == null ? void 0 : o.data;
-      const v = i.map((r) => o.data.find((O) => O.currency === r) || { currency: r, incomings: 0, expenses: 0 });
-      return v.concat(o.data.filter((r) => !v.includes(r)));
-    }, [i, o])() ?? [], M = L(N.only.xs);
-    return /* @__PURE__ */ t("div", { className: q, children: M ? /* @__PURE__ */ t(_, { children: [
-      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
-        p,
-        {
-          "aria-label": a.get("transactions.overview.totals.labels.incoming"),
-          totals: l,
-          isLoading: m,
-          hiddenField: "expenses",
-          fullWidth: n
-        }
-      ) }),
-      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
-        p,
-        {
-          "aria-label": a.get("transactions.overview.totals.labels.outgoing"),
-          totals: l,
-          isLoading: m,
-          hiddenField: "incomings",
-          fullWidth: n
-        }
-      ) })
-    ] }) : /* @__PURE__ */ t(
-      p,
+    ) }),
+    /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
+      a,
       {
-        "aria-label": a.get("transactions.overview.totals.labels.default"),
-        totals: l,
-        isLoading: m,
-        fullWidth: n
+        "aria-label": r.get("transactions.overview.totals.labels.outgoing"),
+        totals: o,
+        isLoading: e,
+        hiddenField: "incomings",
+        fullWidth: s
       }
-    ) });
-  }
-);
+    ) })
+  ] }) : /* @__PURE__ */ i(
+    a,
+    {
+      "aria-label": r.get("transactions.overview.totals.labels.default"),
+      totals: o,
+      isLoading: e,
+      fullWidth: s
+    }
+  ) });
+});
 export {
-  U as default
+  L as default
 };