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

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

@@ -1,81 +1,44 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as T, useMemo as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../../../core/Context/useCoreContext.js";
-import { useFetch as k } from "../../../../../hooks/useFetch.js";
-import { BASE_CLASS as q, ITEM_CLASS as x } from "./constants.js";
-import { memo as w } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useResponsiveContainer as L, containerQueries as N } from "../../../../../hooks/useResponsiveContainer.js";
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as d } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { TotalsCard as a } from "./TotalsCard.js";
+import { BASE_CLASS as c, ITEM_CLASS as n } from "./constants.js";
+import { useResponsiveContainer as t, containerQueries as l } from "../../../../../hooks/useResponsiveContainer.js";
+import f from "../../../../../core/Context/useCoreContext.js";
 /* empty css                       */
-import { TotalsCard as p } from "./TotalsCard.js";
-import { Fragment as _ } from "../../../../../external/preact/dist/preact.module.js";
-import { useConfigContext as B } from "../../../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as j } from "../../../../../utils/value/constants.js";
-const U = w(
-  ({
-    availableCurrencies: i,
-    isAvailableCurrenciesFetching: y,
-    balanceAccountId: e,
-    createdSince: f,
-    createdUntil: c,
-    categories: d,
-    statuses: g,
-    maxAmount: C,
-    minAmount: u,
-    currencies: h,
-    fullWidth: n
-  }) => {
-    const { i18n: a } = b(), { getTransactionTotals: s } = B().endpoints, F = T(async () => s == null ? void 0 : s(j, {
-      query: {
-        createdSince: f,
-        createdUntil: c,
-        categories: d,
-        statuses: g,
-        maxAmount: C,
-        minAmount: u,
-        currencies: h,
-        balanceAccountId: e
+import { Fragment as p } from "../../../../../external/preact/dist/preact.module.js";
+const L = d(({ loadingTotals: e, totals: o }) => {
+  const { i18n: r } = f(), m = t(l.only.xs), s = t(l.down.sm);
+  return /* @__PURE__ */ i("div", { className: c, children: m ? /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
+      a,
+      {
+        "aria-label": r.get("transactions.overview.totals.labels.incoming"),
+        totals: o,
+        isLoading: e,
+        hiddenField: "expenses",
+        fullWidth: s
       }
-    }), [e, d, f, c, h, s, C, u, g]), { data: o, isFetching: E } = k({
-      fetchOptions: S(() => ({ enabled: !!e && !!s }), [e, s]),
-      queryFn: F
-    }), m = !e || E || y, l = T(() => {
-      if (!i || !o)
-        return o == null ? void 0 : o.data;
-      const v = i.map((r) => o.data.find((O) => O.currency === r) || { currency: r, incomings: 0, expenses: 0 });
-      return v.concat(o.data.filter((r) => !v.includes(r)));
-    }, [i, o])() ?? [], M = L(N.only.xs);
-    return /* @__PURE__ */ t("div", { className: q, children: M ? /* @__PURE__ */ t(_, { children: [
-      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
-        p,
-        {
-          "aria-label": a.get("transactions.overview.totals.labels.incoming"),
-          totals: l,
-          isLoading: m,
-          hiddenField: "expenses",
-          fullWidth: n
-        }
-      ) }),
-      /* @__PURE__ */ t("div", { className: x, children: /* @__PURE__ */ t(
-        p,
-        {
-          "aria-label": a.get("transactions.overview.totals.labels.outgoing"),
-          totals: l,
-          isLoading: m,
-          hiddenField: "incomings",
-          fullWidth: n
-        }
-      ) })
-    ] }) : /* @__PURE__ */ t(
-      p,
+    ) }),
+    /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
+      a,
       {
-        "aria-label": a.get("transactions.overview.totals.labels.default"),
-        totals: l,
-        isLoading: m,
-        fullWidth: n
+        "aria-label": r.get("transactions.overview.totals.labels.outgoing"),
+        totals: o,
+        isLoading: e,
+        hiddenField: "incomings",
+        fullWidth: s
       }
-    ) });
-  }
-);
+    ) })
+  ] }) : /* @__PURE__ */ i(
+    a,
+    {
+      "aria-label": r.get("transactions.overview.totals.labels.default"),
+      totals: o,
+      isLoading: e,
+      fullWidth: s
+    }
+  ) });
+});
 export {
-  U as default
+  L as default
 };

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

