@blocklet/payment-react 1.25.9 → 1.26.0

package/src/checkout-v2/types.ts

@@ -0,0 +1,18 @@
+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/src/checkout-v2/utils/format.ts

@@ -0,0 +1,204 @@
+import { fromUnitToToken } from '@ocap/util';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+
+// Interval key → locale key mapping
+export const INTERVAL_LOCALE_KEY: Record<string, string> = {
+  day: 'common.daily',
+  week: 'common.weekly',
+  month: 'common.monthly',
+  year: 'common.yearly',
+};
+
+// Convert ISO2 country code to flag emoji (e.g., "us" → "🇺🇸")
+export function countryCodeToFlag(code: string): string {
+  if (!code || code.length !== 2) return '';
+  return String.fromCodePoint(
+    ...code
+      .toUpperCase()
+      .split('')
+      .map((c) => 127397 + c.charCodeAt(0))
+  );
+}
+
+export function formatTokenAmount(unitAmount: string | number | bigint, currency: TPaymentCurrency | null): string {
+  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(/\.?0+$/, '') || '0';
+  } catch {
+    return '0';
+  }
+}
+
+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[];
+}
+
+// Get the unit_amount for a specific currency, checking currency_options first
+export function getUnitAmountForCurrency(
+  price: PriceWithDynamic | null | undefined,
+  currency: TPaymentCurrency | null
+): string {
+  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';
+}
+
+// Format price with exchange rate for dynamic pricing
+export function formatDynamicUnitPrice(
+  price: PriceWithDynamic | null | undefined,
+  currency: TPaymentCurrency | null,
+  exchangeRate: string | null
+): string | null {
+  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'
+        );
+      }
+    }
+  }
+  // Fiat/Stripe fallback: use base_amount when no exchange rate
+  // (unit_amount may be in crypto denomination, not fiat cents)
+  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 });
+    }
+  }
+  // Fallback: look up unit_amount from currency_options for the selected currency
+  return formatTokenAmount(getUnitAmountForCurrency(price, currency), currency);
+}
+
+// Safe translation with fallback for missing keys (returns fallback if t() returns the raw key path)
+export function tSafe(t: (key: string, params?: any) => string, key: string, fallback: string): string {
+  const v = t(key);
+  return v && !v.includes('.') ? v : fallback;
+}
+
+// Shared white tooltip style for checkout-v2
+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' },
+  },
+};
+
+// Helper: format trial text
+export function formatTrialText(t: (key: string) => string, days: number, interval: string): string {
+  const intervalLabel = t(`common.${interval || 'day'}`);
+  return `${days} ${intervalLabel}${days > 1 ? 's' : ''} free`;
+}
+
+// ── Item meta: badge / title / subtitle for the header area ──
+
+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 function getSessionHeaderMeta(t: TFn, session: any, product: any, items: any[]): ItemMeta {
+  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;
+
+  // Badge
+  let badge: ItemTypeBadge;
+  if (isCreditTopup) {
+    badge = 'topup';
+  } else if (isSubscription) {
+    badge = 'subscription';
+  } else {
+    badge = 'oneTime';
+  }
+  const badgeLabel = t(`payment.checkout.typeBadge.${badge}`);
+
+  // Title: action + product name based on type
+  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 });
+    }
+  }
+
+  // Subtitle: system-generated, not product.description
+  let subtitle = '';
+  if (isCreditTopup) {
+    subtitle = t('payment.checkout.subtitle.creditsTopup');
+  } else if (isSubscription) {
+    // Use plan name if available; skip generic interval labels like "daily subscription"
+    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/src/checkout-v2/utils/scenario-detector.ts

@@ -0,0 +1,30 @@
+import type { TCheckoutSessionExpanded, TLineItemExpanded } from '@blocklet/payment-types';
+import type { CheckoutScenario } from '../types';
+
+export function detectScenario(
+  session: TCheckoutSessionExpanded | null | undefined,
+  items: TLineItemExpanded[]
+): CheckoutScenario {
+  if (!session) return 'composite';
+
+  const isSingleItem = items.length === 1;
+  const isPaymentMode = session.mode === 'payment';
+  const isSubscriptionMode = ['subscription', 'setup'].includes(session.mode || '');
+
+  // Credit: single item + payment mode + product.type=credit + metadata.credit_config
+  if (isSingleItem && isPaymentMode) {
+    const item = items[0];
+    const product = (item as any).price?.product;
+    if (product?.type === 'credit' && (item as any).price?.metadata?.credit_config) {
+      return 'credit-topup';
+    }
+  }
+
+  // Subscription: single item + subscription/setup + no cross-sell
+  if (isSingleItem && isSubscriptionMode && !items.some((i: any) => i.cross_sell)) {
+    return 'subscription';
+  }
+
+  // Default: composite
+  return 'composite';
+}

package/src/checkout-v2/views/error-view.tsx

@@ -0,0 +1,293 @@
+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';
+
+interface ErrorViewProps {
+  error: string;
+  errorCode?: 'SESSION_EXPIRED' | 'EMPTY_LINE_ITEMS' | null;
+  mode?: string;
+}
+
+// Geometric decoration — organic blobs with embedded wireframe mesh
+function GeometricDecoration() {
+  const theme = useTheme();
+  const gridColor = alpha(theme.palette.primary.main, 0.06);
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: { xs: 200, md: 260 },
+        height: { xs: 200, md: 260 },
+        mb: { xs: 4, md: 6 },
+      }}>
+      {/* Blob layer 1 */}
+      <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)' } },
+        }}
+      />
+      {/* Blob layer 2 */}
+      <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)' },
+          },
+        }}
+      />
+      {/* Wireframe mesh overlay — clipped to blob shape */}
+      <Box
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: '38% 62% 63% 37% / 41% 44% 56% 59%',
+          overflow: 'hidden',
+          animation: 'spin 20s linear infinite',
+        }}>
+        <svg
+          width="100%"
+          height="100%"
+          viewBox="0 0 260 260"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          style={{ position: 'absolute', inset: 0 }}>
+          {/* Horizontal lines */}
+          {[52, 87, 122, 157, 192].map((y) => (
+            <line key={`h${y}`} x1="30" y1={y} x2="230" y2={y} stroke={gridColor} strokeWidth="0.5" />
+          ))}
+          {/* Vertical lines */}
+          {[52, 87, 122, 157, 192].map((x) => (
+            <line key={`v${x}`} x1={x} y1="30" x2={x} y2="230" stroke={gridColor} strokeWidth="0.5" />
+          ))}
+          {/* Diagonal accents — sparse, adds depth */}
+          <line x1="52" y1="52" x2="192" y2="192" stroke={gridColor} strokeWidth="0.5" />
+          <line x1="192" y1="52" x2="52" y2="192" stroke={gridColor} strokeWidth="0.5" />
+          {/* Concentric circles — digital radar feel */}
+          <circle cx="130" cy="130" r="40" stroke={gridColor} strokeWidth="0.5" />
+          <circle cx="130" cy="130" r="75" stroke={gridColor} strokeWidth="0.5" />
+          {/* Dot nodes at key intersections */}
+          {[
+            [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]) => (
+            <circle key={`d${cx}-${cy}`} cx={cx} cy={cy} r="1.5" fill={gridColor} />
+          ))}
+        </svg>
+      </Box>
+    </Box>
+  );
+}
+
+function getErrorConfig(
+  errorCode: ErrorViewProps['errorCode'],
+  error: string,
+  t: (key: string) => string
+): { title: string; description: string; color: string } {
+  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 = undefined }: { error: string; errorCode?: ErrorViewProps['errorCode'] }) {
+  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 as any).blocklet?.appUrl : '/';
+
+  return (
+    <Stack alignItems="center" justifyContent="center" sx={{ flex: 1, textAlign: 'center', px: 3 }}>
+      {/* Geometric decoration */}
+      <GeometricDecoration />
+
+      {/* Title */}
+      <Typography
+        component="h1"
+        sx={{
+          fontWeight: 800,
+          fontSize: { xs: 36, md: 52 },
+          lineHeight: 1.05,
+          letterSpacing: '-0.03em',
+          color: 'text.primary',
+          mb: 2,
+        }}>
+        {title}
+      </Typography>
+
+      {/* Description */}
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          fontSize: { xs: 15, md: 17 },
+          fontWeight: 300,
+          lineHeight: 1.7,
+          maxWidth: 420,
+          letterSpacing: '0.01em',
+        }}>
+        {description}
+      </Typography>
+
+      {/* CTA button — large pill with primary bg */}
+      {appUrl && (
+        <Button
+          href={appUrl}
+          variant="contained"
+          disableElevation
+          startIcon={<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',
+          }}>
+          {t('common.back')}
+        </Button>
+      )}
+    </Stack>
+  );
+}
+
+export default function ErrorView({ error, errorCode = undefined, mode = 'inline' }: ErrorViewProps) {
+  const theme = useTheme();
+  const primaryColor = theme.palette.primary.main;
+  const isFullScreen = mode === 'standalone';
+
+  // Mesh gradient background (matching reference Version 2)
+  const meshBg = {
+    bgcolor: (t: any) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
+    backgroundImage: (t: any) =>
+      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) {
+    // Inline (card) mode
+    return (
+      <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,
+        }}>
+        <Box
+          sx={{
+            flex: 1,
+            p: { xs: 4, md: 6 },
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}>
+          <ErrorContent error={error} errorCode={errorCode} />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Standalone (full-screen) mode
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100vh',
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        overflow: 'hidden',
+        ...meshBg,
+      }}>
+      {/* Header */}
+      <Header
+        sx={{
+          position: 'absolute',
+          top: 20,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+          background: 'transparent',
+          '& .header-container': { height: 'auto' },
+        }}
+        hideNavMenu
+        brand={null}
+        description={null}
+        addons={(buildIns: any) =>
+          buildIns.filter((addon: any) => ['locale-selector', 'theme-mode-toggle', 'session-user'].includes(addon.key))
+        }
+      />
+
+      {/* Centered error content */}
+      <ErrorContent error={error} errorCode={errorCode} />
+    </Box>
+  );
+}