@blocklet/payment-react 1.24.3 → 1.25.0

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

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Close, LocalOffer } from "@mui/icons-material";
+import { Box, Button, Stack, Typography } from "@mui/material";
+import PromotionCode from "../../components/promotion-code.js";
+import { formatAmount, formatCouponTerms } from "../../libs/util.js";
+export default function PromotionSection({
+  checkoutSessionId,
+  currency,
+  currencyId,
+  discounts,
+  allowPromotionCodes,
+  completed = false,
+  disabled = false,
+  onPromotionUpdate,
+  onRemovePromotion,
+  calculatedDiscountAmount = null,
+  isRateLoading = false
+}) {
+  const { t, locale } = 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__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(
+      PromotionCode,
+      {
+        checkoutSessionId,
+        initialAppliedCodes: getAppliedPromotionCodes(),
+        disabled: completed,
+        onUpdate: onPromotionUpdate,
+        currencyId
+      }
+    ) });
+  }
+  if (!hasDiscounts) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Box, { children: discounts.map((discount) => {
+    const promotionCodeInfo = discount.promotion_code_details;
+    const couponInfo = discount.coupon_details;
+    const discountDescription = couponInfo ? formatCouponTerms(couponInfo, currency, 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,
+                      onClick: () => onRemovePromotion(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",
+                  opacity: isRateLoading ? 0 : 1,
+                  transition: "opacity 300ms ease-in-out"
+                },
+                children: [
+                  "-",
+                  formatAmount(calculatedDiscountAmount || "0", currency.decimal),
+                  " ",
+                  currency.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}`);
+  }) });
+}

package/es/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;

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

@@ -0,0 +1,83 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { Box, Skeleton, Stack, Tooltip, Typography } from "@mui/material";
+import PaymentAmount from "../amount.js";
+import QuoteDetailsPanel from "../../components/quote-details-panel.js";
+export default 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 } = useLocaleContext();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "flex-start",
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "base-label", children: t("common.total") }),
+          /* @__PURE__ */ jsxs(Stack, { sx: { alignItems: "flex-end" }, children: [
+            isRateLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 100, height: 24 }) : /* @__PURE__ */ jsx(PaymentAmount, { amount: totalAmountText, sx: { fontSize: "16px" } }),
+            hasDynamicPricing && !isStripePayment && !isRateLoading && (totalUsdDisplay ? /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: [
+              "\u2248 $",
+              totalUsdDisplay
+            ] }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.quote.referenceUnavailable"), placement: "top", children: /* @__PURE__ */ jsx(Box, { component: "span", children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: "\u2248 \u2014" }) }) })),
+            hasDynamicPricing && !isStripePayment && /* @__PURE__ */ jsx(
+              QuoteDetailsPanel,
+              {
+                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__ */ jsxs(
+      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__ */ jsx(Box, { className: "base-label", children: t("common.nextCharge") }),
+          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", color: "text.secondary" }, children: thenInfo })
+        ]
+      }
+    )
+  ] });
+}

package/es/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 {};