@blocklet/payment-react 1.23.11 → 1.24.1

package/es/components/over-due-invoice-payment.js

@@ -7,7 +7,7 @@ import Toast from "@arcblock/ux/lib/Toast";
 import { joinURL } from "ufo";
 import { useRequest } from "ahooks";
 import pWaitFor from "p-wait-for";
-import { Dialog } from "@arcblock/ux";
+import Dialog from "@arcblock/ux/lib/Dialog/dialog";
 import { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
 import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";

package/es/components/resume-subscription.js

@@ -5,7 +5,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { joinURL } from "ufo";
 import { useRequest } from "ahooks";
-import { Dialog } from "@arcblock/ux";
+import Dialog from "@arcblock/ux/lib/Dialog/dialog";
 import { usePaymentContext } from "../contexts/payment.js";
 import { formatError, formatToDate, getPrefix, isCrossOrigin } from "../libs/util.js";
 import api from "../libs/api.js";

package/es/components/stripe-payment-action.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
-import { Dialog } from "@arcblock/ux";
+import Dialog from "@arcblock/ux/lib/Dialog/dialog";
 import { Button, Typography } from "@mui/material";
 import { useSetState } from "ahooks";
 import { useEffect, useRef } from "react";

package/es/history/credit/transactions-list.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, Typography, Grid, Stack, Link, Button } from "@mui/material";
+import { Box, Typography, Grid, Stack, Link, Button, Chip } from "@mui/material";
 import { useRequest } from "ahooks";
 import { useNavigate } from "react-router-dom";
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -130,6 +130,7 @@ const TransactionsTable = React.memo((props) => {
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
           const isGrant = item.activity_type === "grant";
+          const isExpiredGrant = isGrant && item.status === "expired";
           const amount = isGrant ? item.amount : item.credit_amount;
           const currency = item.paymentCurrency || item.currency;
           const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
@@ -137,11 +138,11 @@ const TransactionsTable = React.memo((props) => {
           if (!includeGrants) {
             return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(Typography, { children: displayAmount }) });
           }
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsxs(
+          const amountNode = /* @__PURE__ */ jsxs(
             Typography,
             {
               sx: {
-                color: isGrant ? "success.main" : "error.main"
+                color: isGrant ? isExpiredGrant ? "text.disabled" : "success.main" : "error.main"
               },
               children: [
                 isGrant ? "+" : "-",
@@ -149,7 +150,25 @@ const TransactionsTable = React.memo((props) => {
                 displayAmount
               ]
             }
-          ) });
+          );
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", justifyContent: "flex-end", sx: { width: "100%" }, children: [
+            isExpiredGrant && /* @__PURE__ */ jsx(
+              Chip,
+              {
+                label: t("admin.creditGrants.status.expired"),
+                size: "small",
+                variant: "outlined",
+                sx: {
+                  mr: 2,
+                  height: 18,
+                  fontSize: "12px",
+                  color: "text.disabled",
+                  borderColor: "text.disabled"
+                }
+              }
+            ),
+            amountNode
+          ] }) });
         }
       }
     },
@@ -160,8 +179,10 @@ const TransactionsTable = React.memo((props) => {
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
           const isGrant = item.activity_type === "grant";
+          const isExpiredGrant = isGrant && item.status === "expired";
           const grantName = isGrant ? item.name : item.creditGrant.name;
           const grantId = isGrant ? item.id : item.credit_grant_id;
+          const nameNode = /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { cursor: "pointer", color: isExpiredGrant ? "text.disabled" : void 0 }, children: grantName || `Grant ${grantId.slice(-6)}` });
           return /* @__PURE__ */ jsx(
             Stack,
             {
@@ -174,7 +195,7 @@ const TransactionsTable = React.memo((props) => {
               sx: {
                 alignItems: "center"
               },
-              children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { cursor: "pointer" }, children: grantName || `Grant ${grantId.slice(-6)}` })
+              children: nameNode
             }
           );
         }
