@blocklet/payment-react 1.20.4 → 1.20.6

package/docs/providers.md

@@ -1,101 +1,42 @@
 # Providers
 
-Providers are the foundation of the `@blocklet/payment-react` library. They use React's Context API to manage state and share essential data—like user sessions, payment settings, and API clients—across all payment-related components. Wrapping your application in the appropriate provider is a necessary first step before using any of the library's components.
+Context Providers are a core concept in `@blocklet/payment-react`. They act as wrappers around parts of your application, using React's Context API to pass down essential data and functions to all the components nested within them. This avoids the need to pass props down manually through many levels of your component tree.
 
-This library offers two primary providers that serve distinct purposes:
+To use most of the components in this library, you must wrap your application or relevant pages with the appropriate provider.
 
-```d2
+```d2 Basic Provider Structure icon=graph:flowchart
 direction: down
 
-"Your App" {
-  "PaymentProvider": {
-    style.fill: "#DDF0FF"
-    "CheckoutForm"
-    "CustomerInvoiceList"
+Your-Application: {
+  shape: rectangle
 
-    "DonateProvider": {
-      style.fill: "#E3F9E5"
-      "CheckoutDonate"
+  PaymentProvider: {
+    label: "PaymentProvider"
+    shape: rectangle
+
+    CheckoutForm: {
+      label: "CheckoutForm"
+    }
+    CustomerInvoiceList: {
+      label: "CustomerInvoiceList"
     }
   }
 }
 
-"Your App" -> "PaymentProvider": "Wraps the application"
-"PaymentProvider" -> "CheckoutForm": "Provides context"
-"PaymentProvider" -> "CustomerInvoiceList": "Provides context"
-"PaymentProvider" -> "DonateProvider": "Can be nested inside"
-"DonateProvider" -> "CheckoutDonate": "Provides context for donations"
-```
-
-## PaymentProvider
-
-The `PaymentProvider` is the main provider that you will use in almost every integration. It is responsible for handling user authentication, fetching payment method settings, managing test/live modes, and providing a pre-configured API client to all nested components. Any component that deals with payments, subscriptions, or invoices must be a descendant of `PaymentProvider`.
-
-It centralizes access to critical data, ensuring a consistent and secure payment environment.
-
-[Learn more about PaymentProvider ›](./providers-payment-provider.md)
-
-## DonateProvider
-
-The `DonateProvider` is designed specifically for donation features. It manages the configuration and state for the `CheckoutDonate` component, such as preset amounts, button text, and donation history display.
-
-It is important to note that the `DonateProvider` must be used *within* a `PaymentProvider`, as it relies on the core payment context to process donations.
-
-[Learn more about DonateProvider ›](./providers-donate-provider.md)
-
-### Basic Setup Example
-
-Here is a typical setup showing how to nest the providers. The `useSessionContext` hook is a placeholder for your application's own session management logic, which supplies the `session` and `connectApi` props required by `PaymentProvider`.
-
-```tsx
-import {
-  PaymentProvider,
-  DonateProvider,
-  CheckoutForm,
-  CheckoutDonate,
-} from '@blocklet/payment-react';
-// This hook should be implemented in your application to provide session context.
-// See the PaymentProvider documentation for an example implementation.
-import { useSessionContext } from '../path/to/your/session-context';
-
-function App() {
-  const { session, connectApi } = useSessionContext();
-
-  // Render only when the session is available.
-  if (!session) {
-    return <div>Loading Session...</div>;
-  }
-
-  return (
-    <PaymentProvider session={session} connect={connectApi}>
-      {/* General payment components can be placed directly under PaymentProvider */}
-      <CheckoutForm id="plink_xxx" />
-
-      {/* For donation features, wrap the relevant part with DonateProvider */}
-      <DonateProvider
-        mountLocation="your-unique-instance-id"
-        description="Donations for my awesome project"
-      >
-        <CheckoutDonate 
-          settings={{
-            target: 'project-donate',
-            title: 'Support This Project',
-            description: 'Your contribution is appreciated!',
-            reference: 'https://your-site.com/project',
-            beneficiaries: [{
-              address: 'user-did-address',
-              share: '100'
-            }]
-          }}
-        />
-      </DonateProvider>
-    </PaymentProvider>
-  );
-}
+Your-Application -> PaymentProvider: "Wraps"
+PaymentProvider -> CheckoutForm: "Provides context"
+PaymentProvider -> CustomerInvoiceList: "Provides context"
 ```
 
----
+The library offers two main providers, each serving a distinct purpose. Choose the one that fits your needs.
 
-With an understanding of the providers, you are ready to explore their specific configurations. We recommend starting with the `PaymentProvider` as it is fundamental to the library's operation.
+<x-cards>
+  <x-card data-title="PaymentProvider" data-icon="lucide:package" data-href="/providers/payment-provider">
+    The fundamental provider required for nearly all payment-related operations. It manages payment methods, currency settings, user session information, and provides a pre-configured API client.
+  </x-card>
+  <x-card data-title="DonateProvider" data-icon="lucide:heart" data-href="/providers/donate-provider">
+    A specialized provider for donation features. It handles the configuration and state for donation widgets, such as those implemented with the CheckoutDonate component.
+  </x-card>
+</x-cards>
 
-**Next:** [PaymentProvider](./providers-payment-provider.md)
+Click on a provider above to view its detailed documentation, including required props and setup examples.

package/es/locales/en.js

@@ -179,6 +179,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.",
         withoutStake: "By confirming, you allow {payee} to charge your account for future payments. You can cancel your subscription at any time."

package/es/locales/zh.js

@@ -177,7 +177,14 @@ export default flat({
         subscription: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
-        tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+      },
+      vendor: {
+        processing: "\u6B63\u5728\u5B89\u88C5\u4E2D...",
+        progress: "\u8FDB\u5EA6 {progress}%",
+        delivered: "\u5B89\u88C5\u6210\u529F",
+        failed: "\u5B89\u88C5\u5931\u8D25",
+        pending: "\u51C6\u5907\u5B89\u88C5"
       },
       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

@@ -255,6 +255,9 @@ function PaymentInner({
             PaymentSuccess,
             {
               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),
+              sessionId: state.checkoutSession.id,
               payee: getStatementDescriptor(state.checkoutSession.line_items),
               action: state.checkoutSession.mode,
               invoiceId: state.checkoutSession.invoice_id,

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

@@ -0,0 +1,12 @@
+interface VendorStatus {
+    success: boolean;
+    status: 'delivered' | 'pending' | 'failed';
+    progress: number;
+    message: string;
+    appUrl?: string;
+    title?: string;
+}
+export declare function VendorProgressItem({ vendor }: {
+    vendor: VendorStatus;
+}): import("react").JSX.Element;
+export {};

package/es/payment/progress-item.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, LinearProgress, Typography } from "@mui/material";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function VendorProgressItem({ vendor }) {
+  const { t } = useLocaleContext();
+  const [displayProgress, setDisplayProgress] = useState(0);
+  const animationRef = useRef();
+  const startAnimation = useCallback(() => {
+    const realProgress = vendor.progress || 0;
+    let startTime;
+    let startProgress;
+    const animate = (currentTime) => {
+      if (!startTime) {
+        startTime = currentTime;
+        startProgress = displayProgress;
+      }
+      const elapsed = currentTime - startTime;
+      let newProgress;
+      if (realProgress === 100) {
+        newProgress = 100;
+      } else if (realProgress === 0) {
+        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
+      } else if (realProgress > startProgress) {
+        const duration = 1e3;
+        const progress = Math.min(elapsed / duration, 1);
+        newProgress = startProgress + (realProgress - startProgress) * progress;
+      } else {
+        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
+      }
+      newProgress = Math.round(newProgress);
+      setDisplayProgress((pre) => pre > newProgress ? pre : newProgress);
+      if (realProgress === 100) {
+        return;
+      }
+      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 /* @__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: vendor.title ? `${vendor.title} - ${statusText}` : statusText }),
+      /* @__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),
+        sx: {
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: "grey.200",
+          "& .MuiLinearProgress-bar": {
+            borderRadius: 4,
+            backgroundColor: isCompleted ? "success.main" : "primary.main",
+            transition: "background-color 0.3s linear"
+          }
+        }
+      }
+    )
+  ] });
+}

package/es/payment/success.d.ts

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

package/es/payment/success.js

@@ -1,11 +1,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 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.js";
+import { VendorProgressItem } from "./progress-item.js";
 export default function PaymentSuccess({
   mode,
+  pageInfo = {},
+  hasVendor = false,
+  sessionId = "",
   message,
   action,
   payee,
@@ -13,9 +18,55 @@ export default function PaymentSuccess({
   subscriptionId = "",
   subscriptions = []
 }) {
-  const { t } = useLocaleContext();
-  const { prefix } = usePaymentContext();
+  const { t, locale } = useLocaleContext();
+  const { prefix, api } = usePaymentContext();
+  const [vendorStatus, setVendorStatus] = useState(null);
+  const [isAllCompleted, setIsAllCompleted] = useState(false);
   let next = null;
+  useEffect(() => {
+    if (!hasVendor || !sessionId) return void 0;
+    const fetchVendorStatus = async (interval2) => {
+      try {
+        const response = await api.get(joinURL(prefix, `/api/vendors/order/${sessionId}/status`), {});
+        const allCompleted = response.data?.vendors?.every((vendor) => vendor.progress >= 80);
+        if (allCompleted) {
+          clearInterval(interval2);
+        }
+        setIsAllCompleted(allCompleted);
+        setVendorStatus(response.data);
+      } catch (error) {
+        console.error("Failed to fetch vendor status:", error);
+      }
+    };
+    fetchVendorStatus();
+    const interval = setInterval(() => {
+      fetchVendorStatus(interval);
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [hasVendor, api, prefix, sessionId]);
+  const renderVendorProgress = () => {
+    if (!hasVendor || !vendorStatus) return null;
+    return /* @__PURE__ */ jsxs(
+      Paper,
+      {
+        elevation: 0,
+        sx: {
+          p: 3,
+          backgroundColor: "grey.50",
+          borderRadius: 2,
+          width: "100%",
+          mt: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        },
+        children: [
+          vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */ jsx(VendorProgressItem, { vendor }, vendor.title || `vendor-${index}`)),
+          pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { color: "text.primary", mb: 1 }, children: pageInfo?.success_message?.[locale] }) : null
+        ]
+      }
+    );
+  };
   if (["subscription", "setup"].includes(action)) {
     if (subscriptions && subscriptions.length > 1) {
       next = /* @__PURE__ */ jsx(
@@ -131,6 +182,7 @@ export default function PaymentSuccess({
             children: t("payment.checkout.completed.tip", { payee })
           }
         ),
+        renderVendorProgress(),
         next
       ]
     }

package/lib/locales/en.js

@@ -186,6 +186,13 @@ module.exports = (0, _flat.default)({
         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.",
         withoutStake: "By confirming, you allow {payee} to charge your account for future payments. You can cancel your subscription at any time."

package/lib/locales/zh.js

@@ -184,7 +184,14 @@ module.exports = (0, _flat.default)({
         subscription: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         setup: "\u611F\u8C22\u60A8\u7684\u8BA2\u9605",
         donate: "\u611F\u8C22\u60A8\u7684\u652F\u6301",
-        tip: "\u5411{payee}\u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+        tip: "\u5411 {payee} \u7684\u4ED8\u6B3E\u5DF2\u5B8C\u6210\u3002\u60A8\u53EF\u4EE5\u5728\u60A8\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u4ED8\u6B3E\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
+      },
+      vendor: {
+        processing: "\u6B63\u5728\u5B89\u88C5\u4E2D...",
+        progress: "\u8FDB\u5EA6 {progress}%",
+        delivered: "\u5B89\u88C5\u6210\u529F",
+        failed: "\u5B89\u88C5\u5931\u8D25",
+        pending: "\u51C6\u5907\u5B89\u88C5"
       },
       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

@@ -307,6 +307,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),
+          sessionId: state.checkoutSession.id,
           payee: (0, _util2.getStatementDescriptor)(state.checkoutSession.line_items),
           action: state.checkoutSession.mode,
           invoiceId: state.checkoutSession.invoice_id,

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

@@ -0,0 +1,12 @@
+interface VendorStatus {
+    success: boolean;
+    status: 'delivered' | 'pending' | 'failed';
+    progress: number;
+    message: string;
+    appUrl?: string;
+    title?: string;
+}
+export declare function VendorProgressItem({ vendor }: {
+    vendor: VendorStatus;
+}): import("react").JSX.Element;
+export {};

package/lib/payment/progress-item.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+function VendorProgressItem({
+  vendor
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [displayProgress, setDisplayProgress] = (0, _react.useState)(0);
+  const animationRef = (0, _react.useRef)();
+  const startAnimation = (0, _react.useCallback)(() => {
+    const realProgress = vendor.progress || 0;
+    let startTime;
+    let startProgress;
+    const animate = currentTime => {
+      if (!startTime) {
+        startTime = currentTime;
+        startProgress = displayProgress;
+      }
+      const elapsed = currentTime - startTime;
+      let newProgress;
+      if (realProgress === 100) {
+        newProgress = 100;
+      } else if (realProgress === 0) {
+        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
+      } else if (realProgress > startProgress) {
+        const duration = 1e3;
+        const progress = Math.min(elapsed / duration, 1);
+        newProgress = startProgress + (realProgress - startProgress) * progress;
+      } else {
+        newProgress = Math.min(startProgress + elapsed / 1e3, 99);
+      }
+      newProgress = Math.round(newProgress);
+      setDisplayProgress(pre => pre > newProgress ? pre : newProgress);
+      if (realProgress === 100) {
+        return;
+      }
+      if (newProgress < 99 && realProgress < 100) {
+        animationRef.current = requestAnimationFrame(animate);
+      }
+    };
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    animationRef.current = requestAnimationFrame(animate);
+  }, [vendor.progress, displayProgress]);
+  (0, _react.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 /* @__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.Typography, {
+        variant: "body2",
+        sx: {
+          color: "text.secondary"
+        },
+        children: vendor.title ? `${vendor.title} - ${statusText}` : statusText
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body2",
+        sx: {
+          color: "text.secondary",
+          fontWeight: 500
+        },
+        children: t("payment.checkout.vendor.progress", {
+          progress: displayProgress
+        })
+      })]
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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"
+        }
+      }
+    })]
+  });
+}

package/lib/payment/success.d.ts

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

package/lib/payment/success.js

@@ -7,11 +7,16 @@ module.exports = PaymentSuccess;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
+var _react = require("react");
 var _ufo = require("ufo");
 var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
+var _progressItem = require("./progress-item");
 function PaymentSuccess({
   mode,
+  pageInfo = {},
+  hasVendor = false,
+  sessionId = "",
   message,
   action,
   payee,
@@ -20,12 +25,63 @@ function PaymentSuccess({
   subscriptions = []
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
-    prefix
+    prefix,
+    api
   } = (0, _payment.usePaymentContext)();
+  const [vendorStatus, setVendorStatus] = (0, _react.useState)(null);
+  const [isAllCompleted, setIsAllCompleted] = (0, _react.useState)(false);
   let next = null;
+  (0, _react.useEffect)(() => {
+    if (!hasVendor || !sessionId) return void 0;
+    const fetchVendorStatus = async interval2 => {
+      try {
+        const response = await api.get((0, _ufo.joinURL)(prefix, `/api/vendors/order/${sessionId}/status`), {});
+        const allCompleted = response.data?.vendors?.every(vendor => vendor.progress >= 80);
+        if (allCompleted) {
+          clearInterval(interval2);
+        }
+        setIsAllCompleted(allCompleted);
+        setVendorStatus(response.data);
+      } catch (error) {
+        console.error("Failed to fetch vendor status:", error);
+      }
+    };
+    fetchVendorStatus();
+    const interval = setInterval(() => {
+      fetchVendorStatus(interval);
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [hasVendor, api, prefix, sessionId]);
+  const renderVendorProgress = () => {
+    if (!hasVendor || !vendorStatus) return null;
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Paper, {
+      elevation: 0,
+      sx: {
+        p: 3,
+        backgroundColor: "grey.50",
+        borderRadius: 2,
+        width: "100%",
+        mt: 2,
+        display: "flex",
+        flexDirection: "column",
+        gap: 2
+      },
+      children: [vendorStatus.vendors?.map((vendor, index) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_progressItem.VendorProgressItem, {
+        vendor
+      }, vendor.title || `vendor-${index}`)), pageInfo?.success_message?.[locale] && isAllCompleted ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "h6",
+        sx: {
+          color: "text.primary",
+          mb: 1
+        },
+        children: pageInfo?.success_message?.[locale]
+      }) : null]
+    });
+  };
   if (["subscription", "setup"].includes(action)) {
     if (subscriptions && subscriptions.length > 1) {
       next = /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Paper, {
@@ -142,7 +198,7 @@ function PaymentSuccess({
         children: t("payment.checkout.completed.tip", {
           payee
         })
-      }), next]
+      }), renderVendorProgress(), next]
     })
   });
 }