@blocklet/payment-react 1.13.287 → 1.13.289

package/es/components/pricing-table.js

@@ -20,15 +20,24 @@ import {
 import { styled } from "@mui/system";
 import { useSetState } from "ahooks";
 import { useEffect, useMemo, useState } from "react";
+import { BN } from "@ocap/util";
 import { usePaymentContext } from "../contexts/payment.js";
-import { formatError, formatPriceAmount, formatRecurring, getPriceCurrencyOptions } from "../libs/util.js";
+import {
+  formatError,
+  formatPriceAmount,
+  formatRecurring,
+  getPriceCurrencyOptions,
+  getPriceUintAmountByCurrency
+} from "../libs/util.js";
 import Amount from "../payment/amount.js";
-const groupItemsByRecurring = (items) => {
+const groupItemsByRecurring = (items, currency) => {
   const grouped = {};
   const recurring = {};
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
-    recurring[key] = x.price.recurring;
+    if (x.price.currency_options.find((c) => c.currency_id === currency.id)) {
+      recurring[key] = x.price.recurring;
+    }
     if (!grouped[key]) {
       grouped[key] = [];
     }
@@ -47,7 +56,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     settings: { paymentMethods = [] }
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
-  const { recurring, grouped } = groupItemsByRecurring(table.items);
+  const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -76,6 +85,15 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     });
     return Object.keys(visited).map((x) => currencyMap[x]).filter((v) => v);
   }, [currencyMap, grouped, state.interval]);