@@ -0,0 +1,232 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import _ from "classnames";
+import { Alert as X } from "../../../../internal/Alert/Alert.js";
+import Te from "../../../../internal/Popover/Popover.js";
+import te from "../../../../internal/Typography/Typography.js";
+import Ce from "../../../../../core/Context/useCoreContext.js";
+import Ae from "../../../../internal/Button/DownloadButton/useDownload.js";
+import we from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import ye from "../../../../internal/ToggleSwitch/ToggleSwitch.js";
+import Ee from "../../../../internal/Button/ButtonActions/ButtonActions.js";
+import Se from "../../../../internal/FilterBar/components/FilterButton/FilterButton.js";
+import { EXPORT_COLUMNS as h, TRANSACTION_ANALYTICS_SUBCATEGORY_LIST as be, TRANSACTION_ANALYTICS_CATEGORY as Ne, DEFAULT_EXPORT_COLUMNS as $ } from "../../constants.js";
+import { ButtonActionsLayoutBasic as Oe } from "../../../../internal/Button/ButtonActions/types.js";
+import { useResponsiveContainer as Pe, containerQueries as Re } from "../../../../../hooks/useResponsiveContainer.js";
+import { PopoverContainerVariant as Fe, PopoverContainerPosition as z } from "../../../../internal/Popover/types.js";
+import { TypographyVariant as oe, TypographyElement as re } from "../../../../internal/Typography/types.js";
+import { useState as y, useMemo as n, useRef as J, useCallback as x, useEffect as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { AlertTypeOption as K } from "../../../../internal/Alert/types.js";
+import { ButtonVariant as W } from "../../../../internal/Button/types.js";
+import { getTransactionsFilterQueryParams as Ie } from "../utils.js";
+import { Tag as Be } from "../../../../internal/Tag/Tag.js";
+import { classes as r } from "./constants.js";
+/* empty css                        */
+import { Fragment as _e } from "../../../../../external/preact/dist/preact.module.js";
+import Le from "../../../../internal/Spinner/Spinner.js";
+import { Icon as De } from "../../../../internal/Icon/Icon.js";
+import { fixedForwardRef as ke } from "../../../../../utils/preact/fixedForwardRef.js";
+import { downloadBlob as Ye } from "../../../../../utils/file/download.js";
+import { EMPTY_ARRAY as g } from "../../../../../utils/value/constants.js";
+import { useConfigContext as Me } from "../../../../../core/ConfigContext/context.js";
+import { uniqueId as I } from "../../../../../utils/random/uniqueId.js";
+import { isFunction as Ge } from "../../../../../utils/value/is.js";
+const B = {
+  category: Ne,
+  subCategory: be
+}, L = ({
+  children: m,
+  el: c = re.DIV,
+  variant: u = oe.BODY,
+  ...o
+}) => /* @__PURE__ */ e(te, { ...o, el: c, variant: u, children: m }), Z = ke(
+  ({ children: m, className: c, ...u }, o) => /* @__PURE__ */ e(ye, { ref: o, className: _([r.popoverColumn, c]), ...u, name: "columns", children: /* @__PURE__ */ e(L, { el: re.SPAN, children: m }) })
+), ee = ({ children: m, ...c }) => /* @__PURE__ */ e(L, { ...c, className: r.popoverSectionTitle, stronger: !0, children: m }), Tt = ({ disabled: m, filters: c, now: u }) => {
+  const { i18n: o } = Ce(), T = we(), S = Pe(Re.down.xs), [l, D] = y(!1), [ne, k] = y(), [b, Y] = y(!1), [p, M] = y([]), [se, ie] = n(() => {
+    const {
+      balanceAccount: t,
+      paymentPspReference: i,
+      createdDate: s,
+      categories: d,
+      currencies: f
+      /*, statuses*/
+    } = c, a = [
+      ...t?.id ? ["transactions.overview.export.filters.types.account"] : g,
+      ...s ? ["transactions.overview.export.filters.types.date"] : g,
+      // ...(statuses.length ? (['transactions.overview.export.filters.types.status'] as const) : EMPTY_ARRAY),
+      ...d.length ? ["transactions.overview.export.filters.types.category"] : g,
+      ...f.length ? ["transactions.overview.export.filters.types.currency"] : g,
+      ...i ? ["transactions.overview.export.filters.types.paymentPspReference"] : g
+    ], v = {
+      ...Ie(c, u),
+      sortDirection: "desc"
+    };
+    return [a, v];
+  }, [c, u]), { downloadTransactions: ae } = Me().endpoints, G = Ge(ae), ce = G && l && b && !!p.length, { error: U, isFetching: N } = Ae(
+    "downloadTransactions",
+    { query: { ...ie, columns: p } },
+    ce,
+    Ye
+  ), V = J(null), O = n(() => o.get("transactions.overview.export.button.label"), [o]), le = n(() => o.get("transactions.overview.export.button.inProgress"), [o]), q = n(() => o.get("transactions.overview.export.actions.cancel"), [o]), H = n(() => o.get("transactions.overview.export.actions.download"), [o]), pe = n(() => o.get("transactions.overview.export.filters.title"), [o]), me = n(() => o.get("transactions.overview.export.columns.title"), [o]), j = n(I, []), P = n(
+    () => h.map((t) => ({
+      label: o.get(`transactions.overview.export.columns.types.${t}`),
+      id: I(),
+      value: t
+    })),
+    [o]
+  ), de = n(() => o.get("transactions.overview.export.columns.types.all", {
+    values: { count: h.length }
+  }), [o]), R = n(I, []), F = J(null), ue = n(() => P.map(({ id: t }) => t).join(" "), [P]), fe = p.length === h.length, Q = x(
+    (t) => {
+      const i = t.currentTarget, s = i.value, d = i.checked, f = i.id === R;
+      M((a) => {
+        if (f) return d ? h : g;
+        if (h.includes(s)) {
+          const v = a.indexOf(s);
+          if (d) {
+            if (v < 0) return [...a, s];
+          } else if (v >= 0)
+            return [...a.slice(0, v), ...a.slice(v + 1)];
+        }
+        return a;
+      });
+    },
+    [R]
+  ), A = x(
+    (t) => {
+      t ? T.addEvent?.("Cancelled export", B) : T.addEvent?.("Clicked button", { ...B, label: "Export" });
+    },
+    [T]
+  ), C = x(
+    (t = !0) => {
+      D(!1), t && A(!0);
+    },
+    [A]
+  ), ve = x(() => {
+    D((t) => !t), A(l);
+  }, [l, A]), w = x(() => k(void 0), []), he = n(
+    () => ({
+      event: () => C(),
+      variant: W.SECONDARY,
+      title: q
+    }),
+    [q, C]
+  ), xe = n(
+    () => ({
+      disabled: !p.length,
+      event: () => Y(!0),
+      variant: W.PRIMARY,
+      title: H
+    }),
+    [H, p.length]
+  );
+  E(() => {
+    k(U);
+  }, [U]), E(() => {
+    l ? w() : M($);
+  }, [l, w]), E(() => {
+    if (b) {
+      Y(!1), C(!1);
+      let t = "Custom", i = !0, s = !0;
+      h.forEach((d) => {
+        const f = p.includes(d), a = $.includes(d);
+        i &&= f ? a : !a, s &&= f;
+      }), s ? t = "All" : i && (t = "Default"), T.addEvent?.("Completed export", {
+        ...B,
+        exportedFields: t
+      });
+    }
+  }, [p, b, C, T]), E(() => {
+    (function t() {
+      F.current ? F.current.focus() : requestAnimationFrame(t);
+    })();
+  }, []);
+  const ge = x(
+    () => /* @__PURE__ */ e(X, { onClose: w, className: r.errorAlert, type: K.CRITICAL, children: /* @__PURE__ */ e(te, { variant: oe.BODY, children: o.get("transactions.overview.export.actions.error") }) }),
+    [o, w]
+  );
+  return G ? /* @__PURE__ */ e("div", { className: r.root, children: [
+    /* @__PURE__ */ e(_e, { children: [
+      /* @__PURE__ */ e(
+        Se,
+        {
+          "aria-label": O,
+          ref: V,
+          className: r.button,
+          classNameModifiers: l ? ["active"] : void 0,
+          disabled: m || N,
+          onClick: ve,
+          tabIndex: 0,
+          children: /* @__PURE__ */ e("div", { className: "adyen-pe-filter-button__default-container", children: /* @__PURE__ */ e(L, { className: "adyen-pe-filter-button__label", children: [
+            N ? /* @__PURE__ */ e(Le, { size: "x-small" }) : /* @__PURE__ */ e(De, { name: "download" }),
+            !S && /* @__PURE__ */ e("span", { children: N ? le : O })
+          ] }) })
+        }
+      ),
+      ne && ge()
+    ] }),
+    l && /* @__PURE__ */ e(
+      Te,
+      {
+        disableFocusTrap: !1,
+        dismissible: !1,
+        dismiss: C,
+        open: l,
+        position: S ? z.BOTTOM : z.BOTTOM_RIGHT,
+        variant: Fe.POPOVER,
+        showOverlay: S,
+        targetElement: V,
+        title: O,
+        children: /* @__PURE__ */ e("div", { className: r.popover, children: [
+          /* @__PURE__ */ e("div", { className: r.popoverSections, children: [
+            /* @__PURE__ */ e("div", { className: _(r.popoverSection, r.filtersSection), children: [
+              /* @__PURE__ */ e(ee, { children: `${pe}:` }),
+              se.map((t) => /* @__PURE__ */ e(Be, { label: o.get(t) }, t))
+            ] }),
+            /* @__PURE__ */ e("div", { className: _(r.popoverSection, r.columnsSection), children: /* @__PURE__ */ e("div", { role: "group", "aria-labelledby": j, children: [
+              /* @__PURE__ */ e(ee, { id: j, children: me }),
+              /* @__PURE__ */ e("div", { className: r.popoverSectionContent, children: [
+                /* @__PURE__ */ e(
+                  Z,
+                  {
+                    ref: F,
+                    className: r.popoverColumnAll,
+                    "aria-controls": ue,
+                    checked: fe,
+                    onChange: Q,
+                    id: R,
+                    children: de
+                  }
+                ),
+                P.map(({ id: t, label: i, value: s }) => /* @__PURE__ */ e(
+                  Z,
+                  {
+                    checked: p.includes(s),
+                    onChange: Q,
+                    value: s,
+                    id: t,
+                    children: i
+                  },
+                  s
+                ))
+              ] })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ e("div", { className: r.popoverActions, children: [
+            /* @__PURE__ */ e(
+              X,
+              {
+                type: K.HIGHLIGHT,
+                className: r.popoverActionsAlert,
+                title: o.get("transactions.overview.export.actions.download.info")
+              }
+            ),
+            /* @__PURE__ */ e(Ee, { actions: [xe, he], layout: Oe.BUTTONS_END })
+          ] })
+        ] })
+      }
+    )
+  ] }) : null;
+};
+export {
+  Tt as default
+};

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

@@ -0,0 +1,19 @@
+const t = "adyen-pe-transactions-export", o = t + "__popover", e = {
+  root: t,
+  popover: o,
+  button: t + "__button",
+  errorAlert: t + "__error-alert",
+  popoverActions: o + "-actions",
+  popoverActionsAlert: o + "-actions-alert",
+  popoverSections: o + "-sections",
+  popoverSection: o + "-section",
+  columnsSection: o + "-section--columns",
+  filtersSection: o + "-section--filters",
+  popoverSectionTitle: o + "-section-title",
+  popoverSectionContent: o + "-section-content",
+  popoverColumnAll: o + "-column--all",
+  popoverColumn: o + "-column"
+};
+export {
+  e as classes
+};

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

@@ -0,0 +1,44 @@
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useEffect as n } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { classes as m } from "../../constants.js";
+import { popoverUtil as p } from "../../../../internal/Popover/utils/popoverUtil.js";
+import d from "../../../../../core/Context/useCoreContext.js";
+import f from "../../../../internal/Modal/Modal.js";
+import { TransactionData as c } from "../../../TransactionDetails/components/TransactionData/TransactionData.js";
+const g = ({
+  children: s,
+  dataCustomization: t,
+  onContactSupport: a,
+  selectedDetail: o,
+  resetDetails: e
+}) => {
+  const { i18n: l } = d(), i = !!o;
+  return n(() => {
+    i && p.closeAll();
+  }, [i]), /* @__PURE__ */ r("div", { className: m.details, children: [
+    s,
+    o && /* @__PURE__ */ r(
+      f,
+      {
+        isOpen: i,
+        "aria-label": l.get("transactions.details.title"),
+        onClose: e,
+        isDismissible: !0,
+        headerWithBorder: !1,
+        size: o.modalSize || "large",
+        children: /* @__PURE__ */ r(
+          c,
+          {
+            id: o.selection.data,
+            dataCustomization: t,
+            onContactSupport: a,
+            hideTitle: !0
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  g as TransactionDetailsModal
+};

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

@@ -0,0 +1,76 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { TransactionDetailsModal as b } from "./TransactionDetailsModal.js";
+import { TransactionsTable as x } from "../TransactionsTable/TransactionsTable.js";
+import { sharedTransactionDetailsEventProperties as L } from "../../../TransactionDetails/constants.js";
+import M from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import P from "../../../../../hooks/useModalDetails/useModalDetails.js";
+const V = ({
+  balanceAccount: t,
+  currenciesLookupResult: l,
+  dataCustomization: c,
+  loadingBalanceAccounts: m,
+  onContactSupport: s,
+  onRecordSelection: d,
+  showDetails: u,
+  transactionsListResult: p
+}) => {
+  const a = M(), { sortedCurrencies: e } = l, { updateDetails: i, resetDetails: f, selectedDetail: h } = P({
+    transaction: {
+      showDetails: u ?? !0,
+      callback: d
+    }
+  }), C = E(
+    ({ id: o, category: r }) => {
+      r && a.addEvent?.("Viewed transaction details", {
+        ...L,
+        transactionType: r
+      }), i({
+        selection: {
+          data: o,
+          type: "transaction",
+          balanceAccount: t
+        },
+        modalSize: "small"
+      }).callback({ id: o });
+    },
+    [t, i, a]
+  ), {
+    error: D,
+    fetching: T,
+    fields: g,
+    records: v,
+    updateLimit: k,
+    hasCustomColumn: y,
+    ...w
+  } = p;
+  return /* @__PURE__ */ n(
+    b,
+    {
+      dataCustomization: c,
+      onContactSupport: s,
+      resetDetails: f,
+      selectedDetail: h,
+      children: /* @__PURE__ */ n(
+        x,
+        {
+          activeBalanceAccount: t,
+          availableCurrencies: e,
+          error: D,
+          hasMultipleCurrencies: e.length > 1,
+          loading: m || T,
+          onContactSupport: s,
+          onLimitSelection: k,
+          onRowClick: C,
+          showPagination: !0,
+          transactions: v,
+          customColumns: g,
+          ...w
+        }
+      )
+    }
+  );
+};
+export {
+  V as default
+};