@blocklet/payment-react 1.24.3 → 1.25.0

package/src/payment/summary.tsx

@@ -1,14 +1,16 @@
 /* eslint-disable @typescript-eslint/indent */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
 import type {
   DonationSettings,
+  TCheckoutSession,
   TLineItemExpanded,
   TPaymentCurrency,
-  TCheckoutSession,
+  TPaymentIntent,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
-import { HelpOutline, Close, LocalOffer } from '@mui/icons-material';
-import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton, Button } from '@mui/material';
+import { HelpOutline } from '@mui/icons-material';
+import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from '@mui/material';
 import type { IconButtonProps } from '@mui/material';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
@@ -16,42 +18,28 @@ import noop from 'lodash/noop';
 import useBus from 'use-bus';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { styled } from '@mui/material/styles';
+import { useEffect, useMemo, useRef } from 'react';
 import Status from '../components/status';
 import api from '../libs/api';
 import {
   formatAmount,
   formatCheckoutHeadlines,
   getPriceUintAmountByCurrency,
-  formatCouponTerms,
-  formatNumber,
+  formatDynamicPrice,
   findCurrency,
+  formatError,
 } from '../libs/util';
-import PaymentAmount from './amount';
 import ProductDonation from './product-donation';
 import ProductItem from './product-item';
 import Livemode from '../components/livemode';
 import { usePaymentContext } from '../contexts/payment';
 import { useMobile } from '../hooks/mobile';
+import { useDynamicPricing, type LiveRateInfo, type LiveQuoteSnapshot } from '../hooks/dynamic-pricing';
 import LoadingButton from '../components/loading-button';