@@ -187,8 +208,10 @@ const TransactionsTable = React.memo((props) => {
         customBodyRenderLite: (_, index) => {
           const item = data?.list[index];
           const isGrant = item.activity_type === "grant";
+          const isExpiredGrant = isGrant && item.status === "expired";
           const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 400 }, children: description }) });
+          const descriptionNode = /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 400, color: isExpiredGrant ? "text.disabled" : void 0 }, children: description });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleTransactionClick(e, item), children: descriptionNode });
         }
       }
     },

package/es/locales/en.js

@@ -264,6 +264,10 @@ export default flat({
           oneTimeEnoughWithExpiry: "You have a usage overage of {amount}. This purchase adds {totalAmount} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.",
           recurringEnough: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period}. After covering the overage, your new available balance will be {availableAmount}.",
           recurringEnoughWithExpiry: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}."
+        },
+        schedule: {
+          periodic: "Grant {amount} every {interval}.",
+          withRefresh: "Grant {amount} every {interval}; unused credits expire with the next grant."
         }
       },
       expired: {

package/es/locales/zh.js

@@ -301,6 +301,10 @@ export default flat({
           oneTimeEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
           recurringEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
           recurringEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
+        },
+        schedule: {
+          periodic: "\u6BCF{interval}\u53D1\u653E {amount}\u3002",
+          withRefresh: "\u6BCF{interval}\u53D1\u653E {amount}\uFF0C\u672A\u4F7F\u7528\u989D\u5EA6\u5C06\u5728\u4E0B\u6B21\u53D1\u653E\u65F6\u8FC7\u671F\u3002"
         }
       },
       emptyItems: {

package/es/payment/product-item.js

@@ -17,6 +17,7 @@ import {
   formatUpsellSaving,
   formatAmount,
   formatCreditForCheckout,
+  formatCreditAmount,
   formatBNStr
 } from "../libs/util.js";
 import ProductCard from "./product-card.js";
@@ -69,11 +70,13 @@ export default function ProductItem({
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
-  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
-  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
-  const creditCurrency = isCreditProduct ? findCurrency(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config;
+  const creditAmount = isCreditProduct && item.price.metadata?.credit_config?.credit_amount ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct && item.price.metadata?.credit_config?.currency_id ? findCurrency(settings.paymentMethods, item.price.metadata.credit_config.currency_id) : null;
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
+  const scheduleConfig = item.price.metadata?.credit_config?.schedule;
+  const hasSchedule = scheduleConfig?.enabled && scheduleConfig?.delivery_mode && scheduleConfig.delivery_mode !== "invoice";
   const userDid = session?.user?.did;
   const { data: pendingAmount } = useRequest(
     async () => {
@@ -254,6 +257,44 @@ export default function ProductItem({
     const type = isRecurring ? "recurringEnough" : "oneTimeEnough";
     return t(getLocaleKey("pending", type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
+  const formatScheduleInfo = () => {
+    if (!hasSchedule || !scheduleConfig) return null;
+    const totalCredit = creditAmount * (localQuantity || 0);
+    const currencySymbol = creditCurrency?.symbol || "Credits";
+    const intervalUnit = scheduleConfig.interval_unit;
+    const intervalValue = scheduleConfig.interval_value;
+    let amountPerGrant;
+    if (scheduleConfig.amount_per_grant) {
+      amountPerGrant = Number(scheduleConfig.amount_per_grant) * (localQuantity || 1);
+    } else {
+      const billingIntervalUnit = item.price.recurring?.interval || "month";
+      const billingIntervalCount = item.price.recurring?.interval_count || 1;
+      const unitToHours = {
+        hour: 1,
+        day: 24,
+        week: 168,
+        month: 720
+        // ~30 days
+      };
+      const billingHours = unitToHours[billingIntervalUnit] * billingIntervalCount;
+      const scheduleHours = unitToHours[intervalUnit] * intervalValue;
+      const grantsPerPeriod = Math.floor(billingHours / scheduleHours);
+      amountPerGrant = grantsPerPeriod > 0 ? totalCredit / grantsPerPeriod : totalCredit;
+    }
+    const formattedAmount = formatCreditAmount(formatNumber(amountPerGrant), currencySymbol);
+    const intervalDisplay = intervalValue === 1 ? t(`common.${intervalUnit}`) : ` ${intervalValue} ${t(`common.${intervalUnit}s`)} `;
+    const expireWithNext = scheduleConfig.expire_with_next_grant;
+    if (expireWithNext) {
+      return t("payment.checkout.credit.schedule.withRefresh", {
+        amount: formattedAmount,
+        interval: intervalDisplay
+      });
+    }
+    return t("payment.checkout.credit.schedule.periodic", {
+      amount: formattedAmount,
+      interval: intervalDisplay
+    });
+  };
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -495,7 +536,7 @@ export default function ProductItem({
                   ]
                 }
               ) }),
-              isCreditProduct && /* @__PURE__ */ jsx(Alert, { severity: "info", sx: { mt: 1, fontSize: "0.875rem" }, icon: false, children: formatCreditInfo() }),
+              isCreditProduct && /* @__PURE__ */ jsx(Alert, { severity: "info", sx: { mt: 1, fontSize: "0.875rem" }, icon: false, children: hasSchedule ? /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "inherit" }, children: formatScheduleInfo() }) : /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "inherit" }, children: formatCreditInfo() }) }),
               children
             ]
           }

