@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta.1

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

@@ -0,0 +1,66 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { useSetupEndpoint } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { T, F } from "../../../../../../hooks.module-8565d716.mjs";
+import "../../../../../utils/common/index.js";
+import { useFetch } from "../../../../../hooks/useFetch/useFetch.js";
+import { BASE_CLASS, ITEM_CLASS } from "./constants.js";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+import { TotalsCard } from "./TotalsCard.js";
+import { k } from "../../../../../../preact.module-38e5a571.mjs";
+import { EMPTY_OBJECT } from "../../../../../utils/common/constants.js";
+const TransactionTotals = x(
+  ({
+    availableCurrencies,
+    isAvailableCurrenciesFetching,
+    balanceAccountId,
+    createdSince,
+    createdUntil,
+    categories,
+    statuses,
+    maxAmount,
+    minAmount,
+    currencies,
+    fullWidth
+  }) => {
+    const getTransactionTotals = useSetupEndpoint("getTransactionTotals");
+    const fetchCallback = T(async () => {
+      return getTransactionTotals(EMPTY_OBJECT, {
+        query: {
+          createdSince,
+          createdUntil,
+          categories,
+          statuses,
+          maxAmount,
+          minAmount,
+          currencies,
+          balanceAccountId
+        }
+      });
+    }, [balanceAccountId, categories, createdSince, createdUntil, currencies, getTransactionTotals, maxAmount, minAmount, statuses]);
+    const { data, isFetching } = useFetch({
+      fetchOptions: F(() => ({ enabled: !!balanceAccountId }), [balanceAccountId]),
+      queryFn: fetchCallback
+    });
+    const isLoading = !balanceAccountId || isFetching || isAvailableCurrenciesFetching;
+    const getTotals = T(() => {
+      if (!availableCurrencies || !data) {
+        return data == null ? void 0 : data.totals;
+      }
+      const partialTotals = availableCurrencies.map((currency) => {
+        const totalOfCurrency = data.totals.find((total) => total.currency === currency);
+        return totalOfCurrency || { currency, incomings: 0, expenses: 0 };
+      });
+      return partialTotals.concat(data.totals.filter((total) => !partialTotals.includes(total)));
+    }, [availableCurrencies, data]);
+    const totals = getTotals() ?? [];
+    const isXsScreen = useMediaQuery(mediaQueries.only.xs);
+    return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: isXsScreen ? /* @__PURE__ */ o(k, { children: [
+      /* @__PURE__ */ o("div", { className: ITEM_CLASS, children: /* @__PURE__ */ o(TotalsCard, { totals, isLoading, hiddenField: "expenses", fullWidth }) }),
+      /* @__PURE__ */ o("div", { className: ITEM_CLASS, children: /* @__PURE__ */ o(TotalsCard, { totals, isLoading, hiddenField: "incomings", fullWidth }) })
+    ] }) : /* @__PURE__ */ o(TotalsCard, { totals, isLoading, fullWidth }) });
+  }
+);
+export {
+  TransactionTotals as default
+};

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

@@ -0,0 +1,6 @@
+const BASE_CLASS = "adyen-pe-transaction-totals";
+const ITEM_CLASS = "adyen-pe-transaction-totals__item";
+export {
+  BASE_CLASS,
+  ITEM_CLASS
+};

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

