@blocklet/payment-react 1.24.4 → 1.25.0

package/es/payment/summary.js

@@ -1,31 +1,35 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { HelpOutline, Close, LocalOffer } from "@mui/icons-material";
-import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton, Button } from "@mui/material";
+import Toast from "@arcblock/ux/lib/Toast";
+import { HelpOutline } from "@mui/icons-material";
+import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from "@mui/material";
 import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
 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.js";
 import api from "../libs/api.js";
 import {
   formatAmount,
   formatCheckoutHeadlines,
   getPriceUintAmountByCurrency,
-  formatCouponTerms,
-  formatNumber,
-  findCurrency
+  formatDynamicPrice,
+  findCurrency,
+  formatError
 } from "../libs/util.js";
-import PaymentAmount from "./amount.js";
 import ProductDonation from "./product-donation.js";
 import ProductItem from "./product-item.js";
 import Livemode from "../components/livemode.js";
 import { usePaymentContext } from "../contexts/payment.js";
 import { useMobile } from "../hooks/mobile.js";
+import { useDynamicPricing } from "../hooks/dynamic-pricing.js";
 import LoadingButton from "../components/loading-button.js";
-import PromotionCode from "../components/promotion-code.js";
+import DynamicPricingUnavailable from "../components/dynamic-pricing-unavailable.js";
+import PromotionSection from "./summary-section/promotion-section.js";
+import TotalSection from "./summary-section/total-section.js";
 const ExpandMore = styled((props) => {
   const { expand, ...other } = props;
   return /* @__PURE__ */ jsx(IconButton, { ...other });
@@ -93,9 +97,23 @@ export default function PaymentSummary({
   trialEnd = 0,
   completed = false,
   checkoutSession = void 0,
+  paymentIntent = void 0,
   paymentMethods = [],
   onPromotionUpdate = noop,
   showFeatures = false,
+  rateUnavailable = false,
+  isRateLoading = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rateError: _rateError = void 0,
+  // Technical errors are logged but not displayed to users
+  onQuoteExpired = void 0,
+  onRefreshRate = void 0,
+  onSlippageChange = void 0,
+  slippageConfig: slippageConfigProp = void 0,
+  liveRate = void 0,
+  liveQuoteSnapshot = void 0,
+  isStripePayment = false,
+  isSubscription: isSubscriptionProp = void 0,
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
@@ -112,16 +130,141 @@ export default function PaymentSummary({
     paymentMethods,
     hasDiscounts ? checkoutSession?.currency_id || currency.id : currency.id
   ) || settings.settings?.baseCurrency : currency;
-  const headlines = formatCheckoutHeadlines(items, discountCurrency, { trialEnd, trialInDays }, locale);
+  const slippageConfig = slippageConfigProp ?? checkoutSession?.metadata?.slippage;
+  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, {
+    exchangeRate: rateInfo.exchangeRate
+  });
   const staking = showStaking ? getStakingSetup(items, discountCurrency, billingThreshold) : "0";
-  const getAppliedPromotionCodes = () => {
-    if (!sessionDiscounts?.length) return [];
-    return sessionDiscounts.map((discount) => ({
-      id: discount.promotion_code || discount.coupon,
-      code: discount.verification_data?.code || "APPLIED",
-      discount_amount: discount.discount_amount
-    }));
-  };
+  const effectiveHasDynamicPricing = hasDynamicPricing && !isStripePayment;
+  const hasRecurringItems = items.some((x) => (x.upsell_price || x.price)?.type === "recurring");
+  const isTrialScenario = headlines.actualAmount === "0" && hasRecurringItems;
+  const headlineAmountDisplay = useMemo(() => {
+    if (!effectiveHasDynamicPricing) {
+      return headlines.amount;
+    }
+    if (isTrialScenario || !headlines.amount.includes(discountCurrency.symbol)) {
+      return headlines.amount;
+    }
+    if (calculatedTokenAmount) {
+      const displayAmount = fromUnitToToken(calculatedTokenAmount, discountCurrency?.decimal);
+      const formatted2 = formatDynamicPrice(displayAmount, true, 6);
+      return `${formatted2} ${discountCurrency.symbol}`;
+    }
+    const formatted = formatDynamicPrice(headlines.actualAmount, true, 6);
+    return `${formatted} ${discountCurrency.symbol}`;
+  }, [
+    headlines.amount,
+    headlines.actualAmount,
+    discountCurrency.symbol,
+    discountCurrency?.decimal,
+    effectiveHasDynamicPricing,
+    calculatedTokenAmount,
+    isTrialScenario
+  ]);
+  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);
+  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(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      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);
+      }
+    }
+    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 === "\u2014" ? "\u2014" : `${totalAmountDisplay} ${discountCurrency.symbol}`;
+  const totalUsdDisplay = useMemo(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      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");
   const handlePromotionUpdate = () => {
     onPromotionUpdate?.();
   };
@@ -136,15 +279,46 @@ export default function PaymentSummary({
       console.error("Failed to remove promotion code:", err);
     }
   };
-  const discountAmount = new BN(checkoutSession?.total_details?.amount_discount || "0");
-  const subtotalAmount = fromUnitToToken(
-    new BN(fromTokenToUnit(headlines.actualAmount, discountCurrency?.decimal)).add(new BN(staking)).toString(),
-    discountCurrency?.decimal
-  );
-  const totalAmount = fromUnitToToken(
-    new BN(fromTokenToUnit(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(),
-    discountCurrency?.decimal
-  );
+  const expiredHandledRef = useRef(false);
+  useEffect(() => {
+    if (completed || expiredHandledRef.current) {
+      return;
+    }
+    if (!liveQuoteSnapshot?.expires_at && !quoteMeta?.expiresAt) {
+      return;
+    }
+    const currentTime = Math.floor(Date.now() / 1e3);
+    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 lockActive = lockRemaining > 0;
+    if (hasExpiry && !lockActive && quoteRemaining <= 0) {
+      expiredHandledRef.current = true;
+      onQuoteExpired?.();
+    }
+  }, [liveQuoteSnapshot?.expires_at, quoteMeta?.expiresAt, quoteLockedAt, completed, onQuoteExpired]);
+  const handleSlippageChange = async (newSlippageConfig) => {
+    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) {
+      console.error("Failed to update slippage", err);
+      Toast.error(err.response?.data?.error || formatError(err));
+    }
+  };
   useBus(
     "error.REQUIRE_CROSS_SELL",
     () => {
@@ -200,7 +374,7 @@ export default function PaymentSummary({
       },
       children: [
         /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
-          (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
+          (x) => x.price?.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
             ProductDonation,
             {
               item: x,
@@ -217,12 +391,18 @@ export default function PaymentSummary({
               trialInDays,
               trialEnd,
               currency: discountCurrency,
+              exchangeRate: rateInfo.exchangeRate,
+              isStripePayment,
+              isPriceLocked,
+              isRateLoading,
               onUpsell: handleUpsell,
               onDownsell: handleDownsell,
               adjustableQuantity: x.adjustable_quantity,
               completed,
               showFeatures,
               onQuantityChange: handleQuantityChange,
+              discounts: sessionDiscounts,
+              calculatedDiscountAmount: calculatedDiscountAmount || (isStripePayment ? discountAmount.toString() : null),
               children: x.cross_sell && /* @__PURE__ */ jsxs(
                 Stack,
                 {
@@ -254,56 +434,55 @@ export default function PaymentSummary({
             `${x.price_id}-${discountCurrency.id}`
           )
         ) }),
-        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(
-          Stack,
+        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(Stack, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
+          ProductItem,
           {
-            sx: {
-              mt: 1
-            },
-            children: /* @__PURE__ */ jsx(
-              ProductItem,
+            item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+            items,
+            trialInDays,
+            currency: discountCurrency,
+            trialEnd,
+            exchangeRate: rateInfo.exchangeRate,
+            isStripePayment,
+            isPriceLocked,
+            isRateLoading,
+            onUpsell: noop,
+            onDownsell: noop,
+            children: /* @__PURE__ */ jsxs(
+              Stack,
               {
-                item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-                items,
-                trialInDays,
-                currency: discountCurrency,
-                trialEnd,
-                onUpsell: noop,
-                onDownsell: noop,
-                children: /* @__PURE__ */ jsxs(
-                  Stack,
-                  {
-                    direction: "row",
-                    sx: {
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      width: 1
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
-                      /* @__PURE__ */ jsx(
-                        LoadingButton,
-                        {
-                          size: "small",
-                          loadingPosition: "end",
-                          endIcon: null,
-                          color: crossSellBehavior === "required" ? "info" : "info",
-                          variant: crossSellBehavior === "required" ? "text" : "text",
-                          loading: state.loading,
-                          onClick: handleApplyCrossSell,
-                          children: t("payment.checkout.cross_sell.add")
-                        }
-                      )
-                    ]
-                  }
-                )
+                direction: "row",
+                sx: {
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: 1
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+                  /* @__PURE__ */ jsx(
+                    LoadingButton,
+                    {
+                      size: "small",
+                      loadingPosition: "end",
+                      endIcon: null,
+                      color: crossSellBehavior === "required" ? "info" : "info",
+                      variant: crossSellBehavior === "required" ? "text" : "text",
+                      loading: state.loading,
+                      onClick: handleApplyCrossSell,
+                      children: t("payment.checkout.cross_sell.add")
+                    }
+                  )
+                ]
               }
             )
           }
-        ) })
+        ) }) })
       ]
     }
   );
+  if (!discountCurrency || !items?.length) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
     /* @__PURE__ */ jsxs(
       Box,
@@ -320,10 +499,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"
               },
@@ -334,6 +510,7 @@ export default function PaymentSummary({
         ]
       }
     ),
+    effectiveHasDynamicPricing && rateUnavailable && /* @__PURE__ */ jsx(DynamicPricingUnavailable, { sx: { mb: 2 }, onRetry: onRefreshRate }),
     isMobile && !donationSettings ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Stack,
@@ -355,66 +532,24 @@ export default function PaymentSummary({
     ] }) : ProductCardList,
     /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     +staking > 0 && /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
-      /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          direction: "row",
-          spacing: 1,
-          sx: {
-            justifyContent: "space-between",
-            alignItems: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                direction: "row",
-                spacing: 0.5,
-                sx: {
-                  alignItems: "center"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
-                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          direction: "row",
-          spacing: 1,
-          sx: {
-            justifyContent: "space-between",
-            alignItems: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                direction: "row",
-                spacing: 0.5,
-                sx: {
-                  alignItems: "center"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
-                  /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(Typography, { children: [
-              formatAmount(staking, discountCurrency.decimal),
-              " ",
-              discountCurrency.symbol
-            ] })
-          ]
-        }
-      )
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.stakingConfirm"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { children: headlineAmountDisplay })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, sx: { alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
+          /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } }) })
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { children: [
+          formatAmount(staking, discountCurrency.decimal),
+          " ",
+          discountCurrency.symbol
+        ] })
+      ] })
     ] }),
     (allowPromotionCodes || hasDiscounts) && /* @__PURE__ */ jsxs(
       Stack,
@@ -434,137 +569,49 @@ export default function PaymentSummary({
         children: [
           /* @__PURE__ */ jsx(Typography, { className: "base-label", children: t("common.subtotal") }),
           /* @__PURE__ */ jsxs(Typography, { children: [
-            formatNumber(subtotalAmount),
+            subtotalDisplay,
             " ",
             discountCurrency.symbol
           ] })
         ]
       }
     ),
-    allowPromotionCodes && !hasDiscounts && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
-      PromotionCode,
+    /* @__PURE__ */ jsx(
+      PromotionSection,
       {
-        checkoutSessionId: checkoutSession.id,
-        initialAppliedCodes: getAppliedPromotionCodes(),
-        disabled: completed,
-        onUpdate: handlePromotionUpdate,
-        currencyId: currency.id
-      }
-    ) }),
-    hasDiscounts && /* @__PURE__ */ jsx(Box, { children: sessionDiscounts.map((discount) => {
-      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 /* @__PURE__ */ jsxs(Stack, { children: [
-        /* @__PURE__ */ jsxs(
-          Stack,
-          {
-            direction: "row",
-            spacing: 1,
-            sx: {
-              justifyContent: "space-between",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsxs(
-                Stack,
-                {
-                  direction: "row",
-                  spacing: 1,
-                  sx: {
-                    alignItems: "center",
-                    backgroundColor: "grey.100",
-                    width: "fit-content",
-                    px: 1,
-                    py: 1,
-                    borderRadius: 1
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      Typography,
-                      {
-                        sx: {
-                          fontWeight: "medium",
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 0.5
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(LocalOffer, { sx: { color: "warning.main", fontSize: "small" } }),
-                          promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")
-                        ]
-                      }
-                    ),
-                    !completed && /* @__PURE__ */ jsx(
-                      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"
-                          }
-                        },
-                        children: /* @__PURE__ */ jsx(Close, { sx: { fontSize: 14 } })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(Typography, { sx: { color: "text.secondary" }, children: [
-                "-",
-                formatAmount(discount.discount_amount || "0", discountCurrency.decimal),
-                " ",
-                discountCurrency.symbol
-              ] })
-            ]
-          }
-        ),
-        discountDescription && /* @__PURE__ */ jsx(
-          Typography,
-          {
-            sx: {
-              fontSize: "small",
-              color: notSupported ? "error.main" : "text.secondary",
-              mt: 0.5
-            },
-            children: discountDescription
-          }
-        )
-      ] }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
-    }) }),
-    hasSubTotal && /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } }),
-    /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center",
-          width: "100%"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(Box, { className: "base-label", children: [
-            t("common.total"),
-            " "
-          ] }),
-          /* @__PURE__ */ jsx(PaymentAmount, { amount: `${totalAmount} ${discountCurrency.symbol}`, sx: { fontSize: "16px" } })
-        ]
+        checkoutSessionId: checkoutSession?.id || checkoutSessionId,
+        currency: discountCurrency,
+        currencyId: currency.id,
+        discounts: sessionDiscounts,
+        allowPromotionCodes,
+        completed,
+        disabled: paymentState.paying || paymentState.stripePaying,
+        onPromotionUpdate: handlePromotionUpdate,
+        onRemovePromotion: handleRemovePromotion,
+        calculatedDiscountAmount: calculatedDiscountAmount || (isStripePayment ? discountAmount.toString() : null),
+        isRateLoading
       }
     ),
-    headlines.then && headlines.showThen && /* @__PURE__ */ jsx(
-      Typography,
+    hasSubTotal && /* @__PURE__ */ jsx(Divider, { sx: { my: 1 } }),
+    /* @__PURE__ */ jsx(
+      TotalSection,
       {
-        component: "div",
-        sx: { fontSize: "0.7875rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
-        children: headlines.then
+        totalAmountText,
+        totalUsdDisplay,
+        currency: discountCurrency,
+        hasDynamicPricing,
+        rateDisplay,
+        rateInfo,
+        quoteDetailRows,
+        currentSlippagePercent,
+        slippageConfig,
+        isPriceLocked,
+        isSubscription,
+        completed,
+        onSlippageChange: onSlippageChange ? handleSlippageChange : void 0,
+        isStripePayment,
+        isRateLoading,
+        thenInfo: headlines.thenValue && headlines.showThen ? headlines.thenValue : void 0
       }
     )
   ] }) });