@blocklet/payment-react 1.27.2 → 1.29.0

package/es/checkout-v2/components/left/product-item-card.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import AddIcon from "@mui/icons-material/Add";
 import CheckIcon from "@mui/icons-material/Check";
 import LocalOfferIcon from "@mui/icons-material/LocalOffer";
@@ -129,6 +129,22 @@ export default function ProductItemCard({
   useEffect(() => {
     if (!isEditing) setQtyInput(String(quantity));
   }, [quantity, isEditing]);
+  const debounceRef = useRef(null);
+  const debouncedQuantityChange = useCallback(
+    (priceId, qty) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        onQuantityChange(priceId, qty);
+      }, 400);
+    },
+    [onQuantityChange]
+  );
+  useEffect(
+    () => () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    },
+    []
+  );
   const canUpsell = !!item.price?.upsell?.upsells_to;
   const isUpselled = !!item.upsell_price;
   const upsellTo = item.price?.upsell?.upsells_to;
@@ -409,8 +425,14 @@ export default function ProductItemCard({
               IconButton,
               {
                 size: "small",
-                onClick: () => onQuantityChange(item.price_id, quantity - 1),
-                disabled: quantity <= min,
+                onClick: () => {
+                  const cur = parseInt(qtyInput, 10) || quantity;
+                  const newQty = cur - 1;
+                  if (newQty < min) return;
+                  setQtyInput(String(newQty));
+                  debouncedQuantityChange(item.price_id, newQty);
+                },
+                disabled: (parseInt(qtyInput, 10) || quantity) <= min,
                 sx: {
                   width: 36,
                   height: 36,
@@ -477,8 +499,14 @@ export default function ProductItemCard({
               IconButton,
               {
                 size: "small",
-                onClick: () => onQuantityChange(item.price_id, quantity + 1),
-                disabled: max ? quantity >= max : false,
+                onClick: () => {
+                  const cur = parseInt(qtyInput, 10) || quantity;
+                  const newQty = cur + 1;
+                  if (max && newQty > max) return;
+                  setQtyInput(String(newQty));
+                  debouncedQuantityChange(item.price_id, newQty);
+                },
+                disabled: max ? (parseInt(qtyInput, 10) || quantity) >= max : false,
                 sx: {
                   width: 36,
                   height: 36,

package/es/checkout-v2/panels/left/credit-topup-panel.js

@@ -153,6 +153,13 @@ export default function CreditTopupPanel() {
   }, [minQtyForPending]);
   const maxCredits = maxQuantity * step;
   const minCredits = minQuantity * step;
+  const debounceRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    },
+    []
+  );
   const commitCredits = useCallback(
     (credits) => {
       if (credits <= 0) return;
@@ -161,7 +168,12 @@ export default function CreditTopupPanel() {
       const clampedPacks = Math.max(minQuantity, Math.min(maxQuantity, packs));
       setLocalQty(clampedPacks);
       setDesiredCredits(clamped);
-      if (item) lineItems.updateQuantity(item.price_id, clampedPacks);
+      if (item) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+          lineItems.updateQuantity(item.price_id, clampedPacks);
+        }, 400);
+      }
     },
     [step, minQuantity, maxQuantity, minCredits, maxCredits, item, lineItems]
   );

package/es/checkout-v2/panels/right/payment-panel.js

@@ -122,31 +122,43 @@ export default function PaymentPanel() {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [canSubmit, submit.status, handleAction]);
   const didConnectOpenedRef = useRef(false);
+  const didConnectSucceededRef = useRef(false);
+  const submitStatusRef = useRef(submit.status);
+  useEffect(() => {
+    submitStatusRef.current = submit.status;
+  }, [submit.status]);
   useEffect(() => {
     if (submit.status !== "waiting_did") {
       didConnectOpenedRef.current = false;
+      didConnectSucceededRef.current = false;
       return;
     }
     const ctx = submit.context;
     if (ctx?.type !== "did_connect" || !connect) return;
     if (didConnectOpenedRef.current) return;
     didConnectOpenedRef.current = true;
-    const didPrefix = `${paymentKitPrefix}/api/did`.replace(/([^:])\/\//g, "$1/");
+    const didPrefix = `${paymentKitPrefix || window.location.origin}/api/did`.replace(/([^:])\/\//g, "$1/");
     connect.open({
       locale,
       action: ctx.action,
       prefix: didPrefix,
       saveConnect: false,
       extraParams: ctx.extraParams,
-      onSuccess: () => {
+      onSuccess: async () => {
+        didConnectSucceededRef.current = true;
         connect.close();
+        await submit.didConnectComplete();
       },
       onClose: () => {
         connect.close();
-        submit.reset();
+        if (submitStatusRef.current !== "waiting_did") return;
+        if (!didConnectSucceededRef.current) {
+          submit.reset();
+        }
       },
       onError: (err) => {
         console.error("DID Connect error:", err);
+        if (submitStatusRef.current !== "waiting_did") return;
         submit.reset();
       },
       messages: {

package/es/checkout-v2/views/success-view.js

@@ -365,7 +365,7 @@ function VendorProgressPanel({
         animation: `${fadeUp} 0.5s ease 0.3s both`
       },
       children: [
-        vendorStatus.vendors.map((vendor, idx) => /* @__PURE__ */ jsx(VendorProgressItemV2, { vendor, t }, vendor.title || `vendor-${idx}`)),
+        (vendorStatus.vendors || []).map((vendor, idx) => /* @__PURE__ */ jsx(VendorProgressItemV2, { vendor, t }, vendor.title || `vendor-${idx}`)),
         vendorStatus.hasFailed && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 13, fontWeight: 600, color: "warning.main", mt: 1 }, children: t("payment.checkout.vendor.failedMsg") }),
         vendorStatus.isAllCompleted && pageInfo?.success_message?.[locale] && /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14, fontWeight: 600, color: "text.primary", mt: 1 }, children: pageInfo.success_message[locale] })
       ]

package/es/history/invoice/list.js

@@ -410,11 +410,12 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(
+          const periodTooltip = invoice.subscription_id && invoice.period_start && invoice.period_end ? `${t("common.billingPeriod")}: ${formatToDate(invoice.period_start * 1e3, locale, "YYYY-MM-DD HH:mm")} ~ ${formatToDate(invoice.period_end * 1e3, locale, "YYYY-MM-DD HH:mm")}` : "";
+          return /* @__PURE__ */ jsx(Tooltip, { title: periodTooltip, arrow: true, placement: "top-start", children: /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(
             invoice.created_at,
             locale,
             relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss"
-          ) });
+          ) }) });
         }
       }
     },
