payment-kit 1.18.15 → 1.18.17

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

@@ -0,0 +1,513 @@
+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 { AccountBalanceWalletOutlined, 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',
+}));
+
+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),
+}));
+
+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 - 120;
+          window.scrollTo({
+            top: scrollToPosition,
+            behavior: 'smooth',
+          });
+        }
+      }, 200);
+    }
+  }, [currency, loading]);
+
+  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 ref={rechargeRef}>
+          <Stack sx={{ maxWidth: '600px' }}>
+            <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: {
+                          xs: 30,
+                          sm: 40,
+                        },
+                        height: {
+                          xs: 30,
+                          sm: 40,
+                        },
+                      }}
+                    />
+                  )}
+                </Stack>
+              </BalanceCard>
+
+              <BalanceCard
+                elevation={0}
+                onClick={() => balanceLink && window.open(balanceLink, '_blank')}
+                sx={{
+                  color: 'text.primary',
+                  borderRadius: 'var(--radius-m, 8px)',
+                  transition: 'all 0.2s ease-in-out',
+                  cursor: balanceLink ? 'pointer' : 'default',
+                  position: 'relative',
+                  '&:hover': balanceLink
+                    ? {
+                        '& .arrow-icon': {
+                          opacity: 1,
+                          transform: 'translateX(0)',
+                        },
+                      }
+                    : undefined,
+                }}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between">
+                  <Stack>
+                    <Typography
+                      variant="body1"
+                      color="inherit"
+                      sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
+                      <AccountBalanceWalletOutlined color="success" fontSize="small" />
+                      {t('admin.customer.summary.balance')}
+                    </Typography>
+                    <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1, color: 'text.primary' }}>
+                      {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 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>
+          </Stack>
+          {relatedSubscriptions.length > 0 && (
+            <Box sx={{ mb: 3 }}>
+              <Typography variant="h4" gutterBottom>
+                {t('customer.recharge.relatedSubscriptions')}
+              </Typography>
+
+              <Stack direction="row" sx={{ flexWrap: 'wrap', gap: 2 }}>
+                {relatedSubscriptions.map((subscription) => (
+                  <Stack
+                    key={subscription.id}
+                    onClick={() => handleSubscriptionClick(subscription.id)}
+                    className="base-card"
+                    sx={{
+                      minWidth: '220px',
+                      flex: 1,
+                    }}>
+                    <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>
+                ))}
+              </Stack>
+            </Box>
+          )}
+          <Divider sx={{ mb: 3 }} />
+
+          <Typography variant="h4" gutterBottom>
+            {t('customer.recharge.history')}
+          </Typography>
+
+          <RechargeList currency_id={currencyId} />
+        </Box>
+      )}
+    </Root>
+  );
+}

package/src/pages/customer/{recharge.tsx → recharge/subscription.tsx}

@@ -28,17 +28,17 @@ import {
 } from '@blocklet/payment-react';
 import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
+import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined } from '@mui/icons-material';
 import { BN, fromUnitToToken } from '@ocap/util';
-import RechargeList from '../../components/invoice/recharge';
-import SubscriptionDescription from '../../components/subscription/description';
-import InfoRow from '../../components/info-row';
-import Currency from '../../components/currency';
-import SubscriptionMetrics from '../../components/subscription/metrics';
-import { getTokenBalanceLink, goBackOrFallback } from '../../libs/util';
-import CustomerLink from '../../components/customer/link';
-import { useSessionContext } from '../../contexts/session';
-import { formatSmartDuration, TimeUnit } from '../../libs/dayjs';
+import RechargeList from '../../../components/invoice/recharge';
+import SubscriptionDescription from '../../../components/subscription/description';
+import InfoRow from '../../../components/info-row';
+import Currency from '../../../components/currency';
+import SubscriptionMetrics from '../../../components/subscription/metrics';
+import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import CustomerLink from '../../../components/customer/link';
+import { useSessionContext } from '../../../contexts/session';
+import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 
 const Root = styled(Stack)(({ theme }) => ({
   marginBottom: theme.spacing(3),
@@ -328,7 +328,7 @@ export default function RechargePage() {
       <Divider />
 
       <Box sx={{ maxWidth: 600 }} ref={rechargeRef}>
-        <Typography variant="h2" gutterBottom>
+        <Typography variant="h4" gutterBottom>
           {t('customer.recharge.title')}
         </Typography>
 
@@ -344,14 +344,11 @@ export default function RechargePage() {
             <BalanceCard
               onClick={() => balanceLink && window.open(balanceLink, '_blank')}
               sx={{
-                background: 'var(--tags-tag-orange-bg, #B7FEE3)',
-                color: 'var(--tags-tag-orange-text, #007C52)',
+                color: 'text.primary',
                 borderRadius: 'var(--radius-m, 8px)',
-                border: 'none',
-
                 transition: 'all 0.2s ease-in-out',
-                position: 'relative',
                 cursor: balanceLink ? 'pointer' : 'default',
+                position: 'relative',
                 '&:hover': balanceLink
                   ? {
                       '& .MuiSvgIcon-root': {
@@ -363,8 +360,14 @@ export default function RechargePage() {
               }}>
               <Stack direction="row" alignItems="center" spacing={1}>
                 <Stack flex={1}>
-                  <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
-                  <Typography variant="h4">
+                  <Typography
+                    variant="body1"
+                    color="inherit"
+                    sx={{ display: 'flex', alignItems: 'center', gap: 1, color: 'text.secondary' }}>
+                    <AccountBalanceWalletOutlined color="success" fontSize="small" />
+                    {t('admin.customer.summary.balance')}
+                  </Typography>
+                  <Typography variant="h3" sx={{ fontWeight: 'bold', mt: 1, color: 'text.primary' }}>
                     {currentBalance} {subscription.paymentCurrency.symbol}
                   </Typography>
                 </Stack>
@@ -492,7 +495,7 @@ export default function RechargePage() {
         )}
       </Box>
       <Divider />
-      <Typography variant="h2" gutterBottom>
+      <Typography variant="h4" gutterBottom>
         {t('customer.recharge.history')}
       </Typography>
       <RechargeList subscription_id={subscriptionId} currency_id={paymentCurrency?.id} />

package/src/pages/customer/subscription/embed.tsx

@@ -216,6 +216,7 @@ export default function SubscriptionEmbed() {
           )}
           name={`${subscription.customer.name} (${subscription.customer.email})`}
           description={<DidAddress did={subscription.customer.did} responsive={false} compact />}
+          className="owner-info-card"
         />
       ),
     });
@@ -241,7 +242,21 @@ export default function SubscriptionEmbed() {
           </Typography>
           <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
             {infoList.map(({ name, value }) => {
-              return <InfoRow label={name} value={value} direction="column" alignItems="flex-start" sx={{ mb: 0 }} />;
+              return (
+                <InfoRow
+                  label={name}
+                  value={value}
+                  sx={{
+                    mb: 0,
+                    '.info-row-label': {
+                      whiteSpace: 'nowrap',
+                    },
+                    '.info-row-value': {
+                      flex: 'none',
+                    },
+                  }}
+                />
+              );
             })}
           </Box>
           <Divider />