@blocklet/payment-react 1.20.11 → 1.20.13

package/src/libs/util.ts

@@ -5,6 +5,7 @@ import type {
   PaymentDetails,
   PriceCurrency,
   PriceRecurring,
+  TCoupon,
   TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
@@ -31,6 +32,40 @@ import type { ActionProps, PricingRenderProps } from '../types';
 
 export const PAYMENT_KIT_DID = 'z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk';
 
+/**
+ * Format coupon discount terms for display
+ */
+export const formatCouponTerms = (coupon: TCoupon, currency: TPaymentCurrency, locale: string = 'en'): string => {
+  let couponOff = '';
+
+  if (coupon.percent_off && coupon.percent_off > 0) {
+    couponOff = t('payment.checkout.coupon.percentage', locale, { percent: coupon.percent_off });
+  }
+
+  if (coupon.amount_off && coupon.amount_off !== '0') {
+    const { symbol } = currency;
+    couponOff =
+      coupon.currency_id === currency.id
+        ? coupon.amount_off || ''
+        : coupon.currency_options?.[currency.id]?.amount_off || '';
+    if (couponOff) {
+      couponOff = t('payment.checkout.coupon.fixedAmount', locale, {
+        amount: formatAmount(couponOff, currency.decimal),
+        symbol,
+      });
+    }
+  }
+
+  if (!couponOff) {
+    return t('payment.checkout.coupon.noDiscount');
+  }
+
+  return t(`payment.checkout.coupon.terms.${coupon.duration}`, locale, {
+    couponOff,
+    months: coupon.duration_in_months || 0,
+  });
+};
+
 export const isPaymentKitMounted = () => {
   return (window.blocklet?.componentMountPoints || []).some((x: any) => x.did === PAYMENT_KIT_DID);
 };

package/src/locales/en.tsx

@@ -246,6 +246,31 @@ export default flat({
       orderSummary: 'Order Summary',
       paymentDetails: 'Payment Details',
       productListTotal: 'Includes {total} items',
+      promotion: {
+        add_code: 'Add promotion code',
+        enter_code: 'Enter promotion code',
+        placeholder: 'Enter code',
+        apply: 'Apply',
+        applied: 'Applied promotion codes',
+        dialog: {
+          title: 'Add promotion code',
+        },
+        error: {
+          unknown: 'Unknown error',
+          network: 'Network error occurred',
+          removal: 'Failed to remove code',
+        },
+      },
+      coupon: {
+        noDiscount: 'No discount',
+        percentage: '{percent}% off',
+        fixedAmount: '{amount} {symbol} off',
+        terms: {
+          forever: '{couponOff} forever',
+          once: '{couponOff} once',
+          repeating: "{couponOff} for {months} month{months > 1 ? 's' : ''}",
+        },
+      },
       connectModal: {
         title: '{action}',
         scan: 'Use the following methods to complete this payment',

package/src/locales/zh.tsx

@@ -229,6 +229,35 @@ export default flat({
         add: '添加到订单',
         remove: '从订单移除',
       },
+      promotion: {
+        add_code: '添加促销码',
+        enter_code: '输入促销码',
+        apply: '应用',
+        applied: '已应用的促销码',
+        placeholder: '输入促销码',
+        duration_once: '1次优惠 {amount} {symbol}',
+        duration_repeating: '{months}个月优惠 {amount} {symbol}',
+        duration_forever: '永久优惠 {amount} {symbol}',
+        dialog: {
+          title: '添加促销码',
+        },
+        error: {
+          invalid: '无效的促销码',
+          expired: '促销码已过期',
+          used: '促销码已被使用',
+          not_applicable: '促销码不适用于此订单',
+        },
+      },
+      coupon: {
+        noDiscount: '无优惠',
+        percentage: '{percent}%',
+        fixedAmount: '{amount} {symbol}',
+        terms: {
+          forever: '永久享 {couponOff} 折扣',
+          once: '单次享 {couponOff} 折扣',
+          repeating: '{months} 个月内享 {couponOff} 折扣',
+        },
+      },
       credit: {
         oneTimeInfo: '付款完成后您将获得 {amount} {symbol} 额度',
         recurringInfo: '您将{period}获得 {amount} {symbol} 额度',

package/src/payment/form/index.tsx

@@ -176,7 +176,7 @@ export default function PaymentForm({
   // const theme = useTheme();
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
-  const { session, connect, payable } = usePaymentContext();
+  const { session, connect, payable, setPaymentState } = usePaymentContext();
   const subscription = useSubscription('events');
   const formErrorPosition = 'bottom';
   const {
@@ -244,6 +244,15 @@ export default function PaymentForm({
     }
   }, [subscription]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Sync payment states to PaymentContext
+  useEffect(() => {
+    setPaymentState({
+      paying: state.submitting || state.paying,
+      stripePaying: state.stripePaying,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.submitting, state.paying, state.stripePaying]);
+
   const mergeUserInfo = (
     customerInfo: UserInfo | (TCustomer & { fullName?: string }),
     userInfo?: UserInfo

package/src/payment/index.tsx

@@ -177,6 +177,15 @@ function PaymentInner({
     if (onChange) {
       onChange(methods.getValues());
     }
+    if ((state.checkoutSession as any)?.discounts?.length) {
+      api
+        .post(`/api/checkout-sessions/${state.checkoutSession.id}/recalculate-promotion`, {
+          currency_id: currencyId,
+        })
+        .then(() => {
+          onPromotionUpdate();
+        });
+    }
   }, [currencyId]); // eslint-disable-line
 
   const onUpsell = async (from: string, to: string) => {
@@ -245,6 +254,16 @@ function PaymentInner({
     }
   };
 
+  const onPromotionUpdate = async () => {
+    try {
+      const { data } = await api.get(`/api/checkout-sessions/retrieve/${state.checkoutSession.id}`);
+      setState({ checkoutSession: data.checkoutSession });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   const handlePaid = (result: any) => {
     setState({ checkoutSession: result.checkoutSession });
     onPaid(result);
@@ -292,6 +311,9 @@ function PaymentInner({
                 donationSettings={paymentLink?.donation_settings}
                 action={action}
                 completed={completed}
+                checkoutSession={state.checkoutSession}
+                onPromotionUpdate={onPromotionUpdate}
+                paymentMethods={paymentMethods as TPaymentMethodExpanded[]}
                 showFeatures={showFeatures}
               />
               {mode === 'standalone' && !isMobile && (

package/src/payment/product-item.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { Box, Stack, Typography, IconButton, TextField, Alert } from '@mui/material';
-import { Add, Remove } from '@mui/icons-material';
+import { Box, Stack, Typography, IconButton, TextField, Alert, Chip } from '@mui/material';
+import { Add, Remove, LocalOffer } from '@mui/icons-material';
 
 import React, { useMemo, useState } from 'react';
 import Status from '../components/status';
@@ -14,6 +14,7 @@ import {
   formatQuantityInventory,
   formatRecurring,
   formatUpsellSaving,
+  formatAmount,
 } from '../libs/util';
 import ProductCard from './product-card';
 import dayjs from '../libs/dayjs';
@@ -212,6 +213,40 @@ export default function ProductItem({
             )}
           </Stack>
         </Stack>
+
+        {/* Display discount information for this item */}
+        {item.discount_amounts && item.discount_amounts.length > 0 && (
+          <Stack direction="row" spacing={1} sx={{ mt: 1, alignItems: 'center' }}>
+            {item.discount_amounts.map((discountAmount: any) => (
+              <Chip
+                key={discountAmount.promotion_code}
+                icon={<LocalOffer sx={{ fontSize: '0.8rem !important' }} />}
+                label={
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                    <Typography component="span" sx={{ fontSize: '0.75rem', fontWeight: 'medium' }}>
+                      {discountAmount.promotion_code?.code || 'DISCOUNT'}
+                    </Typography>
+                    <Typography component="span" sx={{ fontSize: '0.75rem' }}>
+                      (-{formatAmount(discountAmount.amount || '0', currency.decimal)} {currency.symbol})
+                    </Typography>
+                  </Box>
+                }
+                size="small"
+                variant="filled"
+                sx={{
+                  height: 20,
+                  '& .MuiChip-icon': {
+                    color: 'warning.main',
+                  },
+                  '& .MuiChip-label': {
+                    px: 1,
+                  },
+                }}
+              />
+            ))}
+          </Stack>
+        )}
+
         {showFeatures && features.length > 0 && (
           <Box
             sx={{

package/src/payment/summary.tsx

@@ -1,7 +1,14 @@
+/* eslint-disable @typescript-eslint/indent */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { DonationSettings, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { HelpOutline } from '@mui/icons-material';
-import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton } from '@mui/material';
+import type {
+  DonationSettings,
+  TLineItemExpanded,
+  TPaymentCurrency,
+  TCheckoutSession,
+  TPaymentMethodExpanded,
+} from '@blocklet/payment-types';
+import { HelpOutline, Close, LocalOffer } from '@mui/icons-material';
+import { Box, Divider, Fade, Grow, Stack, Tooltip, Typography, Collapse, IconButton, Button } from '@mui/material';
 import type { IconButtonProps } from '@mui/material';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { useRequest, useSetState } from 'ahooks';
@@ -11,7 +18,14 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { styled } from '@mui/material/styles';
 import Status from '../components/status';
 import api from '../libs/api';
-import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from '../libs/util';
+import {
+  formatAmount,
+  formatCheckoutHeadlines,
+  getPriceUintAmountByCurrency,
+  formatCouponTerms,
+  formatNumber,
+  findCurrency,
+} from '../libs/util';
 import PaymentAmount from './amount';
 import ProductDonation from './product-donation';
 import ProductItem from './product-item';
@@ -19,6 +33,7 @@ import Livemode from '../components/livemode';
 import { usePaymentContext } from '../contexts/payment';
 import { useMobile } from '../hooks/mobile';
 import LoadingButton from '../components/loading-button';
+import PromotionCode from '../components/promotion-code';
 
 // const shake = keyframes`
 //   0% {
@@ -71,6 +86,9 @@ type Props = {
   donationSettings?: DonationSettings; // only include backend part
   action?: string;
   completed?: boolean;
+  checkoutSession?: TCheckoutSession;
+  onPromotionUpdate?: () => void;
+  paymentMethods?: TPaymentMethodExpanded[];
   showFeatures?: boolean;
 };
 
@@ -139,23 +157,74 @@ export default function PaymentSummary({
   action = '',
   trialEnd = 0,
   completed = false,
+  checkoutSession = undefined,
+  paymentMethods = [],
+  onPromotionUpdate = noop,
   showFeatures = false,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
-  const settings = usePaymentContext();
+  const { paymentState, ...settings } = usePaymentContext();
   const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
   const { data, runAsync } = useRequest(() =>
     checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
-  const headlines = formatCheckoutHeadlines(items, currency, { trialEnd, trialInDays }, locale);
-  const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : '0';
+
+  const sessionDiscounts = (checkoutSession as any)?.discounts || [];
+  const allowPromotionCodes = !!checkoutSession?.allow_promotion_codes;
+  const hasDiscounts = sessionDiscounts?.length > 0;
+
+  const discountCurrency =
+    paymentMethods && checkoutSession
+      ? (findCurrency(
+          paymentMethods as TPaymentMethodExpanded[],
+          hasDiscounts ? checkoutSession?.currency_id || currency.id : (currency.id as string)
+        ) as TPaymentCurrency) || settings.settings?.baseCurrency
+      : currency;
+
+  const headlines = formatCheckoutHeadlines(items, discountCurrency, { trialEnd, trialInDays }, locale);
+  const staking = showStaking ? getStakingSetup(items, discountCurrency, billingThreshold) : '0';
+
+  const getAppliedPromotionCodes = () => {
+    if (!sessionDiscounts?.length) return [];
+
+    return sessionDiscounts.map((discount: any) => ({
+      id: discount.promotion_code || discount.coupon,
+      code: discount.verification_data?.code || 'APPLIED',
+      discount_amount: discount.discount_amount,
+    }));
+  };
+
+  const handlePromotionUpdate = () => {
+    onPromotionUpdate?.();
+  };
+
+  const handleRemovePromotion = async (sessionId: string) => {
+    // Prevent removing promotion during payment process
+    if (paymentState.paying || paymentState.stripePaying) {
+      return;
+    }
+    try {
+      await api.delete(`/api/checkout-sessions/${sessionId}/remove-promotion`);
+      onPromotionUpdate?.();
+    } catch (err: any) {
+      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(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
-    currency?.decimal
+    new BN(fromTokenToUnit(subtotalAmount, discountCurrency?.decimal)).sub(discountAmount).toString(),
+    discountCurrency?.decimal
   );
+
   useBus(
     'error.REQUIRE_CROSS_SELL',
     () => {
@@ -217,20 +286,20 @@ export default function PaymentSummary({
         {items.map((x: TLineItemExpanded) =>
           x.price.custom_unit_amount && onChangeAmount && donationSettings ? (
             <ProductDonation
-              key={`${x.price_id}-${currency.id}`}
+              key={`${x.price_id}-${discountCurrency.id}`}
               item={x}
               settings={donationSettings}
               onChange={onChangeAmount}
-              currency={currency}
+              currency={discountCurrency}
             />
           ) : (
             <ProductItem
-              key={`${x.price_id}-${currency.id}`}
+              key={`${x.price_id}-${discountCurrency.id}`}
               item={x}
               items={items}
               trialInDays={trialInDays}
               trialEnd={trialEnd}
-              currency={currency}
+              currency={discountCurrency}
               onUpsell={handleUpsell}
               onDownsell={handleDownsell}
               adjustableQuantity={x.adjustable_quantity}
@@ -272,7 +341,7 @@ export default function PaymentSummary({
               item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
               items={items}
               trialInDays={trialInDays}
-              currency={currency}
+              currency={discountCurrency}
               trialEnd={trialEnd}
               onUpsell={noop}
               onDownsell={noop}>
@@ -393,11 +462,127 @@ export default function PaymentSummary({
                 </Tooltip>
               </Stack>
               <Typography>
-                {formatAmount(staking, currency.decimal)} {currency.symbol}
+                {formatAmount(staking, discountCurrency.decimal)} {discountCurrency.symbol}
               </Typography>
             </Stack>
           </>
         )}
+        {(allowPromotionCodes || hasDiscounts) && (
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              ...(staking > 0 && {
+                borderTop: '1px solid',
+                borderColor: 'divider',
+                pt: 1,
+                mt: 1,
+              }),
+            }}>
+            <Typography className="base-label">{t('common.subtotal')}</Typography>
+            <Typography>
+              {formatNumber(subtotalAmount)} {discountCurrency.symbol}
+            </Typography>
+          </Stack>
+        )}
+        {/* Promotion Code Section - only show add button if no discounts applied */}
+        {allowPromotionCodes && !hasDiscounts && (
+          <Box sx={{ mt: 1 }}>
+            <PromotionCode
+              checkoutSessionId={checkoutSession.id}
+              initialAppliedCodes={getAppliedPromotionCodes()}
+              disabled={completed}
+              onUpdate={handlePromotionUpdate}
+              currencyId={currency.id}
+            />
+          </Box>
+        )}
+
+        {/* Promotion Code Details */}
+        {hasDiscounts && (
+          <Box
+            sx={{
+              py: 1.5,
+            }}>
+            {sessionDiscounts.map((discount: any) => {
+              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 (
+                <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: 0.5,
+                        borderRadius: 1,
+                      }}>
+                      <Typography
+                        sx={{
+                          fontWeight: 'medium',
+                          fontSize: 'small',
+                          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={paymentState.paying || paymentState.stripePaying}
+                          onClick={() => handleRemovePromotion(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' }}>
+                      -{formatAmount(discount.discount_amount || '0', discountCurrency.decimal)}{' '}
+                      {discountCurrency.symbol}
+                    </Typography>
+                  </Stack>
+                  {/* Show discount description */}
+                  {discountDescription && (
+                    <Typography
+                      sx={{
+                        fontSize: 'small',
+                        color: notSupported ? 'error.main' : 'text.secondary',
+                        mt: 0.5,
+                      }}>
+                      {discountDescription}
+                    </Typography>
+                  )}
+                </Stack>
+              );
+            })}
+          </Box>
+        )}
+
         <Stack
           sx={{
             display: 'flex',
@@ -407,7 +592,7 @@ export default function PaymentSummary({
             width: '100%',
           }}>
           <Box className="base-label">{t('common.total')} </Box>
-          <PaymentAmount amount={`${totalAmount} ${currency.symbol}`} sx={{ fontSize: '16px' }} />
+          <PaymentAmount amount={`${totalAmount} ${discountCurrency.symbol}`} sx={{ fontSize: '16px' }} />
         </Stack>
         {headlines.then && headlines.showThen && (
           <Typography