@blocklet/payment-react 1.25.10 → 1.26.1

package/es/checkout-v2/utils/format.d.ts

@@ -0,0 +1,59 @@
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+export declare const INTERVAL_LOCALE_KEY: Record<string, string>;
+export declare function countryCodeToFlag(code: string): string;
+export declare function formatTokenAmount(unitAmount: string | number | bigint, currency: TPaymentCurrency | null): string;
+interface CurrencyOption {
+    currency_id: string;
+    unit_amount: string;
+    custom_unit_amount?: {
+        preset?: string;
+        presets?: string[];
+    } | null;
+}
+interface PriceWithDynamic {
+    pricing_type?: string;
+    base_amount?: string;
+    unit_amount?: string;
+    base_currency?: string;
+    currency_id?: string;
+    currency_options?: CurrencyOption[];
+    price_currency_options?: CurrencyOption[];
+}
+export declare function getUnitAmountForCurrency(price: PriceWithDynamic | null | undefined, currency: TPaymentCurrency | null): string;
+export declare function formatDynamicUnitPrice(price: PriceWithDynamic | null | undefined, currency: TPaymentCurrency | null, exchangeRate: string | null): string | null;
+export declare function tSafe(t: (key: string, params?: any) => string, key: string, fallback: string): string;
+export declare const whiteTooltipSx: {
+    '& .MuiTooltip-tooltip': {
+        bgcolor: string;
+        color: string;
+        border: string;
+        borderColor: string;
+        borderRadius: string;
+        boxShadow: string;
+        p: number;
+        maxWidth: number;
+        fontSize: number;
+    };
+    '& .MuiTooltip-arrow': {
+        color: string;
+        '&::before': {
+            border: string;
+            borderColor: string;
+        };
+    };
+};
+export declare function formatTrialText(t: (key: string) => string, days: number, interval: string): string;
+type TFn = (key: string, params?: Record<string, any>) => string;
+export type ItemTypeBadge = 'subscription' | 'topup' | 'oneTime';
+interface ItemMeta {
+    badge: ItemTypeBadge;
+    badgeLabel: string;
+    title: string;
+    subtitle: string;
+}
+/**
+ * Derive structured badge / title / subtitle for a checkout session header.
+ * Works for the "primary product" header above the item list.
+ */
+export declare function getSessionHeaderMeta(t: TFn, session: any, product: any, items: any[]): ItemMeta;
+export {};

package/es/checkout-v2/utils/format.js

