@adyen/adyen-platform-experience-web 1.0.0 → 1.0.2

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

@@ -1,127 +1,148 @@
-import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { BASE_CLASS as H, EARLIEST_PAYOUT_SINCE_DATE as J, BASE_CLASS_DETAILS as K } from "./constants.js";
-import { PayoutsTable as Q } from "../PayoutsTable/PayoutsTable.js";
-import { LIMIT_OPTIONS as W, DEFAULT_PAGE_LIMIT as X } from "../../../../internal/Pagination/constants.js";
-import { TypographyVariant as Z } from "../../../../internal/Typography/types.js";
-import $ from "../../../../internal/Typography/Typography.js";
-import B from "../../../../hooks/useBalanceAccountSelection.js";
-import tt from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
-import rt from "../../../../../hooks/useModalDetails/useModalDetails.js";
-import et from "../../../../hooks/useDefaultOverviewFilterParams.js";
-import { FilterParam as s } from "../../../../types.js";
-import ot from "../../../../../core/Context/useCoreContext.js";
-import { useCallback as D, useMemo as i, useEffect as it } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DataDetailsModal as st } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
+import { BASE_CLASS as V, EARLIEST_PAYOUT_SINCE_DATE as Y, BASE_CLASS_DETAILS as H } from "./constants.js";
+import { PayoutsTable as J } from "../PayoutsTable/PayoutsTable.js";
+import { LIMIT_OPTIONS as K, DEFAULT_PAGE_LIMIT as Q } from "../../../../internal/Pagination/constants.js";
+import { TypographyVariant as W } from "../../../../internal/Typography/types.js";
+import X from "../../../../internal/Typography/Typography.js";
+import Z from "../../../../hooks/useBalanceAccountSelection.js";
+import $ from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import v from "../../../../../hooks/useModalDetails/useModalDetails.js";
+import B from "../../../../hooks/useDefaultOverviewFilterParams.js";
+import { FilterParam as i } from "../../../../types.js";
+import tt from "../../../../../core/Context/useCoreContext.js";
+import { useCallback as D, useMemo as s, useEffect as rt } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { DataDetailsModal as et } from "../../../../internal/DataOverviewDisplay/DataDetailsModal.js";
 import "./PayoutsOverview.scss.js";
