@blocklet/payment-react 1.19.0 → 1.19.2

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"