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

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

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

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

@@ -0,0 +1,12 @@
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TRANSACTION_ANALYTICS_SUBCATEGORY_INSIGHTS as s, TRANSACTION_ANALYTICS_CATEGORY as e } from "../../constants.js";
+import { useDurationEvent as a } from "../../../../../hooks/useAnalytics/useDurationEvent.js";
+import { useLandedPageEvent as n } from "../../../../../hooks/useAnalytics/useLandedPageEvent.js";
+import i from "../InsightsTotals/InsightsTotals.js";
+const t = {
+  category: e,
+  subCategory: s
+}, u = (r) => (n(t), a(t), /* @__PURE__ */ o(i, { ...r }));
+export {
+  u as default
+};

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

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

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

@@ -6,27 +6,24 @@ import { TagVariant as n } from "../../../../internal/Tag/types.js";
 import { TypographyVariant as T } from "../../../../internal/Typography/types.js";
 import f from "../../../../internal/Typography/Typography.js";
 import { useResponsiveContainer as l, containerQueries as p } from "../../../../../hooks/useResponsiveContainer.js";
-import { parsePaymentMethodType as g } from "../utils.js";
-import { PAYMENT_METHOD_CLASS as _, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as N, PAYMENT_METHOD_LOGO_CLASS as O } from "./constants.js";
-import { Fragment as C } from "../../../../../external/preact/dist/preact.module.js";
-const x = ({
-  paymentMethod: r,
-  bankAccount: a
-}) => {
+import { parsePaymentMethodType as c } from "../utils.js";
+import { PAYMENT_METHOD_CLASS as g, PAYMENT_METHOD_LOGO_CONTAINER_CLASS as _, PAYMENT_METHOD_LOGO_CLASS as N } from "./constants.js";
+import { Fragment as O } from "../../../../../external/preact/dist/preact.module.js";
+const P = ({ paymentMethod: r, bankAccount: a }) => {
   const { i18n: i } = m(), e = l(p.down.xs);
-  return /* @__PURE__ */ o("div", { className: _, children: r || a ? /* @__PURE__ */ o(C, { children: [
-    /* @__PURE__ */ o("div", { className: N, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o("div", { className: g, children: r || a ? /* @__PURE__ */ o(O, { children: [
+    /* @__PURE__ */ o("div", { className: _, children: /* @__PURE__ */ o(
       s,
       {
         name: r ? r.type : "bankTransfer",
         alt: r ? r.type : "bankTransfer",
         folder: "logos/",
-        className: O
+        className: N
       }
     ) }),
-    /* @__PURE__ */ o(f, { variant: T.BODY, stronger: e, children: r ? g(r) : a == null ? void 0 : a.accountNumberLastFourDigits })
+    /* @__PURE__ */ o(f, { variant: T.BODY, stronger: e, children: r ? c(r) : a?.accountNumberLastFourDigits })
   ] }) : /* @__PURE__ */ o(t, { label: i.get("common.tags.noData"), variant: n.LIGHT_WITH_OUTLINE }) });
 };
 export {
-  x as default
+  P as default
 };