@blocklet/payment-react 1.15.33 → 1.15.35

package/es/checkout/donate.d.ts

@@ -16,11 +16,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
     timeout?: number;
-    mode?: 'inline' | 'default';
+    mode?: 'inline' | 'default' | 'custom';
     inlineOptions?: {
         button?: ButtonType;
     };
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
+    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {

package/es/checkout/donate.js

@@ -224,7 +224,8 @@ function CheckoutDonateInner({
   onError,
   mode,
   inlineOptions = {},
-  theme
+  theme,
+  children
 }) {
   const { state, setState, donation, supporters } = useDonation(settings, livemode, mode);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -250,102 +251,126 @@ function CheckoutDonateInner({
   const handlePopoverClose = () => {
     setPopoverOpen(false);
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    mode === "inline" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          size: settings.appearance?.button?.size || "medium",
-          color: settings.appearance?.button?.color || "primary",
-          variant: settings.appearance?.button?.variant || "contained",
-          ...settings.appearance?.button,
-          onClick: handlePopoverOpen,
-          children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-            settings.appearance.button.icon,
-            typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: settings.appearance.button.text }) : settings.appearance.button.text
-          ] })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Popover,
-        {
-          id: "mouse-over-popper",
-          open: popoverOpen,
-          anchorEl,
-          onClose: handlePopoverClose,
-          anchorOrigin: {
-            vertical: "top",
-            horizontal: "center"
-          },
-          transformOrigin: {
-            vertical: "bottom",
-            horizontal: "center"
-          },
-          children: /* @__PURE__ */ jsxs(
-            Box,
-            {
-              sx: {
-                minWidth: 320,
-                padding: "20px"
-              },
-              children: [
-                supporters.loading && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    style: {
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                      right: 0,
-                      bottom: 0,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      backgroundColor: "rgba(255, 255, 255, 0.7)"
-                    },
-                    children: /* @__PURE__ */ jsx(CircularProgress, {})
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
-                  /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => setState({ open: true }), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                    inlineOptions?.button?.icon,
-                    typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineOptions?.button?.text }) : inlineOptions?.button?.text
-                  ] }) }),
-                  /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
-                ] })
-              ]
-            }
-          )
-        }
-      )
-    ] }) : /* @__PURE__ */ jsxs(
-      Box,
+  const startDonate = () => {
+    setState({ open: true });
+  };
+  const inlineRender = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        sx: { width: "100%", minWidth: 300, maxWidth: 720 },
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        gap: { xs: 1, sm: 2 },
-        children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: settings.appearance?.button?.size || "medium",
-              color: settings.appearance?.button?.color || "primary",
-              variant: settings.appearance?.button?.variant || "contained",
-              ...settings.appearance?.button,
-              onClick: () => setState({ open: true }),
-              children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                settings.appearance.button.icon,
-                typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
-              ] })
-            }
-          ),
-          supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
-          supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
-        ]
+        size: settings.appearance?.button?.size || "medium",
+        color: settings.appearance?.button?.color || "primary",
+        variant: settings.appearance?.button?.variant || "contained",
+        ...settings.appearance?.button,
+        onClick: handlePopoverOpen,
+        children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+          settings.appearance.button.icon,
+          typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: settings.appearance.button.text }) : settings.appearance.button.text
+        ] })
       }
     ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: "mouse-over-popper",
