@blocklet/payment-react 1.15.34 → 1.15.36

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.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 = {
@@ -172,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;
       }
     }
   `;
@@ -288,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,
                     {
@@ -311,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(
@@ -333,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",
@@ -346,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",
@@ -356,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(
@@ -450,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/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.js

@@ -862,24 +862,30 @@ export function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     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)
+    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: reason.includes("stake") ? reasonMap[reason] : t("payment.invoice.reason.payment", locale)
+      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)
+    "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: reason.includes("stake") ? reasonMap[reason] : t("payment.invoice.reason.payment", locale)
+    type: invoiceType
   };
 }

package/es/locales/en.js

@@ -312,7 +312,9 @@ export default flat({
         payment: "Payment",
         returnStake: "Return stake",
         stakeForChangePlan: "Subscription plan update",
-        stakeForChangePayment: "Subscription payment method update"
+        stakeForChangePayment: "Subscription payment method update",
+        recharge: "Recharge",
+        rechargeForSubscription: "Subscription recharge"
       }
     }
   },

package/es/locales/zh.js

@@ -312,7 +312,9 @@ export default flat({
         payment: "\u4ED8\u6B3E",
         returnStake: "\u9000\u62BC\u91D1",
         stakeForChangePlan: "\u8BA2\u9605\u5957\u9910\u66F4\u65B0",
-        stakeForChangePayment: "\u8BA2\u9605\u652F\u4ED8\u65B9\u5F0F\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 {