@blocklet/payment-react 1.24.4 → 1.25.0

package/lib/payment/summary-section/total-section.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TotalSection;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _material = require("@mui/material");
+var _amount = _interopRequireDefault(require("../amount"));
+var _quoteDetailsPanel = _interopRequireDefault(require("../../components/quote-details-panel"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function TotalSection({
+  totalAmountText,
+  totalUsdDisplay,
+  currency,
+  hasDynamicPricing,
+  rateDisplay,
+  rateInfo,
+  quoteDetailRows,
+  currentSlippagePercent,
+  slippageConfig = void 0,
+  isPriceLocked,
+  isSubscription,
+  completed = false,
+  onSlippageChange = void 0,
+  isStripePayment = false,
+  thenInfo = "",
+  isRateLoading = false
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        width: "100%"
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "base-label",
+        children: t("common.total")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        sx: {
+          alignItems: "flex-end"
+        },
+        children: [isRateLoading ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Skeleton, {
+          variant: "text",
+          width: 100,
+          height: 24
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
+          amount: totalAmountText,
+          sx: {
+            fontSize: "16px"
+          }
+        }), hasDynamicPricing && !isStripePayment && !isRateLoading && (totalUsdDisplay ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          sx: {
+            fontSize: "0.7875rem",
+            color: "text.lighter"
+          },
+          children: ["\u2248 $", totalUsdDisplay]
+        }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Tooltip, {
+          title: t("payment.checkout.quote.referenceUnavailable"),
+          placement: "top",
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            component: "span",
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              sx: {
+                fontSize: "0.7875rem",
+                color: "text.lighter"
+              },
+              children: "\u2248 \u2014"
+            })
+          })
+        })), hasDynamicPricing && !isStripePayment && /* @__PURE__ */(0, _jsxRuntime.jsx)(_quoteDetailsPanel.default, {
+          rateLine: rateDisplay ? t("payment.checkout.quote.rateLine", {
+            symbol: currency.symbol,
+            rate: rateDisplay
+          }) : "",
+          rows: quoteDetailRows,
+          isSubscription,
+          slippageValue: currentSlippagePercent,
+          slippageConfig,
+          onSlippageChange: !completed && onSlippageChange ? onSlippageChange : void 0,
+          exchangeRate: rateInfo.exchangeRate,
+          baseCurrency: rateInfo.baseCurrency,
+          disabled: isPriceLocked
+        })]
+      })]
+    }), thenInfo && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "flex-start",
+        width: "100%",
+        borderTop: "1px solid",
+        borderColor: "divider",
+        pt: 1,
+        mt: 1
+      },
+      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+        className: "base-label",
+        children: t("common.nextCharge")
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          fontSize: "16px",
+          color: "text.secondary"
+        },
+        children: thenInfo
+      })]
+    })]
+  });
+}

package/lib/payment/summary.d.ts

