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

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

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { o } from "../../../../jsxRuntime.module-69493d81.mjs";
+import { UIElement } from "../UIElement.js";
+import TransactionsOverviewContainer from "./components/TransactionsOverviewContainer/TransactionsOverviewContainer.js";
+import "../../../../types-e4bbd37f.mjs";
+class TransactionsElement extends UIElement {
+  constructor(props) {
+    super(props);
+    __publicField(this, "componentToRender", () => {
+      return /* @__PURE__ */ o(
+        TransactionsOverviewContainer,
+        {
+          ...this.props,
+          balanceAccountId: this.props.core.options.balanceAccountId,
+          ref: (ref) => {
+            this.componentRef = ref;
+          },
+          elementRef: this.elementRef
+        }
+      );
+    });
+    this.elementRef = props && props.elementRef || this;
+    this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+__publicField(TransactionsElement, "type", "transactions");
+export {
+  TransactionsElement,
+  TransactionsElement as default
+};

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

@@ -0,0 +1,12 @@
+import '../../../../../../AmountSkeleton.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import cx from "classnames";
+import { BASE_CLASS, LOADING_CLASS, MARGIN_CLASS } from "./constants.js";
+const AmountSkeleton$1 = "";
+const AmountSkeleton = ({ hasMargin = false, isLoading = false, width }) => {
+  return /* @__PURE__ */ o("span", { className: cx(BASE_CLASS, { [LOADING_CLASS]: isLoading, [MARGIN_CLASS]: hasMargin }), style: { width } });
+};
+export {
+  AmountSkeleton,
+  AmountSkeleton as default
+};

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

@@ -0,0 +1,8 @@
+const BASE_CLASS = "adyen-pe-amount-skeleton";
+const MARGIN_CLASS = BASE_CLASS + "--has-margin";
+const LOADING_CLASS = BASE_CLASS + "--loading";
+export {
+  BASE_CLASS,
+  LOADING_CLASS,
+  MARGIN_CLASS
+};

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

@@ -0,0 +1,31 @@
+import '../../../../../../BalanceAccountSelector.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import Select from "../../../../internal/FormFields/Select/Select.js";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+const BalanceAccountSelector$1 = "";
+const BalanceAccountSelector = x(
+  ({
+    activeBalanceAccount,
+    balanceAccountSelectionOptions,
+    onBalanceAccountSelection
+  }) => {
+    const isSmViewport = useMediaQuery(mediaQueries.down.xs);
+    return balanceAccountSelectionOptions && balanceAccountSelectionOptions.length > 1 ? /* @__PURE__ */ o(
+      Select,
+      {
+        popoverClassNameModifiers: ["adyen-pe-balance-account-selector"],
+        onChange: onBalanceAccountSelection,
+        filterable: false,
+        multiSelect: false,
+        selected: activeBalanceAccount == null ? void 0 : activeBalanceAccount.id,
+        withoutCollapseIndicator: true,
+        items: balanceAccountSelectionOptions,
+        showOverlay: isSmViewport
+      }
+    ) : null;
+  }
+);
+export {
+  BalanceAccountSelector as default
+};

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

@@ -0,0 +1,6 @@
+import { default as default2 } from "./BalanceAccountSelector.js";
+import { default as default3 } from "./useBalanceAccountSelection.js";
+export {
+  default2 as default,
+  default3 as useBalanceAccountSelection
+};

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

@@ -0,0 +1,25 @@
+import { h, T, F } from "../../../../../../hooks.module-8565d716.mjs";
+const useBalanceAccountSelection = (balanceAccounts) => {
+  const [selectedBalanceAccountIndex, setSelectedBalanceAccountIndex] = h(0);
+  const resetBalanceAccountSelection = T(() => setSelectedBalanceAccountIndex(0), [setSelectedBalanceAccountIndex]);
+  const activeBalanceAccount = F(() => {
+    return balanceAccounts == null ? void 0 : balanceAccounts[selectedBalanceAccountIndex];
+  }, [balanceAccounts, selectedBalanceAccountIndex]);
+  const balanceAccountSelectionOptions = F(
+    () => balanceAccounts && balanceAccounts.length > 1 ? Object.freeze(balanceAccounts.map(({ id }) => ({ id, name: id }))) : void 0,
+    [balanceAccounts]
+  );
+  const onBalanceAccountSelection = T(
+    ({ target }) => {
+      const balanceAccountId = target == null ? void 0 : target.value;
+      const index = balanceAccounts == null ? void 0 : balanceAccounts.findIndex(({ id }) => id === balanceAccountId);
+      if (index >= 0)
+        setSelectedBalanceAccountIndex(index);
+    },
+    [balanceAccounts, setSelectedBalanceAccountIndex]
+  );
+  return { activeBalanceAccount, balanceAccountSelectionOptions, onBalanceAccountSelection, resetBalanceAccountSelection };
+};
+export {
+  useBalanceAccountSelection as default
+};

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

@@ -0,0 +1,41 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { _, F } from "../../../../../../hooks.module-8565d716.mjs";
+import { SummaryItem } from "../SummaryItem/SummaryItem.js";
+const BalanceItem = ({ balance, isHeader = false, isSkeleton = false, isLoading = false, widths, onWidthsSet, isEmpty }) => {
+  const { i18n } = useCoreContext();
+  const amountRef = _(null);
+  const currencyRef = _(null);
+  const columnConfigs = F(
+    () => [
+      {
+        labelKey: "accountBalance",
+        ref: amountRef,
+        skeletonWidth: 80,
+        getValue: () => balance && i18n.amount(balance.value, balance.currency)
+      },
+      {
+        ref: currencyRef,
+        skeletonWidth: 40,
+        valueHasLabelStyle: true,
+        getValue: () => balance == null ? void 0 : balance.currency
+      }
+    ],
+    [balance, amountRef, i18n]
+  );
+  return /* @__PURE__ */ o(
+    SummaryItem,
+    {
+      isEmpty,
+      columnConfigs,
+      isHeader,
+      isSkeletonVisible: isSkeleton,
+      isLoading,
+      widths,
+      onWidthsSet
+    }
+  );
+};
+export {
+  BalanceItem
+};

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

@@ -0,0 +1,56 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { useSetupEndpoint } from "../../../../../hooks/useSetupEndpoint/useSetupEndpoint.js";
+import { T, F, p } from "../../../../../../hooks.module-8565d716.mjs";
+import "../../../../../utils/common/index.js";
+import { useFetch } from "../../../../../hooks/useFetch/useFetch.js";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import { BASE_CLASS } from "./constants.js";
+import ExpandableCard from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { BaseList } from "../../../../internal/BaseList/BaseList.js";
+import { BalanceItem } from "../BalanceItem/BalanceItem.js";
+import { useMaxWidthsState } from "../../hooks/useMaxWidths.js";
+import { EMPTY_OBJECT } from "../../../../../utils/common/constants.js";
+const Balances = x(({ balanceAccountId, onCurrenciesChange, fullWidth }) => {
+  const getAccountsBalance = useSetupEndpoint("getBalances");
+  const fetchCallback = T(async () => {
+    return getAccountsBalance(EMPTY_OBJECT, {
+      path: { balanceAccountId }
+    });
+  }, [balanceAccountId, getAccountsBalance]);
+  const { data, error, isFetching } = useFetch({
+    fetchOptions: F(() => ({ enabled: !!balanceAccountId }), [balanceAccountId]),
+    queryFn: fetchCallback
+  });
+  const isLoading = !balanceAccountId || isFetching;
+  const isEmpty = !!error || !(data == null ? void 0 : data.balances.length);
+  const balances = data == null ? void 0 : data.balances.sort((a, b) => a.currency.localeCompare(b.currency));
+  const [firstBalance, ...restOfBalances] = balances ?? [];
+  const [maxWidths, setMaxWidths] = useMaxWidthsState();
+  p(() => {
+    const currencies = new Set((balances == null ? void 0 : balances.map(({ currency }) => currency)) || []);
+    onCurrenciesChange(Array.from(currencies), isFetching);
+  }, [balances, isFetching, onCurrenciesChange]);
+  return /* @__PURE__ */ o("div", { className: BASE_CLASS, children: /* @__PURE__ */ o(
+    ExpandableCard,
+    {
+      renderHeader: /* @__PURE__ */ o(
+        BalanceItem,
+        {
+          isEmpty,
+          balance: firstBalance,
+          widths: maxWidths,
+          isHeader: true,
+          isSkeleton: isLoading,
+          isLoading,
+          onWidthsSet: setMaxWidths
+        }
+      ),
+      filled: true,
+      fullWidth,
+      children: restOfBalances.length && /* @__PURE__ */ o(BaseList, { children: restOfBalances.map((balance) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(BalanceItem, { balance, widths: maxWidths, onWidthsSet: setMaxWidths }) }, balance.currency)) })
+    }
+  ) });
+});
+export {
+  Balances
+};

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

