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

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

@@ -1,288 +1,104 @@
-import { jsx as l } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { DataDetailsModal as Ie } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
-import { TransactionsTable as Re, TRANSACTION_FIELDS as _e } from "../TransactionsTable/TransactionsTable.js";
-import De from "../../../../../core/Context/analytics/useAnalyticsContext.js";
-import be from "../../../../../hooks/useBalanceAccountSelection.js";
-import ge from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
-import { FilterParam as r } from "../../../../types.js";
-import he from "../../../../../hooks/useModalDetails/useModalDetails.js";
-import Oe from "../../../../../core/Context/useCoreContext.js";
-import { useCallback as A, useMemo as c, useState as P, useEffect as u } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { LIMIT_OPTIONS as Ue, DEFAULT_PAGE_LIMIT as ve } from "../../../../internal/Pagination/constants.js";
-import Le from "../TransactionTotals/TransactionTotals.js";
-import { Balances as we } from "../Balances/Balances.js";
-import xe from "../../../../../hooks/useDefaultOverviewFilterParams.js";
-import Xe from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
-import { AmountFilter as ke } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
-import { MAX_TRANSACTIONS_DATE_RANGE_MONTHS as Ge, BASE_CLASS as Pe, SUMMARY_CLASS as $e, SUMMARY_ITEM_CLASS as $, BASE_CLASS_DETAILS as Ke } from "./constants.js";
-import { useResponsiveContainer as Ve, containerQueries as He } from "../../../../../hooks/useResponsiveContainer.js";
-import { useCustomColumnsData as We } from "../../../../../hooks/useCustomColumnsData.js";
-import { hasCustomField as Ye } from "../../../../utils/customData/hasCustomField.js";
-import { mergeRecords as je } from "../../../../utils/customData/mergeRecords.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import I from "classnames";
+import H from "../../hooks/useTransactionsList.js";
+import W from "../../hooks/useTransactionsTotals.js";
+import j from "../../../../../hooks/useAccountBalances.js";
+import k from "../../../../../core/Context/useCoreContext.js";
+import G from "./TransactionsOverviewList.js";
+import K from "./TransactionsOverviewInsights.js";
+import q from "../TransactionFilters/TransactionFilters.js";
+import D from "../TransactionsExport/TransactionsExport.js";
+import J from "../../../../internal/SegmentedControl/SegmentedControl.js";
+import { INITIAL_FILTERS as P, TRANSACTIONS_VIEW_TABS as C, classes as a } from "../../constants.js";
+import { TransactionsView as B } from "../../types.js";
+import { useRef as Q, useState as u, useMemo as p, useEffect as U } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { compareTransactionsFilters as X } from "../utils.js";
 /* empty css                          */
