@blocklet/payment-react 1.25.10 → 1.26.0

package/src/checkout-v2/components/right/subscription-disclaimer.tsx

@@ -0,0 +1,27 @@
+import { Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+
+interface SubscriptionDisclaimerProps {
+  mode: string;
+  subscription: {
+    confirmMessage: string;
+    showStake: boolean;
+  } | null;
+  staking: string | null;
+  appName: string;
+}
+
+export default function SubscriptionDisclaimer({ mode, subscription, staking, appName }: SubscriptionDisclaimerProps) {
+  const { t } = useLocaleContext();
+
+  if (!['subscription', 'setup'].includes(mode) || !subscription) return null;
+
+  return (
+    <Typography sx={{ mt: 2.5, color: 'text.secondary', fontSize: '0.7875rem', lineHeight: '0.9625rem' }}>
+      {subscription.confirmMessage ||
+        (subscription.showStake && staking
+          ? t('payment.checkout.confirm.withStake', { payee: appName || 'New Payment Kit' })
+          : t('payment.checkout.confirm.withoutStake', { payee: appName || 'New Payment Kit' }))}
+    </Typography>
+  );
+}

package/src/checkout-v2/components/shared/exchange-rate-footer.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useState } from 'react';
+import TuneIcon from '@mui/icons-material/Tune';
+import { Box, Dialog, DialogContent, DialogTitle, Fade, Stack, Tooltip, Typography, keyframes } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import SlippageConfig from '../../../components/slippage-config';
+import { whiteTooltipSx } from '../../utils/format';
+
+const ping = keyframes`
+  75%, 100% { transform: scale(2); opacity: 0; }
+`;
+
+function formatDateTime(ts: number | null): string {
+  if (!ts) return '—';
+  const d = new Date(ts);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+interface ExchangeRateFooterProps {
+  hasDynamicPricing: boolean;
+  rate: {
+    value: string | null;
+    display: string | null;
+    provider: string | null;
+    providerDisplay: string | null;
+    fetchedAt: number | null;
+    status: 'loading' | 'available' | 'unavailable';
+  };
+  slippage: {
+    percent: number;
+    set: (config: { mode: string; percent: number; base_currency?: string }) => Promise<void>;
+  };
+  currencySymbol: string;
+  isSubscription: boolean;
+}
+
+export default function ExchangeRateFooter({
+  hasDynamicPricing,
+  rate,
+  slippage,
+  currencySymbol,
+  isSubscription,
+}: ExchangeRateFooterProps) {
+  const { t } = useLocaleContext();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [pendingConfig, setPendingConfig] = useState<{ mode: 'percent' | 'rate'; percent: number } | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Optimistic local slippage — sync from prop, update immediately on save
+  const [localSlippage, setLocalSlippage] = useState(slippage?.percent ?? 0.5);
+  useEffect(() => {
+    setLocalSlippage(slippage?.percent ?? 0.5);
+  }, [slippage?.percent]);
+
+  if (!hasDynamicPricing || !rate.value || rate.status === 'unavailable') return null;
+
+  // Use pre-formatted display (e.g. "$0.19") — no redundant "USD" suffix
+  const rateDisplay = rate.display || `$${Number(rate.value).toFixed(2)}`;
+  const showSlippage = isSubscription && typeof slippage?.set === 'function';
+
+  const handleOpenDialog = () => {
+    setPendingConfig({ mode: 'percent', percent: localSlippage });
+    setDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setPendingConfig(null);
+  };
+
+  const handleSlippageChange = (value: number) => {
+    setPendingConfig((prev) => (prev ? { ...prev, percent: value } : { mode: 'percent' as const, percent: value }));
+  };
+
+  const handleConfigChange = (config: { mode: 'percent' | 'rate'; percent: number }) => {
+    setPendingConfig(config);
+  };
+
+  const handleSubmit = async () => {
+    if (!pendingConfig || !slippage?.set) return;
+    setSubmitting(true);
+    try {
+      // Optimistic update — show new value immediately
+      setLocalSlippage(pendingConfig.percent);
+      await slippage.set({ ...pendingConfig, base_currency: 'USD' });
+      setDialogOpen(false);
+      setPendingConfig(null);
+    } catch (err) {
+      // Revert on error
+      setLocalSlippage(slippage?.percent ?? 0.5);
+      console.error('Failed to update slippage', err);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const labelSx = {
+    fontSize: 11,
+    fontWeight: 700,
+    color: 'primary.main',
+    letterSpacing: '0.02em',
+  };
+
+  // Hover tooltip content: full rate + provider + update time
+  const providerName = rate.providerDisplay || rate.provider || '—';
+  const updatedAt = formatDateTime(rate.fetchedAt);
+  const fullRate = `$${rate.value}`;
+
+  const tooltipSx = whiteTooltipSx;
+
+  const rowSx = { fontSize: 12, color: 'text.secondary', lineHeight: 1.4 };
+  const valSx = { fontSize: 12, fontWeight: 600, color: 'text.primary', lineHeight: 1.4 };
+
+  const tooltipContent = (
+    <Stack spacing={0.75}>
+      {/* Full precision rate */}
+      <Typography sx={{ fontSize: 13, fontWeight: 700, color: 'text.primary', mb: 0.25 }}>
+        1 {currencySymbol} = {fullRate}
+      </Typography>
+      <Box sx={{ borderTop: '1px solid', borderColor: 'divider', pt: 0.75 }}>
+        <Stack spacing={0.5}>
+          <Stack direction="row" justifyContent="space-between" spacing={2}>
+            <Typography sx={rowSx}>{t('payment.checkout.quote.detailProvider')}</Typography>
+            <Typography sx={valSx}>{providerName}</Typography>
+          </Stack>
+          <Stack direction="row" justifyContent="space-between" spacing={2}>
+            <Typography sx={rowSx}>{t('payment.checkout.quote.detailUpdatedAt')}</Typography>
+            <Typography sx={valSx}>{updatedAt}</Typography>
+          </Stack>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+
+  // Slippage tooltip
+  const slippageTooltip = t('payment.checkout.quote.slippage.tooltip');
+
+  return (
+    <>
+      <Box sx={{ width: '100%', pt: 3, pb: 1, borderTop: '1px solid', borderColor: 'divider' }}>
+        <Fade in timeout={300}>
+          <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+            {/* Rate with hover tooltip showing full rate + provider + update time */}
+            <Tooltip title={tooltipContent} placement="top" arrow slotProps={{ popper: { sx: tooltipSx } }}>
+              <Stack direction="row" alignItems="center" spacing={1} sx={{ cursor: 'default' }}>
+                {/* Ping dot */}
+                <Box sx={{ position: 'relative', width: 8, height: 8, flexShrink: 0 }}>
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      inset: 0,
+                      borderRadius: '50%',
+                      bgcolor: '#60a5fa',
+                      opacity: 0.6,
+                      animation: `${ping} 1s cubic-bezier(0, 0, 0.2, 1) infinite`,
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      position: 'relative',
+                      width: 8,
+                      height: 8,
+                      borderRadius: '50%',
+                      bgcolor: 'primary.main',
+                    }}
+                  />
+                </Box>
+                <Typography sx={labelSx}>
+                  1 {currencySymbol} ≈ {rateDisplay}
+                </Typography>
+              </Stack>
+            </Tooltip>
+
+            {/* Slippage with tooltip + click to configure */}
+            {showSlippage && (
+              <Tooltip title={slippageTooltip} placement="top" arrow slotProps={{ popper: { sx: whiteTooltipSx } }}>
+                <Stack
+                  direction="row"
+                  alignItems="center"
+                  spacing={0.75}
+                  onClick={handleOpenDialog}
+                  sx={{
+                    cursor: 'pointer',
+                    '&:hover': { opacity: 1 },
+                    '&:hover .tune-icon': { transform: 'rotate(90deg)' },
+                    transition: 'opacity 0.2s',
+                  }}>
+                  <TuneIcon
+                    className="tune-icon"
+                    sx={{ fontSize: 16, color: 'primary.main', transition: 'transform 0.5s' }}
+                  />
+                  <Typography sx={labelSx}>
+                    {t('payment.checkout.quote.detailSlippage')} {localSlippage}%
+                  </Typography>
+                </Stack>
+              </Tooltip>
+            )}
+          </Stack>
+        </Fade>
+      </Box>
+
+      <Dialog open={dialogOpen} onClose={handleCloseDialog} maxWidth="sm" fullWidth>
+        <DialogTitle>{t('payment.checkout.quote.slippage.title')}</DialogTitle>
+        <DialogContent>
+          <SlippageConfig
+            value={pendingConfig?.percent ?? localSlippage}
+            onChange={handleSlippageChange}
+            config={pendingConfig || { mode: 'percent' as const, percent: localSlippage }}
+            onConfigChange={handleConfigChange}
+            exchangeRate={rate.value ? String(rate.value) : null}
+            baseCurrency="USD"
+            disabled={submitting}
+            sx={{ mt: 1 }}
+            onCancel={handleCloseDialog}
+            onSave={handleSubmit}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/checkout-v2/components/shared/scenario-badge.tsx

@@ -0,0 +1,51 @@
+import { Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { tSafe } from '../../utils/format';
+
+interface ScenarioBadgeProps {
+  livemode: boolean;
+  label?: string;
+}
+
+export default function ScenarioBadge({ livemode, label = undefined }: ScenarioBadgeProps) {
+  const { t } = useLocaleContext();
+  return (
+    <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.5 }}>
+      <Typography
+        component="span"
+        sx={{
+          fontSize: 10,
+          fontWeight: 700,
+          letterSpacing: '0.1em',
+          lineHeight: 1,
+          textTransform: 'uppercase',
+          color: 'primary.main',
+          bgcolor: (theme) =>
+            theme.palette.mode === 'dark' ? `${theme.palette.primary.main}1A` : `${theme.palette.primary.main}0D`,
+          px: 1,
+          py: 0.5,
+          borderRadius: '4px',
+        }}>
+        {label || tSafe(t, 'payment.checkout.orderSummary', 'Order Summary')}
+      </Typography>
+      {!livemode && (
+        <Typography
+          component="span"
+          sx={{
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: '0.1em',
+            lineHeight: 1,
+            textTransform: 'uppercase',
+            color: (theme) => (theme.palette.mode === 'dark' ? theme.palette.grey[500] : theme.palette.grey[400]),
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : theme.palette.grey[100]),
+            px: 1,
+            py: 0.5,
+            borderRadius: '4px',
+          }}>
+          {t('common.livemode')}
+        </Typography>
+      )}
+    </Stack>
+  );
+}

package/src/checkout-v2/components/shared/total-display.tsx

@@ -0,0 +1,112 @@
+import { Box, Stack, Typography } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { tSafe } from '../../utils/format';
+
+interface TotalDisplayProps {
+  label?: string;
+  total: string;
+  usdEquivalent?: string | null;
+}
+
+// Split a price string like "1,234.56 TBA" into parts for display
+function splitPrice(total: string): { prefix: string; integer: string; decimal: string; suffix: string } {
+  if (!total) return { prefix: '', integer: '0', decimal: '', suffix: '' };
+  const trimmed = total.trim();
+
+  // Handle "$X.XX" format
+  if (trimmed.startsWith('$')) {
+    const numPart = trimmed.slice(1).trim();
+    const dotIdx = numPart.indexOf('.');
+    if (dotIdx >= 0) {
+      return {
+        prefix: '$',
+        integer: numPart.slice(0, dotIdx),
+        decimal: `.${numPart.slice(dotIdx + 1)}`,
+        suffix: '',
+      };
+    }
+    return { prefix: '$', integer: numPart, decimal: '', suffix: '' };
+  }
+
+  // Handle "123.45 TBA" or "0 TBA" format
+  const parts = trimmed.split(/\s+/);
+  const numStr = parts[0] || '0';
+  const unit = parts.slice(1).join(' ');
+  const dotIdx = numStr.indexOf('.');
+  if (dotIdx >= 0) {
+    return {
+      prefix: '',
+      integer: numStr.slice(0, dotIdx),
+      decimal: `.${numStr.slice(dotIdx + 1)}`,
+      suffix: unit,
+    };
+  }
+  return { prefix: '', integer: numStr, decimal: '', suffix: unit };
+}
+
+export default function TotalDisplay({ label = undefined, total, usdEquivalent = undefined }: TotalDisplayProps) {
+  const { t } = useLocaleContext();
+  const { prefix, integer, decimal, suffix } = splitPrice(total);
+
+  return (
+    <Box sx={{ pt: 4, borderTop: '1px solid', borderColor: 'divider' }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="flex-end">
+        {/* Left: label + promo link */}
+        <Stack spacing={0.5} sx={{ pb: 1 }}>
+          <Typography
+            sx={{
+              fontSize: 12,
+              fontWeight: 700,
+              letterSpacing: '0.02em',
+              color: 'text.disabled',
+            }}>
+            {label || tSafe(t, 'payment.checkout.totalDueToday', 'Total due today')}
+          </Typography>
+        </Stack>
+
+        {/* Right: big price */}
+        <Box sx={{ display: 'flex', alignItems: 'baseline', lineHeight: 1 }}>
+          {/* Currency symbol / prefix */}
+          {prefix && (
+            <Typography component="span" sx={{ fontSize: 36, fontWeight: 500, color: 'text.primary', opacity: 0.4 }}>
+              {prefix}
+            </Typography>
+          )}
+          {/* Integer part — extra large */}
+          <Typography
+            component="span"
+            sx={{
+              fontSize: { xs: 54, md: 72 },
+              fontWeight: 800,
+              lineHeight: 1,
+              letterSpacing: '-0.04em',
+              color: 'text.primary',
+            }}>
+            {integer}
+          </Typography>
+          {/* Decimal part — lighter */}
+          {decimal && (
+            <Typography component="span" sx={{ fontSize: 36, fontWeight: 300, color: 'text.primary', opacity: 0.3 }}>
+              {decimal}
+            </Typography>
+          )}
+          {/* Currency unit */}
+          {suffix && (
+            <Typography
+              component="span"
+              sx={{ fontSize: 20, fontWeight: 700, color: 'text.disabled', ml: 1, textTransform: 'uppercase' }}>
+              {suffix}
+            </Typography>
+          )}
+        </Box>
+      </Stack>
+
+      {/* USD equivalent */}
+      {usdEquivalent && (
+        <Typography sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'right', mt: 0.5, fontWeight: 500 }}>
+          ≈ {usdEquivalent}
+        </Typography>
+      )}
+    </Box>
+  );
+}

package/src/checkout-v2/index.ts

@@ -0,0 +1,2 @@
+export { default as CheckoutV2 } from './checkout-v2';
+export type { CheckoutV2Props, CheckoutScenario } from './types';

package/src/checkout-v2/layouts/checkout-layout.tsx

@@ -0,0 +1,232 @@
+import { Box } from '@mui/material';
+import { alpha, useTheme } from '@mui/material/styles';
+import Header from '@blocklet/ui-react/lib/Header';
+import { useMobile } from '../../hooks/mobile';
+
+const hiddenScrollbar = {
+  overflowY: 'auto',
+  '&::-webkit-scrollbar': { display: 'none' },
+  scrollbarWidth: 'none',
+} as const;
+
+// Mobile: whole container fades in
+const mobileFadeIn = {
+  '@keyframes mobileFadeIn': {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+  animation: { xs: 'mobileFadeIn 0.4s ease both', md: 'none' },
+} as const;
+
+// Desktop: left content fades in with slight upward motion
+const fadeIn = {
+  '@keyframes fadeIn': {
+    from: { opacity: 0, transform: 'translateY(12px)' },
+    to: { opacity: 1, transform: 'translateY(0)' },
+  },
+  animation: { xs: 'none', md: 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both' },
+} as const;
+
+// Desktop: right panel slides in from the right
+const slideInFromRight = {
+  '@keyframes slideInRight': {
+    from: { transform: 'translateX(100%)' },
+    to: { transform: 'translateX(0)' },
+  },
+  animation: { xs: 'none', md: 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards' },
+} as const;
+
+interface CheckoutLayoutProps {
+  left: React.ReactNode;
+  right: React.ReactNode;
+  mode?: string;
+}
+
+export default function CheckoutLayout({ left, right, mode = 'inline' }: CheckoutLayoutProps) {
+  const isFullScreen = mode === 'standalone';
+  const { isMobile } = useMobile();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+
+  const hideLeft = left === null;
+
+  // Mobile fixed bottom bar for submit button
+  const mobileSubmitBarSx: Record<string, unknown> = {};
+  if (isMobile && !hideLeft) {
+    mobileSubmitBarSx['& .cko-v2-submit-btn'] = {
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 999,
+      bgcolor: isDark ? 'rgba(30,30,30,0.82)' : 'background.paper',
+      backdropFilter: isDark ? 'blur(12px)' : 'none',
+      p: 1.5,
+      borderTop: '1px solid',
+      borderColor: 'divider',
+      boxShadow: isDark ? '0 -4px 20px rgba(0,0,0,0.4)' : '0 -2px 10px rgba(0,0,0,0.08)',
+    };
+  }
+
+  if (!isFullScreen) {
+    // Card (inline) mode
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          width: '100%',
+          minHeight: { md: 640 },
+          maxWidth: 1120,
+          mx: 'auto',
+          borderRadius: '16px',
+          overflow: 'hidden',
+          boxShadow: 1,
+          border: 1,
+          borderColor: 'divider',
+          borderLeft: '4px solid',
+          borderLeftColor: 'primary.main',
+          // Same bg as left panel so slide-in reveals white over gradient
+          bgcolor: (t) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
+          ...mobileFadeIn,
+        }}>
+        {!hideLeft && (
+          <Box
+            sx={{
+              flex: 1,
+              bgcolor: (t) => (t.palette.mode === 'dark' ? 'background.default' : '#f8faff'),
+              p: { xs: 3, md: 5 },
+              pt: { xs: 3, md: 4 },
+              display: 'flex',
+              flexDirection: 'column',
+              ...fadeIn,
+            }}>
+            {left}
+          </Box>
+        )}
+        <Box
+          sx={{
+            width: hideLeft ? '100%' : { xs: '100%', md: 480 },
+            flexShrink: 0,
+            bgcolor: 'background.paper',
+            p: { xs: 3, md: 4 },
+            pt: { xs: 3, md: 4 },
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: { md: 'hidden' },
+            ...(hideLeft ? {} : slideInFromRight),
+          }}>
+          {right}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Standalone (full-screen) mode — backgrounds fill edge-to-edge, content constrained
+  // Mobile: gray page bg with white card sections; Desktop: gradient bg with slide-in
+  const mobileBg = isDark ? theme.palette.background.default : theme.palette.grey[100];
+  const desktopBg = isDark ? theme.palette.background.default : '#f8faff';
+
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: { xs: 'auto', md: '100vh' },
+        minHeight: { xs: '100vh' },
+        overflow: { md: 'hidden' },
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
+        position: 'relative',
+        // Mobile: solid gray bg; Desktop: gradient over light blue
+        background: isMobile
+          ? mobileBg
+          : `linear-gradient(160deg, ${alpha(theme.palette.primary.main, 0.03)} 0%, ${alpha(theme.palette.primary.main, 0.07)} 50%, ${alpha(theme.palette.primary.main, 0.04)} 100%)`,
+        bgcolor: desktopBg,
+        ...mobileFadeIn,
+      }}>
+      {/* Header — absolute positioned at top, transparent background, shows logo */}
+      <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) => {
+          const addons = buildIns.filter((addon: any) =>
+            ['locale-selector', 'theme-mode-toggle', 'session-user'].includes(addon.key)
+          );
+          return addons;
+        }}
+      />
+
+      {/* Left panel — hidden when left is null (e.g. mobile success) */}
+      {!hideLeft && (
+        <Box
+          sx={{
+            width: { xs: '100%', md: '50%' },
+            height: { xs: 'auto', md: '100vh' },
+            display: 'flex',
+            justifyContent: { md: 'center' },
+            ...(isMobile ? { bgcolor: 'background.paper', mt: 9 } : {}),
+            ...hiddenScrollbar,
+          }}>
+          <Box
+            sx={{
+              width: '100%',
+              maxWidth: { md: 640 },
+              p: { xs: 3, md: 5 },
+              pt: { xs: 3, md: 10 },
+              display: 'flex',
+              flexDirection: 'column',
+              flex: 1,
+              ...fadeIn,
+            }}>
+            {left}
+          </Box>
+        </Box>
+      )}
+
+      {/* Right panel — full width when left is hidden */}
+      <Box
+        sx={{
+          width: hideLeft ? '100%' : { xs: '100%', md: '50%' },
+          height: hideLeft ? '100vh' : { xs: 'auto', md: '100vh' },
+          bgcolor: 'background.paper',
+          boxShadow: hideLeft ? 'none' : { md: '-4px 0 16px rgba(0,0,0,0.04)' },
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          ...(hideLeft ? {} : slideInFromRight),
+          ...(isMobile && !hideLeft ? { pb: '180px', mt: 2 } : {}),
+          // Mobile: scroll entire panel; Desktop: let PaymentPanel handle internal scroll
+          overflowY: { xs: 'auto', md: 'hidden' },
+          '&::-webkit-scrollbar': { display: 'none' },
+          scrollbarWidth: 'none',
+          ...mobileSubmitBarSx,
+        }}>
+        <Box
+          sx={{
+            width: '100%',
+            maxWidth: { md: 600 },
+            mx: 'auto',
+            p: { xs: 3, md: 4 },
+            pt: hideLeft ? { xs: 10, md: '10vh' } : { xs: 3, md: '10vh' },
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+            justifyContent: hideLeft ? 'center' : undefined,
+          }}>
+          {right}
+        </Box>
+      </Box>
+    </Box>
+  );
+}