@@ -0,0 +1,125 @@
+import { fromUnitToToken } from "@ocap/util";
+export const INTERVAL_LOCALE_KEY = {
+  day: "common.daily",
+  week: "common.weekly",
+  month: "common.monthly",
+  year: "common.yearly"
+};
+export function countryCodeToFlag(code) {
+  if (!code || code.length !== 2) return "";
+  return String.fromCodePoint(
+    ...code.toUpperCase().split("").map((c) => 127397 + c.charCodeAt(0))
+  );
+}
+export function formatTokenAmount(unitAmount, currency) {
+  if (!unitAmount || !currency) return "0";
+  try {
+    const tokenAmount = fromUnitToToken(String(unitAmount), currency.decimal || 0);
+    const num = Number(tokenAmount);
+    if (!Number.isFinite(num)) return "0";
+    const abs = Math.abs(num);
+    const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+    const formatted = num.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: precision });
+    return formatted.replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0";
+  } catch {
+    return "0";
+  }
+}
+export function getUnitAmountForCurrency(price, currency) {
+  if (!price || !currency) return "0";
+  const options = price.price_currency_options || price.currency_options || [];
+  const option = options.find((x) => x.currency_id === currency.id);
+  if (option) {
+    if (option.custom_unit_amount) {
+      return option.custom_unit_amount.preset || option.custom_unit_amount.presets?.[0] || option.unit_amount;
+    }
+    return option.unit_amount;
+  }
+  if (price.currency_id === currency.id) {
+    return price.unit_amount || "0";
+  }
+  return "0";
+}
+export function formatDynamicUnitPrice(price, currency, exchangeRate) {
+  if (!price || !currency) return null;
+  const isDynamic = price.pricing_type === "dynamic";
+  if (isDynamic && exchangeRate && price.base_amount) {
+    const rate = Number(exchangeRate);
+    if (rate > 0 && Number.isFinite(rate)) {
+      const baseUsd = Number(price.base_amount);
+      if (baseUsd > 0 && Number.isFinite(baseUsd)) {
+        const tokenAmount = baseUsd / rate;
+        const abs = Math.abs(tokenAmount);
+        const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+        return tokenAmount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: precision }).replace(/(\.\d*?)0+$/, "$1").replace(/\.$/, "") || "0";
+      }
+    }
+  }
+  if (!exchangeRate && price.base_amount != null) {
+    const baseUsd = Number(price.base_amount);
+    if (baseUsd >= 0 && Number.isFinite(baseUsd)) {
+      return baseUsd.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+  }
+  return formatTokenAmount(getUnitAmountForCurrency(price, currency), currency);
+}
+export function tSafe(t, key, fallback) {
+  const v = t(key);
+  return v && !v.includes(".") ? v : fallback;
+}
+export const whiteTooltipSx = {
+  "& .MuiTooltip-tooltip": {
+    bgcolor: "background.paper",
+    color: "text.primary",
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: "10px",
+    boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+    p: 1.5,
+    maxWidth: 280,
+    fontSize: 12
+  },
+  "& .MuiTooltip-arrow": {
+    color: "background.paper",
+    "&::before": { border: "1px solid", borderColor: "divider" }
+  }
+};
+export function formatTrialText(t, days, interval) {
+  const intervalLabel = t(`common.${interval || "day"}`);
+  return `${days} ${intervalLabel}${days > 1 ? "s" : ""} free`;
+}
+export function getSessionHeaderMeta(t, session, product, items) {
+  const mode = session?.mode || "payment";
+  const isSubscription = ["subscription", "setup"].includes(mode);
+  const isCreditTopup = items.length === 1 && mode === "payment" && items[0]?.price?.product?.type === "credit" && items[0]?.price?.metadata?.credit_config;
+  let badge;
+  if (isCreditTopup) {
+    badge = "topup";
+  } else if (isSubscription) {
+    badge = "subscription";
+  } else {
+    badge = "oneTime";
+  }
+  const badgeLabel = t(`payment.checkout.typeBadge.${badge}`);
+  const productName = product?.name || items[0]?.price?.product?.name || "";
+  let title = productName;
+  if (productName) {
+    if (isSubscription) {
+      title = t("payment.checkout.headerTitle.subscribe", { name: productName });
+    } else if (!isCreditTopup) {
+      title = t("payment.checkout.headerTitle.purchase", { name: productName });
+    }
+  }
+  let subtitle = "";
+  if (isCreditTopup) {
+    subtitle = t("payment.checkout.subtitle.creditsTopup");
+  } else if (isSubscription) {
+    const planName = product?.metadata?.plan_name || product?.metadata?.plan_display_name;
+    if (planName) {
+      subtitle = planName;
+    }
+  } else {
+    subtitle = t("payment.checkout.subtitle.oneTime");
+  }
+  return { badge, badgeLabel, title, subtitle };
+}

package/es/checkout-v2/utils/scenario-detector.d.ts

@@ -0,0 +1,3 @@
+import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@blocklet/payment-types';
+import type { CheckoutScenario } from '../types';
+export declare function detectScenario(session: TCheckoutSessionExpanded | null | undefined, items: TLineItemExpanded[]): CheckoutScenario;

package/es/checkout-v2/utils/scenario-detector.js

@@ -0,0 +1,17 @@
+export function detectScenario(session, items) {
+  if (!session) return "composite";
+  const isSingleItem = items.length === 1;
+  const isPaymentMode = session.mode === "payment";
+  const isSubscriptionMode = ["subscription", "setup"].includes(session.mode || "");
+  if (isSingleItem && isPaymentMode) {
+    const item = items[0];
+    const product = item.price?.product;
+    if (product?.type === "credit" && item.price?.metadata?.credit_config) {
+      return "credit-topup";
+    }
+  }
+  if (isSingleItem && isSubscriptionMode && !items.some((i) => i.cross_sell)) {
+    return "subscription";
+  }
+  return "composite";
+}

