@blocklet/payment-react 1.20.20 → 1.20.22

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')}

package/src/payment/summary.tsx

@@ -275,6 +275,7 @@ export default function PaymentSummary({
     }
   };
 
+  const hasSubTotal = +staking > 0 || allowPromotionCodes;
   const ProductCardList = (
     <Stack
       className="cko-product-list"
@@ -422,7 +423,7 @@ export default function PaymentSummary({
         )}
         <Divider sx={{ mt: 2.5, mb: 2.5 }} />
         {+staking > 0 && (
-          <>
+          <Stack spacing={1}>
             <Stack
               direction="row"
               spacing={1}
@@ -465,7 +466,7 @@ export default function PaymentSummary({
                 {formatAmount(staking, discountCurrency.decimal)} {discountCurrency.symbol}
               </Typography>
             </Stack>
-          </>
+          </Stack>
         )}
         {(allowPromotionCodes || hasDiscounts) && (
           <Stack
@@ -502,10 +503,7 @@ export default function PaymentSummary({
 
         {/* Promotion Code Details */}
         {hasDiscounts && (
-          <Box
-            sx={{
-              py: 1.5,
-            }}>
+          <Box>
             {sessionDiscounts.map((discount: any) => {
               const promotionCodeInfo = discount.promotion_code_details;
               const couponInfo = discount.coupon_details;
@@ -529,13 +527,12 @@ export default function PaymentSummary({
                         backgroundColor: 'grey.100',
                         width: 'fit-content',
                         px: 1,
-                        py: 0.5,
+                        py: 1,
                         borderRadius: 1,
                       }}>
                       <Typography
                         sx={{
                           fontWeight: 'medium',
-                          fontSize: 'small',
                           display: 'flex',
                           alignItems: 'center',
                           gap: 0.5,
@@ -582,7 +579,7 @@ export default function PaymentSummary({
             })}
           </Box>
         )}
-
+        {hasSubTotal && <Divider sx={{ my: 1 }} />}
         <Stack
           sx={{
             display: 'flex',