-import PromotionCode from '../components/promotion-code';
-
-// const shake = keyframes`
-//   0% {
-//     transform: rotate(0deg);
-//   }
-//   25% {
-//     transform: rotate(2deg);
-//   }
-//   50% {
-//     transform: rotate(0eg);
-//   }
-//   75% {
-//     transform: rotate(-2deg);
-//   }
-//   100% {
-//     transform: rotate(0deg);
-//   }
-// `;
+import DynamicPricingUnavailable from '../components/dynamic-pricing-unavailable';
+import PromotionSection from './summary-section/promotion-section';
+import TotalSection from './summary-section/total-section';
+import type { SlippageConfigValue } from '../components/slippage-config';
 
 interface ExpandMoreProps extends IconButtonProps {
   expand: boolean;
@@ -83,13 +71,25 @@ type Props = {
   onCancelCrossSell?: Function;
   checkoutSessionId?: string;
   crossSellBehavior?: string;
-  donationSettings?: DonationSettings; // only include backend part
+  donationSettings?: DonationSettings;
   action?: string;
   completed?: boolean;
   checkoutSession?: TCheckoutSession;
+  paymentIntent?: TPaymentIntent | null;
   onPromotionUpdate?: () => void;
   paymentMethods?: TPaymentMethodExpanded[];
   showFeatures?: boolean;
+  rateUnavailable?: boolean;
+  rateError?: string;
+  isRateLoading?: boolean; // Loading state for skeleton display during currency switch
+  onQuoteExpired?: (forceRefresh?: boolean) => void;
+  onRefreshRate?: () => Promise<void>;
+  onSlippageChange?: (slippageConfig: SlippageConfigValue) => void;
+  slippageConfig?: SlippageConfigValue;
+  liveRate?: LiveRateInfo;
+  liveQuoteSnapshot?: LiveQuoteSnapshot;
+  isStripePayment?: boolean;
+  isSubscription?: boolean;
 };
 
 async function fetchCrossSell(id: string, skipError = true) {
@@ -98,7 +98,6 @@ async function fetchCrossSell(id: string, skipError = true) {
     if (!data.error) {
       return data;
     }
-
     return null;
   } catch (err) {
     return null;
@@ -139,6 +138,7 @@ function getStakingSetup(items: TLineItemExpanded[], currency: TPaymentCurrency,
 
   return '0';
 }
+
 export default function PaymentSummary({
   items,
   currency,
@@ -158,9 +158,22 @@ export default function PaymentSummary({
   trialEnd = 0,
   completed = false,
   checkoutSession = undefined,
+  paymentIntent = undefined,
   paymentMethods = [],
   onPromotionUpdate = noop,
   showFeatures = false,
+  rateUnavailable = false,
+  isRateLoading = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rateError: _rateError = undefined, // Technical errors are logged but not displayed to users
+  onQuoteExpired = undefined,
+  onRefreshRate = undefined,
+  onSlippageChange = undefined,
+  slippageConfig: slippageConfigProp = undefined,
+  liveRate = undefined,
+  liveQuoteSnapshot = undefined,
+  isStripePayment = false,
+  isSubscription: isSubscriptionProp = undefined,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -171,10 +184,12 @@ export default function PaymentSummary({
     checkoutSessionId ? fetchCrossSell(checkoutSessionId, skipError) : Promise.resolve(null)
   );
 
+  // Discounts and promotion codes
   const sessionDiscounts = (checkoutSession as any)?.discounts || [];
   const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
   const hasDiscounts = sessionDiscounts?.length > 0;
 
+  // Resolve discount currency
   const discountCurrency =
     paymentMethods && checkoutSession
       ? (findCurrency(
@@ -182,26 +197,183 @@ export default function PaymentSummary({
           hasDiscounts ? checkoutSession?.currency_id || currency.id : (currency.id as string)
         ) as TPaymentCurrency) || settings.settings?.baseCurrency
       : currency;
+  const slippageConfig = slippageConfigProp ?? (checkoutSession as any)?.metadata?.slippage;
+
+  // Use the dynamic pricing hook for all rate-related calculations
+  const {
+    hasDynamicPricing,
+    isPriceLocked,
+    quoteMeta,
+    rateInfo,
+    quoteLockedAt,
+    currentSlippagePercent,
+    rateDisplay,
+    calculatedTokenAmount,
+    calculatedDiscountAmount,
+    calculateUsdDisplay,
+    buildQuoteDetailRows,
+  } = useDynamicPricing({
+    items,
+    currency: discountCurrency,
+    liveRate,
+    liveQuoteSnapshot,
+    checkoutSession,
+    paymentIntent,
+    locale,
+    isStripePayment,
+    isSubscription: isSubscriptionProp,
+    slippageConfig,
+    trialInDays,
+    trialEnd,
+    discounts: sessionDiscounts,
+  });
 
-  const headlines = formatCheckoutHeadlines(items, discountCurrency, { trialEnd, trialInDays }, locale);
+  // Headlines and amount calculations
+  const headlines = formatCheckoutHeadlines(items, discountCurrency, { trialEnd, trialInDays }, locale, {
+    exchangeRate: rateInfo.exchangeRate,
+  });
   const staking = showStaking ? getStakingSetup(items, discountCurrency, billingThreshold) : '0';
 
-  const getAppliedPromotionCodes = () => {
-    if (!sessionDiscounts?.length) return [];
+  // For Stripe payments, always use standard formatting regardless of dynamic pricing
+  // This prevents calculation errors when switching from crypto to fiat payments
+  const effectiveHasDynamicPricing = hasDynamicPricing && !isStripePayment;
 
-    return sessionDiscounts.map((discount: any) => ({
-      id: discount.promotion_code || discount.coupon,
-      code: discount.verification_data?.code || 'APPLIED',
-      discount_amount: discount.discount_amount,
-    }));
-  };
+  // Check if this is a trial scenario: actualAmount is '0' AND it's a subscription
+  // Only subscriptions (recurring items) have trials - one_time products should still be charged
+  const hasRecurringItems = items.some((x) => (x.upsell_price || x.price)?.type === 'recurring');
+  const isTrialScenario = headlines.actualAmount === '0' && hasRecurringItems;
+
+  const headlineAmountDisplay = useMemo(() => {
+    // For Stripe payments, use standard formatting regardless of dynamic pricing
+    if (!effectiveHasDynamicPricing) {
+      return headlines.amount;
+    }
+    // For trial scenarios, use the formatted trial amount (e.g., "Free 7-day trial")
+    if (isTrialScenario || !headlines.amount.includes(discountCurrency.symbol)) {
+      return headlines.amount;
+    }
+    if (calculatedTokenAmount) {
+      const displayAmount = fromUnitToToken(calculatedTokenAmount, discountCurrency?.decimal);
+      const formatted = formatDynamicPrice(displayAmount, true, 6);
+      return `${formatted} ${discountCurrency.symbol}`;
+    }
+    const formatted = formatDynamicPrice(headlines.actualAmount, true, 6);
+    return `${formatted} ${discountCurrency.symbol}`;
+  }, [
+    headlines.amount,
+    headlines.actualAmount,
+    discountCurrency.symbol,
+    discountCurrency?.decimal,
+    effectiveHasDynamicPricing,
+    calculatedTokenAmount,
+    isTrialScenario,
+  ]);
+
+  // Amount calculations - wrap discountAmount in useMemo to avoid dependency warning
+  const discountAmount = useMemo(
+    () => new BN(checkoutSession?.total_details?.amount_discount || '0'),
+    [checkoutSession?.total_details?.amount_discount]
+  );
+  const subtotalAmountUnit = new BN(fromTokenToUnit(headlines.actualAmount, discountCurrency?.decimal))
+    .add(new BN(staking))
+    .toString();
+  const subtotalAmount = fromUnitToToken(subtotalAmountUnit, discountCurrency?.decimal);
+  const totalAmountUnit = new BN(subtotalAmountUnit).sub(discountAmount).toString();
+  const totalAmountValue = fromUnitToToken(totalAmountUnit, discountCurrency?.decimal);
+
+  // Format displays - for dynamic pricing, include staking in the calculated total
+  // For trial scenarios, don't add calculatedTokenAmount since payment amount is 0
+  const subtotalDisplay = useMemo(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      const dynamicSubtotalUnit = new BN(calculatedTokenAmount).add(new BN(staking)).toString();
+      const displayAmount = fromUnitToToken(dynamicSubtotalUnit, discountCurrency?.decimal);
+      return formatDynamicPrice(displayAmount, true, 6);
+    }
+    return formatDynamicPrice(subtotalAmount, effectiveHasDynamicPricing, 6);
+  }, [
+    effectiveHasDynamicPricing,
+    calculatedTokenAmount,
+    staking,
+    discountCurrency?.decimal,
+    subtotalAmount,
+    isTrialScenario,
+  ]);
+
+  const totalAmountDisplay = useMemo(() => {
+    // For trial scenarios, don't add calculatedTokenAmount since payment amount is 0
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      // Use calculatedDiscountAmount (frontend) instead of discountAmount (backend)
+      // Backend discountAmount is stale when exchange rate changes
+      const effectiveDiscount = calculatedDiscountAmount ? new BN(calculatedDiscountAmount) : discountAmount;
+      const dynamicTotalUnit = new BN(calculatedTokenAmount).add(new BN(staking)).sub(effectiveDiscount).toString();
+      const displayAmount = fromUnitToToken(dynamicTotalUnit, discountCurrency?.decimal);
+      const numericValue = Number(displayAmount);
+      if (Number.isFinite(numericValue) && numericValue >= 0) {
+        return formatDynamicPrice(displayAmount, true, 6);
+      }
+    }
+
+    // For Stripe payments: use calculatedDiscountAmount when backend discountAmount is 0 or stale
+    // This ensures correct total when discount is applied but backend hasn't recalculated
+    if (isStripePayment && calculatedDiscountAmount && !isTrialScenario) {
+      const effectiveDiscount = new BN(calculatedDiscountAmount);
+      const adjustedTotalUnit = new BN(subtotalAmountUnit).sub(effectiveDiscount).toString();
+      const displayAmount = fromUnitToToken(adjustedTotalUnit, discountCurrency?.decimal);
+      const numericValue = Number(displayAmount);
+      if (Number.isFinite(numericValue) && numericValue >= 0) {
+        return formatDynamicPrice(displayAmount, false, 6);
+      }
+    }
+
+    return formatDynamicPrice(totalAmountValue, effectiveHasDynamicPricing, 6);
+  }, [
+    effectiveHasDynamicPricing,
+    calculatedTokenAmount,
+    staking,
+    discountAmount,
+    calculatedDiscountAmount,
+    discountCurrency?.decimal,
+    totalAmountValue,
+    isTrialScenario,
+    isStripePayment,
+    subtotalAmountUnit,
+  ]);
+  const totalAmountText = totalAmountDisplay === '—' ? '—' : `${totalAmountDisplay} ${discountCurrency.symbol}`;
+
+  // Fix: Use dynamically calculated total for USD display, not static totalAmountValue
+  // For Stripe payments, no USD equivalent display is needed since it's already USD
+  // For trial scenarios, don't add calculatedTokenAmount since payment amount is 0
+  const totalUsdDisplay = useMemo(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      // Use calculatedDiscountAmount (frontend) instead of discountAmount (backend)
+      const effectiveDiscount = calculatedDiscountAmount ? new BN(calculatedDiscountAmount) : discountAmount;
+      const dynamicTotalUnit = new BN(calculatedTokenAmount).add(new BN(staking)).sub(effectiveDiscount).toString();
+      const dynamicTotalToken = fromUnitToToken(dynamicTotalUnit, discountCurrency?.decimal);
+      return calculateUsdDisplay(dynamicTotalToken);
+    }
+    return calculateUsdDisplay(totalAmountValue);
+  }, [
+    effectiveHasDynamicPricing,
+    calculatedTokenAmount,
+    staking,
+    discountAmount,
+    calculatedDiscountAmount,
+    discountCurrency?.decimal,
+    totalAmountValue,
+    calculateUsdDisplay,
+    isTrialScenario,
+  ]);
 
+  const quoteDetailRows = buildQuoteDetailRows(t);
+  const isSubscription =
+    isSubscriptionProp ?? (checkoutSession?.mode === 'subscription' || checkoutSession?.mode === 'setup');
+
+  // Promotion handlers
   const handlePromotionUpdate = () => {
     onPromotionUpdate?.();
   };
 
   const handleRemovePromotion = async (sessionId: string) => {
-    // Prevent removing promotion during payment process
     if (paymentState.paying || paymentState.stripePaying) {
       return;
     }
@@ -213,18 +385,54 @@ export default function PaymentSummary({
     }
   };
 
-  const discountAmount = new BN(checkoutSession?.total_details?.amount_discount || '0');
+  // Quote expiry handling (backward compatibility - Final Freeze deprecates this)
+  const expiredHandledRef = useRef(false);
 
-  const subtotalAmount = fromUnitToToken(
-    new BN(fromTokenToUnit(headlines.actualAmount, discountCurrency?.decimal)).add(new BN(staking)).toString(),
-    discountCurrency?.decimal
-  );
+  useEffect(() => {
+    if (completed || expiredHandledRef.current) {
+      return;
+    }
+    // In Final Freeze, there's no quote during preview, so no expiry check needed
+    if (!liveQuoteSnapshot?.expires_at && !quoteMeta?.expiresAt) {
+      return;
+    }
+    const currentTime = Math.floor(Date.now() / 1000);
+    const effectiveExpiresAt = liveQuoteSnapshot?.expires_at ?? quoteMeta?.expiresAt;
+    const quoteRemaining = effectiveExpiresAt ? Math.max(0, effectiveExpiresAt - currentTime) : 0;
+    const lockRemaining = quoteLockedAt ? Math.max(0, quoteLockedAt + 180 - currentTime) : 0;
+    const hasExpiry = !!effectiveExpiresAt;
 
-  const totalAmount = fromUnitToToken(
-    new BN(fromTokenToUnit(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(),
-    discountCurrency?.decimal
-  );
+    const lockActive = lockRemaining > 0;
+    if (hasExpiry && !lockActive && quoteRemaining <= 0) {
+      expiredHandledRef.current = true;
+      onQuoteExpired?.();
+    }
+  }, [liveQuoteSnapshot?.expires_at, quoteMeta?.expiresAt, quoteLockedAt, completed, onQuoteExpired]);
+
+  // Slippage handler
+  const handleSlippageChange = async (newSlippageConfig: SlippageConfigValue) => {
+    if (!onSlippageChange) {
+      return;
+    }
+    if (!checkoutSessionId) {
+      onSlippageChange(newSlippageConfig);
+      return;
+    }
+    try {
+      await api.put(`/api/checkout-sessions/${checkoutSessionId}/slippage`, {
+        slippage_config: newSlippageConfig,
+      });
+      onSlippageChange(newSlippageConfig);
+      if (onQuoteExpired) {
+        await onQuoteExpired(true);
+      }
+    } catch (err: any) {
+      console.error('Failed to update slippage', err);
+      Toast.error(err.response?.data?.error || formatError(err));
+    }
+  };
 
+  // Cross-sell event handling
   useBus(
     'error.REQUIRE_CROSS_SELL',
     () => {
@@ -236,6 +444,7 @@ export default function PaymentSummary({
     []
   );
 
+  // Product action handlers
   const handleUpsell = async (from: string, to: string) => {
     await onUpsell!(from, to);
     runAsync(false);
@@ -276,6 +485,8 @@ export default function PaymentSummary({
   };
 
   const hasSubTotal = +staking > 0 || allowPromotionCodes;
+
+  // Product list component
   const ProductCardList = (
     <Stack
       className="cko-product-list"
@@ -285,7 +496,7 @@ export default function PaymentSummary({
       }}>
       <Stack spacing={{ xs: 1, sm: 2 }}>
         {items.map((x: TLineItemExpanded) =>
-          x.price.custom_unit_amount && onChangeAmount && donationSettings ? (
+          x.price?.custom_unit_amount && onChangeAmount && donationSettings ? (
             <ProductDonation
               key={`${x.price_id}-${discountCurrency.id}`}
               item={x}
@@ -301,12 +512,20 @@ export default function PaymentSummary({
               trialInDays={trialInDays}
               trialEnd={trialEnd}
               currency={discountCurrency}
+              exchangeRate={rateInfo.exchangeRate}
+              isStripePayment={isStripePayment}
+              isPriceLocked={isPriceLocked}
+              isRateLoading={isRateLoading}
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}
               adjustableQuantity={x.adjustable_quantity}
               completed={completed}
               showFeatures={showFeatures}
-              onQuantityChange={handleQuantityChange}>
+              onQuantityChange={handleQuantityChange}
+              discounts={sessionDiscounts}
+              calculatedDiscountAmount={
+                calculatedDiscountAmount || (isStripePayment ? discountAmount.toString() : null)
+              }>
               {x.cross_sell && (
                 <Stack
                   direction="row"
@@ -334,16 +553,17 @@ export default function PaymentSummary({
       </Stack>
       {data && items.some((x) => x.price_id === data.id) === false && (
         <Grow in>
-          <Stack
-            sx={{
-              mt: 1,
-            }}>
+          <Stack sx={{ mt: 1 }}>
             <ProductItem
               item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
               items={items}
               trialInDays={trialInDays}
               currency={discountCurrency}
               trialEnd={trialEnd}
+              exchangeRate={rateInfo.exchangeRate}
+              isStripePayment={isStripePayment}
+              isPriceLocked={isPriceLocked}
+              isRateLoading={isRateLoading}
               onUpsell={noop}
               onDownsell={noop}>
               <Stack
@@ -375,9 +595,15 @@ export default function PaymentSummary({
       )}
     </Stack>
   );
+
+  if (!discountCurrency || !items?.length) {
+    return null;
+  }
+
   return (
     <Fade in>
       <Stack className="cko-product" direction="column" {...rest}>
+        {/* Header */}
         <Box
           sx={{
             display: 'flex',
@@ -388,10 +614,7 @@ export default function PaymentSummary({
             title={t('payment.checkout.orderSummary')}
             sx={{
               color: 'text.primary',
-              fontSize: {
-                xs: '18px',
-                md: '24px',
-              },
+              fontSize: { xs: '18px', md: '24px' },
               fontWeight: '700',
               lineHeight: '32px',
             }}>
@@ -399,6 +622,13 @@ export default function PaymentSummary({
           </Typography>
           {!settings.livemode && <Livemode />}
         </Box>
+
+        {/* Dynamic pricing unavailable warning - hide for Stripe payments since no exchange rate needed */}
+        {effectiveHasDynamicPricing && rateUnavailable && (
+          <DynamicPricingUnavailable sx={{ mb: 2 }} onRetry={onRefreshRate} />
+        )}
+
+        {/* Product list (collapsible on mobile) */}
         {isMobile && !donationSettings ? (
           <>
             <Stack
@@ -421,42 +651,23 @@ export default function PaymentSummary({
         ) : (
           ProductCardList
         )}
+
         <Divider sx={{ mt: 2.5, mb: 2.5 }} />
+
+        {/* Staking section */}
         {+staking > 0 && (
           <Stack spacing={1}>
-            <Stack
-              direction="row"
-              spacing={1}
-              sx={{
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}>
-              <Stack
-                direction="row"
-                spacing={0.5}
-                sx={{
-                  alignItems: 'center',
-                }}>
+            <Stack direction="row" spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+              <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.paymentRequired')}</Typography>
                 <Tooltip title={t('payment.checkout.stakingConfirm')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
                 </Tooltip>
               </Stack>
-              <Typography>{headlines.amount}</Typography>
+              <Typography>{headlineAmountDisplay}</Typography>
             </Stack>
-            <Stack
-              direction="row"
-              spacing={1}
-              sx={{
-                justifyContent: 'space-between',
-                alignItems: 'center',
-              }}>
-              <Stack
-                direction="row"
-                spacing={0.5}
-                sx={{
-                  alignItems: 'center',
-                }}>
+            <Stack direction="row" spacing={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+              <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
                 <Typography sx={{ color: 'text.secondary' }}>{t('payment.checkout.staking.title')}</Typography>
                 <Tooltip title={t('payment.checkout.staking.tooltip')} placement="top" sx={{ maxWidth: '150px' }}>
                   <HelpOutline fontSize="small" sx={{ color: 'text.lighter' }} />
@@ -468,6 +679,8 @@ export default function PaymentSummary({
             </Stack>
           </Stack>
         )}
+
+        {/* Subtotal row */}
         {(allowPromotionCodes || hasDiscounts) && (
           <Stack
             direction="row"
@@ -484,120 +697,49 @@ export default function PaymentSummary({
             }}>
             <Typography className="base-label">{t('common.subtotal')}</Typography>
             <Typography>
-              {formatNumber(subtotalAmount)} {discountCurrency.symbol}
+              {subtotalDisplay} {discountCurrency.symbol}
             </Typography>
           </Stack>
         )}
-        {/* Promotion Code Section - only show add button if no discounts applied */}
-        {allowPromotionCodes && !hasDiscounts && (
-          <Box sx={{ mt: 1 }}>
-            <PromotionCode
-              checkoutSessionId={checkoutSession.id}
-              initialAppliedCodes={getAppliedPromotionCodes()}
-              disabled={completed}
-              onUpdate={handlePromotionUpdate}
-              currencyId={currency.id}
-            />
-          </Box>
-        )}
 
-        {/* Promotion Code Details */}
-        {hasDiscounts && (
-          <Box>
-            {sessionDiscounts.map((discount: any) => {
-              const promotionCodeInfo = discount.promotion_code_details;
-              const couponInfo = discount.coupon_details;
-              const discountDescription = couponInfo ? formatCouponTerms(couponInfo, discountCurrency, locale) : '';
-              const notSupported = discountDescription === t('payment.checkout.coupon.noDiscount');
-
-              return (
-                <Stack key={discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`}>
-                  <Stack
-                    direction="row"
-                    spacing={1}
-                    sx={{
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                    }}>
-                    <Stack
-                      direction="row"
-                      spacing={1}
-                      sx={{
-                        alignItems: 'center',
-                        backgroundColor: 'grey.100',
-                        width: 'fit-content',
-                        px: 1,
-                        py: 1,
-                        borderRadius: 1,
-                      }}>
-                      <Typography
-                        sx={{
-                          fontWeight: 'medium',
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: 0.5,
-                        }}>
-                        <LocalOffer sx={{ color: 'warning.main', fontSize: 'small' }} />
-                        {promotionCodeInfo?.code || discount.verification_data?.code || t('payment.checkout.discount')}
-                      </Typography>
-                      {!completed && (
-                        <Button
-                          size="small"
-                          disabled={paymentState.paying || paymentState.stripePaying}
-                          onClick={() => handleRemovePromotion(checkoutSessionId)}
-                          sx={{
-                            minWidth: 'auto',
-                            width: 16,
-                            height: 16,
-                            color: 'text.secondary',
-                            '&.Mui-disabled': {
-                              color: 'text.disabled',
-                            },
-                          }}>
-                          <Close sx={{ fontSize: 14 }} />
-                        </Button>
-                      )}
-                    </Stack>
-                    <Typography sx={{ color: 'text.secondary' }}>
-                      -{formatAmount(discount.discount_amount || '0', discountCurrency.decimal)}{' '}
-                      {discountCurrency.symbol}
-                    </Typography>
-                  </Stack>
-                  {/* Show discount description */}
-                  {discountDescription && (
-                    <Typography
-                      sx={{
-                        fontSize: 'small',
-                        color: notSupported ? 'error.main' : 'text.secondary',
-                        mt: 0.5,
-                      }}>
-                      {discountDescription}
-                    </Typography>
-                  )}
-                </Stack>
-              );
-            })}
-          </Box>
-        )}
+        {/* Promotion section */}
+        {/* For Stripe payments, use total_details.amount_discount (backend calculated) */}
+        {/* For dynamic pricing, use calculatedDiscountAmount (frontend calculated based on rate) */}
+        <PromotionSection
+          checkoutSessionId={checkoutSession?.id || checkoutSessionId}
+          currency={discountCurrency}
+          currencyId={currency.id}
+          discounts={sessionDiscounts}
+          allowPromotionCodes={allowPromotionCodes}
+          completed={completed}
+          disabled={paymentState.paying || paymentState.stripePaying}
+          onPromotionUpdate={handlePromotionUpdate}
+          onRemovePromotion={handleRemovePromotion}
+          calculatedDiscountAmount={calculatedDiscountAmount || (isStripePayment ? discountAmount.toString() : null)}
+          isRateLoading={isRateLoading}
+        />
+
         {hasSubTotal && <Divider sx={{ my: 1 }} />}
-        <Stack
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            flexDirection: 'row',
-            alignItems: 'center',
-            width: '100%',
-          }}>
-          <Box className="base-label">{t('common.total')} </Box>
-          <PaymentAmount amount={`${totalAmount} ${discountCurrency.symbol}`} sx={{ fontSize: '16px' }} />
-        </Stack>
-        {headlines.then && headlines.showThen && (
-          <Typography
-            component="div"
-            sx={{ fontSize: '0.7875rem', color: 'text.lighter', textAlign: 'right', margin: '-2px 0 8px' }}>
-            {headlines.then}
-          </Typography>
-        )}
+
+        {/* Total section */}
+        <TotalSection
+          totalAmountText={totalAmountText}
+          totalUsdDisplay={totalUsdDisplay}
+          currency={discountCurrency}
+          hasDynamicPricing={hasDynamicPricing}
+          rateDisplay={rateDisplay}
+          rateInfo={rateInfo}
+          quoteDetailRows={quoteDetailRows}
+          currentSlippagePercent={currentSlippagePercent}
+          slippageConfig={slippageConfig}
+          isPriceLocked={isPriceLocked}
+          isSubscription={isSubscription}
+          completed={completed}
+          onSlippageChange={onSlippageChange ? handleSlippageChange : undefined}
+          isStripePayment={isStripePayment}
+          isRateLoading={isRateLoading}
+          thenInfo={headlines.thenValue && headlines.showThen ? headlines.thenValue : undefined}
+        />
       </Stack>
     </Fade>
   );