@blocklet/payment-react 1.20.10 → 1.20.12

package/src/components/promotion-code.tsx

@@ -0,0 +1,184 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { TextField, Button, Alert, Box, InputAdornment } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import { useState } from 'react';
+import LoadingButton from './loading-button';
+import api from '../libs/api';
+import { usePaymentContext } from '../contexts/payment';
+
+export interface AppliedPromoCode {
+  id: string;
+  code: string;
+  discount_amount?: string;
+}
+
+interface PromotionCodeProps {
+  checkoutSessionId: string;
+  initialAppliedCodes?: AppliedPromoCode[];
+  disabled?: boolean;
+  className?: string;
+  placeholder?: string;
+  currencyId: string;
+  onUpdate?: (data: { appliedCodes: AppliedPromoCode[]; discountAmount: string }) => void;
+}
+
+export default function PromotionCode({
+  checkoutSessionId,
+  initialAppliedCodes = [],
+  disabled = false,
+  className = '',
+  placeholder = '',
+  onUpdate = undefined,
+  currencyId,
+}: PromotionCodeProps) {
+  const { t } = useLocaleContext();
+  const [showInput, setShowInput] = useState(false);
+  const [code, setCode] = useState('');
+  const [error, setError] = useState('');
+  const [applying, setApplying] = useState(false);
+  const [appliedCodes, setAppliedCodes] = useState<AppliedPromoCode[]>(initialAppliedCodes);
+  const { session, paymentState } = usePaymentContext();
+
+  const handleLoginCheck = () => {
+    if (!session.user) {
+      session?.login(() => {
+        handleApply();
+      });
+    } else {
+      handleApply();
+    }
+  };
+
+  const handleApply = async () => {
+    if (!code.trim()) return;
+
+    // Prevent applying promotion during payment process
+    if (paymentState.paying || paymentState.stripePaying) {
+      return;
+    }
+
+    setApplying(true);
+    setError('');
+
+    try {
+      const response = await api.post(`/api/checkout-sessions/${checkoutSessionId}/apply-promotion`, {
+        promotion_code: code.trim(),
+        currency_id: currencyId,
+      });
+
+      const discounts = response.data.discounts || [];
+      const appliedDiscount = discounts[0];
+
+      if (appliedDiscount) {
+        const newCode: AppliedPromoCode = {
+          id: appliedDiscount.promotion_code || appliedDiscount.coupon,
+          code: code.trim(),
+          discount_amount: appliedDiscount.discount_amount,
+        };
+
+        setAppliedCodes([newCode]);
+        setCode('');
+        setShowInput(false);
+
+        onUpdate?.({
+          appliedCodes: [newCode],
+          discountAmount: appliedDiscount.discount_amount,
+        });
+      }
+    } catch (err: any) {
+      const errorMessage = err.response?.data?.error || err.message;
+      setError(errorMessage);
+    } finally {
+      setApplying(false);
+    }
+  };
+
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !applying && code.trim()) {
+      handleLoginCheck();
+    }
+  };
+
+  const isPaymentInProgress = paymentState.paying || paymentState.stripePaying;
+
+  return (
+    <Box className={className}>
+      {/* Input field or add button - only show if no codes applied */}
+      {appliedCodes.length === 0 &&
+        !disabled &&
+        !isPaymentInProgress &&
+        (showInput ? (
+          <Box
+            onBlur={() => {
+              if (!code.trim()) {
+                setShowInput(false);
+              }
+            }}>
+            <TextField
+              fullWidth
+              value={code}
+              onChange={(e) => setCode(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder={placeholder || t('payment.checkout.promotion.placeholder')}
+              variant="outlined"
+              size="small"
+              disabled={applying}
+              autoFocus
+              slotProps={{
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <LoadingButton
+                        size="small"
+                        onClick={handleLoginCheck}
+                        loading={applying}
+                        disabled={!code.trim()}
+                        variant="text"
+                        sx={{
+                          color: 'primary.main',
+                          fontSize: 'small',
+                        }}>
+                        {t('payment.checkout.promotion.apply')}
+                      </LoadingButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  pr: 1,
+                },
+              }}
+            />
+
+            {error && (
+              <Alert
+                severity="error"
+                sx={{
+                  my: 1,
+                }}>
+                {error}
+              </Alert>
+            )}
+          </Box>
+        ) : (
+          <Button
+            onClick={() => setShowInput(true)}
+            startIcon={<Add fontSize="small" />}
+            variant="text"
+            sx={{
+              fontWeight: 'normal',
+              textTransform: 'none',
+              justifyContent: 'flex-start',
+              p: 0,
+              '&:hover': {
+                backgroundColor: 'transparent',
+                textDecoration: 'underline',
+              },
+            }}>
+            {t('payment.checkout.promotion.add_code')}
+          </Button>
+        ))}
+    </Box>
+  );
+}

package/src/contexts/payment.tsx

