@blocklet/payment-react 1.20.10 → 1.20.12

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