@blocklet/payment-react 1.18.56 → 1.19.1

package/src/payment/product-donation.tsx

@@ -265,17 +265,24 @@ export default function ProductDonation({
   return (
     <Box
       ref={containerRef}
-      display="flex"
-      flexDirection="column"
-      alignItems="flex-start"
-      gap={1.5}
       onKeyDown={handleKeyDown}
       tabIndex={0}
-      sx={{ outline: 'none' }}>
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 1.5,
+        outline: 'none',
+      }}>
       {supportPreset && (
         <Grid container spacing={2}>
           {presets.map((amount) => (
-            <Grid item xs={6} sm={3} key={amount}>
+            <Grid
+              size={{
+                xs: 6,
+                sm: 3,
+              }}
+              key={amount}>
               <Card
                 variant="outlined"
                 className="tab-navigable-card"
@@ -302,19 +309,30 @@ export default function ProductDonation({
                   aria-selected={formatAmount(state.selected) === formatAmount(amount) && !state.custom}>
                   <Stack
                     direction="row"
-                    sx={{ py: 1.5, px: 1.5 }}
                     spacing={0.5}
-                    alignItems="center"
-                    justifyContent="center">
+                    sx={{
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      py: 1.5,
+                      px: 1.5,
+                    }}>
                     <Avatar src={currency?.logo} sx={{ width: 16, height: 16, mr: 0.5 }} alt={currency?.symbol} />
                     <Typography
                       component="strong"
-                      lineHeight={1}
                       variant="h3"
-                      sx={{ fontVariantNumeric: 'tabular-nums', fontWeight: 400 }}>
+                      sx={{
+                        lineHeight: 1,
+                        fontVariantNumeric: 'tabular-nums',
+                        fontWeight: 400,
+                      }}>
                       {amount}
                     </Typography>
-                    <Typography lineHeight={1} fontSize={14} color="text.secondary">
+                    <Typography
+                      sx={{
+                        lineHeight: 1,
+                        fontSize: 14,
+                        color: 'text.secondary',
+                      }}>
                       {currency?.symbol}
                     </Typography>
                   </Stack>
@@ -323,7 +341,12 @@ export default function ProductDonation({
             </Grid>
           ))}
           {supportCustom && (
-            <Grid item xs={6} sm={3} key="custom">
+            <Grid
+              size={{
+                xs: 6,
+                sm: 3,
+              }}
+              key="custom">
               <Card
                 variant="outlined"
                 className="tab-navigable-card"
@@ -344,11 +367,19 @@ export default function ProductDonation({
                 <CardActionArea onClick={handleCustomSelect} tabIndex={0} aria-selected={state.custom}>
                   <Stack
                     direction="row"
-                    sx={{ py: 1.5, px: 1.5 }}
                     spacing={0.5}
-                    alignItems="center"
-                    justifyContent="center">
-                    <Typography variant="h3" lineHeight={1} sx={{ fontWeight: 400 }}>
+                    sx={{
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      py: 1.5,
+                      px: 1.5,
+                    }}>
+                    <Typography
+                      variant="h3"
+                      sx={{
+                        lineHeight: 1,
+                        fontWeight: 400,
+                      }}>
                       {t('common.custom')}
                     </Typography>
                   </Stack>
@@ -368,36 +399,6 @@ export default function ProductDonation({
           error={!!state.error}
           helperText={state.error}
           inputRef={customInputRef}
-          InputProps={{
-            endAdornment: (
-              <Stack direction="row" spacing={0.5} alignItems="center" sx={{ ml: 1 }}>
-                <IconButton
-                  size="small"
-                  onClick={handleCustomSelect}
-                  disabled={state.animating}
-                  sx={{
-                    mr: 0.5,
-                    opacity: state.animating ? 0.5 : 1,
-                    transition: 'all 0.2s ease',
-                    '&:hover': {
-                      transform: 'scale(1.2)',
-                      transition: 'transform 0.3s ease',
-                    },
-                  }}
-                  aria-label={t('common.random')}>
-                  <AutoAwesomeIcon fontSize="small" />
-                </IconButton>
-                <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
-                <Typography>{currency?.symbol}</Typography>
-              </Stack>
-            ),
-            autoComplete: 'off',
-            sx: {
-              '& input': {
-                transition: 'all 0.25s ease',
-              },
-            },
-          }}
           sx={{
             mt: defaultPreset !== '0' ? 0 : 1,
             '& .MuiInputBase-root': {
@@ -414,7 +415,44 @@ export default function ProductDonation({
               WebkitAppearance: 'none',
               margin: 0,
             },
+            '& input': {
+              transition: 'all 0.25s ease',
+            },
+          }}
+          slotProps={{
+            input: {
+              endAdornment: (
+                <Stack
+                  direction="row"
+                  spacing={0.5}
+                  sx={{
+                    alignItems: 'center',
+                    ml: 1,
+                  }}>
+                  <IconButton
+                    size="small"
+                    onClick={handleCustomSelect}
+                    disabled={state.animating}
+                    sx={{
+                      mr: 0.5,
+                      opacity: state.animating ? 0.5 : 1,
+                      transition: 'all 0.2s ease',
+                      '&:hover': {
+                        transform: 'scale(1.2)',
+                        transition: 'transform 0.3s ease',
+                      },
+                    }}
+                    aria-label={t('common.random')}>
+                    <AutoAwesomeIcon fontSize="small" />
+                  </IconButton>
+                  <Avatar src={currency?.logo} sx={{ width: 16, height: 16 }} alt={currency?.symbol} />
+                  <Typography>{currency?.symbol}</Typography>
+                </Stack>
+              ),
+              autoComplete: 'off',
+            },
           }}
+          autoComplete="off"
         />
       )}
     </Box>

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,12 +28,14 @@ type Props = {
   onDownsell: Function;
   mode?: 'normal' | 'cross-sell';
   children?: React.ReactNode;
-};
-
-ProductItem.defaultProps = {
-  mode: 'normal',
-  children: null,
-  trialEnd: 0,
+  // 数量调整相关
+  adjustableQuantity?: {
+    enabled: boolean;
+    minimum?: number;
+    maximum?: number;
+  };
+  onQuantityChange?: (itemId: string, quantity: number) => void;
+  completed?: boolean;
 };
 
 export default function ProductItem({
@@ -39,16 +44,94 @@ export default function ProductItem({
   trialInDays,
   trialEnd = 0,
   currency,
-  mode,
-  children,
+  mode = 'normal',
+  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;
@@ -59,29 +142,55 @@ export default function ProductItem({
     return pricing.primary;
   }, [trialInDays, trialEnd, pricing, item, locale]);
 
+  const quantityInventoryError = formatQuantityInventory(item.price, localQuantity, locale);
+
   return (
-    <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }} className="product-item">
-      <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }} className="product-item-content">
+    <Stack
+      direction="column"
+      spacing={1}
+      className="product-item"
+      sx={{
+        alignItems: 'flex-start',
+        width: '100%',
+      }}>
+      <Stack
+        direction="column"
+        className="product-item-content"
+        sx={{
+          alignItems: 'flex-start',
+          width: '100%',
+        }}>
         <Stack
           direction="row"
-          alignItems="center"
-          flexWrap="wrap"
           spacing={0.5}
-          justifyContent="space-between"
-          sx={{ width: '100%' }}>
+          sx={{
+            alignItems: 'center',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <ProductCard
             logo={item.price.product?.images[0]}
             name={item.price.product?.name}
             // description={item.price.product?.description}
             extra={
-              <Box display="flex" alignItems="center">
+              <Box
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}>
                 {item.price.type === 'recurring' && item.price.recurring
                   ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                   : pricing.quantity}
               </Box>
             }
           />
-          <Stack direction="column" alignItems="flex-end" flex={1}>
+          <Stack
+            direction="column"
+            sx={{
+              alignItems: 'flex-end',
+              flex: 1,
+            }}>
             <Typography sx={{ color: 'text.primary', fontWeight: 500, whiteSpace: 'nowrap' }} gutterBottom>
               {primaryText}
             </Typography>
@@ -90,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,
@@ -102,15 +211,74 @@ 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 && (
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ width: '100%' }}
-          className="product-item-upsell">
+          className="product-item-upsell"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <Typography
             component="label"
             htmlFor="upsell-switch"
@@ -148,10 +316,12 @@ export default function ProductItem({
       {canUpsell && item.upsell_price_id && (
         <Stack
           direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          sx={{ width: '100%' }}
-          className="product-item-upsell">
+          className="product-item-upsell"
+          sx={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+          }}>
           <Typography
             component="label"
             htmlFor="upsell-switch"

package/src/payment/product-skeleton.tsx

@@ -5,16 +5,17 @@ export default function ProductSkeleton({ count }: { count: number }) {
     <Fade in>
       <Stack
         direction="column"
-        alignItems="center"
-        padding={4}
         spacing={1}
         sx={{
+          alignItems: 'center',
+          padding: 4,
           width: 320,
           border: '1px solid',
           borderColor: 'grey.100',
           borderRadius: 1,
           transition: 'border-color 0.3s ease 0s, box-shadow 0.3s ease 0s',
           boxShadow: '0 4px 8px rgba(0, 0, 0, 20%)',
+
           '&:hover': {
             borderColor: '#ddd',
             boxShadow: '0 8px 16px rgba(0, 0, 0, 20%)',

package/src/payment/skeleton/donation.tsx

@@ -18,9 +18,19 @@ export default function DonationSkeleton() {
             },
           }}
         />
-        <Stack direction="row" justifyContent="space-between" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            justifyContent: 'space-between',
+          }}>
           <Skeleton variant="text" sx={{ fontSize: '1.5rem', width: '40%' }} />
-          <Box display="flex" alignItems="center" gap={2}>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 2,
+            }}>
             <Box>
               <Skeleton height={60} width={80} />
             </Box>

package/src/payment/skeleton/overview.tsx

@@ -4,11 +4,21 @@ export default function OverviewSkeleton() {
   return (
     <Fade in>
       <Stack direction="column">
-        <Stack direction="row" alignItems="center" spacing={2}>
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{
+            alignItems: 'center',
+          }}>
           <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         </Stack>
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
-        <Typography mt={2} component="div" variant="h4">
+        <Typography
+          component="div"
+          variant="h4"
+          sx={{
+            mt: 2,
+          }}>
           <Skeleton />
         </Typography>
         <Typography component="div" variant="h2">

package/src/payment/skeleton/payment.tsx

@@ -6,8 +6,16 @@ export default function PaymentSkeleton() {
       <Stack direction="column">
         <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
         <Skeleton sx={{ mt: 2 }} variant="rounded" height={68} />
-        <Box mt={1}>
-          <Typography component="div" variant="h4" mb={-1}>
+        <Box
+          sx={{
+            mt: 1,
+          }}>
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              mb: -1,
+            }}>
             <Skeleton />
           </Typography>
           <Typography component="div">
@@ -15,7 +23,12 @@ export default function PaymentSkeleton() {
           </Typography>
         </Box>
         <Box>
-          <Typography component="div" variant="h4" mb={-1}>
+          <Typography
+            component="div"
+            variant="h4"
+            sx={{
+              mb: -1,
+            }}>
             <Skeleton />
           </Typography>
           <Typography component="div">

package/src/payment/success.tsx

@@ -20,9 +20,9 @@ export default function PaymentSuccess({
   message,
   action,
   payee,
-  invoiceId,
-  subscriptionId,
-  subscriptions,
+  invoiceId = '',
+  subscriptionId = '',
+  subscriptions = [],
 }: Props) {
   const { t } = useLocaleContext();
   const { prefix } = usePaymentContext();
@@ -88,7 +88,11 @@ export default function PaymentSuccess({
     }
   } else if (invoiceId) {
     next = (
-      <Typography textAlign="center" sx={{ mt: 2 }}>
+      <Typography
+        sx={{
+          textAlign: 'center',
+          mt: 2,
+        }}>
         <Link href={joinURL(prefix, `/customer/invoice/${invoiceId}`)}>
           {t('payment.checkout.next.invoice', { payee })}
         </Link>
@@ -100,9 +104,11 @@ export default function PaymentSuccess({
     <Grow in>
       <Stack
         direction="column"
-        alignItems="center"
-        justifyContent={mode === 'standalone' ? 'center' : 'flex-start'}
-        sx={{ height: mode === 'standalone' ? 'fit-content' : 300 }}>
+        sx={{
+          alignItems: 'center',
+          justifyContent: mode === 'standalone' ? 'center' : 'flex-start',
+          height: mode === 'standalone' ? 'fit-content' : 300,
+        }}>
         <Div>
           <div className="check-icon">
             <span className="icon-line line-tip" />
@@ -111,10 +117,21 @@ export default function PaymentSuccess({
             <div className="icon-fix" />
           </div>
         </Div>
-        <Typography variant="h5" color="text.primary" mb={3}>
+        <Typography
+          variant="h5"
+          sx={{
+            color: 'text.primary',
+            mb: 3,
+          }}>
           {message}
         </Typography>
-        <Typography variant="body1" color="text.secondary" textAlign="center" sx={{ fontSize: '14px' }}>
+        <Typography
+          variant="body1"
+          sx={{
+            color: 'text.secondary',
+            textAlign: 'center',
+            fontSize: '14px',
+          }}>
           {t('payment.checkout.completed.tip', { payee })}
         </Typography>
         {next}
@@ -123,12 +140,6 @@ export default function PaymentSuccess({
   );
 }
 
-PaymentSuccess.defaultProps = {
-  invoiceId: '',
-  subscriptionId: '',
-  subscriptions: [],
-};
-
 const Div = styled('div')`
   width: 80px;
   height: 115px;