@adyen/adyen-platform-experience-web 1.0.3 → 1.1.1

package/dist/es/components/external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js

@@ -1,116 +1,123 @@
-import { DATE_FORMAT_PAYOUTS as _ } from "../../../../internal/DataOverviewDisplay/constants.js";
-import L from "../../../../internal/DataOverviewError/DataOverviewError.js";
-import { BASE_CLASS as P, NET_PAYOUT_CLASS as w } from "./constants.js";
-import { getLabel as M } from "../../../../utils/getLabel.js";
-import N from "../../../../../core/Context/useCoreContext.js";
-import O from "../../../../hooks/useTimezoneAwareDateFormatting.js";
-import { getCurrencyCode as x } from "../../../../../core/Localization/amount/amount-util.js";
-import { useMemo as s } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useResponsiveViewport as R, mediaQueries as U } from "../../../TransactionsOverview/hooks/useResponsiveViewport.js";
-import { CellTextPosition as Y } from "../../../../internal/DataGrid/types.js";
-import j from "classnames";
+import Y from "classnames";
+import L from "../../../../../core/Context/useCoreContext.js";
+import { getCurrencyCode as M } from "../../../../../core/Localization/amount/amount-util.js";
+import { useMemo as c, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import w from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { CellTextPosition as x } from "../../../../internal/DataGrid/types.js";
+import { DATE_FORMAT_PAYOUTS_MOBILE as B, DATE_FORMAT_PAYOUTS as R } from "../../../../internal/DataOverviewDisplay/constants.js";
+import U from "../../../../internal/DataOverviewError/DataOverviewError.js";
+import { TypographyVariant as s } from "../../../../internal/Typography/types.js";
+import u from "../../../../internal/Typography/Typography.js";
+import { getLabel as j } from "../../../../utils/getLabel.js";
+import { useResponsiveViewport as N, mediaQueries as v } from "../../../../hooks/useResponsiveViewport.js";
+import { BASE_CLASS as I, NET_PAYOUT_CLASS as G } from "./constants.js";
 import "./PayoutsTable.scss.js";
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import C from "../../../../internal/DataGrid/DataGrid.js";
-import G from "../../../../internal/Pagination/Pagination.js";
-import { useAuthContext as I } from "../../../../../core/Auth/context.js";
-const y = ["fundsCapturedAmount", "adjustmentAmount", "payoutAmount"], V = ["createdAt", ...y], $ = (n) => y.includes(n), ir = ({
+import { useTableColumns as V } from "../../../../hooks/useTableColumns.js";
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import g from "../../../../internal/DataGrid/DataGrid.js";
+import $ from "../../../../internal/Pagination/Pagination.js";
+import { useAuthContext as W } from "../../../../../core/Auth/context.js";
+const h = ["fundsCapturedAmount", "adjustmentAmount", "payoutAmount"], q = ["createdAt", ...h], z = (n) => h.includes(n), Ar = ({
   error: n,
-  loading: c,
+  loading: a,
   onContactSupport: l,
-  onRowClick: T,
-  showDetails: B,
-  showPagination: g,
-  data: o,
-  ...S
+  onRowClick: D,
+  showDetails: H,
+  showPagination: O,
+  data: t,
+  ...E
 }) => {
   const {
     i18n: i
-  } = N(), {
+  } = L(), {
     dateFormat: p
-  } = O("UTC"), {
-    refreshing: a
-  } = I(), E = s(() => c || a, [c, a]), e = R(U.up.sm), m = s(() => ({
-    fundsCapturedAmount: e,
-    adjustmentAmount: e
-  }), [e]), b = s(() => V.map((r) => {
-    var d, f, A, h;
-    const u = i.get(M(r));
-    return $(r) ? {
-      key: r,
-      label: (f = (d = o == null ? void 0 : o[0]) == null ? void 0 : d[r]) != null && f.currency ? `${u} (${x((h = (A = o == null ? void 0 : o[0]) == null ? void 0 : A[r]) == null ? void 0 : h.currency)})` : u,
-      visible: m[r],
-      position: Y.RIGHT
-    } : {
-      key: r,
-      label: u,
-      visible: m[r]
-    };
-  }), [i, m, o]), D = {
+  } = w("UTC"), {
+    refreshing: A
+  } = W(), S = c(() => a || A, [a, A]), e = N(v.up.sm), m = P((r) => {
+    var d, y, C, T;
+    const f = i.get(j(r));
+    if (z(r))
+      return {
+        label: (y = (d = t == null ? void 0 : t[0]) == null ? void 0 : d[r]) != null && y.currency ? `${f} (${M((T = (C = t == null ? void 0 : t[0]) == null ? void 0 : C[r]) == null ? void 0 : T.currency)})` : f,
+        position: x.RIGHT
+      };
+  }, [t, i]), _ = V({
+    fields: q,
+    columnConfig: c(() => ({
+      fundsCapturedAmount: {
+        ...m("fundsCapturedAmount"),
+        visible: e
+      },
+      adjustmentAmount: {
+        ...m("adjustmentAmount"),
+        visible: e
+      },
+      payoutAmount: m("payoutAmount")
+    }), [m, e])
+  }), F = {
     title: "noPayoutsFound",
     message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
-  }, F = s(() => () => t(L, {
+  }, b = c(() => () => o(U, {
     error: n,
     errorMessage: "weCouldNotLoadYourPayouts",
     onContactSupport: l
   }), [n, l]);
-  return t("div", {
-    className: P,
-    children: t(C, {
-      errorDisplay: F,
+  return o("div", {
+    className: I,
+    children: o(g, {
+      errorDisplay: b,
       error: n,
-      columns: b,
-      data: o,
-      loading: E,
+      columns: _,
+      data: t,
+      loading: S,
       outline: !1,
       onRowClick: {
-        callback: T
+        callback: D
       },
-      emptyTableMessage: D,
+      emptyTableMessage: F,
       customCells: {
         createdAt: ({
           value: r
-        }) => r ? e ? r && p(r, _) : p(r, {
-          month: "short",
-          day: "numeric",
-          year: void 0,
-          hour: "2-digit",
-          minute: "2-digit",
-          hour12: !1
-        }) : null,
+        }) => r ? e ? r && o(u, {
+          variant: s.BODY,
+          children: p(r, R)
+        }) : p(r, B) : null,
         fundsCapturedAmount: ({
           value: r
-        }) => r && t("span", {
+        }) => r && o(u, {
+          variant: s.BODY,
           children: i.amount(r.value, r.currency, {
             hideCurrency: !0
           })
         }),
         adjustmentAmount: ({
           value: r
-        }) => r && t("span", {
+        }) => r && o(u, {
+          variant: s.BODY,
           children: i.amount(r.value, r.currency, {
             hideCurrency: !0
           })
         }),
         payoutAmount: ({
           value: r
-        }) => r && t("span", {
-          className: j({
-            [`${w}--strong`]: !e
+        }) => r && o(u, {
+          variant: s.BODY,
+          className: Y({
+            [`${G}--strong`]: !e
           }),
           children: i.amount(r.value, r.currency, {
             hideCurrency: e
           })
         })
       },
-      children: g && t(C.Footer, {
-        children: t(G, {
-          ...S
+      children: O && o(g.Footer, {
+        children: o($, {
+          ...E
         })
       })
     })
   });
 };
 export {
-  ir as PayoutsTable
+  Ar as PayoutsTable
 };

package/dist/es/components/external/ReportsOverview/ReportsOverviewElement.js

@@ -0,0 +1,25 @@
+var s = Object.defineProperty;
+var p = (o, t, e) => t in o ? s(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var n = (o, t, e) => (p(o, typeof t != "symbol" ? t + "" : t, e), e);
+import c from "./components/ReportsOverviewContainer/ReportsOverviewContainer.js";
+import i from "../UIElement/UIElement.js";
+import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+class r extends i {
+  constructor(e) {
+    super(e);
+    n(this, "componentToRender", () => m(c, {
+      ...this.props,
+      balanceAccountId: this.props.balanceAccountId,
+      ref: (e) => {
+        this.componentRef = e;
+      }
+    }));
+    this.componentToRender = this.componentToRender.bind(this);
+  }
+}
+n(r, "type", "reports");
+const h = r;
+export {
+  r as ReportsElement,
+  h as default
+};

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

@@ -0,0 +1,112 @@
+import { useCallback as U, useMemo as f, useEffect as g } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../../hooks/useBalanceAccountSelection.js";
+import M from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import v from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import { LIMIT_OPTIONS as q, DEFAULT_PAGE_LIMIT as K } from "../../../../internal/Pagination/constants.js";
+import { FilterParam as o } from "../../../../types.js";
+import { ReportsTable as j } from "../ReportsTable/ReportsTable.js";
+import { BASE_CLASS as k, EARLIEST_PAYOUT_SINCE_DATE as z } from "./constants.js";
+import "./ReportsOverview.scss.js";
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import B from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import G, { useFilterBarState as H, FilterBarMobileSwitch as Y } from "../../../../internal/FilterBar/FilterBar.js";
+import J from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { useAuthContext as Q } from "../../../../../core/Auth/context.js";
+import { isFunction as V } from "../../../../../utils/value/is.js";
+import { DataOverviewHeader as W } from "../../../../internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js";
+const Er = ({
+  onFiltersChanged: i,
+  balanceAccounts: n,
+  allowLimitSelection: l,
+  preferredLimit: u = K,
+  isLoadingBalanceAccount: c,
+  onContactSupport: E,
+  hideTitle: T
+}) => {
+  const {
+    getReports: s
+  } = Q().endpoints, {
+    activeBalanceAccount: r,
+    balanceAccountSelectionOptions: S,
+    onBalanceAccountSelection: F
+  } = x(n), {
+    defaultParams: t,
+    nowTimestamp: C,
+    refreshNowTimestamp: a
+  } = M("reports", r), I = U(async (m, y) => s({
+    signal: y,
+    errorLevel: "error"
+  }, {
+    query: {
+      ...m,
+      type: "payout",
+      createdSince: m[o.CREATED_SINCE] ?? t.current.defaultFilterParams[o.CREATED_SINCE],
+      createdUntil: m[o.CREATED_UNTIL] ?? t.current.defaultFilterParams[o.CREATED_UNTIL],
+      balanceAccountId: (r == null ? void 0 : r.id) ?? ""
+    }
+  }), [r == null ? void 0 : r.id, t, s]), p = H(), _ = f(() => V(i) ? i : void 0, [i]), A = f(() => l ? q : void 0, [l]), {
+    canResetFilters: D,
+    error: O,
+    fetching: P,
+    filters: d,
+    limit: L,
+    limitOptions: R,
+    records: h,
+    resetFilters: X,
+    updateFilters: N,
+    updateLimit: b,
+    ...w
+  } = B({
+    fetchRecords: I,
+    dataField: "data",
+    filterParams: t.current.defaultFilterParams,
+    initialFiltersSameAsDefault: !0,
+    onFiltersChanged: _,
+    preferredLimit: u,
+    preferredLimitOptions: A,
+    enabled: !!(r != null && r.id) && !!s
+  });
+  return g(() => {
+    a();
+  }, [d, a]), e("div", {
+    className: k,
+    children: [e(W, {
+      hideTitle: T,
+      titleKey: "reportsTitle",
+      descriptionKey: "reportsNotice",
+      children: e(Y, {
+        ...p
+      })
+    }), e(G, {
+      ...p,
+      children: [e(J, {
+        activeBalanceAccount: r,
+        balanceAccountSelectionOptions: S,
+        onBalanceAccountSelection: F
+      }), e(v, {
+        canResetFilters: D,
+        defaultParams: t,
+        filters: d,
+        nowTimestamp: C,
+        refreshNowTimestamp: a,
+        sinceDate: z,
+        timezone: "UTC",
+        updateFilters: N
+      })]
+    }), e(j, {
+      balanceAccountId: r == null ? void 0 : r.id,
+      loading: P || c || !n || !r,
+      data: h,
+      showPagination: !0,
+      limit: L,
+      limitOptions: R,
+      onContactSupport: E,
+      onLimitSelection: b,
+      error: O,
+      ...w
+    })]
+  });
+};
+export {
+  Er as ReportsOverview
+};

package/dist/es/components/external/ReportsOverview/components/ReportsOverview/ReportsOverview.scss.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -0,0 +1,5 @@
+const e = "adyen-pe-reports-overview", t = (/* @__PURE__ */ new Date("2024-04-16T00:00:00.000Z")).toString();
+export {
+  e as BASE_CLASS,
+  t as EARLIEST_PAYOUT_SINCE_DATE
+};

package/dist/es/components/external/ReportsOverview/components/ReportsOverviewContainer/ReportsOverviewContainer.js

@@ -0,0 +1,30 @@
+import c from "../../../../hooks/useBalanceAccounts.js";
+import i from "../../../../internal/DataOverviewContainer/DataOverviewContainer.js";
+import { ReportsOverview as s } from "../ReportsOverview/ReportsOverview.js";
+import { BASE_CLASS as u } from "./constants.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+function d({
+  ...o
+}) {
+  const {
+    balanceAccounts: e,
+    isBalanceAccountIdWrong: t,
+    isFetching: n,
+    error: a
+  } = c(o.balanceAccountId);
+  return r(i, {
+    balanceAccountsError: a,
+    className: u,
+    errorMessage: "weCouldNotLoadTheReportsOverview",
+    isBalanceAccountIdWrong: t,
+    onContactSupport: o.onContactSupport,
+    children: r(s, {
+      ...o,
+      balanceAccounts: e,
+      isLoadingBalanceAccount: n
+    })
+  });
+}
+export {
+  d as default
+};

package/dist/es/components/external/ReportsOverview/components/ReportsOverviewContainer/constants.js

@@ -0,0 +1,4 @@
+const e = "adyen-pe-reports-overview-container";
+export {
+  e as BASE_CLASS
+};

package/dist/es/components/external/ReportsOverview/components/ReportsTable/ReportsTable.js

@@ -0,0 +1,149 @@
+import { useState as B, useMemo as n, useCallback as Y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import M from "../../../../../core/Context/useCoreContext.js";
+import P from "../../../../hooks/useFreezePeriod.js";
+import x from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import I from "../../../../internal/Alert/Alert.js";
+import { AlertTypeOption as V } from "../../../../internal/Alert/types.js";
+import q from "../../../../internal/Button/DownloadButton/DownloadButton.js";
+import { CellTextPosition as z } from "../../../../internal/DataGrid/types.js";
+import { DATE_FORMAT_REPORTS as D } from "../../../../internal/DataOverviewDisplay/constants.js";
+import G from "../../../../internal/DataOverviewError/DataOverviewError.js";
+import U from "../../../../internal/SVGIcons/Warning.js";
+import { TypographyVariant as a } from "../../../../internal/Typography/types.js";
+import i from "../../../../internal/Typography/Typography.js";
+import { getLabel as $ } from "../../../../utils/getLabel.js";
+import { useResponsiveViewport as g, mediaQueries as E } from "../../../../hooks/useResponsiveViewport.js";
+import { BASE_CLASS as j, DATE_TYPE_CLASS as H, DATE_TYPE_DATE_SECTION_CLASS as Q, DISABLED_BUTTONS_TIMEOUT as X } from "./constants.js";
+import "./ReportsTable.scss.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import h from "../../../../internal/DataGrid/DataGrid.js";
+import k from "../../../../internal/Pagination/Pagination.js";
+import { useAuthContext as J } from "../../../../../core/Auth/context.js";
+const K = ["createdAt", "dateAndReportType", "reportType", "reportFile"], Ee = ({
+  error: s,
+  loading: p,
+  balanceAccountId: w,
+  onContactSupport: l,
+  showPagination: _,
+  data: T,
+  ...R
+}) => {
+  const {
+    i18n: t
+  } = M(), {
+    dateFormat: u
+  } = x("UTC"), {
+    freeze: S,
+    frozen: O
+  } = P(X), [d, m] = B(null), {
+    refreshing: f
+  } = J(), b = n(() => p || f, [p, f]), c = g(E.up.sm), A = g(E.down.xs), y = n(() => ({
+    dateAndReportType: A,
+    createdAt: c,
+    reportType: c,
+    reportFile: !0
+  }), [A, c]), C = n(() => K.map((e) => {
+    const o = t.get($(e));
+    return {
+      key: e,
+      label: o,
+      position: A && e === "reportFile" ? z.RIGHT : void 0,
+      visible: y[e]
+    };
+  }), [t, T, y]), F = Y(() => {
+    m(null);
+  }, []), N = {
+    title: "noReportsFound",
+    message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
+  }, v = n(() => () => r(G, {
+    error: s,
+    errorMessage: "weCouldNotLoadYourReports",
+    onContactSupport: l
+  }), [s, l]), L = n(() => r(U, {}), []), W = n(() => (e) => {
+    const o = {};
+    switch (e == null ? void 0 : e.errorCode) {
+      case "999_429_001":
+        o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("reportsError.tooManyDownloads");
+        break;
+      case "00_500":
+      default:
+        o.title = t.get("error.somethingWentWrongWithDownload"), o.description = t.get("error.pleaseTryAgainLater");
+        break;
+    }
+    m(o);
+  }, [s, l]);
+  return p && m(null), r("div", {
+    className: j,
+    children: [d && r(I, {
+      isOpen: !!d,
+      onClose: F,
+      type: V.WARNING,
+      className: "adyen-pe-reports-table-alert",
+      ...d
+    }), r(h, {
+      errorDisplay: v,
+      error: s,
+      columns: C,
+      data: T,
+      loading: b,
+      outline: !1,
+      emptyTableMessage: N,
+      customCells: {
+        createdAt: ({
+          value: e
+        }) => e ? e && r(i, {
+          variant: a.BODY,
+          children: u(e, D)
+        }) : null,
+        dateAndReportType: ({
+          item: e
+        }) => r("div", {
+          className: H,
+          children: [r(i, {
+            variant: a.BODY,
+            stronger: !0,
+            children: t.get(`reportType.${e == null ? void 0 : e.type}`)
+          }), r(i, {
+            className: Q,
+            variant: a.BODY,
+            children: u(e.createdAt, D)
+          })]
+        }),
+        reportType: ({
+          item: e
+        }) => (e == null ? void 0 : e.type) && r(i, {
+          variant: a.BODY,
+          children: t.get(`reportType.${e == null ? void 0 : e.type}`)
+        }),
+        reportFile: ({
+          item: e
+        }) => {
+          const o = {
+            query: {
+              balanceAccountId: w,
+              createdAt: e.createdAt,
+              type: e.type
+            }
+          };
+          return r(q, {
+            className: "adyen-pe-reports-table--download",
+            endpointName: "downloadReport",
+            disabled: O,
+            params: o,
+            onDownloadRequested: S,
+            setError: W,
+            errorDisplay: L
+          });
+        }
+      },
+      children: _ && r(h.Footer, {
+        children: r(k, {
+          ...R
+        })
+      })
+    })]
+  });
+};
+export {
+  Ee as ReportsTable
+};

package/dist/es/components/external/ReportsOverview/components/ReportsTable/ReportsTable.scss.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

package/dist/es/components/external/ReportsOverview/components/ReportsTable/constants.js

@@ -0,0 +1,7 @@
+const S = 1e3, t = "adyen-pe-reports-table", e = `${t}-date-report-type`, T = `${e}--date`;
+export {
+  t as BASE_CLASS,
+  e as DATE_TYPE_CLASS,
+  T as DATE_TYPE_DATE_SECTION_CLASS,
+  S as DISABLED_BUTTONS_TIMEOUT
+};