@@ -0,0 +1,91 @@
+import '../../../../../../TransactionsDisplay.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import Modal from "../../../../internal/Modal/Modal.js";
+import { popoverUtil } from "../../../../internal/Popover/utils/popoverUtil.js";
+import Spinner from "../../../../internal/Spinner/Spinner.js";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import useModalDetails from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import { U, M } from "../../../../../../compat.module-a4d537ff.mjs";
+import { F, T, p } from "../../../../../../hooks.module-8565d716.mjs";
+import { BASE_CLASS, SPINNER_CONTAINER_CLASS } from "./constants.js";
+import { TransactionsTable } from "../TransactionsTable/TransactionsTable.js";
+const TransactionsDisplay$1 = "";
+const ModalContent = M(() => import("../ModalContent.js"));
+const TransactionsDisplay = ({
+  availableCurrencies,
+  balanceAccountDescription,
+  error,
+  loading,
+  onContactSupport,
+  onTransactionSelected,
+  showDetails,
+  showPagination,
+  transactions,
+  ...paginationProps
+}) => {
+  const { i18n } = useCoreContext();
+  const hasMultipleCurrencies = !!availableCurrencies && availableCurrencies.length > 1;
+  const transactionDetails = F(
+    () => ({
+      showDetails: showDetails ?? true,
+      callback: onTransactionSelected
+    }),
+    [showDetails, onTransactionSelected]
+  );
+  const modalOptions = F(() => ({ transaction: transactionDetails }), [transactionDetails]);
+  const { updateDetails, resetDetails, selectedDetail } = useModalDetails(modalOptions);
+  const onRowClick = T(
+    (value) => {
+      updateDetails({
+        selection: { type: "transaction", data: { ...value, balanceAccountDescription } },
+        modalSize: "small"
+      }).callback({ id: value.id });
+    },
+    [updateDetails, balanceAccountDescription]
+  );
+  const isModalOpen = !!selectedDetail;
+  p(() => {
+    if (isModalOpen) {
+      popoverUtil.closeAll();
+    }
+  }, [isModalOpen]);
+  return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: [
+    /* @__PURE__ */ o(
+      TransactionsTable,
+      {
+        availableCurrencies,
+        error,
+        hasMultipleCurrencies,
+        loading,
+        onContactSupport,
+        onRowClick,
+        onTransactionSelected,
+        showPagination,
+        transactions,
+        ...paginationProps
+      }
+    ),
+    /* @__PURE__ */ o(
+      Modal,
+      {
+        title: (selectedDetail == null ? void 0 : selectedDetail.title) ? i18n.get(selectedDetail.title) : void 0,
+        isOpen: !!selectedDetail,
+        "aria-label": i18n.get("transactionDetails"),
+        onClose: resetDetails,
+        isDismissible: true,
+        headerWithBorder: false,
+        size: (selectedDetail == null ? void 0 : selectedDetail.modalSize) ?? "large",
+        children: selectedDetail && /* @__PURE__ */ o(
+          U,
+          {
+            fallback: /* @__PURE__ */ o("span", { className: SPINNER_CONTAINER_CLASS, children: /* @__PURE__ */ o(Spinner, { size: "medium" }) }),
+            children: /* @__PURE__ */ o(ModalContent, { data: selectedDetail.selection.data })
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  TransactionsDisplay
+};

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

@@ -0,0 +1,6 @@
+const BASE_CLASS = "adyen-pe-transactions-display";
+const SPINNER_CONTAINER_CLASS = BASE_CLASS + "__spinner-container";
+export {
+  BASE_CLASS,
+  SPINNER_CONTAINER_CLASS
+};

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

@@ -0,0 +1,182 @@
+import '../../../../../../TransactionsOverview.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import FilterBar from "../../../../internal/FilterBar/FilterBar.js";
+import { T as TransactionFilterParam } from "../../../../../../types-deec0d78.mjs";
+import { TransactionsDisplay } from "../TransactionsDisplay/TransactionsDisplay.js";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { useSetupEndpoint } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { T, F, h, p } from "../../../../../../hooks.module-8565d716.mjs";
+import useCursorPaginatedRecords from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import "../../../../../../usePaginatedRecords-63a69bf1.mjs";
+import { isFunction } from "../../../../../utils/common/index.js";
+import { LIMIT_OPTIONS, DEFAULT_PAGE_LIMIT } from "../../../../internal/Pagination/constants.js";
+import TransactionsOverviewDateFilter from "../TransactionsOverviewDateFilter.js";
+import TransactionTotals from "../TransactionTotals/TransactionTotals.js";
+import { Balances } from "../Balances/Balances.js";
+import BalanceAccountSelector from "../BalanceAccountSelector/BalanceAccountSelector.js";
+import useBalanceAccountSelection from "../BalanceAccountSelector/useBalanceAccountSelection.js";
+import MultiSelectionFilter from "../MultiSelectionFilter/MultiSelectionFilter.js";
+import { listFrom } from "../MultiSelectionFilter/useMultiSelectionFilter/utils.js";
+import "../MultiSelectionFilter/useMultiSelectionFilter/constants.js";
+import useDefaultTransactionsOverviewFilterParams from "../../hooks/useDefaultTransactionsOverviewFilterParams.js";
+import useTransactionsOverviewMultiSelectionFilters from "../../hooks/useTransactionsOverviewMultiSelectionFilters.js";
+import { AmountFilter } from "../../../../internal/FilterBar/filters/AmountFilter/AmountFilter.js";
+import { BASE_CLASS, SUMMARY_CLASS, SUMMARY_ITEM_CLASS } from "./constants.js";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+const TransactionsOverview$1 = "";
+const TransactionsOverview = ({
+  onFiltersChanged,
+  onLimitChanged,
+  balanceAccounts,
+  allowLimitSelection,
+  preferredLimit = DEFAULT_PAGE_LIMIT,
+  onTransactionSelected,
+  showDetails,
+  isLoadingBalanceAccount,
+  onContactSupport
+}) => {
+  const { i18n } = useCoreContext();
+  const transactionsEndpointCall = useSetupEndpoint("getTransactions");
+  const { activeBalanceAccount, balanceAccountSelectionOptions, onBalanceAccountSelection } = useBalanceAccountSelection(balanceAccounts);
+  const { defaultParams, nowTimestamp, refreshNowTimestamp } = useDefaultTransactionsOverviewFilterParams(activeBalanceAccount);
+  const getTransactions = T(
+    async ({ balanceAccount, ...pageRequestParams }, signal) => {
+      const requestOptions = { signal, errorLevel: "error" };
+      return transactionsEndpointCall(requestOptions, {
+        query: {
+          ...pageRequestParams,
+          statuses: listFrom(pageRequestParams[TransactionFilterParam.STATUSES]),
+          categories: listFrom(pageRequestParams[TransactionFilterParam.CATEGORIES]),
+          currencies: listFrom(pageRequestParams[TransactionFilterParam.CURRENCIES]),
+          createdSince: pageRequestParams[TransactionFilterParam.CREATED_SINCE] ?? defaultParams.current.defaultFilterParams[TransactionFilterParam.CREATED_SINCE],
+          createdUntil: pageRequestParams[TransactionFilterParam.CREATED_UNTIL] ?? defaultParams.current.defaultFilterParams[TransactionFilterParam.CREATED_UNTIL],
+          sortDirection: "desc",
+          balanceAccountId: (activeBalanceAccount == null ? void 0 : activeBalanceAccount.id) ?? "",
+          minAmount: pageRequestParams.minAmount !== void 0 ? parseFloat(pageRequestParams.minAmount) : void 0,
+          maxAmount: pageRequestParams.maxAmount !== void 0 ? parseFloat(pageRequestParams.maxAmount) : void 0
+        }
+      });
+    },
+    [activeBalanceAccount == null ? void 0 : activeBalanceAccount.id, defaultParams, transactionsEndpointCall]
+  );
+  const _onFiltersChanged = F(() => isFunction(onFiltersChanged) ? onFiltersChanged : void 0, [onFiltersChanged]);
+  const _onLimitChanged = F(() => isFunction(onLimitChanged) ? onLimitChanged : void 0, [onLimitChanged]);
+  const preferredLimitOptions = F(() => allowLimitSelection ? LIMIT_OPTIONS : void 0, [allowLimitSelection]);
+  const { canResetFilters, error, fetching, filters, limit, limitOptions, records, resetFilters, updateFilters, updateLimit, ...paginationProps } = useCursorPaginatedRecords({
+    fetchRecords: getTransactions,
+    dataField: "transactions",
+    filterParams: defaultParams.current.defaultFilterParams,
+    initialFiltersSameAsDefault: true,
+    onLimitChanged: _onLimitChanged,
+    onFiltersChanged: _onFiltersChanged,
+    preferredLimit,
+    preferredLimitOptions,
+    enabled: !!(activeBalanceAccount == null ? void 0 : activeBalanceAccount.id)
+  });
+  const [availableCurrencies, setAvailableCurrencies] = h([]);
+  const [isAvailableCurrenciesFetching, setIsAvailableCurrenciesFetching] = h(false);
+  const handleCurrenciesChange = T((currencies, isFetching) => {
+    setAvailableCurrencies(currencies);
+    setIsAvailableCurrenciesFetching(isFetching);
+  }, []);
+  const { categoriesFilter, currenciesFilter, statusesFilter } = useTransactionsOverviewMultiSelectionFilters(
+    {
+      filters,
+      updateFilters
+    },
+    availableCurrencies
+  );
+  p(() => {
+    setAvailableCurrencies(void 0);
+    updateFilters({
+      [TransactionFilterParam.BALANCE_ACCOUNT]: activeBalanceAccount == null ? void 0 : activeBalanceAccount.id,
+      [TransactionFilterParam.CURRENCIES]: void 0
+    });
+  }, [updateFilters, activeBalanceAccount == null ? void 0 : activeBalanceAccount.id]);
+  p(() => {
+    refreshNowTimestamp();
+  }, [filters, refreshNowTimestamp]);
+  p(() => {
+    statusesFilter.updateSelection({ target: { value: "Booked", name: "status" } });
+  }, [statusesFilter]);
+  const isNarrowViewport = useMediaQuery(mediaQueries.down.sm);
+  return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: [
+    /* @__PURE__ */ o(FilterBar, { children: [
+      /* @__PURE__ */ o(
+        BalanceAccountSelector,
+        {
+          activeBalanceAccount,
+          balanceAccountSelectionOptions,
+          onBalanceAccountSelection
+        }
+      ),
+      /* @__PURE__ */ o(
+        TransactionsOverviewDateFilter,
+        {
+          canResetFilters,
+          defaultParams,
+          filters,
+          nowTimestamp,
+          refreshNowTimestamp,
+          updateFilters
+        }
+      ),
+      /* @__PURE__ */ o(MultiSelectionFilter, { ...categoriesFilter, placeholder: i18n.get("filterPlaceholder.category") }),
+      /* @__PURE__ */ o(
+        AmountFilter,
+        {
+          availableCurrencies,
+          selectedCurrencies: listFrom(filters[TransactionFilterParam.CURRENCIES]),
+          name: "range",
+          label: i18n.get("amount"),
+          minAmount: filters[TransactionFilterParam.MIN_AMOUNT],
+          maxAmount: filters[TransactionFilterParam.MAX_AMOUNT],
+          updateFilters,
+          onChange: updateFilters
+        }
+      ),
+      /* @__PURE__ */ o(MultiSelectionFilter, { ...currenciesFilter, placeholder: i18n.get("filterPlaceholder.currency") })
+    ] }),
+    /* @__PURE__ */ o("div", { className: SUMMARY_CLASS, children: [
+      /* @__PURE__ */ o("div", { className: SUMMARY_ITEM_CLASS, children: /* @__PURE__ */ o(
+        TransactionTotals,
+        {
+          availableCurrencies,
+          isAvailableCurrenciesFetching,
+          balanceAccountId: activeBalanceAccount == null ? void 0 : activeBalanceAccount.id,
+          statuses: statusesFilter.selection,
+          categories: categoriesFilter.selection,
+          createdUntil: filters[TransactionFilterParam.CREATED_UNTIL],
+          createdSince: filters[TransactionFilterParam.CREATED_SINCE],
+          currencies: currenciesFilter.selection,
+          minAmount: filters[TransactionFilterParam.MIN_AMOUNT] ? parseFloat(filters[TransactionFilterParam.MIN_AMOUNT]) : void 0,
+          maxAmount: filters[TransactionFilterParam.MAX_AMOUNT] ? parseFloat(filters[TransactionFilterParam.MAX_AMOUNT]) : void 0,
+          fullWidth: isNarrowViewport
+        }
+      ) }),
+      /* @__PURE__ */ o("div", { className: SUMMARY_ITEM_CLASS, children: /* @__PURE__ */ o(Balances, { balanceAccountId: activeBalanceAccount == null ? void 0 : activeBalanceAccount.id, onCurrenciesChange: handleCurrenciesChange, fullWidth: isNarrowViewport }) })
+    ] }),
+    /* @__PURE__ */ o(
+      TransactionsDisplay,
+      {
+        balanceAccounts,
+        availableCurrencies,
+        loading: fetching || isLoadingBalanceAccount || !balanceAccounts,
+        transactions: records,
+        onTransactionSelected,
+        showPagination: true,
+        showDetails,
+        balanceAccountDescription: (activeBalanceAccount == null ? void 0 : activeBalanceAccount.description) || "",
+        limit,
+        limitOptions,
+        onContactSupport,
+        onLimitSelection: updateLimit,
+        error,
+        ...paginationProps
+      }
+    )
+  ] });
+};
+export {
+  TransactionsOverview
+};

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

@@ -0,0 +1,8 @@
+const BASE_CLASS = "adyen-pe-transactions-overview";
+const SUMMARY_CLASS = BASE_CLASS + "__summary";
+const SUMMARY_ITEM_CLASS = BASE_CLASS + "__summary-item";
+export {
+  BASE_CLASS,
+  SUMMARY_CLASS,
+  SUMMARY_ITEM_CLASS
+};

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

@@ -0,0 +1,52 @@
+import '../../../../../../TransactionsOverviewContainer.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { useSetupEndpoint } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { useFetch } from "../../../../../hooks/useFetch/useFetch.js";
+import { TransactionsOverview } from "../TransactionsOverview/TransactionsOverview.js";
+import { T, F } from "../../../../../../hooks.module-8565d716.mjs";
+import "../../../../../utils/common/index.js";
+import useAuthContext from "../../../../../core/Auth/useAuthContext.js";
+import cx from "classnames";
+import { ErrorMessageDisplay } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { BASE_CLASS, WITH_ERROR_CLASS } from "./constants.js";
+import { EMPTY_OBJECT } from "../../../../../utils/common/constants.js";
+const TransactionsOverviewContainer$1 = "";
+function TransactionsOverviewContainer(props) {
+  const { sessionSetupError, endpoints } = useAuthContext();
+  const balanceAccountEndpointCall = useSetupEndpoint("getBalanceAccounts");
+  const { data, isFetching } = useFetch({
+    fetchOptions: { enabled: !!endpoints.getBalanceAccounts, keepPrevData: true },
+    queryFn: T(async () => {
+      return balanceAccountEndpointCall(EMPTY_OBJECT);
+    }, [balanceAccountEndpointCall])
+  });
+  const balanceAccounts = F(
+    () => data == null ? void 0 : data.balanceAccounts.filter((account) => props.balanceAccountId ? account.id === props.balanceAccountId : true),
+    [data == null ? void 0 : data.balanceAccounts, props.balanceAccountId]
+  );
+  const wrongBalanceAccountId = F(
+    () => !!props.balanceAccountId && !!(data == null ? void 0 : data.balanceAccounts.length) && (balanceAccounts == null ? void 0 : balanceAccounts.length) === 0,
+    [balanceAccounts == null ? void 0 : balanceAccounts.length, data == null ? void 0 : data.balanceAccounts.length, props.balanceAccountId]
+  );
+  return /* @__PURE__ */ o("div", { className: cx(BASE_CLASS, { [WITH_ERROR_CLASS]: sessionSetupError }), children: sessionSetupError ? /* @__PURE__ */ o(
+    ErrorMessageDisplay,
+    {
+      withImage: true,
+      centered: true,
+      title: "somethingWentWrong",
+      message: ["weCouldNotLoadTheTransactionsOverview", "tryRefreshingThePageOrComeBackLater"],
+      refreshComponent: true
+    }
+  ) : wrongBalanceAccountId ? /* @__PURE__ */ o(
+    ErrorMessageDisplay,
+    {
+      withImage: true,
+      centered: true,
+      title: "somethingWentWrong",
+      message: ["weCouldNotLoadTheTransactionsOverview", "theSelectedBalanceAccountIsIncorrect"]
+    }
+  ) : /* @__PURE__ */ o(TransactionsOverview, { ...props, balanceAccounts, isLoadingBalanceAccount: isFetching }) });
+}
+export {
+  TransactionsOverviewContainer as default
+};

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

@@ -0,0 +1,6 @@
+const BASE_CLASS = "adyen-pe-transactions-overview-container";
+const WITH_ERROR_CLASS = BASE_CLASS + "--with-error";
+export {
+  BASE_CLASS,
+  WITH_ERROR_CLASS
+};

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

@@ -0,0 +1,71 @@
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import { F, h, T } from "../../../../../hooks.module-8565d716.mjs";
+import useCoreContext from "../../../../core/Context/useCoreContext.js";
+import { D as DateRangeFilterParam, a as DateFilter } from "../../../../../index-f5bc0382.mjs";
+import { T as TransactionFilterParam } from "../../../../../types-deec0d78.mjs";
+import "../../../../utils/common/index.js";
+import { EMPTY_OBJECT } from "../../../../utils/common/constants.js";
+const TransactionsOverviewDateFilter = ({
+  balanceAccount,
+  canResetFilters,
+  defaultParams,
+  filters,
+  nowTimestamp,
+  refreshNowTimestamp,
+  updateFilters
+}) => {
+  const { i18n } = useCoreContext();
+  const defaultTimeRangePreset = F(() => i18n.get(defaultParams.current.defaultTimeRange), [i18n]);
+  const [selectedTimeRangePreset, setSelectedTimeRangePreset] = h(defaultTimeRangePreset);
+  const updateCreatedDateFilter = T(
+    (params = EMPTY_OBJECT) => {
+      for (const [param, value] of Object.entries(params)) {
+        switch (param) {
+          case "selectedPresetOption":
+            setSelectedTimeRangePreset(value || defaultTimeRangePreset);
+            break;
+          case DateRangeFilterParam.FROM:
+            updateFilters({
+              [TransactionFilterParam.CREATED_SINCE]: value || defaultParams.current.defaultFilterParams[TransactionFilterParam.CREATED_SINCE]
+            });
+            break;
+          case DateRangeFilterParam.TO:
+            updateFilters({
+              [TransactionFilterParam.CREATED_UNTIL]: value || defaultParams.current.defaultFilterParams[TransactionFilterParam.CREATED_UNTIL]
+            });
+            break;
+          default:
+            return;
+        }
+        refreshNowTimestamp();
+      }
+    },
+    [defaultTimeRangePreset, refreshNowTimestamp, updateFilters]
+  );
+  F(() => !canResetFilters && setSelectedTimeRangePreset(defaultTimeRangePreset), [canResetFilters, defaultTimeRangePreset]);
+  const sinceDate = F(() => {
+    const date = new Date(nowTimestamp);
+    date.setMonth(date.getMonth() - 24);
+    return date.toString();
+  }, [nowTimestamp]);
+  return /* @__PURE__ */ o(
+    DateFilter,
+    {
+      label: i18n.get("dateRange"),
+      name: TransactionFilterParam.CREATED_SINCE,
+      sinceDate,
+      untilDate: new Date(nowTimestamp).toString(),
+      from: filters[TransactionFilterParam.CREATED_SINCE],
+      to: filters[TransactionFilterParam.CREATED_UNTIL],
+      selectedPresetOption: selectedTimeRangePreset,
+      timeRangePresetOptions: defaultParams.current.timeRangeOptions,
+      timezone: balanceAccount == null ? void 0 : balanceAccount.timeZone,
+      onChange: updateCreatedDateFilter,
+      showTimezoneInfo: true,
+      now: nowTimestamp
+    }
+  );
+};
+export {
+  TransactionsOverviewDateFilter as default
+};

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

@@ -0,0 +1,112 @@
+import '../../../../../../TransactionsTable.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import Category from "../Category/Category.js";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { h, F, T } from "../../../../../../hooks.module-8565d716.mjs";
+import { C as CellTextPosition, D as DataGrid } from "../../../../../../index-6e47f755.mjs";
+import Pagination from "../../../../internal/Pagination/Pagination.js";
+import { getLabel, parsePaymentMethodType } from "../utils.js";
+import { T as Tag, a as TagVariant } from "../../../../../../Tag-6d02fd64.mjs";
+import { Image } from "../../../../internal/Image/Image.js";
+import TransactionListError from "../TransactionListError/TransactionListError.js";
+import { getCurrencyCode } from "../../../../../core/Localization/amount/amount-util.js";
+import { BASE_CLASS, AMOUNT_CLASS, PAYMENT_METHOD_CLASS, PAYMENT_METHOD_LOGO_CONTAINER_CLASS, PAYMENT_METHOD_LOGO_CLASS } from "./constants.js";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+import { k } from "../../../../../../preact.module-38e5a571.mjs";
+const TransactionTable = "";
+const FIELDS = ["creationDate", "paymentMethod", "transactionType", "amount"];
+const TransactionsTable = ({
+  availableCurrencies,
+  error,
+  hasMultipleCurrencies,
+  loading,
+  onContactSupport,
+  onRowClick,
+  onTransactionSelected,
+  showDetails,
+  showPagination,
+  transactions,
+  ...paginationProps
+}) => {
+  const { i18n } = useCoreContext();
+  const [hoveredRow, setHoveredRow] = h();
+  const isSmViewport = useMediaQuery(mediaQueries.down.sm);
+  const columns = F(
+    () => FIELDS.map((key) => {
+      const label = i18n.get(getLabel(key));
+      if (key === "amount") {
+        return {
+          key,
+          label: hasMultipleCurrencies ? label : `${label} ${availableCurrencies && availableCurrencies[0] ? `(${getCurrencyCode(availableCurrencies[0])})` : ""}`,
+          position: key === "amount" ? CellTextPosition.RIGHT : void 0
+        };
+      }
+      return { key, label };
+    }).filter((column) => !(isSmViewport && ["status", "type"].includes(column.key))),
+    [availableCurrencies, hasMultipleCurrencies, i18n, isSmViewport]
+  );
+  const EMPTY_TABLE_MESSAGE = {
+    title: "noTransactionsFound",
+    message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
+  };
+  const onHover = T(
+    (index) => {
+      setHoveredRow(index ?? void 0);
+    },
+    [setHoveredRow]
+  );
+  const errorDisplay = F(() => () => /* @__PURE__ */ o(TransactionListError, { error, onContactSupport }), [error, onContactSupport]);
+  return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: /* @__PURE__ */ o(
+    DataGrid,
+    {
+      errorDisplay,
+      error,
+      columns,
+      data: transactions,
+      loading,
+      outline: false,
+      onRowClick: { callback: onRowClick },
+      onRowHover: onHover,
+      emptyTableMessage: EMPTY_TABLE_MESSAGE,
+      customCells: {
+        // Remove status column temporarily
+        /* status: ({ value }) => {
+            return (
+                <Tag
+                    label={i18n.get(value)}
+                    variant={value === 'Booked' ? TagVariant.SUCCESS : value === 'Reversed' ? TagVariant.ERROR : TagVariant.DEFAULT}
+                />
+            );
+        },*/
+        transactionType: ({ item, rowIndex }) => {
+          const tooltipKey = `tooltip.${item.category}`;
+          return item.category ? i18n.has(tooltipKey) ? /* @__PURE__ */ o(Category, { value: item.category, isContainerHovered: rowIndex === hoveredRow }) : /* @__PURE__ */ o("span", { children: item.category }) : null;
+        },
+        creationDate: ({ value }) => i18n.fullDate(value),
+        amount: ({ value }) => {
+          const amount = i18n.amount(value.value, value.currency, { hideCurrency: !hasMultipleCurrencies });
+          return /* @__PURE__ */ o("span", { className: AMOUNT_CLASS, children: amount });
+        },
+        paymentMethod: ({ item }) => {
+          var _a;
+          return /* @__PURE__ */ o(k, { children: item.paymentMethod || item.bankAccount ? /* @__PURE__ */ o("div", { className: PAYMENT_METHOD_CLASS, children: [
+            /* @__PURE__ */ o("div", { className: PAYMENT_METHOD_LOGO_CONTAINER_CLASS, children: /* @__PURE__ */ o(
+              Image,
+              {
+                name: item.paymentMethod ? item.paymentMethod.type : "bankTransfer",
+                alt: item.paymentMethod ? item.paymentMethod.type : "bankTransfer",
+                folder: "logos/",
+                className: PAYMENT_METHOD_LOGO_CLASS
+              }
+            ) }),
+            item.paymentMethod ? parsePaymentMethodType(item.paymentMethod) : (_a = item.bankAccount) == null ? void 0 : _a.accountNumberLastFourDigits
+          ] }) : /* @__PURE__ */ o(Tag, { label: i18n.get("noData"), variant: TagVariant.WHITE }) });
+        }
+      },
+      children: showPagination && /* @__PURE__ */ o(DataGrid.Footer, { children: /* @__PURE__ */ o(Pagination, { ...paginationProps }) })
+    }
+  ) });
+};
+export {
+  TransactionsTable
+};

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

@@ -0,0 +1,12 @@
+const BASE_CLASS = "adyen-pe-transactions-table";
+const AMOUNT_CLASS = BASE_CLASS + "__amount";
+const PAYMENT_METHOD_CLASS = BASE_CLASS + "__payment-method";
+const PAYMENT_METHOD_LOGO_CONTAINER_CLASS = BASE_CLASS + "__payment-method-logo-container";
+const PAYMENT_METHOD_LOGO_CLASS = BASE_CLASS + "__payment-method-logo";
+export {
+  AMOUNT_CLASS,
+  BASE_CLASS,
+  PAYMENT_METHOD_CLASS,
+  PAYMENT_METHOD_LOGO_CLASS,
+  PAYMENT_METHOD_LOGO_CONTAINER_CLASS
+};

package/dist/es/components/external/{Transactions → TransactionsOverview}/components/utils.js

@@ -1,6 +1,6 @@
-const a = {
+const labels = {
   id: "paymentId",
-  type: "type",
+  transactionType: "transactionType",
   creationDate: "date",
   balanceAccountId: "balanceAccount",
   accountHolderId: "account",
@@ -16,14 +16,20 @@ const a = {
   category: "category",
   paymentMethod: "paymentMethod",
   currency: "currency"
-}, n = (t) => a[t] || t, r = Object.freeze({
+};
+const getLabel = (key) => {
+  return labels[key] || key;
+};
+const PAYMENT_METHODS = Object.freeze({
   klarna: "Klarna",
   paypal: "PayPal"
 });
-function c(t, e) {
-  return t.lastFourDigits ? e === "detail" ? "•••• •••• •••• " + t.lastFourDigits : t.lastFourDigits : r[t.type] || t.type;
+function parsePaymentMethodType(paymentMethod, format) {
+  if (paymentMethod.lastFourDigits)
+    return format === "detail" ? "•••• •••• •••• " + paymentMethod.lastFourDigits : paymentMethod.lastFourDigits;
+  return PAYMENT_METHODS[paymentMethod.type] || paymentMethod.type;
 }
 export {
-  n as getLabel,
-  c as parsePaymentMethodType
+  getLabel,
+  parsePaymentMethodType
 };