@@ -0,0 +1,4 @@
+const BASE_CLASS = "adyen-pe-balances";
+export {
+  BASE_CLASS
+};

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

@@ -0,0 +1,12 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { Tooltip } from "../../../../internal/Tooltip/Tooltip.js";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { k } from "../../../../../../preact.module-38e5a571.mjs";
+function Category({ value, isContainerHovered }) {
+  const { i18n } = useCoreContext();
+  const tooltipKey = `tooltip.${value}`;
+  return /* @__PURE__ */ o(k, { children: i18n.has(tooltipKey) && /* @__PURE__ */ o(Tooltip, { content: i18n.get(tooltipKey), isContainerHovered, children: /* @__PURE__ */ o("span", { children: value }) }) });
+}
+export {
+  Category as default
+};

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

@@ -0,0 +1,12 @@
+import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
+import TransactionDetails from "../../TransactionDetails/components/TransactionDetails.js";
+import { hasOwnProperty } from "../../../../utils/common/index.js";
+import { k } from "../../../../../preact.module-38e5a571.mjs";
+const isTransactionWithoutId = (data) => hasOwnProperty(data, "id");
+function ModalContent({ data }) {
+  const transactionProps = isTransactionWithoutId(data) ? { transaction: data } : { transactionId: data };
+  return /* @__PURE__ */ o(k, { children: transactionProps && /* @__PURE__ */ o(TransactionDetails, { ...transactionProps }) });
+}
+export {
+  ModalContent as default
+};

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

