@adyen/adyen-platform-experience-web 1.0.0-beta.3 → 1.0.1

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

@@ -1,160 +1,199 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { TransactionFilterParam as e } from "../../types.js";
-import { TransactionsDisplay as B } from "../TransactionsDisplay/TransactionsDisplay.js";
-import rr from "../../../../../core/Context/useCoreContext.js";
-import { useSetupEndpoint as er } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
-import { useCallback as _, useMemo as C, useState as h, useEffect as T } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { isFunction as O } from "../../../../../utils/common/index.js";
-import { LIMIT_OPTIONS as tr, DEFAULT_PAGE_LIMIT as ir } from "../../../../internal/Pagination/constants.js";
-import or from "../TransactionsOverviewDateFilter.js";
-import sr from "../TransactionTotals/TransactionTotals.js";
-import { Balances as nr } from "../Balances/Balances.js";
-import lr from "../../hooks/useDefaultTransactionsOverviewFilterParams.js";
-import mr from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
-import { AmountFilter as ar } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
-import { BASE_CLASS as dr, SUMMARY_CLASS as cr, SUMMARY_ITEM_CLASS as U } from "./constants.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { DataDetailsModal as mt } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
+import { TransactionsTable as dt } from "../TransactionsTable/TransactionsTable.js";
+import ct from "../../../../hooks/useBalanceAccountSelection.js";
+import { TypographyVariant as ut } from "../../../../internal/Typography/types.js";
+import pt from "../../../../internal/Typography/Typography.js";
+import ft from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import { FilterParam as e } from "../../../../types.js";
+import Ct from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import Tt from "../../../../../core/Context/useCoreContext.js";
+import { useCallback as E, useMemo as l, useState as L, useEffect as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { LIMIT_OPTIONS as At, DEFAULT_PAGE_LIMIT as St } from "../../../../internal/Pagination/constants.js";
+import Et from "../TransactionTotals/TransactionTotals.js";
+import { Balances as Nt } from "../Balances/Balances.js";
+import ht from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import Mt from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
+import { AmountFilter as _t } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
+import { MAX_TRANSACTIONS_DATE_RANGE_MONTHS as Ft, BASE_CLASS as It, SUMMARY_CLASS as Dt, SUMMARY_ITEM_CLASS as b, BASE_CLASS_DETAILS as Ot } from "./constants.js";
+import { useResponsiveViewport as Ut, mediaQueries as gt } from "../../hooks/useResponsiveViewport.js";
 import "./TransactionsOverview.scss.js";
-import { useMediaQuery as ur, mediaQueries as pr } from "../../hooks/useMediaQuery.js";
-import fr from "../BalanceAccountSelector/useBalanceAccountSelection.js";
-import { listFrom as m } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
-import Cr from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import Tr from "../../../../internal/FilterBar/FilterBar.js";
-import Ar from "../BalanceAccountSelector/BalanceAccountSelector.js";
-import v from "../MultiSelectionFilter/MultiSelectionFilter.js";
-const Yr = ({
-  onFiltersChanged: a,
-  onLimitChanged: d,
-  balanceAccounts: c,
-  allowLimitSelection: A,
-  preferredLimit: D = ir,
-  onTransactionSelected: L,
-  showDetails: g,
-  isLoadingBalanceAccount: b,
-  onContactSupport: w
+import Lt from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import bt from "../../../../internal/FilterBar/FilterBar.js";
+import wt from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import w from "../MultiSelectionFilter/MultiSelectionFilter.js";
+import { useAuthContext as Rt } from "../../../../../core/Auth/context.js";
+import { listFrom as c } from "../../../../../utils/collection/main.js";
+import { isUndefined as R, isFunction as v } from "../../../../../utils/value/is.js";
+const me = ({
+  onFiltersChanged: u,
+  onLimitChanged: p,
+  balanceAccounts: f,
+  allowLimitSelection: h,
+  preferredLimit: y = St,
+  onRecordSelection: M,
+  showDetails: _,
+  isLoadingBalanceAccount: x,
+  onContactSupport: k,
+  hideTitle: P
 }) => {
-  const { i18n: u } = rr(), E = er("getTransactions"), { activeBalanceAccount: r, balanceAccountSelectionOptions: x, onBalanceAccountSelection: R } = fr(c), { defaultParams: n, nowTimestamp: y, refreshNowTimestamp: p } = lr(r), P = _(
-    async ({ balanceAccount: M, ...o }, q) => E({ signal: q, errorLevel: "error" }, {
+  const { i18n: d } = Tt(), { getTransactions: C } = Rt().endpoints, { activeBalanceAccount: t, balanceAccountSelectionOptions: X, onBalanceAccountSelection: G } = ct(f), { defaultParams: m, nowTimestamp: T, refreshNowTimestamp: A } = ht("transactions", t), V = E(
+    async ({ balanceAccount: s, ...o }, lt) => C({ signal: lt, errorLevel: "error" }, {
       query: {
         ...o,
-        statuses: m(o[e.STATUSES]),
-        categories: m(o[e.CATEGORIES]),
-        currencies: m(o[e.CURRENCIES]),
-        createdSince: o[e.CREATED_SINCE] ?? n.current.defaultFilterParams[e.CREATED_SINCE],
-        createdUntil: o[e.CREATED_UNTIL] ?? n.current.defaultFilterParams[e.CREATED_UNTIL],
+        statuses: c(o[e.STATUSES]),
+        categories: c(o[e.CATEGORIES]),
+        currencies: c(o[e.CURRENCIES]),
+        createdSince: o[e.CREATED_SINCE] ?? m.current.defaultFilterParams[e.CREATED_SINCE],
+        createdUntil: o[e.CREATED_UNTIL] ?? m.current.defaultFilterParams[e.CREATED_UNTIL],
         sortDirection: "desc",
-        balanceAccountId: (r == null ? void 0 : r.id) ?? "",
-        minAmount: o.minAmount !== void 0 ? parseFloat(o.minAmount) : void 0,
-        maxAmount: o.maxAmount !== void 0 ? parseFloat(o.maxAmount) : void 0
+        balanceAccountId: (t == null ? void 0 : t.id) ?? "",
+        minAmount: R(o.minAmount) ? void 0 : parseFloat(o.minAmount),
+        maxAmount: R(o.maxAmount) ? void 0 : parseFloat(o.maxAmount)
       }
     }),
-    [r == null ? void 0 : r.id, n, E]
-  ), X = C(() => O(a) ? a : void 0, [a]), k = C(() => O(d) ? d : void 0, [d]), G = C(() => A ? tr : void 0, [A]), { canResetFilters: Q, error: W, fetching: Y, filters: i, limit: j, limitOptions: V, records: z, resetFilters: Er, updateFilters: s, updateLimit: H, ...J } = Cr({
-    fetchRecords: P,
+    [t == null ? void 0 : t.id, m, C]
+  ), W = l(() => v(u) ? u : void 0, [u]), Y = l(() => v(p) ? p : void 0, [p]), j = l(() => h ? At : void 0, [h]), { canResetFilters: z, error: H, fetching: Q, filters: i, limit: J, limitOptions: K, records: Z, resetFilters: vt, updateFilters: n, updateLimit: $, ...q } = Lt({
+    fetchRecords: V,
     dataField: "data",
-    filterParams: n.current.defaultFilterParams,
+    filterParams: m.current.defaultFilterParams,
     initialFiltersSameAsDefault: !0,
-    onLimitChanged: k,
-    onFiltersChanged: X,
-    preferredLimit: D,
-    preferredLimitOptions: G,
-    enabled: !!(r != null && r.id)
-  }), [l, S] = h([]), [K, Z] = h(!1), $ = _((M, o) => {
-    S(M), Z(o);
-  }, []), { categoriesFilter: F, currenciesFilter: N, statusesFilter: f } = mr(
+    onLimitChanged: Y,
+    onFiltersChanged: W,
+    preferredLimit: y,
+    preferredLimitOptions: j,
+    enabled: !!(t != null && t.id) && !!C
+  }), [a, F] = L([]), [B, tt] = L(!1), et = E((s, o) => {
+    F(s), tt(o);
+  }, []), { categoriesFilter: I, currenciesFilter: D, statusesFilter: S } = Mt(
     {
       filters: i,
-      updateFilters: s
+      updateFilters: n
     },
-    l
+    a
   );
-  T(() => {
-    S(void 0), s({
-      [e.BALANCE_ACCOUNT]: r == null ? void 0 : r.id,
+  N(() => {
+    F(void 0), n({
+      [e.BALANCE_ACCOUNT]: t == null ? void 0 : t.id,
       [e.CURRENCIES]: void 0
     });
-  }, [s, r == null ? void 0 : r.id]), T(() => {
-    p();
-  }, [i, p]), T(() => {
-    f.updateSelection({ target: { value: "Booked", name: "status" } });
-  }, [f]);
-  const I = ur(pr.down.sm);
-  return /* @__PURE__ */ t("div", { className: dr, children: [
-    /* @__PURE__ */ t(Tr, { children: [
-      /* @__PURE__ */ t(
-        Ar,
+  }, [n, t == null ? void 0 : t.id]), N(() => {
+    A();
+  }, [i, A]), N(() => {
+    S.updateSelection({ target: { value: "Booked", name: "status" } });
+  }, [S]);
+  const O = Ut(gt.down.sm), rt = !!a && a.length > 1, U = l(
+    () => ({
+      showDetails: _ ?? !0,
+      callback: M
+    }),
+    [_, M]
+  ), it = l(() => ({ transaction: U }), [U]), { updateDetails: g, resetDetails: ot, selectedDetail: st } = Ct(it), nt = E(
+    (s) => {
+      g({
+        selection: { type: "transaction", data: { ...s, balanceAccountDescription: t == null ? void 0 : t.description } },
+        modalSize: "small"
+      }).callback({ id: s.id });
+    },
+    [g, t]
+  ), at = l(() => {
+    const s = new Date(T);
+    return s.setMonth(s.getMonth() - Ft), s.toString();
+  }, [T]);
+  return /* @__PURE__ */ r("div", { className: It, children: [
+    !P && /* @__PURE__ */ r(pt, { variant: ut.TITLE, medium: !0, children: d.get("transactionsOverviewTitle") }),
+    /* @__PURE__ */ r(bt, { children: [
+      /* @__PURE__ */ r(
+        wt,
         {
-          activeBalanceAccount: r,
-          balanceAccountSelectionOptions: x,
-          onBalanceAccountSelection: R
+          activeBalanceAccount: t,
+          balanceAccountSelectionOptions: X,
+          onBalanceAccountSelection: G
         }
       ),
-      /* @__PURE__ */ t(
-        or,
+      /* @__PURE__ */ r(
+        ft,
         {
-          canResetFilters: Q,
-          defaultParams: n,
+          canResetFilters: z,
+          defaultParams: m,
           filters: i,
-          nowTimestamp: y,
-          refreshNowTimestamp: p,
-          updateFilters: s
+          nowTimestamp: T,
+          refreshNowTimestamp: A,
+          sinceDate: at,
+          updateFilters: n
         }
       ),
-      /* @__PURE__ */ t(v, { ...F, placeholder: u.get("filterPlaceholder.category") }),
-      /* @__PURE__ */ t(
-        ar,
+      /* @__PURE__ */ r(w, { ...I, placeholder: d.get("filterPlaceholder.category") }),
+      /* @__PURE__ */ r(
+        _t,
         {
-          availableCurrencies: l,
-          selectedCurrencies: m(i[e.CURRENCIES]),
+          availableCurrencies: a,
+          selectedCurrencies: c(i[e.CURRENCIES]),
           name: "range",
-          label: u.get("amount"),
+          label: d.get("amount"),
           minAmount: i[e.MIN_AMOUNT],
           maxAmount: i[e.MAX_AMOUNT],
-          updateFilters: s,
-          onChange: s
+          updateFilters: n,
+          onChange: n
         }
       ),
-      /* @__PURE__ */ t(v, { ...N, placeholder: u.get("filterPlaceholder.currency") })
+      /* @__PURE__ */ r(w, { ...D, placeholder: d.get("filterPlaceholder.currency") })
     ] }),
-    /* @__PURE__ */ t("div", { className: cr, children: [
-      /* @__PURE__ */ t("div", { className: U, children: /* @__PURE__ */ t(
-        sr,
+    /* @__PURE__ */ r("div", { className: Dt, children: [
+      /* @__PURE__ */ r("div", { className: b, children: /* @__PURE__ */ r(
+        Et,
         {
-          availableCurrencies: l,
-          isAvailableCurrenciesFetching: K,
-          balanceAccountId: r == null ? void 0 : r.id,
-          statuses: f.selection,
-          categories: F.selection,
+          availableCurrencies: a,
+          isAvailableCurrenciesFetching: B,
+          balanceAccountId: t == null ? void 0 : t.id,
+          statuses: S.selection,
+          categories: I.selection,
           createdUntil: i[e.CREATED_UNTIL],
           createdSince: i[e.CREATED_SINCE],
-          currencies: N.selection,
+          currencies: D.selection,
           minAmount: i[e.MIN_AMOUNT] ? parseFloat(i[e.MIN_AMOUNT]) : void 0,
           maxAmount: i[e.MAX_AMOUNT] ? parseFloat(i[e.MAX_AMOUNT]) : void 0,
-          fullWidth: I
+          fullWidth: O
         }
       ) }),
-      /* @__PURE__ */ t("div", { className: U, children: /* @__PURE__ */ t(nr, { balanceAccountId: r == null ? void 0 : r.id, onCurrenciesChange: $, fullWidth: I }) })
+      /* @__PURE__ */ r("div", { className: b, children: /* @__PURE__ */ r(
+        Nt,
+        {
+          balanceAccountId: t == null ? void 0 : t.id,
+          onCurrenciesChange: et,
+          defaultCurrencyCode: t == null ? void 0 : t.defaultCurrencyCode,
+          fullWidth: O
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ t(
-      B,
+    /* @__PURE__ */ r(
+      mt,
       {
-        balanceAccounts: c,
-        availableCurrencies: l,
-        loading: Y || b || !c,
-        transactions: z,
-        onTransactionSelected: L,
-        showPagination: !0,
-        showDetails: g,
-        balanceAccountDescription: (r == null ? void 0 : r.description) || "",
-        limit: j,
-        limitOptions: V,
-        onContactSupport: w,
-        onLimitSelection: H,
-        error: W,
-        ...J
+        selectedDetail: st,
+        resetDetails: ot,
+        className: Ot,
+        children: /* @__PURE__ */ r(
+          dt,
+          {
+            balanceAccounts: f,
+            availableCurrencies: a,
+            error: H,
+            hasMultipleCurrencies: rt,
+            limit: J,
+            limitOptions: K,
+            loading: Q || x || !f,
+            onContactSupport: k,
+            onLimitSelection: $,
+            onRowClick: nt,
+            showPagination: !0,
+            transactions: Z,
+            ...q
+          }
+        )
       }
     )
   ] });
 };
 export {
-  Yr as TransactionsOverview
+  me as TransactionsOverview
 };

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

@@ -1,6 +1,8 @@
-const S = "adyen-pe-transactions-overview", _ = S + "__summary", s = S + "__summary-item";
+const S = "adyen-pe-transactions", A = `${S}-overview`, t = `${S}-details`, _ = `${A}__summary`, s = `${_}-item`, n = 24;
 export {
-  S as BASE_CLASS,
+  A as BASE_CLASS,
+  t as BASE_CLASS_DETAILS,
+  n as MAX_TRANSACTIONS_DATE_RANGE_MONTHS,
   _ as SUMMARY_CLASS,
   s as SUMMARY_ITEM_CLASS
 };

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

@@ -1,44 +1,22 @@
-import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useSetupEndpoint as g } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
-import { useFetch as d } from "../../../../../hooks/useFetch/useFetch.js";
-import { TransactionsOverview as h } from "../TransactionsOverview/TransactionsOverview.js";
-import { useCallback as f, useMemo as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import A from "../../../../../core/Auth/useAuthContext.js";
-import p from "classnames";
-import { ErrorMessageDisplay as i } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { BASE_CLASS as C, WITH_ERROR_CLASS as I } from "./constants.js";
-import "./TransactionsOverviewContainer.scss.js";
-import { EMPTY_OBJECT as v } from "../../../../../utils/common/constants.js";
-function R(n) {
-  const { sessionSetupError: r, endpoints: s } = A(), c = g("getBalanceAccounts"), { data: e, isFetching: m } = d({
-    fetchOptions: { enabled: !!s.getBalanceAccounts, keepPrevData: !0 },
-    queryFn: f(async () => c(v), [c])
-  }), t = a(
-    () => e == null ? void 0 : e.data.filter((l) => n.balanceAccountId ? l.id === n.balanceAccountId : !0),
-    [e == null ? void 0 : e.data, n.balanceAccountId]
-  ), u = a(
-    () => !!n.balanceAccountId && !!(e != null && e.data.length) && (t == null ? void 0 : t.length) === 0,
-    [t == null ? void 0 : t.length, e == null ? void 0 : e.data.length, n.balanceAccountId]
-  );
-  return /* @__PURE__ */ o("div", { className: p(C, { [I]: r }), children: r ? /* @__PURE__ */ o(
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../../../../hooks/useBalanceAccounts.js";
+import i from "../../../../internal/DataOverviewContainer/DataOverviewContainer.js";
+import { TransactionsOverview as s } from "../TransactionsOverview/TransactionsOverview.js";
+import { BASE_CLASS as u } from "./constants.js";
+function f({ ...o }) {
+  const { balanceAccounts: r, isBalanceAccountIdWrong: a, isFetching: t, error: e } = c(o.balanceAccountId);
+  return /* @__PURE__ */ n(
     i,
     {
-      withImage: !0,
-      centered: !0,
-      title: "somethingWentWrong",
-      message: ["weCouldNotLoadTheTransactionsOverview", "tryRefreshingThePageOrComeBackLater"],
-      refreshComponent: !0
+      balanceAccountsError: e,
+      className: u,
+      errorMessage: "weCouldNotLoadTheTransactionsOverview",
+      isBalanceAccountIdWrong: a,
+      onContactSupport: o.onContactSupport,
+      children: /* @__PURE__ */ n(s, { ...o, balanceAccounts: r, isLoadingBalanceAccount: t })
     }
-  ) : u ? /* @__PURE__ */ o(
-    i,
-    {
-      withImage: !0,
-      centered: !0,
-      title: "somethingWentWrong",
-      message: ["weCouldNotLoadTheTransactionsOverview", "theSelectedBalanceAccountIsIncorrect"]
-    }
-  ) : /* @__PURE__ */ o(h, { ...n, balanceAccounts: t, isLoadingBalanceAccount: m }) });
+  );
 }
 export {
-  R as default
+  f as default
 };

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

@@ -1,5 +1,4 @@
-const e = "adyen-pe-transactions-overview-container", n = e + "--with-error";
+const e = "adyen-pe-transactions-overview-container";
 export {
-  e as BASE_CLASS,
-  n as WITH_ERROR_CLASS
+  e as BASE_CLASS
 };

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

@@ -0,0 +1,29 @@
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+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 { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
+const C = ({
+  paymentMethod: r,
+  bankAccount: e
+}) => {
+  const { i18n: m } = N();
+  return /* @__PURE__ */ a("div", { className: o, children: r || e ? /* @__PURE__ */ a(_, { children: [
+    /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ a(
+      l,
+      {
+        name: r ? r.type : "bankTransfer",
+        alt: r ? r.type : "bankTransfer",
+        folder: "logos/",
+        className: i
+      }
+    ) }),
+    r ? t(r) : e == null ? void 0 : e.accountNumberLastFourDigits
+  ] }) : /* @__PURE__ */ a(T, { label: m.get("noData"), variant: f.WHITE }) });
+}, D = C;
+export {
+  D as default
+};

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

@@ -1,64 +1,72 @@
 import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "../Category/Category.js";
-import L from "../../../../../core/Context/useCoreContext.js";
-import { useState as N, useMemo as l, useCallback as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { getLabel as D, parsePaymentMethodType as b } from "../utils.js";
-import { Tag as O } from "../../../../internal/Tag/Tag.js";
-import { TagVariant as v } from "../../../../internal/Tag/types.js";
-import { CellTextPosition as H } from "../../../../internal/DataGrid/types.js";
-import { Image as w } from "../../../../internal/Image/Image.js";
-import P from "../TransactionListError/TransactionListError.js";
-import { getCurrencyCode as R } from "../../../../../core/Localization/amount/amount-util.js";
-import { BASE_CLASS as F, AMOUNT_CLASS as x, PAYMENT_METHOD_CLASS as G, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as I, PAYMENT_METHOD_LOGO_CLASS as Y } from "./constants.js";
+import x from "../../../../internal/DataOverviewError/DataOverviewError.js";
+import { getLabel as L } from "../../../../utils/getLabel.js";
+import R from "../../../../../core/Context/useCoreContext.js";
+import { useState as H, useMemo as d, useCallback as V } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { CellTextPosition as F } from "../../../../internal/DataGrid/types.js";
+import { getCurrencyCode as O } from "../../../../../core/Localization/amount/amount-util.js";
+import { BASE_CLASS as Y, DATE_AND_PAYMENT_METHOD_CLASS as y, AMOUNT_CLASS as $ } from "./constants.js";
 import "./TransactionTable.scss.js";
-import { useMediaQuery as k, mediaQueries as $ } from "../../hooks/useMediaQuery.js";
-import d from "../../../../internal/DataGrid/DataGrid.js";
-import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
-import B from "../../../../internal/Pagination/Pagination.js";
-const Q = ["createdAt", "paymentMethod", "transactionType", "amount"], lo = ({
-  availableCurrencies: r,
-  error: n,
-  hasMultipleCurrencies: s,
-  loading: p,
-  onContactSupport: m,
-  onRowClick: u,
-  onTransactionSelected: V,
-  showDetails: j,
-  showPagination: y,
-  transactions: T,
-  ...f
+import { useResponsiveViewport as m, mediaQueries as c } from "../../hooks/useResponsiveViewport.js";
+import f from "./PaymentMethodCell.js";
+import M from "../../../../internal/DataGrid/DataGrid.js";
+import G from "../../../../internal/Pagination/Pagination.js";
+const U = ["dateAndPaymentMethod", "createdAt", "paymentMethod", "transactionType", "amount"], no = ({
+  availableCurrencies: a,
+  error: s,
+  hasMultipleCurrencies: i,
+  loading: T,
+  onContactSupport: l,
+  onRowClick: g,
+  showDetails: k,
+  showPagination: v,
+  transactions: w,
+  ...S
 }) => {
-  const { i18n: a } = L(), [h, c] = N(), i = k($.down.sm), M = l(
-    () => Q.map((o) => {
-      const e = a.get(D(o));
+  const { i18n: n } = R(), [D, p] = H(), r = m(c.up.sm), u = m(c.up.md), A = m(c.down.xs), h = d(
+    () => ({
+      dateAndPaymentMethod: A,
+      createdAt: r,
+      transactionType: u,
+      paymentMethod: r
+    }),
+    [A, r, u]
+  ), b = d(
+    () => U.map((o) => {
+      const e = n.get(L(o));
       return o === "amount" ? {
         key: o,
-        label: s ? e : `${e} ${r && r[0] ? `(${R(r[0])})` : ""}`,
-        position: o === "amount" ? H.RIGHT : void 0
-      } : { key: o, label: e };
-    }).filter((o) => !(i && ["status", "type"].includes(o.key))),
-    [r, s, a, i]
-  ), g = {
+        label: i ? e : `${e} ${a && a[0] ? `(${O(a[0])})` : ""}`,
+        position: o === "amount" ? F.RIGHT : void 0,
+        flex: r ? 1.5 : void 0
+      } : { key: o, label: e, visible: h[o] };
+    }),
+    [a, h, i, n, r]
+  ), C = {
     title: "noTransactionsFound",
     message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
-  }, A = C(
+  }, E = V(
     (o) => {
-      c(o ?? void 0);
+      p(o ?? void 0);
     },
-    [c]
-  ), S = l(() => () => /* @__PURE__ */ t(P, { error: n, onContactSupport: m }), [n, m]);
-  return /* @__PURE__ */ t("div", { className: F, children: /* @__PURE__ */ t(
-    d,
+    [p]
+  ), N = d(
+    () => () => /* @__PURE__ */ t(x, { error: s, onContactSupport: l, errorMessage: "weCouldNotLoadYourTransactions" }),
+    [s, l]
+  );
+  return /* @__PURE__ */ t("div", { className: Y, children: /* @__PURE__ */ t(
+    M,
     {
-      errorDisplay: S,
-      error: n,
-      columns: M,
-      data: T,
-      loading: p,
+      errorDisplay: N,
+      error: s,
+      columns: b,
+      data: w,
+      loading: T,
       outline: !1,
-      onRowClick: { callback: u },
-      onRowHover: A,
-      emptyTableMessage: g,
+      onRowClick: { callback: g },
+      onRowHover: E,
+      emptyTableMessage: C,
       customCells: {
         // Remove status column temporarily
         /* status: ({ value }) => {
@@ -69,35 +77,32 @@ const Q = ["createdAt", "paymentMethod", "transactionType", "amount"], lo = ({
                 />
             );
         },*/
+        dateAndPaymentMethod: ({ item: o }) => /* @__PURE__ */ t("div", { className: y, children: [
+          /* @__PURE__ */ t(f, { paymentMethod: o.paymentMethod, bankAccount: o.bankAccount }),
+          /* @__PURE__ */ t("span", { className: y, children: n.date(o.createdAt, {
+            month: "short",
+            day: "numeric",
+            year: void 0,
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: !1
+          }) })
+        ] }),
         transactionType: ({ item: o, rowIndex: e }) => {
-          const E = `tooltip.${o.category}`;
-          return o.category ? a.has(E) ? /* @__PURE__ */ t(_, { value: o.category, isContainerHovered: e === h }) : /* @__PURE__ */ t("span", { children: o.category }) : null;
+          const P = `tooltip.${o.category}`;
+          return o.category ? n.has(P) ? /* @__PURE__ */ t(_, { value: o.category, isContainerHovered: e === D }) : o.category : null;
         },
-        createdAt: ({ value: o }) => a.fullDate(o),
+        createdAt: ({ value: o }) => /* @__PURE__ */ t("span", { children: n.fullDate(o) }),
         amount: ({ value: o }) => {
-          const e = a.amount(o.value, o.currency, { hideCurrency: !s });
-          return /* @__PURE__ */ t("span", { className: x, children: e });
+          const e = n.amount(o.value, o.currency, { hideCurrency: !i });
+          return /* @__PURE__ */ t("span", { className: $, children: e });
         },
-        paymentMethod: ({ item: o }) => {
-          var e;
-          return /* @__PURE__ */ t(W, { children: o.paymentMethod || o.bankAccount ? /* @__PURE__ */ t("div", { className: G, children: [
-            /* @__PURE__ */ t("div", { className: I, children: /* @__PURE__ */ t(
-              w,
-              {
-                name: o.paymentMethod ? o.paymentMethod.type : "bankTransfer",
-                alt: o.paymentMethod ? o.paymentMethod.type : "bankTransfer",
-                folder: "logos/",
-                className: Y
-              }
-            ) }),
-            o.paymentMethod ? b(o.paymentMethod) : (e = o.bankAccount) == null ? void 0 : e.accountNumberLastFourDigits
-          ] }) : /* @__PURE__ */ t(O, { label: a.get("noData"), variant: v.WHITE }) });
-        }
+        paymentMethod: ({ item: o }) => /* @__PURE__ */ t(f, { paymentMethod: o.paymentMethod, bankAccount: o.bankAccount })
       },
-      children: y && /* @__PURE__ */ t(d.Footer, { children: /* @__PURE__ */ t(B, { ...f }) })
+      children: v && /* @__PURE__ */ t(M.Footer, { children: /* @__PURE__ */ t(G, { ...S }) })
     }
   ) });
 };
 export {
-  lo as TransactionsTable
+  no as TransactionsTable
 };

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

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