@blocklet/payment-react 1.25.9 → 1.26.0

package/lib/checkout-v2/types.d.ts

@@ -0,0 +1,15 @@
+import type { ThemeOptions, SxProps } from '@mui/material';
+import type { LiteralUnion } from 'type-fest';
+export type CheckoutScenario = 'credit-topup' | 'subscription' | 'composite';
+export type PaymentThemeOptions = ThemeOptions & {
+    sx?: SxProps;
+};
+export interface CheckoutV2Props {
+    id: string;
+    onPaid?: (result: any) => void;
+    onError?: (err: Error) => void;
+    goBack?: () => void;
+    theme?: 'default' | 'inherit' | PaymentThemeOptions;
+    mode?: LiteralUnion<'standalone' | 'inline', string>;
+    extraParams?: Record<string, string>;
+}

package/lib/checkout-v2/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/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/lib/checkout-v2/utils/format.js

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INTERVAL_LOCALE_KEY = void 0;
+exports.countryCodeToFlag = countryCodeToFlag;
+exports.formatDynamicUnitPrice = formatDynamicUnitPrice;
+exports.formatTokenAmount = formatTokenAmount;
+exports.formatTrialText = formatTrialText;
+exports.getSessionHeaderMeta = getSessionHeaderMeta;
+exports.getUnitAmountForCurrency = getUnitAmountForCurrency;
+exports.tSafe = tSafe;
+exports.whiteTooltipSx = void 0;
+var _util = require("@ocap/util");
+const INTERVAL_LOCALE_KEY = exports.INTERVAL_LOCALE_KEY = {
+  day: "common.daily",
+  week: "common.weekly",
+  month: "common.monthly",
+  year: "common.yearly"
+};
+function countryCodeToFlag(code) {
+  if (!code || code.length !== 2) return "";
+  return String.fromCodePoint(...code.toUpperCase().split("").map(c => 127397 + c.charCodeAt(0)));
+}
+function formatTokenAmount(unitAmount, currency) {
+  if (!unitAmount || !currency) return "0";
+  try {
+    const tokenAmount = (0, _util.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(/\.?0+$/, "") || "0";
+  } catch {
+    return "0";
+  }
+}
+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";
+}
+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(/\.?0+$/, "") || "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);
+}
+function tSafe(t, key, fallback) {
+  const v = t(key);
+  return v && !v.includes(".") ? v : fallback;
+}
+const whiteTooltipSx = exports.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"
+    }
+  }
+};
+function formatTrialText(t, days, interval) {
+  const intervalLabel = t(`common.${interval || "day"}`);
+  return `${days} ${intervalLabel}${days > 1 ? "s" : ""} free`;
+}
+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/lib/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/lib/checkout-v2/utils/scenario-detector.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectScenario = detectScenario;
+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/lib/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/lib/checkout-v2/views/error-view.js

@@ -0,0 +1,321 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = ErrorView;
+var _jsxRuntime = require("react/jsx-runtime");
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
+var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function GeometricDecoration() {
+  const theme = (0, _styles.useTheme)();
+  const gridColor = (0, _styles.alpha)(theme.palette.primary.main, 0.06);
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      position: "relative",
+      width: {
+        xs: 200,
+        md: 260
+      },
+      height: {
+        xs: 200,
+        md: 260
+      },
+      mb: {
+        xs: 4,
+        md: 6
+      }
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+        background: t => `linear-gradient(45deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.1)}, ${(0, _styles.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+        background: t => `linear-gradient(135deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.07)}, ${(0, _styles.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
+        overflow: "hidden",
+        animation: "spin 20s linear infinite"
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.jsx)("line", {
+          x1: x,
+          y1: "30",
+          x2: x,
+          y2: "230",
+          stroke: gridColor,
+          strokeWidth: "0.5"
+        }, `v${x}`)), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
+          x1: "52",
+          y1: "52",
+          x2: "192",
+          y2: "192",
+          stroke: gridColor,
+          strokeWidth: "0.5"
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
+          x1: "192",
+          y1: "52",
+          x2: "52",
+          y2: "192",
+          stroke: gridColor,
+          strokeWidth: "0.5"
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
+          cx: "130",
+          cy: "130",
+          r: "40",
+          stroke: gridColor,
+          strokeWidth: "0.5"
+        }), /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.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
+  } = (0, _context.useLocaleContext)();
+  const theme = (0, _styles.useTheme)();
+  const {
+    title,
+    description
+  } = getErrorConfig(errorCode, error, t);
+  const primaryColor = theme.palette.primary.main;
+  const appUrl = typeof window !== "undefined" ? window.blocklet?.appUrl : "/";
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    alignItems: "center",
+    justifyContent: "center",
+    sx: {
+      flex: 1,
+      textAlign: "center",
+      px: 3
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(GeometricDecoration, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      sx: {
+        color: "text.secondary",
+        fontSize: {
+          xs: 15,
+          md: 17
+        },
+        fontWeight: 300,
+        lineHeight: 1.7,
+        maxWidth: 420,
+        letterSpacing: "0.01em"
+      },
+      children: description
+    }), appUrl && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+      href: appUrl,
+      variant: "contained",
+      disableElevation: true,
+      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowBack.default, {
+        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 ${(0, _styles.alpha)(primaryColor, 0.3)}`,
+        "&:hover": {
+          boxShadow: `0 12px 40px -4px ${(0, _styles.alpha)(primaryColor, 0.4)}`,
+          transform: "translateY(-1px)"
+        },
+        transition: "all 0.2s ease"
+      },
+      children: t("common.back")
+    })]
+  });
+}
+function ErrorView({
+  error,
+  errorCode = void 0,
+  mode = "inline"
+}) {
+  const theme = (0, _styles.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%, ${(0, _styles.alpha)(primaryColor, 0.06)} 0px, transparent 50%),
+           radial-gradient(at 100% 0%, ${(0, _styles.alpha)(primaryColor, 0.04)} 0px, transparent 50%),
+           radial-gradient(at 100% 100%, ${(0, _styles.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+          flex: 1,
+          p: {
+            xs: 4,
+            md: 6
+          },
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorContent, {
+          error,
+          errorCode
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+    sx: {
+      width: "100%",
+      height: "100vh",
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      position: "relative",
+      overflow: "hidden",
+      ...meshBg
+    },
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
+      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__ */(0, _jsxRuntime.jsx)(ErrorContent, {
+      error,
+      errorCode
+    })]
+  });
+}

package/lib/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 {};