@blocklet/payment-react 1.19.0 → 1.19.1

package/src/locales/en.tsx

@@ -30,6 +30,10 @@ export default flat({
     remove: 'Remove',
     removed: 'Resource removed',
     confirm: 'Confirm',
+    clear: 'Clear',
+    selectTimeRange: 'Select time range',
+    startDate: 'Start date',
+    endDate: 'End date',
     upload: 'Upload',
     change: 'Change',
     cancel: 'Cancel',
@@ -103,6 +107,7 @@ export default flat({
       confirm: 'Confirm',
       cancel: 'Cancel',
     },
+    paymentMethod: 'Payment Method',
   },
   payment: {
     checkout: {
@@ -209,6 +214,11 @@ export default flat({
         add: 'Add to order',
         remove: 'Remove from order',
       },
+      credit: {
+        oneTimeInfo: 'You will receive {amount} {symbol} credits after payment',
+        recurringInfo: 'You will receive {amount} {symbol} credits {period}',
+        expiresIn: 'credits have a validity period of {duration} {unit}',
+      },
       expired: {
         title: 'Expired Link',
         description:
@@ -241,6 +251,16 @@ export default flat({
         amount: 'Amount',
         failed: 'Account changed, please pay manually.',
         balanceLink: 'View Balance',
+        credit: {
+          title: 'Confirm Credit Payment',
+          availableAmount: 'Available Credit: {amount}',
+          confirmMessage: 'You will use {amount} credits to subscribe to this service.',
+          meteringSubscriptionMessage:
+            'This subscription service will deduct credits in real-time based on actual usage. You currently have {available} credits available. Confirm to continue?',
+          insufficientTitle: 'Insufficient Credit',
+          insufficientMessage:
+            'This subscription service will deduct credits in real-time based on actual usage. You currently have insufficient credits. Please top up your credits first.',
+        },
       },
     },
     customer: {

package/src/locales/zh.tsx

@@ -33,6 +33,10 @@ export default flat({
     change: '更换',
     confirm: '确认',
     cancel: '取消',
+    clear: '清空',
+    selectTimeRange: '选择时间范围',
+    startDate: '开始日期',
+    endDate: '结束日期',
     close: '关闭',
     back: '返回',
     every: '每',
@@ -103,6 +107,7 @@ export default flat({
       confirm: '确认',
       cancel: '取消',
     },
+    paymentMethod: '支付方式',
   },
   payment: {
     checkout: {
@@ -215,6 +220,11 @@ export default flat({
         add: '添加到订单',
         remove: '从订单移除',
       },
+      credit: {
+        oneTimeInfo: '付款完成后您将获得 {amount} {symbol} 额度',
+        recurringInfo: '您将{period}获得 {amount} {symbol} 额度',
+        expiresIn: '额度有效期为 {duration} {unit}',
+      },
       emptyItems: {
         title: '没有任何购买项目',
         description: '可能这个付款链接没有正确配置',
@@ -236,6 +246,15 @@ export default flat({
         amount: '支付金额',
         failed: '账户发生变化，无法自动完成支付，请手动支付。',
         balanceLink: '查看余额',
+        credit: {
+          title: '确认额度支付',
+          availableAmount: '可用额度：{amount}',
+          confirmMessage: '您将使用 {amount} 额度来订阅此服务。',
+          meteringSubscriptionMessage:
+            '此订阅服务将根据实际使用情况实时扣除额度。您当前可用额度为 {available}，确认是否继续？',
+          insufficientTitle: '额度不足',
+          insufficientMessage: '此订阅服务将根据实际使用情况实时扣除额度。您当前可用额度不足，请先充值额度。',
+        },
       },
     },
     customer: {

package/src/payment/form/address.tsx

@@ -79,7 +79,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
                       render={({ field }) => (
                         <CountrySelect
                           {...field}
-                          ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
+                          ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                           sx={{
                             '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                               borderColor: 'transparent',
@@ -127,7 +127,7 @@ export default function AddressForm({ mode, stripe, sx = {}, fieldValidation = {
                         render={({ field }) => (
                           <CountrySelect
                             {...field}
-                            ref={field.ref as unknown as React.RefObject<HTMLDivElement>}
+                            ref={field.ref as unknown as React.RefObject<HTMLDivElement | null>}
                             sx={{
                               '.MuiOutlinedInput-notchedOutline': {
                                 borderColor: 'transparent !important',

package/src/payment/form/index.tsx

@@ -110,9 +110,11 @@ type UserInfo = {
 type FastCheckoutInfo = {
   open: boolean;
   loading: boolean;
-  sourceType: 'balance' | 'delegation';
+  sourceType: 'balance' | 'delegation' | 'credit';
   amount: string;
   payer?: string;
+  availableCredit?: string;
+  balance?: string;
 };
 
 const setUserFormValues = (
@@ -206,6 +208,9 @@ export default function PaymentForm({
     customerLimited?: boolean;
     stripePaying: boolean;
     fastCheckoutInfo: FastCheckoutInfo | null;
+    creditInsufficientInfo: {
+      open: boolean;
+    } | null;
   }>({
     submitting: false,
     paying: false,
@@ -216,6 +221,7 @@ export default function PaymentForm({
     customerLimited: false,
     stripePaying: false,
     fastCheckoutInfo: null,
+    creditInsufficientInfo: null,
   });
 
   const currencies = flattenPaymentMethods(paymentMethods);
@@ -418,6 +424,10 @@ export default function PaymentForm({
     setState({ fastCheckoutInfo: null });
   };
 
+  const handleCreditInsufficientClose = () => {
+    setState({ creditInsufficientInfo: null });
+  };
+
   const openConnect = () => {
     try {
       if (!['arcblock', 'ethereum', 'base'].includes(method.type)) {
@@ -476,7 +486,30 @@ export default function PaymentForm({
       });
 
       if (['arcblock', 'ethereum', 'base'].includes(method.type)) {
-        if (
+        // 优先判断 credit 支付
+        if (paymentCurrency?.type === 'credit') {
+          if (result.data.creditSufficient === true) {
+            // 如果是 credit 支付且有足够额度，显示 credit 确认弹窗
+            setState({
+              fastCheckoutInfo: {
+                open: true,
+                loading: false,
+                sourceType: 'credit',
+                amount: result.data.fastPayInfo?.amount || '0',
+                payer: result.data.fastPayInfo?.payer,
+                availableCredit: result.data.fastPayInfo?.amount || '0',
+                balance: result.data.fastPayInfo?.token?.balance || '0',
+              },
+            });
+          } else {
+            // 如果是 credit 支付但额度不足，显示额度不足弹窗
+            setState({
+              creditInsufficientInfo: {
+                open: true,
+              },
+            });
+          }
+        } else if (
           (result.data.balance?.sufficient || result.data.delegation?.sufficient) &&
           !isDonationMode &&
           result.data.fastPayInfo
@@ -581,73 +614,96 @@ export default function PaymentForm({
   }, [state.submitting, state.paying, state.stripePaying, quantityInventoryStatus, payable]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const balanceLink = getTokenBalanceLink(method, state.fastCheckoutInfo?.payer || '');
+
   const FastCheckoutConfirmDialog = state.fastCheckoutInfo && (
     <ConfirmDialog
       onConfirm={handleFastCheckoutConfirm}
       onCancel={handleFastCheckoutCancel}
-      title={t('payment.checkout.fastPay.title')}
+      title={
+        state.fastCheckoutInfo.sourceType === 'credit'
+          ? t('payment.checkout.fastPay.credit.title')
+          : t('payment.checkout.fastPay.title')
+      }
       message={
-        <Stack>
-          <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
-          <Divider sx={{ mt: 1.5, mb: 1.5 }} />
-          <Stack spacing={1}>
-            <Stack
-              sx={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Typography
+        state.fastCheckoutInfo.sourceType === 'credit' ? (
+          <Typography>
+            {t('payment.checkout.fastPay.credit.meteringSubscriptionMessage', {
+              available: `${fromUnitToToken(state.fastCheckoutInfo?.balance || '0', paymentCurrency?.decimal || 18).toString()} ${paymentCurrency?.symbol}`,
+            })}
+          </Typography>
+        ) : (
+          <Stack>
+            <Typography>{t('payment.checkout.fastPay.autoPaymentReason')}</Typography>
+            <Divider sx={{ mt: 1.5, mb: 1.5 }} />
+            <Stack spacing={1}>
+              <Stack
                 sx={{
-                  color: 'text.primary',
-                  whiteSpace: 'nowrap',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 }}>
-                {t('payment.checkout.fastPay.payer')}
-              </Typography>
-              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
-                {balanceLink && (
-                  <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
-                    <OpenInNew
-                      sx={{
-                        color: 'text.lighter',
-                        fontSize: '0.85rem',
-                        cursor: 'pointer',
-                        '&:hover': { color: 'text.primary' },
-                      }}
-                      onClick={() => {
-                        window.open(balanceLink, '_blank');
-                      }}
-                    />
-                  </Tooltip>
-                )}
-              </Box>
-            </Stack>
-            <Stack
-              sx={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Typography
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                    whiteSpace: 'nowrap',
+                  }}>
+                  {t('payment.checkout.fastPay.payer')}
+                </Typography>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                  <DID did={state.fastCheckoutInfo.payer || ''} compact responsive={false} />
+                  {balanceLink && (
+                    <Tooltip title={t('payment.checkout.fastPay.balanceLink')} placement="top">
+                      <OpenInNew
+                        sx={{
+                          color: 'text.lighter',
+                          fontSize: '0.85rem',
+                          cursor: 'pointer',
+                          '&:hover': { color: 'text.primary' },
+                        }}
+                        onClick={() => {
+                          window.open(balanceLink, '_blank');
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </Box>
+              </Stack>
+              <Stack
                 sx={{
-                  color: 'text.primary',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
                 }}>
-                {t('payment.checkout.fastPay.amount')}
-              </Typography>
-              <Typography>
-                {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
-                {paymentCurrency?.symbol}
-              </Typography>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                  }}>
+                  {t('payment.checkout.fastPay.amount')}
+                </Typography>
+                <Typography>
+                  {fromUnitToToken(state.fastCheckoutInfo.amount, paymentCurrency?.decimal || 18).toString()}{' '}
+                  {paymentCurrency?.symbol}
+                </Typography>
+              </Stack>
             </Stack>
           </Stack>
-        </Stack>
+        )
       }
       loading={state.fastCheckoutInfo.loading}
       color="primary"
     />
   );
 
+  const CreditInsufficientDialog = state.creditInsufficientInfo && (
+    <ConfirmDialog
+      onConfirm={handleCreditInsufficientClose}
+      onCancel={handleCreditInsufficientClose}
+      title={t('payment.checkout.fastPay.credit.insufficientTitle')}
+      message={<Typography>{t('payment.checkout.fastPay.credit.insufficientMessage')}</Typography>}
+      confirm={t('common.confirm')}
+    />
+  );
+
   if (onlyShowBtn) {
     return (
       <>
@@ -700,6 +756,7 @@ export default function PaymentForm({
           />
         )}
         {FastCheckoutConfirmDialog}
+        {CreditInsufficientDialog}
       </>
     );
   }
@@ -890,6 +947,7 @@ export default function PaymentForm({
         />
       )}
       {FastCheckoutConfirmDialog}
+      {CreditInsufficientDialog}
     </>
   );
 }

package/src/payment/index.tsx

@@ -30,6 +30,7 @@ import {
   getStatementDescriptor,
   isMobileSafari,
   isValidCountry,
+  showStaking,
 } from '../libs/util';
 import type { CheckoutCallbacks, CheckoutContext, CheckoutFormData } from '../types';
 import PaymentError from './error';
@@ -208,6 +209,19 @@ function PaymentInner({
     }
   };
 
+  const onQuantityChange = async (itemId: string, quantity: number) => {
+    try {
+      const { data } = await api.put(`/api/checkout-sessions/${state.checkoutSession.id}/adjust-quantity`, {
+        itemId,
+        quantity,
+      });
+      setState({ checkoutSession: data });
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
   const onCancelCrossSell = async () => {
     try {
       const { data } = await api.delete(`/api/checkout-sessions/${state.checkoutSession.id}/cross-sell`);
@@ -263,10 +277,11 @@ function PaymentInner({
                   // @ts-ignore
                   state.checkoutSession.subscription_data?.min_stake_amount || 0
                 )}
-                showStaking={method.type === 'arcblock' && !state.checkoutSession.subscription_data?.no_stake}
+                showStaking={showStaking(method, currency, !!state.checkoutSession.subscription_data?.no_stake)}
                 currency={currency}
                 onUpsell={onUpsell}
                 onDownsell={onDownsell}
+                onQuantityChange={onQuantityChange}
                 onApplyCrossSell={onApplyCrossSell}
                 onCancelCrossSell={onCancelCrossSell}
                 onChangeAmount={onChangeAmount}
@@ -274,6 +289,7 @@ function PaymentInner({
                 crossSellBehavior={state.checkoutSession.cross_sell_behavior}
                 donationSettings={paymentLink?.donation_settings}
                 action={action}
+                completed={completed}
               />
               {mode === 'standalone' && !isMobile && (
                 <CheckoutFooter className="cko-footer" sx={{ color: 'text.lighter' }} />

package/src/payment/product-item.tsx

@@ -1,11 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PriceRecurring, TLineItemExpanded, TPaymentCurrency } from '@blocklet/payment-types';
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography, IconButton, TextField, Alert } from '@mui/material';
+import { Add, Remove } from '@mui/icons-material';
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import Status from '../components/status';
 import Switch from '../components/switch-button';
 import {
+  findCurrency,
   formatLineItemPricing,
   formatPrice,
   formatQuantityInventory,
@@ -14,6 +16,7 @@ import {
 } from '../libs/util';
 import ProductCard from './product-card';
 import dayjs from '../libs/dayjs';
+import { usePaymentContext } from '../contexts/payment';
 
 type Props = {
   item: TLineItemExpanded;
@@ -25,6 +28,14 @@ type Props = {
   onDownsell: Function;
   mode?: 'normal' | 'cross-sell';
   children?: React.ReactNode;
+  // 数量调整相关
+  adjustableQuantity?: {
+    enabled: boolean;
+    minimum?: number;
+    maximum?: number;
+  };
+  onQuantityChange?: (itemId: string, quantity: number) => void;
+  completed?: boolean;
 };
 
 export default function ProductItem({
@@ -37,12 +48,90 @@ export default function ProductItem({
   children = null,
   onUpsell,
   onDownsell,
+  completed = false,
+  adjustableQuantity = { enabled: false },
+  onQuantityChange = () => {},
 }: Props) {
   const { t, locale } = useLocaleContext();
+  const { settings } = usePaymentContext();
   const pricing = formatLineItemPricing(item, currency, { trialEnd, trialInDays }, locale);
   const saving = formatUpsellSaving(items, currency);
   const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && items.length === 1;
+
+  const isCreditProduct = item.price.product?.type === 'credit' && item.price.metadata?.credit_config?.credit_amount;
+  const creditAmount = isCreditProduct ? Number(item.price.metadata.credit_config.credit_amount) : 0;
+  const creditCurrency = isCreditProduct
+    ? findCurrency(settings.paymentMethods, item.price.metadata?.credit_config?.currency_id ?? '')
+    : null;
+  const validDuration = item.price.metadata?.credit_config?.valid_duration_value;
+  const validDurationUnit = item.price.metadata?.credit_config?.valid_duration_unit || 'days';
+
+  const [localQuantity, setLocalQuantity] = useState(item.quantity);
+  const canAdjustQuantity = adjustableQuantity.enabled && mode === 'normal';
+  const minQuantity = Math.max(adjustableQuantity.minimum || 1, 1);
+  const quantityAvailable = Math.min(item.price.quantity_limit_per_checkout, item.price.quantity_available);
+  const maxQuantity = Math.min(adjustableQuantity.maximum || 999, quantityAvailable || 999);
+
+  const handleQuantityChange = (newQuantity: number) => {
+    if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
+      setLocalQuantity(newQuantity);
+      if (formatQuantityInventory(item.price, newQuantity, locale)) {
+        return;
+      }
+      onQuantityChange(item.price_id, newQuantity);
+    }
+  };
+
+  const handleQuantityIncrease = () => {
+    if (localQuantity < maxQuantity) {
+      handleQuantityChange(localQuantity + 1);
+    }
+  };
+
+  const handleQuantityDecrease = () => {
+    if (localQuantity > minQuantity) {
+      handleQuantityChange(localQuantity - 1);
+    }
+  };
+
+  const handleQuantityInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value, 10);
+    if (!Number.isNaN(value)) {
+      handleQuantityChange(value);
+    }
+  };
+
+  // Credit 信息格式化
+  const formatCreditInfo = () => {
+    if (!isCreditProduct) return null;
+
+    const isRecurring = item.price.type === 'recurring';
+    const totalCredit = creditAmount * localQuantity;
+
+    let message = '';
+    if (isRecurring) {
+      message = t('payment.checkout.credit.recurringInfo', {
+        amount: totalCredit,
+        period: formatRecurring(item.price.recurring!, true, 'per', locale),
+      });
+    } else {
+      message = t('payment.checkout.credit.oneTimeInfo', {
+        amount: totalCredit,
+        symbol: creditCurrency?.symbol || 'Credits',
+      });
+    }
+
+    if (validDuration && validDuration > 0) {
+      message += `，${t('payment.checkout.credit.expiresIn', {
+        duration: validDuration,
+        unit: t(`common.${validDurationUnit}`),
+      })}`;
+    }
+
+    return message;
+  };
+
   const primaryText = useMemo(() => {
     const price = item.upsell_price || item.price || {};
     const isRecurring = price?.type === 'recurring' && price?.recurring;
@@ -53,6 +142,8 @@ export default function ProductItem({
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
 
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
+
   return (
     <Stack
       direction="column"
@@ -108,9 +199,9 @@ export default function ProductItem({
             )}
           </Stack>
         </Stack>
-        {formatQuantityInventory(item.price, item.quantity, locale) ? (
+        {quantityInventoryError ? (
           <Status
-            label={formatQuantityInventory(item.price, item.quantity, locale)}
+            label={quantityInventoryError}
             variant="outlined"
             sx={{
               mt: 1,
@@ -120,6 +211,63 @@ export default function ProductItem({
             }}
           />
         ) : null}
+
+        {/* 数量调整器 */}
+        {canAdjustQuantity && !completed && (
+          <Box sx={{ mt: 1, p: 1 }}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
+              <Typography
+                variant="body2"
+                sx={{
+                  color: 'text.secondary',
+                  minWidth: 'fit-content',
+                }}>
+                {t('common.quantity')}:
+              </Typography>
+              <IconButton
+                size="small"
+                onClick={handleQuantityDecrease}
+                disabled={localQuantity <= minQuantity}
+                sx={{ minWidth: 32, width: 32, height: 32 }}>
+                <Remove fontSize="small" />
+              </IconButton>
+              <TextField
+                size="small"
+                value={localQuantity}
+                onChange={handleQuantityInputChange}
+                sx={{ width: 60 }}
+                type="number"
+                slotProps={{
+                  htmlInput: {
+                    min: minQuantity,
+                    max: maxQuantity,
+                    style: { textAlign: 'center', padding: '4px' },
+                  },
+                }}
+              />
+              <IconButton
+                size="small"
+                onClick={handleQuantityIncrease}
+                disabled={localQuantity >= maxQuantity}
+                sx={{ minWidth: 32, width: 32, height: 32 }}>
+                <Add fontSize="small" />
+              </IconButton>
+            </Stack>
+          </Box>
+        )}
+
+        {/* Credit 信息展示 */}
+        {isCreditProduct && (
+          <Alert severity="info" sx={{ mt: 1, fontSize: '0.875rem' }} icon={false}>
+            {formatCreditInfo()}
+          </Alert>
+        )}
+
         {children}
       </Stack>
       {canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && (

package/src/payment/summary.tsx

@@ -62,6 +62,7 @@ type Props = {
   showStaking?: boolean;
   onUpsell?: Function;
   onDownsell?: Function;
+  onQuantityChange?: Function;
   onChangeAmount?: Function;
   onApplyCrossSell?: Function;
   onCancelCrossSell?: Function;
@@ -69,6 +70,7 @@ type Props = {
   crossSellBehavior?: string;
   donationSettings?: DonationSettings; // only include backend part
   action?: string;
+  completed?: boolean;
 };
 
 async function fetchCrossSell(id: string) {
@@ -118,7 +120,6 @@ function getStakingSetup(items: TLineItemExpanded[], currency: TPaymentCurrency,
 
   return '0';
 }
-
 export default function PaymentSummary({
   items,
   currency,
@@ -126,6 +127,7 @@ export default function PaymentSummary({
   billingThreshold,
   onUpsell = noop,
   onDownsell = noop,
+  onQuantityChange = noop,
   onApplyCrossSell = noop,
   onCancelCrossSell = noop,
   onChangeAmount = noop,
@@ -135,6 +137,7 @@ export default function PaymentSummary({
   donationSettings = undefined,
   action = '',
   trialEnd = 0,
+  completed = false,
   ...rest
 }: Props) {
   const { t, locale } = useLocaleContext();
@@ -167,6 +170,11 @@ export default function PaymentSummary({
     runAsync();
   };
 
+  const handleQuantityChange = async (itemId: string, quantity: number) => {
+    await onQuantityChange!(itemId, quantity);
+    runAsync();
+  };
+
   const handleDownsell = async (from: string) => {
     await onDownsell!(from);
     runAsync();
@@ -222,7 +230,10 @@ export default function PaymentSummary({
               trialEnd={trialEnd}
               currency={currency}
               onUpsell={handleUpsell}
-              onDownsell={handleDownsell}>
+              onDownsell={handleDownsell}
+              adjustableQuantity={x.adjustable_quantity}
+              completed={completed}
+              onQuantityChange={handleQuantityChange}>
               {x.cross_sell && (
                 <Stack
                   direction="row"