@blocklet/payment-react 1.20.5 → 1.20.7

package/src/locales/en.tsx

@@ -182,6 +182,13 @@ export default flat({
         donate: 'Thanks for your tip',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
+      vendor: {
+        processing: 'Processing...',
+        progress: 'Progress {progress}%',
+        delivered: 'Installation completed',
+        failed: 'Processing failed',
+        pending: 'Waiting for processing',
+      },
       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/src/locales/zh.tsx

@@ -179,7 +179,14 @@ export default flat({
         subscription: '感谢您的订阅',
         setup: '感谢您的订阅',
         donate: '感谢您的支持',
-        tip: '向{payee}的付款已完成。您可以在您的账户中查看此付款的详细信息。',
+        tip: '向 {payee} 的付款已完成。您可以在您的账户中查看此付款的详细信息。',
+      },
+      vendor: {
+        processing: '正在安装中...',
+        progress: '进度 {progress}%',
+        delivered: '安装成功',
+        failed: '安装失败',
+        pending: '准备安装',
       },
       confirm: {
         withStake:

package/src/payment/index.tsx

@@ -307,6 +307,12 @@ function PaymentInner({
           {completed && (
             <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)
+              }
+              sessionId={state.checkoutSession.id}
               payee={getStatementDescriptor(state.checkoutSession.line_items)}
               action={state.checkoutSession.mode}
               invoiceId={state.checkoutSession.invoice_id}

package/src/payment/progress-item.tsx

@@ -0,0 +1,107 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, LinearProgress, Typography } from '@mui/material';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface VendorStatus {
+  success: boolean;
+  status: 'delivered' | 'pending' | 'failed';
+  progress: number;
+  message: string;
+  appUrl?: string;
+  title?: string;
+}
+
+export function VendorProgressItem({ vendor }: { vendor: VendorStatus }) {
+  const { t } = useLocaleContext();
+  const [displayProgress, setDisplayProgress] = useState(0);
+  const animationRef = useRef<number>();
+
+  const startAnimation = useCallback(() => {
+    const realProgress = vendor.progress || 0;
+    let startTime: number;
+    let startProgress: number;
+
+    const animate = (currentTime: number) => {
+      if (!startTime) {
+        startTime = currentTime;
+        startProgress = displayProgress;
+      }
+
+      const elapsed = currentTime - startTime;
+      let newProgress: number;
+
+      if (realProgress === 100) {
+        // If progress is 100%, set directly to 100% without animation
+        newProgress = 100;
+      } else if (realProgress === 0) {
+        // When no data available, increase 1% per second
+        newProgress = Math.min(startProgress + elapsed / 1000, 99);
+      } else if (realProgress > startProgress) {
+        const duration = 1000; // 1 second to reach target quickly
+        const progress = Math.min(elapsed / duration, 1);
+        newProgress = startProgress + (realProgress - startProgress) * progress;
+      } else {
+        // After reaching target, increase 1% per second, max 99%
+        newProgress = Math.min(startProgress + elapsed / 1000, 99);
+      }
+
+      // Ensure progress is an integer
+      newProgress = Math.round(newProgress);
+      setDisplayProgress((pre) => (pre > newProgress ? pre : newProgress));
+
+      // Stop animation immediately when 100%
+      if (realProgress === 100) {
+        return;
+      }
+
+      // Continue animation in other cases
+      if (newProgress < 99 && realProgress < 100) {
+        animationRef.current = requestAnimationFrame(animate);
+      }
+    };
+
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    animationRef.current = requestAnimationFrame(animate);
+  }, [vendor.progress, displayProgress]);
+
+  useEffect(() => {
+    startAnimation();
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [startAnimation]);
+
+  const isCompleted = displayProgress >= 80;
+  const statusText = isCompleted ? t('payment.checkout.vendor.delivered') : t('payment.checkout.vendor.processing');
+
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          {vendor.title ? `${vendor.title} - ${statusText}` : statusText}
+        </Typography>
+        <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)}
+        sx={{
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: 'grey.200',
+          '& .MuiLinearProgress-bar': {
+            borderRadius: 4,
+            backgroundColor: isCompleted ? 'success.main' : 'primary.main',
+            transition: 'background-color 0.3s linear',
+          },
+        }}
+      />
+    </Box>
+  );
+}

package/src/payment/success.tsx

@@ -1,12 +1,17 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Grow, Link, Stack, Typography, Box, Paper, styled } from '@mui/material';
+import { Box, Grow, Link, Paper, Stack, styled, Typography } from '@mui/material';
+import { useEffect, useState } from 'react';
 import { joinURL } from 'ufo';
 
 import { Button } from '@arcblock/ux';
 import { usePaymentContext } from '../contexts/payment';
+import { VendorProgressItem } from './progress-item';
 
 type Props = {
   mode: string;
+  pageInfo?: any;
+  hasVendor?: boolean;
+  sessionId?: string;
   message: string;
   action: string;
   payee: string;
@@ -15,8 +20,27 @@ type Props = {
   subscriptions?: any[];
 };
 
+interface VendorStatus {
+  success: boolean;
+  status: 'delivered' | 'pending' | 'failed';
+  progress: number;
+  message: string;
+  appUrl?: string;
+  title?: string;
+}
+
+interface VendorResponse {
+  payment_status: string;
+  session_status: string;
+  vendors: VendorStatus[];
+  error: string | null;
+}
+
 export default function PaymentSuccess({
   mode,
+  pageInfo = {},
+  hasVendor = false,
+  sessionId = '',
   message,
   action,
   payee,
@@ -24,9 +48,69 @@ export default function PaymentSuccess({
   subscriptionId = '',
   subscriptions = [],
 }: Props) {
-  const { t } = useLocaleContext();
-  const { prefix } = usePaymentContext();
+  const { t, locale } = useLocaleContext();
+  const { prefix, api } = usePaymentContext();
+  const [vendorStatus, setVendorStatus] = useState<VendorResponse | null>(null);
+  const [isAllCompleted, setIsAllCompleted] = useState(false);
   let next: any = null;
+
+  // Fetch vendor status when hasVendor is true
+  useEffect(() => {
+    if (!hasVendor || !sessionId) return undefined;
+
+    const fetchVendorStatus = async (interval?: NodeJS.Timeout) => {
+      try {
+        const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
+        const allCompleted = response.data?.vendors?.every((vendor: any) => vendor.progress >= 80);
+        if (allCompleted) {
+          clearInterval(interval);
+        }
+        setIsAllCompleted(allCompleted);
+        setVendorStatus(response.data);
+      } catch (error) {
+        console.error('Failed to fetch vendor status:', error);
+      }
+    };
+
+    fetchVendorStatus();
+
+    // Poll every 5 seconds if progress is less than 80%
+    const interval = setInterval(() => {
+      fetchVendorStatus(interval);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [hasVendor, api, prefix, sessionId]);
+
+  // Render vendor progress component
+  const renderVendorProgress = () => {
+    if (!hasVendor || !vendorStatus) return null;
+
+    return (
+      <Paper
+        elevation={0}
+        sx={{
+          p: 3,
+          backgroundColor: 'grey.50',
+          borderRadius: 2,
+          width: '100%',
+          mt: 2,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+        }}>
+        {vendorStatus.vendors?.map((vendor, index) => (
+          <VendorProgressItem key={vendor.title || `vendor-${index}`} vendor={vendor} />
+        ))}
+        {pageInfo?.success_message?.[locale] && isAllCompleted ? (
+          <Typography variant="h6" sx={{ color: 'text.primary', mb: 1 }}>
+            {pageInfo?.success_message?.[locale]}
+          </Typography>
+        ) : null}
+      </Paper>
+    );
+  };
+
   if (['subscription', 'setup'].includes(action)) {
     if (subscriptions && subscriptions.length > 1) {
       next = (
@@ -134,6 +218,7 @@ export default function PaymentSuccess({
           }}>
           {t('payment.checkout.completed.tip', { payee })}
         </Typography>
+        {renderVendorProgress()}
         {next}
       </Stack>
     </Grow>