package/es/payment/success.js

@@ -5,7 +5,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Grow, Link, Paper, Stack, styled, Typography } from "@mui/material";
 import { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
-import { Button } from "@arcblock/ux";
+import Button from "@arcblock/ux/lib/Button";
 import { usePaymentContext } from "../contexts/payment.js";
 import { VendorPlaceholder, VendorProgressItem } from "./progress-item.js";
 export default function PaymentSuccess({

package/lib/components/over-due-invoice-payment.js

@@ -13,7 +13,7 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _ufo = require("ufo");
 var _ahooks = require("ahooks");
 var _pWaitFor = _interopRequireDefault(require("p-wait-for"));
-var _ux = require("@arcblock/ux");
+var _dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog/dialog"));
 var _iconsMaterial = require("@mui/icons-material");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _payment = require("../contexts/payment");
@@ -457,7 +457,7 @@ function OverdueInvoicePayment({
       })
     });
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_dialog.default, {
     PaperProps: {
       style: {
         minHeight: "auto"

package/lib/components/resume-subscription.js

@@ -11,7 +11,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _ufo = require("ufo");
 var _ahooks = require("ahooks");
-var _ux = require("@arcblock/ux");
+var _dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog/dialog"));
 var _payment = require("../contexts/payment");
 var _util = require("../libs/util");
 var _api = _interopRequireDefault(require("../libs/api"));
@@ -152,7 +152,7 @@ function RecoverSubscription({
   if (loading) {
     return null;
   }
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_dialog.default, {
     PaperProps: {
       style: {
         minHeight: "auto"

package/lib/components/stripe-payment-action.js

@@ -7,7 +7,7 @@ module.exports = StripePaymentAction;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
-var _ux = require("@arcblock/ux");
+var _dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog/dialog"));
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _react = require("react");
@@ -148,7 +148,7 @@ function StripePaymentAction(props) {
     onClose?.();
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [children?.(handlePay, state.paying), state.confirmDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+    children: [children?.(handlePay, state.paying), state.confirmDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_dialog.default, {
       open: state.confirmDialog,
       title: t("payment.customer.invoice.paymentConfirmTitle"),
       onClose: handleConfirmCancel,

package/lib/history/credit/transactions-list.js

@@ -154,6 +154,7 @@ const TransactionsTable = _react.default.memo(props => {
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
         const isGrant = item.activity_type === "grant";
+        const isExpiredGrant = isGrant && item.status === "expired";
         const amount = isGrant ? item.amount : item.credit_amount;
         const currency = item.paymentCurrency || item.currency;
         const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
@@ -166,13 +167,34 @@ const TransactionsTable = _react.default.memo(props => {
             })
           });
         }
+        const amountNode = /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            color: isGrant ? isExpiredGrant ? "text.disabled" : "success.main" : "error.main"
+          },
+          children: [isGrant ? "+" : "-", " ", displayAmount]
+        });
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleTransactionClick(e, item),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            spacing: 1,
+            alignItems: "center",
+            justifyContent: "flex-end",
             sx: {
-              color: isGrant ? "success.main" : "error.main"
+              width: "100%"
             },
-            children: [isGrant ? "+" : "-", " ", displayAmount]
+            children: [isExpiredGrant && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+              label: t("admin.creditGrants.status.expired"),
+              size: "small",
+              variant: "outlined",
+              sx: {
+                mr: 2,
+                height: 18,
+                fontSize: "12px",
+                color: "text.disabled",
+                borderColor: "text.disabled"
+              }
+            }), amountNode]
           })
         });
       }
@@ -184,8 +206,17 @@ const TransactionsTable = _react.default.memo(props => {
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
         const isGrant = item.activity_type === "grant";
+        const isExpiredGrant = isGrant && item.status === "expired";
         const grantName = isGrant ? item.name : item.creditGrant.name;
         const grantId = isGrant ? item.id : item.credit_grant_id;
+        const nameNode = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            cursor: "pointer",
+            color: isExpiredGrant ? "text.disabled" : void 0
+          },
+          children: grantName || `Grant ${grantId.slice(-6)}`
+        });
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
           spacing: 1,
@@ -196,13 +227,7 @@ const TransactionsTable = _react.default.memo(props => {
           sx: {
             alignItems: "center"
           },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "body2",
-            sx: {
-              cursor: "pointer"
-            },
-            children: grantName || `Grant ${grantId.slice(-6)}`
-          })
+          children: nameNode
         });
       }
     }
