@blocklet/payment-react 1.24.3 → 1.25.0

package/src/payment/summary-section/promotion-section.tsx

@@ -0,0 +1,172 @@
+/**
+ * PromotionSection Component
+ *
+ * Handles promotion code input, applied discounts display, and removal.
+ */
+
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { Close, LocalOffer } from '@mui/icons-material';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import PromotionCode from '../../components/promotion-code';
+import { formatAmount, formatCouponTerms } from '../../libs/util';
+
+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;
+  // For dynamic pricing: frontend-calculated discount amount
+  calculatedDiscountAmount?: string | null;
+  isRateLoading?: boolean;
+}
+
+export default function PromotionSection({
+  checkoutSessionId,
+  currency,
+  currencyId,
+  discounts,
+  allowPromotionCodes,
+  completed = false,
+  disabled = false,
+  onPromotionUpdate,
+  onRemovePromotion,
+  calculatedDiscountAmount = null,
+  isRateLoading = false,
+}: PromotionSectionProps) {
+  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) as string,
+        code: discount.verification_data?.code || 'APPLIED',
+        discount_amount: discount.discount_amount,
+      }));
+  };
+
+  // Only show add button if no discounts applied
+  if (allowPromotionCodes && !hasDiscounts) {
+    return (
+      <Box sx={{ mt: 1 }}>
+        <PromotionCode
+          checkoutSessionId={checkoutSessionId}
+          initialAppliedCodes={getAppliedPromotionCodes()}
+          disabled={completed}
+          onUpdate={onPromotionUpdate}
+          currencyId={currencyId}
+        />
+      </Box>
+    );
+  }
+
+  // Show applied discounts
+  if (!hasDiscounts) {
+    return null;
+  }
+
+  return (
+    <Box>
+      {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 (
+          <Stack key={discount.promotion_code || discount.coupon || `discount-${discount.discount_amount}`}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                  backgroundColor: 'grey.100',
+                  width: 'fit-content',
+                  px: 1,
+                  py: 1,
+                  borderRadius: 1,
+                }}>
+                <Typography
+                  sx={{
+                    fontWeight: 'medium',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 0.5,
+                  }}>
+                  <LocalOffer sx={{ color: 'warning.main', fontSize: 'small' }} />
+                  {promotionCodeInfo?.code || discount.verification_data?.code || t('payment.checkout.discount')}
+                </Typography>
+                {!completed && (
+                  <Button
+                    size="small"
+                    disabled={disabled}
+                    onClick={() => onRemovePromotion(checkoutSessionId)}
+                    sx={{
+                      minWidth: 'auto',
+                      width: 16,
+                      height: 16,
+                      color: 'text.secondary',
+                      '&.Mui-disabled': {
+                        color: 'text.disabled',
+                      },
+                    }}>
+                    <Close sx={{ fontSize: 14 }} />
+                  </Button>
+                )}
+              </Stack>
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  opacity: isRateLoading ? 0 : 1,
+                  transition: 'opacity 300ms ease-in-out',
+                }}>
+                -{formatAmount(calculatedDiscountAmount || '0', currency.decimal)} {currency.symbol}
+              </Typography>
+            </Stack>
+            {/* Show discount description */}
+            {discountDescription && (
+              <Typography
+                sx={{
+                  fontSize: 'small',
+                  color: notSupported ? 'error.main' : 'text.secondary',
+                  mt: 0.5,
+                }}>
+                {discountDescription}
+              </Typography>
+            )}
+          </Stack>
+        );
+      })}
+    </Box>
+  );
+}

package/src/payment/summary-section/total-section.tsx

@@ -0,0 +1,141 @@
+/**
+ * TotalSection Component
+ *
+ * Displays total amount, USD equivalent, exchange rate details,
+ * and quote information for dynamic pricing.
+ */
+
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
+import { Box, Skeleton, Stack, Tooltip, Typography } from '@mui/material';
+import PaymentAmount from '../amount';
+import QuoteDetailsPanel from '../../components/quote-details-panel';
+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; // Loading state for skeleton display during currency switch
+}
+
+export default function TotalSection({
+  totalAmountText,
+  totalUsdDisplay,
+  currency,
+  hasDynamicPricing,
+  rateDisplay,
+  rateInfo,
+  quoteDetailRows,
+  currentSlippagePercent,
+  slippageConfig = undefined,
+  isPriceLocked,
+  isSubscription,
+  completed = false,
+  onSlippageChange = undefined,
+  isStripePayment = false,
+  thenInfo = '',
+  isRateLoading = false,
+}: TotalSectionProps) {
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <Stack
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          width: '100%',
+        }}>
+        <Box className="base-label">{t('common.total')}</Box>
+        <Stack sx={{ alignItems: 'flex-end' }}>
+          {isRateLoading ? (
+            <Skeleton variant="text" width={100} height={24} />
+          ) : (
+            <PaymentAmount amount={totalAmountText} sx={{ fontSize: '16px' }} />
+          )}
+
+          {/* USD equivalent display - hide for Stripe payments since base_amount is already USD */}
+          {/* No skeleton for USD - it's based on base_amount which doesn't change */}
+          {hasDynamicPricing &&
+            !isStripePayment &&
+            !isRateLoading &&
+            (totalUsdDisplay ? (
+              <Typography sx={{ fontSize: '0.7875rem', color: 'text.lighter' }}>≈ ${totalUsdDisplay}</Typography>
+            ) : (
+              <Tooltip title={t('payment.checkout.quote.referenceUnavailable')} placement="top">
+                <Box component="span">
+                  <Typography sx={{ fontSize: '0.7875rem', color: 'text.lighter' }}>≈ —</Typography>
+                </Box>
+              </Tooltip>
+            ))}
+
+          {/* Quote details panel for dynamic pricing - hide for Stripe payments since no exchange rate conversion needed */}
+          {/* Show panel if hasDynamicPricing is true, even without rateDisplay (for metered subscriptions waiting for first usage) */}
+          {hasDynamicPricing && !isStripePayment && (
+            <QuoteDetailsPanel
+              rateLine={
+                rateDisplay ? t('payment.checkout.quote.rateLine', { symbol: currency.symbol, rate: rateDisplay }) : ''
+              }
+              rows={quoteDetailRows}
+              isSubscription={isSubscription}
+              slippageValue={currentSlippagePercent}
+              slippageConfig={slippageConfig}
+              onSlippageChange={!completed && onSlippageChange ? onSlippageChange : undefined}
+              exchangeRate={rateInfo.exchangeRate}
+              baseCurrency={rateInfo.baseCurrency}
+              disabled={isPriceLocked}
+            />
+          )}
+
+          {/* Lock expired warning removed - per Final Freeze design, Quote doesn't expire by time */}
+        </Stack>
+      </Stack>
+      {thenInfo && (
+        <Stack
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            width: '100%',
+            borderTop: '1px solid',
+            borderColor: 'divider',
+            pt: 1,
+            mt: 1,
+          }}>
+          <Box className="base-label">{t('common.nextCharge')}</Box>
+          <Typography sx={{ fontSize: '16px', color: 'text.secondary' }}>{thenInfo}</Typography>
+        </Stack>
+      )}
+    </>
+  );
+}