@blocklet/payment-react 1.25.10 → 1.26.1

package/src/checkout-v2/panels/right/payment-panel.tsx

@@ -0,0 +1,703 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import CreditCardIcon from '@mui/icons-material/CreditCard';
+import CurrencyBitcoinIcon from '@mui/icons-material/CurrencyBitcoin';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
+import CloseIcon from '@mui/icons-material/Close';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import {
+  Avatar,
+  Box,
+  Button,
+  CircularProgress,
+  Collapse,
+  Divider,
+  Drawer,
+  MenuItem,
+  Select,
+  Skeleton,
+  Stack,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  useCheckoutStatus,
+  usePaymentMethodFeature,
+  useCustomerFormFeature,
+  useSubmitFeature,
+  usePricingFeature,
+  useSessionContext,
+  useLineItems,
+  usePromotion,
+  useExchangeRate,
+} from '@blocklet/payment-react-headless';
+import { joinURL } from 'ufo';
+import { usePaymentContext } from '../../../contexts/payment';
+import { useMobile } from '../../../hooks/mobile';
+import { getPrefix } from '../../../libs/util';
+import OverdueInvoicePayment from '../../../components/over-due-invoice-payment';
+
+import { tSafe, whiteTooltipSx } from '../../utils/format';
+import CustomerInfoCard from '../../components/right/customer-info-card';
+import SubscriptionDisclaimer from '../../components/right/subscription-disclaimer';
+import StatusFeedback from '../../components/right/status-feedback';
+import PromotionInput from '../../components/left/promotion-input';
+
+export default function PaymentPanel() {
+  const { t, locale } = useLocaleContext();
+  const { session, sessionData, subscription, refresh } = useSessionContext();
+  const { isDonation } = useCheckoutStatus();
+  const paymentMethod = usePaymentMethodFeature();
+  const form = useCustomerFormFeature();
+  const submit = useSubmitFeature();
+  const pricing = usePricingFeature();
+  const { session: didSession, connect, prefix: paymentKitPrefix } = usePaymentContext();
+  const { inventoryOk } = useLineItems();
+  const promotion = usePromotion();
+  const rate = useExchangeRate();
+  const { isMobile } = useMobile();
+
+  const isAmountLoading = paymentMethod.switching || (rate.hasDynamicPricing && rate.status === 'loading');
+
+  const { currency, types, isStripe, isCrypto } = paymentMethod;
+  const mode = session?.mode || 'payment';
+  const discounts = (session as any)?.discounts || [];
+  const isLoggedIn = !!didSession?.user;
+  const actionLabel = isDonation ? t('payment.checkout.donate') : t(`payment.checkout.${mode}`);
+  const buttonLabel = isLoggedIn ? actionLabel : t('payment.checkout.connect', { action: actionLabel });
+
+  const [customerLimited, setCustomerLimited] = useState(false);
+  const [mobileDetailsOpen, setMobileDetailsOpen] = useState(false);
+  const [promoDrawerOpen, setPromoDrawerOpen] = useState(false);
+
+  // Detect CUSTOMER_LIMITED error from submit hook
+  useEffect(() => {
+    if (submit.status === 'failed' && (submit.context as any)?.code === 'CUSTOMER_LIMITED') {
+      setCustomerLimited(true);
+    }
+  }, [submit.status, submit.context]);
+
+  const canSubmit = submit.status === 'idle' && session?.status === 'open' && inventoryOk;
+  const isProcessing = ['submitting', 'waiting_did'].includes(submit.status);
+
+  // Pre-login action handler (mirrors V1 form/index.tsx onAction)
+  const handleAction = useCallback(() => {
+    if (!canSubmit) return;
+
+    // Lock config to prevent quantity/currency/method changes during submit flow
+    submit.lock();
+
+    if (isLoggedIn || isDonation) {
+      // Already logged in or donation mode — submit directly
+      submit.execute();
+      return;
+    }
+
+    // Not logged in — initiate DID Connect login first
+    didSession?.login?.(() => {
+      // After login: refresh session data + re-fetch customer info → then submit
+      Promise.all([refresh(true), form.refetchCustomer()])
+        .then(() => submit.execute())
+        .catch((err) => {
+          console.error('Post-login refresh failed:', err);
+        });
+    });
+  }, [canSubmit, isLoggedIn, isDonation, didSession, refresh, form, submit]);
+
+  // When user logs in from top-right (not via handleAction button), refetch customer to fill form
+  // Mirrors V1 form/index.tsx useEffect on session?.user
+  useEffect(() => {
+    if (didSession?.user && !submit.status.startsWith('submitting')) {
+      form.refetchCustomer();
+    }
+  }, [didSession?.user]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Group crypto currencies by network (method)
+  const cryptoType = types.find((tp) => tp.type === 'crypto');
+  const cryptoMethods = useMemo(
+    () => paymentMethod.available.filter((m) => m.type !== 'stripe'),
+    [paymentMethod.available]
+  );
+  const networks = useMemo(() => {
+    if (!cryptoMethods.length) return [];
+    return cryptoMethods.map((m) => ({
+      id: m.id,
+      name: m.name,
+      logo: m.logo || '',
+      currencies: m.payment_currencies || [],
+    }));
+  }, [cryptoMethods]);
+
+  // Current network for dropdown
+  const currentMethodId = paymentMethod.current?.id || '';
+
+  // Enter key submit handler
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Enter' && canSubmit && submit.status === 'idle') {
+        const tag = (e.target as HTMLElement)?.tagName?.toLowerCase();
+        if (tag === 'textarea') return;
+        handleAction();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [canSubmit, submit.status, handleAction]);
+
+  // DID Connect
+  const didConnectOpenedRef = useRef(false);
+  useEffect(() => {
+    if (submit.status !== 'waiting_did') {
+      didConnectOpenedRef.current = false;
+      return;
+    }
+    const ctx = submit.context;
+    if (ctx?.type !== 'did_connect' || !connect) return;
+    if (didConnectOpenedRef.current) return;
+    didConnectOpenedRef.current = true;
+
+    const didPrefix = `${paymentKitPrefix}/api/did`.replace(/([^:])\/\//g, '$1/');
+    connect.open({
+      locale: locale as any,
+      action: ctx.action,
+      prefix: didPrefix,
+      saveConnect: false,
+      extraParams: ctx.extraParams,
+      onSuccess: () => {
+        connect.close();
+      },
+      onClose: () => {
+        connect.close();
+        submit.reset();
+      },
+      onError: (err: any) => {
+        console.error('DID Connect error:', err);
+        submit.reset();
+      },
+      messages: {
+        title: t('payment.checkout.connectModal.title', { action: buttonLabel }),
+        scan: t('payment.checkout.connectModal.scan'),
+        confirm: t('payment.checkout.connectModal.confirm'),
+      } as any,
+    });
+  }, [submit.status, submit.context, connect, locale, t, buttonLabel]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Active payment type
+  const activeType = types.find((tp) => tp.active)?.type || 'crypto';
+  const hasMultipleTypes = types.length > 1;
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 }}>
+      {/* Main content — scrollable when overflows */}
+      <Box
+        sx={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          overflowY: 'auto',
+          minHeight: 0,
+          '&::-webkit-scrollbar': { display: 'none' },
+          scrollbarWidth: 'none',
+        }}>
+        {/* PAYMENT METHOD header */}
+        <Typography
+          sx={{
+            fontSize: 13,
+            fontWeight: 700,
+            letterSpacing: '0.02em',
+            color: 'text.primary',
+            mb: 2.5,
+          }}>
+          {t('payment.checkout.paymentDetails')}
+        </Typography>
+
+        {/* Card / Crypto toggle */}
+        {hasMultipleTypes && (
+          <ToggleButtonGroup
+            value={activeType}
+            exclusive
+            onChange={(_, v) => v && paymentMethod.setType(v)}
+            fullWidth
+            size="small"
+            sx={{
+              mb: 2.5,
+              bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.100'),
+              borderRadius: '10px',
+              p: 0.5,
+              '& .MuiToggleButton-root': {
+                textTransform: 'none',
+                borderRadius: '8px !important',
+                py: 0.75,
+                border: 'none',
+                fontSize: 14,
+                fontWeight: 500,
+                gap: 0.75,
+                color: 'text.secondary',
+              },
+              '& .Mui-selected': {
+                bgcolor: 'background.paper !important',
+                color: 'text.primary',
+                fontWeight: 600,
+                boxShadow: (theme) =>
+                  theme.palette.mode === 'dark' ? '0 1px 3px rgba(0,0,0,0.3)' : '0 1px 3px rgba(0,0,0,0.08)',
+                '&:hover': { bgcolor: 'background.paper !important' },
+              },
+            }}>
+            {types.map((tp) => (
+              <ToggleButton key={tp.type} value={tp.type}>
+                {tp.type === 'stripe' ? (
+                  <CreditCardIcon sx={{ fontSize: 18 }} />
+                ) : (
+                  <CurrencyBitcoinIcon sx={{ fontSize: 18 }} />
+                )}
+                {tp.label || (tp.type === 'stripe' ? 'Card' : 'Crypto')}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+
+        {/* Crypto: Network + Asset selectors (side by side) */}
+        {isCrypto && networks.length > 0 && (
+          <Stack direction="row" spacing={1.5} sx={{ mb: 2.5 }}>
+            {/* Network selector */}
+            {networks.length > 1 && (
+              <Box sx={{ flex: 1 }}>
+                <Typography
+                  sx={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: 'text.secondary',
+                    mb: 0.5,
+                    letterSpacing: '0.02em',
+                  }}>
+                  {t('common.network')}
+                </Typography>
+                <Select
+                  value={currentMethodId}
+                  onChange={(e) => {
+                    const network = networks.find((n) => n.id === e.target.value);
+                    if (network?.currencies?.[0]) {
+                      paymentMethod.setCurrency(network.currencies[0].id);
+                    }
+                  }}
+                  fullWidth
+                  size="small"
+                  sx={{
+                    borderRadius: '8px',
+                    bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.50'),
+                    '& .MuiOutlinedInput-notchedOutline': { borderColor: 'transparent' },
+                    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main', borderWidth: 1 },
+                    '& .MuiSelect-select': { display: 'flex', alignItems: 'center', gap: 1, py: 1 },
+                  }}>
+                  {networks.map((net) => (
+                    <MenuItem key={net.id} value={net.id} sx={{ gap: 1 }}>
+                      {net.logo && <Avatar src={net.logo} sx={{ width: 20, height: 20 }} />}
+                      <Typography sx={{ fontSize: 14 }}>{net.name}</Typography>
+                    </MenuItem>
+                  ))}
+                </Select>
+              </Box>
+            )}
+
+            {/* Asset selector */}
+            <Box sx={{ flex: 1 }}>
+              <Typography
+                sx={{
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: 'text.secondary',
+                  mb: 0.5,
+                  letterSpacing: '0.02em',
+                }}>
+                {t('common.currency')}
+              </Typography>
+              <Select
+                value={currency?.id || ''}
+                onChange={(e) => paymentMethod.setCurrency(e.target.value as string)}
+                fullWidth
+                size="small"
+                sx={{
+                  borderRadius: '8px',
+                  bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.50'),
+                  '& .MuiOutlinedInput-notchedOutline': { borderColor: 'transparent' },
+                  '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
+                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main', borderWidth: 1 },
+                  '& .MuiSelect-select': { display: 'flex', alignItems: 'center', gap: 1, py: 1 },
+                }}>
+                {(isCrypto && networks.length > 1
+                  ? networks.find((n) => n.id === currentMethodId)?.currencies || []
+                  : cryptoType?.currencies || []
+                ).map((cur) => (
+                  <MenuItem key={cur.id} value={cur.id} sx={{ gap: 1 }}>
+                    {cur.logo && <Avatar src={cur.logo} sx={{ width: 20, height: 20 }} />}
+                    <Typography sx={{ fontSize: 14 }}>{cur.symbol}</Typography>
+                    <Typography sx={{ fontSize: 12, color: 'text.secondary', ml: 0.5 }}>{cur.name}</Typography>
+                  </MenuItem>
+                ))}
+              </Select>
+            </Box>
+          </Stack>
+        )}
+
+        {/* Card: show currency indicator — same style as crypto asset selector */}
+        {isStripe && currency && (
+          <Box sx={{ mb: 2.5 }}>
+            <Typography
+              sx={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: 'text.secondary',
+                mb: 0.5,
+                letterSpacing: '0.02em',
+              }}>
+              {t('common.currency')}
+            </Typography>
+            <Select
+              value={currency.id || 'usd'}
+              readOnly
+              fullWidth
+              size="small"
+              IconComponent={() => null}
+              sx={{
+                borderRadius: '8px',
+                bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.50'),
+                '& .MuiOutlinedInput-notchedOutline': { borderColor: 'transparent !important' },
+                '& .MuiSelect-select': { display: 'flex', alignItems: 'center', gap: 1, py: 1 },
+              }}>
+              <MenuItem value={currency.id || 'usd'} sx={{ gap: 1 }}>
+                {currency.logo && <Avatar src={currency.logo} sx={{ width: 20, height: 20 }} />}
+                <Typography sx={{ fontSize: 14, fontWeight: 600 }}>{currency.symbol}</Typography>
+                <Typography sx={{ fontSize: 12, color: 'text.secondary', ml: 0.5 }}>{currency.name}</Typography>
+              </MenuItem>
+            </Select>
+          </Box>
+        )}
+
+        {/* Customer Info */}
+        <CustomerInfoCard form={form} isLoggedIn={isLoggedIn} />
+      </Box>
+      {/* end main content / scrollable area */}
+
+      {/* Submit section — fixed on mobile, flows on desktop */}
+      <Box className="cko-v2-submit-btn" sx={{ flexShrink: 0 }}>
+        {/* Mobile: collapsible details (staking etc.) */}
+        {isMobile && pricing.staking && (
+          <>
+            <Box
+              onClick={() => setMobileDetailsOpen(!mobileDetailsOpen)}
+              sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', mb: 1 }}>
+              <Typography sx={{ fontSize: 13, fontWeight: 600, color: 'text.secondary' }}>
+                {t('payment.checkout.orderSummary')}
+              </Typography>
+              <ExpandMoreIcon
+                sx={{
+                  fontSize: 18,
+                  color: 'text.secondary',
+                  transition: '0.2s',
+                  transform: mobileDetailsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                }}
+              />
+            </Box>
+            <Collapse in={mobileDetailsOpen}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+                <Stack direction="row" spacing={0.5} alignItems="center">
+                  <Typography sx={{ fontSize: 13, color: 'text.secondary' }}>
+                    {t('payment.checkout.staking.title')}
+                  </Typography>
+                  <HelpOutlineIcon sx={{ fontSize: 14, color: 'text.disabled' }} />
+                </Stack>
+                {isAmountLoading ? (
+                  <Skeleton variant="text" width={60} height={18} />
+                ) : (
+                  <Typography sx={{ fontSize: 13, fontWeight: 600 }}>+{pricing.staking}</Typography>
+                )}
+              </Stack>
+              <Divider sx={{ mb: 1 }} />
+            </Collapse>
+          </>
+        )}
+
+        {/* Desktop: staking + promotion (together with Total Due) */}
+        {!isMobile && (
+          <>
+            <Divider sx={{ mb: 2 }} />
+            {pricing.staking && (
+              <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1 }}>
+                <Stack direction="row" spacing={0.5} alignItems="center">
+                  <Typography sx={{ fontSize: 14, color: 'text.secondary' }}>
+                    {t('payment.checkout.staking.title')}
+                  </Typography>
+                  <Tooltip
+                    title={t('payment.checkout.staking.tooltip')}
+                    placement="top"
+                    arrow
+                    slotProps={{ popper: { sx: whiteTooltipSx } }}>
+                    <HelpOutlineIcon sx={{ fontSize: 16, color: 'text.disabled' }} />
+                  </Tooltip>
+                </Stack>
+                {isAmountLoading ? (
+                  <Skeleton variant="text" width={80} height={22} />
+                ) : (
+                  <Typography sx={{ fontSize: 14, fontWeight: 600 }}>+{pricing.staking}</Typography>
+                )}
+              </Stack>
+            )}
+            <PromotionInput
+              promotion={{
+                applied: promotion.applied,
+                code: promotion.code,
+                active: promotion.active,
+                inactiveReason: promotion.inactiveReason,
+                apply: promotion.apply,
+                remove: promotion.remove,
+              }}
+              discounts={discounts}
+              discountAmount={pricing.discount}
+            />
+          </>
+        )}
+
+        {/* Total amount due */}
+        {(() => {
+          const totalStr = pricing.total || '0';
+          const parts = totalStr.split(/\s+/);
+          const num = parts[0] || '0';
+          const sym = parts.slice(1).join(' ') || currency?.symbol || '';
+          const dotIdx = num.indexOf('.');
+          const intPart = dotIdx >= 0 ? num.slice(0, dotIdx) : num;
+          const decPart = dotIdx >= 0 ? num.slice(dotIdx) : '';
+          return (
+            <Box sx={{ mb: isMobile ? 1.5 : 2.5 }}>
+              <Stack direction="row" justifyContent="space-between" alignItems="flex-end">
+                <Typography sx={{ fontWeight: 700, fontSize: 14, color: 'text.secondary', pb: 0.5 }}>
+                  {t('common.totalDue')}
+                </Typography>
+                {isAmountLoading ? (
+                  <Skeleton variant="text" width={140} height={44} />
+                ) : (
+                  <Box sx={{ textAlign: 'right' }}>
+                    <Typography
+                      component="span"
+                      sx={{
+                        fontSize: { xs: 28, md: 36 },
+                        fontWeight: 800,
+                        color: 'text.primary',
+                        lineHeight: 1,
+                        transition: 'opacity 0.3s ease',
+                      }}>
+                      {intPart}
+                    </Typography>
+                    {decPart && (
+                      <Typography
+                        component="span"
+                        sx={{ fontSize: { xs: 16, md: 20 }, fontWeight: 700, color: 'text.secondary', lineHeight: 1 }}>
+                        {decPart}
+                      </Typography>
+                    )}
+                    <Typography
+                      component="span"
+                      sx={{ fontSize: { xs: 14, md: 16 }, fontWeight: 600, color: 'text.secondary', ml: 0.75 }}>
+                      {sym}
+                    </Typography>
+                  </Box>
+                )}
+              </Stack>
+              {/* Row below Total Due: mobile promo (left) + USD estimate (right) */}
+              {(pricing.usdEquivalent || (isMobile && promotion.active)) && !isAmountLoading && (
+                <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mt: 0.25 }}>
+                  {/* Mobile: promo link or applied badge — left-aligned */}
+                  {(() => {
+                    if (isMobile && !promotion.applied && promotion.active) {
+                      return (
+                        <Box
+                          onClick={() => setPromoDrawerOpen(true)}
+                          sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer' }}>
+                          <LocalOfferOutlinedIcon sx={{ fontSize: 14, color: 'primary.main' }} />
+                          <Typography sx={{ fontSize: 12, fontWeight: 600, color: 'primary.main' }}>
+                            {tSafe(t, 'payment.checkout.promotion.add', 'Add promo code')}
+                          </Typography>
+                        </Box>
+                      );
+                    }
+                    if (isMobile && promotion.applied) {
+                      return (
+                        <Stack direction="row" alignItems="center" spacing={0.5}>
+                          <LocalOfferOutlinedIcon sx={{ fontSize: 14, color: 'success.main' }} />
+                          <Typography sx={{ fontSize: 12, fontWeight: 600, color: 'success.main' }}>
+                            {promotion.code}
+                          </Typography>
+                          {pricing.discount && (
+                            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>
+                              (-{pricing.discount})
+                            </Typography>
+                          )}
+                          <CloseIcon
+                            onClick={promotion.remove}
+                            sx={{ fontSize: 14, color: 'error.main', cursor: 'pointer', ml: 0.25 }}
+                          />
+                        </Stack>
+                      );
+                    }
+                    return <Box />;
+                  })()}
+                  {/* USD estimate — right-aligned */}
+                  {pricing.usdEquivalent && (
+                    <Typography sx={{ fontSize: 13, color: 'text.secondary' }}>≈ {pricing.usdEquivalent}</Typography>
+                  )}
+                </Stack>
+              )}
+            </Box>
+          );
+        })()}
+
+        {/* Submit button */}
+        <Button
+          variant="contained"
+          size="large"
+          fullWidth
+          disabled={!canSubmit || submit.status === 'waiting_stripe'}
+          onClick={handleAction}
+          startIcon={isProcessing ? <CircularProgress size={20} color="inherit" /> : null}
+          endIcon={!isProcessing ? <ArrowForwardIcon /> : undefined}
+          sx={{
+            py: 1.5,
+            fontSize: '1.1rem',
+            fontWeight: 600,
+            textTransform: 'none',
+            borderRadius: '12px',
+          }}>
+          {isProcessing ? `${t('payment.checkout.processing')}...` : buttonLabel}
+        </Button>
+
+        {/* Mobile: SSL footer inside fixed bar, below button */}
+        {isMobile && (
+          <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="center"
+            spacing={0.75}
+            sx={{ mt: 1.5, opacity: 0.55 }}>
+            <LockOutlinedIcon sx={{ fontSize: 13, color: 'text.secondary' }} />
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>
+              {tSafe(t, 'payment.checkout.ssl', 'SSL Secure')}
+            </Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.disabled' }}>·</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>{tSafe(t, 'common.terms', 'Terms')}</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.disabled' }}>|</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>
+              {tSafe(t, 'common.privacy', 'Privacy')}
+            </Typography>
+          </Stack>
+        )}
+      </Box>
+      {/* end submit fixed bar */}
+
+      {/* Mobile: Promo code drawer */}
+      {isMobile && (
+        <Drawer
+          anchor="bottom"
+          open={promoDrawerOpen}
+          onClose={() => setPromoDrawerOpen(false)}
+          PaperProps={{
+            sx: {
+              borderRadius: '16px 16px 0 0',
+              p: 3,
+              pb: 4,
+              minHeight: '30vh',
+            },
+          }}>
+          <Box sx={{ width: 40, height: 4, bgcolor: 'divider', borderRadius: 2, mx: 'auto', mb: 3 }} />
+          <Typography sx={{ fontWeight: 700, fontSize: 16, mb: 2 }}>
+            {tSafe(t, 'payment.checkout.promotion.add', 'Add promo code')}
+          </Typography>
+          <PromotionInput
+            initialShowInput
+            promotion={{
+              applied: promotion.applied,
+              code: promotion.code,
+              active: promotion.active,
+              inactiveReason: promotion.inactiveReason,
+              apply: async (...args: Parameters<typeof promotion.apply>) => {
+                const result = await promotion.apply(...args);
+                if (result.success) setPromoDrawerOpen(false);
+                return result;
+              },
+              remove: promotion.remove,
+            }}
+            discounts={discounts}
+            discountAmount={pricing.discount}
+          />
+        </Drawer>
+      )}
+
+      {/* Disclaimer + footer — outside fixed bar, desktop only for SSL */}
+      <Box sx={{ flexShrink: 0 }}>
+        <SubscriptionDisclaimer
+          mode={mode}
+          subscription={subscription}
+          staking={pricing.staking}
+          appName={(session?.metadata as any)?.app_name || 'New Payment Kit'}
+        />
+
+        {!isMobile && (
+          <Stack
+            direction="row"
+            alignItems="center"
+            justifyContent="center"
+            spacing={0.75}
+            sx={{ mt: 2.5, opacity: 0.55 }}>
+            <LockOutlinedIcon sx={{ fontSize: 13, color: 'text.secondary' }} />
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>
+              {tSafe(t, 'payment.checkout.ssl', 'SSL Secure')}
+            </Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.disabled' }}>·</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>{tSafe(t, 'common.terms', 'Terms')}</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.disabled' }}>|</Typography>
+            <Typography sx={{ fontSize: 11, color: 'text.secondary' }}>
+              {tSafe(t, 'common.privacy', 'Privacy')}
+            </Typography>
+          </Stack>
+        )}
+      </Box>
+
+      {/* Status Feedback (Toast errors only — dialogs handled by CheckoutDialogs) */}
+      <StatusFeedback status={submit.status} context={submit.context} onReset={submit.reset} />
+
+      {/* Overdue Invoice Payment (CUSTOMER_LIMITED) */}
+      {customerLimited && (
+        <OverdueInvoicePayment
+          customerId={(sessionData as any)?.customer?.id || (session as any)?.user?.did}
+          onPaid={() => {
+            setCustomerLimited(false);
+            submit.retry();
+          }}
+          alertMessage={t('payment.customer.pastDue.alert.customMessage')}
+          detailLinkOptions={{
+            enabled: true,
+            onClick: () => {
+              setCustomerLimited(false);
+              window.open(
+                joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+                '_self'
+              );
+            },
+          }}
+          dialogProps={{
+            open: customerLimited,
+            onClose: () => {
+              setCustomerLimited(false);
+              submit.reset();
+            },
+            title: t('payment.customer.pastDue.alert.title'),
+          }}
+        />
+      )}
+    </Box>
+  );
+}