@blocklet/payment-react 1.24.4 → 1.25.0

package/lib/payment/product-item.js

@@ -11,6 +11,7 @@ var _iconsMaterial = require("@mui/icons-material");
 var _react = require("react");
 var _ahooks = require("ahooks");
 var _util = require("@ocap/util");
+var _loadingAmount = _interopRequireDefault(require("../components/loading-amount"));
 var _status = _interopRequireDefault(require("../components/status"));
 var _switchButton = _interopRequireDefault(require("../components/switch-button"));
 var _util2 = require("../libs/util");
@@ -57,7 +58,13 @@ function ProductItem({
     enabled: false
   },
   onQuantityChange = () => {},
-  showFeatures = false
+  showFeatures = false,
+  exchangeRate = null,
+  isStripePayment = false,
+  isPriceLocked = false,
+  isRateLoading = false,
+  discounts = [],
+  calculatedDiscountAmount = null
 }) {
   const {
     t,
@@ -69,13 +76,17 @@ function ProductItem({
     session,
     api
   } = (0, _payment.usePaymentContext)();
+  const pricingSource = item.upsell_price || item.price;
+  const isDynamicPricing = pricingSource?.pricing_type === "dynamic";
   const pricing = (0, _util2.formatLineItemPricing)(item, currency, {
     trialEnd,
-    trialInDays
+    trialInDays,
+    exchangeRate
   }, locale);
   const saving = (0, _util2.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 > (0, _dayjs.default)().unix();
   const isCreditProduct = item.price.product?.type === "credit" && item.price.metadata?.credit_config;
   const creditAmount = isCreditProduct && item.price.metadata?.credit_config?.credit_amount ? Number(item.price.metadata.credit_config.credit_amount) : 0;
   const creditCurrency = isCreditProduct && item.price.metadata?.credit_config?.currency_id ? (0, _util2.findCurrency)(settings.paymentMethods, item.price.metadata.credit_config.currency_id) : null;
@@ -107,7 +118,7 @@ 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;
   const getMinQuantityForPending = (0, _react.useMemo)(() => {
     if (!isCreditProduct || !pendingAmount) return null;
@@ -180,7 +191,7 @@ function ProductItem({
       setLocalQuantity(newQuantity);
       onQuantityChange(item.price_id, newQuantity);
       if (userDid && newQuantity > 0) {
-        saveUserQuantityPreference(userDid, item.price.id, newQuantity);
+        saveUserQuantityPreference(userDid, item.price?.id, newQuantity);
       }
     }
   };
@@ -206,7 +217,7 @@ function ProductItem({
     const currencySymbol = creditCurrency?.symbol || "Credits";
     const formattedTotalCredit = (0, _util2.formatCreditForCheckout)(totalCreditStr, currencySymbol, locale);
     const hasPendingAmount = pendingAmount && new _util.BN(pendingAmount || "0").gt(new _util.BN(0));
-    const isRecurring = item.price.type === "recurring";
+    const isRecurring = item.price?.type === "recurring";
     const hasExpiry = validDuration && validDuration > 0;
     const buildBaseParams = () => ({
       amount: formattedTotalCredit,
@@ -215,7 +226,7 @@ function ProductItem({
         unit: t(`common.${validDurationUnit}`)
       }),
       ...(isRecurring && {
-        period: (0, _util2.formatRecurring)(item.price.recurring, true, "per", locale)
+        period: (0, _util2.formatRecurring)(item.price?.recurring, true, "per", locale)
       })
     });
     const buildPendingParams = (pendingBN, availableAmount) => ({
@@ -229,7 +240,7 @@ function ProductItem({
         unit: t(`common.${validDurationUnit}`)
       }),
       ...(isRecurring && {
-        period: (0, _util2.formatRecurring)(item.price.recurring, true, "per", locale)
+        period: (0, _util2.formatRecurring)(item.price?.recurring, true, "per", locale)
       })
     });
     const getLocaleKey = (category, type2) => {
@@ -254,6 +265,46 @@ function ProductItem({
     const type = isRecurring ? "recurringEnough" : "oneTimeEnough";
     return t(getLocaleKey("pending", type), buildPendingParams(pendingAmountBN, actualAvailable));
   };
+  const quantityForUsd = Number.isFinite(localQuantity) ? Number(localQuantity) : item.quantity || 0;
+  const dynamicTokenDisplay = (0, _react.useMemo)(() => {
+    if (isStripePayment || !currency) {
+      return null;
+    }
+    const baseAmount = pricingSource?.base_amount;
+    const unitAmount = pricingSource?.unit_amount;
+    if (isDynamicPricing && baseAmount !== void 0 && baseAmount !== null) {
+      if (isPriceLocked) {
+        const quotedAmount = item?.quoted_amount;
+        if (quotedAmount) {
+          const totalBN = new _util.BN(quotedAmount);
+          const tokenValue = (0, _util.fromUnitToToken)(totalBN, currency.decimal);
+          return `${(0, _util2.formatDynamicPrice)(tokenValue, true, 6)} ${currency.symbol}`;
+        }
+      }
+      if (!exchangeRate) {
+        return null;
+      }
+      const rate = Number(exchangeRate);
+      if (rate <= 0 || Number.isNaN(rate)) {
+        return null;
+      }
+      const usdAmount = Number(baseAmount);
+      const tokenAmount = usdAmount / rate;
+      const totalTokens = tokenAmount * (quantityForUsd || 1);
+      return `${(0, _util2.formatDynamicPrice)(totalTokens, true, 6)} ${currency.symbol}`;
+    }
+    if (!isDynamicPricing && exchangeRate && unitAmount) {
+      const rate = Number(exchangeRate);
+      if (rate <= 0 || Number.isNaN(rate)) {
+        return null;
+      }
+      const usdAmount = Number(unitAmount) / 100;
+      const tokenAmount = usdAmount / rate;
+      const totalTokens = tokenAmount * (quantityForUsd || 1);
+      return `${(0, _util2.formatDynamicPrice)(totalTokens, true, 6)} ${currency.symbol}`;
+    }
+    return null;
+  }, [isStripePayment, isDynamicPricing, currency, pricingSource, item, exchangeRate, quantityForUsd, isPriceLocked]);
   const formatScheduleInfo = () => {
     if (!hasSchedule || !scheduleConfig) return null;
     const totalCredit = creditAmount * (localQuantity || 0);
@@ -295,14 +346,189 @@ function ProductItem({
   const primaryText = (0, _react.useMemo)(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === "recurring" && price?.recurring;
-    const trial = trialInDays > 0 || trialEnd > (0, _dayjs.default)().unix();
-    if (isRecurring && !trial && price?.recurring?.usage_type !== "metered") {
-      return `${pricing.primary} ${price.recurring ? (0, _util2.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
+    if (isTrial) {
+      return pricing.primary;
+    }
+    let displayAmount;
+    if (!isStripePayment && dynamicTokenDisplay) {
+      displayAmount = dynamicTokenDisplay;
+    } else if (isDynamicPricing && !isStripePayment) {
+      const baseAmount = pricingSource?.base_amount;
+      if (baseAmount !== void 0 && baseAmount !== null) {
+        const usdValue = Number(baseAmount);
+        displayAmount = `\u2248 $${usdValue.toFixed(2)}`;
+      } else {
+        displayAmount = pricing.primary;
+      }
+    } else {
+      displayAmount = pricing.primary;
+    }
+    if (isRecurring && price?.recurring?.usage_type !== "metered") {
+      return `${displayAmount} ${price.recurring ? (0, _util2.formatRecurring)(price.recurring, false, "slash", locale) : ""}`;
+    }
+    return displayAmount;
+  }, [isTrial, pricing, item, locale, dynamicTokenDisplay, isDynamicPricing, pricingSource, isStripePayment]);
+  const usdReference = (0, _react.useMemo)(() => {
+    if (!currency || !isDynamicPricing || isStripePayment) {
+      return null;
+    }
+    const baseAmount = pricingSource?.base_amount;
+    const hasBaseAmount = baseAmount !== void 0 && baseAmount !== null;
+    if (hasBaseAmount) {
+      return (0, _util2.getUsdAmountFromBaseAmount)(baseAmount, quantityForUsd);
+    }
+    return null;
+  }, [currency, pricingSource, quantityForUsd, isDynamicPricing, isStripePayment]);
+  const usdReferenceDisplay = (0, _react.useMemo)(() => (0, _util2.formatUsdAmount)(usdReference, locale), [usdReference, locale]);
+  const upsellTokenDisplay = (0, _react.useMemo)(() => {
+    const upsellPrice = item.price?.upsell?.upsells_to;
+    if (!upsellPrice) {
+      return null;
+    }
+    if (isStripePayment && currency) {
+      const baseAmount2 = upsellPrice?.base_amount;
+      const unitAmount2 = upsellPrice?.unit_amount;
+      let usdAmount2;
+      if (baseAmount2 !== void 0 && baseAmount2 !== null) {
+        usdAmount2 = Number(baseAmount2);
+      } else if (unitAmount2) {
+        usdAmount2 = Number(unitAmount2) / 100;
+      } else {
+        return null;
+      }
+      const recurring2 = upsellPrice?.recurring ? ` ${(0, _util2.formatRecurring)(upsellPrice.recurring, false, "slash", locale)}` : "";
+      return `${usdAmount2} ${currency.symbol}${recurring2}`;
+    }
+    if (!currency || !exchangeRate) {
+      return null;
+    }
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || Number.isNaN(rate)) {
+      return null;
+    }
+    const baseAmount = upsellPrice?.base_amount;
+    const unitAmount = upsellPrice?.unit_amount;
+    let usdAmount;
+    if (baseAmount !== void 0 && baseAmount !== null) {
+      usdAmount = Number(baseAmount);
+    } else if (unitAmount) {
+      usdAmount = Number(unitAmount) / 100;
+    } else {
+      return null;
+    }
+    const tokenAmount = usdAmount / rate;
+    const recurring = upsellPrice?.recurring ? ` ${(0, _util2.formatRecurring)(upsellPrice.recurring, false, "slash", locale)}` : "";
+    return `${(0, _util2.formatDynamicPrice)(tokenAmount, true, 6)} ${currency.symbol}${recurring}`;
+  }, [isStripePayment, currency, exchangeRate, item.price?.upsell?.upsells_to, locale]);
+  const downsellTokenDisplay = (0, _react.useMemo)(() => {
+    if (!item.upsell_price_id || !item.price) {
+      return null;
+    }
+    const originalPrice = item.price;
+    if (isStripePayment && currency) {
+      const baseAmount2 = originalPrice?.base_amount;
+      const unitAmount2 = originalPrice?.unit_amount;
+      let usdAmount2;
+      if (baseAmount2 !== void 0 && baseAmount2 !== null) {
+        usdAmount2 = Number(baseAmount2);
+      } else if (unitAmount2) {
+        usdAmount2 = Number(unitAmount2) / 100;
+      } else {
+        return null;
+      }
+      const recurring2 = originalPrice?.recurring ? ` ${(0, _util2.formatRecurring)(originalPrice.recurring, false, "slash", locale)}` : "";
+      return `${usdAmount2} ${currency.symbol}${recurring2}`;
     }
-    return pricing.primary;
-  }, [trialInDays, trialEnd, pricing, item, locale]);
+    if (!currency || !exchangeRate) {
+      return null;
+    }
+    const rate = Number(exchangeRate);
+    if (rate <= 0 || Number.isNaN(rate)) {
+      return null;
+    }
+    const baseAmount = originalPrice?.base_amount;
+    const unitAmount = originalPrice?.unit_amount;
+    let usdAmount;
+    if (baseAmount !== void 0 && baseAmount !== null) {
+      usdAmount = Number(baseAmount);
+    } else if (unitAmount) {
+      usdAmount = Number(unitAmount) / 100;
+    } else {
+      return null;
+    }
+    const tokenAmount = usdAmount / rate;
+    const recurring = originalPrice?.recurring ? ` ${(0, _util2.formatRecurring)(originalPrice.recurring, false, "slash", locale)}` : "";
+    return `${(0, _util2.formatDynamicPrice)(tokenAmount, true, 6)} ${currency.symbol}${recurring}`;
+  }, [isStripePayment, currency, exchangeRate, item.price, item.upsell_price_id, locale]);
+  const displayItemDiscountAmount = (0, _react.useMemo)(() => {
+    if (isTrial && item.price?.type === "recurring" || item.price?.recurring?.usage_type === "metered") {
+      return null;
+    }
+    if (!discounts?.length) {
+      return null;
+    }
+    const couponDetails = discounts[0]?.coupon_details;
+    if (isStripePayment && couponDetails) {
+      if (!item.discountable) {
+        return null;
+      }
+      const isDynamic = pricingSource?.pricing_type === "dynamic";
+      const baseAmount = pricingSource?.base_amount;
+      const unitAmount = pricingSource?.unit_amount;
+      let amountCents;
+      if (isDynamic && baseAmount !== void 0 && baseAmount !== null) {
+        amountCents = Number(baseAmount) * 100;
+      } else if (unitAmount) {
+        amountCents = Number(unitAmount);
+      } else {
+        return null;
+      }
+      const quantity = localQuantity || item.quantity || 1;
+      const itemSubtotalCents = amountCents * quantity;
+      if (couponDetails.percent_off && couponDetails.percent_off > 0) {
+        const discountCents = Math.round(itemSubtotalCents * couponDetails.percent_off / 100);
+        return discountCents.toString();
+      }
+      if (couponDetails.amount_off && items.length === 1 && calculatedDiscountAmount) {
+        return calculatedDiscountAmount;
+      }
+      return null;
+    }
+    if (isDynamicPricing && exchangeRate && couponDetails) {
+      const rateNum = Number(exchangeRate);
+      if (rateNum <= 0) {
+        return null;
+      }
+      if (!item.discountable) {
+        return null;
+      }
+      const baseAmount = pricingSource?.base_amount;
+      if (!baseAmount) {
+        return null;
+      }
+      const quantity = localQuantity || item.quantity || 1;
+      const itemTokenAmount = Number(baseAmount) * quantity / rateNum;
+      if (couponDetails.percent_off && couponDetails.percent_off > 0) {
+        const discountAmount = itemTokenAmount * couponDetails.percent_off / 100;
+        const discountAmountUnit = (0, _util.fromTokenToUnit)(discountAmount.toFixed(currency.decimal || 8), currency.decimal || 8);
+        return discountAmountUnit.toString();
+      }
+      if (couponDetails.amount_off && items.length === 1 && calculatedDiscountAmount) {
+        return calculatedDiscountAmount;
+      }
+    }
+    if (items.length === 1 && calculatedDiscountAmount) {
+      return calculatedDiscountAmount;
+    }
+    return null;
+  }, [isTrial, discounts, isStripePayment, isDynamicPricing, exchangeRate, item, pricingSource, localQuantity, currency.decimal, items.length, calculatedDiscountAmount]);
+  const discountCodeDisplay = (0, _react.useMemo)(() => {
+    if (!discounts?.length) return null;
+    const discount = discounts[0];
+    return discount.promotion_code_details?.code || discount.verification_data?.code || "DISCOUNT";
+  }, [discounts]);
   const quantityInventoryError = (0, _util2.formatQuantityInventory)(item.price, localQuantityNum, locale);
-  const features = item.price.product?.features || [];
+  const features = item.price?.product?.features || [];
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     direction: "column",
     spacing: 1,
@@ -328,15 +554,15 @@ function ProductItem({
           width: "100%"
         },
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
-          logo: item.price.product?.images[0],
-          name: item.price.product?.name,
+          logo: item.price?.product?.images[0],
+          name: item.price?.product?.name,
           extra: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
               display: "flex",
               alignItems: "center"
             },
-            children: item.price.type === "recurring" && item.price.recurring ? [pricing.quantity, t("common.billed", {
-              rule: `${(0, _util2.formatRecurring)(item.upsell_price?.recurring || item.price.recurring, true, "per", locale)} ${metered}`
+            children: item.price?.type === "recurring" && item.price?.recurring ? [pricing.quantity, t("common.billed", {
+              rule: `${(0, _util2.formatRecurring)(item.upsell_price?.recurring || item.price?.recurring, true, "per", locale)} ${metered}`
             })].filter(Boolean).join(", ") : pricing.quantity
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -345,15 +571,22 @@ function ProductItem({
             alignItems: "flex-end",
             flex: 1
           },
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingAmount.default, {
+            value: primaryText,
+            loading: isRateLoading,
+            skeletonWidth: 80,
+            height: 20,
             sx: {
               color: "text.primary",
-              fontWeight: 500,
-              whiteSpace: "nowrap"
+              fontWeight: 500
+            }
+          }), isDynamicPricing && !isStripePayment && !isTrial && usdReferenceDisplay && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+            sx: {
+              fontSize: "0.74375rem",
+              color: "text.lighter"
             },
-            gutterBottom: true,
-            children: primaryText
-          }), pricing.secondary && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            children: ["\u2248 $", usdReferenceDisplay]
+          }), pricing.secondary && !isTrial && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
               fontSize: "0.74375rem",
               color: "text.lighter"
@@ -361,14 +594,16 @@ function ProductItem({
             children: pricing.secondary
           })]
         })]
-      }), item.discount_amounts && item.discount_amounts.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      }), !(isTrial && item.price?.type === "recurring" || item.price?.recurring?.usage_type === "metered") && (displayItemDiscountAmount || item.discount_amounts && item.discount_amounts.length > 0) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
         direction: "row",
         spacing: 1,
         sx: {
           mt: 1,
-          alignItems: "center"
+          alignItems: "center",
+          opacity: isRateLoading ? 0 : 1,
+          transition: "opacity 300ms ease-in-out"
         },
-        children: item.discount_amounts.map(discountAmount => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
+        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
           icon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.LocalOffer, {
             sx: {
               fontSize: "0.8rem !important"
@@ -386,13 +621,13 @@ function ProductItem({
                 fontSize: "0.75rem",
                 fontWeight: "medium"
               },
-              children: discountAmount.promotion_code?.code || "DISCOUNT"
+              children: discountCodeDisplay || "DISCOUNT"
             }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
               component: "span",
               sx: {
                 fontSize: "0.75rem"
               },
-              children: ["(-", (0, _util2.formatAmount)(discountAmount.amount || "0", currency.decimal), " ", currency.symbol, ")"]
+              children: ["(-", (0, _util2.formatAmount)(displayItemDiscountAmount || item.discount_amounts?.[0]?.amount || "0", currency.decimal), " ", currency.symbol, ")"]
             })]
           }),
           size: "small",
@@ -406,7 +641,7 @@ function ProductItem({
               px: 1
             }
           }
-        }, discountAmount.promotion_code))
+        })
       }), showFeatures && features.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
           display: "flex",
@@ -540,7 +775,7 @@ function ProductItem({
           children: formatCreditInfo()
         })
       }), children]
-    }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+    }), canUpsell && !item.upsell_price_id && item.price?.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
       className: "product-item-upsell",
       sx: {
@@ -563,9 +798,9 @@ function ProductItem({
           },
           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: (0, _util2.formatRecurring)(item.price.upsell.upsells_to.recurring, true, "per", locale)
+          recurring: (0, _util2.formatRecurring)(item.price?.upsell?.upsells_to?.recurring, true, "per", locale)
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
           label: t("payment.checkout.upsell.off", {
             saving
@@ -583,7 +818,7 @@ function ProductItem({
         sx: {
           fontSize: 12
         },
-        children: (0, _util2.formatPrice)(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)
+        children: upsellTokenDisplay || (0, _util2.formatPrice)(item.price?.upsell?.upsells_to, currency, item.price?.product?.unit_label, 1, true, locale)
       })]
     }), canUpsell && item.upsell_price_id && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
       direction: "row",
@@ -610,14 +845,14 @@ function ProductItem({
           checked: true,
           onChange: () => onDownsell(item.upsell_price_id)
         }), t("payment.checkout.upsell.revert", {
-          recurring: t(`common.${(0, _util2.formatRecurring)(item.price.recurring)}`)
+          recurring: t(`common.${(0, _util2.formatRecurring)(item.price?.recurring)}`)
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         component: "span",
         sx: {
           fontSize: 12
         },
-        children: (0, _util2.formatPrice)(item.price, currency, item.price.product?.unit_label, 1, true, locale)
+        children: downsellTokenDisplay || (0, _util2.formatPrice)(item.price, currency, item.price?.product?.unit_label, 1, true, locale)
       })]
     })]
   });

package/lib/payment/summary-section/promotion-section.d.ts

@@ -0,0 +1,32 @@
+/**
+ * PromotionSection Component
+ *
+ * Handles promotion code input, applied discounts display, and removal.
+ */
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+export interface DiscountInfo {
+    promotion_code?: string;
+    coupon?: string;
+    discount_amount?: string;
+    promotion_code_details?: {
+        code?: string;
+    };
+    coupon_details?: any;
+    verification_data?: {
+        code?: string;
+    };
+}
+export interface PromotionSectionProps {
+    checkoutSessionId: string;
+    currency: TPaymentCurrency;
+    currencyId: string;
+    discounts: DiscountInfo[];
+    allowPromotionCodes: boolean;
+    completed?: boolean;
+    disabled?: boolean;
+    onPromotionUpdate: () => void;
+    onRemovePromotion: (sessionId: string) => void;
+    calculatedDiscountAmount?: string | null;
+    isRateLoading?: boolean;
+}
+export default function PromotionSection({ checkoutSessionId, currency, currencyId, discounts, allowPromotionCodes, completed, disabled, onPromotionUpdate, onRemovePromotion, calculatedDiscountAmount, isRateLoading, }: PromotionSectionProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = PromotionSection;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+var _promotionCode = _interopRequireDefault(require("../../components/promotion-code"));
+var _util = require("../../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function PromotionSection({
+  checkoutSessionId,
+  currency,
+  currencyId,
+  discounts,
+  allowPromotionCodes,
+  completed = false,
+  disabled = false,
+  onPromotionUpdate,
+  onRemovePromotion,
+  calculatedDiscountAmount = null,
+  isRateLoading = false
+}) {
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const hasDiscounts = discounts?.length > 0;
+  const getAppliedPromotionCodes = () => {
+    if (!discounts?.length) return [];
+    return discounts.filter(discount => discount.promotion_code || discount.coupon).map(discount => ({
+      id: discount.promotion_code || discount.coupon,
+      code: discount.verification_data?.code || "APPLIED",
+      discount_amount: discount.discount_amount
+    }));
+  };
+  if (allowPromotionCodes && !hasDiscounts) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+      sx: {
+        mt: 1
+      },
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_promotionCode.default, {
+        checkoutSessionId,
+        initialAppliedCodes: getAppliedPromotionCodes(),
+        disabled: completed,
+        onUpdate: onPromotionUpdate,
+        currencyId
+      })
+    });
+  }
+  if (!hasDiscounts) {
+    return null;
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+    children: discounts.map(discount => {
+      const promotionCodeInfo = discount.promotion_code_details;
+      const couponInfo = discount.coupon_details;
+      const discountDescription = couponInfo ? (0, _util.formatCouponTerms)(couponInfo, currency, 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,
+              onClick: () => onRemovePromotion(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",
+              opacity: isRateLoading ? 0 : 1,
+              transition: "opacity 300ms ease-in-out"
+            },
+            children: ["-", (0, _util.formatAmount)(calculatedDiscountAmount || "0", currency.decimal), " ", currency.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}`);
+    })
+  });
+}

package/lib/payment/summary-section/total-section.d.ts

@@ -0,0 +1,39 @@
+/**
+ * TotalSection Component
+ *
+ * Displays total amount, USD equivalent, exchange rate details,
+ * and quote information for dynamic pricing.
+ */
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import type { SlippageConfigValue } from '../../components/slippage-config';
+export interface RateInfo {
+    exchangeRate: string | null;
+    baseCurrency: string;
+    providerName?: string | null;
+    providerId?: string | null;
+    timestampMs?: number | null;
+}
+export interface QuoteDetailRow {
+    label: string;
+    value: string | React.ReactNode;
+    isSlippage?: boolean;
+}
+export interface TotalSectionProps {
+    totalAmountText: string;
+    totalUsdDisplay: string | null;
+    currency: TPaymentCurrency;
+    hasDynamicPricing: boolean;
+    rateDisplay: string | null;
+    rateInfo: RateInfo;
+    quoteDetailRows: QuoteDetailRow[];
+    currentSlippagePercent: number;
+    slippageConfig?: SlippageConfigValue;
+    isPriceLocked: boolean;
+    isSubscription: boolean;
+    completed?: boolean;
+    onSlippageChange?: (slippageConfig: SlippageConfigValue) => void;
+    isStripePayment?: boolean;
+    thenInfo?: string;
+    isRateLoading?: boolean;
+}
+export default function TotalSection({ totalAmountText, totalUsdDisplay, currency, hasDynamicPricing, rateDisplay, rateInfo, quoteDetailRows, currentSlippagePercent, slippageConfig, isPriceLocked, isSubscription, completed, onSlippageChange, isStripePayment, thenInfo, isRateLoading, }: TotalSectionProps): import("react").JSX.Element;