+  const productList = useMemo(() => {
+    return (grouped[state.interval] || []).filter((x) => {
+      const price = getPriceUintAmountByCurrency(x.price, currency);
+      if (new BN(price).isZero() || !price) {
+        return false;
+      }
+      return true;
+    });
+  }, [grouped, state.interval, currency]);
   useEffect(() => {
     if (table) {
       if (!state.interval || !grouped[state.interval]) {
@@ -128,7 +146,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "btn-row", children: [
-          Object.keys(recurring).length > 1 && /* @__PURE__ */ jsx(
+          Object.keys(recurring).length > 0 && /* @__PURE__ */ jsx(
             ToggleButtonGroup,
             {
               size: "small",
@@ -169,7 +187,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               ))
             }
           ),
-          currencyList.length > 1 && /* @__PURE__ */ jsx(
+          currencyList.length > 0 && /* @__PURE__ */ jsx(
             Select,
             {
               value: currency?.id,
@@ -188,147 +206,145 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
             gap: "20px",
             justifyContent: alignItems === "center" ? "center" : "flex-start",
             className: "price-table-wrap",
-            children: grouped[state.interval]?.map(
-              (x) => {
-                let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
-                if (mode === "select") {
-                  action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
-                }
-                return /* @__PURE__ */ jsxs(
-                  Stack,
-                  {
-                    padding: 4,
-                    spacing: 2,
-                    direction: "column",
-                    alignItems: "flex-start",
-                    className: "price-table-item",
-                    justifyContent: "flex-start",
-                    sx: {
-                      cursor: "pointer",
-                      borderWidth: "1px",
-                      borderStyle: "solid",
-                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
-                      borderRadius: 2,
-                      transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-                      boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
-                      "&:hover": {
-                        borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                        boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
-                      },
-                      width: "320px",
-                      maxWidth: "360px",
-                      padding: "20px",
-                      position: "relative"
+            children: productList?.map((x) => {
+              let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
+              if (mode === "select") {
+                action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
+              }
+              return /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  padding: 4,
+                  spacing: 2,
+                  direction: "column",
+                  alignItems: "flex-start",
+                  className: "price-table-item",
+                  justifyContent: "flex-start",
+                  sx: {
+                    cursor: "pointer",
+                    borderWidth: "1px",
+                    borderStyle: "solid",
+                    borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+                    borderRadius: 2,
+                    transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
+                    boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
+                    "&:hover": {
+                      borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
+                      boxShadow: "0 8px 16px rgba(0, 0, 0, 20%)"
                     },
-                    children: [
-                      /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
-                        Stack,
-                        {
-                          direction: "column",
-                          justifyContent: "center",
-                          alignItems: "flex-start",
-                          spacing: 1,
-                          sx: { gap: "12px" },
-                          children: [
-                            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-                              /* @__PURE__ */ jsx(
-                                Typography,
-                                {
-                                  color: "text.primary",
-                                  fontWeight: 600,
-                                  sx: {
-                                    color: "#4B5563",
-                                    fontSize: "18px !important",
-                                    fontWeight: "600"
-                                  },
-                                  children: x.product.name
-                                }
-                              ),
-                              x.is_highlight && /* @__PURE__ */ jsx(
-                                Chip,
-                                {
-                                  label: x.highlight_text,
-                                  color: "default",
-                                  size: "small",
-                                  sx: {
-                                    position: "absolute",
-                                    top: "20px",
-                                    right: "20px"
-                                  }
-                                }
-                              )
-                            ] }),
+                    width: "320px",
+                    maxWidth: "360px",
+                    padding: "20px",
+                    position: "relative"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Box, { textAlign: "center", children: /* @__PURE__ */ jsxs(
+                      Stack,
+                      {
+                        direction: "column",
+                        justifyContent: "center",
+                        alignItems: "flex-start",
+                        spacing: 1,
+                        sx: { gap: "12px" },
+                        children: [
+                          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
                             /* @__PURE__ */ jsx(
-                              Amount,
+                              Typography,
                               {
-                                amount: formatPriceAmount(x.price, currency, x.product.unit_label),
-                                sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
+                                color: "text.primary",
+                                fontWeight: 600,
+                                sx: {
+                                  color: "#4B5563",
+                                  fontSize: "18px !important",
+                                  fontWeight: "600"
+                                },
+                                children: x.product.name
                               }
                             ),
-                            /* @__PURE__ */ jsx(
-                              Typography,
+                            x.is_highlight && /* @__PURE__ */ jsx(
+                              Chip,
                               {
-                                color: "text.secondary",
+                                label: x.highlight_text,
+                                color: "default",
+                                size: "small",
                                 sx: {
-                                  marginTop: "0px !important",
-                                  color: "#4b5563",
-                                  fontWeight: "400",
-                                  fontSize: "16px",
-                                  textAlign: "left"
-                                },
-                                children: x.product.description
+                                  position: "absolute",
+                                  top: "20px",
+                                  right: "20px"
+                                }
                               }
                             )
-                          ]
-                        }
-                      ) }),
-                      x.product.features.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(List, { dense: true, sx: { display: "flex", flexDirection: "column", gap: "16px", padding: "0px" }, children: [
-                        /* @__PURE__ */ jsx(
-                          Box,
-                          {
-                            sx: {
-                              width: "100%",
-                              position: "relative",
-                              borderTop: "1px solid #e5e7eb",
-                              boxSizing: "border-box",
-                              height: "1px"
-                            }
-                          }
-                        ),
-                        x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, sx: { fontSize: "16px !important" }, children: [
-                          /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25, color: "#059669", fontSize: "64px" }, children: /* @__PURE__ */ jsx(
-                            CheckOutlined,
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            Amount,
                             {
-                              color: "success",
-                              fontSize: "small",
-                              sx: {
-                                color: "#059669",
-                                fontSize: "18px"
-                              }
+                              amount: formatPriceAmount(x.price, currency, x.product.unit_label),
+                              sx: { my: 0, marginTop: "0px !important", fontSize: "48px", fontWeight: "bold" }
                             }
-                          ) }),
+                          ),
                           /* @__PURE__ */ jsx(
-                            ListItemText,
+                            Typography,
                             {
+                              color: "text.secondary",
                               sx: {
-                                ".MuiListItemText-primary": {
-                                  fontSize: "16px",
-                                  color: "#030712",
-                                  fontWeight: "500"
-                                }
+                                marginTop: "0px !important",
+                                color: "#4b5563",
+                                fontWeight: "400",
+                                fontSize: "16px",
+                                textAlign: "left"
                               },
-                              primary: f.name
+                              children: x.product.description
                             }
                           )
-                        ] }, f.name))
-                      ] }) }),
-                      /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency?.id })
-                    ]
-                  },
-                  x?.price_id
-                );
-              }
-            )
+                        ]
+                      }
+                    ) }),
+                    x.product.features.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs(List, { dense: true, sx: { display: "flex", flexDirection: "column", gap: "16px", padding: "0px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          sx: {
+                            width: "100%",
+                            position: "relative",
+                            borderTop: "1px solid #e5e7eb",
+                            boxSizing: "border-box",
+                            height: "1px"
+                          }
+                        }
+                      ),
+                      x.product.features.map((f) => /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, disablePadding: true, sx: { fontSize: "16px !important" }, children: [
+                        /* @__PURE__ */ jsx(ListItemIcon, { sx: { minWidth: 25, color: "#059669", fontSize: "64px" }, children: /* @__PURE__ */ jsx(
+                          CheckOutlined,
+                          {
+                            color: "success",
+                            fontSize: "small",
+                            sx: {
+                              color: "#059669",
+                              fontSize: "18px"
+                            }
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          ListItemText,
+                          {
+                            sx: {
+                              ".MuiListItemText-primary": {
+                                fontSize: "16px",
+                                color: "#030712",
+                                fontWeight: "500"
+                              }
+                            },
+                            primary: f.name
+                          }
+                        )
+                      ] }, f.name))
+                    ] }) }),
+                    /* @__PURE__ */ jsx(Subscribe, { x, action, onSelect, currencyId: currency?.id })
+                  ]
+                },
+                x?.price_id
+              );
+            })
           }
         )
       ]

