@blocklet/payment-react 1.20.21 → 1.21.0

package/es/locales/en.js

@@ -185,7 +185,17 @@ export default flat({
         progress: "Progress {progress}%",
         delivered: "Installation completed",
         failed: "Processing failed",
-        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!"
+        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!",
+        launcher: {
+          processing: "Installing {name}",
+          completed: "{name} installed successfully",
+          failed: "Failed to install {name}"
+        },
+        didnames: {
+          processing: "Domain ({domain}) registering",
+          completed: "Domain ({domain}) registered successfully",
+          failed: "Domain ({domain}) registered failed"
+        }
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/es/locales/zh.js

@@ -185,7 +185,17 @@ export default flat({
         progress: "\u8FDB\u5EA6 {progress}%",
         delivered: "\u5B89\u88C5\u6210\u529F",
         failed: "\u5B89\u88C5\u5931\u8D25",
-        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01"
+        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01",
+        launcher: {
+          processing: "\u6B63\u5728\u5B89\u88C5 {name}",
+          completed: "\u5B89\u88C5 {name} \u6210\u529F",
+          failed: "\u5B89\u88C5 {name} \u5931\u8D25"
+        },
+        didnames: {
+          processing: "\u6B63\u5728\u6CE8\u518C {domain}",
+          completed: "\u6CE8\u518C {domain} \u6210\u529F",
+          failed: "\u6CE8\u518C {domain} \u5931\u8D25"
+        }
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/es/payment/index.js

@@ -304,7 +304,9 @@ function PaymentInner({
             {
               mode,
               pageInfo: state.checkoutSession.metadata?.page_info,
-              hasVendor: state.checkoutSession.metadata?.page_info?.hasVendor || state.checkoutSession.line_items.some((item) => item.price?.product?.vendor_config?.length > 0),
+              vendorCount: state.checkoutSession.line_items.reduce((total, item) => {
+                return total + (item.price?.product?.vendor_config?.length || 0);
+              }, 0),
               sessionId: state.checkoutSession.id,
               payee: getStatementDescriptor(state.checkoutSession.line_items),
               action: state.checkoutSession.mode,

package/es/payment/progress-item.d.ts

@@ -1,3 +1,4 @@
+export declare function VendorPlaceholder(): import("react").JSX.Element;
 interface VendorStatus {
     success: boolean;
     name?: string;
@@ -7,6 +8,7 @@ interface VendorStatus {
     message: string;
     appUrl?: string;
     title?: string;
+    vendorType: string;
 }
 export declare function VendorProgressItem({ vendor }: {
     vendor: VendorStatus;

package/es/payment/progress-item.js

@@ -1,7 +1,37 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Box, LinearProgress, Typography } from "@mui/material";
+import { Box, LinearProgress, Skeleton, Typography } from "@mui/material";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Check } from "@mui/icons-material";
+export function VendorPlaceholder() {
+  return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 16, width: 150 }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 16, width: 50 })
+    ] }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: 8, width: "100%" })
+  ] });
+}
+const getVendorLabel = (vendor, isFailed, t) => {
+  const name = vendor.name || vendor.title;
+  const isCompleted = vendor.status === "delivered";
+  if (vendor.vendorType === "didnames") {
+    if (isFailed) {
+      return t("payment.checkout.vendor.didnames.failed", { name });
+    }
+    if (isCompleted) {
+      return t("payment.checkout.vendor.didnames.completed", { name });
+    }
+    return t("payment.checkout.vendor.didnames.processing", { name });
+  }
+  if (isFailed) {
+    return t("payment.checkout.vendor.launcher.failed", { name });
+  }
+  if (isCompleted) {
+    return t("payment.checkout.vendor.launcher.completed", { name });
+  }
+  return t("payment.checkout.vendor.launcher.processing", { name });
+};
 export function VendorProgressItem({ vendor }) {
   const { t } = useLocaleContext();
   const [displayProgress, setDisplayProgress] = useState(0);
@@ -29,7 +59,7 @@ export function VendorProgressItem({ vendor }) {
         newProgress = Math.min(startProgress + elapsed / 1e3, 99);
       }
       newProgress = Math.round(newProgress);
-      setDisplayProgress((pre) => pre > newProgress ? pre : newProgress);
+      setDisplayProgress((pre) => Math.min(pre > newProgress ? pre : newProgress, 100));
       if (realProgress === 100) {
         return;
       }
@@ -52,11 +82,11 @@ export function VendorProgressItem({ vendor }) {
   }, [startAnimation]);
   const isCompleted = displayProgress >= 100;
   const isFailed = vendor.status === "failed";
