payment-kit 1.18.15 → 1.18.16

package/src/pages/customer/invoice/detail.tsx

@@ -17,7 +17,7 @@ import {
 } from '@blocklet/payment-react';
 import type { TCheckoutSession, TInvoiceExpanded, TPaymentLink } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
-import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Divider, Stack, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { useEffect } from 'react';
@@ -204,9 +204,31 @@ export default function CustomerInvoiceDetail() {
           }}>
           <InfoMetric
             label={t('common.status')}
-            value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+            value={
+              <Tooltip
+                title={data.status === 'void' ? t('payment.customer.invoice.noPaymentRequired') : ''}
+                arrow
+                placement="top">
+                <span>
+                  <Status label={data.status} color={getInvoiceStatusColor(data.status)} />
+                </span>
+              </Tooltip>
+            }
             divider
           />
+          {data.subscription && (
+            <InfoMetric
+              label={t('admin.subscription.name')}
+              value={
+                <Link to={`/customer/subscription/${data.subscription.id}`}>
+                  <Typography variant="body1" color="text.link">
+                    {data.subscription.description || data.subscription.id}
+                  </Typography>
+                </Link>
+              }
+              divider
+            />
+          )}
           <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
           {data.period_start > 0 && data.period_end > 0 && (
             <InfoMetric
@@ -301,20 +323,6 @@ export default function CustomerInvoiceDetail() {
               alignItems={InfoAlignItems}
             />
           )}
-          {data.subscription && (
-            <InfoRow
-              label={t('admin.subscription.name')}
-              value={
-                <Link to={`/customer/subscription/${data.subscription.id}`}>
-                  <Typography variant="body1" color="text.link">
-                    {data.subscription.description || data.subscription.id}
-                  </Typography>
-                </Link>
-              }
-              direction={InfoDirection}
-              alignItems={InfoAlignItems}
-            />
-          )}
           {data?.relatedInvoice && (
             <InfoRow
               label={t('customer.invoice.relatedInvoice')}

package/src/pages/customer/invoice/past-due.tsx

@@ -6,6 +6,7 @@ import {
   getPrefix,
   getQueryParams,
   usePaymentContext,
+  OverdueInvoicePayment,
 } from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
@@ -29,9 +30,10 @@ const fetchData = (): Promise<TCustomerExpanded> => {
 export default function CustomerInvoicePastDue() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
-  const { connect } = usePaymentContext();
+  const { connect, session } = usePaymentContext();
   const [params] = useSearchParams();
-  const [alertVisible, setAlertVisible] = useState(false);
+  const [hasUnpaidInvoices, setHasUnpaidInvoices] = useState(false);
+  const [showOverduePayment, setShowOverduePayment] = useState(false);
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
@@ -60,27 +62,31 @@ export default function CustomerInvoicePastDue() {
   const subscriptionId = params.get('subscription') || '';
   const currencyId = params.get('currency') || '';
   const handleBatchPay = () => {
-    connect.open({
-      containerEl: undefined as unknown as Element,
-      saveConnect: false,
-      action: 'collect-batch',
-      prefix: joinURL(getPrefix(), '/api/did'),
-      extraParams: { subscriptionId, currencyId },
-      onSuccess: () => {
-        connect.close();
-      },
-      onClose: () => {
-        connect.close();
-      },
-      onError: (err: any) => {
-        Toast.error(formatError(err));
-      },
-    });
+    if (subscriptionId && currencyId) {
+      connect.open({
+        containerEl: undefined as unknown as Element,
+        saveConnect: false,
+        action: 'collect-batch',
+        prefix: joinURL(getPrefix(), '/api/did'),
+        extraParams: { subscriptionId, currencyId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+        },
+      });
+    } else {
+      setShowOverduePayment(true);
+    }
   };
 
   const onTableDataChange = (tableData: any, prevData: any) => {
     if (isEmpty(tableData) || tableData?.count === 0) {
-      setAlertVisible(false);
+      setHasUnpaidInvoices(false);
       if (prevData?.count > 0) {
         // paid all invoices
         const referer = getQueryParams(window.location.href)?.referer;
@@ -92,7 +98,7 @@ export default function CustomerInvoicePastDue() {
       }
       return;
     }
-    setAlertVisible(true);
+    setHasUnpaidInvoices(true);
   };
 
   return (
@@ -110,12 +116,28 @@ export default function CustomerInvoicePastDue() {
         </Stack>
       </Stack>
       <Root direction="column" spacing={3}>
-        {alertVisible && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}
+        {hasUnpaidInvoices && <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>}
+        {showOverduePayment && (
+          <OverdueInvoicePayment
+            customerId={session.user.did}
+            onPaid={() => {
+              setShowOverduePayment(false);
+            }}
+            successToast={false}
+            dialogProps={{
+              open: showOverduePayment,
+              onClose: () => setShowOverduePayment(false),
+            }}
+            detailLinkOptions={{
+              enabled: false,
+            }}
+          />
+        )}
 
         <Box className="section">
           <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
-            {subscriptionId && currencyId && (
-              <Button size="small" variant="contained" color="info" onClick={handleBatchPay}>
+            {hasUnpaidInvoices && (
+              <Button size="small" variant="contained" color="primary" onClick={handleBatchPay}>
                 {t('admin.subscription.batchPay.button')}
               </Button>
             )}

package/src/pages/customer/recharge/account.tsx

@@ -0,0 +1,515 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import Toast from '@arcblock/ux/lib/Toast';
+import {
+  Box,
+  Typography,
+  TextField,
+  Button,
+  CircularProgress,
+  Alert,
+  Stack,
+  Divider,
+  Card,
+  CardActionArea,
+  Grid,
+  Paper,
+  Avatar,
+} from '@mui/material';
+import { styled } from '@mui/system';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  usePaymentContext,
+  getPrefix,
+  formatError,
+  formatAmountPrecisionLimit,
+  api,
+  formatBNStr,
+  formatPrice,
+} from '@blocklet/payment-react';
+import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
+import { joinURL } from 'ufo';
+import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
+import Empty from '@arcblock/ux/lib/Empty';
+import RechargeList from '../../../components/invoice/recharge';
+import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import { useSessionContext } from '../../../contexts/session';
+
+// 扩展PaymentCurrency类型以包含paymentMethod
+interface ExtendedPaymentCurrency extends TPaymentCurrency {
+  paymentMethod?: TPaymentMethod;
+}
+
+interface Subscription {
+  id: string;
+  description?: string;
+  status: string;
+  paymentMethod?: {
+    logo?: string;
+    name?: string;
+  };
+  paymentCurrency?: {
+    symbol: string;
+    decimal: number;
+  };
+  items?: Array<{
+    price: any;
+  }>;
+}
+
+const Root = styled(Stack)(({ theme }) => ({
+  marginBottom: theme.spacing(3),
+  gap: theme.spacing(3),
+  flexDirection: 'column',
+  maxWidth: '800px',
+}));
+
+const BalanceCard = styled(Card)(({ theme }) => ({
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: theme.spacing(2),
+}));
+
+const SubscriptionScroll = styled(Box)(() => ({
+  display: 'flex',
+  overflowX: 'auto',
+  padding: '8px 2px',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none',
+  },
+  '-ms-overflow-style': 'none',
+  gap: '16px',
+}));
+
+export default function BalanceRechargePage() {
+  const { t, locale } = useLocaleContext();
+  const { currencyId } = useParams<{ currencyId: string }>();
+  const navigate = useNavigate();
+  const { connect } = usePaymentContext();
+  const [amount, setAmount] = useState('50');
+  const [amountError, setAmountError] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const customInputRef = useRef<HTMLInputElement>(null);
+  const [payerValue, setPayerValue] = useState<{
+    paymentAddress: string;
+    token: string;
+  } | null>(null);
+  const [customAmount, setCustomAmount] = useState(false);
+  const [presetAmounts] = useState<Array<{ amount: string }>>([{ amount: '10' }, { amount: '50' }, { amount: '100' }]);
+  const { session } = useSessionContext();
+  const [currency, setCurrency] = useState<ExtendedPaymentCurrency | null>(null);
+  const [relatedSubscriptions, setRelatedSubscriptions] = useState<Subscription[]>([]);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+      if (!currencyId) {
+        // 如果没有 currencyId，重定向回客户页面
+        navigate('/customer');
+        return;
+      }
+
+      const { data } = await api.get(`/api/customers/recharge?currencyId=${currencyId}`);
+
+      if (data.currency) {
+        setCurrency(data.currency);
+        setRelatedSubscriptions(data.relatedSubscriptions || []);
+        const supportRecharge = data.currency?.paymentMethod?.type === 'arcblock';
+        if (supportRecharge) {
+          const payerTokenRes = await api.get(`/api/customers/payer-token?currencyId=${currencyId}`);
+          if (payerTokenRes?.data) {
+            setPayerValue(payerTokenRes.data);
+          }
+        }
+      } else {
+        setError(t('customer.balance.currency.notFound'));
+      }
+    } catch (err) {
+      setError(formatError(err) || t('common.fetchError'));
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const rechargeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetchData();
+  }, [currencyId]);
+
+  useEffect(() => {
+    if (rechargeRef.current && currency) {
+      setTimeout(() => {
+        if (rechargeRef.current) {
+          const rechargePosition = rechargeRef.current.getBoundingClientRect();
+          const absoluteTop = window.scrollY + rechargePosition.top;
+          const scrollToPosition = absoluteTop + 20;
+
+          window.scrollTo({
+            top: scrollToPosition,
+            behavior: 'smooth',
+          });
+        }
+      }, 200);
+    }
+  }, [currency]);
+
+  const handleRecharge = () => {
+    if (!currency) return;
+
+    if (Number.isNaN(Number(amount))) {
+      return;
+    }
+
+    connect.open({
+      containerEl: undefined as unknown as Element,
+      saveConnect: false,
+      action: 'recharge-account',
+      prefix: joinURL(getPrefix(), '/api/did'),
+      extraParams: {
+        customerDid: session?.user?.did,
+        currencyId: currency.id,
+        amount: Number(amount),
+      },
+      onSuccess: () => {
+        connect.close();
+        Toast.success(t('customer.recharge.success'));
+        fetchData();
+      },
+      onClose: () => {
+        connect.close();
+      },
+      onError: (err: any) => {
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    if (!currency) return;
+    if (!/^\d*\.?\d*$/.test(value)) return;
+    // 不允许以小数点开头
+    if (value.startsWith('.')) return;
+    const precision = currency.decimal;
+    const errorMessage = formatAmountPrecisionLimit(value, locale, precision || 6);
+    setAmountError(errorMessage || '');
+    setAmount(value);
+  };
+
+  const handleSelect = (selectedAmount: string) => {
+    setAmount(selectedAmount);
+    setCustomAmount(false);
+  };
+
+  const handleCustomSelect = () => {
+    setCustomAmount(true);
+    setAmount('');
+    setTimeout(() => {
+      customInputRef.current?.focus();
+    }, 0);
+  };
+
+  const handleSubscriptionClick = (subscriptionId: string) => {
+    navigate(`/customer/subscription/${subscriptionId}`);
+  };
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (currency?.paymentMethod?.type !== 'arcblock') {
+    return (
+      <Box>
+        <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
+          {t('common.previous')}
+        </Button>
+        <Empty>{t('customer.recharge.unsupported')}</Empty>
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Box>
+        <Button startIcon={<ArrowBackOutlined />} variant="outlined" onClick={() => goBackOrFallback('/customer')}>
+          {t('common.previous')}
+        </Button>
+        <Alert severity="error" sx={{ mt: 2 }}>
+          {error}
+        </Alert>
+      </Box>
+    );
+  }
+
+  const currentBalance = formatBNStr(payerValue?.token || '0', currency?.decimal || 0, 6, false);
+  const balanceLink = currency?.paymentMethod
+    ? getTokenBalanceLink(currency.paymentMethod, payerValue?.paymentAddress || '')
+    : undefined;
+
+  return (
+    <Root>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+        <Button
+          startIcon={<ArrowBackOutlined />}
+          variant="text"
+          color="inherit"
+          onClick={() => goBackOrFallback('/customer')}
+          sx={{ color: 'text.secondary' }}>
+          {t('common.previous')}
+        </Button>
+      </Stack>
+
+      <Typography variant="h2" gutterBottom>
+        {currency?.symbol} {t('customer.recharge.title')}
+      </Typography>
+
+      {currency && (
+        <Box>
+          {relatedSubscriptions.length > 0 && (
+            <Box sx={{ mb: 3 }}>
+              <Typography variant="h6" gutterBottom>
+                {t('customer.recharge.relatedSubscriptions')}
+              </Typography>
+
+              <SubscriptionScroll>
+                {relatedSubscriptions.map((subscription) => (
+                  <Stack
+                    key={subscription.id}
+                    onClick={() => handleSubscriptionClick(subscription.id)}
+                    className="base-card"
+                    sx={{
+                      minWidth: '220px',
+                      maxWidth: '220px',
+                    }}>
+                    <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1 }}>
+                      <Typography
+                        variant="subtitle1"
+                        sx={{
+                          fontWeight: 'medium',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          color: 'text.link',
+                          cursor: 'pointer',
+                        }}>
+                        {subscription.description || subscription.id}
+                      </Typography>
+                    </Stack>
+
+                    {subscription.items && subscription.items[0] && currency && (
+                      <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+                        {formatPrice(subscription.items[0].price, currency)}
+                      </Typography>
+                    )}
+                  </Stack>
+                ))}
+              </SubscriptionScroll>
+            </Box>
+          )}
+
+          <Box sx={{ mb: 4 }}>
+            <BalanceCard elevation={0}>
+              <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={2}>
+                <Stack spacing={0.5}>
+                  <Typography variant="body2" color="text.secondary">
+                    {t('customer.recharge.receiveAddress')}
+                  </Typography>
+                  <Typography variant="body1" sx={{ wordBreak: 'break-all', fontFamily: 'monospace' }}>
+                    {payerValue?.paymentAddress || t('customer.balance.addressNotFound')}
+                  </Typography>
+                </Stack>
+                {currency.logo && <Avatar src={currency.logo} alt={currency.name} sx={{ width: 40, height: 40 }} />}
+              </Stack>
+            </BalanceCard>
+
+            <BalanceCard
+              elevation={0}
+              onClick={() => balanceLink && window.open(balanceLink, '_blank')}
+              sx={{
+                background: 'var(--tags-tag-orange-bg, #B7FEE3)',
+                color: 'var(--tags-tag-orange-text, #007C52)',
+                borderRadius: 'var(--radius-m, 8px)',
+                border: 'none',
+                transition: 'all 0.2s ease-in-out',
+                cursor: balanceLink ? 'pointer' : 'default',
+                position: 'relative',
+                '&:hover': balanceLink
+                  ? {
+                      transform: 'translateY(-4px)',
+                      boxShadow: '0 8px 16px rgba(0, 124, 82, 0.1)',
+                      '& .arrow-icon': {
+                        opacity: 1,
+                        transform: 'translateX(0)',
+                      },
+                    }
+                  : undefined,
+              }}>
+              <Stack direction="row" alignItems="center" justifyContent="space-between">
+                <Stack>
+                  <Typography variant="h6" color="inherit">
+                    {t('admin.customer.summary.balance')}
+                  </Typography>
+                  <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1 }}>
+                    {currentBalance} {currency.symbol}
+                  </Typography>
+                </Stack>
+                {balanceLink && (
+                  <ArrowForwardOutlined
+                    className="arrow-icon"
+                    sx={{
+                      opacity: 0,
+                      transform: 'translateX(-10px)',
+                      transition: 'all 0.2s ease-in-out',
+                      color: 'inherit',
+                      fontSize: 30,
+                    }}
+                  />
+                )}
+              </Stack>
+            </BalanceCard>
+          </Box>
+
+          <Paper
+            ref={rechargeRef}
+            elevation={0}
+            sx={{ mb: 3, backgroundColor: 'background.default', borderRadius: '16px' }}>
+            <Grid container spacing={2}>
+              {presetAmounts.map(({ amount: presetAmount }) => (
+                <Grid item xs={6} sm={3} key={presetAmount}>
+                  <Card
+                    variant="outlined"
+                    sx={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center',
+                      transition: 'all 0.2s',
+                      cursor: 'pointer',
+                      borderRadius: '12px',
+                      '&:hover': {
+                        transform: 'translateY(-4px)',
+                        boxShadow: 3,
+                      },
+                      ...(amount === presetAmount && !customAmount
+                        ? {
+                            borderColor: 'primary.main',
+                            borderWidth: 2,
+                            backgroundColor: 'primary.lighter',
+                          }
+                        : {}),
+                    }}>
+                    <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%', p: 1.5 }}>
+                      <Typography
+                        variant="h6"
+                        align="center"
+                        sx={{
+                          fontWeight: 600,
+                          color: amount === presetAmount && !customAmount ? 'primary.main' : 'text.primary',
+                        }}>
+                        {presetAmount} {currency.symbol}
+                      </Typography>
+                    </CardActionArea>
+                  </Card>
+                </Grid>
+              ))}
+              <Grid item xs={6} sm={3}>
+                <Card
+                  variant="outlined"
+                  sx={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    transition: 'all 0.2s',
+                    cursor: 'pointer',
+                    borderRadius: '12px',
+                    '&:hover': {
+                      transform: 'translateY(-4px)',
+                      boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+                    },
+                    ...(customAmount
+                      ? {
+                          borderColor: 'primary.main',
+                          borderWidth: 2,
+                          backgroundColor: 'primary.lighter',
+                        }
+                      : {}),
+                  }}>
+                  <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 1 }}>
+                    <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
+                      <Typography
+                        variant="h6"
+                        align="center"
+                        sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
+                        {t('customer.recharge.custom') || t('common.custom')}
+                      </Typography>
+                    </Stack>
+                  </CardActionArea>
+                </Card>
+              </Grid>
+            </Grid>
+          </Paper>
+
+          {customAmount && (
+            <Box sx={{ mb: 3 }}>
+              <TextField
+                fullWidth
+                label={t('customer.recharge.amount')}
+                variant="outlined"
+                type="text"
+                value={amount}
+                error={!!amountError}
+                helperText={amountError}
+                onChange={handleAmountChange}
+                InputProps={{
+                  endAdornment: <Typography>{currency.symbol}</Typography>,
+                  autoComplete: 'off',
+                }}
+                inputRef={customInputRef}
+              />
+            </Box>
+          )}
+
+          <Button
+            fullWidth
+            size="large"
+            variant="contained"
+            color="primary"
+            onClick={handleRecharge}
+            disabled={!amount || parseFloat(amount) <= 0 || !!amountError}
+            sx={{
+              mb: 4,
+              py: 1.5,
+              borderRadius: '8px',
+              boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+              '&:hover': {
+                boxShadow: '0 6px 15px rgba(0,0,0,0.15)',
+                transform: 'translateY(-2px)',
+              },
+              transition: 'all 0.2s',
+            }}>
+            {t('customer.recharge.submit')}
+          </Button>
+
+          <Divider sx={{ mb: 3 }} />
+
+          <Typography variant="h4" gutterBottom>
+            {t('customer.recharge.history')}
+          </Typography>
+
+          <RechargeList currency_id={currencyId} />
+        </Box>
+      )}
+    </Root>
+  );
+}