@adyen/adyen-platform-experience-web 1.8.1 → 1.10.0

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

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

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