package/es/checkout-v2/views/error-view.d.ts

@@ -0,0 +1,7 @@
+interface ErrorViewProps {
+    error: string;
+    errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+    mode?: string;
+}
+export default function ErrorView({ error, errorCode, mode }: ErrorViewProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import Header from "@blocklet/ui-react/lib/Header";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+function GeometricDecoration() {
+  const theme = useTheme();
+  const gridColor = alpha(theme.palette.primary.main, 0.06);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        width: { xs: 200, md: 260 },
+        height: { xs: 200, md: 260 },
+        mb: { xs: 4, md: 6 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+              background: (t) => `linear-gradient(45deg, ${alpha(t.palette.primary.main, 0.1)}, ${alpha(t.palette.primary.main, 0.03)})`,
+              filter: "blur(1px)",
+              animation: "spin 20s linear infinite",
+              "@keyframes spin": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+              background: (t) => `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.07)}, ${alpha(t.palette.primary.main, 0.01)})`,
+              filter: "blur(1px)",
+              transform: "scale(0.88)",
+              opacity: 0.6,
+              animation: "spinReverse 15s linear infinite",
+              "@keyframes spinReverse": {
+                from: { transform: "scale(0.88) rotate(0deg)" },
+                to: { transform: "scale(0.88) rotate(-360deg)" }
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+              overflow: "hidden",
+              animation: "spin 20s linear infinite"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height: "100%",
+                viewBox: "0 0 260 260",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                style: { position: "absolute", inset: 0 },
+                children: [
+                  [52, 87, 122, 157, 192].map((y) => /* @__PURE__ */ jsx("line", { x1: "30", y1: y, x2: "230", y2: y, stroke: gridColor, strokeWidth: "0.5" }, `h${y}`)),
+                  [52, 87, 122, 157, 192].map((x) => /* @__PURE__ */ jsx("line", { x1: x, y1: "30", x2: x, y2: "230", stroke: gridColor, strokeWidth: "0.5" }, `v${x}`)),
+                  /* @__PURE__ */ jsx("line", { x1: "52", y1: "52", x2: "192", y2: "192", stroke: gridColor, strokeWidth: "0.5" }),
+                  /* @__PURE__ */ jsx("line", { x1: "192", y1: "52", x2: "52", y2: "192", stroke: gridColor, strokeWidth: "0.5" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "130", cy: "130", r: "40", stroke: gridColor, strokeWidth: "0.5" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "130", cy: "130", r: "75", stroke: gridColor, strokeWidth: "0.5" }),
+                  [
+                    [122, 87],
+                    [157, 87],
+                    [87, 122],
+                    [122, 122],
+                    [157, 122],
+                    [192, 122],
+                    [87, 157],
+                    [122, 157],
+                    [157, 157],
+                    [122, 192],
+                    [157, 192]
+                  ].map(([cx, cy]) => /* @__PURE__ */ jsx("circle", { cx, cy, r: "1.5", fill: gridColor }, `d${cx}-${cy}`))
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function getErrorConfig(errorCode, error, t) {
+  if (errorCode === "SESSION_EXPIRED") {
+    return {
+      title: t("payment.checkout.expired.title"),
+      description: t("payment.checkout.expired.description"),
+      color: "#f59e0b"
+    };
+  }
+  if (errorCode === "EMPTY_LINE_ITEMS") {
+    return {
+      title: t("payment.checkout.emptyItems.title"),
+      description: t("payment.checkout.emptyItems.description"),
+      color: "#94a3b8"
+    };
+  }
+  return {
+    title: t("payment.checkout.error.title"),
+    description: error,
+    color: "#ef4444"
+  };
+}
+function ErrorContent({ error, errorCode = void 0 }) {
+  const { t } = useLocaleContext();
+  const theme = useTheme();
+  const { title, description } = getErrorConfig(errorCode, error, t);
+  const primaryColor = theme.palette.primary.main;
+  const appUrl = typeof window !== "undefined" ? window.blocklet?.appUrl : "/";
+  return /* @__PURE__ */ jsxs(Stack, { alignItems: "center", justifyContent: "center", sx: { flex: 1, textAlign: "center", px: 3 }, children: [
+    /* @__PURE__ */ jsx(GeometricDecoration, {}),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "h1",
+        sx: {
+          fontWeight: 800,
+          fontSize: { xs: 36, md: 52 },
+          lineHeight: 1.05,
+          letterSpacing: "-0.03em",
+          color: "text.primary",
+          mb: 2
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        sx: {
+          color: "text.secondary",
+          fontSize: { xs: 15, md: 17 },
+          fontWeight: 300,
+          lineHeight: 1.7,
+          maxWidth: 420,
+          letterSpacing: "0.01em"
+        },
+        children: description
+      }
+    ),
+    appUrl && /* @__PURE__ */ jsx(
+      Button,
+      {
+        href: appUrl,
+        variant: "contained",
+        disableElevation: true,
+        startIcon: /* @__PURE__ */ jsx(ArrowBackIcon, { sx: { fontSize: "20px !important" } }),
+        sx: {
+          mt: 5,
+          minWidth: 240,
+          height: 56,
+          px: 6,
+          borderRadius: "9999px",
+          textTransform: "none",
+          fontWeight: 600,
+          fontSize: 16,
+          letterSpacing: "0.02em",
+          boxShadow: `0 8px 32px -4px ${alpha(primaryColor, 0.3)}`,
+          "&:hover": {
+            boxShadow: `0 12px 40px -4px ${alpha(primaryColor, 0.4)}`,
+            transform: "translateY(-1px)"
+          },
+          transition: "all 0.2s ease"
+        },
+        children: t("common.back")
+      }
+    )
+  ] });
+}
+export default function ErrorView({ error, errorCode = void 0, mode = "inline" }) {
+  const theme = useTheme();
+  const primaryColor = theme.palette.primary.main;
+  const isFullScreen = mode === "standalone";
+  const meshBg = {
+    bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff",
+    backgroundImage: (t) => t.palette.mode === "dark" ? "none" : `radial-gradient(at 0% 0%, ${alpha(primaryColor, 0.06)} 0px, transparent 50%),
+           radial-gradient(at 100% 0%, ${alpha(primaryColor, 0.04)} 0px, transparent 50%),
+           radial-gradient(at 100% 100%, ${alpha(primaryColor, 0.06)} 0px, transparent 50%),
+           radial-gradient(at 0% 100%, rgba(203,213,225,0.3) 0px, transparent 50%)`
+  };
+  if (!isFullScreen) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          width: "100%",
+          minHeight: { xs: 400, md: 520 },
+          maxWidth: 1120,
+          mx: "auto",
+          borderRadius: "16px",
+          overflow: "hidden",
+          boxShadow: 1,
+          border: 1,
+          borderColor: "divider",
+          ...meshBg
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flex: 1,
+              p: { xs: 4, md: 6 },
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ jsx(ErrorContent, { error, errorCode })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: "100vh",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        ...meshBg
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            sx: {
+              position: "absolute",
+              top: 20,
+              left: 0,
+              right: 0,
+              zIndex: 10,
+              background: "transparent",
+              "& .header-container": { height: "auto" }
+            },
+            hideNavMenu: true,
+            brand: null,
+            description: null,
+            addons: (buildIns) => buildIns.filter((addon) => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key))
+          }
+        ),
+        /* @__PURE__ */ jsx(ErrorContent, { error, errorCode })
+      ]
+    }
+  );
+}

