@blocklet/payment-react 1.24.3 → 1.25.0

package/src/payment/product-item.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/indent */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
 import { Box, Stack, Typography, IconButton, TextField, Alert, Chip } from '@mui/material';
@@ -5,7 +6,8 @@ import { Add, Remove, LocalOffer } from '@mui/icons-material';
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useRequest } from 'ahooks';
-import { BN, fromTokenToUnit } from '@ocap/util';
+import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
+import LoadingAmount from '../components/loading-amount';
 import Status from '../components/status';
 import Switch from '../components/switch-button';
 import {
@@ -20,11 +22,32 @@ import {
   formatCreditForCheckout,
   formatCreditAmount,
   formatBNStr,
+  getUsdAmountFromBaseAmount,
+  formatUsdAmount,
+  formatDynamicPrice,
 } from '../libs/util';
 import ProductCard from './product-card';
 import dayjs from '../libs/dayjs';
 import { usePaymentContext } from '../contexts/payment';
 
+interface DiscountInfo {
+  promotion_code?: string;
+  coupon?: string;
+  discount_amount?: string;
+  promotion_code_details?: {
+    code?: string;
+  };
+  coupon_details?: {
+    percent_off?: number;
+    amount_off?: string;
+    currency_id?: string;
+    currency_options?: Record<string, { amount_off?: string }>;
+  };
+  verification_data?: {
+    code?: string;
+  };
+}
+
 type Props = {
   item: TLineItemExpanded;
   items: TLineItemExpanded[];
@@ -44,6 +67,13 @@ type Props = {
   onQuantityChange?: (itemId: string, quantity: number) => void;
   completed?: boolean;
   showFeatures?: boolean;
+  exchangeRate?: string | null;
+  isStripePayment?: boolean;
+  isPriceLocked?: boolean;
+  isRateLoading?: boolean;
+  // Discount display props
+  discounts?: DiscountInfo[];
+  calculatedDiscountAmount?: string | null;
 };
 
 const getRecommendedQuantityFromUrl = (priceId: string): number | undefined => {
@@ -89,13 +119,22 @@ export default function ProductItem({
   adjustableQuantity = { enabled: false },
   onQuantityChange = () => {},
   showFeatures = false,
+  exchangeRate = null,
+  isStripePayment = false,
+  isPriceLocked = false,
+  isRateLoading = false,
+  discounts = [],
+  calculatedDiscountAmount = null,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { settings, setPayable, session, api } = usePaymentContext();
-  const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
+  const pricingSource = item.upsell_price || item.price;
+  const isDynamicPricing = (pricingSource as any)?.pricing_type === 'dynamic';
+  const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays, exchangeRate }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && items.length === 1;
+  const isTrial = trialInDays > 0 || trialEnd > dayjs().unix();
 
   // Check if this is a credit product - be more lenient in detection
   const isCreditProduct = item.price.product?.type === 'credit' && item.price.metadata?.credit_config;
@@ -137,8 +176,12 @@ export default function ProductItem({
   );
 
   const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
+
   const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
-  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const quantityAvailable = Math.min(
+    item.price?.quantity_limit_per_checkout ?? Infinity,
+    item.price?.quantity_available ?? Infinity
+  );
   const maxQuantity = quantityAvailable
     ? Math.min(adjustableQuantity.maximum || Infinity, quantityAvailable)
     : adjustableQuantity.maximum || Infinity;
@@ -230,7 +273,7 @@ export default function ProductItem({
       onQuantityChange(item.price_id, newQuantity);
 
       if (userDid && newQuantity > 0) {
-        saveUserQuantityPreference(userDid, item.price.id, newQuantity);
+        saveUserQuantityPreference(userDid, item.price?.id, newQuantity);
       }
     }
   };
@@ -263,7 +306,7 @@ export default function ProductItem({
     const formattedTotalCredit = formatCreditForCheckout(totalCreditStr, currencySymbol, locale);
 
     const hasPendingAmount = pendingAmount && new BN(pendingAmount || '0').gt(new BN(0));
-    const isRecurring = item.price.type === 'recurring';
+    const isRecurring = item.price?.type === 'recurring';
     const hasExpiry = validDuration && validDuration > 0;
 
     const buildBaseParams = () => ({
@@ -273,7 +316,7 @@ export default function ProductItem({
         unit: t(`common.${validDurationUnit}`),
       }),
       ...(isRecurring && {
-        period: formatRecurring(item.price.recurring!, true, 'per', locale),
+        period: formatRecurring(item.price?.recurring!, true, 'per', locale),
       }),
     });
 
@@ -296,7 +339,7 @@ export default function ProductItem({
         unit: t(`common.${validDurationUnit}`),
       }),
       ...(isRecurring && {
-        period: formatRecurring(item.price.recurring!, true, 'per', locale),
+        period: formatRecurring(item.price?.recurring!, true, 'per', locale),
       }),
     });
 
@@ -331,6 +374,63 @@ export default function ProductItem({
     return t(getLocaleKey('pending', type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
 
+  const quantityForUsd = Number.isFinite(localQuantity) ? Number(localQuantity) : item.quantity || 0;
+
+  // For dynamic pricing, calculate token display from live exchange rate
+  // Final Freeze: Only use live rate (prop) for preview, quoted_amount for locked quotes
+  // Also supports non-dynamic pricing with exchange rate (e.g., cross-sell products)
+  const dynamicTokenDisplay = useMemo(() => {
+    if (isStripePayment || !currency) {
+      return null;
+    }
+
+    // Get USD amount: prefer base_amount (dynamic pricing), fallback to unit_amount (fixed pricing)
+    const baseAmount = (pricingSource as any)?.base_amount;
+    const unitAmount = pricingSource?.unit_amount;
+
+    // For dynamic pricing products
+    if (isDynamicPricing && baseAmount !== undefined && baseAmount !== null) {
+      // Only use quoted_amount when price is locked (after submit)
+      if (isPriceLocked) {
+        const quotedAmount = (item as any)?.quoted_amount;
+        if (quotedAmount) {
+          const totalBN = new BN(quotedAmount);
+          const tokenValue = fromUnitToToken(totalBN, currency.decimal);
+          return `${formatDynamicPrice(tokenValue, true, 6)} ${currency.symbol}`;
+        }
+      }
+
+      if (!exchangeRate) {
+        return null;
+      }
+      const rate = Number(exchangeRate);
+      if (rate <= 0 || Number.isNaN(rate)) {
+        return null;
+      }
+      // base_amount is stored in dollar format (e.g., "1.00" = $1.00), NOT cents
+      const usdAmount = Number(baseAmount);
+      const tokenAmount = usdAmount / rate;
+      const totalTokens = tokenAmount * (quantityForUsd || 1);
+      return `${formatDynamicPrice(totalTokens, true, 6)} ${currency.symbol}`;
+    }
+
+    // For non-dynamic pricing products (e.g., cross-sell): convert USD to current currency using rate
+    // This allows showing "10 PLAY3" instead of "$1.00" when paying with crypto
+    if (!isDynamicPricing && exchangeRate && unitAmount) {
+      const rate = Number(exchangeRate);
+      if (rate <= 0 || Number.isNaN(rate)) {
+        return null;
+      }
+      // unit_amount is in cents, convert to dollars first
+      const usdAmount = Number(unitAmount) / 100;
+      const tokenAmount = usdAmount / rate;
+      const totalTokens = tokenAmount * (quantityForUsd || 1);
+      return `${formatDynamicPrice(totalTokens, true, 6)} ${currency.symbol}`;
+    }
+
+    return null;
+  }, [isStripePayment, isDynamicPricing, currency, pricingSource, item, exchangeRate, quantityForUsd, isPriceLocked]);
+
   // Format credit schedule info for display
   const formatScheduleInfo = () => {
     if (!hasSchedule || !scheduleConfig) return null;
@@ -386,15 +486,299 @@ export default function ProductItem({
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === 'recurring' && price?.recurring;
-    const trial = trialInDays > 0 || trialEnd > dayjs().unix();
-    if (isRecurring && !trial && price?.recurring?.usage_type !== 'metered') {
-      return `${pricing.primary} ${price.recurring ? formatRecurring(price.recurring, false, 'slash', locale) : ''}`;
+
+    // For trial scenarios, always use the formatted trial message from pricing.primary
+    // (e.g., "Free 7-day trial") instead of the calculated token amount
+    if (isTrial) {
+      return pricing.primary;
+    }
+
+    // Determine display amount based on payment type and available data
+    let displayAmount: string;
+
+    // If we have dynamicTokenDisplay (dynamic pricing OR cross-sell with exchange rate), use it
+    if (!isStripePayment && dynamicTokenDisplay) {
+      displayAmount = dynamicTokenDisplay;
+    } else if (isDynamicPricing && !isStripePayment) {
+      // Dynamic pricing but no rate available - show USD fallback
+      const baseAmount = (pricingSource as any)?.base_amount;
+      if (baseAmount !== undefined && baseAmount !== null) {
+        const usdValue = Number(baseAmount);
+        displayAmount = `≈ $${usdValue.toFixed(2)}`;
+      } else {
+        displayAmount = pricing.primary;
+      }
+    } else {
+      // Stripe payment or no special handling needed
+      displayAmount = pricing.primary;
     }
-    return pricing.primary;
-  }, [trialInDays, trialEnd, pricing, item, locale]);
+
+    if (isRecurring && price?.recurring?.usage_type !== 'metered') {
+      return `${displayAmount} ${price.recurring ? formatRecurring(price.recurring, false, 'slash', locale) : ''}`;
+    }
+    return displayAmount;
+  }, [isTrial, pricing, item, locale, dynamicTokenDisplay, isDynamicPricing, pricingSource, isStripePayment]);
+
+  const usdReference = useMemo(() => {
+    // Stripe payments don't need USD reference - base_amount is already USD
+    if (!currency || !isDynamicPricing || isStripePayment) {
+      return null;
+    }
+    const baseAmount = (pricingSource as any)?.base_amount;
+    const hasBaseAmount = baseAmount !== undefined && baseAmount !== null;
+    if (hasBaseAmount) {
+      return getUsdAmountFromBaseAmount(baseAmount, quantityForUsd);
+    }
+    return null;
+  }, [currency, pricingSource, quantityForUsd, isDynamicPricing, isStripePayment]);
+  const usdReferenceDisplay = useMemo(() => formatUsdAmount(usdReference, locale), [usdReference, locale]);
+
+  // Calculate upsell price display with exchange rate conversion
+  // Shows "X PLAY3 每月" instead of "$1.00 每月" when paying with crypto
+  // For Stripe, shows "1 USD 每月" instead of "$1.00 每月"
+  const upsellTokenDisplay = useMemo(() => {
+    const upsellPrice = item.price?.upsell?.upsells_to;
+    if (!upsellPrice) {
+      return null;
+    }
+
+    // For Stripe payment: format as "1 USD 每月" instead of "$1.00 每月"
+    if (isStripePayment && currency) {
+      const baseAmount = (upsellPrice as any)?.base_amount;
+      const unitAmount = upsellPrice?.unit_amount;
+
+      let usdAmount: number;
+      if (baseAmount !== undefined && baseAmount !== null) {
+        usdAmount = Number(baseAmount);
+      } else if (unitAmount) {
+        usdAmount = Number(unitAmount) / 100;
+      } else {
+        return null;
+      }
+
+      const recurring = upsellPrice?.recurring
+        ? ` ${formatRecurring(upsellPrice.recurring, false, 'slash', locale)}`
+        : '';
+      return `${usdAmount} ${currency.symbol}${recurring}`;
+    }
+
+    // For crypto payment: need exchange rate
+    if (!currency || !exchangeRate) {
+      return null;
+    }
+
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || Number.isNaN(rate)) {
+      return null;
+    }
+
+    // Get USD amount: prefer base_amount (dynamic pricing), fallback to unit_amount (fixed pricing)
+    const baseAmount = (upsellPrice as any)?.base_amount;
+    const unitAmount = upsellPrice?.unit_amount;
+
+    let usdAmount: number;
+    if (baseAmount !== undefined && baseAmount !== null) {
+      // base_amount is in dollar format (e.g., "1.00" = $1.00)
+      usdAmount = Number(baseAmount);
+    } else if (unitAmount) {
+      // unit_amount is in cents
+      usdAmount = Number(unitAmount) / 100;
+    } else {
+      return null;
+    }
+
+    const tokenAmount = usdAmount / rate;
+    const recurring = upsellPrice?.recurring
+      ? ` ${formatRecurring(upsellPrice.recurring, false, 'slash', locale)}`
+      : '';
+    return `${formatDynamicPrice(tokenAmount, true, 6)} ${currency.symbol}${recurring}`;
+  }, [isStripePayment, currency, exchangeRate, item.price?.upsell?.upsells_to, locale]);
+
+  // Calculate downsell price display with exchange rate conversion
+  // Shows "X ABT 每天" instead of "$0.50 每天" when paying with crypto
+  const downsellTokenDisplay = useMemo(() => {
+    // Only show when upsell is active (item.upsell_price_id exists)
+    if (!item.upsell_price_id || !item.price) {
+      return null;
+    }
+
+    const originalPrice = item.price;
+
+    // For Stripe payment: format as "0.5 USD 每天" instead of "$0.50 每天"
+    if (isStripePayment && currency) {
+      const baseAmount = (originalPrice as any)?.base_amount;
+      const unitAmount = originalPrice?.unit_amount;
+
+      let usdAmount: number;
+      if (baseAmount !== undefined && baseAmount !== null) {
+        usdAmount = Number(baseAmount);
+      } else if (unitAmount) {
+        usdAmount = Number(unitAmount) / 100;
+      } else {
+        return null;
+      }
+
+      const recurring = originalPrice?.recurring
+        ? ` ${formatRecurring(originalPrice.recurring, false, 'slash', locale)}`
+        : '';
+      return `${usdAmount} ${currency.symbol}${recurring}`;
+    }
+
+    // For crypto payment: need exchange rate
+    if (!currency || !exchangeRate) {
+      return null;
+    }
+
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || Number.isNaN(rate)) {
+      return null;
+    }
+
+    // Get USD amount: prefer base_amount (dynamic pricing), fallback to unit_amount (fixed pricing)
+    const baseAmount = (originalPrice as any)?.base_amount;
+    const unitAmount = originalPrice?.unit_amount;
+
+    let usdAmount: number;
+    if (baseAmount !== undefined && baseAmount !== null) {
+      usdAmount = Number(baseAmount);
+    } else if (unitAmount) {
+      usdAmount = Number(unitAmount) / 100;
+    } else {
+      return null;
+    }
+
+    const tokenAmount = usdAmount / rate;
+    const recurring = originalPrice?.recurring
+      ? ` ${formatRecurring(originalPrice.recurring, false, 'slash', locale)}`
+      : '';
+    return `${formatDynamicPrice(tokenAmount, true, 6)} ${currency.symbol}${recurring}`;
+  }, [isStripePayment, currency, exchangeRate, item.price, item.upsell_price_id, locale]);
+
+  // Calculate frontend-displayed discount amount for this item
+  // For dynamic pricing: use coupon info + exchange rate to calculate
+  // For Stripe: calculate from USD amounts
+  // For single-item scenarios: use calculatedDiscountAmount directly
+  const displayItemDiscountAmount = useMemo(() => {
+    // Skip discount display when no payment is made:
+    // 1. During trial for recurring items - trial period has no charge
+    // 2. Metered pricing - initial amount is 0 (charged based on actual usage)
+    if ((isTrial && item.price?.type === 'recurring') || item.price?.recurring?.usage_type === 'metered') {
+      return null;
+    }
+
+    // Skip if no discounts
+    if (!discounts?.length) {
+      return null;
+    }
+
+    const couponDetails = discounts[0]?.coupon_details;
+
+    // For Stripe payment: calculate discount from USD amounts (in cents)
+    if (isStripePayment && couponDetails) {
+      // Check if this item is discountable
+      if (!(item as any).discountable) {
+        return null;
+      }
+
+      // Get item's USD amount in cents
+      const isDynamic = (pricingSource as any)?.pricing_type === 'dynamic';
+      const baseAmount = (pricingSource as any)?.base_amount;
+      const unitAmount = pricingSource?.unit_amount;
+
+      let amountCents: number;
+      if (isDynamic && baseAmount !== undefined && baseAmount !== null) {
+        // base_amount is in dollars, convert to cents
+        amountCents = Number(baseAmount) * 100;
+      } else if (unitAmount) {
+        // unit_amount is in cents
+        amountCents = Number(unitAmount);
+      } else {
+        return null;
+      }
+
+      const quantity = localQuantity || item.quantity || 1;
+      const itemSubtotalCents = amountCents * quantity;
+
+      // For percent_off: itemAmount * percent_off / 100
+      if (couponDetails.percent_off && couponDetails.percent_off > 0) {
+        const discountCents = Math.round((itemSubtotalCents * couponDetails.percent_off) / 100);
+        return discountCents.toString();
+      }
+
+      // For amount_off with single item: use the passed calculatedDiscountAmount
+      if (couponDetails.amount_off && items.length === 1 && calculatedDiscountAmount) {
+        return calculatedDiscountAmount;
+      }
+
+      return null;
+    }
+
+    // For dynamic pricing with live rate, calculate discount from scratch
+    if (isDynamicPricing && exchangeRate && couponDetails) {
+      const rateNum = Number(exchangeRate);
+      if (rateNum <= 0) {
+        return null;
+      }
+
+      // Check if this item is discountable
+      if (!(item as any).discountable) {
+        return null;
+      }
+
+      // Get item's base amount
+      const baseAmount = (pricingSource as any)?.base_amount;
+      if (!baseAmount) {
+        return null;
+      }
+
+      const quantity = localQuantity || item.quantity || 1;
+      const itemTokenAmount = (Number(baseAmount) * quantity) / rateNum;
+
+      // For percent_off: itemAmount * percent_off / 100
+      if (couponDetails.percent_off && couponDetails.percent_off > 0) {
+        const discountAmount = (itemTokenAmount * couponDetails.percent_off) / 100;
+        const discountAmountUnit = fromTokenToUnit(
+          discountAmount.toFixed(currency.decimal || 8),
+          currency.decimal || 8
+        );
+        return discountAmountUnit.toString();
+      }
+
+      // For amount_off with single item: use the passed calculatedDiscountAmount
+      if (couponDetails.amount_off && items.length === 1 && calculatedDiscountAmount) {
+        return calculatedDiscountAmount;
+      }
+    }
+
+    // Fallback for single item: use passed calculatedDiscountAmount
+    if (items.length === 1 && calculatedDiscountAmount) {
+      return calculatedDiscountAmount;
+    }
+
+    return null;
+  }, [
+    isTrial,
+    discounts,
+    isStripePayment,
+    isDynamicPricing,
+    exchangeRate,
+    item,
+    pricingSource,
+    localQuantity,
+    currency.decimal,
+    items.length,
+    calculatedDiscountAmount,
+  ]);
+
+  // Get discount code for display
+  const discountCodeDisplay = useMemo(() => {
+    if (!discounts?.length) return null;
+    const discount = discounts[0];
+    return discount.promotion_code_details?.code || discount.verification_data?.code || 'DISCOUNT';
+  }, [discounts]);
 
   const quantityInventoryError = formatQuantityInventory(item.price, localQuantityNum, locale);
-  const features = item.price.product?.features || [];
+  const features = item.price?.product?.features || [];
 
   return (
     <Stack
@@ -422,17 +806,17 @@ export default function ProductItem({
             width: '100%',
           }}>
           <ProductCard
-            logo={item.price.product?.images[0]}
-            name={item.price.product?.name}
-            // description={showDescription ? item.price.product?.description : undefined}
+            logo={item.price?.product?.images[0]}
+            name={item.price?.product?.name}
+            // description={showDescription ? item.price?.product?.description : undefined}
             extra={
               <Box
                 sx={{
                   display: 'flex',
                   alignItems: 'center',
                 }}>
-                {item.price.type === 'recurring' && item.price.recurring
-                  ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
+                {item.price?.type === 'recurring' && item.price?.recurring
+                  ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price?.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                   : pricing.quantity}
               </Box>
             }
@@ -443,29 +827,53 @@ export default function ProductItem({
               alignItems: 'flex-end',
               flex: 1,
             }}>
-            <Typography sx={{ color: 'text.primary', fontWeight: 500, whiteSpace: 'nowrap' }} gutterBottom>
-              {primaryText}
-            </Typography>
-            {pricing.secondary && (
+            <LoadingAmount
+              value={primaryText}
+              loading={isRateLoading}
+              skeletonWidth={80}
+              height={20}
+              sx={{ color: 'text.primary', fontWeight: 500 }}
+            />
+            {/* For trial scenarios, don't show USD reference or secondary pricing - they're redundant */}
+            {/* No skeleton needed - USD equivalent is based on base_amount which doesn't change */}
+            {isDynamicPricing && !isStripePayment && !isTrial && usdReferenceDisplay && (
+              <Typography sx={{ fontSize: '0.74375rem', color: 'text.lighter' }}>≈ ${usdReferenceDisplay}</Typography>
+            )}
+            {pricing.secondary && !isTrial && (
               <Typography sx={{ fontSize: '0.74375rem', color: 'text.lighter' }}>{pricing.secondary}</Typography>
             )}
           </Stack>
         </Stack>
 
         {/* Display discount information for this item */}
-        {item.discount_amounts && item.discount_amounts.length > 0 && (
-          <Stack direction="row" spacing={1} sx={{ mt: 1, alignItems: 'center' }}>
-            {item.discount_amounts.map((discountAmount: any) => (
+        {/* Priority: use frontend-calculated displayItemDiscountAmount for dynamic pricing */}
+        {/* Fallback: use backend item.discount_amounts for non-dynamic pricing */}
+        {/* Hide when no payment: trial for recurring items, or metered pricing (initial amount is 0) */}
+        {!((isTrial && item.price?.type === 'recurring') || item.price?.recurring?.usage_type === 'metered') &&
+          (displayItemDiscountAmount || (item.discount_amounts && item.discount_amounts.length > 0)) && (
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                mt: 1,
+                alignItems: 'center',
+                opacity: isRateLoading ? 0 : 1,
+                transition: 'opacity 300ms ease-in-out',
+              }}>
               <Chip
-                key={discountAmount.promotion_code}
                 icon={<LocalOffer sx={{ fontSize: '0.8rem !important' }} />}
                 label={
                   <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
                     <Typography component="span" sx={{ fontSize: '0.75rem', fontWeight: 'medium' }}>
-                      {discountAmount.promotion_code?.code || 'DISCOUNT'}
+                      {discountCodeDisplay || 'DISCOUNT'}
                     </Typography>
                     <Typography component="span" sx={{ fontSize: '0.75rem' }}>
-                      (-{formatAmount(discountAmount.amount || '0', currency.decimal)} {currency.symbol})
+                      (-
+                      {formatAmount(
+                        displayItemDiscountAmount || item.discount_amounts?.[0]?.amount || '0',
+                        currency.decimal
+                      )}{' '}
+                      {currency.symbol})
                     </Typography>
                   </Box>
                 }
@@ -481,9 +889,8 @@ export default function ProductItem({
                   },
                 }}
               />
-            ))}
-          </Stack>
-        )}
+            </Stack>
+          )}
 
         {showFeatures && features.length > 0 && (
           <Box
@@ -613,7 +1020,7 @@ export default function ProductItem({
 
         {children}
       </Stack>
-      {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (
+      {canUpsell && !item.upsell_price_id && item.price?.upsell?.upsells_to && (
         <Stack
           direction="row"
           className="product-item-upsell"
@@ -635,10 +1042,15 @@ export default function ProductItem({
               sx={{ mr: 1 }}
               variant="success"
               checked={false}
-              onChange={() => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)}
+              onChange={() => onUpsell(item.price_id, item.price?.upsell?.upsells_to_id)}
             />
             {t('payment.checkout.upsell.save', {
-              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring, true, 'per', locale),
+              recurring: formatRecurring(
+                item.price?.upsell?.upsells_to?.recurring as PriceRecurring,
+                true,
+                'per',
+                locale
+              ),
             })}
             <Status
               label={t('payment.checkout.upsell.off', { saving })}
@@ -652,7 +1064,8 @@ export default function ProductItem({
             />
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)}
+            {upsellTokenDisplay ||
+              formatPrice(item.price?.upsell?.upsells_to, currency, item.price?.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}
@@ -681,11 +1094,12 @@ export default function ProductItem({
               onChange={() => onDownsell(item.upsell_price_id)}
             />
             {t('payment.checkout.upsell.revert', {
-              recurring: t(`common.${formatRecurring(item.price.recurring as PriceRecurring)}`),
+              recurring: t(`common.${formatRecurring(item.price?.recurring as PriceRecurring)}`),
             })}
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale)}
+            {downsellTokenDisplay ||
+              formatPrice(item.price, currency, item.price?.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}