@@ -213,16 +238,19 @@ const TransactionsTable = _react.default.memo(props => {
       customBodyRenderLite: (_, index) => {
         const item = data?.list[index];
         const isGrant = item.activity_type === "grant";
+        const isExpiredGrant = isGrant && item.status === "expired";
         const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
+        const descriptionNode = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          sx: {
+            fontWeight: 400,
+            color: isExpiredGrant ? "text.disabled" : void 0
+          },
+          children: description
+        });
         return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           onClick: e => handleTransactionClick(e, item),
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            variant: "body2",
-            sx: {
-              fontWeight: 400
-            },
-            children: description
-          })
+          children: descriptionNode
         });
       }
     }

package/lib/locales/en.js

@@ -271,6 +271,10 @@ module.exports = (0, _flat.default)({
           oneTimeEnoughWithExpiry: "You have a usage overage of {amount}. This purchase adds {totalAmount} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.",
           recurringEnough: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period}. After covering the overage, your new available balance will be {availableAmount}.",
           recurringEnoughWithExpiry: "You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}."
+        },
+        schedule: {
+          periodic: "Grant {amount} every {interval}.",
+          withRefresh: "Grant {amount} every {interval}; unused credits expire with the next grant."
         }
       },
       expired: {

package/lib/locales/zh.js

@@ -308,6 +308,10 @@ module.exports = (0, _flat.default)({
           oneTimeEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u6B21\u8D2D\u4E70\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
           recurringEnough: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002",
           recurringEnoughWithExpiry: "\u60A8\u6709 {amount} \u7684\u4F7F\u7528\u8D85\u989D\u3002\u672C\u8BA2\u9605{period}\u5C06\u589E\u52A0 {totalAmount}\uFF08\u6709\u6548\u671F {duration} {unit}\uFF09\u3002\u6263\u9664\u8D85\u989D\u540E\uFF0C\u60A8\u7684\u65B0\u53EF\u7528\u4F59\u989D\u5C06\u4E3A {availableAmount}\u3002"
+        },
+        schedule: {
+          periodic: "\u6BCF{interval}\u53D1\u653E {amount}\u3002",
+          withRefresh: "\u6BCF{interval}\u53D1\u653E {amount}\uFF0C\u672A\u4F7F\u7528\u989D\u5EA6\u5C06\u5728\u4E0B\u6B21\u53D1\u653E\u65F6\u8FC7\u671F\u3002"
         }
       },
       emptyItems: {

package/lib/payment/product-item.js

@@ -76,11 +76,13 @@ function ProductItem({
   const saving = (0, _util2.formatUpsellSaving)(items, currency);
   const metered = item.price?.recurring?.usage_type === "metered" ? t("common.metered") : "";
   const canUpsell = mode === "normal" && items.length === 1;
-  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config?.credit_amount;
-  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
-  const creditCurrency = isCreditProduct ? (0, _util2.findCurrency)(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? "") : null;
+  const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config;
+  const creditAmount = isCreditProduct && item.price.metadata?.credit_config?.credit_amount ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct && item.price.metadata?.credit_config?.currency_id ? (0, _util2.findCurrency)(settings.paymentMethods, item.price.metadata.credit_config.currency_id) : null;
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || "days";
+  const scheduleConfig = item.price.metadata?.credit_config?.schedule;
+  const hasSchedule = scheduleConfig?.enabled && scheduleConfig?.delivery_mode && scheduleConfig.delivery_mode !== "invoice";
   const userDid = session?.user?.did;
   const {
     data: pendingAmount
@@ -250,6 +252,44 @@ function ProductItem({
     const type = isRecurring ? "recurringEnough" : "oneTimeEnough";
     return t(getLocaleKey("pending", type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
+  const formatScheduleInfo = () => {
+    if (!hasSchedule || !scheduleConfig) return null;
+    const totalCredit = creditAmount * (localQuantity || 0);
+    const currencySymbol = creditCurrency?.symbol || "Credits";
+    const intervalUnit = scheduleConfig.interval_unit;
+    const intervalValue = scheduleConfig.interval_value;
+    let amountPerGrant;
+    if (scheduleConfig.amount_per_grant) {
+      amountPerGrant = Number(scheduleConfig.amount_per_grant) * (localQuantity || 1);
+    } else {
+      const billingIntervalUnit = item.price.recurring?.interval || "month";
+      const billingIntervalCount = item.price.recurring?.interval_count || 1;
+      const unitToHours = {
+        hour: 1,
+        day: 24,
+        week: 168,
+        month: 720
+        // ~30 days
+      };
+      const billingHours = unitToHours[billingIntervalUnit] * billingIntervalCount;
+      const scheduleHours = unitToHours[intervalUnit] * intervalValue;
+      const grantsPerPeriod = Math.floor(billingHours / scheduleHours);
+      amountPerGrant = grantsPerPeriod > 0 ? totalCredit / grantsPerPeriod : totalCredit;
+    }
+    const formattedAmount = (0, _util2.formatCreditAmount)((0, _util2.formatNumber)(amountPerGrant), currencySymbol);
+    const intervalDisplay = intervalValue === 1 ? t(`common.${intervalUnit}`) : ` ${intervalValue} ${t(`common.${intervalUnit}s`)} `;
+    const expireWithNext = scheduleConfig.expire_with_next_grant;
+    if (expireWithNext) {
+      return t("payment.checkout.credit.schedule.withRefresh", {
+        amount: formattedAmount,
+        interval: intervalDisplay
+      });
+    }
+    return t("payment.checkout.credit.schedule.periodic", {
+      amount: formattedAmount,
+      interval: intervalDisplay
+    });
+  };
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
@@ -484,7 +524,19 @@ function ProductItem({
           fontSize: "0.875rem"
         },
         icon: false,
-        children: formatCreditInfo()
+        children: hasSchedule ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: "inherit"
+          },
+          children: formatScheduleInfo()
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          sx: {
+            fontSize: "inherit"
+          },
+          children: formatCreditInfo()
+        })
       }), children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",

package/lib/payment/success.js

@@ -11,7 +11,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _react = require("react");
 var _ufo = require("ufo");
-var _ux = require("@arcblock/ux");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
 var _payment = require("../contexts/payment");
 var _progressItem = require("./progress-item");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -160,7 +160,7 @@ function PaymentSuccess({
               borderColor: "grey.300",
               mx: 2
             }
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
             variant: "text",
             color: "primary",
             size: "small",
@@ -175,7 +175,7 @@ function PaymentSuccess({
         }, subscription.id))
       });
     } else if (subscriptionId) {
-      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Button, {
+      next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_Button.default, {
         variant: "outlined",
         color: "primary",
         sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.23.11",
+  "version": "1.24.1",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,18 +54,18 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^3.3.10",
-    "@arcblock/did-connect-react": "^3.3.10",
-    "@arcblock/react-hooks": "^3.3.10",
-    "@arcblock/ux": "^3.3.10",
-    "@arcblock/ws": "^1.28.0",
-    "@blocklet/theme": "^3.3.10",
-    "@blocklet/ui-react": "^3.3.10",
+    "@arcblock/bridge": "^3.4.7",
+    "@arcblock/did-connect-react": "^3.4.7",
+    "@arcblock/react-hooks": "^3.4.7",
+    "@arcblock/ux": "^3.4.7",
+    "@arcblock/ws": "^1.28.5",
+    "@blocklet/theme": "^3.4.7",
+    "@blocklet/ui-react": "^3.4.7",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/util": "^1.28.0",
+    "@ocap/util": "^1.28.5",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.23.11",
+    "@blocklet/payment-types": "1.24.1",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "72af80fc6e91e88058665212985002966f55787c"
+  "gitHead": "37207c8206743f75ad682d9e020fa04ab7b93e7b"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -15,7 +15,7 @@ import type {
 } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 import pWaitFor from 'p-wait-for';
-import { Dialog } from '@arcblock/ux';
+import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import { CheckCircle as CheckCircleIcon } from '@mui/icons-material';
 import debounce from 'lodash/debounce';
 import { usePaymentContext } from '../contexts/payment';

package/src/components/resume-subscription.tsx

@@ -5,7 +5,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { joinURL } from 'ufo';
 import type { Subscription, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
-import { Dialog } from '@arcblock/ux';
+import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import { usePaymentContext } from '../contexts/payment';
 import { formatError, formatToDate, getPrefix, isCrossOrigin } from '../libs/util';
 import api from '../libs/api';

package/src/components/stripe-payment-action.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/require-default-props */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { Dialog } from '@arcblock/ux';
+import Dialog from '@arcblock/ux/lib/Dialog/dialog';
 import type { Customer, TPaymentMethod, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Button, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';

package/src/history/credit/transactions-list.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TCreditTransactionExpanded } from '@blocklet/payment-types';
-import { Box, Typography, Grid, Stack, Link, Button } from '@mui/material';
+import { Box, Typography, Grid, Stack, Link, Button, Chip } from '@mui/material';
 import { useRequest } from 'ahooks';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useNavigate } from 'react-router-dom';
@@ -181,6 +181,7 @@ const TransactionsTable = React.memo((props: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
           const isGrant = item.activity_type === 'grant';
+          const isExpiredGrant = isGrant && item.status === 'expired';
           const amount = isGrant ? item.amount : item.credit_amount;
           const currency = item.paymentCurrency || item.currency;
           const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
@@ -194,14 +195,34 @@ const TransactionsTable = React.memo((props: Props) => {
             );
           }
 
+          const amountNode = (
+            <Typography
+              sx={{
+                color: isGrant ? (isExpiredGrant ? 'text.disabled' : 'success.main') : 'error.main',
+              }}>
+              {isGrant ? '+' : '-'} {displayAmount}
+            </Typography>
+          );
+
           return (
             <Box onClick={(e) => handleTransactionClick(e, item)}>
-              <Typography
-                sx={{
-                  color: isGrant ? 'success.main' : 'error.main',
-                }}>
-                {isGrant ? '+' : '-'} {displayAmount}
-              </Typography>
+              <Stack direction="row" spacing={1} alignItems="center" justifyContent="flex-end" sx={{ width: '100%' }}>
+                {isExpiredGrant && (
+                  <Chip
+                    label={t('admin.creditGrants.status.expired')}
+                    size="small"
+                    variant="outlined"
+                    sx={{
+                      mr: 2,
+                      height: 18,
+                      fontSize: '12px',
+                      color: 'text.disabled',
+                      borderColor: 'text.disabled',
+                    }}
+                  />
+                )}
+                {amountNode}
+              </Stack>
             </Box>
           );
         },
@@ -214,9 +235,15 @@ const TransactionsTable = React.memo((props: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
           const isGrant = item.activity_type === 'grant';
+          const isExpiredGrant = isGrant && item.status === 'expired';
 
           const grantName = isGrant ? item.name : item.creditGrant.name;
           const grantId = isGrant ? item.id : item.credit_grant_id;
+          const nameNode = (
+            <Typography variant="body2" sx={{ cursor: 'pointer', color: isExpiredGrant ? 'text.disabled' : undefined }}>
+              {grantName || `Grant ${grantId.slice(-6)}`}
+            </Typography>
+          );
           return (
             <Stack
               direction="row"
@@ -228,9 +255,7 @@ const TransactionsTable = React.memo((props: Props) => {
               sx={{
                 alignItems: 'center',
               }}>
-              <Typography variant="body2" sx={{ cursor: 'pointer' }}>
-                {grantName || `Grant ${grantId.slice(-6)}`}
-              </Typography>
+              {nameNode}
             </Stack>
           );
         },
@@ -243,17 +268,18 @@ const TransactionsTable = React.memo((props: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
           const isGrant = item.activity_type === 'grant';
+          const isExpiredGrant = isGrant && item.status === 'expired';
           const description = isGrant
             ? item.name || item.description || 'Credit Granted'
             : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
 
-          return (
-            <Box onClick={(e) => handleTransactionClick(e, item)}>
-              <Typography variant="body2" sx={{ fontWeight: 400 }}>
-                {description}
-              </Typography>
-            </Box>
+          const descriptionNode = (
+            <Typography variant="body2" sx={{ fontWeight: 400, color: isExpiredGrant ? 'text.disabled' : undefined }}>
+              {description}
+            </Typography>
           );
+
+          return <Box onClick={(e) => handleTransactionClick(e, item)}>{descriptionNode}</Box>;
         },
       },
     },

package/src/locales/en.tsx

@@ -276,6 +276,10 @@ export default flat({
           recurringEnoughWithExpiry:
             'You have a usage overage of {amount}. This subscription adds {totalAmount} {period} (valid for {duration} {unit}). After covering the overage, your new available balance will be {availableAmount}.',
         },
+        schedule: {
+          periodic: 'Grant {amount} every {interval}.',
+          withRefresh: 'Grant {amount} every {interval}; unused credits expire with the next grant.',
+        },
       },
       expired: {
         title: 'Expired Link',

package/src/locales/zh.tsx

@@ -309,6 +309,10 @@ export default flat({
           recurringEnoughWithExpiry:
             '您有 {amount} 的使用超额。本订阅{period}将增加 {totalAmount}（有效期 {duration} {unit}）。扣除超额后，您的新可用余额将为 {availableAmount}。',
         },
+        schedule: {
+          periodic: '每{interval}发放 {amount}。',
+          withRefresh: '每{interval}发放 {amount}，未使用额度将在下次发放时过期。',
+        },
       },
       emptyItems: {
         title: '没有任何购买项目',

package/src/payment/product-item.tsx

@@ -18,6 +18,7 @@ import {
   formatUpsellSaving,
   formatAmount,
   formatCreditForCheckout,
+  formatCreditAmount,
   formatBNStr,
 } from '../libs/util';
 import ProductCard from './product-card';
@@ -96,13 +97,21 @@ export default function ProductItem({
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && items.length === 1;
 
-  const isCreditProduct = item.price.product?.type === 'credit' && item.price.metadata?.credit_config?.credit_amount;
-  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
-  const creditCurrency = isCreditProduct
-    ? findCurrency(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? '')
-    : null;
+  // Check if this is a credit product - be more lenient in detection
+  const isCreditProduct = item.price.product?.type === 'credit' && item.price.metadata?.credit_config;
+  const creditAmount =
+    isCreditProduct && item.price.metadata?.credit_config?.credit_amount
+      ? Number(item.price.metadata.credit_config.credit_amount)
+      : 0;
+  const creditCurrency =
+    isCreditProduct && item.price.metadata?.credit_config?.currency_id
+      ? findCurrency(settings.paymentMethods, item.price.metadata.credit_config.currency_id)
+      : null;
   const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
   const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || 'days';
+  const scheduleConfig = item.price.metadata?.credit_config?.schedule;
+  const hasSchedule =
+    scheduleConfig?.enabled && scheduleConfig?.delivery_mode && scheduleConfig.delivery_mode !== 'invoice';
 
   const userDid = session?.user?.did;
 
@@ -318,6 +327,58 @@ export default function ProductItem({
     return t(getLocaleKey('pending', type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
 
+  // Format credit schedule info for display
+  const formatScheduleInfo = () => {
+    if (!hasSchedule || !scheduleConfig) return null;
+
+    const totalCredit = creditAmount * (localQuantity || 0);
+    const currencySymbol = creditCurrency?.symbol || 'Credits';
+    const intervalUnit = scheduleConfig.interval_unit;
+    const intervalValue = scheduleConfig.interval_value;
+
+    // Calculate amount per grant
+    let amountPerGrant: number;
+    if (scheduleConfig.amount_per_grant) {
+      amountPerGrant = Number(scheduleConfig.amount_per_grant) * (localQuantity || 1);
+    } else {
+      // Divide total by period intervals
+      const billingIntervalUnit = item.price.recurring?.interval || 'month';
+      const billingIntervalCount = item.price.recurring?.interval_count || 1;
+
+      // Calculate how many schedule intervals fit in billing period
+      const unitToHours: Record<string, number> = {
+        hour: 1,
+        day: 24,
+        week: 168,
+        month: 720, // ~30 days
+      };
+      const billingHours = unitToHours[billingIntervalUnit] * billingIntervalCount;
+      const scheduleHours = unitToHours[intervalUnit] * intervalValue;
+      const grantsPerPeriod = Math.floor(billingHours / scheduleHours);
+      amountPerGrant = grantsPerPeriod > 0 ? totalCredit / grantsPerPeriod : totalCredit;
+    }
+    const formattedAmount = formatCreditAmount(formatNumber(amountPerGrant), currencySymbol);
+
+    const intervalDisplay =
+      intervalValue === 1
+        ? t(`common.${intervalUnit}`)
+        : ` ${intervalValue} ${t(`common.${intervalUnit}s` as 'common.hours' | 'common.days' | 'common.weeks' | 'common.months')} `;
+
+    const expireWithNext = scheduleConfig.expire_with_next_grant;
+
+    if (expireWithNext) {
+      return t('payment.checkout.credit.schedule.withRefresh', {
+        amount: formattedAmount,
+        interval: intervalDisplay,
+      });
+    }
+
+    return t('payment.checkout.credit.schedule.periodic', {
+      amount: formattedAmount,
+      interval: intervalDisplay,
+    });
+  };
+
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === 'recurring' && price?.recurring;
@@ -534,7 +595,15 @@ export default function ProductItem({
         {/* Credit 信息展示 */}
         {isCreditProduct && (
           <Alert severity="info" sx={{ mt: 1, fontSize: '0.875rem' }} icon={false}>
-            {formatCreditInfo()}
+            {hasSchedule ? (
+              <Typography component="span" sx={{ fontSize: 'inherit' }}>
+                {formatScheduleInfo()}
+              </Typography>
+            ) : (
+              <Typography component="span" sx={{ fontSize: 'inherit' }}>
+                {formatCreditInfo()}
+              </Typography>
+            )}
           </Alert>
         )}
 

package/src/payment/success.tsx

@@ -5,7 +5,7 @@ import { Box, Grow, Link, Paper, Stack, styled, Typography } from '@mui/material
 import { useEffect, useRef, useState } from 'react';
 import { joinURL } from 'ufo';
 
-import { Button } from '@arcblock/ux';
+import Button from '@arcblock/ux/lib/Button';
 import { usePaymentContext } from '../contexts/payment';
 import { VendorPlaceholder, VendorProgressItem } from './progress-item';