@@ -0,0 +1,33 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import Select from "../../../../internal/FormFields/Select/Select.js";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+const MultiSelectionFilter = x(
+  ({
+    placeholder,
+    selection,
+    selectionOptions,
+    updateSelection
+  }) => {
+    const isSmViewport = useMediaQuery(mediaQueries.down.xs);
+    const isOnlySmDevice = useMediaQuery(mediaQueries.only.sm);
+    const isOnlyMdDevice = useMediaQuery(mediaQueries.only.md);
+    return selectionOptions && selectionOptions.length > 1 ? /* @__PURE__ */ o(
+      Select,
+      {
+        onChange: updateSelection,
+        filterable: false,
+        multiSelect: true,
+        placeholder,
+        selected: selection,
+        withoutCollapseIndicator: true,
+        items: selectionOptions,
+        showOverlay: isSmViewport,
+        fitPosition: isOnlyMdDevice || isOnlySmDevice
+      }
+    ) : null;
+  }
+);
+export {
+  MultiSelectionFilter as default
+};

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

@@ -0,0 +1,15 @@
+import { default as default2 } from "./MultiSelectionFilter.js";
+import { useMultiSelectionFilter, useMultiSelectionFilterWithoutValues } from "./useMultiSelectionFilter/useMultiSelectionFilter.js";
+import { DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS, TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS, TRANSACTION_CATEGORIES, TRANSACTION_STATUSES } from "./useMultiSelectionFilter/constants.js";
+import { listFrom, selectionOptionsFor } from "./useMultiSelectionFilter/utils.js";
+export {
+  DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS,
+  TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS,
+  TRANSACTION_CATEGORIES,
+  TRANSACTION_STATUSES,
+  default2 as default,
+  listFrom,
+  selectionOptionsFor,
+  useMultiSelectionFilter,
+  useMultiSelectionFilterWithoutValues
+};

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

@@ -0,0 +1,27 @@
+import { T as TransactionFilterParam } from "../../../../../../../types-e4bbd37f.mjs";
+const TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS = [
+  TransactionFilterParam.CURRENCIES,
+  TransactionFilterParam.CATEGORIES,
+  TransactionFilterParam.STATUSES
+];
+const DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS = Object.freeze(
+  Object.fromEntries(TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS.map((param) => [param, ""]))
+);
+const TRANSACTION_CATEGORIES = [
+  "ATM",
+  "Capital",
+  "Chargeback",
+  "Correction",
+  "Fee",
+  "Payment",
+  "Refund",
+  "Transfer",
+  "Other"
+];
+const TRANSACTION_STATUSES = ["Booked", "Pending", "Reversed"];
+export {
+  DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS,
+  TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS,
+  TRANSACTION_CATEGORIES,
+  TRANSACTION_STATUSES
+};

