@blocklet/payment-react 1.15.34 → 1.15.36

package/lib/checkout/donate.js

@@ -295,7 +295,8 @@ function CheckoutDonateInner({
   onError,
   mode,
   inlineOptions = {},
-  theme
+  theme,
+  children
 }) {
   const {
     state,
@@ -331,118 +332,136 @@ function CheckoutDonateInner({
   const handlePopoverClose = () => {
     setPopoverOpen(false);
   };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [mode === "inline" ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
-          alignItems: "center",
-          spacing: 0.5,
-          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              whiteSpace: "nowrap"
-            },
-            children: settings.appearance.button.text
-          }) : settings.appearance.button.text]
-        })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
-        id: "mouse-over-popper",
-        open: popoverOpen,
-        anchorEl,
-        onClose: handlePopoverClose,
-        anchorOrigin: {
-          vertical: "top",
-          horizontal: "center"
-        },
-        transformOrigin: {
-          vertical: "bottom",
-          horizontal: "center"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+  const startDonate = () => {
+    setState({
+      open: true
+    });
+  };
+  const inlineRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            minWidth: 320,
-            padding: "20px"
+            whiteSpace: "nowrap"
           },
-          children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-          }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-            display: "flex",
-            alignItems: "center",
-            flexDirection: "column",
-            gap: 2,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-              ...inlineOptions.button,
-              onClick: () => setState({
-                open: true
-              }),
-              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [inlineOptions?.button?.icon, typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  sx: {
-                    whiteSpace: "nowrap"
-                  },
-                  children: inlineOptions?.button?.text
-                }) : inlineOptions?.button?.text]
-              })
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
-              ...supporters.data
-            })]
-          })]
-        })
-      })]
-    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-      sx: {
-        width: "100%",
-        minWidth: 300,
-        maxWidth: 720
+          children: settings.appearance.button.text
+        }) : settings.appearance.button.text]
+      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
+      id: "mouse-over-popper",
+      open: popoverOpen,
+      anchorEl,
+      onClose: handlePopoverClose,
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "center"
       },
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      gap: {
-        xs: 1,
-        sm: 2
+      transformOrigin: {
+        vertical: "bottom",
+        horizontal: "center"
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-          direction: "row",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          minWidth: 320,
+          padding: "20px"
+        },
+        children: [supporters.loading && /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+          display: "flex",
           alignItems: "center",
-          spacing: 0.5,
-          children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: settings.appearance.button.text
-          }) : settings.appearance.button.text]
-        })
-      }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
-        ...supporters.data
-      }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
-        ...supporters.data
-      })]
-    }), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
+          flexDirection: "column",
+          gap: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            ...inlineOptions.button,
+            onClick: () => startDonate(),
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+              direction: "row",
+              alignItems: "center",
+              spacing: 0.5,
+              children: [inlineOptions?.button?.icon, typeof inlineOptions?.button?.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                sx: {
+                  whiteSpace: "nowrap"
+                },
+                children: inlineOptions?.button?.text
+              }) : inlineOptions?.button?.text]
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterSimple, {
+            ...supporters.data
+          })]
+        })]
+      })
+    })]
+  });
+  const defaultRender = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      width: "100%",
+      minWidth: 300,
+      maxWidth: 720
+    },
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: {
+      xs: 1,
+      sm: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        alignItems: "center",
+        spacing: 0.5,
+        children: [settings.appearance.button.icon, typeof settings.appearance.button.text === "string" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: settings.appearance.button.text
+        }) : settings.appearance.button.text]
+      })
+    }), supporters.data && settings.appearance.history.variant === "avatar" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterAvatar, {
+      ...supporters.data
+    }), supporters.data && settings.appearance.history.variant === "table" && /* @__PURE__ */(0, _jsxRuntime.jsx)(SupporterTable, {
+      ...supporters.data
+    })]
+  });
+  const renderInnerView = () => {
+    if (mode === "inline") {
+      return inlineRender;
+    }
+    if (mode === "custom") {
+      return children && typeof children === "function" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: children(startDonate, `${(0, _util.formatAmount)(supporters.data?.totalAmount || "0", supporters.data?.currency?.decimal)} ${supporters.data?.currency?.symbol}`, supporters.data || {})
+      }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: ["Please provide a valid render function ", /* @__PURE__ */(0, _jsxRuntime.jsx)("pre", {
+          children: "(openDonate, donateTotalAmount, supporters) => ReactNode"
+        })]
+      });
+    }
+    return defaultRender;
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [renderInnerView(), donation.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: state.open,
       title: settings.title,
       maxWidth: "md",

package/lib/components/pricing-table.js

@@ -17,7 +17,6 @@ var _util = require("@ocap/util");
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _payment = require("../contexts/payment");
 var _util2 = require("../libs/util");
-var _amount = _interopRequireDefault(require("../payment/amount"));
 var _mobile = require("../hooks/mobile");
 var _truncatedText = _interopRequireDefault(require("./truncated-text"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -189,10 +188,10 @@ function PricingTable({
         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;
       }
     }
   `;
@@ -308,6 +307,7 @@ function PricingTable({
           if (mode === "select") {
             action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
           }
+          const [amount, unit] = (0, _util2.formatPriceAmount)(x.price, currency, x.product.unit_label).split("/");
           return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
             padding: 4,
             spacing: 2,
@@ -329,13 +329,12 @@ function PricingTable({
               },
               width: {
                 xs: "100%",
-                md: "320px"
+                md: "360px"
               },
               maxWidth: "360px",
               minWidth: "300px",
               padding: "20px",
-              position: "relative",
-              height: "fit-content"
+              position: "relative"
             },
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
               textAlign: "center",
@@ -354,7 +353,7 @@ function PricingTable({
                     justifyContent: "space-between"
                   },
                   children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                    color: "text.primary",
+                    color: "text.secondary",
                     fontWeight: 600,
                     sx: {
                       fontSize: "18px !important",
@@ -367,7 +366,7 @@ function PricingTable({
                     })
                   }), x.is_highlight && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
                     label: x.highlight_text,
-                    color: "default",
+                    color: "primary",
                     size: "small",
                     sx: {
                       position: "absolute",
@@ -375,14 +374,28 @@ function PricingTable({
                       right: "20px"
                     }
                   })]
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                  amount: (0, _util2.formatPriceAmount)(x.price, currency, x.product.unit_label),
+                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                  component: "div",
                   sx: {
                     my: 0,
-                    marginTop: "0px !important",
-                    fontSize: "48px",
-                    fontWeight: "bold"
-                  }
+                    fontWeight: "700",
+                    fontSize: "32px",
+                    letterSpacing: "-0.03rem",
+                    fontVariantNumeric: "tabular-nums",
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: "4px",
+                    flexWrap: "wrap"
+                  },
+                  children: [amount, unit ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+                    sx: {
+                      fontSize: "16px",
+                      fontWeight: "400",
+                      color: "text.secondary",
+                      textAlign: "left"
+                    },
+                    children: ["/ ", unit]
+                  }) : ""]
                 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   color: "text.secondary",
                   sx: {
@@ -484,7 +497,7 @@ function Subscribe({
     fullWidth: true,
     size: "medium",
     variant: "contained",
-    color: x.is_highlight || x.is_selected ? "info" : "primary",
+    color: "primary",
     sx: {
       fontSize: "16px",
       padding: "10px 20px",

package/lib/hooks/scroll.d.ts

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

package/lib/hooks/scroll.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePreventWheel = usePreventWheel;
+var _react = require("react");
+function usePreventWheel() {
+  (0, _react.useEffect)(() => {
+    const handleWheel = e => {
+      if (document.activeElement?.type === "number") {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("wheel", handleWheel, {
+      passive: false
+    });
+    return () => {
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
+}

package/lib/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/lib/index.js

@@ -351,5 +351,17 @@ Object.keys(_table3).forEach(function (key) {
     }
   });
 });
+var _scroll = require("./hooks/scroll");
+Object.keys(_scroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _scroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _scroll[key];
+    }
+  });
+});
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/libs/util.js

@@ -1045,24 +1045,30 @@ function getInvoiceDescriptionAndReason(invoice, locale = "en") {
     upcoming: (0, _locales.t)("payment.invoice.reason.upcoming", locale),
     slash_stake: (0, _locales.t)("payment.invoice.reason.slashStake", locale),
     stake: (0, _locales.t)("payment.invoice.reason.stake", locale),
-    return_stake: (0, _locales.t)("payment.invoice.reason.returnStake", locale)
+    return_stake: (0, _locales.t)("payment.invoice.reason.returnStake", locale),
+    recharge: (0, _locales.t)("payment.invoice.reason.recharge", locale)
   };
+  let invoiceType = (0, _locales.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] : (0, _locales.t)("payment.invoice.reason.payment", locale)
+      type: invoiceType
     };
   }
   const descMap = {
     "Stake for subscription plan change": (0, _locales.t)("payment.invoice.reason.stakeForChangePlan", locale),
     "Stake for subscription payment change": (0, _locales.t)("payment.invoice.reason.stakeForChangePayment", locale),
     "Stake for subscription": (0, _locales.t)("payment.invoice.reason.staking", locale),
-    "Return Subscription staking": (0, _locales.t)("payment.invoice.reason.returnStake", locale)
+    "Return Subscription staking": (0, _locales.t)("payment.invoice.reason.returnStake", locale),
+    "Recharge for subscription": (0, _locales.t)("payment.invoice.reason.rechargeForSubscription", locale)
   };
   return {
     description: descMap[description] || description,
     reason: reasonMap[reason] || reason,
-    type: reason.includes("stake") ? reasonMap[reason] : (0, _locales.t)("payment.invoice.reason.payment", locale)
+    type: invoiceType
   };
 }

package/lib/locales/en.js

@@ -319,7 +319,9 @@ module.exports = (0, _flat.default)({
         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/lib/locales/zh.js

@@ -319,7 +319,9 @@ module.exports = (0, _flat.default)({
         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/lib/payment/product-donation.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util = require("../libs/util");
 var _payment = require("../contexts/payment");
+var _scroll = require("../hooks/scroll");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function ProductDonation({
   item,
@@ -26,6 +27,7 @@ function ProductDonation({
   const {
     setPayable
   } = (0, _payment.usePaymentContext)();
+  (0, _scroll.usePreventWheel)();
   const preset = settings.amount.preset || settings.amount.presets?.[0] || "0";
   const [state, setState] = (0, _ahooks.useSetState)({
     selected: preset,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.15.34",
+  "version": "1.15.36",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.15.34",
+    "@blocklet/payment-types": "1.15.36",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "95c0d3ddd12382f694014c05015ca46c19424e3e"
+  "gitHead": "0139cb00a67b6ebd845d932fa6f240cf95b1cc16"
 }