-  const nameText = vendor.name || vendor.title;
+  const nameText = getVendorLabel(vendor, isFailed, t);
   if (isFailed) {
     return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
       /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "error.main", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: 0 }) })
       ] }),
       /* @__PURE__ */ jsx(
@@ -77,17 +107,23 @@ export function VendorProgressItem({ vendor }) {
       )
     ] });
   }
-  const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
+  if (!vendor.name && !vendor.title) {
+    return /* @__PURE__ */ jsx(VendorPlaceholder, {});
+  }
   return /* @__PURE__ */ jsxs(Box, { sx: { mb: 2 }, children: [
     /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: nameText ? `${nameText} - ${statusText}` : statusText }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: displayProgress }) })
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { color: "text.secondary", display: "flex", alignItems: "center" }, children: [
+        nameText,
+        " ",
+        isCompleted ? /* @__PURE__ */ jsx(Check, { sx: { color: "success.main", ml: 0.5 }, fontSize: "small" }) : null
+      ] }),
+      isCompleted ? null : /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", fontWeight: 500 }, children: t("payment.checkout.vendor.progress", { progress: displayProgress }) })
     ] }),
     /* @__PURE__ */ jsx(
       LinearProgress,
       {
         variant: "determinate",
-        value: Math.min(displayProgress, 100),
+        value: displayProgress || 0,
         sx: {
           height: 8,
           borderRadius: 4,

package/es/payment/success.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     mode: string;
     pageInfo?: any;
-    hasVendor?: boolean;
+    vendorCount?: number;
     sessionId?: string;
     message: string;
     action: string;
@@ -10,5 +10,5 @@ type Props = {
     subscriptionId?: string;
     subscriptions?: any[];
 };
-export default function PaymentSuccess({ mode, pageInfo, hasVendor, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
+export default function PaymentSuccess({ mode, pageInfo, vendorCount, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
 export {};

package/es/payment/success.js

@@ -5,11 +5,11 @@ import { useEffect, useRef, useState } from "react";
 import { joinURL } from "ufo";
 import { Button } from "@arcblock/ux";
 import { usePaymentContext } from "../contexts/payment.js";
-import { VendorProgressItem } from "./progress-item.js";
+import { VendorPlaceholder, VendorProgressItem } from "./progress-item.js";
 export default function PaymentSuccess({
   mode,
   pageInfo = {},
-  hasVendor = false,
+  vendorCount = 0,
   sessionId = "",
   message,
   action,
@@ -26,7 +26,7 @@ export default function PaymentSuccess({
   const timerRef = useRef(Date.now());
   let next = null;
   useEffect(() => {
-    if (!hasVendor || !sessionId) return void 0;
+    if (vendorCount === 0 || !sessionId) return void 0;
     const fetchVendorStatus = async (interval2) => {
       try {
         const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
@@ -50,9 +50,22 @@ export default function PaymentSuccess({
       fetchVendorStatus(interval);
     }, 5e3);
     return () => clearInterval(interval);
-  }, [hasVendor, api, prefix, sessionId]);
+  }, [vendorCount, api, prefix, sessionId]);
+  const renderPlaceholders = () => {
+    const placeholders = [];
+    for (let i = 0; i < vendorCount; i++) {
+      placeholders.push(/* @__PURE__ */ jsx(VendorPlaceholder, {}, `placeholder-${i}`));
+    }
+    return placeholders;
+  };
+  const renderVendors = () => {
+    if (!vendorStatus) return renderPlaceholders();
+    return vendorStatus.vendors?.map((vendor, index) => {
+      return /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`);
+    });
+  };
   const renderVendorProgress = () => {
-    if (!hasVendor || !vendorStatus) return null;
+    if (vendorCount === 0) return null;
     return /* @__PURE__ */ jsxs(
       Paper,
       {
@@ -68,7 +81,7 @@ export default function PaymentSuccess({
           gap: 2
         },
         children: [
-          vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`)),
+          renderVendors(),
           hasFailed ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "warning.main", mb: 1 }, children: t("payment.checkout.vendor.failedMsg") }) : null,
           pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "text.primary", mb: 1 }, children: pageInfo?.success_message?.[locale] }) : null
         ]

package/lib/locales/en.js

@@ -192,7 +192,17 @@ module.exports = (0, _flat.default)({
         progress: "Progress {progress}%",
         delivered: "Installation completed",
         failed: "Processing failed",
-        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!"
+        failedMsg: "An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!",
+        launcher: {
+          processing: "Installing {name}",
+          completed: "{name} installed successfully",
+          failed: "Failed to install {name}"
+        },
+        didnames: {
+          processing: "Domain ({domain}) registering",
+          completed: "Domain ({domain}) registered successfully",
+          failed: "Domain ({domain}) registered failed"
+        }
       },
       confirm: {
         withStake: "By confirming, you allow {payee} to charge your account for future payments and, if necessary, slash your stake. You can cancel your subscription or withdraw your stake at any time.",

package/lib/locales/zh.js

@@ -192,7 +192,17 @@ module.exports = (0, _flat.default)({
         progress: "\u8FDB\u5EA6 {progress}%",
         delivered: "\u5B89\u88C5\u6210\u529F",
         failed: "\u5B89\u88C5\u5931\u8D25",
-        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01"
+        failedMsg: "\u5F88\u62B1\u6B49\uFF0C\u5B89\u88C5\u8FC7\u7A0B\u4E2D\u9047\u5230\u4E86\u4E00\u4E9B\u95EE\u9898\u3002\u6211\u4EEC\u6B63\u5728\u5904\u7406\u8FD9\u4E2A\u95EE\u9898\uFF0C\u7A0D\u540E\u4F1A\u81EA\u52A8\u4E3A\u60A8\u9000\u6B3E\u3002\u611F\u8C22\u60A8\u7684\u8010\u5FC3\u7B49\u5F85\uFF01",
+        launcher: {
+          processing: "\u6B63\u5728\u5B89\u88C5 {name}",
+          completed: "\u5B89\u88C5 {name} \u6210\u529F",
+          failed: "\u5B89\u88C5 {name} \u5931\u8D25"
+        },
+        didnames: {
+          processing: "\u6B63\u5728\u6CE8\u518C {domain}",
+          completed: "\u6CE8\u518C {domain} \u6210\u529F",
+          failed: "\u6CE8\u518C {domain} \u5931\u8D25"
+        }
       },
       confirm: {
         withStake: "\u786E\u8BA4\u8BA2\u9605\uFF0C\u5373\u8868\u793A\u60A8\u6388\u6743 {payee} \u4ECE\u60A8\u7684\u8D26\u6237\u6263\u53D6\u672A\u6765\u6B3E\u9879\uFF0C\u5E76\u5728\u5FC5\u8981\u65F6\u7F5A\u6CA1\u8D28\u62BC\u3002\u60A8\u53EF\u968F\u65F6\u53D6\u6D88\u8BA2\u9605\u6216\u64A4\u9500\u8D28\u62BC\u3002",

package/lib/payment/index.js

@@ -360,7 +360,9 @@ function PaymentInner({
         children: [completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_success.default, {
           mode,
           pageInfo: state.checkoutSession.metadata?.page_info,
-          hasVendor: state.checkoutSession.metadata?.page_info?.hasVendor || state.checkoutSession.line_items.some(item => item.price?.product?.vendor_config?.length > 0),
+          vendorCount: state.checkoutSession.line_items.reduce((total, item) => {
+            return total + (item.price?.product?.vendor_config?.length || 0);
+          }, 0),
           sessionId: state.checkoutSession.id,
           payee: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
           action: state.checkoutSession.mode,

package/lib/payment/progress-item.d.ts

@@ -1,3 +1,4 @@
+export declare function VendorPlaceholder(): import("react").JSX.Element;
 interface VendorStatus {
     success: boolean;
     name?: string;
@@ -7,6 +8,7 @@ interface VendorStatus {
     message: string;
     appUrl?: string;
     title?: string;
+    vendorType: string;
 }
 export declare function VendorProgressItem({ vendor }: {
     vendor: VendorStatus;

package/lib/payment/progress-item.js

@@ -3,11 +3,73 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.VendorPlaceholder = VendorPlaceholder;
 exports.VendorProgressItem = VendorProgressItem;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _react = require("react");
+var _iconsMaterial = require("@mui/icons-material");
+function VendorPlaceholder() {
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      mb: 2
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        mb: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "rounded",
+        height: 16,
+        width: 150
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+        variant: "rounded",
+        height: 16,
+        width: 50
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+      variant: "rounded",
+      height: 8,
+      width: "100%"
+    })]
+  });
+}
+const getVendorLabel = (vendor, isFailed, t) => {
+  const name = vendor.name || vendor.title;
+  const isCompleted = vendor.status === "delivered";
+  if (vendor.vendorType === "didnames") {
+    if (isFailed) {
+      return t("payment.checkout.vendor.didnames.failed", {
+        name
+      });
+    }
+    if (isCompleted) {
+      return t("payment.checkout.vendor.didnames.completed", {
+        name
+      });
+    }
+    return t("payment.checkout.vendor.didnames.processing", {
+      name
+    });
+  }
+  if (isFailed) {
+    return t("payment.checkout.vendor.launcher.failed", {
+      name
+    });
+  }
+  if (isCompleted) {
+    return t("payment.checkout.vendor.launcher.completed", {
+      name
+    });
+  }
+  return t("payment.checkout.vendor.launcher.processing", {
+    name
+  });
+};
 function VendorProgressItem({
   vendor
 }) {
@@ -39,7 +101,7 @@ function VendorProgressItem({
         newProgress = Math.min(startProgress + elapsed / 1e3, 99);
       }
       newProgress = Math.round(newProgress);
-      setDisplayProgress(pre => pre > newProgress ? pre : newProgress);
+      setDisplayProgress(pre => Math.min(pre > newProgress ? pre : newProgress, 100));
       if (realProgress === 100) {
         return;
       }
@@ -62,7 +124,7 @@ function VendorProgressItem({
   }, [startAnimation]);
   const isCompleted = displayProgress >= 100;
   const isFailed = vendor.status === "failed";
-  const nameText = vendor.name || vendor.title;
+  const nameText = getVendorLabel(vendor, isFailed, t);
   if (isFailed) {
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       sx: {
@@ -80,7 +142,7 @@ function VendorProgressItem({
           sx: {
             color: "text.secondary"
           },
-          children: nameText ? `${nameText} - ${t("payment.checkout.vendor.failed")}` : t("payment.checkout.vendor.failed")
+          children: nameText
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           variant: "body2",
           sx: {
@@ -106,7 +168,9 @@ function VendorProgressItem({
       })]
     });
   }
-  const statusText = isCompleted ? t("payment.checkout.vendor.delivered") : t("payment.checkout.vendor.processing");
+  if (!vendor.name && !vendor.title) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(VendorPlaceholder, {});
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
     sx: {
       mb: 2
@@ -118,13 +182,21 @@ function VendorProgressItem({
         alignItems: "center",
         mb: 1
       },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
         variant: "body2",
         sx: {
-          color: "text.secondary"
+          color: "text.secondary",
+          display: "flex",
+          alignItems: "center"
         },
-        children: nameText ? `${nameText} - ${statusText}` : statusText
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        children: [nameText, " ", isCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Check, {
+          sx: {
+            color: "success.main",
+            ml: 0.5
+          },
+          fontSize: "small"
+        }) : null]
+      }), isCompleted ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "body2",
         sx: {
           color: "text.secondary",
@@ -136,7 +208,7 @@ function VendorProgressItem({
       })]
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.LinearProgress, {
       variant: "determinate",
-      value: Math.min(displayProgress, 100),
+      value: displayProgress || 0,
       sx: {
         height: 8,
         borderRadius: 4,

package/lib/payment/success.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     mode: string;
     pageInfo?: any;
-    hasVendor?: boolean;
+    vendorCount?: number;
     sessionId?: string;
     message: string;
     action: string;
@@ -10,5 +10,5 @@ type Props = {
     subscriptionId?: string;
     subscriptions?: any[];
 };
-export default function PaymentSuccess({ mode, pageInfo, hasVendor, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
+export default function PaymentSuccess({ mode, pageInfo, vendorCount, sessionId, message, action, payee, invoiceId, subscriptionId, subscriptions, }: Props): import("react").JSX.Element;
 export {};

package/lib/payment/success.js

@@ -15,7 +15,7 @@ var _progressItem = require("./progress-item");
 function PaymentSuccess({
   mode,
   pageInfo = {},
-  hasVendor = false,
+  vendorCount = 0,
   sessionId = "",
   message,
   action,
@@ -38,7 +38,7 @@ function PaymentSuccess({
   const timerRef = (0, _react.useRef)(Date.now());
   let next = null;
   (0, _react.useEffect)(() => {
-    if (!hasVendor || !sessionId) return void 0;
+    if (vendorCount === 0 || !sessionId) return void 0;
     const fetchVendorStatus = async interval2 => {
       try {
         const response = await api.get((0, _ufo.joinURL)(prefix, `/api/vendors/order/${sessionId}/status`), {});
@@ -60,9 +60,24 @@ function PaymentSuccess({
       fetchVendorStatus(interval);
     }, 5e3);
     return () => clearInterval(interval);
-  }, [hasVendor, api, prefix, sessionId]);
+  }, [vendorCount, api, prefix, sessionId]);
+  const renderPlaceholders = () => {
+    const placeholders = [];
+    for (let i = 0; i < vendorCount; i++) {
+      placeholders.push(/* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorPlaceholder, {}, `placeholder-${i}`));
+    }
+    return placeholders;
+  };
+  const renderVendors = () => {
+    if (!vendorStatus) return renderPlaceholders();
+    return vendorStatus.vendors?.map((vendor, index) => {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
+        vendor
+      }, vendor.title || `vendor-${index}`);
+    });
+  };
   const renderVendorProgress = () => {
-    if (!hasVendor || !vendorStatus) return null;
+    if (vendorCount === 0) return null;
     return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Paper, {
       elevation: 0,
       sx: {
@@ -75,9 +90,7 @@ function PaymentSuccess({
         flexDirection: "column",
         gap: 2
       },
-      children: [vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
-        vendor
-      }, vendor.title || `vendor-${index}`)), hasFailed ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      children: [renderVendors(), hasFailed ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         variant: "h6",
         sx: {
           color: "warning.main",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.20.21",
+  "version": "1.21.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect-react": "^3.1.41",
-    "@arcblock/ux": "^3.1.41",
-    "@arcblock/ws": "^1.25.3",
-    "@blocklet/theme": "^3.1.41",
-    "@blocklet/ui-react": "^3.1.41",
+    "@arcblock/did-connect-react": "^3.1.43",
+    "@arcblock/ux": "^3.1.43",
+    "@arcblock/ws": "^1.25.4",
+    "@blocklet/theme": "^3.1.43",
+    "@blocklet/ui-react": "^3.1.43",
     "@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.25.3",
+    "@ocap/util": "^1.25.4",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^7.0.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.20.21",
+    "@blocklet/payment-types": "1.21.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "43b26f9e7373a99000f6a14762fdab860a562967"
+  "gitHead": "d133aa0e8c6681dd77bafe024c1e1dafb1addf0d"
 }

package/src/locales/en.tsx

@@ -190,6 +190,16 @@ export default flat({
         failed: 'Processing failed',
         failedMsg:
           'An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!',
+        launcher: {
+          processing: 'Installing {name}',
+          completed: '{name} installed successfully',
+          failed: 'Failed to install {name}',
+        },
+        didnames: {
+          processing: 'Domain ({domain}) registering',
+          completed: 'Domain ({domain}) registered successfully',
+          failed: 'Domain ({domain}) registered failed',
+        },
       },
       confirm: {
         withStake:

package/src/locales/zh.tsx

@@ -188,6 +188,16 @@ export default flat({
         delivered: '安装成功',
         failed: '安装失败',
         failedMsg: '很抱歉，安装过程中遇到了一些问题。我们正在处理这个问题，稍后会自动为您退款。感谢您的耐心等待！',
+        launcher: {
+          processing: '正在安装 {name}',
+          completed: '安装 {name} 成功',
+          failed: '安装 {name} 失败',
+        },
+        didnames: {
+          processing: '正在注册 {domain}',
+          completed: '注册 {domain} 成功',
+          failed: '注册 {domain} 失败',
+        },
       },
       confirm: {
         withStake:

package/src/payment/index.tsx

@@ -361,10 +361,9 @@ function PaymentInner({
             <PaymentSuccess
               mode={mode}
               pageInfo={state.checkoutSession.metadata?.page_info}
-              hasVendor={
-                state.checkoutSession.metadata?.page_info?.hasVendor ||
-                state.checkoutSession.line_items.some((item: any) => item.price?.product?.vendor_config?.length > 0)
-              }
+              vendorCount={state.checkoutSession.line_items.reduce((total: number, item: any) => {
+                return total + (item.price?.product?.vendor_config?.length || 0);
+              }, 0)}
               sessionId={state.checkoutSession.id}
               payee={getStatementDescriptor(state.checkoutSession.line_items)}
               action={state.checkoutSession.mode}

package/src/payment/progress-item.tsx

@@ -1,6 +1,19 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, LinearProgress, Typography } from '@mui/material';
+import { Box, LinearProgress, Skeleton, Typography } from '@mui/material';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { Check } from '@mui/icons-material';
+
+export function VendorPlaceholder() {
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+        <Skeleton variant="rounded" height={16} width={150} />
+        <Skeleton variant="rounded" height={16} width={50} />
+      </Box>
+      <Skeleton variant="rounded" height={8} width="100%" />
+    </Box>
+  );
+}
 
 interface VendorStatus {
   success: boolean;
@@ -11,8 +24,33 @@ interface VendorStatus {
   message: string;
   appUrl?: string;
   title?: string;
+  vendorType: string;
 }
 
+const getVendorLabel = (vendor: VendorStatus, isFailed: boolean, t: any) => {
+  const name = vendor.name || vendor.title;
+  const isCompleted = vendor.status === 'delivered';
+
+  if (vendor.vendorType === 'didnames') {
+    if (isFailed) {
+      return t('payment.checkout.vendor.didnames.failed', { name });
+    }
+    if (isCompleted) {
+      return t('payment.checkout.vendor.didnames.completed', { name });
+    }
+    return t('payment.checkout.vendor.didnames.processing', { name });
+  }
+
+  // Default to launcher type
+  if (isFailed) {
+    return t('payment.checkout.vendor.launcher.failed', { name });
+  }
+  if (isCompleted) {
+    return t('payment.checkout.vendor.launcher.completed', { name });
+  }
+  return t('payment.checkout.vendor.launcher.processing', { name });
+};
+
 export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
   const { t } = useLocaleContext();
   const [displayProgress, setDisplayProgress] = useState(0);
@@ -49,7 +87,7 @@ export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
 
       // Ensure progress is an integer
       newProgress = Math.round(newProgress);
-      setDisplayProgress((pre) => (pre > newProgress ? pre : newProgress));
+      setDisplayProgress((pre) => Math.min(pre > newProgress ? pre : newProgress, 100));
 
       // Stop animation immediately when 100%
       if (realProgress === 100) {
@@ -80,7 +118,7 @@ export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
   const isCompleted = displayProgress >= 100;
   const isFailed = vendor.status === 'failed';
 
-  const nameText = vendor.name || vendor.title;
+  const nameText = getVendorLabel(vendor, isFailed, t);
 
   // 如果是失败状态，显示错误 UI
   if (isFailed) {
@@ -88,7 +126,7 @@ export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
       <Box sx={{ mb: 2 }}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
           <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-            {nameText ? `${nameText} - ${t('payment.checkout.vendor.failed')}` : t('payment.checkout.vendor.failed')}
+            {nameText}
           </Typography>
           <Typography variant="body2" sx={{ color: 'error.main', fontWeight: 500 }}>
             {t('payment.checkout.vendor.progress', { progress: 0 })}
@@ -111,20 +149,25 @@ export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
     );
   }
 
-  const statusText = isCompleted ? t('payment.checkout.vendor.delivered') : t('payment.checkout.vendor.processing');
+  if (!vendor.name && !vendor.title) {
+    return <VendorPlaceholder />;
+  }
+
   return (
     <Box sx={{ mb: 2 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-          {nameText ? `${nameText} - ${statusText}` : statusText}
-        </Typography>
-        <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
-          {t('payment.checkout.vendor.progress', { progress: displayProgress })}
+        <Typography variant="body2" sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center' }}>
+          {nameText} {isCompleted ? <Check sx={{ color: 'success.main', ml: 0.5 }} fontSize="small" /> : null}
         </Typography>
+        {isCompleted ? null : (
+          <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 500 }}>
+            {t('payment.checkout.vendor.progress', { progress: displayProgress })}
+          </Typography>
+        )}
       </Box>
       <LinearProgress
         variant="determinate"
-        value={Math.min(displayProgress, 100)}
+        value={displayProgress || 0}
         sx={{
           height: 8,
           borderRadius: 4,

package/src/payment/success.tsx

@@ -5,12 +5,12 @@ import { joinURL } from 'ufo';
 
 import { Button } from '@arcblock/ux';
 import { usePaymentContext } from '../contexts/payment';
-import { VendorProgressItem } from './progress-item';
+import { VendorPlaceholder, VendorProgressItem } from './progress-item';
 
 type Props = {
   mode: string;
   pageInfo?: any;
-  hasVendor?: boolean;
+  vendorCount?: number;
   sessionId?: string;
   message: string;
   action: string;
@@ -27,6 +27,9 @@ interface VendorStatus {
   message: string;
   appUrl?: string;
   title?: string;
+  name?: string;
+  key?: string;
+  vendorType: string;
 }
 
 interface VendorResponse {
@@ -39,7 +42,7 @@ interface VendorResponse {
 export default function PaymentSuccess({
   mode,
   pageInfo = {},
-  hasVendor = false,
+  vendorCount = 0,
   sessionId = '',
   message,
   action,
@@ -56,9 +59,9 @@ export default function PaymentSuccess({
   const timerRef = useRef(Date.now());
   let next: any = null;
 
-  // Fetch vendor status when hasVendor is true
+  // Fetch vendor status when vendorCount > 0
   useEffect(() => {
-    if (!hasVendor || !sessionId) return undefined;
+    if (vendorCount === 0 || !sessionId) return undefined;
 
     const fetchVendorStatus = async (interval?: NodeJS.Timeout) => {
       try {
@@ -89,11 +92,26 @@ export default function PaymentSuccess({
     }, 5000);
 
     return () => clearInterval(interval);
-  }, [hasVendor, api, prefix, sessionId]);
+  }, [vendorCount, api, prefix, sessionId]);
+
+  const renderPlaceholders = () => {
+    const placeholders = [];
+    for (let i = 0; i < vendorCount; i++) {
+      placeholders.push(<VendorPlaceholder key={`placeholder-${i}`} />);
+    }
+    return placeholders;
+  };
+
+  const renderVendors = () => {
+    if (!vendorStatus) return renderPlaceholders();
+    return vendorStatus.vendors?.map((vendor, index) => {
+      return <VendorProgressItem key={vendor.title || `vendor-${index}`} vendor={vendor} />;
+    });
+  };
 
   // Render vendor progress component
   const renderVendorProgress = () => {
-    if (!hasVendor || !vendorStatus) return null;
+    if (vendorCount === 0) return null;
 
     return (
       <Paper
@@ -108,9 +126,7 @@ export default function PaymentSuccess({
           flexDirection: 'column',
           gap: 2,
         }}>
-        {vendorStatus.vendors?.map((vendor, index) => (
-          <VendorProgressItem key={vendor.title || `vendor-${index}`} vendor={vendor} />
-        ))}
+        {renderVendors()}
         {hasFailed ? (
           <Typography variant="h6" sx={{ color: 'warning.main', mb: 1 }}>
             {t('payment.checkout.vendor.failedMsg')}