@@ -29,6 +29,11 @@ export type PaymentContextType = {
   api: Axios;
   payable: boolean;
   setPayable: (status: boolean) => void;
+  paymentState: {
+    paying: boolean;
+    stripePaying: boolean;
+  };
+  setPaymentState: (state: Partial<{ paying: boolean; stripePaying: boolean }>) => void;
 };
 
 export type PaymentContextProps = {
@@ -188,6 +193,14 @@ function PaymentProvider({
 
   const prefix = getPrefix();
   const [payable, setPayable] = useState(true);
+  const [paymentState, setPaymentState] = useState({
+    paying: false,
+    stripePaying: false,
+  });
+
+  const updatePaymentState = (state: Partial<{ paying: boolean; stripePaying: boolean }>) => {
+    setPaymentState((prev) => ({ ...prev, ...state }));
+  };
 
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
@@ -212,6 +225,8 @@ function PaymentProvider({
         api,
         payable,
         setPayable,
+        paymentState,
+        setPaymentState: updatePaymentState,
       }}>
       {children}
     </Provider>

package/src/index.ts

@@ -39,6 +39,7 @@ import DateRangePicker from './components/date-range-picker';
 import AutoTopupModal from './components/auto-topup/modal';
 import AutoTopup from './components/auto-topup';
 import Collapse from './components/collapse';
+import PromotionCode from './components/promotion-code';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -102,4 +103,5 @@ export {
   AutoTopupModal,
   AutoTopup,
   Collapse,
+  PromotionCode,
 };

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

@@ -104,8 +104,8 @@ export default flat({
     know: 'I know',
     relatedSubscription: 'Subscription',
     connect: {
-      defaultScan: 'Use following methods to complete this action',
-      scan: 'Use following methods to complete this {action}',
+      defaultScan: 'Use the following methods to complete this action',
+      scan: 'Use the following methods to complete this {action}',
       confirm: 'Confirm',
       cancel: 'Cancel',
     },
@@ -156,14 +156,14 @@ export default flat({
         },
         inactive: 'Donation feature is not enabled',
         enable: 'Enable Donation',
-        enableSuccess: 'Enable Success',
-        configPrompt: 'Donation feature is enabled, you can configure donation options in Payment Kit',
+        enableSuccess: 'Successfully enabled',
+        configPrompt: 'The donation feature is enabled. You can configure donation options in Payment Kit',
         configNow: 'Configure Now',
         later: 'Configure Later',
         configTip: 'Configure donation settings in Payment Kit',
       },
       cardPay: '{action} with bank card',
-      empty: 'No thing to pay',
+      empty: 'Nothing to pay',
       per: 'per',
       pay: 'Pay {payee}',
       try1: 'Try {name}',
@@ -177,8 +177,8 @@ export default flat({
       least: 'continue with at least',
       completed: {
         payment: 'Thanks for your purchase',
-        subscription: 'Thanks for your subscribing',
-        setup: 'Thanks for your subscribing',
+        subscription: 'Thanks for subscribing',
+        setup: 'Thanks for subscribing',
         donate: 'Thanks for your tip',
         tip: 'A payment to {payee} has been completed. You can view the details of this payment in your account.',
       },
@@ -188,7 +188,7 @@ export default flat({
         delivered: 'Installation completed',
         failed: 'Processing failed',
         failedMsg:
-          'An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience caused. Thank you for your understanding!',
+          'An exception occurred during installation. We will automatically process a refund for you. We apologize for the inconvenience. Thank you for your understanding!',
       },
       confirm: {
         withStake:
@@ -241,14 +241,39 @@ export default flat({
       },
       emptyItems: {
         title: 'Nothing to show here',
-        description: 'Seems this checkoutSession is not configured properly',
+        description: 'It seems this checkout session is not configured properly',
       },
       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 following methods to complete this payment',
+        scan: 'Use the following methods to complete this payment',
         confirm: 'Confirm',
         cancel: 'Cancel',
       },
@@ -337,7 +362,7 @@ export default flat({
       summary: 'Summary',
       products: 'Products',
       update: 'Update Information',
-      empty: 'Seems you do not have any subscriptions or payments here',
+      empty: 'It seems you do not have any subscriptions or payments here',
       cancel: {
         button: 'Unsubscribe',
         title: 'Cancel your subscription',
@@ -350,7 +375,7 @@ export default flat({
           tip: 'We would love your feedback, it will help us improve our service',
           too_expensive: 'The service is too expensive',
           missing_features: 'Features are missing for this service',
-          switched_service: 'I have switched to alternative service',
+          switched_service: 'I have switched to an alternative service',
           unused: 'I no longer use this service',
           customer_service: 'The customer service is poor',
           too_complex: 'The service is too complex to use',
@@ -361,7 +386,7 @@ export default flat({
       pastDue: {
         button: 'Pay',
         invoices: 'Past Due Invoices',
-        warning: 'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.',
+        warning: 'Past due invoices need to be paid immediately, otherwise you cannot make new purchases anymore.',
         alert: {
           title: 'You have unpaid invoices',
           customMessage: 'Please pay immediately, otherwise new purchases or subscriptions will be prohibited.',
@@ -419,7 +444,7 @@ export default flat({
         amountApplied: 'Applied Credit',
         pay: 'Pay this invoice',
         paySuccess: 'You have successfully paid the invoice',
-        payError: 'Failed to paid the invoice',
+        payError: 'Failed to pay the invoice',
         renew: 'Renew the subscription',
         renewSuccess: 'You have successfully renewed the subscription',
         renewError: 'Failed to renew the subscription',
@@ -447,7 +472,7 @@ export default flat({
         viewAll: 'View all',
         empty: 'There are no subscriptions here',
         changePayment: 'Change payment method',
-        trialLeft: 'Trail Left',
+        trialLeft: 'Trial Left',
         owner: 'Subscription Owner',
       },
       overdue: {

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={{