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

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

@@ -1,110 +1,106 @@
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useCallback as A, useMemo as n, useEffect as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import V from "../../../../../hooks/useBalanceAccountSelection.js";
-import W from "../../../../../hooks/useDefaultOverviewFilterParams.js";
-import X from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
-import { LIMIT_OPTIONS as Z, DEFAULT_PAGE_LIMIT as $ } from "../../../../internal/Pagination/constants.js";
-import { FilterParam as l } from "../../../../types.js";
-import { ReportsTable as C, FIELDS as a } from "../ReportsTable/ReportsTable.js";
-import { BASE_CLASS as z, EARLIEST_PAYOUT_SINCE_DATE as ee } from "./constants.js";
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as v, useMemo as m, useEffect as j } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import k from "../../../../../hooks/useBalanceAccountSelection.js";
+import G from "../../../../../hooks/useDefaultOverviewFilterParams.js";
+import H from "../../../../internal/FilterBar/filters/DateFilter/DateFilter.js";
+import { LIMIT_OPTIONS as Y, DEFAULT_PAGE_LIMIT as J } from "../../../../internal/Pagination/constants.js";
+import { FilterParam as s } from "../../../../types.js";
+import { ReportsTable as Q, FIELDS as V } from "../ReportsTable/ReportsTable.js";
+import { BASE_CLASS as W, EARLIEST_PAYOUT_SINCE_DATE as X } from "./constants.js";
 /* empty css                     */