@@ -1,4 +1,6 @@
-import type { DonationSettings, TLineItemExpanded, TPaymentCurrency, TCheckoutSession, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { DonationSettings, TCheckoutSession, TLineItemExpanded, TPaymentCurrency, TPaymentIntent, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import { type LiveRateInfo, type LiveQuoteSnapshot } from '../hooks/dynamic-pricing';
+import type { SlippageConfigValue } from '../components/slippage-config';
 type Props = {
     items: TLineItemExpanded[];
     currency: TPaymentCurrency;
@@ -18,9 +20,22 @@ type Props = {
     action?: string;
     completed?: boolean;
     checkoutSession?: TCheckoutSession;
+    paymentIntent?: TPaymentIntent | null;
     onPromotionUpdate?: () => void;
     paymentMethods?: TPaymentMethodExpanded[];
     showFeatures?: boolean;
+    rateUnavailable?: boolean;
+    rateError?: string;
+    isRateLoading?: boolean;
+    onQuoteExpired?: (forceRefresh?: boolean) => void;
+    onRefreshRate?: () => Promise<void>;
+    onSlippageChange?: (slippageConfig: SlippageConfigValue) => void;
+    slippageConfig?: SlippageConfigValue;
+    liveRate?: LiveRateInfo;
+    liveQuoteSnapshot?: LiveQuoteSnapshot;
+    isStripePayment?: boolean;
+    isSubscription?: boolean;
 };
-export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, checkoutSession, paymentMethods, onPromotionUpdate, showFeatures, ...rest }: Props): import("react").JSX.Element;
+export default function PaymentSummary({ items, currency, trialInDays, billingThreshold, onUpsell, onDownsell, onQuantityChange, onApplyCrossSell, onCancelCrossSell, onChangeAmount, checkoutSessionId, crossSellBehavior, showStaking, donationSettings, action, trialEnd, completed, checkoutSession, paymentIntent, paymentMethods, onPromotionUpdate, showFeatures, rateUnavailable, isRateLoading, rateError: _rateError, // Technical errors are logged but not displayed to users
+onQuoteExpired, onRefreshRate, onSlippageChange, slippageConfig: slippageConfigProp, liveRate, liveQuoteSnapshot, isStripePayment, isSubscription: isSubscriptionProp, ...rest }: Props): import("react").JSX.Element | null;
 export {};

package/lib/payment/summary.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = PaymentSummary;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
@@ -14,17 +15,20 @@ var _noop = _interopRequireDefault(require("lodash/noop"));
 var _useBus = _interopRequireDefault(require("use-bus"));
 var _ExpandMore = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _styles = require("@mui/material/styles");
+var _react = require("react");
 var _status = _interopRequireDefault(require("../components/status"));
 var _api = _interopRequireDefault(require("../libs/api"));
 var _util2 = require("../libs/util");
-var _amount = _interopRequireDefault(require("./amount"));
 var _productDonation = _interopRequireDefault(require("./product-donation"));
 var _productItem = _interopRequireDefault(require("./product-item"));
 var _livemode = _interopRequireDefault(require("../components/livemode"));
 var _payment = require("../contexts/payment");
 var _mobile = require("../hooks/mobile");
+var _dynamicPricing = require("../hooks/dynamic-pricing");
 var _loadingButton = _interopRequireDefault(require("../components/loading-button"));
-var _promotionCode = _interopRequireDefault(require("../components/promotion-code"));
+var _dynamicPricingUnavailable = _interopRequireDefault(require("../components/dynamic-pricing-unavailable"));
+var _promotionSection = _interopRequireDefault(require("./summary-section/promotion-section"));
+var _totalSection = _interopRequireDefault(require("./summary-section/total-section"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ExpandMore = (0, _styles.styled)(props => {
   const {
@@ -103,9 +107,23 @@ function PaymentSummary({
   trialEnd = 0,
   completed = false,
   checkoutSession = void 0,
+  paymentIntent = void 0,
   paymentMethods = [],
   onPromotionUpdate = _noop.default,
   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 {
@@ -132,19 +150,105 @@ function PaymentSummary({
   const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
   const hasDiscounts = sessionDiscounts?.length > 0;
   const discountCurrency = paymentMethods && checkoutSession ? (0, _util2.findCurrency)(paymentMethods, hasDiscounts ? checkoutSession?.currency_id || currency.id : currency.id) || settings.settings?.baseCurrency : currency;
+  const slippageConfig = slippageConfigProp ?? checkoutSession?.metadata?.slippage;
+  const {
+    hasDynamicPricing,
+    isPriceLocked,
+    quoteMeta,
+    rateInfo,
+    quoteLockedAt,
+    currentSlippagePercent,
+    rateDisplay,
+    calculatedTokenAmount,
+    calculatedDiscountAmount,
+    calculateUsdDisplay,
+    buildQuoteDetailRows
+  } = (0, _dynamicPricing.useDynamicPricing)({
+    items,
+    currency: discountCurrency,
+    liveRate,
+    liveQuoteSnapshot,
+    checkoutSession,
+    paymentIntent,
+    locale,
+    isStripePayment,
+    isSubscription: isSubscriptionProp,
+    slippageConfig,
+    trialInDays,
+    trialEnd,
+    discounts: sessionDiscounts
+  });
   const headlines = (0, _util2.formatCheckoutHeadlines)(items, discountCurrency, {
     trialEnd,
     trialInDays
-  }, locale);
+  }, 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 = (0, _react.useMemo)(() => {
+    if (!effectiveHasDynamicPricing) {
+      return headlines.amount;
+    }
+    if (isTrialScenario || !headlines.amount.includes(discountCurrency.symbol)) {
+      return headlines.amount;
+    }
+    if (calculatedTokenAmount) {
+      const displayAmount = (0, _util.fromUnitToToken)(calculatedTokenAmount, discountCurrency?.decimal);
+      const formatted2 = (0, _util2.formatDynamicPrice)(displayAmount, true, 6);
+      return `${formatted2} ${discountCurrency.symbol}`;
+    }
+    const formatted = (0, _util2.formatDynamicPrice)(headlines.actualAmount, true, 6);
+    return `${formatted} ${discountCurrency.symbol}`;
+  }, [headlines.amount, headlines.actualAmount, discountCurrency.symbol, discountCurrency?.decimal, effectiveHasDynamicPricing, calculatedTokenAmount, isTrialScenario]);
+  const discountAmount = (0, _react.useMemo)(() => new _util.BN(checkoutSession?.total_details?.amount_discount || "0"), [checkoutSession?.total_details?.amount_discount]);
+  const subtotalAmountUnit = new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, discountCurrency?.decimal)).add(new _util.BN(staking)).toString();
+  const subtotalAmount = (0, _util.fromUnitToToken)(subtotalAmountUnit, discountCurrency?.decimal);
+  const totalAmountUnit = new _util.BN(subtotalAmountUnit).sub(discountAmount).toString();
+  const totalAmountValue = (0, _util.fromUnitToToken)(totalAmountUnit, discountCurrency?.decimal);
+  const subtotalDisplay = (0, _react.useMemo)(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      const dynamicSubtotalUnit = new _util.BN(calculatedTokenAmount).add(new _util.BN(staking)).toString();
+      const displayAmount = (0, _util.fromUnitToToken)(dynamicSubtotalUnit, discountCurrency?.decimal);
+      return (0, _util2.formatDynamicPrice)(displayAmount, true, 6);
+    }
+    return (0, _util2.formatDynamicPrice)(subtotalAmount, effectiveHasDynamicPricing, 6);
+  }, [effectiveHasDynamicPricing, calculatedTokenAmount, staking, discountCurrency?.decimal, subtotalAmount, isTrialScenario]);
+  const totalAmountDisplay = (0, _react.useMemo)(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      const effectiveDiscount = calculatedDiscountAmount ? new _util.BN(calculatedDiscountAmount) : discountAmount;
+      const dynamicTotalUnit = new _util.BN(calculatedTokenAmount).add(new _util.BN(staking)).sub(effectiveDiscount).toString();
+      const displayAmount = (0, _util.fromUnitToToken)(dynamicTotalUnit, discountCurrency?.decimal);
+      const numericValue = Number(displayAmount);
+      if (Number.isFinite(numericValue) && numericValue >= 0) {
+        return (0, _util2.formatDynamicPrice)(displayAmount, true, 6);
+      }
+    }
+    if (isStripePayment && calculatedDiscountAmount && !isTrialScenario) {
+      const effectiveDiscount = new _util.BN(calculatedDiscountAmount);
+      const adjustedTotalUnit = new _util.BN(subtotalAmountUnit).sub(effectiveDiscount).toString();
+      const displayAmount = (0, _util.fromUnitToToken)(adjustedTotalUnit, discountCurrency?.decimal);
+      const numericValue = Number(displayAmount);
+      if (Number.isFinite(numericValue) && numericValue >= 0) {
+        return (0, _util2.formatDynamicPrice)(displayAmount, false, 6);
+      }
+    }
+    return (0, _util2.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 = (0, _react.useMemo)(() => {
+    if (effectiveHasDynamicPricing && calculatedTokenAmount && !isTrialScenario) {
+      const effectiveDiscount = calculatedDiscountAmount ? new _util.BN(calculatedDiscountAmount) : discountAmount;
+      const dynamicTotalUnit = new _util.BN(calculatedTokenAmount).add(new _util.BN(staking)).sub(effectiveDiscount).toString();
+      const dynamicTotalToken = (0, _util.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?.();
   };
@@ -159,9 +263,46 @@ function PaymentSummary({
       console.error("Failed to remove promotion code:", err);
     }
   };
-  const discountAmount = new _util.BN(checkoutSession?.total_details?.amount_discount || "0");
-  const subtotalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(headlines.actualAmount, discountCurrency?.decimal)).add(new _util.BN(staking)).toString(), discountCurrency?.decimal);
-  const totalAmount = (0, _util.fromUnitToToken)(new _util.BN((0, _util.fromTokenToUnit)(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(), discountCurrency?.decimal);
+  const expiredHandledRef = (0, _react.useRef)(false);
+  (0, _react.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.default.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.default.error(err.response?.data?.error || (0, _util2.formatError)(err));
+    }
+  };
   (0, _useBus.default)("error.REQUIRE_CROSS_SELL", () => {
     setState({
       shake: true
@@ -226,7 +367,7 @@ function PaymentSummary({
         xs: 1,
         sm: 2
       },
-      children: items.map(x => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
+      children: items.map(x => x.price?.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_productDonation.default, {
         item: x,
         settings: donationSettings,
         onChange: onChangeAmount,
@@ -237,12 +378,18 @@ 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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
@@ -279,6 +426,10 @@ function PaymentSummary({
           trialInDays,
           currency: discountCurrency,
           trialEnd,
+          exchangeRate: rateInfo.exchangeRate,
+          isStripePayment,
+          isPriceLocked,
+          isRateLoading,
           onUpsell: _noop.default,
           onDownsell: _noop.default,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -312,6 +463,9 @@ function PaymentSummary({
       })
     })]
   });
+  if (!discountCurrency || !items?.length) {
+    return null;
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
     in: true,
     children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -337,6 +491,11 @@ function PaymentSummary({
           },
           children: action || t("payment.checkout.orderSummary")
         }), !settings.livemode && /* @__PURE__ */(0, _jsxRuntime.jsx)(_livemode.default, {})]
+      }), effectiveHasDynamicPricing && rateUnavailable && /* @__PURE__ */(0, _jsxRuntime.jsx)(_dynamicPricingUnavailable.default, {
+        sx: {
+          mb: 2
+        },
+        onRetry: onRefreshRate
       }), isMobile && !donationSettings ? /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           onClick: () => setState({
@@ -403,7 +562,7 @@ function PaymentSummary({
               })
             })]
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: headlines.amount
+            children: headlineAmountDisplay
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
@@ -457,122 +616,41 @@ function PaymentSummary({
           className: "base-label",
           children: t("common.subtotal")
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-          children: [(0, _util2.formatNumber)(subtotalAmount), " ", discountCurrency.symbol]
+          children: [subtotalDisplay, " ", discountCurrency.symbol]
         })]
-      }), allowPromotionCodes && !hasDiscounts && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          mt: 1
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_promotionCode.default, {
-          checkoutSessionId: checkoutSession.id,
-          initialAppliedCodes: getAppliedPromotionCodes(),
-          disabled: completed,
-          onUpdate: handlePromotionUpdate,
-          currencyId: currency.id
-        })
-      }), hasDiscounts && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        children: sessionDiscounts.map(discount => {
-          const promotionCodeInfo = discount.promotion_code_details;
-          const couponInfo = discount.coupon_details;
-          const discountDescription = couponInfo ? (0, _util2.formatCouponTerms)(couponInfo, discountCurrency, locale) : "";
-          const notSupported = discountDescription === t("payment.checkout.coupon.noDiscount");
-          return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-              direction: "row",
-              spacing: 1,
-              sx: {
-                justifyContent: "space-between",
-                alignItems: "center"
-              },
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: "row",
-                spacing: 1,
-                sx: {
-                  alignItems: "center",
-                  backgroundColor: "grey.100",
-                  width: "fit-content",
-                  px: 1,
-                  py: 1,
-                  borderRadius: 1
-                },
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-                  sx: {
-                    fontWeight: "medium",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 0.5
-                  },
-                  children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LocalOffer, {
-                    sx: {
-                      color: "warning.main",
-                      fontSize: "small"
-                    }
-                  }), promotionCodeInfo?.code || discount.verification_data?.code || t("payment.checkout.discount")]
-                }), !completed && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_iconsMaterial.Close, {
-                    sx: {
-                      fontSize: 14
-                    }
-                  })
-                })]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-                sx: {
-                  color: "text.secondary"
-                },
-                children: ["-", (0, _util2.formatAmount)(discount.discount_amount || "0", discountCurrency.decimal), " ", discountCurrency.symbol]
-              })]
-            }), discountDescription && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              sx: {
-                fontSize: "small",
-                color: notSupported ? "error.main" : "text.secondary",
-                mt: 0.5
-              },
-              children: discountDescription
-            })]
-          }, discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`);
-        })
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_promotionSection.default, {
+        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
       }), hasSubTotal && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
         sx: {
           my: 1
         }
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          flexDirection: "row",
-          alignItems: "center",
-          width: "100%"
-        },
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
-          className: "base-label",
-          children: [t("common.total"), " "]
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_amount.default, {
-          amount: `${totalAmount} ${discountCurrency.symbol}`,
-          sx: {
-            fontSize: "16px"
-          }
-        })]
-      }), headlines.then && headlines.showThen && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        component: "div",
-        sx: {
-          fontSize: "0.7875rem",
-          color: "text.lighter",
-          textAlign: "right",
-          margin: "-2px 0 8px"
-        },
-        children: headlines.then
+      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_totalSection.default, {
+        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
       })]
     })
   });

package/lib/types/index.d.ts

@@ -11,6 +11,16 @@ export type CheckoutContext = {
     action?: string;
     showCheckoutSummary?: boolean;
     currencyId?: string;
+    quotes?: Record<string, {
+        quote_id: string;
+        expires_at: number;
+        quoted_amount: string;
+        exchange_rate?: string;
+        rate_provider_name?: string;
+        rate_provider_id?: string;
+    }>;
+    rateUnavailable?: boolean;
+    rateError?: string;
 };
 export type CheckoutFormData = {
     customer_name: string;
@@ -44,6 +54,7 @@ export type CheckoutCallbacks = {
     onError: (err: Error) => void;
     onChange?: (data: CheckoutFormData) => void;
     goBack?: () => void;
+    onRefreshQuote?: () => Promise<boolean>;
 };
 export type PricingRenderProps = {
     totalPrice: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.24.4",
+  "version": "1.25.0",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -96,7 +96,7 @@
     "@babel/core": "^7.27.4",
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
-    "@blocklet/payment-types": "1.24.4",
+    "@blocklet/payment-types": "1.25.0",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -127,5 +127,5 @@
     "vite-plugin-babel": "^1.3.1",
     "vite-plugin-node-polyfills": "^0.23.0"
   },
-  "gitHead": "d4a5f67e657cafa8862912bb8de38a3d56a7919d"
+  "gitHead": "00a94943fea21487c042a7b484f4649add502bc9"
 }