@blocklet/payment-react 1.25.10 → 1.26.0

package/src/checkout-v2/components/left/product-item-card.tsx

@@ -0,0 +1,634 @@
+import { useState, useEffect } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import CheckIcon from '@mui/icons-material/Check';
+import LocalOfferIcon from '@mui/icons-material/LocalOffer';
+import RemoveIcon from '@mui/icons-material/Remove';
+import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
+import {
+  Avatar,
+  Box,
+  Chip,
+  Collapse,
+  IconButton,
+  Skeleton,
+  Stack,
+  Switch,
+  TextField,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import type { TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
+import { getPriceUnitAmountByCurrency } from '@blocklet/payment-react-headless';
+import Toast from '@arcblock/ux/lib/Toast';
+import { INTERVAL_LOCALE_KEY, formatDynamicUnitPrice, formatTokenAmount, formatTrialText } from '../../utils/format';
+
+interface ProductItemCardProps {
+  item: TLineItemExpanded & { adjustable_quantity?: { enabled: boolean; minimum?: number; maximum?: number } };
+  currency: TPaymentCurrency | null;
+  discounts: any[];
+  exchangeRate: string | null;
+  onQuantityChange: (itemId: string, qty: number) => Promise<void>;
+  onUpsell: (fromId: string, toId: string) => Promise<void>;
+  onDownsell: (priceId: string) => Promise<void>;
+  trialActive: boolean;
+  trialDays: number;
+  t: (key: string, params?: any) => string;
+  recommended?: boolean;
+  hideUpsell?: boolean;
+  isRateLoading?: boolean;
+  showFeatures?: boolean;
+  children?: React.ReactNode;
+}
+
+export default function ProductItemCard({
+  item,
+  currency,
+  discounts,
+  exchangeRate,
+  onQuantityChange,
+  onUpsell,
+  onDownsell,
+  trialActive,
+  trialDays,
+  t,
+  recommended = false,
+  hideUpsell = false,
+  isRateLoading = false,
+  showFeatures = true,
+  children = undefined,
+}: ProductItemCardProps) {
+  const activePrice: any = (item as any).upsell_price || item.price;
+  const product = activePrice?.product;
+  const name = product?.name || 'Item';
+  const logo = product?.images?.[0] || '';
+  const features: Array<{ name: string; icon?: string }> = product?.features || [];
+  const recurring = activePrice?.recurring;
+
+  const quantity = item.quantity || 1;
+  const isMetered = recurring?.usage_type === 'metered';
+  const metered = isMetered ? ` ${t('common.metered')}` : '';
+
+  const perUnitFormatted = formatDynamicUnitPrice(activePrice, currency, exchangeRate);
+
+  // Item type badge: just "SUBSCRIPTION" or "ONE-TIME" (interval is shown with price)
+  const isSubscription = !!recurring;
+  const typeBadgeText = isSubscription
+    ? t('payment.checkout.typeBadge.subscription')
+    : t('payment.checkout.typeBadge.oneTime');
+
+  // Billing interval suffix for price display: "/ month"
+  const priceIntervalSuffix = recurring?.interval ? ` / ${t(`common.${recurring.interval}`)}` : '';
+
+  // Subtitle: only quantity breakdown (interval is now in the type badge)
+  const subtitleText = (() => {
+    if (quantity > 1 && perUnitFormatted && currency) {
+      return `${quantity} × ${perUnitFormatted} ${currency.symbol}`;
+    }
+    if (isMetered) return metered.trim();
+    return '';
+  })();
+
+  // Item total
+  const itemTotal = (() => {
+    // custom_amount is backend-quoted in a specific currency — only use when quote_currency_id is present and matches
+    // (when quote_currency_id is absent, custom_amount denomination is unknown — skip to base_amount path)
+    const quoteCurrencyId = (item as any).quote_currency_id as string | undefined;
+    if ((item as any).custom_amount && quoteCurrencyId && quoteCurrencyId === currency?.id) {
+      return formatTokenAmount((item as any).custom_amount, currency);
+    }
+    if (activePrice?.pricing_type === 'dynamic' && exchangeRate && activePrice.base_amount) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = Number(activePrice.base_amount);
+        if (baseUsd > 0 && Number.isFinite(baseUsd)) {
+          const tokenAmount = (baseUsd * quantity) / 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 && activePrice?.base_amount != null) {
+      const baseUsd = Number(activePrice.base_amount);
+      if (baseUsd >= 0 && Number.isFinite(baseUsd)) {
+        const total = baseUsd * quantity;
+        return total.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+      }
+    }
+    // Fallback: look up unit_amount from currency_options for the selected currency
+    if (activePrice && currency) {
+      const unitAmount = getPriceUnitAmountByCurrency(activePrice, currency);
+      if (unitAmount && unitAmount !== '0') {
+        const totalUnits = BigInt(unitAmount) * BigInt(quantity);
+        return formatTokenAmount(totalUnits.toString(), currency);
+      }
+    }
+    return '0';
+  })();
+
+  // Per-item discount
+  const discount = discounts?.[0];
+  const discountCode =
+    discount?.promotion_code_details?.code || discount?.verification_data?.code || discount?.promotion_code || '';
+  const perItemDiscount = (() => {
+    if (!discountCode || !discount) return null;
+    const couponDetails = discount?.coupon_details;
+    if (couponDetails?.percent_off > 0) {
+      const numericTotal = parseFloat(String(itemTotal).replace(/,/g, ''));
+      if (!Number.isNaN(numericTotal) && numericTotal > 0) {
+        const discAmount = (numericTotal * couponDetails.percent_off) / 100;
+        const abs = Math.abs(discAmount);
+        const precision = abs > 0 && abs < 0.01 ? 6 : 2;
+        return `${discAmount.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision }).replace(/\.?0+$/, '') || '0'} ${currency?.symbol || ''}`;
+      }
+    }
+    if ((item as any).discount_amounts?.length > 0 && currency) {
+      return `${formatTokenAmount((item as any).discount_amounts[0].amount, currency)} ${currency.symbol}`;
+    }
+    return null;
+  })();
+
+  // Quantity controls
+  const adjustable = item.adjustable_quantity?.enabled;
+  const min = item.adjustable_quantity?.minimum || 1;
+  const max = item.adjustable_quantity?.maximum;
+
+  const [qtyInput, setQtyInput] = useState(String(quantity));
+  const [isEditing, setIsEditing] = useState(false);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [featuresOpen, setFeaturesOpen] = useState(!isMobile);
+  useEffect(() => {
+    if (!isEditing) setQtyInput(String(quantity));
+  }, [quantity, isEditing]);
+
+  // Upsell info
+  const canUpsell = !!(item.price as any)?.upsell?.upsells_to;
+  const isUpselled = !!(item as any).upsell_price;
+  const upsellTo = (item.price as any)?.upsell?.upsells_to;
+
+  let savingsPercent = 0;
+  if (canUpsell && upsellTo) {
+    const fromAmount = parseFloat((item.price as any)?.base_amount || (item.price as any)?.unit_amount || '0');
+    const toAmount = parseFloat(upsellTo?.base_amount || upsellTo?.unit_amount || '0');
+    const fromInterval = (item.price as any)?.recurring?.interval;
+    const toInterval = upsellTo?.recurring?.interval;
+    if (fromAmount > 0 && toAmount > 0 && fromInterval && toInterval) {
+      const monthsMap: Record<string, number> = { day: 365, week: 52, month: 12, year: 1 };
+      const fromYearly = fromAmount * (monthsMap[fromInterval] || 1);
+      const toYearly = toAmount * (monthsMap[toInterval] || 1);
+      if (fromYearly > toYearly) {
+        savingsPercent = Math.round(((fromYearly - toYearly) / fromYearly) * 100);
+      }
+    }
+  }
+
+  // Upsell price display
+  const upsellInterval = upsellTo?.recurring?.interval;
+  const upsellPrice = (() => {
+    if (!upsellTo) return '';
+    const slashText = upsellInterval ? t('common.slash', { interval: t(`common.${upsellInterval}`) }) : '';
+    if (upsellTo.pricing_type === 'dynamic' && upsellTo.base_amount && exchangeRate) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = parseFloat(upsellTo.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;
+          const formatted =
+            tokenAmount
+              .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
+              .replace(/\.?0+$/, '') || '0';
+          return `${formatted} ${currency?.symbol || ''} ${slashText}`;
+        }
+      }
+    }
+    if (upsellTo.pricing_type === 'dynamic' && upsellTo.base_amount && upsellTo.base_currency === 'USD') {
+      const baseUsd = parseFloat(upsellTo.base_amount);
+      const formattedUsd = baseUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+      return `$${formattedUsd} ${slashText}`;
+    }
+    const upsellUnitFormatted = formatDynamicUnitPrice(upsellTo, currency, exchangeRate);
+    return upsellUnitFormatted ? `${upsellUnitFormatted} ${currency?.symbol || ''} ${slashText}` : '';
+  })();
+
+  // Downsell price display
+  const originalInterval = (item.price as any)?.recurring?.interval;
+  const downsellPrice = (() => {
+    if (!item.price || !isUpselled) return '';
+    const originalPrice: any = item.price;
+    const originalSlash = originalInterval ? t('common.slash', { interval: t(`common.${originalInterval}`) }) : '';
+    if (originalPrice.pricing_type === 'dynamic' && originalPrice.base_amount && exchangeRate) {
+      const rate = Number(exchangeRate);
+      if (rate > 0 && Number.isFinite(rate)) {
+        const baseUsd = parseFloat(originalPrice.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;
+          const formatted =
+            tokenAmount
+              .toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: precision })
+              .replace(/\.?0+$/, '') || '0';
+          return `${formatted} ${currency?.symbol || ''} ${originalSlash}`;
+        }
+      }
+    }
+    if (
+      originalPrice.pricing_type === 'dynamic' &&
+      originalPrice.base_amount &&
+      originalPrice.base_currency === 'USD'
+    ) {
+      const baseUsd = parseFloat(originalPrice.base_amount);
+      const formattedUsd = baseUsd.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+      return `$${formattedUsd} ${originalSlash}`;
+    }
+    const unitFormatted = formatDynamicUnitPrice(originalPrice, currency, exchangeRate);
+    return unitFormatted ? `${unitFormatted} ${currency?.symbol || ''} ${originalSlash}` : '';
+  })();
+
+  // Upsell toggle label
+  const upsellToggleLabel = (() => {
+    if (isUpselled) {
+      const recurringLabel = originalInterval ? t(INTERVAL_LOCALE_KEY[originalInterval] || '') : '';
+      return t('payment.checkout.upsell.revert', { recurring: recurringLabel });
+    }
+    const recurringLabel = upsellInterval ? t(INTERVAL_LOCALE_KEY[upsellInterval] || '') : '';
+    return t('payment.checkout.upsell.save', { recurring: recurringLabel });
+  })();
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      {/* Recommended badge — top-right */}
+      {recommended && (
+        <Chip
+          label="RECOMMENDED"
+          size="small"
+          sx={{
+            position: 'absolute',
+            top: 0,
+            right: 40,
+            transform: 'translateY(-50%)',
+            zIndex: 1,
+            height: 22,
+            fontSize: 9,
+            fontWeight: 900,
+            letterSpacing: '0.12em',
+            bgcolor: 'primary.main',
+            color: '#fff',
+            boxShadow: '0 4px 12px rgba(45,124,243,0.2)',
+            '& .MuiChip-label': { px: 1.5 },
+          }}
+        />
+      )}
+
+      <Box
+        sx={{
+          p: { xs: 2, md: 3 },
+          bgcolor: 'background.paper',
+          borderRadius: { xs: '16px', md: '24px' },
+          border: '1px solid',
+          borderColor: 'divider',
+          boxShadow: (th) =>
+            th.palette.mode === 'dark' ? '0 12px 40px -8px rgba(0,0,0,0.3)' : '0 12px 40px -8px rgba(0,0,0,0.06)',
+          transition: 'all 0.3s ease',
+          ...(canUpsell && !hideUpsell ? { borderRadius: { xs: '16px 16px 0 0', md: '24px 24px 0 0' } } : {}),
+          '&:hover': {
+            borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(45,124,243,0.15)'),
+          },
+        }}>
+        <Stack direction="row" spacing={{ xs: 1.5, md: 2.5 }} sx={{ alignItems: 'center', width: '100%' }}>
+          {/* Product avatar */}
+          {logo ? (
+            <Avatar
+              src={logo}
+              alt={name}
+              variant="rounded"
+              sx={{
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: '12px', md: '16px' },
+                flexShrink: 0,
+              }}
+            />
+          ) : (
+            <Avatar
+              variant="rounded"
+              sx={{
+                width: { xs: 44, md: 64 },
+                height: { xs: 44, md: 64 },
+                borderRadius: { xs: '12px', md: '16px' },
+                bgcolor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : '#eff6ff'),
+                flexShrink: 0,
+              }}>
+              <ShoppingCartCheckoutIcon sx={{ fontSize: { xs: 22, md: 28 }, color: 'primary.main', opacity: 0.45 }} />
+            </Avatar>
+          )}
+
+          <Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+            <Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 0.25 }}>
+              <Box sx={{ minWidth: 0 }}>
+                <Typography
+                  sx={{ color: 'text.primary', fontWeight: 800, fontSize: { xs: 15, md: 18 }, lineHeight: 1.3 }}>
+                  {name}
+                </Typography>
+                {/* Item type badge: subscription/one-time + interval */}
+                <Typography
+                  component="span"
+                  sx={{
+                    display: 'inline-block',
+                    mt: 0.5,
+                    fontSize: 10,
+                    fontWeight: 700,
+                    letterSpacing: '0.08em',
+                    lineHeight: 1,
+                    textTransform: 'uppercase',
+                    color: 'primary.main',
+                    bgcolor: (th) =>
+                      th.palette.mode === 'dark' ? `${th.palette.primary.main}1A` : `${th.palette.primary.main}0D`,
+                    px: 0.75,
+                    py: 0.4,
+                    borderRadius: '3px',
+                  }}>
+                  {typeBadgeText}
+                </Typography>
+                {subtitleText && (
+                  <Typography sx={{ color: 'text.disabled', fontSize: 13, fontWeight: 500, mt: 0.25 }}>
+                    {subtitleText}
+                  </Typography>
+                )}
+              </Box>
+              <Stack alignItems="flex-end" sx={{ flexShrink: 0, ml: 1.5 }}>
+                {/* eslint-disable-next-line no-nested-ternary */}
+                {trialActive && isSubscription ? (
+                  <Typography
+                    sx={{ fontWeight: 800, color: 'text.primary', whiteSpace: 'nowrap', fontSize: { xs: 15, md: 18 } }}>
+                    {formatTrialText(t, trialDays, recurring?.interval || 'day')}
+                  </Typography>
+                ) : isRateLoading ? (
+                  <Skeleton variant="text" width={100} height={28} />
+                ) : (
+                  <>
+                    <Typography
+                      sx={{
+                        fontWeight: 800,
+                        color: 'text.primary',
+                        whiteSpace: 'nowrap',
+                        fontSize: { xs: 15, md: 18 },
+                        transition: 'opacity 0.3s ease',
+                      }}>
+                      {itemTotal} {currency?.symbol}
+                      {priceIntervalSuffix}
+                    </Typography>
+                    {exchangeRate && activePrice?.base_amount && (
+                      <Typography sx={{ fontSize: 12, color: 'text.disabled', fontWeight: 600, lineHeight: 1 }}>
+                        ≈ ${(Number(activePrice.base_amount) * quantity).toFixed(2)}
+                      </Typography>
+                    )}
+                  </>
+                )}
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+
+        {/* Product features — collapsible, default expanded */}
+        {showFeatures && features.length > 0 && (
+          <Box
+            sx={{
+              mt: { xs: 2, md: 2.5 },
+              pt: { xs: 2, md: 2.5 },
+              borderTop: '1px solid',
+              borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'grey.100'),
+            }}>
+            <Stack
+              direction="row"
+              alignItems="center"
+              justifyContent="space-between"
+              onClick={() => setFeaturesOpen((v) => !v)}
+              sx={{ cursor: 'pointer', userSelect: 'none', mb: featuresOpen ? 1.25 : 0 }}>
+              <Typography sx={{ fontSize: 14, fontWeight: 700, color: 'text.primary' }}>
+                {t('payment.checkout.planFeatures')}
+              </Typography>
+              <KeyboardArrowUpIcon
+                sx={{
+                  fontSize: 20,
+                  color: 'text.secondary',
+                  transition: 'transform 0.2s ease',
+                  transform: featuresOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+                }}
+              />
+            </Stack>
+            <Collapse in={featuresOpen}>
+              <Stack spacing={1.25}>
+                {features.map((feature) => (
+                  <Stack key={feature.name} direction="row" spacing={1.5} alignItems="center">
+                    <Box
+                      sx={{
+                        width: 20,
+                        height: 20,
+                        borderRadius: '50%',
+                        bgcolor: (th) =>
+                          th.palette.mode === 'dark' ? 'rgba(16,185,129,0.15)' : 'rgba(16,185,129,0.1)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexShrink: 0,
+                      }}>
+                      <CheckIcon sx={{ fontSize: 14, color: 'success.main' }} />
+                    </Box>
+                    <Typography sx={{ fontSize: 14, fontWeight: 500, color: 'text.secondary' }}>
+                      {feature.name}
+                    </Typography>
+                  </Stack>
+                ))}
+              </Stack>
+            </Collapse>
+          </Box>
+        )}
+
+        {/* Discount chip */}
+        {discountCode && perItemDiscount && (
+          <Box sx={{ mt: 1.5 }}>
+            <Chip
+              icon={<LocalOfferIcon sx={{ color: 'warning.main', fontSize: 'small' }} />}
+              label={`${discountCode} (-${perItemDiscount})`}
+              size="small"
+              sx={{ height: 22, borderRadius: '6px', '& .MuiChip-label': { fontSize: 12 } }}
+            />
+          </Box>
+        )}
+
+        {/* Quantity controls */}
+        {adjustable && (
+          <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2 }}>
+            <Typography sx={{ color: 'text.secondary', minWidth: 'fit-content', fontSize: 13, fontWeight: 500 }}>
+              {t('common.quantity')}
+            </Typography>
+            <IconButton
+              size="small"
+              onClick={() => onQuantityChange(item.price_id, quantity - 1)}
+              disabled={quantity <= min}
+              sx={{
+                width: 36,
+                height: 36,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: '50%',
+                '&:hover': { bgcolor: 'action.hover' },
+              }}>
+              <RemoveIcon sx={{ fontSize: 20 }} />
+            </IconButton>
+            <TextField
+              value={qtyInput}
+              size="small"
+              type="number"
+              slotProps={{
+                htmlInput: {
+                  style: {
+                    textAlign: 'center',
+                    padding: '6px 4px',
+                    fontWeight: 700,
+                    fontSize: 16,
+                    MozAppearance: 'textfield',
+                  } as React.CSSProperties,
+                  min,
+                  max: max || undefined,
+                },
+              }}
+              sx={{
+                minWidth: 64,
+                '& input': { textAlign: 'center' },
+                '& .MuiOutlinedInput-root': { borderRadius: '12px' },
+                '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
+                  WebkitAppearance: 'none',
+                  margin: 0,
+                },
+                '& input[type=number]': {
+                  MozAppearance: 'textfield',
+                },
+              }}
+              onFocus={() => setIsEditing(true)}
+              onChange={(e) => setQtyInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  (e.target as HTMLInputElement).blur();
+                }
+              }}
+              onBlur={() => {
+                setIsEditing(false);
+                const v = parseInt(qtyInput, 10);
+                if (!Number.isNaN(v) && v >= min && (!max || v <= max) && v !== quantity) {
+                  onQuantityChange(item.price_id, v);
+                } else {
+                  setQtyInput(String(quantity));
+                }
+              }}
+            />
+            <IconButton
+              size="small"
+              onClick={() => onQuantityChange(item.price_id, quantity + 1)}
+              disabled={max ? quantity >= max : false}
+              sx={{
+                width: 36,
+                height: 36,
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: '50%',
+                '&:hover': { bgcolor: 'action.hover' },
+              }}>
+              <AddIcon sx={{ fontSize: 20 }} />
+            </IconButton>
+          </Stack>
+        )}
+
+        {children}
+      </Box>
+
+      {/* Upsell toggle strip — seamless with card (hidden when promoted to top-level) */}
+      {canUpsell && !hideUpsell && (
+        <Box
+          sx={{
+            px: { xs: 2, md: 3 },
+            py: 1.5,
+            bgcolor: 'background.paper',
+            border: '1px solid',
+            borderTop: 0,
+            borderColor: 'divider',
+            borderRadius: { xs: '0 0 16px 16px', md: '0 0 24px 24px' },
+            boxShadow: (th) =>
+              th.palette.mode === 'dark' ? '0 12px 40px -8px rgba(0,0,0,0.3)' : '0 12px 40px -8px rgba(0,0,0,0.06)',
+          }}>
+          {/* Subtle divider */}
+          <Box sx={{ borderTop: '1px solid', borderColor: 'divider', mb: 1.5 }} />
+          <Stack direction="row" alignItems="center" justifyContent="space-between">
+            <Stack direction="row" alignItems="center" spacing={1}>
+              <Switch
+                checked={isUpselled}
+                onChange={async () => {
+                  try {
+                    if (isUpselled) {
+                      await onDownsell((item as any).upsell_price?.id || (item.price as any).id);
+                    } else {
+                      await onUpsell(item.price_id, upsellTo.id);
+                    }
+                  } catch (err: any) {
+                    Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                  }
+                }}
+                size="small"
+                sx={{
+                  '& .MuiSwitch-switchBase.Mui-checked': { color: '#12b886' },
+                  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { bgcolor: '#12b886' },
+                }}
+              />
+              <Typography
+                sx={{ fontSize: 13, color: 'text.secondary', cursor: 'pointer', fontWeight: 600 }}
+                onClick={async () => {
+                  try {
+                    if (isUpselled) await onDownsell((item as any).upsell_price?.id || (item.price as any).id);
+                    else await onUpsell(item.price_id, upsellTo.id);
+                  } catch (err: any) {
+                    Toast.error(err?.response?.data?.error || err?.message || 'Failed');
+                  }
+                }}>
+                {upsellToggleLabel}
+              </Typography>
+              {!isUpselled && savingsPercent > 0 && (
+                <Chip
+                  label={t('payment.checkout.upsell.off', { saving: savingsPercent })}
+                  size="small"
+                  sx={{
+                    height: 22,
+                    fontSize: 11,
+                    fontWeight: 700,
+                    bgcolor: (th) => (th.palette.mode === 'dark' ? 'rgba(18,184,134,0.1)' : '#ebfef5'),
+                    color: '#12b886',
+                    border: '1px solid',
+                    borderColor: (th) => (th.palette.mode === 'dark' ? 'rgba(18,184,134,0.2)' : '#d3f9e8'),
+                    borderRadius: '9999px',
+                    '& .MuiChip-label': { px: 1 },
+                  }}
+                />
+              )}
+            </Stack>
+            <Typography sx={{ fontSize: 13, color: 'text.primary', whiteSpace: 'nowrap', fontWeight: 700 }}>
+              {isUpselled ? downsellPrice : upsellPrice}
+            </Typography>
+          </Stack>
+        </Box>
+      )}
+    </Box>
+  );
+}