@blocklet/payment-react 1.13.202 → 1.13.205

package/es/components/pricing-table.js

@@ -60,19 +60,18 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 300px !important;
+        width: 320px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 600px !important;
+        width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 900px !important;
+        width: 960px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        // 当子元素为2的时候，子元素给宽度
         width: 45% !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
@@ -133,7 +132,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     direction: "column",
                     alignItems: "center",
                     className: "price-table-item",
-                    justifyContent: "center",
+                    justifyContent: "flex-start",
                     sx: {
                       cursor: "pointer",
                       borderWidth: "1px",
@@ -149,7 +148,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     },
                     children: [
                       /* @__PURE__ */ jsxs(Box, { textAlign: "center", children: [
-                        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+                        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "center", spacing: 1, children: [
                           /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "text.primary", fontWeight: 600, children: x.product.name }),
                           x.is_highlight && /* @__PURE__ */ jsx(Chip, { label: x.highlight_text, color: "default", size: "small" })
                         ] }),

package/es/locales/en.js

@@ -98,6 +98,10 @@ export default flat({
         subscription: "View subscription",
         invoice: "View invoice"
       },
+      staking: {
+        title: "Staking Required",
+        tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
+      },
       cardPay: "{action} with card",
       empty: "No thing to pay",
       per: "per",
@@ -115,7 +119,7 @@ export default flat({
         setup: "Thanks for your subscribing",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "By confirming your subscription, you allow {payee} to charge your account for this and future payments in accordance with their terms. You can always cancel your subscription.",
+      confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -254,6 +258,7 @@ export default flat({
       reason: {
         creation: "Subscription create",
         cycle: "Subscription cycle",
+        staking: "Subscription staking",
         update: "Subscription update",
         recover: "Subscription recover",
         threshold: "Metered usage billing",

package/es/locales/zh.js

@@ -98,6 +98,10 @@ export default flat({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
+      staking: {
+        title: "\u8D28\u62BC\u6570\u91CF",
+        tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
+      },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
@@ -115,7 +119,7 @@ export default flat({
         setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\u3002",
+      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -254,6 +258,7 @@ export default flat({
       reason: {
         creation: "\u8BA2\u9605\u521B\u5EFA",
         cycle: "\u81EA\u52A8\u6263\u8D39",
+        staking: "\u8BA2\u9605\u521B\u5EFA\uFF08\u8D28\u62BC\uFF09",
         update: "\u8BA2\u9605\u66F4\u65B0",
         recover: "\u8BA2\u9605\u6062\u590D",
         threshold: "\u7528\u91CF\u8D26\u5355",

package/es/payment/index.js

@@ -143,6 +143,7 @@ export function PaymentInner({
   });
   const currencyId = useWatch({ control: methods.control, name: "payment_currency", defaultValue: defaultCurrencyId });
   const currency = findCurrency(paymentMethods, currencyId) || settings.baseCurrency;
+  const method = paymentMethods.find((x) => x.id === currency.payment_method_id);
   useEffect(() => {
     if (onChange) {
       onChange(methods.getValues());
@@ -205,6 +206,8 @@ export function PaymentInner({
           {
             items: state.checkoutSession.line_items,
             trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+            billingThreshold: state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
+            showStaking: method.type === "arcblock",
             currency,
             onUpsell,
             onDownsell,

package/es/payment/summary.d.ts

@@ -4,6 +4,8 @@ type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
     trialInDays: number;
+    billingThreshold: number;
+    showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
     onApplyCrossSell?: Function;
@@ -11,7 +13,7 @@ type Props = {
     checkoutSessionId?: string;
     crossSellBehavior?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, showStaking, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
@@ -20,6 +22,7 @@ declare namespace PaymentSummary {
         onCancelCrossSell: any;
         checkoutSessionId: string;
         crossSellBehavior: string;
+        showStaking: boolean;
     };
 }
 export default PaymentSummary;

package/es/payment/summary.js

@@ -1,13 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { InfoOutlined } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
-import { Fade, Grow, Stack, Typography, keyframes } from "@mui/material";
+import { Fade, Grow, Stack, Tooltip, Typography, keyframes } from "@mui/material";
+import { BN, fromTokenToUnit } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
 import useBus from "use-bus";
 import api from "../api.js";
 import Status from "../components/status.js";
-import { formatCheckoutHeadlines } from "../util.js";
+import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../util.js";
 import PaymentAmount from "./amount.js";
 import ProductItem from "./product-item.js";
 const shake = keyframes`
@@ -38,24 +40,51 @@ async function fetchCrossSell(id) {
     return null;
   }
 }
+function getStakingSetup(items, currency, billingThreshold = 0) {
+  const staking = {
+    licensed: new BN(0),
+    metered: new BN(0)
+  };
+  items.forEach((x) => {
+    const price = x.upsell_price || x.price;
+    const unit = getPriceUintAmountByCurrency(price, currency);
+    const amount = new BN(unit).mul(new BN(x.quantity));
+    if (price.type === "recurring" && price.recurring) {
+      if (price.recurring.usage_type === "licensed") {
+        staking.licensed = staking.licensed.add(amount);
+      }
+      if (price.recurring.usage_type === "metered") {
+        if (+billingThreshold) {
+          staking.metered = fromTokenToUnit(billingThreshold, currency.decimal);
+        } else {
+          staking.metered = staking.metered.add(amount);
+        }
+      }
+    }
+  });
+  return staking.licensed.add(staking.metered).toString();
+}
 PaymentSummary.defaultProps = {
   onUpsell: noop,
   onDownsell: noop,
   onApplyCrossSell: noop,
   onCancelCrossSell: noop,
   checkoutSessionId: "",
-  crossSellBehavior: ""
+  crossSellBehavior: "",
+  showStaking: false
 };
 export default function PaymentSummary({
   items,
   currency,
   trialInDays,
+  billingThreshold,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
   checkoutSessionId,
   crossSellBehavior,
+  showStaking,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -64,6 +93,7 @@ export default function PaymentSummary({
     () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
   const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
+  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
   useBus(
     "error.REQUIRE_CROSS_SELL",
     () => {
@@ -145,10 +175,7 @@ export default function PaymentSummary({
           borderRadius: 1,
           padding: 1,
           animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-          mt: {
-            xs: 4,
-            md: 8
-          }
+          mt: 3
         },
         children: [
           /* @__PURE__ */ jsx(
@@ -179,6 +206,32 @@ export default function PaymentSummary({
           ] })
         ]
       }
-    ) })
+    ) }),
+    staking > 0 && /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        spacing: 1,
+        sx: {
+          border: "1px solid #eee",
+          borderRadius: 1,
+          padding: 1,
+          mt: 3
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+            /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.staking.title") }),
+            /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { children: [
+            formatAmount(staking, currency.decimal),
+            " ",
+            currency.symbol
+          ] })
+        ]
+      }
+    )
   ] }) });
 }

package/lib/components/pricing-table.js

@@ -79,19 +79,18 @@ function PricingTable({
     theme
   }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 300px !important;
+        width: 320px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 600px !important;
+        width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 900px !important;
+        width: 960px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        // 当子元素为2的时候，子元素给宽度
         width: 45% !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
@@ -150,7 +149,7 @@ function PricingTable({
             direction: "column",
             alignItems: "center",
             className: "price-table-item",
-            justifyContent: "center",
+            justifyContent: "flex-start",
             sx: {
               cursor: "pointer",
               borderWidth: "1px",
@@ -169,6 +168,7 @@ function PricingTable({
               children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "row",
                 alignItems: "center",
+                justifyContent: "center",
                 spacing: 1,
                 children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                   variant: "h5",

package/lib/locales/en.js

@@ -105,6 +105,10 @@ module.exports = (0, _flat.default)({
         subscription: "View subscription",
         invoice: "View invoice"
       },
+      staking: {
+        title: "Staking Required",
+        tooltip: "Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription."
+      },
       cardPay: "{action} with card",
       empty: "No thing to pay",
       per: "per",
@@ -122,7 +126,7 @@ module.exports = (0, _flat.default)({
         setup: "Thanks for your subscribing",
         tip: "A payment to {payee} has been completed. You can view the details of this payment in your account."
       },
-      confirm: "By confirming your subscription, you allow {payee} to charge your account for this and future payments in accordance with their terms. You can always cancel your subscription.",
+      confirm: "By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.",
       required: "Required",
       invalid: "Invalid",
       billing: {
@@ -261,6 +265,7 @@ module.exports = (0, _flat.default)({
       reason: {
         creation: "Subscription create",
         cycle: "Subscription cycle",
+        staking: "Subscription staking",
         update: "Subscription update",
         recover: "Subscription recover",
         threshold: "Metered usage billing",

package/lib/locales/zh.js

@@ -105,6 +105,10 @@ module.exports = (0, _flat.default)({
         subscription: "\u67E5\u770B\u8BA2\u9605",
         invoice: "\u67E5\u770B\u8D26\u5355"
       },
+      staking: {
+        title: "\u8D28\u62BC\u6570\u91CF",
+        tooltip: "\u8D28\u62BC\u76F8\u5F53\u4E8E\u4FDD\u8BC1\u91D1\uFF0C\u7528\u4E8E\u786E\u4FDD\u672A\u6765\u7684\u8D26\u5355\u80FD\u591F\u6B63\u5E38\u6263\u6B3E\uFF0C\u5982\u679C\u4F60\u4ECE DID Wallet \u64A4\u9500\u8D28\u62BC\uFF0C\u8BA2\u9605\u4E5F\u4F1A\u88AB\u53D6\u6D88\u3002"
+      },
       cardPay: "\u4F7F\u7528\u5361\u7247{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
@@ -122,7 +126,7 @@ module.exports = (0, _flat.default)({
         setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
-      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\u3002",
+      confirm: "\u901A\u8FC7\u786E\u8BA4\u60A8\u7684\u8BA2\u9605\uFF0C\u60A8\u5141\u8BB8{payee}\u6309\u7167\u5176\u6761\u6B3E\u5BF9\u60A8\u7684\u8D26\u6237\u8FDB\u884C\u4ED8\u6B3E\u6216\u8005\u7F5A\u6CA1\u60A8\u7684\u8D28\u62BC\u3002\u60A8\u968F\u65F6\u53EF\u4EE5\u53D6\u6D88\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u8005\u64A4\u9500\u8D28\u62BC\u3002",
       required: "\u5FC5\u586B\u9879",
       invalid: "\u65E0\u6548",
       billing: {
@@ -261,6 +265,7 @@ module.exports = (0, _flat.default)({
       reason: {
         creation: "\u8BA2\u9605\u521B\u5EFA",
         cycle: "\u81EA\u52A8\u6263\u8D39",
+        staking: "\u8BA2\u9605\u521B\u5EFA\uFF08\u8D28\u62BC\uFF09",
         update: "\u8BA2\u9605\u66F4\u65B0",
         recover: "\u8BA2\u9605\u6062\u590D",
         threshold: "\u7528\u91CF\u8D26\u5355",

package/lib/payment/index.js

@@ -176,6 +176,7 @@ function PaymentInner({
     defaultValue: defaultCurrencyId
   });
   const currency = (0, _util.findCurrency)(paymentMethods, currencyId) || settings.baseCurrency;
+  const method = paymentMethods.find(x => x.id === currency.payment_method_id);
   (0, _react.useEffect)(() => {
     if (onChange) {
       onChange(methods.getValues());
@@ -277,6 +278,8 @@ function PaymentInner({
             }) : null, /* @__PURE__ */(0, _jsxRuntime.jsx)(_summary.default, {
               items: state.checkoutSession.line_items,
               trialInDays: state.checkoutSession.subscription_data?.trial_period_days || 0,
+              billingThreshold: state.checkoutSession.subscription_data?.billing_threshold_amount || 0,
+              showStaking: method.type === "arcblock",
               currency,
               onUpsell,
               onDownsell,

package/lib/payment/summary.d.ts

@@ -4,6 +4,8 @@ type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
     trialInDays: number;
+    billingThreshold: number;
+    showStaking?: boolean;
     onUpsell?: Function;
     onDownsell?: Function;
     onApplyCrossSell?: Function;
@@ -11,7 +13,7 @@ type Props = {
     checkoutSessionId?: string;
     crossSellBehavior?: string;
 };
-declare function PaymentSummary({ items, currency, trialInDays, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, ...rest }: Props): import("react").JSX.Element;
+declare function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onApplyCrossSell, onCancelCrossSell, checkoutSessionId, crossSellBehavior, showStaking, ...rest }: Props): import("react").JSX.Element;
 declare namespace PaymentSummary {
     var defaultProps: {
         onUpsell: any;
@@ -20,6 +22,7 @@ declare namespace PaymentSummary {
         onCancelCrossSell: any;
         checkoutSessionId: string;
         crossSellBehavior: string;
+        showStaking: boolean;
     };
 }
 export default PaymentSummary;

package/lib/payment/summary.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = PaymentSummary;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _iconsMaterial = require("@mui/icons-material");
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
+var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useBus = _interopRequireDefault(require("use-bus"));
 var _api = _interopRequireDefault(require("../api"));
 var _status = _interopRequireDefault(require("../components/status"));
-var _util = require("../util");
+var _util2 = require("../util");
 var _amount = _interopRequireDefault(require("./amount"));
 var _productItem = _interopRequireDefault(require("./product-item"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,24 +49,51 @@ async function fetchCrossSell(id) {
     return null;
   }
 }
+function getStakingSetup(items, currency, billingThreshold = 0) {
+  const staking = {
+    licensed: new _util.BN(0),
+    metered: new _util.BN(0)
+  };
+  items.forEach(x => {
+    const price = x.upsell_price || x.price;
+    const unit = (0, _util2.getPriceUintAmountByCurrency)(price, currency);
+    const amount = new _util.BN(unit).mul(new _util.BN(x.quantity));
+    if (price.type === "recurring" && price.recurring) {
+      if (price.recurring.usage_type === "licensed") {
+        staking.licensed = staking.licensed.add(amount);
+      }
+      if (price.recurring.usage_type === "metered") {
+        if (+billingThreshold) {
+          staking.metered = (0, _util.fromTokenToUnit)(billingThreshold, currency.decimal);
+        } else {
+          staking.metered = staking.metered.add(amount);
+        }
+      }
+    }
+  });
+  return staking.licensed.add(staking.metered).toString();
+}
 PaymentSummary.defaultProps = {
   onUpsell: _noop.default,
   onDownsell: _noop.default,
   onApplyCrossSell: _noop.default,
   onCancelCrossSell: _noop.default,
   checkoutSessionId: "",
-  crossSellBehavior: ""
+  crossSellBehavior: "",
+  showStaking: false
 };
 function PaymentSummary({
   items,
   currency,
   trialInDays,
+  billingThreshold,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
   checkoutSessionId,
   crossSellBehavior,
+  showStaking,
   ...rest
 }) {
   const {
@@ -79,7 +108,8 @@ function PaymentSummary({
     data,
     runAsync
   } = (0, _ahooks.useRequest)(() => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null));
-  const headlines = (0, _util.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
+  const headlines = (0, _util2.formatCheckoutHeadlines)(items, currency, trialInDays, locale);
+  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
     setState({
       shake: true
@@ -187,10 +217,7 @@ function PaymentSummary({
             borderRadius: 1,
             padding: 1,
             animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-            mt: {
-              xs: 4,
-              md: 8
-            }
+            mt: 3
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productItem.default, {
             item: {
@@ -231,6 +258,39 @@ function PaymentSummary({
             })]
           })]
         })
+      }), staking > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        direction: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        spacing: 1,
+        sx: {
+          border: "1px solid #eee",
+          borderRadius: 1,
+          padding: 1,
+          mt: 3
+        },
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          alignItems: "center",
+          spacing: 0.5,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: t("payment.checkout.staking.title")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: t("payment.checkout.staking.tooltip"),
+            placement: "top",
+            sx: {
+              maxWidth: "150px"
+            },
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.InfoOutlined, {
+              fontSize: "small",
+              sx: {
+                color: "text.secondary"
+              }
+            })
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          children: [(0, _util2.formatAmount)(staking, currency.decimal), " ", currency.symbol]
+        })]
       })]
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.202",
+  "version": "1.13.205",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.202",
+    "@blocklet/payment-types": "1.13.205",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "e9c7a403fee7506f92118581d659c91f210714a7"
+  "gitHead": "8c16c5d362df5c497c7a95a0ae20e2ef61f747b3"
 }

package/src/components/pricing-table.tsx

@@ -81,19 +81,18 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
     }
     @media (min-width: ${({ theme }) => theme.breakpoints.values.md}px) {
       .price-table-wrap:has(> div:nth-child(1)) {
-        width: 300px !important;
+        width: 320px !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) {
-        width: 600px !important;
+        width: 720px !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) {
-        width: 900px !important;
+        width: 960px !important;
       }
       .price-table-wrap:has(> div:nth-child(1)) > .price-table-item {
         width: 90% !important;
       }
       .price-table-wrap:has(> div:nth-child(2)) > .price-table-item {
-        // 当子元素为2的时候，子元素给宽度
         width: 45% !important;
       }
       .price-table-wrap:has(> div:nth-child(3)) > .price-table-item {
@@ -157,7 +156,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                   direction="column"
                   alignItems="center"
                   className="price-table-item"
-                  justifyContent="center"
+                  justifyContent="flex-start"
                   sx={{
                     cursor: 'pointer',
                     borderWidth: '1px',
@@ -172,7 +171,7 @@ export default function PricingTable({ table, alignItems, interval, mode, onSele
                     },
                   }}>
                   <Box textAlign="center">
-                    <Stack direction="row" alignItems="center" spacing={1}>
+                    <Stack direction="row" alignItems="center" justifyContent="center" spacing={1}>
                       <Typography variant="h5" color="text.primary" fontWeight={600}>
                         {x.product.name}
                       </Typography>

package/src/locales/en.tsx

@@ -99,6 +99,11 @@ export default flat({
         subscription: 'View subscription',
         invoice: 'View invoice',
       },
+      staking: {
+        title: 'Staking Required',
+        tooltip:
+          'Staking is used to ensure that future invoices can be paid normally. Revoking the staking from DID Wallet means canceling the subscription.',
+      },
       cardPay: '{action} with card',
       empty: 'No thing to pay',
       per: 'per',
@@ -117,7 +122,7 @@ export default flat({
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
       confirm:
-        'By confirming your subscription, you allow {payee} to charge your account for this and future payments in accordance with their terms. You can always cancel your subscription.',
+        'By confirming your subscription, you allow {payee} to charge your account or slashing your staking for this and future payments in accordance with their terms. You can always cancel your subscription, or revoking your staking from DID Wallet.',
       required: 'Required',
       invalid: 'Invalid',
       billing: {
@@ -263,6 +268,7 @@ export default flat({
       reason: {
         creation: 'Subscription create',
         cycle: 'Subscription cycle',
+        staking: 'Subscription staking',
         update: 'Subscription update',
         recover: 'Subscription recover',
         threshold: 'Metered usage billing',

package/src/locales/zh.tsx

@@ -99,6 +99,10 @@ export default flat({
         subscription: '查看订阅',
         invoice: '查看账单',
       },
+      staking: {
+        title: '质押数量',
+        tooltip: '质押相当于保证金，用于确保未来的账单能够正常扣款，如果你从 DID Wallet 撤销质押，订阅也会被取消。',
+      },
       cardPay: '使用卡片{action}',
       empty: '没有可支付的项目',
       per: '每',
@@ -116,7 +120,8 @@ export default flat({
         setup: '感谢您的订阅',
         tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
       },
-      confirm: '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行付款。您随时可以取消您的订阅。',
+      confirm:
+        '通过确认您的订阅，您允许{payee}按照其条款对您的账户进行付款或者罚没您的质押。您随时可以取消您的订阅，或者撤销质押。',
       required: '必填项',
       invalid: '无效',
       billing: {
@@ -256,6 +261,7 @@ export default flat({
       reason: {
         creation: '订阅创建',
         cycle: '自动扣费',
+        staking: '订阅创建（质押）',
         update: '订阅更新',
         recover: '订阅恢复',
         threshold: '用量账单',

package/src/payment/index.tsx

@@ -5,6 +5,7 @@ import type {
   TCheckoutSessionExpanded,
   TCustomer,
   TPaymentCurrency,
+  TPaymentMethod,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -180,6 +181,7 @@ export function PaymentInner({
   const currency =
     (findCurrency(paymentMethods as TPaymentMethodExpanded[], currencyId as string) as TPaymentCurrency) ||
     settings.baseCurrency;
+  const method = paymentMethods.find((x: any) => x.id === currency.payment_method_id) as TPaymentMethod;
 
   useEffect(() => {
     if (onChange) {
@@ -249,6 +251,8 @@ export function PaymentInner({
               <PaymentSummary
                 items={state.checkoutSession.line_items}
                 trialInDays={state.checkoutSession.subscription_data?.trial_period_days || 0}
+                billingThreshold={state.checkoutSession.subscription_data?.billing_threshold_amount || 0}
+                showStaking={method.type === 'arcblock'}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}

package/src/payment/summary.tsx

@@ -1,14 +1,16 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import { InfoOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
-import { Fade, Grow, Stack, Typography, keyframes } from '@mui/material';
+import { Fade, Grow, Stack, Tooltip, Typography, keyframes } from '@mui/material';
+import { BN, fromTokenToUnit } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
 import useBus from 'use-bus';
 
 import api from '../api';
 import Status from '../components/status';
-import { formatCheckoutHeadlines } from '../util';
+import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../util';
 import PaymentAmount from './amount';
 import ProductItem from './product-item';
 
@@ -34,6 +36,8 @@ type Props = {
   items: TLineItemExpanded[];
   currency: TPaymentCurrency;
   trialInDays: number;
+  billingThreshold: number;
+  showStaking?: boolean;
   onUpsell?: Function;
   onDownsell?: Function;
   onApplyCrossSell?: Function;
@@ -55,6 +59,33 @@ async function fetchCrossSell(id: string) {
   }
 }
 
+function getStakingSetup(items: TLineItemExpanded[], currency: TPaymentCurrency, billingThreshold = 0) {
+  const staking = {
+    licensed: new BN(0),
+    metered: new BN(0),
+  };
+
+  items.forEach((x) => {
+    const price = x.upsell_price || x.price;
+    const unit = getPriceUintAmountByCurrency(price, currency);
+    const amount = new BN(unit).mul(new BN(x.quantity));
+    if (price.type === 'recurring' && price.recurring) {
+      if (price.recurring.usage_type === 'licensed') {
+        staking.licensed = staking.licensed.add(amount);
+      }
+      if (price.recurring.usage_type === 'metered') {
+        if (+billingThreshold) {
+          staking.metered = fromTokenToUnit(billingThreshold, currency.decimal);
+        } else {
+          staking.metered = staking.metered.add(amount);
+        }
+      }
+    }
+  });
+
+  return staking.licensed.add(staking.metered).toString();
+}
+
 PaymentSummary.defaultProps = {
   onUpsell: noop,
   onDownsell: noop,
@@ -62,18 +93,21 @@ PaymentSummary.defaultProps = {
   onCancelCrossSell: noop,
   checkoutSessionId: '',
   crossSellBehavior: '',
+  showStaking: false,
 };
 
 export default function PaymentSummary({
   items,
   currency,
   trialInDays,
+  billingThreshold,
   onUpsell,
   onDownsell,
   onApplyCrossSell,
   onCancelCrossSell,
   checkoutSessionId,
   crossSellBehavior,
+  showStaking,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -82,6 +116,7 @@ export default function PaymentSummary({
     checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
   const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
+  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : '0';
 
   useBus(
     'error.REQUIRE_CROSS_SELL',
@@ -175,10 +210,7 @@ export default function PaymentSummary({
                 borderRadius: 1,
                 padding: 1,
                 animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
-                mt: {
-                  xs: 4,
-                  md: 8,
-                },
+                mt: 3,
               }}>
               <ProductItem
                 item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
@@ -207,6 +239,29 @@ export default function PaymentSummary({
             </Stack>
           </Grow>
         )}
+        {staking > 0 && (
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
+            spacing={1}
+            sx={{
+              border: '1px solid #eee',
+              borderRadius: 1,
+              padding: 1,
+              mt: 3,
+            }}>
+            <Stack direction="row" alignItems="center" spacing={0.5}>
+              <Typography>{t('payment.checkout.staking.title')}</Typography>
+              <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
+                <InfoOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
+              </Tooltip>
+            </Stack>
+            <Typography>
+              {formatAmount(staking, currency.decimal)} {currency.symbol}
+            </Typography>
+          </Stack>
+        )}
       </Stack>
     </Fade>
   );