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

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

@@ -1,111 +1,113 @@
-import { DataDetailsModal as ne } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
-import { TransactionsTable as ae } from "../TransactionsTable/TransactionsTable.js";
-import le from "../../../../hooks/useBalanceAccountSelection.js";
-import { TypographyVariant as me } from "../../../../internal/Typography/types.js";
-import de from "../../../../internal/Typography/Typography.js";
-import ce from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
-import { FilterParam as t } from "../../../../types.js";
-import ue from "../../../../../hooks/useModalDetails/useModalDetails.js";
-import pe from "../../../../../core/Context/useCoreContext.js";
-import { useCallback as A, useMemo as m, useState as g, useEffect as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { LIMIT_OPTIONS as fe, DEFAULT_PAGE_LIMIT as Ce } from "../../../../internal/Pagination/constants.js";
-import Te from "../TransactionTotals/TransactionTotals.js";
-import { Balances as Ae } from "../Balances/Balances.js";
-import Se from "../../../../hooks/useDefaultOverviewFilterParams.js";
-import Ee from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
-import { AmountFilter as Ne } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
-import { MAX_TRANSACTIONS_DATE_RANGE_MONTHS as he, BASE_CLASS as Me, SUMMARY_CLASS as _e, SUMMARY_ITEM_CLASS as L, BASE_CLASS_DETAILS as Fe } from "./constants.js";
-import { useResponsiveViewport as Ie, mediaQueries as De } from "../../hooks/useResponsiveViewport.js";
+import { DataDetailsModal as ft } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
+import { TransactionsTable as pt } from "../TransactionsTable/TransactionsTable.js";
+import At from "../../../../hooks/useBalanceAccountSelection.js";
+import St from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import { FilterParam as e } from "../../../../types.js";
+import Tt from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import Et from "../../../../../core/Context/useCoreContext.js";
+import { useCallback as c, useMemo as m, useState as R, useEffect as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { LIMIT_OPTIONS as Nt, DEFAULT_PAGE_LIMIT as Mt } from "../../../../internal/Pagination/constants.js";
+import ht from "../TransactionTotals/TransactionTotals.js";
+import { Balances as Ft } from "../Balances/Balances.js";
+import _t from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import It from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
+import { AmountFilter as Dt } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
+import { MAX_TRANSACTIONS_DATE_RANGE_MONTHS as Ot, BASE_CLASS as Ut, SUMMARY_CLASS as gt, SUMMARY_ITEM_CLASS as v, BASE_CLASS_DETAILS as bt } from "./constants.js";
+import { useResponsiveViewport as Lt, mediaQueries as wt } from "../../../../hooks/useResponsiveViewport.js";
+import { useCustomColumnsData as Rt } from "../../../../hooks/useCustomColumnsData.js";
 import "./TransactionsOverview.scss.js";
 import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import Oe from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import Ue from "../../../../internal/FilterBar/FilterBar.js";
-import ge from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import b from "../MultiSelectionFilter/MultiSelectionFilter.js";
-import { useAuthContext as Le } from "../../../../../core/Auth/context.js";
-import { listFrom as c } from "../../../../../utils/collection/main.js";
-import { isUndefined as w, isFunction as be } from "../../../../../utils/value/is.js";
-const at = ({
-  onFiltersChanged: u,
-  balanceAccounts: E,
-  allowLimitSelection: N,
-  preferredLimit: R = Ce,
+import vt, { useFilterBarState as xt, FilterBarMobileSwitch as yt } from "../../../../internal/FilterBar/FilterBar.js";
+import kt from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import { DataOverviewHeader as Pt } from "../../../../internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js";
+import Xt from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import x from "../MultiSelectionFilter/MultiSelectionFilter.js";
+import { useAuthContext as Gt } from "../../../../../core/Auth/context.js";
+import { listFrom as u } from "../../../../../utils/collection/main.js";
+import { isUndefined as y, isFunction as zt } from "../../../../../utils/value/is.js";
+const Ae = ({
+  onFiltersChanged: C,
+  balanceAccounts: N,
+  allowLimitSelection: M,
+  preferredLimit: k = Mt,
   onRecordSelection: h,
-  showDetails: M,
-  isLoadingBalanceAccount: y,
-  onContactSupport: v,
-  hideTitle: x
+  showDetails: F,
+  isLoadingBalanceAccount: P,
+  onContactSupport: X,
+  hideTitle: G,
+  columns: z,
+  onDataRetrieved: _
 }) => {
   const {
-    i18n: d
-  } = pe(), {
+    i18n: f
+  } = Et(), {
     getTransactions: p
-  } = Le().endpoints, {
-    activeBalanceAccount: e,
-    balanceAccountSelectionOptions: k,
-    onBalanceAccountSelection: P
-  } = le(E), {
+  } = Gt().endpoints, {
+    activeBalanceAccount: t,
+    balanceAccountSelectionOptions: H,
+    onBalanceAccountSelection: V
+  } = At(N), {
     defaultParams: l,
-    nowTimestamp: f,
-    refreshNowTimestamp: C
-  } = Se("transactions", e), X = A(async ({
+    nowTimestamp: A,
+    refreshNowTimestamp: S
+  } = _t("transactions", t), W = c(async ({
     balanceAccount: s,
-    ...o
-  }, se) => p({
-    signal: se,
+    ...i
+  }, d) => p({
+    signal: d,
     errorLevel: "error"
   }, {
     query: {
-      ...o,
-      statuses: c(o[t.STATUSES]),
-      categories: c(o[t.CATEGORIES]),
-      currencies: c(o[t.CURRENCIES]),
-      createdSince: o[t.CREATED_SINCE] ?? l.current.defaultFilterParams[t.CREATED_SINCE],
-      createdUntil: o[t.CREATED_UNTIL] ?? l.current.defaultFilterParams[t.CREATED_UNTIL],
+      ...i,
+      statuses: u(i[e.STATUSES]),
+      categories: u(i[e.CATEGORIES]),
+      currencies: u(i[e.CURRENCIES]),
+      createdSince: i[e.CREATED_SINCE] ?? l.current.defaultFilterParams[e.CREATED_SINCE],
+      createdUntil: i[e.CREATED_UNTIL] ?? l.current.defaultFilterParams[e.CREATED_UNTIL],
       sortDirection: "desc",
-      balanceAccountId: (e == null ? void 0 : e.id) ?? "",
-      minAmount: w(o.minAmount) ? void 0 : parseFloat(o.minAmount),
-      maxAmount: w(o.maxAmount) ? void 0 : parseFloat(o.maxAmount)
+      balanceAccountId: (t == null ? void 0 : t.id) ?? "",
+      minAmount: y(i.minAmount) ? void 0 : parseFloat(i.minAmount),
+      maxAmount: y(i.maxAmount) ? void 0 : parseFloat(i.maxAmount)
     }
-  }), [e == null ? void 0 : e.id, l, p]), G = m(() => be(u) ? u : void 0, [u]), V = m(() => N ? fe : void 0, [N]), {
-    canResetFilters: z,
-    error: W,
-    fetching: Y,
-    filters: i,
-    limit: j,
-    limitOptions: H,
-    records: Q,
-    resetFilters: we,
+  }), [t == null ? void 0 : t.id, l, p]), I = xt(), Y = m(() => zt(C) ? C : void 0, [C]), j = m(() => M ? Nt : void 0, [M]), {
+    canResetFilters: K,
+    error: Q,
+    fetching: Z,
+    filters: o,
+    limit: J,
+    limitOptions: $,
+    records: D,
+    resetFilters: Ht,
     updateFilters: n,
-    updateLimit: Z,
-    ...J
-  } = Oe({
-    fetchRecords: X,
+    updateLimit: q,
+    ...B
+  } = kt({
+    fetchRecords: W,
     dataField: "data",
     filterParams: l.current.defaultFilterParams,
     initialFiltersSameAsDefault: !0,
-    onFiltersChanged: G,
-    preferredLimit: R,
-    preferredLimitOptions: V,
-    enabled: !!(e != null && e.id) && !!p
-  }), [a, _] = g([]), [K, $] = g(!1), q = A((s, o) => {
-    _(s), $(o);
+    onFiltersChanged: Y,
+    preferredLimit: k,
+    preferredLimitOptions: j,
+    enabled: !!(t != null && t.id) && !!p
+  }), [a, O] = R([]), [tt, et] = R(!1), rt = c((s, i) => {
+    O(s), et(i);
   }, []), {
-    categoriesFilter: F,
-    currenciesFilter: I,
+    categoriesFilter: U,
+    currenciesFilter: g,
     statusesFilter: T
-  } = Ee({
-    filters: i,
+  } = It({
+    filters: o,
     updateFilters: n
   }, a);
-  S(() => {
-    _(void 0), n({
-      [t.BALANCE_ACCOUNT]: e == null ? void 0 : e.id,
-      [t.CURRENCIES]: void 0
+  E(() => {
+    O(void 0), n({
+      [e.BALANCE_ACCOUNT]: t == null ? void 0 : t.id,
+      [e.CURRENCIES]: void 0
     });
-  }, [n, e == null ? void 0 : e.id]), S(() => {
-    C();
-  }, [i, C]), S(() => {
+  }, [n, t == null ? void 0 : t.id]), E(() => {
+    S();
+  }, [o, S]), E(() => {
     T.updateSelection({
       target: {
         value: "Booked",
@@ -113,116 +115,133 @@ const at = ({
       }
     });
   }, [T]);
-  const D = Ie(De.down.sm), B = !!a && a.length > 1, O = m(() => ({
-    showDetails: M ?? !0,
+  const b = Lt(wt.down.sm), it = !!a && a.length > 1, L = m(() => ({
+    showDetails: F ?? !0,
     callback: h
-  }), [M, h]), ee = m(() => ({
-    transaction: O
-  }), [O]), {
-    updateDetails: U,
-    resetDetails: te,
-    selectedDetail: re
-  } = ue(ee), ie = A((s) => {
-    U({
+  }), [F, h]), ot = m(() => ({
+    transaction: L
+  }), [L]), {
+    updateDetails: w,
+    resetDetails: st,
+    selectedDetail: nt
+  } = Tt(ot), at = c((s) => {
+    w({
       selection: {
         type: "transaction",
         data: {
           ...s,
-          balanceAccount: e
+          balanceAccount: t
         }
       },
       modalSize: "small"
     }).callback({
       id: s.id
     });
-  }, [U, e]), oe = m(() => {
-    const s = new Date(f);
-    return s.setMonth(s.getMonth() - he), s.toString();
-  }, [f]);
+  }, [w, t]), lt = m(() => {
+    const s = new Date(A);
+    return s.setMonth(s.getMonth() - Ot), s.toString();
+  }, [A]), mt = c(({
+    records: s,
+    retrievedData: i
+  }) => s.map((d) => ({
+    ...i.find((Ct) => Ct.id === d.id),
+    ...d
+  })), []), {
+    customRecords: dt,
+    loadingCustomRecords: ct
+  } = Rt({
+    records: D,
+    onDataRetrieved: _,
+    mergeCustomData: mt
+  });
   return r("div", {
-    className: Me,
-    children: [!x && r(de, {
-      variant: me.TITLE,
-      medium: !0,
-      children: d.get("transactionsOverviewTitle")
-    }), r(Ue, {
-      children: [r(ge, {
-        activeBalanceAccount: e,
-        balanceAccountSelectionOptions: k,
-        onBalanceAccountSelection: P
-      }), r(ce, {
-        canResetFilters: z,
+    className: Ut,
+    children: [r(Pt, {
+      hideTitle: G,
+      titleKey: "transactionsOverviewTitle",
+      children: r(yt, {
+        ...I
+      })
+    }), r(vt, {
+      ...I,
+      children: [r(Xt, {
+        activeBalanceAccount: t,
+        balanceAccountSelectionOptions: H,
+        onBalanceAccountSelection: V
+      }), r(St, {
+        canResetFilters: K,
         defaultParams: l,
-        filters: i,
-        nowTimestamp: f,
-        refreshNowTimestamp: C,
-        sinceDate: oe,
-        timezone: e == null ? void 0 : e.timeZone,
+        filters: o,
+        nowTimestamp: A,
+        refreshNowTimestamp: S,
+        sinceDate: lt,
+        timezone: t == null ? void 0 : t.timeZone,
         updateFilters: n
-      }), r(b, {
-        ...F,
-        placeholder: d.get("filterPlaceholder.category")
-      }), r(Ne, {
+      }), r(x, {
+        ...U,
+        placeholder: f.get("filterPlaceholder.category")
+      }), r(Dt, {
         availableCurrencies: a,
-        selectedCurrencies: c(i[t.CURRENCIES]),
+        selectedCurrencies: u(o[e.CURRENCIES]),
         name: "range",
-        label: d.get("amount"),
-        minAmount: i[t.MIN_AMOUNT],
-        maxAmount: i[t.MAX_AMOUNT],
+        label: f.get("amount"),
+        minAmount: o[e.MIN_AMOUNT],
+        maxAmount: o[e.MAX_AMOUNT],
         updateFilters: n,
         onChange: n
-      }), r(b, {
-        ...I,
-        placeholder: d.get("filterPlaceholder.currency")
+      }), r(x, {
+        ...g,
+        placeholder: f.get("filterPlaceholder.currency")
       })]
     }), r("div", {
-      className: _e,
+      className: gt,
       children: [r("div", {
-        className: L,
-        children: r(Te, {
+        className: v,
+        children: r(ht, {
           availableCurrencies: a,
-          isAvailableCurrenciesFetching: K,
-          balanceAccountId: e == null ? void 0 : e.id,
+          isAvailableCurrenciesFetching: tt,
+          balanceAccountId: t == null ? void 0 : t.id,
           statuses: T.selection,
-          categories: F.selection,
-          createdUntil: i[t.CREATED_UNTIL],
-          createdSince: i[t.CREATED_SINCE],
-          currencies: I.selection,
-          minAmount: i[t.MIN_AMOUNT] ? parseFloat(i[t.MIN_AMOUNT]) : void 0,
-          maxAmount: i[t.MAX_AMOUNT] ? parseFloat(i[t.MAX_AMOUNT]) : void 0,
-          fullWidth: D
+          categories: U.selection,
+          createdUntil: o[e.CREATED_UNTIL],
+          createdSince: o[e.CREATED_SINCE],
+          currencies: g.selection,
+          minAmount: o[e.MIN_AMOUNT] ? parseFloat(o[e.MIN_AMOUNT]) : void 0,
+          maxAmount: o[e.MAX_AMOUNT] ? parseFloat(o[e.MAX_AMOUNT]) : void 0,
+          fullWidth: b
         })
       }), r("div", {
-        className: L,
-        children: r(Ae, {
-          balanceAccountId: e == null ? void 0 : e.id,
-          onCurrenciesChange: q,
-          defaultCurrencyCode: e == null ? void 0 : e.defaultCurrencyCode,
-          fullWidth: D
+        className: v,
+        children: r(Ft, {
+          balanceAccountId: t == null ? void 0 : t.id,
+          onCurrenciesChange: rt,
+          defaultCurrencyCode: t == null ? void 0 : t.defaultCurrencyCode,
+          fullWidth: b
         })
       })]
-    }), r(ne, {
-      selectedDetail: re,
-      resetDetails: te,
-      className: Fe,
-      children: r(ae, {
-        activeBalanceAccount: e,
+    }), r(ft, {
+      selectedDetail: nt,
+      resetDetails: st,
+      className: bt,
+      children: r(pt, {
+        activeBalanceAccount: t,
         availableCurrencies: a,
-        error: W,
-        hasMultipleCurrencies: B,
-        limit: j,
-        limitOptions: H,
-        loading: Y || y || !E,
-        onContactSupport: v,
-        onLimitSelection: Z,
-        onRowClick: ie,
+        error: Q,
+        hasMultipleCurrencies: it,
+        limit: J,
+        limitOptions: $,
+        loading: Z || P || !N || ct,
+        onContactSupport: X,
+        onLimitSelection: q,
+        onRowClick: at,
         showPagination: !0,
-        transactions: Q,
-        ...J
+        transactions: _ ? dt : D,
+        customColumns: z,
+        ...B
       })
     })]
   });
 };
 export {
-  at as TransactionsOverview
+  Ae as TransactionsOverview
 };

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

@@ -1,36 +1,43 @@
-import { PAYMENT_METHOD_CLASS as o, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as s, PAYMENT_METHOD_LOGO_CLASS as i } from "./constants.js";
-import { Image as l } from "../../../../internal/Image/Image.js";
-import { parsePaymentMethodType as t } from "../utils.js";
-import { Tag as T } from "../../../../internal/Tag/Tag.js";
-import { TagVariant as f } from "../../../../internal/Tag/types.js";
-import N from "../../../../../core/Context/useCoreContext.js";
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
-const C = ({
+import m from "../../../../../core/Context/useCoreContext.js";
+import { Image as s } from "../../../../internal/Image/Image.js";
+import { Tag as t } from "../../../../internal/Tag/Tag.js";
+import { TagVariant as l } from "../../../../internal/Tag/types.js";
+import { TypographyVariant as p } from "../../../../internal/Typography/types.js";
+import f from "../../../../internal/Typography/Typography.js";
+import { useResponsiveViewport as T, mediaQueries as n } from "../../../../hooks/useResponsiveViewport.js";
+import { parsePaymentMethodType as g } from "../utils.js";
+import { PAYMENT_METHOD_CLASS as N, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as O, PAYMENT_METHOD_LOGO_CLASS as _ } from "./constants.js";
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { Fragment as C } from "../../../../../external/preact/dist/preact.module.js";
+const E = ({
   paymentMethod: r,
   bankAccount: e
 }) => {
   const {
-    i18n: m
-  } = N();
-  return a("div", {
-    className: o,
-    children: r || e ? a(_, {
-      children: [a("div", {
-        className: s,
-        children: a(l, {
+    i18n: i
+  } = m(), a = T(n.down.xs);
+  return o("div", {
+    className: N,
+    children: r || e ? o(C, {
+      children: [o("div", {
+        className: O,
+        children: o(s, {
           name: r ? r.type : "bankTransfer",
           alt: r ? r.type : "bankTransfer",
           folder: "logos/",
-          className: i
+          className: _
         })
-      }), r ? t(r) : e == null ? void 0 : e.accountNumberLastFourDigits]
-    }) : a(T, {
-      label: m.get("noData"),
-      variant: f.WHITE
+      }), o(f, {
+        variant: p.BODY,
+        stronger: a,
+        children: r ? g(r) : e == null ? void 0 : e.accountNumberLastFourDigits
+      })]
+    }) : o(t, {
+      label: i.get("noData"),
+      variant: l.WHITE
     })
   });
-}, D = C;
+}, V = E;
 export {
-  D as default
+  V as default
 };