-import { useCustomColumnsData as re } from "../../../../../hooks/useCustomColumnsData.js";
-import { hasCustomField as te } from "../../../../utils/customData/hasCustomField.js";
-import { mergeRecords as se } from "../../../../utils/customData/mergeRecords.js";
-import oe from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
-import { useFilterBarState as le, FilterBarMobileSwitch as ie, FilterBar as pe } from "../../../../internal/FilterBar/FilterBar.js";
-import me from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
-import { useConfigContext as fe } from "../../../../../core/ConfigContext/context.js";
-import { isFunction as ne } from "../../../../../utils/value/is.js";
-import { Header as ce } from "../../../../internal/Header/Header.js";
-const Ne = ({
-  onFiltersChanged: i,
-  balanceAccounts: c,
-  allowLimitSelection: d = !0,
-  preferredLimit: L = $,
-  isLoadingBalanceAccount: _,
-  onContactSupport: P,
-  hideTitle: g,
-  dataCustomization: e
+import { useCustomColumnsData as Z } from "../../../../../hooks/useCustomColumnsData.js";
+import { hasCustomField as $ } from "../../../../utils/customData/hasCustomField.js";
+import { mergeRecords as z } from "../../../../utils/customData/mergeRecords.js";
+import ee from "../../../../internal/Pagination/hooks/useCursorPaginatedRecords.js";
+import { useFilterBarState as te, FilterBarMobileSwitch as re, FilterBar as oe } from "../../../../internal/FilterBar/FilterBar.js";
+import ie from "../../../../internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js";
+import { useConfigContext as se } from "../../../../../core/ConfigContext/context.js";
+import { isFunction as ae } from "../../../../../utils/value/is.js";
+import { Header as ne } from "../../../../internal/Header/Header.js";
+const ge = ({
+  onFiltersChanged: a,
+  balanceAccounts: p,
+  allowLimitSelection: u = !0,
+  preferredLimit: C = J,
+  isLoadingBalanceAccount: F,
+  onContactSupport: S,
+  hideTitle: T,
+  dataCustomization: r
 }) => {
-  var T, D, R, u;
-  const { getReports: p } = fe().endpoints, { activeBalanceAccount: r, balanceAccountSelectionOptions: h, onBalanceAccountSelection: v } = V(c), { defaultParams: o, nowTimestamp: O, refreshNowTimestamp: m } = W("reports", r), b = A(
-    async (t, f) => p({ signal: f, errorLevel: "error" }, {
+  const { getReports: n } = se().endpoints, { activeBalanceAccount: e, balanceAccountSelectionOptions: D, onBalanceAccountSelection: R } = k({ balanceAccounts: p }), { defaultParams: o, nowTimestamp: I, refreshNowTimestamp: l } = G("reports", e), L = v(
+    async (i, c) => n({ signal: c, errorLevel: "error" }, {
       query: {
-        ...t,
+        ...i,
         type: "payout",
-        createdSince: t[l.CREATED_SINCE] ?? o.current.defaultFilterParams[l.CREATED_SINCE],
-        createdUntil: t[l.CREATED_UNTIL] ?? o.current.defaultFilterParams[l.CREATED_UNTIL],
-        balanceAccountId: (r == null ? void 0 : r.id) ?? ""
+        createdSince: i[s.CREATED_SINCE] ?? o.current.defaultFilterParams[s.CREATED_SINCE],
+        createdUntil: i[s.CREATED_UNTIL] ?? o.current.defaultFilterParams[s.CREATED_UNTIL],
+        balanceAccountId: e?.id ?? ""
       }
     }),
-    [r == null ? void 0 : r.id, o, p]
-  ), E = le(), w = n(() => ne(i) ? i : void 0, [i]), y = n(() => d ? Z : void 0, [d]), { canResetFilters: N, error: U, fetching: M, filters: F, limit: x, limitOptions: K, records: S, resetFilters: de, updateFilters: q, updateLimit: j, ...k } = oe({
-    fetchRecords: b,
+    [e?.id, o, n]
+  ), d = te(), _ = m(() => ae(a) ? a : void 0, [a]), P = m(() => u ? Y : void 0, [u]), { canResetFilters: g, error: h, fetching: O, filters: f, limit: b, limitOptions: B, records: A, resetFilters: le, updateFilters: w, updateLimit: y, ...N } = ee({
+    fetchRecords: L,
     dataField: "data",
     filterParams: o.current.defaultFilterParams,
     initialFiltersSameAsDefault: !0,
-    onFiltersChanged: w,
-    preferredLimit: L,
-    preferredLimitOptions: y,
-    enabled: !!(r != null && r.id) && !!p
-  }), B = A(
-    ({ records: t, retrievedData: f }) => se(t, f, (I, J) => I.createdAt === J.createdAt),
+    onFiltersChanged: _,
+    preferredLimit: C,
+    preferredLimitOptions: P,
+    enabled: !!e?.id && !!n
+  }), U = v(
+    ({ records: i, retrievedData: c }) => z(i, c, (E, q) => E.createdAt === q.createdAt),
     []
-  ), G = n(() => {
-    var t;
-    return te((t = e == null ? void 0 : e.list) == null ? void 0 : t.fields, a);
-  }, [(T = e == null ? void 0 : e.list) == null ? void 0 : T.fields]), { customRecords: H, loadingCustomRecords: Y } = re({
-    records: S,
-    hasCustomColumn: G,
-    onDataRetrieve: (D = e == null ? void 0 : e.list) == null ? void 0 : D.onDataRetrieve,
-    mergeCustomData: B
+  ), M = m(() => $(r?.list?.fields, V), [r?.list?.fields]), { customRecords: x, loadingCustomRecords: K } = Z({
+    records: A,
+    hasCustomColumn: M,
+    onDataRetrieve: r?.list?.onDataRetrieve,
+    mergeCustomData: U
   });
-  return Q(() => {
-    m();
-  }, [F, m]), /* @__PURE__ */ s("div", { className: z, children: [
-    /* @__PURE__ */ s(ce, { hideTitle: g, titleKey: "reports.overview.title", subtitleKey: "reports.overview.generateInfo", children: /* @__PURE__ */ s(ie, { ...E }) }),
-    /* @__PURE__ */ s(pe, { ...E, ariaLabelKey: "reports.overview.filters.label", children: [
-      /* @__PURE__ */ s(
-        me,
+  return j(() => {
+    l();
+  }, [f, l]), /* @__PURE__ */ t("div", { className: W, children: [
+    /* @__PURE__ */ t(ne, { hideTitle: T, titleKey: "reports.overview.title", subtitleKey: "reports.overview.generateInfo", children: /* @__PURE__ */ t(re, { ...d }) }),
+    /* @__PURE__ */ t(oe, { ...d, ariaLabelKey: "reports.overview.filters.label", children: [
+      /* @__PURE__ */ t(
+        ie,
         {
-          activeBalanceAccount: r,
-          balanceAccountSelectionOptions: h,
-          onBalanceAccountSelection: v
+          activeBalanceAccount: e,
+          balanceAccountSelectionOptions: D,
+          onBalanceAccountSelection: R
         }
       ),
-      /* @__PURE__ */ s(
-        X,
+      /* @__PURE__ */ t(
+        H,
         {
-          canResetFilters: N,
+          canResetFilters: g,
           defaultParams: o,
-          filters: F,
-          nowTimestamp: O,
-          refreshNowTimestamp: m,
-          sinceDate: ee,
+          filters: f,
+          nowTimestamp: I,
+          refreshNowTimestamp: l,
+          sinceDate: X,
           timezone: "UTC",
-          updateFilters: q
+          updateFilters: w
         }
       )
     ] }),
-    /* @__PURE__ */ s(
-      C,
+    /* @__PURE__ */ t(
+      Q,
       {
-        balanceAccountId: r == null ? void 0 : r.id,
-        loading: M || _ || !c || !r || Y,
-        data: (R = e == null ? void 0 : e.list) != null && R.onDataRetrieve ? H : S,
+        balanceAccountId: e?.id,
+        loading: O || F || !p || !e || K,
+        data: r?.list?.onDataRetrieve ? x : A,
         showPagination: !0,
-        limit: x,
-        limitOptions: K,
-        onContactSupport: P,
-        onLimitSelection: j,
-        error: U,
-        customColumns: (u = e == null ? void 0 : e.list) == null ? void 0 : u.fields,
-        ...k
+        limit: b,
+        limitOptions: B,
+        onContactSupport: S,
+        onLimitSelection: y,
+        error: h,
+        customColumns: r?.list?.fields,
+        ...N
       }
     )
   ] });
 };
 export {
-  Ne as ReportsOverview
+  ge as ReportsOverview
 };

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

@@ -1,5 +1,5 @@
 import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useState as M, useMemo as s, useCallback as Y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useState as M, useMemo as i, useCallback as Y } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import q from "../../../../../core/Context/useCoreContext.js";
 import { useFreezePeriod as x } from "../../../../../hooks/useFreezePeriod.js";
 import U from "../../../../../hooks/useTimezoneAwareDateFormatting.js";
@@ -7,7 +7,7 @@ import { Alert as z } from "../../../../internal/Alert/Alert.js";
 import { AlertTypeOption as K } from "../../../../internal/Alert/types.js";
 import k from "../../../../internal/Button/DownloadButton/DownloadButton.js";
 import G from "../../../../internal/DataOverviewError/DataOverviewError.js";
-import { TypographyVariant as i, TypographyElement as a } from "../../../../internal/Typography/types.js";
+import { TypographyVariant as s, TypographyElement as a } from "../../../../internal/Typography/types.js";
 import n from "../../../../internal/Typography/Typography.js";
 import { useResponsiveContainer as f, containerQueries as u } from "../../../../../hooks/useResponsiveContainer.js";
 import { BASE_CLASS as j, DATE_TYPE_CLASS as Q, DATE_TYPE_DATE_SECTION_CLASS as V, DISABLED_BUTTONS_TIMEOUT as W } from "./constants.js";
@@ -33,11 +33,11 @@ const $ = ["createdAt", "dateAndReportType", "reportType", "reportFile"], ee = {
   customColumns: C,
   ..._
 }) => {
-  const { i18n: o } = q(), { dateFormat: v } = U("UTC"), { freeze: h, frozen: N } = x(W), [y, d] = M(null), { refreshing: T } = Z(), F = s(() => p || T, [p, T]), m = f(u.up.sm), c = f(u.down.xs), R = X({
+  const { i18n: o } = q(), { dateFormat: v } = U("UTC"), { freeze: h, frozen: N } = x(W), [y, d] = M(null), { refreshing: T } = Z(), F = i(() => p || T, [p, T]), m = f(u.up.sm), c = f(u.down.xs), R = X({
     customColumns: C,
     fields: $,
     fieldsKeys: ee,
-    columnConfig: s(
+    columnConfig: i(
       () => ({
         dateAndReportType: { visible: c },
         createdAt: { visible: m },
@@ -51,13 +51,13 @@ const $ = ["createdAt", "dateAndReportType", "reportType", "reportFile"], ee = {
   }, []), O = {
     title: "reports.overview.errors.listEmpty",
     message: ["common.errors.updateFilters"]
-  }, L = s(
+  }, L = i(
     () => () => /* @__PURE__ */ r(G, { error: l, errorMessage: "reports.overview.errors.listUnavailable", onContactSupport: A }),
     [l, A]
-  ), B = s(() => /* @__PURE__ */ r(H, { name: "warning" }), []), I = s(
+  ), B = i(() => /* @__PURE__ */ r(H, { name: "warning" }), []), I = i(
     () => (e) => {
       const t = {};
-      switch (e == null ? void 0 : e.errorCode) {
+      switch (e?.errorCode) {
         case "999_429_001":
           t.title = o.get("reports.overview.errors.download"), t.description = o.get("reports.overview.errors.tooManyDownloads");
           break;
@@ -83,12 +83,12 @@ const $ = ["createdAt", "dateAndReportType", "reportType", "reportFile"], ee = {
         outline: !1,
         emptyTableMessage: O,
         customCells: {
-          createdAt: ({ value: e }) => e ? e && /* @__PURE__ */ r("time", { dateTime: e, children: /* @__PURE__ */ r(n, { el: a.SPAN, variant: i.BODY, children: v(e, E) }) }) : null,
+          createdAt: ({ value: e }) => e ? e && /* @__PURE__ */ r("time", { dateTime: e, children: /* @__PURE__ */ r(n, { el: a.SPAN, variant: s.BODY, children: v(e, E) }) }) : null,
           dateAndReportType: ({ item: e }) => /* @__PURE__ */ r("div", { className: Q, children: [
-            (e == null ? void 0 : e.type) && /* @__PURE__ */ r(n, { el: a.SPAN, variant: i.BODY, stronger: !0, children: w(o, e.type) }),
-            /* @__PURE__ */ r("time", { dateTime: e.createdAt, children: /* @__PURE__ */ r(n, { className: V, el: a.SPAN, variant: i.BODY, children: v(e.createdAt, E) }) })
+            e?.type && /* @__PURE__ */ r(n, { el: a.SPAN, variant: s.BODY, stronger: !0, children: w(o, e.type) }),
+            /* @__PURE__ */ r("time", { dateTime: e.createdAt, children: /* @__PURE__ */ r(n, { className: V, el: a.SPAN, variant: s.BODY, children: v(e.createdAt, E) }) })
           ] }),
-          reportType: ({ item: e }) => (e == null ? void 0 : e.type) && /* @__PURE__ */ r(n, { el: a.SPAN, variant: i.BODY, children: w(o, e.type) }),
+          reportType: ({ item: e }) => e?.type && /* @__PURE__ */ r(n, { el: a.SPAN, variant: s.BODY, children: w(o, e.type) }),
           reportFile: ({ item: e }) => {
             const t = {
               query: { balanceAccountId: S, createdAt: e.createdAt, type: e.type }

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

@@ -1,17 +1,13 @@
-var n = Object.defineProperty;
-var s = (e, t, o) => t in e ? n(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
-var r = (e, t, o) => s(e, typeof t != "symbol" ? t + "" : t, o);
-import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { UIElement as a } from "../UIElement/UIElement.js";
-import p from "../../internal/DataOverviewDetails/DataOverviewDetails.js";
-class m extends a {
-  constructor(o) {
-    super(o);
-    r(this, "componentToRender", () => /* @__PURE__ */ i(p, { ...this.props, type: "transaction" }));
-    this.componentToRender = this.componentToRender.bind(this);
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { UIElement as e } from "../UIElement/UIElement.js";
+import { TransactionData as n } from "./components/TransactionData/TransactionData.js";
+class m extends e {
+  static type = "transactionDetails";
+  constructor(t) {
+    super(t), this.componentToRender = this.componentToRender.bind(this);
   }
+  componentToRender = () => /* @__PURE__ */ o(n, { ...this.props });
 }
-r(m, "type", "transactionDetails");
 export {
   m as TransactionElement,
   m as default

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

@@ -0,0 +1,91 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import N from "../../../../internal/Tabs/Tabs.js";
+import _ from "./PaymentRefundAlerts.js";
+import C from "./PaymentDetailsActions.js";
+import L from "./PaymentDetailsProperties.js";
+import R from "./PaymentDetailsStatusBox.js";
+import B from "./PaymentDetailsSummary.js";
+import X from "./PaymentDetailsTimeline.js";
+import w from "../../../../../core/Context/useCoreContext.js";
+import { DetailsTab as m } from "../../types.js";
+import { TX_DETAILS_TABS as x, TX_DATA_CLASS as U, TX_DATA_CONTAINER as Y } from "../../constants.js";
+import { useState as j, useMemo as p, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+const F = ({
+  dataCustomization: i,
+  extraFields: r,
+  fullRefundFailed: c,
+  fullRefundInProgress: v,
+  refundAmounts: D,
+  refundAvailable: d,
+  refundCurrency: y,
+  refundDisabled: S,
+  refundedAmount: b,
+  refundedState: l,
+  refundLocked: g,
+  setActiveView: h,
+  transaction: e,
+  transactionNavigator: E
+}) => {
+  const { i18n: P } = w(), [s, n] = j(), o = p(
+    () => x.filter(({ id: a }) => {
+      switch (a) {
+        case m.SUMMARY:
+          const { additions: u, deductions: f, originalAmount: T, amountBeforeDeductions: A, netAmount: M } = e;
+          return u && u.length > 0 || f && f.length > 0 || T && T.value !== A.value || M.value !== A.value;
+        case m.TIMELINE:
+          return e.events && e.events.length > 0;
+        default:
+          return !0;
+      }
+    }),
+    [e]
+  ), I = p(
+    () => ({
+      [m.DETAILS]: /* @__PURE__ */ t(L, { dataCustomization: i, extraFields: r, transaction: e }),
+      [m.SUMMARY]: /* @__PURE__ */ t(B, { transaction: e }),
+      [m.TIMELINE]: /* @__PURE__ */ t(X, { transaction: e })
+    }),
+    [i, r, e]
+  );
+  return O(() => n(o[0]?.id), [o]), /* @__PURE__ */ t("div", { className: U, children: [
+    /* @__PURE__ */ t(R, { refundedState: l, transaction: e }),
+    /* @__PURE__ */ t("div", { className: Y, children: [
+      o.length > 1 && /* @__PURE__ */ t(
+        N,
+        {
+          "aria-label": P.get("transactions.details.viewSelect.a11y.label"),
+          onChange: ({ id: a }) => n(a),
+          tabs: o,
+          activeTab: s
+        }
+      ),
+      s && I[s]
+    ] }),
+    /* @__PURE__ */ t(
+      _,
+      {
+        fullRefundFailed: c,
+        fullRefundInProgress: v,
+        refundAmounts: D,
+        refundCurrency: y,
+        refundedAmount: b,
+        refundedState: l,
+        refundLocked: g
+      }
+    ),
+    /* @__PURE__ */ t(
+      C,
+      {
+        extraFields: r,
+        refundAvailable: d,
+        refundDisabled: S,
+        setActiveView: h,
+        transaction: e,
+        transactionNavigator: E
+      }
+    )
+  ] });
+};
+export {
+  F as default
+};

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

@@ -0,0 +1,83 @@
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import E from "classnames";
+import { memo as D } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as n } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { ActiveView as P } from "../../types.js";
+import { ButtonVariant as s } from "../../../../internal/Button/types.js";
+import { ButtonActionsLayoutBasic as h } from "../../../../internal/Button/ButtonActions/types.js";
+import { sharedTransactionDetailsEventProperties as O, TX_DATA_CONTAINER as _, TX_DATA_ACTION_BAR as I } from "../../constants.js";
+import w from "../../../../internal/Button/ButtonActions/ButtonActions.js";
+import x from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import L from "../../../../../core/Context/useCoreContext.js";
+import { Icon as M } from "../../../../internal/Icon/Icon.js";
+import { Fragment as S } from "../../../../../external/preact/dist/preact.module.js";
+const X = ({
+  extraFields: c,
+  refundAvailable: m,
+  refundDisabled: r,
+  setActiveView: l,
+  transaction: f,
+  transactionNavigator: B
+}) => {
+  const u = x(), { currentTransaction: d, canNavigateBackward: p, canNavigateForward: T, backward: v, forward: g } = B, { i18n: a } = L(), e = n(
+    () => ({
+      backToRefund: { title: a.get("transactions.details.actions.backToRefund"), eventLabel: "Return to refund" },
+      goToPayment: { title: a.get("transactions.details.actions.goToPayment"), eventLabel: "Go to payment" },
+      refund: { title: a.get("transactions.details.actions.refund") }
+    }),
+    [a]
+  ), i = n(() => {
+    if (d === f.id) {
+      if (p) return "backToRefund";
+      if (T) return "goToPayment";
+    }
+  }, [p, T, d, f.id]), A = n(() => {
+    if (m)
+      return {
+        disabled: r,
+        event: () => {
+          r || l(P.REFUND);
+        },
+        title: e.refund.title,
+        variant: s.PRIMARY
+      };
+  }, [e, m, r, l]), N = n(() => {
+    if (i) {
+      const t = e[i], b = i === "backToRefund", k = b ? v : g;
+      return {
+        disabled: !1,
+        event: () => {
+          try {
+            k();
+          } finally {
+            u.addEvent?.("Clicked button", {
+              ...O,
+              label: t.eventLabel
+            });
+          }
+        },
+        renderTitle: (C) => /* @__PURE__ */ o(S, { children: [
+          /* @__PURE__ */ o(M, { name: "angle-right", style: { transform: `scaleX(${b ? -1 : 1})` } }),
+          /* @__PURE__ */ o("span", { children: C })
+        ] }),
+        title: t.title,
+        variant: s.SECONDARY
+      };
+    }
+  }, [e, v, g, i, u]), y = n(
+    () => Object.values(c || []).filter((t) => t?.type === "button").map((t) => ({
+      title: t.value,
+      variant: s.SECONDARY,
+      event: t.config?.action,
+      classNames: t.config?.className ? [t.config.className] : []
+    })),
+    [c]
+  ), R = n(
+    () => [A, N, ...y].filter(Boolean),
+    [A, N, y]
+  );
+  return R.length > 0 ? /* @__PURE__ */ o("div", { className: E(_, I), children: /* @__PURE__ */ o(w, { actions: R, layout: h.BUTTONS_END }) }) : null;
+}, W = D(X);
+export {
+  W as default
+};

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

@@ -0,0 +1,141 @@
+import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { memo as N } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as u, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { getTransactionRefundReason as K } from "../../../../utils/translation/getters.js";
+import { isCustomDataObject as y } from "../../../../internal/DataGrid/components/TableCells.js";
+import { TypographyVariant as k, TypographyElement as A } from "../../../../internal/Typography/types.js";
+import { TX_DETAILS_FIELDS_REMAPS as V, TX_DATA_LABEL as g, TX_DATA_LIST as O, sharedTransactionDetailsEventProperties as j } from "../../constants.js";
+import { normalizeCustomFields as F } from "../../../../utils/customData/normalizeCustomFields.js";
+import X from "../../../../../core/Context/analytics/useAnalyticsContext.js";
+import w from "../../../../../core/Context/useCoreContext.js";
+import I from "../../../../internal/Typography/Typography.js";
+import Y from "../../../../internal/DataGrid/components/Icon.js";
+import q from "../../../../internal/CopyText/CopyText.js";
+import z from "../../../../internal/Link/Link.js";
+import R from "classnames";
+import $ from "../../../../internal/StructuredList/StructuredList.js";
+const G = {
+  ...j,
+  sectionName: "Details",
+  label: "Copy button"
+}, o = {
+  account: "transactions.details.fields.account",
+  id: "transactions.details.fields.referenceID",
+  merchantReference: "transactions.details.fields.merchantReference",
+  pspReference: "transactions.details.fields.pspReference",
+  refundPspReference: "transactions.details.fields.refundPspReference",
+  refundReason: "transactions.details.fields.refundReason"
+}, T = {
+  id: "transactions.details.actions.copyReferenceID",
+  merchantReference: "transactions.details.actions.copyMerchantReference",
+  pspReference: "transactions.details.actions.copyPspReference"
+}, i = null, c = ({ dataCustomization: s, extraFields: p, transaction: a }) => {
+  const { i18n: d } = w(), h = u(() => {
+    const { balanceAccount: e, category: r, id: m, merchantReference: t, paymentPspReference: D, refundMetadata: l } = a, b = e?.description || e?.id, L = r === "Refund", x = F(s?.details?.fields, V, a), S = [
+      // balance account
+      b ? { id: "account", key: o.account, value: b } : i,
+      // refund reason
+      L && l?.refundReason ? {
+        id: "refundReason",
+        key: o.refundReason,
+        value: K(d, l.refundReason)
+      } : i,
+      // reference id
+      {
+        id: "id",
+        key: o.id,
+        value: /* @__PURE__ */ n(
+          c.CopyText,
+          {
+            copyButtonAriaLabelKey: T.id,
+            trackingName: "Reference ID",
+            textToCopy: m
+          }
+        )
+      },
+      // merchant reference
+      t ? {
+        id: "merchantReference",
+        key: o.merchantReference,
+        value: /* @__PURE__ */ n(
+          c.CopyText,
+          {
+            copyButtonAriaLabelKey: T.merchantReference,
+            trackingName: "Merchant reference",
+            textToCopy: t
+          }
+        )
+      } : i,
+      // payment psp reference
+      D ? {
+        id: "paymentPspReference",
+        key: o.pspReference,
+        value: /* @__PURE__ */ n(
+          c.CopyText,
+          {
+            copyButtonAriaLabelKey: T.pspReference,
+            trackingName: "PSP reference",
+            textToCopy: D
+          }
+        )
+      } : i,
+      // refund psp reference
+      L && l?.refundPspReference ? {
+        id: "refundPspReference",
+        key: o.refundPspReference,
+        value: l.refundPspReference
+      } : i
+    ], B = x ? (f) => x.find((M) => M.key === f)?.visibility !== "hidden" : () => !0;
+    return S.filter((f) => f?.id && B(f.id));
+  }, [d, s, a]), C = u(
+    () => Object.entries(p || {}).filter(([, e]) => e?.type !== "button").map(([e, r]) => ({
+      key: e,
+      value: y(r) ? r.value : r,
+      type: y(r) ? r.type : "text",
+      config: y(r) ? r.config : void 0
+    })),
+    [p]
+  ), _ = u(() => [...h, ...C], [C, h]), v = P(
+    (e) => /* @__PURE__ */ n("div", { className: g, children: e }),
+    []
+  ), E = P((e, r, m, t) => {
+    if (t)
+      switch (m) {
+        case "icon":
+          return /* @__PURE__ */ n("div", { className: R(t.className, "adyen-pe-transaction-data__list-icon-value"), children: [
+            /* @__PURE__ */ n(Y, { url: t.src, alt: t.alt || e }),
+            /* @__PURE__ */ n(I, { el: A.SPAN, variant: k.BODY, children: [
+              " ",
+              e
+            ] })
+          ] });
+        case "link":
+          return /* @__PURE__ */ n(z, { classNames: [R(t.className)], href: t.href, target: t.target || "_blank", children: e });
+      }
+    return /* @__PURE__ */ n(I, { el: A.DIV, variant: k.BODY, className: R(t?.className), children: e });
+  }, []);
+  return /* @__PURE__ */ n(
+    $,
+    {
+      align: "start",
+      layout: "5-7",
+      items: _,
+      classNames: O,
+      renderLabel: v,
+      renderValue: E
+    }
+  );
+};
+c.CopyText = N(({ trackingName: s, ...p }) => {
+  const a = X(), d = P(() => {
+    s && a.addEvent?.("Clicked button", {
+      ...G,
+      subSectionName: s
+    });
+  }, [s, a]);
+  return /* @__PURE__ */ n(q, { ...p, onCopyText: d, showCopyTextTooltip: !1, type: "Default" });
+});
+const de = N(c);
+export {
+  de as default
+};

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

@@ -0,0 +1,48 @@
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import p from "classnames";
+import f from "../../../../internal/StatusBox/StatusBox.js";
+import A from "../../../../internal/StatusBox/useStatusBox.js";
+import d from "../../../../../core/Context/useCoreContext.js";
+import { getTransactionCategory as S } from "../../../../utils/translation/getters.js";
+import { getAmountStyleForTransaction as g, getRefundTypeForTransaction as y } from "../../utils.js";
+import { TX_DATA_AMOUNT as x, TX_DATA_CONTAINER as B, TX_STATUS_BOX as C, TX_DATA_TAGS as D } from "../../constants.js";
+import { RefundType as l, RefundedState as u } from "../../types.js";
+import { TagVariant as m } from "../../../../internal/Tag/types.js";
+import { Tag as r } from "../../../../internal/Tag/Tag.js";
+import { useMemo as T } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { memo as c } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { Fragment as L } from "../../../../../external/preact/dist/preact.module.js";
+const i = ({ refundedState: e, transaction: t }) => {
+  const o = A({
+    timezone: t.balanceAccount?.timeZone,
+    createdAt: t.createdAt,
+    amountData: t.netAmount,
+    paymentMethodData: t.paymentMethod,
+    bankAccount: t.bankAccount
+  }), n = T(
+    () => ({
+      amount: `${x}--${g(t)}`
+    }),
+    [t]
+  ), s = T(
+    () => /* @__PURE__ */ a(i.StatusTags, { transaction: t, refundedState: e }),
+    [t, e]
+  );
+  return /* @__PURE__ */ a("div", { className: p(B, C), children: /* @__PURE__ */ a(f, { ...o, classNames: n, tag: s }) });
+};
+i.StatusTags = c(({ transaction: e, refundedState: t }) => {
+  const { i18n: o } = d(), { category: n } = e, s = y(e);
+  return /* @__PURE__ */ a("div", { className: D, children: [
+    n && /* @__PURE__ */ a(r, { label: S(o, n), variant: m.DEFAULT }),
+    s && /* @__PURE__ */ a(L, { children: [
+      s === l.FULL && /* @__PURE__ */ a(r, { label: o.get("transactions.details.common.refundTypes.full"), variant: m.SUCCESS }),
+      s === l.PARTIAL && /* @__PURE__ */ a(r, { label: o.get("transactions.details.common.refundTypes.partial"), variant: m.BLUE })
+    ] }),
+    t === u.FULL && /* @__PURE__ */ a(r, { label: o.get("transactions.details.common.refundedStates.full"), variant: m.SUCCESS }),
+    t === u.PARTIAL && /* @__PURE__ */ a(r, { label: o.get("transactions.details.common.refundedStates.partial"), variant: m.BLUE })
+  ] });
+});
+const I = c(i);
+export {
+  I as default
+};