package/es/locales/en.js

@@ -81,7 +81,8 @@ export default flat({
     weeks: "weeks",
     months: "months",
     years: "years",
-    type: "type"
+    type: "type",
+    donation: "Donation"
   },
   payment: {
     checkout: {

package/es/locales/zh.js

@@ -81,7 +81,8 @@ export default flat({
     weeks: "\u5468",
     months: "\u6708",
     years: "\u5E74",
-    type: "\u7C7B\u578B"
+    type: "\u7C7B\u578B",
+    donation: "\u6253\u8D4F"
   },
   payment: {
     checkout: {

package/lib/components/pricing-table.js

@@ -13,16 +13,19 @@ var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = require("react");
+var _util = require("@ocap/util");
 var _payment = require("../contexts/payment");
-var _util = require("../libs/util");
+var _util2 = require("../libs/util");
 var _amount = _interopRequireDefault(require("../payment/amount"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const groupItemsByRecurring = items => {
+const groupItemsByRecurring = (items, currency) => {
   const grouped = {};
   const recurring = {};
   items.forEach(x => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join("-");
-    recurring[key] = x.price.recurring;
+    if (x.price.currency_options.find(c => c.currency_id === currency.id)) {
+      recurring[key] = x.price.recurring;
+    }
     if (!grouped[key]) {
       grouped[key] = [];
     }
@@ -58,7 +61,7 @@ function PricingTable({
   const {
     recurring,
     grouped
-  } = groupItemsByRecurring(table.items);
+  } = (0, _react.useMemo)(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const [state, setState] = (0, _ahooks.useSetState)({
     interval
   });
@@ -85,12 +88,21 @@ function PricingTable({
       return [];
     }
     grouped[state.interval].forEach(x => {
-      (0, _util.getPriceCurrencyOptions)(x.price).forEach(c => {
+      (0, _util2.getPriceCurrencyOptions)(x.price).forEach(c => {
         visited[c?.currency_id] = true;
       });
     });
     return Object.keys(visited).map(x => currencyMap[x]).filter(v => v);
   }, [currencyMap, grouped, state.interval]);
+  const productList = (0, _react.useMemo)(() => {
+    return (grouped[state.interval] || []).filter(x => {
+      const price = (0, _util2.getPriceUintAmountByCurrency)(x.price, currency);
+      if (new _util.BN(price).isZero() || !price) {
+        return false;
+      }
+      return true;
+    });
+  }, [grouped, state.interval, currency]);
   (0, _react.useEffect)(() => {
     if (table) {
       if (!state.interval || !grouped[state.interval]) {
@@ -148,7 +160,7 @@ function PricingTable({
       },
       children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
         className: "btn-row",
-        children: [Object.keys(recurring).length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
+        children: [Object.keys(recurring).length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ToggleButtonGroup, {
           size: "small",
           value: state.interval,
           sx: {
@@ -181,9 +193,9 @@ function PricingTable({
                 border: "1px solid #e5e7eb"
               }
             },
-            children: (0, _util.formatRecurring)(recurring[x], true, "", locale)
+            children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
           }, x))
-        }), currencyList.length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
+        }), currencyList.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
           value: currency?.id,
           onChange: e => setCurrency(currencyList.find(v => v?.id === e.target.value)),
           size: "small",
@@ -205,7 +217,7 @@ function PricingTable({
         gap: "20px",
         justifyContent: alignItems === "center" ? "center" : "flex-start",
         className: "price-table-wrap",
-        children: grouped[state.interval]?.map(x => {
+        children: productList?.map(x => {
           let action = x.subscription_data?.trial_period_days ? t("payment.checkout.try") : t("payment.checkout.subscription");
           if (mode === "select") {
             action = x.is_selected ? t("payment.checkout.selected") : t("payment.checkout.select");
@@ -270,7 +282,7 @@ function PricingTable({
                     }
                   })]
                 }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-                  amount: (0, _util.formatPriceAmount)(x.price, currency, x.product.unit_label),
+                  amount: (0, _util2.formatPriceAmount)(x.price, currency, x.product.unit_label),
                   sx: {
                     my: 0,
                     marginTop: "0px !important",
@@ -372,7 +384,7 @@ function Subscribe({
       await onSelect(priceId, currencyId);
     } catch (err) {
       console.error(err);
-      _Toast.default.error((0, _util.formatError)(err));
+      _Toast.default.error((0, _util2.formatError)(err));
     }
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_lab.LoadingButton, {

package/lib/locales/en.js

@@ -88,7 +88,8 @@ module.exports = (0, _flat.default)({
     weeks: "weeks",
     months: "months",
     years: "years",
-    type: "type"
+    type: "type",
+    donation: "Donation"
   },
   payment: {
     checkout: {

package/lib/locales/zh.js

@@ -88,7 +88,8 @@ module.exports = (0, _flat.default)({
     weeks: "\u5468",
     months: "\u6708",
     years: "\u5E74",
-    type: "\u7C7B\u578B"
+    type: "\u7C7B\u578B",
+    donation: "\u6253\u8D4F"
   },
   payment: {
     checkout: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.287",
+  "version": "1.13.289",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.7",
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.13.287",
+    "@blocklet/payment-types": "1.13.289",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "a0dac51aff70028e5996af607181e285ea2bb770"
+  "gitHead": "23a533f8752c9ad24d199562ccbae166e992a713"
 }

package/src/components/pricing-table.tsx

@@ -22,18 +22,26 @@ import { styled } from '@mui/system';
 import { useSetState } from 'ahooks';
 import { useEffect, useMemo, useState } from 'react';
 
+import { BN } from '@ocap/util';
 import { usePaymentContext } from '../contexts/payment';
-import { formatError, formatPriceAmount, formatRecurring, getPriceCurrencyOptions } from '../libs/util';
+import {
+  formatError,
+  formatPriceAmount,
+  formatRecurring,
+  getPriceCurrencyOptions,
+  getPriceUintAmountByCurrency,
+} from '../libs/util';
 import Amount from '../payment/amount';
 
-const groupItemsByRecurring = (items: TPricingTableItem[]) => {
+const groupItemsByRecurring = (items: TPricingTableItem[], currency: { id: string; symbol: string }) => {
   const grouped: { [key: string]: TPricingTableItem[] } = {};
   const recurring: { [key: string]: PriceRecurring } = {};
 
   items.forEach((x) => {
     const key = [x.price.recurring?.interval, x.price.recurring?.interval_count].join('-');
-    recurring[key] = x.price.recurring as PriceRecurring;
-
+    if (x.price.currency_options.find((c: PriceCurrency) => c.currency_id === currency.id)) {
+      recurring[key] = x.price.recurring as PriceRecurring;
+    }
     if (!grouped[key]) {
       grouped[key] = [];
     }
@@ -65,7 +73,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     settings: { paymentMethods = [] },
   } = usePaymentContext();
   const [currency, setCurrency] = useState(table.currency || {});
-  const { recurring, grouped } = groupItemsByRecurring(table.items);
+  const { recurring, grouped } = useMemo(() => groupItemsByRecurring(table.items, currency), [table.items, currency]);
   const [state, setState] = useSetState({ interval });
   const currencyMap = useMemo(() => {
     if (!paymentMethods || paymentMethods.length === 0) {
@@ -97,6 +105,15 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
       .map((x) => currencyMap[x])
       .filter((v) => v);
   }, [currencyMap, grouped, state.interval]);
+  const productList = useMemo(() => {
+    return (grouped[state.interval as string] || []).filter((x: TPricingTableItem) => {
+      const price = getPriceUintAmountByCurrency(x.price, currency);
+      if (new BN(price).isZero() || !price) {
+        return false;
+      }
+      return true;
+    });
+  }, [grouped, state.interval, currency]);
 
   useEffect(() => {
     if (table) {
@@ -151,7 +168,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           },
         }}>
         <div className="btn-row">
-          {Object.keys(recurring).length > 1 && (
+          {Object.keys(recurring).length > 0 && (
             <ToggleButtonGroup
               size="small"
               value={state.interval}
@@ -190,7 +207,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
               ))}
             </ToggleButtonGroup>
           )}
-          {currencyList.length > 1 && (
+          {currencyList.length > 0 && (
             <Select
               value={currency?.id}
               onChange={(e) => setCurrency(currencyList.find((v) => v?.id === e.target.value))}
@@ -212,135 +229,132 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
           gap="20px"
           justifyContent={alignItems === 'center' ? 'center' : 'flex-start'}
           className="price-table-wrap">
-          {grouped[state.interval as string]?.map(
-            (x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
-              let action: string = x.subscription_data?.trial_period_days
-                ? t('payment.checkout.try')
-                : t('payment.checkout.subscription');
-              if (mode === 'select') {
-                action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
-              }
-
-              return (
-                <Stack
-                  key={x?.price_id}
-                  padding={4}
-                  spacing={2}
-                  direction="column"
-                  alignItems="flex-start"
-                  className="price-table-item"
-                  justifyContent="flex-start"
-                  sx={{
-                    cursor: 'pointer',
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
-                    borderRadius: 2,
-                    transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
-                    boxShadow:
-                      '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
-                    '&:hover': {
-                      borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
-                      boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
-                    },
-                    width: '320px',
-                    maxWidth: '360px',
+          {productList?.map((x: TPricingTableItem & { is_selected?: boolean; is_disabled?: boolean }) => {
+            let action: string = x.subscription_data?.trial_period_days
+              ? t('payment.checkout.try')
+              : t('payment.checkout.subscription');
+            if (mode === 'select') {
+              action = x.is_selected ? t('payment.checkout.selected') : t('payment.checkout.select');
+            }
+            return (
+              <Stack
+                key={x?.price_id}
+                padding={4}
+                spacing={2}
+                direction="column"
+                alignItems="flex-start"
+                className="price-table-item"
+                justifyContent="flex-start"
+                sx={{
+                  cursor: 'pointer',
+                  borderWidth: '1px',
+                  borderStyle: 'solid',
+                  borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#eee',
+                  borderRadius: 2,
+                  transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
+                  boxShadow:
+                    '0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)',
+                  '&:hover': {
+                    borderColor: mode === 'select' && x.is_selected ? 'primary.main' : '#ddd',
+                    boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',
+                  },
+                  width: '320px',
+                  maxWidth: '360px',
 
-                    padding: '20px',
-                    position: 'relative',
-                  }}>
-                  <Box textAlign="center">
-                    <Stack
-                      direction="column"
-                      justifyContent="center"
-                      alignItems="flex-start"
-                      spacing={1}
-                      sx={{ gap: '12px' }}>
-                      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                        <Typography
-                          color="text.primary"
-                          fontWeight={600}
-                          sx={{
-                            color: '#4B5563',
-                            fontSize: '18px !important',
-                            fontWeight: '600',
-                          }}>
-                          {x.product.name}
-                        </Typography>
-                        {x.is_highlight && (
-                          <Chip
-                            label={x.highlight_text}
-                            color="default"
-                            size="small"
-                            sx={{
-                              position: 'absolute',
-                              top: '20px',
-                              right: '20px',
-                            }}
-                          />
-                        )}
-                      </Box>
-                      <Amount
-                        amount={formatPriceAmount(x.price, currency, x.product.unit_label)}
-                        sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
-                      />
+                  padding: '20px',
+                  position: 'relative',
+                }}>
+                <Box textAlign="center">
+                  <Stack
+                    direction="column"
+                    justifyContent="center"
+                    alignItems="flex-start"
+                    spacing={1}
+                    sx={{ gap: '12px' }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                       <Typography
-                        color="text.secondary"
+                        color="text.primary"
+                        fontWeight={600}
                         sx={{
-                          marginTop: '0px !important',
-                          color: '#4b5563',
-                          fontWeight: '400',
-                          fontSize: '16px',
-                          textAlign: 'left',
+                          color: '#4B5563',
+                          fontSize: '18px !important',
+                          fontWeight: '600',
                         }}>
-                        {x.product.description}
+                        {x.product.name}
                       </Typography>
-                    </Stack>
-                  </Box>
-                  {x.product.features.length > 0 && (
-                    <Box sx={{ width: '100%' }}>
-                      <List dense sx={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '0px' }}>
-                        <Box
+                      {x.is_highlight && (
+                        <Chip
+                          label={x.highlight_text}
+                          color="default"
+                          size="small"
                           sx={{
-                            width: '100%',
-                            position: 'relative',
-                            borderTop: '1px solid #e5e7eb',
-                            boxSizing: 'border-box',
-                            height: '1px',
+                            position: 'absolute',
+                            top: '20px',
+                            right: '20px',
                           }}
                         />
-                        {x.product.features.map((f: any) => (
-                          <ListItem key={f.name} disableGutters disablePadding sx={{ fontSize: '16px !important' }}>
-                            <ListItemIcon sx={{ minWidth: 25, color: '#059669', fontSize: '64px' }}>
-                              <CheckOutlined
-                                color="success"
-                                fontSize="small"
-                                sx={{
-                                  color: '#059669',
-                                  fontSize: '18px',
-                                }}
-                              />
-                            </ListItemIcon>
-                            <ListItemText
+                      )}
+                    </Box>
+                    <Amount
+                      amount={formatPriceAmount(x.price, currency, x.product.unit_label)}
+                      sx={{ my: 0, marginTop: '0px !important', fontSize: '48px', fontWeight: 'bold' }}
+                    />
+                    <Typography
+                      color="text.secondary"
+                      sx={{
+                        marginTop: '0px !important',
+                        color: '#4b5563',
+                        fontWeight: '400',
+                        fontSize: '16px',
+                        textAlign: 'left',
+                      }}>
+                      {x.product.description}
+                    </Typography>
+                  </Stack>
+                </Box>
+                {x.product.features.length > 0 && (
+                  <Box sx={{ width: '100%' }}>
+                    <List dense sx={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '0px' }}>
+                      <Box
+                        sx={{
+                          width: '100%',
+                          position: 'relative',
+                          borderTop: '1px solid #e5e7eb',
+                          boxSizing: 'border-box',
+                          height: '1px',
+                        }}
+                      />
+                      {x.product.features.map((f: any) => (
+                        <ListItem key={f.name} disableGutters disablePadding sx={{ fontSize: '16px !important' }}>
+                          <ListItemIcon sx={{ minWidth: 25, color: '#059669', fontSize: '64px' }}>
+                            <CheckOutlined
+                              color="success"
+                              fontSize="small"
                               sx={{
-                                '.MuiListItemText-primary': {
-                                  fontSize: '16px',
-                                  color: '#030712',
-                                  fontWeight: '500',
-                                },
+                                color: '#059669',
+                                fontSize: '18px',
                               }}
-                              primary={f.name}
                             />
-                          </ListItem>
-                        ))}
-                      </List>
-                    </Box>
-                  )}
-                  <Subscribe x={x} action={action} onSelect={onSelect} currencyId={currency?.id} />
-                </Stack>
-              );
-            }
-          )}
+                          </ListItemIcon>
+                          <ListItemText
+                            sx={{
+                              '.MuiListItemText-primary': {
+                                fontSize: '16px',
+                                color: '#030712',
+                                fontWeight: '500',
+                              },
+                            }}
+                            primary={f.name}
+                          />
+                        </ListItem>
+                      ))}
+                    </List>
+                  </Box>
+                )}
+                <Subscribe x={x} action={action} onSelect={onSelect} currencyId={currency?.id} />
+              </Stack>
+            );
+          })}
         </Stack>
       </Stack>
     </Root>

package/src/locales/en.tsx

@@ -84,6 +84,7 @@ export default flat({
     months: 'months',
     years: 'years',
     type: 'type',
+    donation: 'Donation',
   },
   payment: {
     checkout: {

package/src/locales/zh.tsx

@@ -84,6 +84,7 @@ export default flat({
     months: '月',
     years: '年',
     type: '类型',
+    donation: '打赏',
   },
   payment: {
     checkout: {