package/dist/es/components/external/TransactionsOverview/components/MultiSelectionFilter/useMultiSelectionFilter/index.js

@@ -0,0 +1,13 @@
+import { useMultiSelectionFilter, useMultiSelectionFilterWithoutValues } from "./useMultiSelectionFilter.js";
+import { DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS, TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS, TRANSACTION_CATEGORIES, TRANSACTION_STATUSES } from "./constants.js";
+import { listFrom, selectionOptionsFor } from "./utils.js";
+export {
+  DEFAULT_TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTER_PARAMS,
+  TRANSACTIONS_OVERVIEW_MULTI_SELECTION_FILTERS,
+  TRANSACTION_CATEGORIES,
+  TRANSACTION_STATUSES,
+  useMultiSelectionFilter as default,
+  listFrom,
+  selectionOptionsFor,
+  useMultiSelectionFilterWithoutValues
+};

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

@@ -0,0 +1,31 @@
+import { F, T, h } from "../../../../../../../hooks.module-8565d716.mjs";
+import { listFrom, selectionOptionsFor } from "./utils.js";
+const useMultiSelectionFilter = ({
+  filterParam,
+  filterValues,
+  filters,
+  defaultFilters,
+  updateFilters
+}) => {
+  const selection = F(() => {
+    return listFrom((filters == null ? void 0 : filters[filterParam]) ?? (defaultFilters == null ? void 0 : defaultFilters[filterParam]) ?? "");
+  }, [defaultFilters, filters, filterParam]);
+  const selectionOptions = F(() => filterValues && selectionOptionsFor(filterValues), [filterValues]);
+  const updateSelection = T(
+    ({ target }) => {
+      updateFilters == null ? void 0 : updateFilters({ [filterParam]: (target == null ? void 0 : target.value) || "" });
+    },
+    [updateFilters, filterParam]
+  );
+  return { selection, selectionOptions, updateSelection };
+};
+const useMultiSelectionFilterWithoutValues = (config) => {
+  const [filterValues, updateFilterValues] = h();
+  const useMultiSelectionFilterProperties = useMultiSelectionFilter({ ...config, filterValues });
+  return { ...useMultiSelectionFilterProperties, filterValues, updateFilterValues };
+};
+export {
+  useMultiSelectionFilter as default,
+  useMultiSelectionFilter,
+  useMultiSelectionFilterWithoutValues
+};

package/dist/es/components/external/TransactionsOverview/components/MultiSelectionFilter/useMultiSelectionFilter/utils.js

@@ -0,0 +1,11 @@
+import "../../../../../../utils/common/index.js";
+import { EMPTY_ARRAY } from "../../../../../../utils/common/constants.js";
+const listFrom = (value) => {
+  const stringedValue = `${value}`.trim();
+  return stringedValue ? stringedValue.split(/(?:\s*,\s*)+/).filter(Boolean) : EMPTY_ARRAY;
+};
+const selectionOptionsFor = (list) => Object.freeze(list.map((id) => ({ id, name: id })));
+export {
+  listFrom,
+  selectionOptionsFor
+};

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