+        open: popoverOpen,
+        anchorEl,
+        onClose: handlePopoverClose,
+        anchorOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              minWidth: 320,
+              padding: "20px"
+            },
+            children: [
+              supporters.loading && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "rgba(255, 255, 255, 0.7)"
+                  },
+                  children: /* @__PURE__ */ jsx(CircularProgress, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexDirection: "column", gap: 2, children: [
+                /* @__PURE__ */ jsx(Button, { ...inlineOptions.button, onClick: () => startDonate(), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                  inlineOptions?.button?.icon,
+                  typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "nowrap" }, children: inlineOptions?.button?.text }) : inlineOptions?.button?.text
+                ] }) }),
+                /* @__PURE__ */ jsx(SupporterSimple, { ...supporters.data })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+  const defaultRender = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: { width: "100%", minWidth: 300, maxWidth: 720 },
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: { xs: 1, sm: 2 },
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: settings.appearance?.button?.size || "medium",
+            color: settings.appearance?.button?.color || "primary",
+            variant: settings.appearance?.button?.variant || "contained",
+            ...settings.appearance?.button,
+            onClick: () => startDonate(),
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+              settings.appearance.button.icon,
+              typeof settings.appearance.button.text === "string" ? /* @__PURE__ */ jsx(Typography, { children: settings.appearance.button.text }) : settings.appearance.button.text
+            ] })
+          }
+        ),
+        supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */ jsx(SupporterAvatar, { ...supporters.data }),
+        supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */ jsx(SupporterTable, { ...supporters.data })
+      ]
+    }
+  );
+  const renderInnerView = () => {
+    if (mode === "inline") {
+      return inlineRender;
+    }
+    if (mode === "custom") {
+      return children && typeof children === "function" ? /* @__PURE__ */ jsx(Fragment, { children: children(
+        startDonate,
+        `${formatAmount(
+          supporters.data?.totalAmount || "0",
+          supporters.data?.currency?.decimal
+        )} ${supporters.data?.currency?.symbol}`,
+        supporters.data || {}
+      ) }) : /* @__PURE__ */ jsxs(Typography, { children: [
+        "Please provide a valid render function ",
+        /* @__PURE__ */ jsx("pre", { children: "(openDonate, donateTotalAmount, supporters) => ReactNode" })
+      ] });
+    }
+    return defaultRender;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderInnerView(),
     donation.data && /* @__PURE__ */ jsx(
       Dialog,
       {

package/es/components/pricing-table.d.ts

@@ -6,13 +6,15 @@ type Props = {
     alignItems?: 'center' | 'left';
     mode?: 'checkout' | 'select';
     interval?: string;
+    hideCurrency?: boolean;
 };
-declare function PricingTable({ table, alignItems, interval, mode, onSelect }: Props): import("react").JSX.Element;
+declare function PricingTable({ table, alignItems, interval, mode, onSelect, hideCurrency }: Props): import("react").JSX.Element;
 declare namespace PricingTable {
     var defaultProps: {
         alignItems: string;
         mode: string;
         interval: string;
+        hideCurrency: boolean;
     };
 }
 export default PricingTable;

package/es/components/pricing-table.js

@@ -31,7 +31,6 @@ import {
   getPriceUintAmountByCurrency,
   isMobileSafari
 } from "../libs/util.js";
-import Amount from "../payment/amount.js";
 import { useMobile } from "../hooks/mobile.js";
 import TruncatedText from "./truncated-text.js";
 const sortOrder = {
@@ -58,9 +57,10 @@ const groupItemsByRecurring = (items, currency) => {
 PricingTable.defaultProps = {
   alignItems: "center",
   mode: "checkout",
-  interval: ""
+  interval: "",
+  hideCurrency: false
 };
-export default function PricingTable({ table, alignItems, interval, mode, onSelect }) {
+export default function PricingTable({ table, alignItems, interval, mode, onSelect, hideCurrency }) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const {
@@ -171,10 +171,10 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
         max-width: 360px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        max-width: 720px !important;
+        max-width: 780px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        max-width: 1080px !important;
+        max-width: 1200px !important;
       }
     }
   `;
@@ -258,7 +258,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   ))
                 }
               ) }),
-              currencyList.length > 0 && /* @__PURE__ */ jsx(
+              currencyList.length > 0 && !hideCurrency && /* @__PURE__ */ jsx(
                 Select,
                 {
                   value: currency?.id,
@@ -287,6 +287,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   if (mode === "select") {
                     action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
                   }
+                  const [amount, unit] = formatPriceAmount(x.price, currency, x.product.unit_label).split("/");
                   return /* @__PURE__ */ jsxs(
                     Stack,
                     {
@@ -310,13 +311,12 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                         },
                         width: {
                           xs: "100%",
-                          md: "320px"
+                          md: "360px"
                         },
                         maxWidth: "360px",
                         minWidth: "300px",
                         padding: "20px",
-                        position: "relative",
-                        height: "fit-content"
+                        position: "relative"
                       },
                       children: [
                         /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
@@ -332,7 +332,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                 /* @__PURE__ */ jsx(
                                   Typography,
                                   {
-                                    color: "text.primary",
+                                    color: "text.secondary",
                                     fontWeight: 600,
                                     sx: {
                                       fontSize: "18px !important",
@@ -345,7 +345,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                   Chip,
                                   {
                                     label: x.highlight_text,
-                                    color: "default",
+                                    color: "primary",
                                     size: "small",
                                     sx: {
                                       position: "absolute",
@@ -355,11 +355,34 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                                   }
                                 )
                               ] }),
-                              /* @__PURE__ */ jsx(
-                                Amount,
+                              /* @__PURE__ */ jsxs(
+                                Typography,
                                 {
-                                  amount: formatPriceAmount(x.price, currency, x.product.unit_label),
-                                  sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
+                                  component: "div",
+                                  sx: {
+                                    my: 0,
+                                    fontWeight: "700",
+                                    fontSize: "32px",
+                                    letterSpacing: "-0.03rem",
+                                    fontVariantNumeric: "tabular-nums",
+                                    display: "flex",
+                                    alignItems: "baseline",
+                                    gap: "4px",
+                                    flexWrap: "wrap"
+                                  },
+                                  children: [
+                                    amount,
+                                    unit ? /* @__PURE__ */ jsxs(
+                                      Typography,
+                                      {
+                                        sx: { fontSize: "16px", fontWeight: "400", color: "text.secondary", textAlign: "left" },
+                                        children: [
+                                          "/ ",
+                                          unit
+                                        ]
+                                      }
+                                    ) : ""
+                                  ]
                                 }
                               ),
                               /* @__PURE__ */ jsx(
@@ -449,7 +472,7 @@ function Subscribe({ x, action, onSelect, currencyId }) {
       fullWidth: true,
       size: "medium",
       variant: "contained",
-      color: x.is_highlight || x.is_selected ? "info" : "primary",
+      color: "primary",
       sx: {
         fontSize: "16px",
         padding: "10px 20px",

package/es/history/invoice/list.d.ts

@@ -4,6 +4,7 @@ type Props = {
     subscription_id?: string;
     currency_id?: string;
     include_staking?: boolean;
+    include_return_staking?: boolean;
     include_recovered_from?: boolean;
     status?: string;
     pageSize?: number;

package/es/history/invoice/list.js

@@ -16,6 +16,7 @@ import {
   formatError,
   formatToDate,
   formatToDatetime,
+  getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
   getPrefix,
   getTxLink
@@ -69,6 +70,7 @@ const InvoiceTable = React.memo((props) => {
     currency_id,
     subscription_id,
     include_staking,
+    include_return_staking,
     include_recovered_from,
     onTableDataChange
   } = props;
@@ -90,6 +92,7 @@ const InvoiceTable = React.memo((props) => {
       currency_id,
       subscription_id,
       include_staking,
+      include_return_staking,
       include_recovered_from,
       ignore_zero: true
     }),
@@ -131,6 +134,17 @@ const InvoiceTable = React.memo((props) => {
         }
       }
     },
+    {
+      label: t("common.type"),
+      name: "billing_reason",
+      options: {
+        customBodyRenderLite: (_, index) => {
+          const invoice = data.list[index];
+          const link = getInvoiceLink(invoice, action);
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: getInvoiceDescriptionAndReason(invoice, locale)?.type }) });
+        }
+      }
+    },
     {
       label: t("payment.customer.invoice.invoiceNumber"),
       name: "number",
@@ -161,7 +175,7 @@ const InvoiceTable = React.memo((props) => {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
           const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice.description || invoice.id });
+          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
         }
       }
     },

package/es/hooks/scroll.d.ts

@@ -0,0 +1 @@
+export declare function usePreventWheel(): void;

package/es/hooks/scroll.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+export function usePreventWheel() {
+  useEffect(() => {
+    const handleWheel = (e) => {
+      if (document.activeElement?.type === "number") {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+}

package/es/index.d.ts

@@ -36,5 +36,6 @@ export * from './contexts/payment';
 export * from './hooks/subscription';
 export * from './hooks/mobile';
 export * from './hooks/table';
+export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
 export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };

package/es/index.js

@@ -36,6 +36,7 @@ export * from "./contexts/payment.js";
 export * from "./hooks/subscription.js";
 export * from "./hooks/mobile.js";
 export * from "./hooks/table.js";
+export * from "./hooks/scroll.js";
 export { translations, createTranslator } from "./locales/index.js";
 export {
   createLazyComponent,

package/es/libs/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TInvoiceExpanded, TLineItemExpanded, TPaymentCurrency, TPaymentCurrencyExpanded, TPaymentMethod, TPaymentMethodExpanded, TPrice, TProductExpanded, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 import { ActionProps, PricingRenderProps } from '../types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const isPaymentKitMounted: () => any;
@@ -108,3 +108,9 @@ export declare function getWordBreakStyle(value: any): 'break-word' | 'break-all
 export declare function isMobileSafari(): boolean;
 export declare function truncateText(text: string, maxLength: number, useWidth?: boolean): string;
 export declare function getCustomerAvatar(did: string | undefined, updated_at: string | number | undefined, imageSize?: number): string;
+export declare function hasDelegateTxHash(details: PaymentDetails, paymentMethod: TPaymentMethod): any;
+export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded, locale?: string): {
+    description: string | undefined;
+    reason: string;
+    type: string;
+};

package/es/libs/util.js

@@ -669,6 +669,9 @@ export const flattenPaymentMethods = (methods = []) => {
   return out;
 };
 export const getTxLink = (method, details) => {
+  if (!details) {
+    return { text: "N/A", link: "", gas: "" };
+  }
   if (method.type === "arcblock" && details.arcblock?.tx_hash) {
     return {
       link: joinURL(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
@@ -842,3 +845,47 @@ export function getCustomerAvatar(did, updated_at, imageSize = 48) {
   const updated = typeof updated_at === "number" ? updated_at : dayjs(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }
+export function hasDelegateTxHash(details, paymentMethod) {
+  return paymentMethod?.type && ["arcblock", "ethereum"].includes(paymentMethod?.type) && // @ts-ignore
+  details?.[paymentMethod?.type]?.tx_hash;
+}
+export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
+  const { billing_reason: reason, description } = invoice;
+  const reasonMap = {
+    subscription_create: t("payment.invoice.reason.creation", locale),
+    subscription_cycle: t("payment.invoice.reason.cycle", locale),
+    subscription_update: t("payment.invoice.reason.update", locale),
+    subscription_recover: t("payment.invoice.reason.recover", locale),
+    subscription_threshold: t("payment.invoice.reason.threshold", locale),
+    subscription_cancel: t("payment.invoice.reason.cancel", locale),
+    manual: t("payment.invoice.reason.manual", locale),
+    upcoming: t("payment.invoice.reason.upcoming", locale),
+    slash_stake: t("payment.invoice.reason.slashStake", locale),
+    stake: t("payment.invoice.reason.stake", locale),
+    return_stake: t("payment.invoice.reason.returnStake", locale),
+    recharge: t("payment.invoice.reason.recharge", locale)
+  };
+  let invoiceType = t("payment.invoice.reason.payment", locale);
+  if (reason.includes("stake") || reason.includes("recharge")) {
+    invoiceType = reasonMap[reason];
+  }
+  if (description?.startsWith("Subscription ") || description?.startsWith("Slash stake")) {
+    return {
+      description: reasonMap[reason],
+      reason: reasonMap[reason],
+      type: invoiceType
+    };
+  }
+  const descMap = {
+    "Stake for subscription plan change": t("payment.invoice.reason.stakeForChangePlan", locale),
+    "Stake for subscription payment change": t("payment.invoice.reason.stakeForChangePayment", locale),
+    "Stake for subscription": t("payment.invoice.reason.staking", locale),
+    "Return Subscription staking": t("payment.invoice.reason.returnStake", locale),
+    "Recharge for subscription": t("payment.invoice.reason.rechargeForSubscription", locale)
+  };
+  return {
+    description: descMap[description] || description,
+    reason: reasonMap[reason] || reason,
+    type: invoiceType
+  };
+}

package/es/locales/en.js

@@ -88,7 +88,9 @@ export default flat({
     quantityLimitPerCheckout: "Exceed purchase limit",
     quantityNotEnough: "Exceed inventory",
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
-    saveAsDefaultPriceSuccess: "Set default price successfully"
+    saveAsDefaultPriceSuccess: "Set default price successfully",
+    stakeAmount: "Stake Amount",
+    slashStakeAmount: "Slash Stake Amount"
   },
   payment: {
     checkout: {
@@ -305,7 +307,14 @@ export default flat({
         cancel: "Subscription cancel",
         manual: "Manual invoice",
         upcoming: "Upcoming invoice",
-        slashStake: "Slash stake"
+        slashStake: "Slash stake",
+        stake: "Stake",
+        payment: "Payment",
+        returnStake: "Return stake",
+        stakeForChangePlan: "Subscription plan update",
+        stakeForChangePayment: "Subscription payment method update",
+        recharge: "Recharge",
+        rechargeForSubscription: "Subscription recharge"
       }
     }
   },

package/es/locales/zh.js

@@ -88,7 +88,9 @@ export default flat({
     quantityLimitPerCheckout: "\u8D85\u51FA\u8D2D\u4E70\u9650\u5236",
     quantityNotEnough: "\u5E93\u5B58\u4E0D\u8DB3",
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
-    saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F"
+    saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
+    stakeAmount: "\u8D28\u62BC\u91D1\u989D",
+    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D"
   },
   payment: {
     checkout: {
@@ -298,14 +300,21 @@ export default flat({
       reason: {
         creation: "\u8BA2\u9605\u521B\u5EFA",
         cycle: "\u81EA\u52A8\u6263\u8D39",
-        staking: "\u8BA2\u9605\u521B\u5EFA\uFF08\u8D28\u62BC\uFF09",
+        staking: "\u8BA2\u9605\u521B\u5EFA",
         update: "\u8BA2\u9605\u66F4\u65B0",
         recover: "\u8BA2\u9605\u6062\u590D",
         threshold: "\u7528\u91CF\u8D26\u5355",
         cancel: "\u8BA2\u9605\u53D6\u6D88",
         manual: "\u4EBA\u5DE5\u8D26\u5355",
         upcoming: "\u672A\u6765\u8D26\u5355",
-        slashStake: "\u7F5A\u6CA1\u8D28\u62BC"
+        slashStake: "\u7F5A\u6CA1\u8D28\u62BC",
+        stake: "\u62BC\u91D1",
+        payment: "\u4ED8\u6B3E",
+        returnStake: "\u9000\u62BC\u91D1",
+        stakeForChangePlan: "\u8BA2\u9605\u5957\u9910\u66F4\u65B0",
+        stakeForChangePayment: "\u8BA2\u9605\u652F\u4ED8\u65B9\u5F0F\u66F4\u65B0",
+        recharge: "\u5145\u503C",
+        rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
       }
     }
   },

package/es/payment/product-donation.js

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import Switch from "../components/switch-button.js";
 import { formatAmountPrecisionLimit } from "../libs/util.js";
 import { usePaymentContext } from "../contexts/payment.js";
+import { usePreventWheel } from "../hooks/scroll.js";
 export default function ProductDonation({
   item,
   settings,
@@ -14,6 +15,7 @@ export default function ProductDonation({
 }) {
   const { t, locale } = useLocaleContext();
   const { setPayable } = usePaymentContext();
+  usePreventWheel();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = useSetState({
     selected: preset,

package/lib/checkout/donate.d.ts

@@ -16,11 +16,12 @@ export type DonateProps = Pick<CheckoutProps, 'onPaid' | 'onError'> & {
     settings: DonationSettings;
     livemode?: boolean;
     timeout?: number;
-    mode?: 'inline' | 'default';
+    mode?: 'inline' | 'default' | 'custom';
     inlineOptions?: {
         button?: ButtonType;
     };
     theme?: 'default' | 'inherit' | PaymentThemeOptions;
+    children?: (openDialog: () => void, donateTotalAmount: string, supporters: DonateHistory) => React.ReactNode;
 };
 declare function CheckoutDonate(props: DonateProps): import("react").JSX.Element;
 declare namespace CheckoutDonate {