@@ -700,13 +701,21 @@ const InvoiceList = React.memo((props) => {
                 }
               ),
               /* @__PURE__ */ jsx(
-                Box,
+                Tooltip,
                 {
-                  sx: {
-                    flex: 1,
-                    textAlign: "right"
-                  },
-                  children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") })
+                  title: invoice.subscription_id && invoice.period_start && invoice.period_end ? `${t("common.billingPeriod")}: ${formatToDate(invoice.period_start * 1e3, locale, "YYYY-MM-DD HH:mm")} ~ ${formatToDate(invoice.period_end * 1e3, locale, "YYYY-MM-DD HH:mm")}` : "",
+                  arrow: true,
+                  placement: "top-start",
+                  children: /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      sx: {
+                        flex: 1,
+                        textAlign: "right"
+                      },
+                      children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") })
+                    }
+                  )
                 }
               ),
               !action && /* @__PURE__ */ jsx(

package/es/libs/util.js

@@ -1225,6 +1225,7 @@ export function truncateText(text, maxLength, useWidth = false) {
   return `${truncated}...`;
 }
 export function getCustomerAvatar(did, updated_at, imageSize = 48) {
+  if (!did) return "";
   const updated = typeof updated_at === "number" ? updated_at : dayjs(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }

package/es/locales/en.js

@@ -7,6 +7,7 @@ export default flat({
     none: "None",
     createdAt: "Created At",
     updatedAt: "Updated At",
+    billingPeriod: "Billing Period",
     resumesAt: "Resume At",
     actions: "Actions",
     options: "Options",

package/es/locales/zh.js

@@ -7,6 +7,7 @@ export default flat({
     none: "\u65E0",
     createdAt: "\u521B\u5EFA\u65F6\u95F4",
     updatedAt: "\u66F4\u65B0\u65F6\u95F4",
+    billingPeriod: "\u8D26\u5355\u5468\u671F",
     resumesAt: "\u6062\u590D\u65F6\u95F4",
     actions: "\u64CD\u4F5C",
     options: "\u9009\u9879",

package/lib/checkout-v2/components/left/product-item-card.js

@@ -126,6 +126,16 @@ function ProductItemCard({
   (0, _react.useEffect)(() => {
     if (!isEditing) setQtyInput(String(quantity));
   }, [quantity, isEditing]);
+  const debounceRef = (0, _react.useRef)(null);
+  const debouncedQuantityChange = (0, _react.useCallback)((priceId, qty) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      onQuantityChange(priceId, qty);
+    }, 400);
+  }, [onQuantityChange]);
+  (0, _react.useEffect)(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
   const canUpsell = !!item.price?.upsell?.upsells_to;
   const isUpselled = !!item.upsell_price;
   const upsellTo = item.price?.upsell?.upsells_to;
@@ -554,8 +564,14 @@ function ProductItemCard({
           children: t("common.quantity")
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
           size: "small",
-          onClick: () => onQuantityChange(item.price_id, quantity - 1),
-          disabled: quantity <= min,
+          onClick: () => {
+            const cur = parseInt(qtyInput, 10) || quantity;
+            const newQty = cur - 1;
+            if (newQty < min) return;
+            setQtyInput(String(newQty));
+            debouncedQuantityChange(item.price_id, newQty);
+          },
+          disabled: (parseInt(qtyInput, 10) || quantity) <= min,
           sx: {
             width: 36,
             height: 36,
@@ -624,8 +640,14 @@ function ProductItemCard({
           }
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.IconButton, {
           size: "small",
-          onClick: () => onQuantityChange(item.price_id, quantity + 1),
-          disabled: max ? quantity >= max : false,
+          onClick: () => {
+            const cur = parseInt(qtyInput, 10) || quantity;
+            const newQty = cur + 1;
+            if (max && newQty > max) return;
+            setQtyInput(String(newQty));
+            debouncedQuantityChange(item.price_id, newQty);
+          },
+          disabled: max ? (parseInt(qtyInput, 10) || quantity) >= max : false,
           sx: {
             width: 36,
             height: 36,

package/lib/checkout-v2/panels/left/credit-topup-panel.js

@@ -181,6 +181,10 @@ function CreditTopupPanel() {
   }, [minQtyForPending]);
   const maxCredits = maxQuantity * step;
   const minCredits = minQuantity * step;
+  const debounceRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
   const commitCredits = (0, _react.useCallback)(credits => {
     if (credits <= 0) return;
     const clamped = Math.max(minCredits, Math.min(maxCredits, credits));
@@ -188,7 +192,12 @@ function CreditTopupPanel() {
     const clampedPacks = Math.max(minQuantity, Math.min(maxQuantity, packs));
     setLocalQty(clampedPacks);
     setDesiredCredits(clamped);
-    if (item) lineItems.updateQuantity(item.price_id, clampedPacks);
+    if (item) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        lineItems.updateQuantity(item.price_id, clampedPacks);
+      }, 400);
+    }
   }, [step, minQuantity, maxQuantity, minCredits, maxCredits, item, lineItems]);
   const handleStep = (0, _react.useCallback)(delta => {
     const newCredits = desiredCredits + delta * step;

package/lib/checkout-v2/panels/right/payment-panel.js

@@ -125,31 +125,43 @@ function PaymentPanel() {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [canSubmit, submit.status, handleAction]);
   const didConnectOpenedRef = (0, _react.useRef)(false);
+  const didConnectSucceededRef = (0, _react.useRef)(false);
+  const submitStatusRef = (0, _react.useRef)(submit.status);
+  (0, _react.useEffect)(() => {
+    submitStatusRef.current = submit.status;
+  }, [submit.status]);
   (0, _react.useEffect)(() => {
     if (submit.status !== "waiting_did") {
       didConnectOpenedRef.current = false;
+      didConnectSucceededRef.current = false;
       return;
     }
     const ctx = submit.context;
     if (ctx?.type !== "did_connect" || !connect) return;
     if (didConnectOpenedRef.current) return;
     didConnectOpenedRef.current = true;
-    const didPrefix = `${paymentKitPrefix}/api/did`.replace(/([^:])\/\//g, "$1/");
+    const didPrefix = `${paymentKitPrefix || window.location.origin}/api/did`.replace(/([^:])\/\//g, "$1/");
     connect.open({
       locale,
       action: ctx.action,
       prefix: didPrefix,
       saveConnect: false,
       extraParams: ctx.extraParams,
-      onSuccess: () => {
+      onSuccess: async () => {
+        didConnectSucceededRef.current = true;
         connect.close();
+        await submit.didConnectComplete();
       },
       onClose: () => {
         connect.close();
-        submit.reset();
+        if (submitStatusRef.current !== "waiting_did") return;
+        if (!didConnectSucceededRef.current) {
+          submit.reset();
+        }
       },
       onError: err => {
         console.error("DID Connect error:", err);
+        if (submitStatusRef.current !== "waiting_did") return;
         submit.reset();
       },
       messages: {

package/lib/checkout-v2/views/success-view.js

@@ -424,7 +424,7 @@ function VendorProgressPanel({
       borderColor: "divider",
       animation: `${fadeUp} 0.5s ease 0.3s both`
     },
-    children: [vendorStatus.vendors.map((vendor, idx) => /* @__PURE__ */(0, _jsxRuntime.jsx)(VendorProgressItemV2, {
+    children: [(vendorStatus.vendors || []).map((vendor, idx) => /* @__PURE__ */(0, _jsxRuntime.jsx)(VendorProgressItemV2, {
       vendor,
       t
     }, vendor.title || `vendor-${idx}`)), vendorStatus.hasFailed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/history/invoice/list.js

@@ -479,10 +479,16 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          onClick: e => handleLinkClick(e, invoice),
-          sx: linkStyle,
-          children: (0, _util2.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
+        const periodTooltip = invoice.subscription_id && invoice.period_start && invoice.period_end ? `${t("common.billingPeriod")}: ${(0, _util2.formatToDate)(invoice.period_start * 1e3, locale, "YYYY-MM-DD HH:mm")} ~ ${(0, _util2.formatToDate)(invoice.period_end * 1e3, locale, "YYYY-MM-DD HH:mm")}` : "";
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: periodTooltip,
+          arrow: true,
+          placement: "top-start",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            onClick: e => handleLinkClick(e, invoice),
+            sx: linkStyle,
+            children: (0, _util2.formatToDate)(invoice.created_at, locale, relatedSubscription ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD HH:mm:ss")
+          })
         });
       }
     }
@@ -806,13 +812,18 @@ const InvoiceList = _react.default.memo(props => {
               },
               children: rateLine
             })]
-          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-            sx: {
-              flex: 1,
-              textAlign: "right"
-            },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              children: (0, _util2.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+            title: invoice.subscription_id && invoice.period_start && invoice.period_end ? `${t("common.billingPeriod")}: ${(0, _util2.formatToDate)(invoice.period_start * 1e3, locale, "YYYY-MM-DD HH:mm")} ~ ${(0, _util2.formatToDate)(invoice.period_end * 1e3, locale, "YYYY-MM-DD HH:mm")}` : "",
+            arrow: true,
+            placement: "top-start",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+              sx: {
+                flex: 1,
+                textAlign: "right"
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                children: (0, _util2.formatToDate)(invoice.created_at, locale, "HH:mm:ss")
+              })
             })
           }), !action && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             className: "invoice-description",

package/lib/libs/util.js

@@ -1510,6 +1510,7 @@ function truncateText(text, maxLength, useWidth = false) {
   return `${truncated}...`;
 }
 function getCustomerAvatar(did, updated_at, imageSize = 48) {
+  if (!did) return "";
   const updated = typeof updated_at === "number" ? updated_at : (0, _dayjs.default)(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || (0, _dayjs.default)().unix()}`;
 }

package/lib/locales/en.js

@@ -14,6 +14,7 @@ module.exports = (0, _flat.default)({
     none: "None",
     createdAt: "Created At",
     updatedAt: "Updated At",
+    billingPeriod: "Billing Period",
     resumesAt: "Resume At",
     actions: "Actions",
     options: "Options",

package/lib/locales/zh.js

@@ -14,6 +14,7 @@ module.exports = (0, _flat.default)({
     none: "\u65E0",
     createdAt: "\u521B\u5EFA\u65F6\u95F4",
     updatedAt: "\u66F4\u65B0\u65F6\u95F4",
+    billingPeriod: "\u8D26\u5355\u5468\u671F",
     resumesAt: "\u6062\u590D\u65F6\u95F4",
     actions: "\u64CD\u4F5C",
     options: "\u9009\u9879",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.27.2",
+  "version": "1.29.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,19 +54,19 @@
     }
   },
   "dependencies": {
-    "@arcblock/bridge": "^3.5.1",
-    "@arcblock/did-connect-react": "^3.5.1",
-    "@arcblock/react-hooks": "^3.5.1",
-    "@arcblock/ux": "^3.5.1",
-    "@arcblock/ws": "^1.28.5",
-    "@blocklet/payment-react-headless": "1.27.2",
-    "@blocklet/theme": "^3.5.1",
-    "@blocklet/ui-react": "^3.5.1",
+    "@arcblock/bridge": "^3.5.2",
+    "@arcblock/did-connect-react": "^3.5.2",
+    "@arcblock/react-hooks": "^3.5.2",
+    "@arcblock/ux": "^3.5.2",
+    "@arcblock/ws": "^1.30.9",
+    "@blocklet/payment-react-headless": "1.29.0",
+    "@blocklet/theme": "^3.5.2",
+    "@blocklet/ui-react": "^3.5.2",
     "@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.5",
+    "@ocap/util": "^1.30.9",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -97,7 +97,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.27.2",
+    "@blocklet/payment-types": "1.29.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -128,5 +128,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "ba98e644bcbf88924039ba8990bba673198e6a61"
+  "gitHead": "02334964fbf505ea2fd27081039542d1f9868d57"
 }

package/src/checkout-v2/components/left/product-item-card.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import AddIcon from '@mui/icons-material/Add';
 import CheckIcon from '@mui/icons-material/Check';
 import LocalOfferIcon from '@mui/icons-material/LocalOffer';
@@ -182,6 +182,24 @@ export default function ProductItemCard({
     if (!isEditing) setQtyInput(String(quantity));
   }, [quantity, isEditing]);
 
+  // Debounce quantity API calls — UI updates immediately, API fires after 400ms idle
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const debouncedQuantityChange = useCallback(
+    (priceId: string, qty: number) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        onQuantityChange(priceId, qty);
+      }, 400);
+    },
+    [onQuantityChange]
+  );
+  useEffect(
+    () => () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    },
+    []
+  );
+
   // Upsell info
   const canUpsell = !!(item.price as any)?.upsell?.upsells_to;
   const isUpselled = !!(item as any).upsell_price;
@@ -494,8 +512,14 @@ export default function ProductItemCard({
             </Typography>
             <IconButton
               size="small"
-              onClick={() => onQuantityChange(item.price_id, quantity - 1)}
-              disabled={quantity <= min}
+              onClick={() => {
+                const cur = parseInt(qtyInput, 10) || quantity;
+                const newQty = cur - 1;
+                if (newQty < min) return;
+                setQtyInput(String(newQty));
+                debouncedQuantityChange(item.price_id, newQty);
+              }}
+              disabled={(parseInt(qtyInput, 10) || quantity) <= min}
               sx={{
                 width: 36,
                 height: 36,
@@ -556,8 +580,14 @@ export default function ProductItemCard({
             />
             <IconButton
               size="small"
-              onClick={() => onQuantityChange(item.price_id, quantity + 1)}
-              disabled={max ? quantity >= max : false}
+              onClick={() => {
+                const cur = parseInt(qtyInput, 10) || quantity;
+                const newQty = cur + 1;
+                if (max && newQty > max) return;
+                setQtyInput(String(newQty));
+                debouncedQuantityChange(item.price_id, newQty);
+              }}
+              disabled={max ? (parseInt(qtyInput, 10) || quantity) >= max : false}
               sx={{
                 width: 36,
                 height: 36,

package/src/checkout-v2/panels/left/credit-topup-panel.tsx

@@ -204,7 +204,16 @@ export default function CreditTopupPanel() {
   const maxCredits = maxQuantity * step;
   const minCredits = minQuantity * step;
 
-  // Commit desired credits → compute packs → update API
+  // Debounce API calls — UI updates immediately, API fires after 400ms idle
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(
+    () => () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    },
+    []
+  );
+
+  // Commit desired credits → compute packs → update API (debounced)
   const commitCredits = useCallback(
     (credits: number) => {
       if (credits <= 0) return;
@@ -214,7 +223,12 @@ export default function CreditTopupPanel() {
       const clampedPacks = Math.max(minQuantity, Math.min(maxQuantity, packs));
       setLocalQty(clampedPacks);
       setDesiredCredits(clamped);
-      if (item) lineItems.updateQuantity(item.price_id, clampedPacks);
+      if (item) {
+        if (debounceRef.current) clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+          lineItems.updateQuantity(item.price_id, clampedPacks);
+        }, 400);
+      }
     },
     [step, minQuantity, maxQuantity, minCredits, maxCredits, item, lineItems]
   );

package/src/checkout-v2/panels/right/payment-panel.tsx

@@ -151,9 +151,18 @@ export default function PaymentPanel() {
 
   // DID Connect
   const didConnectOpenedRef = useRef(false);
+  const didConnectSucceededRef = useRef(false);
+  // Track latest submit.status for use inside DID Connect SDK callbacks (onClose/onError),
+  // which fire asynchronously and may run after status has already advanced past waiting_did.
+  // Reading submit.status directly would capture a stale closure.
+  const submitStatusRef = useRef(submit.status);
+  useEffect(() => {
+    submitStatusRef.current = submit.status;
+  }, [submit.status]);
   useEffect(() => {
     if (submit.status !== 'waiting_did') {
       didConnectOpenedRef.current = false;
+      didConnectSucceededRef.current = false;
       return;
     }
     const ctx = submit.context;
@@ -161,22 +170,36 @@ export default function PaymentPanel() {
     if (didConnectOpenedRef.current) return;
     didConnectOpenedRef.current = true;
 
-    const didPrefix = `${paymentKitPrefix}/api/did`.replace(/([^:])\/\//g, '$1/');
+    // Use absolute URL for DID Connect prefix — DID Connect SDK needs full URL
+    // for status polling. paymentKitPrefix may be relative ('/' or ''), which can
+    // cause polling to fail. getPrefix() from util.ts returns the full origin URL.
+    const didPrefix = `${paymentKitPrefix || window.location.origin}/api/did`.replace(/([^:])\/\//g, '$1/');
     connect.open({
       locale: locale as any,
       action: ctx.action,
       prefix: didPrefix,
       saveConnect: false,
       extraParams: ctx.extraParams,
-      onSuccess: () => {
+      onSuccess: async () => {
+        didConnectSucceededRef.current = true;
         connect.close();
+        await submit.didConnectComplete();
       },
       onClose: () => {
         connect.close();
-        submit.reset();
+        // If submit has already advanced past waiting_did (e.g. didConnectComplete is
+        // polling, or completion/failure resolved), the modal close is a follow-up to a
+        // successful flow — do not reset. Without this guard, the effect re-run after
+        // setStatus('submitting') clears didConnectSucceededRef, and a late onClose call
+        // would incorrectly tear down the in-flight polling.
+        if (submitStatusRef.current !== 'waiting_did') return;
+        if (!didConnectSucceededRef.current) {
+          submit.reset();
+        }
       },
       onError: (err: any) => {
         console.error('DID Connect error:', err);
+        if (submitStatusRef.current !== 'waiting_did') return;
         submit.reset();
       },
       messages: {
@@ -185,6 +208,8 @@ export default function PaymentPanel() {
         confirm: t('payment.checkout.connectModal.confirm'),
       } as any,
     });
+
+    // No cleanup needed — connect modal manages its own lifecycle.
   }, [submit.status, submit.context, connect, locale, t, buttonLabel]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Active payment type

package/src/checkout-v2/views/success-view.tsx

@@ -471,7 +471,7 @@ function VendorProgressPanel({
         borderColor: 'divider',
         animation: `${fadeUp} 0.5s ease 0.3s both`,
       }}>
-      {vendorStatus.vendors.map((vendor, idx) => (
+      {(vendorStatus.vendors || []).map((vendor, idx) => (
         <VendorProgressItemV2 key={vendor.title || `vendor-${idx}`} vendor={vendor} t={t} />
       ))}
       {vendorStatus.hasFailed && (

package/src/history/invoice/list.tsx

@@ -510,15 +510,21 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
+          const periodTooltip =
+            invoice.subscription_id && invoice.period_start && invoice.period_end
+              ? `${t('common.billingPeriod')}: ${formatToDate(invoice.period_start * 1000, locale, 'YYYY-MM-DD HH:mm')} ~ ${formatToDate(invoice.period_end * 1000, locale, 'YYYY-MM-DD HH:mm')}`
+              : '';
 
           return (
-            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              {formatToDate(
-                invoice.created_at,
-                locale,
-                relatedSubscription ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss'
-              )}
-            </Box>
+            <Tooltip title={periodTooltip} arrow placement="top-start">
+              <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
+                {formatToDate(
+                  invoice.created_at,
+                  locale,
+                  relatedSubscription ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss'
+                )}
+              </Box>
+            </Tooltip>
           );
         },
       },
@@ -825,13 +831,22 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                     </Typography>
                   )}
                 </Box>
-                <Box
-                  sx={{
-                    flex: 1,
-                    textAlign: 'right',
-                  }}>
-                  <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
-                </Box>
+                <Tooltip
+                  title={
+                    invoice.subscription_id && invoice.period_start && invoice.period_end
+                      ? `${t('common.billingPeriod')}: ${formatToDate(invoice.period_start * 1000, locale, 'YYYY-MM-DD HH:mm')} ~ ${formatToDate(invoice.period_end * 1000, locale, 'YYYY-MM-DD HH:mm')}`
+                      : ''
+                  }
+                  arrow
+                  placement="top-start">
+                  <Box
+                    sx={{
+                      flex: 1,
+                      textAlign: 'right',
+                    }}>
+                    <Typography>{formatToDate(invoice.created_at, locale, 'HH:mm:ss')}</Typography>
+                  </Box>
+                </Tooltip>
                 {!action && (
                   <Box
                     className="invoice-description"

package/src/hooks/subscription.ts

@@ -15,7 +15,7 @@ const getSocketHost = () => new URL(window.location.href).host;
  * @return {*}
  */
 export function useSubscription(channel: string) {
-  const socket = useRef<typeof WsClient>(null);
+  const socket = useRef<InstanceType<typeof WsClient> | null>(null);
   const subscription = useRef<any>(null);
 
   useEffect(() => {

package/src/libs/util.ts

@@ -1654,6 +1654,7 @@ export function getCustomerAvatar(
   updated_at: string | number | undefined,
   imageSize: number = 48
 ): string {
+  if (!did) return '';
   const updated = typeof updated_at === 'number' ? updated_at : dayjs(updated_at).unix();
   return `/.well-known/service/user/avatar/${did}?imageFilter=resize&w=${imageSize}&h=${imageSize}&updateAt=${updated || dayjs().unix()}`;
 }

package/src/locales/en.tsx

@@ -9,6 +9,7 @@ export default flat({
     none: 'None',
     createdAt: 'Created At',
     updatedAt: 'Updated At',
+    billingPeriod: 'Billing Period',
     resumesAt: 'Resume At',
     actions: 'Actions',
     options: 'Options',

package/src/locales/zh.tsx

@@ -9,6 +9,7 @@ export default flat({
     none: '无',
     createdAt: '创建时间',
     updatedAt: '更新时间',
+    billingPeriod: '账单周期',
     resumesAt: '恢复时间',
     actions: '操作',
     options: '选项',