@@ -0,0 +1,60 @@
+import '../../../../../../SummaryItem.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { AmountSkeleton } from "../AmountSkeleton/AmountSkeleton.js";
+import { BASE_CLASS, BODY_CLASS, PLACEHOLDER_CLASS, LABEL_CLASS, AMOUNT_CLASS } from "./constants.js";
+import { SummaryItemLabel } from "./SummaryItemLabel.js";
+import { Tooltip } from "../../../../internal/Tooltip/Tooltip.js";
+import { b as TypographyVariant, T as Typography } from "../../../../../../Typography-11b95870.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import cx from "classnames";
+import { p, T } from "../../../../../../hooks.module-8565d716.mjs";
+import { useMediaQuery, mediaQueries } from "../../hooks/useMediaQuery.js";
+const SummaryItem$1 = "";
+const SummaryItem = ({
+  columnConfigs,
+  isHeader = false,
+  isHovered = false,
+  isSkeletonVisible = false,
+  isLoading = false,
+  widths,
+  onWidthsSet,
+  isEmpty
+}) => {
+  const { i18n } = useCoreContext();
+  p(() => {
+    const newWidths = columnConfigs.map((config) => {
+      var _a, _b;
+      return ((_b = (_a = config.ref) == null ? void 0 : _a.current) == null ? void 0 : _b.getBoundingClientRect().width) ?? 0;
+    });
+    onWidthsSet(newWidths);
+  }, [onWidthsSet]);
+  const getColumnStyle = (index) => ({ width: widths && widths[index] ? widths[index] : "auto" });
+  const isXsScreen = useMediaQuery(mediaQueries.only.xs);
+  const typographyVariant = T(
+    (config, isLongValue) => {
+      if (config.valueHasLabelStyle) {
+        return TypographyVariant.CAPTION;
+      }
+      return isLongValue && !isXsScreen ? TypographyVariant.BODY : TypographyVariant.TITLE;
+    },
+    [isXsScreen]
+  );
+  return /* @__PURE__ */ o("div", { className: cx(BASE_CLASS, { [BODY_CLASS]: !isHeader }), children: columnConfigs.map((config, index) => {
+    const value = config.getValue();
+    const isLongValue = !!value && value.length > 12;
+    return /* @__PURE__ */ o("div", { children: [
+      isHeader && (config.tooltipLabel ? /* @__PURE__ */ o(Tooltip, { content: i18n.get(`${config.tooltipLabel}`), isContainerHovered: isHovered, children: /* @__PURE__ */ o(SummaryItemLabel, { config, i18n, isSkeletonVisible }) }) : /* @__PURE__ */ o(SummaryItemLabel, { config, i18n, isSkeletonVisible })),
+      isSkeletonVisible ? /* @__PURE__ */ o(AmountSkeleton, { isLoading, hasMargin: config.hasSkeletonMargin, width: config.skeletonWidth + "px" }) : isEmpty ? /* @__PURE__ */ o("span", { className: cx([BASE_CLASS, PLACEHOLDER_CLASS]) }) : /* @__PURE__ */ o("div", { ref: config.ref, style: getColumnStyle(index), children: /* @__PURE__ */ o(
+        Typography,
+        {
+          variant: typographyVariant(config, isLongValue),
+          className: cx({ [LABEL_CLASS]: config.valueHasLabelStyle, [AMOUNT_CLASS]: !config.valueHasLabelStyle }),
+          children: value
+        }
+      ) })
+    ] }, index);
+  }) });
+};
+export {
+  SummaryItem
+};

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

@@ -0,0 +1,22 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { LABEL_CONTAINER_CLASS, LABEL_CONTAINER_CLASS_LOADING, LABEL_CLASS } from "./constants.js";
+import { T as Typography, b as TypographyVariant } from "../../../../../../Typography-11b95870.mjs";
+import fixedForwardRef from "../../../../../utils/fixedForwardRef.js";
+import cx from "classnames";
+const SummaryItemLabel = fixedForwardRef(
+  ({ config, i18n, isSkeletonVisible, className, ...restArgs }, ref) => {
+    return /* @__PURE__ */ o(
+      "span",
+      {
+        className: cx(LABEL_CONTAINER_CLASS, className, { [LABEL_CONTAINER_CLASS_LOADING]: isSkeletonVisible }),
+        style: { cursor: "default" },
+        ref,
+        ...restArgs,
+        children: config.labelKey && /* @__PURE__ */ o(Typography, { variant: TypographyVariant.CAPTION, className: LABEL_CLASS, children: i18n.get(config.labelKey) })
+      }
+    );
+  }
+);
+export {
+  SummaryItemLabel
+};

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

@@ -0,0 +1,16 @@
+const BASE_CLASS = "adyen-pe-summary-item";
+const LABEL_CONTAINER_CLASS = BASE_CLASS + "__label-container";
+const LABEL_CONTAINER_CLASS_LOADING = LABEL_CONTAINER_CLASS + "--loading";
+const BODY_CLASS = BASE_CLASS + "--body";
+const LABEL_CLASS = BASE_CLASS + "__label";
+const PLACEHOLDER_CLASS = BASE_CLASS + "__placeholder";
+const AMOUNT_CLASS = BASE_CLASS + "__amount";
+export {
+  AMOUNT_CLASS,
+  BASE_CLASS,
+  BODY_CLASS,
+  LABEL_CLASS,
+  LABEL_CONTAINER_CLASS,
+  LABEL_CONTAINER_CLASS_LOADING,
+  PLACEHOLDER_CLASS
+};

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