-import at from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import mt from "../../../../internal/FilterBar/FilterBar.js";
-import lt from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import { useAuthContext as nt } from "../../../../../core/Auth/context.js";
-import { isFunction as S } from "../../../../../utils/value/is.js";
-const Rt = ({
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import ot from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import it from "../../../../internal/FilterBar/FilterBar.js";
+import st from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { useAuthContext as at } from "../../../../../core/Auth/context.js";
+import { isFunction as mt } from "../../../../../utils/value/is.js";
+const bt = ({
   onFiltersChanged: a,
-  onLimitChanged: m,
-  balanceAccounts: l,
-  allowLimitSelection: u,
-  preferredLimit: C = X,
-  onRecordSelection: f,
-  showDetails: n,
-  isLoadingBalanceAccount: _,
-  onContactSupport: c,
-  hideTitle: I
+  balanceAccounts: d,
+  allowLimitSelection: p,
+  preferredLimit: y = Q,
+  onRecordSelection: u,
+  showDetails: m,
+  isLoadingBalanceAccount: S,
+  onContactSupport: f,
+  hideTitle: C
 }) => {
-  const { i18n: P } = ot(), { getPayouts: d } = nt().endpoints, { activeBalanceAccount: t, balanceAccountSelectionOptions: F, onBalanceAccountSelection: A } = B(l), { defaultParams: o, nowTimestamp: L, refreshNowTimestamp: p } = et("payouts", t), O = D(
-    async (e, v) => d({ signal: v, errorLevel: "error" }, {
-      query: {
-        ...e,
-        createdSince: e[s.CREATED_SINCE] ?? o.current.defaultFilterParams[s.CREATED_SINCE],
-        createdUntil: e[s.CREATED_UNTIL] ?? o.current.defaultFilterParams[s.CREATED_UNTIL],
-        balanceAccountId: (t == null ? void 0 : t.id) ?? ""
-      }
-    }),
-    [t == null ? void 0 : t.id, o, d]
-  ), h = i(() => S(a) ? a : void 0, [a]), N = i(() => S(m) ? m : void 0, [m]), g = i(() => u ? W : void 0, [u]), { canResetFilters: b, error: R, fetching: U, filters: T, limit: x, limitOptions: M, records: k, resetFilters: dt, updateFilters: w, updateLimit: q, ...z } = at({
-    fetchRecords: O,
+  const {
+    i18n: I
+  } = tt(), {
+    getPayouts: l
+  } = at().endpoints, {
+    activeBalanceAccount: t,
+    balanceAccountSelectionOptions: P,
+    onBalanceAccountSelection: _
+  } = Z(d), {
+    defaultParams: o,
+    nowTimestamp: F,
+    refreshNowTimestamp: n
+  } = B("payouts", t), A = D(async (e, G) => l({
+    signal: G,
+    errorLevel: "error"
+  }, {
+    query: {
+      ...e,
+      createdSince: e[i.CREATED_SINCE] ?? o.current.defaultFilterParams[i.CREATED_SINCE],
+      createdUntil: e[i.CREATED_UNTIL] ?? o.current.defaultFilterParams[i.CREATED_UNTIL],
+      balanceAccountId: (t == null ? void 0 : t.id) ?? ""
+    }
+  }), [t == null ? void 0 : t.id, o, l]), L = s(() => mt(a) ? a : void 0, [a]), O = s(() => p ? K : void 0, [p]), {
+    canResetFilters: h,
+    error: N,
+    fetching: b,
+    filters: c,
+    limit: g,
+    limitOptions: R,
+    records: U,
+    resetFilters: lt,
+    updateFilters: x,
+    updateLimit: M,
+    ...k
+  } = ot({
+    fetchRecords: A,
     dataField: "data",
     filterParams: o.current.defaultFilterParams,
     initialFiltersSameAsDefault: !0,
-    onLimitChanged: N,
-    onFiltersChanged: h,
-    preferredLimit: C,
-    preferredLimitOptions: g,
-    enabled: !!(t != null && t.id) && !!d
+    onFiltersChanged: L,
+    preferredLimit: y,
+    preferredLimitOptions: O,
+    enabled: !!(t != null && t.id) && !!l
   });
-  it(() => {
-    p();
-  }, [T, p]);
-  const E = i(
-    () => ({
-      showDetails: n ?? !0,
-      callback: f
-    }),
-    [n, f]
-  ), j = i(() => ({ payout: E }), [E]), { updateDetails: y, resetDetails: G, selectedDetail: V } = rt(j), Y = D(
-    (e) => {
-      y({
-        selection: { type: "payout", data: { id: t == null ? void 0 : t.id, date: e.createdAt } },
-        modalSize: "small"
-      }).callback({ balanceAccountId: (t == null ? void 0 : t.id) || "", date: e.createdAt });
-    },
-    [y, t]
-  );
-  return /* @__PURE__ */ r("div", { className: H, children: [
-    !I && /* @__PURE__ */ r($, { variant: Z.TITLE, medium: !0, children: P.get("payoutsTitle") }),
-    /* @__PURE__ */ r(mt, { children: [
-      /* @__PURE__ */ r(
-        lt,
-        {
-          activeBalanceAccount: t,
-          balanceAccountSelectionOptions: F,
-          onBalanceAccountSelection: A
+  rt(() => {
+    n();
+  }, [c, n]);
+  const T = s(() => ({
+    showDetails: m ?? !0,
+    callback: u
+  }), [m, u]), w = s(() => ({
+    payout: T
+  }), [T]), {
+    updateDetails: E,
+    resetDetails: q,
+    selectedDetail: z
+  } = v(w), j = D((e) => {
+    E({
+      selection: {
+        type: "payout",
+        data: {
+          id: t == null ? void 0 : t.id,
+          balanceAccountDescription: (t == null ? void 0 : t.description) || "",
+          date: e.createdAt
         }
-      ),
-      /* @__PURE__ */ r(
-        tt,
-        {
-          canResetFilters: b,
-          defaultParams: o,
-          filters: T,
-          nowTimestamp: L,
-          refreshNowTimestamp: p,
-          sinceDate: J,
-          timezone: "UTC",
-          updateFilters: w
-        }
-      )
-    ] }),
-    /* @__PURE__ */ r(
-      st,
-      {
-        className: K,
-        onContactSupport: c,
-        selectedDetail: V,
-        resetDetails: G,
-        children: /* @__PURE__ */ r(
-          Q,
-          {
-            balanceAccounts: l,
-            loading: U || _ || !l,
-            data: k,
-            showPagination: !0,
-            onRowClick: Y,
-            showDetails: n,
-            limit: x,
-            limitOptions: M,
-            onContactSupport: c,
-            onLimitSelection: q,
-            error: R,
-            ...z
-          }
-        )
-      }
-    )
-  ] });
+      },
+      modalSize: "small"
+    }).callback({
+      balanceAccountId: (t == null ? void 0 : t.id) || "",
+      date: e.createdAt
+    });
+  }, [E, t]);
+  return r("div", {
+    className: V,
+    children: [!C && r(X, {
+      variant: W.TITLE,
+      medium: !0,
+      children: I.get("payoutsTitle")
+    }), r(it, {
+      children: [r(st, {
+        activeBalanceAccount: t,
+        balanceAccountSelectionOptions: P,
+        onBalanceAccountSelection: _
+      }), r($, {
+        canResetFilters: h,
+        defaultParams: o,
+        filters: c,
+        nowTimestamp: F,
+        refreshNowTimestamp: n,
+        sinceDate: Y,
+        timezone: "UTC",
+        updateFilters: x
+      })]
+    }), r(et, {
+      className: H,
+      onContactSupport: f,
+      selectedDetail: z,
+      resetDetails: q,
+      children: r(J, {
+        loading: b || S || !d,
+        data: U,
+        showPagination: !0,
+        onRowClick: j,
+        showDetails: m,
+        limit: g,
+        limitOptions: R,
+        onContactSupport: f,
+        onLimitSelection: M,
+        error: N,
+        ...k
+      })
+    })]
+  });
 };
 export {
-  Rt as PayoutsOverview
+  bt as PayoutsOverview
 };

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

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

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

@@ -1,65 +1,76 @@
-import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+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 _ } from "./constants.js";
-import { getLabel as w } from "../../../../utils/getLabel.js";
-import F from "../../../../../core/Context/useCoreContext.js";
-import { getCurrencyCode as M } from "../../../../../core/Localization/amount/amount-util.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 N, mediaQueries as x } from "../../../TransactionsOverview/hooks/useResponsiveViewport.js";
-import { CellTextPosition as j } from "../../../../internal/DataGrid/types.js";
-import O from "classnames";
+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 "./PayoutsTable.scss.js";
-import h from "../../../../internal/DataGrid/DataGrid.js";
-import R from "../../../../internal/Pagination/Pagination.js";
-import { useAuthContext as Y } from "../../../../../core/Auth/context.js";
-const C = ["fundsCapturedAmount", "adjustmentAmount", "payoutAmount"], G = ["createdAt", ...C], I = (i) => C.includes(i), rr = ({
-  error: i,
+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 = ({
+  error: n,
   loading: c,
   onContactSupport: l,
-  onRowClick: y,
-  showDetails: U,
+  onRowClick: T,
+  showDetails: B,
   showPagination: g,
-  data: e,
+  data: o,
   ...S
 }) => {
-  const { i18n: o } = F(), { refreshing: p } = Y(), T = s(() => c || p, [c, p]), n = N(x.up.sm), u = s(
-    () => ({
-      fundsCapturedAmount: n,
-      adjustmentAmount: n
-    }),
-    [n]
-  ), b = s(
-    () => G.map((r) => {
-      var a, d, f, A;
-      const m = o.get(w(r));
-      return I(r) ? {
-        key: r,
-        label: (d = (a = e == null ? void 0 : e[0]) == null ? void 0 : a[r]) != null && d.currency ? `${m} (${M((A = (f = e == null ? void 0 : e[0]) == null ? void 0 : f[r]) == null ? void 0 : A.currency)})` : m,
-        visible: u[r],
-        position: j.RIGHT
-      } : { key: r, label: m, visible: u[r] };
-    }),
-    [o, u, e]
-  ), E = {
+  const {
+    i18n: i
+  } = N(), {
+    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 = {
     title: "noPayoutsFound",
     message: ["tryDifferentSearchOrResetYourFiltersAndWeWillTryAgain"]
-  }, D = s(
-    () => () => /* @__PURE__ */ t(L, { error: i, errorMessage: "weCouldNotLoadYourPayouts", onContactSupport: l }),
-    [i, l]
-  );
-  return /* @__PURE__ */ t("div", { className: P, children: /* @__PURE__ */ t(
-    h,
-    {
-      errorDisplay: D,
-      error: i,
+  }, F = s(() => () => t(L, {
+    error: n,
+    errorMessage: "weCouldNotLoadYourPayouts",
+    onContactSupport: l
+  }), [n, l]);
+  return t("div", {
+    className: P,
+    children: t(C, {
+      errorDisplay: F,
+      error: n,
       columns: b,
-      data: e,
-      loading: T,
+      data: o,
+      loading: E,
       outline: !1,
-      onRowClick: { callback: y },
-      emptyTableMessage: E,
+      onRowClick: {
+        callback: T
+      },
+      emptyTableMessage: D,
       customCells: {
-        createdAt: ({ value: r }) => r ? n ? r && o.fullDate(r) : o.date(r, {
+        createdAt: ({
+          value: r
+        }) => r ? e ? r && p(r, _) : p(r, {
           month: "short",
           day: "numeric",
           year: void 0,
@@ -67,14 +78,39 @@ const C = ["fundsCapturedAmount", "adjustmentAmount", "payoutAmount"], G = ["cre
           minute: "2-digit",
           hour12: !1
         }) : null,
-        fundsCapturedAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { children: o.amount(r.value, r.currency, { hideCurrency: !0 }) }),
-        adjustmentAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { children: o.amount(r.value, r.currency, { hideCurrency: !0 }) }),
-        payoutAmount: ({ value: r }) => r && /* @__PURE__ */ t("span", { className: O({ [`${_}--strong`]: !n }), children: o.amount(r.value, r.currency, { hideCurrency: n }) })
+        fundsCapturedAmount: ({
+          value: r
+        }) => r && t("span", {
+          children: i.amount(r.value, r.currency, {
+            hideCurrency: !0
+          })
+        }),
+        adjustmentAmount: ({
+          value: r
+        }) => r && t("span", {
+          children: i.amount(r.value, r.currency, {
+            hideCurrency: !0
+          })
+        }),
+        payoutAmount: ({
+          value: r
+        }) => r && t("span", {
+          className: j({
+            [`${w}--strong`]: !e
+          }),
+          children: i.amount(r.value, r.currency, {
+            hideCurrency: e
+          })
+        })
       },
-      children: g && /* @__PURE__ */ t(h.Footer, { children: /* @__PURE__ */ t(R, { ...S }) })
-    }
-  ) });
+      children: g && t(C.Footer, {
+        children: t(G, {
+          ...S
+        })
+      })
+    })
+  });
 };
 export {
-  rr as PayoutsTable
+  ir as PayoutsTable
 };

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

@@ -1,19 +1,23 @@
-var r = Object.defineProperty;
-var i = (n, e, t) => e in n ? r(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
-var s = (n, e, t) => (i(n, typeof e != "symbol" ? e + "" : e, t), t);
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import m from "../UIElement/UIElement.js";
-import c from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
-class o extends m {
+var s = Object.defineProperty;
+var i = (o, e, t) => e in o ? s(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var n = (o, e, t) => (i(o, typeof e != "symbol" ? e + "" : e, t), t);
+import a from "../UIElement/UIElement.js";
+import p from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+class r extends a {
   constructor(t) {
     super(t);
-    s(this, "componentToRender", () => /* @__PURE__ */ a(c, { ...this.props, type: "transaction" }));
-    this.elementRef = t && t.elementRef || this, this.componentToRender = this.componentToRender.bind(this);
+    n(this, "componentToRender", () => c(p, {
+      ...this.props,
+      type: "transaction",
+      ref: (t) => void (this.componentRef = t)
+    }));
+    this.componentToRender = this.componentToRender.bind(this);
   }
 }
-s(o, "type", "transactionsDetails");
-const h = o;
+n(r, "type", "transactionDetails");
+const h = r;
 export {
-  o as TransactionsElement,
+  r as TransactionElement,
   h as default
 };