-import Qe from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import { useFilterBarState as Ze, FilterBarMobileSwitch as Je, FilterBar as qe } from "../../../../internal/FilterBar/FilterBar.js";
-import Be from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import K from "../MultiSelectionFilter/MultiSelectionFilter.js";
-import { useConfigContext as ze } from "../../../../../core/ConfigContext/context.js";
-import { listFrom as C } from "../../../../../utils/collection/main.js";
-import { isUndefined as V, isFunction as et } from "../../../../../utils/value/is.js";
-import { Header as tt } from "../../../../internal/Header/Header.js";
-import { hasOwnProperty as H } from "../../../../../utils/struct/property.js";
-const Lt = ({
-  onFiltersChanged: S,
-  balanceAccounts: y,
-  allowLimitSelection: I = !0,
-  preferredLimit: W = ve,
-  onRecordSelection: R,
-  showDetails: _,
-  isLoadingBalanceAccount: Y,
-  onContactSupport: j,
-  hideTitle: Q,
-  dataCustomization: n
+import { Fragment as d } from "../../../../../external/preact/dist/preact.module.js";
+import { useFilterBarState as Y, FilterBarMobileSwitch as Z } from "../../../../internal/FilterBar/FilterBar.js";
+import { Header as $ } from "../../../../internal/Header/Header.js";
+const Sr = ({
+  onFiltersChanged: F,
+  balanceAccounts: h,
+  allowLimitSelection: N,
+  preferredLimit: R,
+  onRecordSelection: b,
+  showDetails: x,
+  isLoadingBalanceAccount: y,
+  onContactSupport: E,
+  hideTitle: A,
+  dataCustomization: T
 }) => {
-  var w, x, X, k;
-  const { i18n: T } = Oe(), { getTransactions: E } = ze().endpoints, { activeBalanceAccount: t, balanceAccountSelectionOptions: Z, onBalanceAccountSelection: J } = be(y), { defaultParams: p, nowTimestamp: N, refreshNowTimestamp: F } = xe("transactions", t), i = De(), q = A(
-    async ({ balanceAccount: e, ...o }, a) => E({ signal: a, errorLevel: "error" }, {
-      query: {
-        ...o,
-        statuses: C(o[r.STATUSES]),
-        categories: C(o[r.CATEGORIES]),
-        currencies: C(o[r.CURRENCIES]),
-        createdSince: o[r.CREATED_SINCE] ?? p.current.defaultFilterParams[r.CREATED_SINCE],
-        createdUntil: o[r.CREATED_UNTIL] ?? p.current.defaultFilterParams[r.CREATED_UNTIL],
-        sortDirection: "desc",
-        balanceAccountId: (t == null ? void 0 : t.id) ?? "",
-        minAmount: V(o.minAmount) ? void 0 : parseFloat(o.minAmount),
-        maxAmount: V(o.maxAmount) ? void 0 : parseFloat(o.maxAmount)
-      }
-    }),
-    [t == null ? void 0 : t.id, p, E]
-  ), D = Ze(), B = c(() => et(S) ? S : void 0, [S]), z = c(() => I ? Ue : void 0, [I]), { canResetFilters: ee, error: te, fetching: re, filters: s, limit: oe, limitOptions: ie, records: b, resetFilters: rt, updateFilters: d, updateLimit: ne, ...se } = Qe({
-    fetchRecords: q,
-    dataField: "data",
-    filterParams: p.current.defaultFilterParams,
-    initialFiltersSameAsDefault: !0,
-    onFiltersChanged: B,
-    preferredLimit: W,
-    preferredLimitOptions: z,
-    enabled: !!(t != null && t.id) && !!E
-  }), [f, g] = P([]), [le, ae] = P(!1), ce = A((e, o) => {
-    g(e), ae(o);
-  }, []), { categoriesFilter: h, currenciesFilter: O, statusesFilter: M } = Xe(
-    {
-      filters: s,
-      updateFilters: (e) => {
-        var o, a;
-        H(e, "categories") && e.categories !== s[r.CATEGORIES] && ((o = i.addModifyFilterEvent) == null || o.call(i, {
-          actionType: "update",
-          label: "Category filter",
-          value: e[r.CATEGORIES],
-          category: "Transaction component"
-        })), H(e, "currencies") && e.currencies !== s[r.CURRENCIES] && ((a = i.addModifyFilterEvent) == null || a.call(i, {
-          actionType: "update",
-          label: "Currency filter",
-          value: e[r.CURRENCIES],
-          category: "Transaction component"
-        })), d(e);
+  const c = Q(P), l = Y(), [t, L] = u(c.current), [m, O] = u(B.TRANSACTIONS), [V, M] = u(), { balanceAccount: e } = t, { isMobileContainer: s } = l, { i18n: v } = k(), i = m !== B.INSIGHTS, f = p(
+    () => i && !!(e != null && e.id) && X(t, c.current),
+    [i, e, t]
+  ), n = j({ balanceAccount: e }), o = H({
+    fetchEnabled: f,
+    allowLimitSelection: N,
+    dataCustomization: T,
+    filters: t,
+    onFiltersChanged: F,
+    preferredLimit: R
+  }), S = W({
+    currencies: n.currencies,
+    fetchEnabled: !!(e != null && e.id),
+    loadingBalances: n.isWaiting,
+    filters: t
+  }), g = p(
+    () => i ? /* @__PURE__ */ r(D, { disabled: o.records.length < 1 || o.fetching, filters: t }) : null,
+    [t, i, o.fetching, o.records]
+  ), w = p(
+    () => C.length > 1 ? /* @__PURE__ */ r(
+      J,
+      {
+        "aria-label": v.get("transactions.overview.viewSelect.a11y.label"),
+        activeItem: m,
+        items: C,
+        onChange: ({ id: _ }) => O(_)
       }
-    },
-    f
+    ) : null,
+    [m, v]
   );
-  u(() => {
-    var e;
-    (e = i.addEvent) == null || e.call(i, "Landed on page", {
-      category: "PIE components",
-      subCategory: "Transactions overview"
-    });
-  }, [i]), u(() => {
-    g(void 0), d({
-      [r.BALANCE_ACCOUNT]: t == null ? void 0 : t.id,
-      [r.CURRENCIES]: void 0
-    });
-  }, [d, t == null ? void 0 : t.id]), u(() => {
-    F();
-  }, [s, F]), u(() => {
-    M.updateSelection({ target: { value: "Booked", name: "status" } });
-  }, [M]);
-  const U = Ve(He.down.sm), me = !!f && f.length > 1, v = c(
-    () => ({
-      showDetails: _ ?? !0,
-      callback: R
-    }),
-    [_, R]
-  ), de = c(() => ({ transaction: v }), [v]), fe = A(
-    ({ records: e, retrievedData: o }) => je(e, o, (a, G) => a.id === G.id),
-    []
-  ), pe = c(() => {
-    var e;
-    return Ye((e = n == null ? void 0 : n.list) == null ? void 0 : e.fields, _e);
-  }, [(w = n == null ? void 0 : n.list) == null ? void 0 : w.fields]), { customRecords: Ae, loadingCustomRecords: Te } = We({
-    records: b,
-    hasCustomColumn: pe,
-    onDataRetrieve: (x = n == null ? void 0 : n.list) == null ? void 0 : x.onDataRetrieve,
-    mergeCustomData: fe
-  }), { updateDetails: L, resetDetails: ue, selectedDetail: Ce } = he(de), Se = A(
-    ({ id: e, category: o }) => {
-      var a;
-      o && ((a = i.addEvent) == null || a.call(i, "Viewed transaction details", {
-        transactionType: o,
-        category: "Transaction component",
-        subCategory: "Transaction details"
-      })), L({
-        selection: {
-          type: "transaction",
-          data: e,
-          balanceAccount: t || ""
-        },
-        modalSize: "small"
-      }).callback({ id: e });
-    },
-    [t, L, i]
-  ), m = A(
-    (e) => {
-      var o;
-      (o = i.addModifyFilterEvent) == null || o.call(i, {
-        actionType: "reset",
-        label: e,
-        category: "Transaction component"
-      });
-    },
-    [i]
-  ), Ee = c(() => m.bind(null, "Amount filter"), [m]), Ne = c(() => m.bind(null, "Date filter"), [m]), Fe = c(() => m.bind(null, "Currency filter"), [m]), Me = c(() => m.bind(null, "Category filter"), [m]), ye = c(() => {
-    const e = new Date(N);
-    return e.setMonth(e.getMonth() - Ge), e.toString();
-  }, [N]);
-  return /* @__PURE__ */ l("div", { className: Pe, children: [
-    /* @__PURE__ */ l(tt, { hideTitle: Q, titleKey: "transactions.overview.title", children: /* @__PURE__ */ l(Je, { ...D }) }),
-    /* @__PURE__ */ l(qe, { ...D, ariaLabelKey: "transactions.overview.filters.label", children: [
-      /* @__PURE__ */ l(
-        Be,
-        {
-          activeBalanceAccount: t,
-          balanceAccountSelectionOptions: Z,
-          onBalanceAccountSelection: J
-        }
-      ),
-      /* @__PURE__ */ l(
-        ge,
-        {
-          canResetFilters: ee,
-          defaultParams: p,
-          filters: s,
-          nowTimestamp: N,
-          refreshNowTimestamp: F,
-          sinceDate: ye,
-          timezone: t == null ? void 0 : t.timeZone,
-          updateFilters: (e) => {
-            var o;
-            ((e == null ? void 0 : e.createdSince) !== s[r.CREATED_SINCE] || (e == null ? void 0 : e.createdUntil) !== s[r.CREATED_UNTIL]) && ((o = i.addModifyFilterEvent) == null || o.call(i, {
-              actionType: "update",
-              label: "Date filter",
-              category: "Transaction component",
-              value: `${e[r.CREATED_SINCE]},${e[r.CREATED_UNTIL]}`
-            })), d(e);
-          },
-          onResetAction: Ne
-        }
-      ),
-      /* @__PURE__ */ l(
-        K,
-        {
-          ...h,
-          onResetAction: Me,
-          placeholder: T.get("transactions.overview.filters.types.category.label")
-        }
-      ),
-      /* @__PURE__ */ l(
-        ke,
+  return U(() => {
+    f && (c.current = t);
+  }, [f, t]), /* @__PURE__ */ r("div", { className: I(a.root, { [a.rootSmall]: s }), children: [
+    /* @__PURE__ */ r($, { hideTitle: A, titleKey: "transactions.overview.title", children: /* @__PURE__ */ r("div", { className: I({ [a.filterBarSmall]: s }), children: [
+      s && g,
+      /* @__PURE__ */ r(Z, { ...l }),
+      !s && /* @__PURE__ */ r(d, { children: w })
+    ] }) }),
+    s && /* @__PURE__ */ r(d, { children: w }),
+    /* @__PURE__ */ r("div", { role: "toolbar", className: a.toolbar, children: [
+      /* @__PURE__ */ r(
+        q,
         {
-          availableCurrencies: f,
-          selectedCurrencies: C(s[r.CURRENCIES]),
-          name: T.get("transactions.overview.filters.types.amount.label"),
-          label: T.get("transactions.overview.filters.types.amount.label"),
-          minAmount: s[r.MIN_AMOUNT],
-          maxAmount: s[r.MAX_AMOUNT],
-          updateFilters: (e) => {
-            var a;
-            ((e == null ? void 0 : e.maxAmount) || (e == null ? void 0 : e.minAmount)) && ((e == null ? void 0 : e.maxAmount) !== s[r.MAX_AMOUNT] || (e == null ? void 0 : e.minAmount) !== s[r.MIN_AMOUNT]) && ((a = i.addModifyFilterEvent) == null || a.call(i, {
-              actionType: "update",
-              label: "Amount filter",
-              category: "Transaction component",
-              value: `${e[r.MIN_AMOUNT]},${e[r.MAX_AMOUNT]}`
-            })), d(e);
-          },
-          onChange: d,
-          onResetAction: Ee
+          ...l,
+          availableCurrencies: n.currencies,
+          balanceAccounts: h,
+          isTransactionsView: i,
+          setInsightsCurrency: M,
+          onChange: L
         }
       ),
-      /* @__PURE__ */ l(
-        K,
-        {
-          ...O,
-          onResetAction: Fe,
-          placeholder: T.get("transactions.overview.filters.types.currency.label")
-        }
-      )
-    ] }),
-    /* @__PURE__ */ l("div", { className: $e, children: [
-      /* @__PURE__ */ l("div", { className: $, children: /* @__PURE__ */ l(
-        Le,
-        {
-          availableCurrencies: f,
-          isAvailableCurrenciesFetching: le,
-          balanceAccountId: t == null ? void 0 : t.id,
-          statuses: M.selection,
-          categories: h.selection,
-          createdUntil: s[r.CREATED_UNTIL],
-          createdSince: s[r.CREATED_SINCE],
-          currencies: O.selection,
-          minAmount: s[r.MIN_AMOUNT] ? parseFloat(s[r.MIN_AMOUNT]) : void 0,
-          maxAmount: s[r.MAX_AMOUNT] ? parseFloat(s[r.MAX_AMOUNT]) : void 0,
-          fullWidth: U
-        }
-      ) }),
-      /* @__PURE__ */ l("div", { className: $, children: /* @__PURE__ */ l(
-        we,
-        {
-          balanceAccountId: t == null ? void 0 : t.id,
-          onCurrenciesChange: ce,
-          defaultCurrencyCode: t == null ? void 0 : t.defaultCurrencyCode,
-          fullWidth: U
-        }
-      ) })
+      !s && /* @__PURE__ */ r(d, { children: g })
     ] }),
-    /* @__PURE__ */ l(
-      Ie,
+    i ? /* @__PURE__ */ r(
+      G,
       {
-        ariaLabelKey: "transactions.details.title",
-        dataCustomization: n == null ? void 0 : n.details,
-        selectedDetail: Ce,
-        resetDetails: ue,
-        className: Ke,
-        children: /* @__PURE__ */ l(
-          Re,
-          {
-            activeBalanceAccount: t,
-            availableCurrencies: f,
-            error: te,
-            hasMultipleCurrencies: me,
-            limit: oe,
-            limitOptions: ie,
-            loading: re || Y || !y || Te,
-            onContactSupport: j,
-            onLimitSelection: ne,
-            onRowClick: Se,
-            showPagination: !0,
-            transactions: (X = n == null ? void 0 : n.list) != null && X.onDataRetrieve ? Ae : b,
-            customColumns: (k = n == null ? void 0 : n.list) == null ? void 0 : k.fields,
-            ...se
-          }
-        )
+        accountBalancesResult: n,
+        balanceAccount: e,
+        balanceAccounts: h,
+        dataCustomization: T,
+        isLoadingBalanceAccount: y,
+        onContactSupport: E,
+        onRecordSelection: b,
+        showDetails: x,
+        transactionsListResult: o,
+        transactionsTotalsResult: S
       }
-    )
+    ) : /* @__PURE__ */ r(K, { currency: V, transactionsTotalsResult: S })
   ] });
 };
 export {
-  Lt as TransactionsOverview
+  Sr as TransactionsOverview
 };

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

@@ -0,0 +1,15 @@
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as n, TRANSACTION_ANALYTICS_CATEGORY as T } from "../../constants.js";
+import { useDurationEvent as A } from "../../../../../hooks/useAnalytics/useDurationEvent.js";
+import { useLandedPageEvent as m } from "../../../../../hooks/useAnalytics/useLandedPageEvent.js";
+import p from "../InsightsTotals/InsightsTotals.js";
+const t = {
+  category: T,
+  subCategory: n
+}, N = ({ currency: o, transactionsTotalsResult: r }) => {
+  const { isWaiting: s, totalsLookup: a, error: e } = r;
+  return m(t), A(t), /* @__PURE__ */ i(p, { currency: o, loadingTotals: s, totals: a, error: e });
+};
+export {
+  N as default
+};

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

@@ -0,0 +1,64 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as E, useMemo as d } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as S, TRANSACTION_ANALYTICS_CATEGORY as B, classes as s } from "../../constants.js";
+import { useLandedPageEvent as L } from "../../../../../hooks/useAnalytics/useLandedPageEvent.js";
+import { useDurationEvent as O } from "../../../../../hooks/useAnalytics/useDurationEvent.js";
+import R from "../TransactionsList/TransactionsList.js";
+import Y from "../TransactionTotals/TransactionTotals.js";
+import _ from "../Balances/Balances.js";
+import { Alert as k } from "../../../../internal/Alert/Alert.js";
+import x from "../../../../../core/Context/useCoreContext.js";
+import { AlertTypeOption as F } from "../../../../internal/Alert/types.js";
+import { ButtonVariant as G } from "../../../../internal/Button/types.js";
+import W from "../../../../internal/Button/Button.js";
+import { Fragment as w } from "../../../../../external/preact/dist/preact.module.js";
+const f = {
+  category: B,
+  subCategory: S
+}, Z = ({
+  accountBalancesResult: a,
+  balanceAccount: t,
+  balanceAccounts: p,
+  isLoadingBalanceAccount: u,
+  transactionsListResult: T,
+  transactionsTotalsResult: C,
+  ...v
+}) => {
+  const { i18n: i, updateCore: N } = x(), { isWaiting: g, balances: n } = a, { isWaiting: y, totals: m, error: A } = C, o = t == null ? void 0 : t.defaultCurrencyCode, e = E(
+    ({ currency: l }, { currency: c }) => {
+      if (o) {
+        if (l === o) return -1;
+        if (c === o) return 1;
+      }
+      return l.localeCompare(c);
+    },
+    [o]
+  ), I = d(() => [...n].sort(e), [n, e]), h = d(() => [...m].sort(e), [m, e]);
+  return L(f), O(f), /* @__PURE__ */ r(w, { children: [
+    /* @__PURE__ */ r("div", { className: s.summary, children: [
+      A ? /* @__PURE__ */ r(
+        k,
+        {
+          className: s.totalsError,
+          type: F.WARNING,
+          title: i.get("transactions.overview.totals.error"),
+          description: /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(W, { variant: G.TERTIARY, onClick: N, children: i.get("common.actions.refresh.labels.default") }) })
+        }
+      ) : /* @__PURE__ */ r("div", { className: s.summaryItem, children: /* @__PURE__ */ r(Y, { totals: h, loadingTotals: y }) }),
+      /* @__PURE__ */ r("div", { className: s.summaryItem, children: /* @__PURE__ */ r(_, { balances: I, loadingBalances: g }) })
+    ] }),
+    /* @__PURE__ */ r(
+      R,
+      {
+        accountBalancesResult: a,
+        balanceAccount: t,
+        loadingBalanceAccounts: u || !p,
+        transactionsListResult: T,
+        ...v
+      }
+    )
+  ] });
+};
+export {
+  Z as default
+};

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

@@ -9,10 +9,7 @@ import { useResponsiveContainer as l, containerQueries as p } from "../../../../
 import { parsePaymentMethodType as g } from "../utils.js";
 import { PAYMENT_METHOD_CLASS as _, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as N, PAYMENT_METHOD_LOGO_CLASS as O } from "./constants.js";
 import { Fragment as C } from "../../../../../external/preact/dist/preact.module.js";
-const x = ({
-  paymentMethod: r,
-  bankAccount: a
-}) => {
+const x = ({ paymentMethod: r, bankAccount: a }) => {
   const { i18n: i } = m(), e = l(p.down.xs);
   return /* @__PURE__ */ o("div", { className: _, children: r || a ? /* @__PURE__ */ o(C, { children: [
     /* @__PURE__ */ o("div", { className: N, children: /* @__PURE__ */ o(