@@ -0,0 +1,21 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { ErrorMessageDisplay } from "../../../../internal/ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage } from "../../../../utils/transactionResourceErrorCodes.js";
+const TransactionListError = ({ error, onContactSupport }) => {
+  const { title, message, refreshComponent, translationValues, onContactSupport: ContactSupport } = getErrorMessage(error, onContactSupport);
+  return /* @__PURE__ */ o(
+    ErrorMessageDisplay,
+    {
+      title,
+      message,
+      translationValues,
+      withImage: true,
+      centered: true,
+      refreshComponent,
+      onContactSupport: ContactSupport
+    }
+  );
+};
+export {
+  TransactionListError as default
+};

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

@@ -0,0 +1,61 @@
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import useCoreContext from "../../../../../core/Context/useCoreContext.js";
+import { _, F } from "../../../../../../hooks.module-8565d716.mjs";
+import { SummaryItem } from "../SummaryItem/SummaryItem.js";
+const TransactionTotalItem = ({
+  total,
+  hiddenField,
+  isHeader = false,
+  isHovered = false,
+  isSkeleton = false,
+  isLoading = false,
+  widths,
+  onWidthsSet
+}) => {
+  const { i18n } = useCoreContext();
+  const incomingRef = _(null);
+  const expenseRef = _(null);
+  const currencyRef = _(null);
+  const columnConfigs = F(() => {
+    const incomingsConfig = {
+      labelKey: "totalIncoming",
+      ref: incomingRef,
+      skeletonWidth: 80,
+      getValue: () => total && i18n.amount(total.incomings, total.currency),
+      tooltipLabel: "tooltip.totalIncoming"
+    };
+    const expensesConfig = {
+      labelKey: "totalOutgoing",
+      ref: expenseRef,
+      skeletonWidth: 80,
+      getValue: () => total && i18n.amount(total.expenses, total.currency),
+      tooltipLabel: "tooltip.totalOutgoing"
+    };
+    return [
+      ...hiddenField !== "incomings" ? [incomingsConfig] : [],
+      ...hiddenField !== "expenses" ? [expensesConfig] : [],
+      {
+        ref: currencyRef,
+        skeletonWidth: 40,
+        valueHasLabelStyle: true,
+        getValue: () => total == null ? void 0 : total.currency
+      }
+    ];
+  }, [total, hiddenField, i18n]);
+  return /* @__PURE__ */ o(
+    SummaryItem,
+    {
+      isHovered,
+      isEmpty: !total,
+      columnConfigs,
+      isHeader,
+      isSkeletonVisible: isSkeleton,
+      isLoading,
+      widths,
+      onWidthsSet
+    }
+  );
+};
+export {
+  TransactionTotalItem
+};

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

@@ -0,0 +1,50 @@
+import '../../../../../../TotalsCard.css';
+import { o } from "../../../../../../jsxRuntime.module-69493d81.mjs";
+import { h } from "../../../../../../hooks.module-8565d716.mjs";
+import ExpandableCard from "../../../../internal/ExpandableCard/ExpandableCard.js";
+import { x } from "../../../../../../compat.module-a4d537ff.mjs";
+import { TransactionTotalItem } from "../TransactionTotalItem/TransactionTotalItem.js";
+import { BaseList } from "../../../../internal/BaseList/BaseList.js";
+import { useMaxWidthsState } from "../../hooks/useMaxWidths.js";
+const TransactionTotals = "";
+const TotalsCard = x(({ totals, isLoading, hiddenField, fullWidth }) => {
+  const [firstTotal, ...restOfTotals] = totals;
+  const [maxWidths, setMaxWidths] = useMaxWidthsState();
+  const [isHovered, setIsHovered] = h(false);
+  return /* @__PURE__ */ o(
+    ExpandableCard,
+    {
+      renderHeader: /* @__PURE__ */ o(
+        TransactionTotalItem,
+        {
+          isHovered,
+          total: firstTotal,
+          hiddenField,
+          widths: maxWidths,
+          isHeader: true,
+          isSkeleton: isLoading,
+          isLoading,
+          onWidthsSet: setMaxWidths
+        }
+      ),
+      fullWidth,
+      onMouseEnter: () => setIsHovered(true),
+      onFocus: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onBlur: () => setIsHovered(false),
+      children: !isLoading && restOfTotals.length && /* @__PURE__ */ o(BaseList, { children: restOfTotals.map((total) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(
+        TransactionTotalItem,
+        {
+          isHovered,
+          total,
+          hiddenField,
+          widths: maxWidths,
+          onWidthsSet: setMaxWidths
+        }
+      ) }, total.currency)) })
+    }
+  );
+});
+export {
+  TotalsCard
+};