package/es/checkout-v2/views/loading-view.d.ts

@@ -0,0 +1,5 @@
+interface LoadingViewProps {
+    mode?: string;
+}
+export default function LoadingView({ mode }: LoadingViewProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,158 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { alpha, useTheme } from "@mui/material/styles";
+import Header from "@blocklet/ui-react/lib/Header";
+function PulsingDots() {
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 2, mt: 4 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        width: 12,
+        height: 12,
+        borderRadius: "50%",
+        bgcolor: "primary.main",
+        opacity: 0.4,
+        animation: `pulse 1.4s ease-in-out ${i * 0.2}s infinite`,
+        "@keyframes pulse": {
+          "0%, 80%, 100%": { transform: "scale(0.6)", opacity: 0.3 },
+          "40%": { transform: "scale(1)", opacity: 0.7 }
+        }
+      }
+    },
+    i
+  )) });
+}
+function LoadingDecoration() {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        width: { xs: 160, md: 200 },
+        height: { xs: 160, md: 200 }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+              background: (t) => `linear-gradient(45deg, ${alpha(t.palette.primary.main, 0.1)}, ${alpha(t.palette.primary.main, 0.03)})`,
+              filter: "blur(1px)",
+              animation: "spin 20s linear infinite",
+              "@keyframes spin": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+              background: (t) => `linear-gradient(135deg, ${alpha(t.palette.primary.main, 0.07)}, ${alpha(t.palette.primary.main, 0.01)})`,
+              filter: "blur(1px)",
+              transform: "scale(0.88)",
+              opacity: 0.6,
+              animation: "spinReverse 15s linear infinite",
+              "@keyframes spinReverse": {
+                from: { transform: "scale(0.88) rotate(0deg)" },
+                to: { transform: "scale(0.88) rotate(-360deg)" }
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export default function LoadingView({ mode = "inline" }) {
+  const isFullScreen = mode === "standalone";
+  const theme = useTheme();
+  const primaryColor = theme.palette.primary.main;
+  const bgSx = {
+    background: {
+      xs: "none",
+      md: `linear-gradient(160deg, ${alpha(primaryColor, 0.03)} 0%, ${alpha(primaryColor, 0.07)} 50%, ${alpha(primaryColor, 0.04)} 100%)`
+    },
+    bgcolor: (t) => t.palette.mode === "dark" ? "background.default" : "#f8faff"
+  };
+  const centerContent = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flex: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(LoadingDecoration, {}),
+        /* @__PURE__ */ jsx(PulsingDots, {})
+      ]
+    }
+  );
+  if (!isFullScreen) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          width: "100%",
+          minHeight: { xs: 400, md: 640 },
+          maxWidth: 1120,
+          mx: "auto",
+          borderRadius: "16px",
+          overflow: "hidden",
+          boxShadow: 1,
+          border: 1,
+          borderColor: "divider",
+          borderLeft: "4px solid",
+          borderLeftColor: "primary.main",
+          ...bgSx
+        },
+        children: centerContent
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        height: "100vh",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        ...bgSx
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            sx: {
+              position: "absolute",
+              top: 20,
+              left: 0,
+              right: 0,
+              zIndex: 10,
+              background: "transparent",
+              "& .header-container": { height: "auto" }
+            },
+            hideNavMenu: true,
+            brand: null,
+            description: null,
+            addons: (buildIns) => buildIns.filter((addon) => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key))
+          }
+        ),
+        centerContent
+      ]
+    }
+  );
+}

package/es/checkout-v2/views/success-view.d.ts

@@ -0,0 +1,29 @@
+import type { TCheckoutSessionExpanded } from '@blocklet/payment-types';
+interface VendorInfo {
+    success: boolean;
+    status: 'delivered' | 'pending' | 'failed';
+    progress: number;
+    message: string;
+    appUrl?: string;
+    title?: string;
+    name?: string;
+    vendorType: string;
+}
+interface SuccessViewProps {
+    submit: {
+        vendorStatus: {
+            payment_status: string;
+            session_status: string;
+            vendors: VendorInfo[];
+            error: string | null;
+            isAllCompleted: boolean;
+            hasFailed: boolean;
+        } | null;
+        result: {
+            checkoutSession: TCheckoutSessionExpanded;
+        } | null;
+    };
+    session: TCheckoutSessionExpanded | null | undefined;
+}
+export default function SuccessView({ submit, session }: SuccessViewProps): import("react").JSX.Element;
+export {};