@blocklet/payment-react 1.23.10 → 1.24.0

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 () => {
@@ -95,42 +98,76 @@ export default function ProductItem({
       refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
     }
   );
-  const getInitialQuantity = () => {
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+  const getMinQuantityForPending = useMemo(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new BN(pendingAmount || "0");
+    if (!pendingAmountBN.gt(new BN(0))) return null;
+    const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+  const initialQuantity = useMemo(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
-    return item.quantity;
-  };
-  const [localQuantity, setLocalQuantity] = useState(getInitialQuantity());
-  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
-  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
-  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
-  const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+    let baseQuantity = item.quantity;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+  const [localQuantity, setLocalQuantity] = useState(initialQuantity);
   const localQuantityNum = localQuantity || 0;
   useEffect(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
   const handleQuantityChange = (newQuantity) => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
       setPayable(false);
       return;
     }
-    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
       if (userDid && newQuantity > 0) {
@@ -204,7 +241,7 @@ export default function ProductItem({
     }
     const pendingAmountBN = new BN(pendingAmount || "0");
     const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new BN(actualAvailable).gt(new BN(0))) {
@@ -220,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;
@@ -461,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/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
@@ -103,42 +105,76 @@ function ProductItem({
   }, {
     refreshDeps: [isCreditProduct, userDid, creditCurrency?.id]
   });
-  const getInitialQuantity = () => {
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+  const getMinQuantityForPending = (0, _react.useMemo)(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new _util.BN(pendingAmount || "0");
+    if (!pendingAmountBN.gt(new _util.BN(0))) return null;
+    const creditAmountBN = (0, _util.fromTokenToUnit)(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+  const initialQuantity = (0, _react.useMemo)(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
-    return item.quantity;
-  };
-  const [localQuantity, setLocalQuantity] = (0, _react.useState)(getInitialQuantity());
-  const canAdjustQuantity = adjustableQuantity.enabled && mode === "normal";
-  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
-  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
-  const maxQuantity = quantityAvailable ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable) : adjustableQuantity.maximum || Infinity;
+    let baseQuantity = item.quantity;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+  const [localQuantity, setLocalQuantity] = (0, _react.useState)(initialQuantity);
   const localQuantityNum = localQuantity || 0;
   (0, _react.useEffect)(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
   const handleQuantityChange = newQuantity => {
     if (!newQuantity) {
       setLocalQuantity(void 0);
       setPayable(false);
       return;
     }
-    setPayable(true);
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if ((0, _util2.formatQuantityInventory)(item.price, newQuantity, locale)) {
         return;
       }
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
       if (userDid && newQuantity > 0) {
@@ -204,7 +240,7 @@ function ProductItem({
     }
     const pendingAmountBN = new _util.BN(pendingAmount || "0");
     const creditAmountBN = (0, _util.fromTokenToUnit)(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new _util.BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new _util.BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
     if (!new _util.BN(actualAvailable).gt(new _util.BN(0))) {
@@ -216,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;
@@ -450,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.23.10",
+  "version": "1.24.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -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.10",
+    "@blocklet/payment-types": "1.24.0",
     "@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": "9d058650e81ae43ffafb3e1253b50b6245d510ac"
+  "gitHead": "f3fad0829a1377422d51f9b6445a3502d0e94719"
 }

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;
 
@@ -127,40 +136,69 @@ export default function ProductItem({
     }
   );
 
-  // calculate initial quantity: priority URL recommendation > user preference > item.quantity
-  const getInitialQuantity = (): number | undefined => {
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = quantityAvailable
+    ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable)
+    : adjustableQuantity.maximum || Infinity;
+
+  const getMinQuantityForPending = useMemo(() => {
+    if (!isCreditProduct || !pendingAmount) return null;
+    const pendingAmountBN = new BN(pendingAmount || '0');
+    if (!pendingAmountBN.gt(new BN(0))) return null;
+    const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
+    return Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+  }, [isCreditProduct, pendingAmount, creditAmount, creditCurrency?.decimal]);
+
+  const initialQuantity = useMemo(() => {
     const urlQuantity = getRecommendedQuantityFromUrl(item.price.id);
     if (urlQuantity && urlQuantity > 0) {
+      if (canAdjustQuantity && getMinQuantityForPending) {
+        return Math.max(urlQuantity, getMinQuantityForPending, minQuantity);
+      }
       return urlQuantity;
     }
 
     if (userDid) {
       const preferredQuantity = getUserQuantityPreference(userDid, item.price.id);
       if (preferredQuantity && preferredQuantity > 0) {
+        if (canAdjustQuantity && getMinQuantityForPending) {
+          return Math.max(preferredQuantity, getMinQuantityForPending, minQuantity);
+        }
         return preferredQuantity;
       }
     }
 
-    return item.quantity;
-  };
+    let baseQuantity = item.quantity;
 
-  const [localQuantity, setLocalQuantity] = useState<number | undefined>(getInitialQuantity());
-  const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
-  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
-  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
-  const maxQuantity = quantityAvailable
-    ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable)
-    : adjustableQuantity.maximum || Infinity;
+    if (canAdjustQuantity && getMinQuantityForPending) {
+      baseQuantity = Math.max(baseQuantity, getMinQuantityForPending, minQuantity);
+    }
+
+    return baseQuantity;
+  }, [item.quantity, item.price.id, userDid, getMinQuantityForPending, canAdjustQuantity, minQuantity]);
+
+  const [localQuantity, setLocalQuantity] = useState<number | undefined>(initialQuantity);
   const localQuantityNum = localQuantity || 0;
 
   useEffect(() => {
-    const initialQuantity = getInitialQuantity();
-    if (initialQuantity !== item.quantity && initialQuantity && initialQuantity > 1) {
-      // need update checkout session
-      onQuantityChange(item.price_id, initialQuantity);
+    if (initialQuantity && initialQuantity > 0) {
+      if (initialQuantity !== localQuantity) {
+        setLocalQuantity(initialQuantity);
+      }
+      if (initialQuantity !== item.quantity) {
+        onQuantityChange(item.price_id, initialQuantity);
+      }
+
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        setPayable(initialQuantity >= getMinQuantityForPending);
+      } else {
+        setPayable(true);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [initialQuantity, isCreditProduct, pendingAmount, getMinQuantityForPending]);
 
   const handleQuantityChange = (newQuantity: number) => {
     if (!newQuantity) {
@@ -168,11 +206,22 @@ export default function ProductItem({
       setPayable(false);
       return;
     }
-    setPayable(true);
+
     if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
       if (formatQuantityInventory(item.price, newQuantity, locale)) {
         return;
       }
+
+      if (isCreditProduct && pendingAmount && getMinQuantityForPending) {
+        if (newQuantity < getMinQuantityForPending) {
+          setPayable(false);
+          setLocalQuantity(newQuantity);
+          onQuantityChange(item.price_id, newQuantity);
+          return;
+        }
+      }
+
+      setPayable(true);
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
 
@@ -259,7 +308,7 @@ export default function ProductItem({
 
     const pendingAmountBN = new BN(pendingAmount || '0');
     const creditAmountBN = fromTokenToUnit(creditAmount, creditCurrency?.decimal || 2);
-    const minQuantityNeeded = Math.ceil(pendingAmountBN.mul(new BN(100)).div(creditAmountBN).toNumber() / 100);
+    const minQuantityNeeded = getMinQuantityForPending || 0;
     const currentPurchaseCreditBN = creditAmountBN.mul(new BN(localQuantity || 0));
     const actualAvailable = currentPurchaseCreditBN.sub(pendingAmountBN).toString();
 
@@ -278,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;
@@ -494,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>
         )}