payment-kit 1.15.20 → 1.15.21

package/src/pages/customer/recharge.tsx

@@ -0,0 +1,417 @@
+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,
+} from '@mui/material';
+import { styled } from '@mui/system';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import {
+  usePaymentContext,
+  getPrefix,
+  formatError,
+  formatAmountPrecisionLimit,
+  formatTime,
+  api,
+  formatBNStr,
+} from '@blocklet/payment-react';
+import { joinURL } from 'ufo';
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { BN, fromUnitToToken } from '@ocap/util';
+import SubscriptionDescription from '../../components/subscription/description';
+import InfoRow from '../../components/info-row';
+import Currency from '../../components/currency';
+import SubscriptionMetrics from '../../components/subscription/metrics';
+import { goBackOrFallback } from '../../libs/util';
+import CustomerLink from '../../components/customer/link';
+
+const Root = styled(Stack)(({ theme }) => ({
+  marginBottom: theme.spacing(3),
+  gap: theme.spacing(3),
+  flexDirection: 'column',
+  margin: '0 auto',
+  padding: '20px 0',
+}));
+
+const BalanceCard = styled(Box)(({ 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 RechargePage() {
+  const { t, locale } = useLocaleContext();
+  const { id: subscriptionId } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { connect } = usePaymentContext();
+  const [subscription, setSubscription] = useState<TSubscriptionExpanded | null>(null);
+  const [amount, setAmount] = useState('');
+  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, setPresetAmounts] = useState<Array<{ amount: string; cycles: number }>>([]);
+
+  const {
+    paymentCurrency,
+    payment_details: paymentDetails,
+    paymentMethod,
+  } = subscription || {
+    customer: null,
+    paymentCurrency: null,
+    payment_details: null,
+    paymentMethod: null,
+  };
+
+  // @ts-ignore
+  const receiveAddress = paymentDetails?.[paymentMethod?.type]?.payer;
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const [subscriptionRes, payerTokenRes, upcomingRes] = await Promise.all([
+          api.get(`/api/subscriptions/${subscriptionId}`),
+          api.get(`/api/subscriptions/${subscriptionId}/payer-token`),
+          api.get(`/api/subscriptions/${subscriptionId}/upcoming`),
+        ]);
+        setSubscription(subscriptionRes.data);
+        setPayerValue(payerTokenRes.data);
+
+        // Calculate preset amounts
+        const getCycleAmount = (cycles: number) =>
+          fromUnitToToken(
+            new BN(upcomingRes.data.amount).mul(new BN(cycles)).toString(),
+            upcomingRes.data?.currency?.decimal
+          );
+        setPresetAmounts([
+          { amount: getCycleAmount(1), cycles: 1 },
+          { amount: getCycleAmount(2), cycles: 2 },
+          { amount: getCycleAmount(3), cycles: 3 },
+          { amount: getCycleAmount(5), cycles: 5 },
+          { amount: getCycleAmount(10), cycles: 10 },
+        ]);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('common.fetchError'));
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [subscriptionId]);
+
+  const handleRecharge = () => {
+    if (!subscription) return;
+
+    connect.open({
+      containerEl: undefined as unknown as Element,
+      saveConnect: false,
+      action: 'recharge',
+      prefix: joinURL(getPrefix(), '/api/did'),
+      extraParams: { subscriptionId, amount },
+      onSuccess: () => {
+        connect.close();
+        Toast.success(t('customer.recharge.success'));
+        window.location.reload();
+      },
+      onClose: () => {
+        connect.close();
+      },
+      onError: (err: any) => {
+        Toast.error(formatError(err));
+      },
+    });
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target;
+    if (!subscription) return;
+
+    const precision = subscription.paymentCurrency.maximum_precision || 6;
+    const errorMessage = formatAmountPrecisionLimit(value, locale, precision);
+    setAmountError(errorMessage || '');
+    setAmount(value);
+  };
+
+  const handleSelect = (selectedAmount: string) => {
+    setAmount(selectedAmount);
+    setCustomAmount(false);
+  };
+
+  const handleCustomSelect = () => {
+    setCustomAmount(true);
+    setAmount('');
+    setTimeout(() => {
+      customInputRef.current?.focus();
+    }, 0);
+  };
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  if (error) {
+    return <Alert severity="error">{error}</Alert>;
+  }
+
+  if (!subscription) {
+    return <Alert severity="info">{t('common.dataNotFound')}</Alert>;
+  }
+
+  const currentBalance = formatBNStr(payerValue?.token || '0', paymentCurrency?.decimal, 6, false);
+
+  const supportRecharge = ['arcblock', 'ethereum'].includes(paymentMethod?.type || '');
+
+  const formatEstimatedDuration = (cycles: number) => {
+    const { interval, interval_count: intervalCount } = subscription.pending_invoice_item_interval;
+    const totalIntervals = cycles * intervalCount;
+    const availableUnitKeys = ['hour', 'day', 'week', 'month', 'year'];
+
+    const unitKey = availableUnitKeys.includes(interval)
+      ? `common.${interval}${totalIntervals > 1 ? 's' : ''}`
+      : 'customer.recharge.intervals';
+
+    return t('customer.recharge.estimatedDuration', {
+      duration: totalIntervals,
+      unit: t(unitKey).toLowerCase(),
+    });
+  };
+
+  return (
+    <Root>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ position: 'relative' }}>
+        <Stack
+          direction="row"
+          onClick={() => goBackOrFallback('/customer')}
+          alignItems="center"
+          sx={{ fontWeight: 'normal', cursor: 'pointer' }}>
+          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+            {t('common.previous')}
+          </Typography>
+        </Stack>
+        <Button variant="outlined" onClick={() => navigate(`/customer/subscription/${subscriptionId}`)}>
+          {t('customer.recharge.view')}
+        </Button>
+      </Stack>
+
+      <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: { xs: 2, sm: 2, md: 5 },
+            flexWrap: 'wrap',
+            flexDirection: { xs: 'column', sm: 'column', md: 'row' },
+            alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
+          }}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center" flexWrap="wrap" gap={1}>
+              <SubscriptionDescription subscription={subscription} variant="h1" />
+            </Stack>
+          </Stack>
+          <Stack
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{
+              flexDirection: { xs: 'column', sm: 'column', md: 'row' },
+              alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
+              gap: { xs: 1, sm: 1, md: 3 },
+            }}>
+            <SubscriptionMetrics subscription={subscription} />
+          </Stack>
+        </Box>
+
+        <Divider sx={{ my: 2 }} />
+
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: { xs: 'repeat(1, 1fr)', sm: 'repeat(1, 1fr)', md: 'repeat(1, 1fr)' },
+            gap: { xs: 0, md: 2 },
+          }}>
+          <InfoRow
+            label={t('common.customer')}
+            value={<CustomerLink customer={subscription?.customer} linked={false} />}
+            direction="column"
+            alignItems="flex-start"
+          />
+          <InfoRow
+            label={t('admin.subscription.currentPeriod')}
+            value={`${formatTime(subscription.current_period_start * 1000)} ~ ${formatTime(subscription.current_period_end * 1000)}`}
+            direction="column"
+            alignItems="flex-start"
+          />
+          <InfoRow
+            label={t('admin.paymentMethod._name')}
+            value={<Currency logo={subscription.paymentMethod?.logo} name={subscription.paymentMethod?.name} />}
+            direction="column"
+            alignItems="flex-start"
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={
+              <Stack direction="row" spacing={2}>
+                <Currency logo={subscription.paymentCurrency.logo} name={subscription.paymentCurrency.symbol} />
+              </Stack>
+            }
+            direction="column"
+            alignItems="flex-start"
+          />
+        </Box>
+      </Box>
+      <Divider />
+
+      <Box sx={{ maxWidth: 600 }}>
+        <Typography variant="h2" gutterBottom>
+          {t('customer.recharge.title')}
+        </Typography>
+
+        {supportRecharge ? (
+          <>
+            <BalanceCard>
+              <Typography variant="subtitle1">{t('customer.recharge.receiveAddress')}</Typography>
+              <Typography variant="h4" sx={{ wordBreak: 'break-all' }}>
+                {payerValue?.paymentAddress || receiveAddress}
+              </Typography>
+            </BalanceCard>
+
+            <BalanceCard
+              sx={{
+                background: 'var(--tags-tag-orange-bg, #B7FEE3)',
+                color: 'var(--tags-tag-orange-text, #007C52)',
+                borderRadius: 'var(--radius-m, 8px)',
+                border: 'none',
+              }}>
+              <Typography variant="subtitle1">{t('admin.customer.summary.balance')}</Typography>
+              <Typography variant="h4">
+                {currentBalance} {subscription.paymentCurrency.symbol}
+              </Typography>
+            </BalanceCard>
+
+            <Paper elevation={0} sx={{ mb: 2, mt: 2, backgroundColor: 'background.default' }}>
+              <Grid container spacing={2}>
+                {presetAmounts.map(({ amount: presetAmount, cycles }) => (
+                  <Grid item xs={6} sm={4} key={presetAmount}>
+                    <Card
+                      variant="outlined"
+                      sx={{
+                        height: '100%',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        transition: 'all 0.3s',
+                        cursor: 'pointer',
+                        '&:hover': {
+                          transform: 'translateY(-4px)',
+                          boxShadow: 3,
+                        },
+                        ...(amount === presetAmount && !customAmount
+                          ? { borderColor: 'primary.main', borderWidth: 2 }
+                          : {}),
+                      }}>
+                      <CardActionArea onClick={() => handleSelect(presetAmount)} sx={{ height: '100%' }}>
+                        <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                          <Typography
+                            variant="h6"
+                            sx={{
+                              fontWeight: 600,
+                              color: amount === presetAmount && !customAmount ? 'primary.main' : 'text.primary',
+                            }}>
+                            {presetAmount} {subscription.paymentCurrency.symbol}
+                          </Typography>
+                          <Typography variant="caption" color="text.secondary">
+                            {formatEstimatedDuration(cycles)}
+                          </Typography>
+                        </Stack>
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
+                ))}
+                <Grid item xs={6} sm={4}>
+                  <Card
+                    variant="outlined"
+                    sx={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center',
+                      transition: 'all 0.3s',
+                      cursor: 'pointer',
+                      '&:hover': {
+                        transform: 'translateY(-4px)',
+                        boxShadow: 3,
+                      },
+                      ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
+                    }}>
+                    <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%' }}>
+                      <Stack direction="column" sx={{ p: 1 }} spacing={1} alignItems="center" justifyContent="center">
+                        <Typography
+                          variant="h6"
+                          sx={{ fontWeight: 600, color: customAmount ? 'primary.main' : 'text.primary' }}>
+                          {t('customer.recharge.custom')}
+                        </Typography>
+                      </Stack>
+                    </CardActionArea>
+                  </Card>
+                </Grid>
+              </Grid>
+            </Paper>
+
+            {customAmount && (
+              <TextField
+                fullWidth
+                label={t('customer.recharge.amount')}
+                variant="outlined"
+                type="number"
+                value={amount}
+                error={!!amountError}
+                helperText={amountError}
+                onChange={handleAmountChange}
+                InputProps={{
+                  endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
+                  autoComplete: 'off',
+                }}
+                sx={{ mt: 2, mb: 2 }}
+                inputRef={customInputRef}
+              />
+            )}
+
+            <Button
+              fullWidth
+              size="large"
+              variant="contained"
+              color="primary"
+              onClick={handleRecharge}
+              sx={{ mt: 2 }}
+              disabled={!amount || parseFloat(amount) <= 0 || !!amountError}>
+              {t('customer.recharge.submit')}
+            </Button>
+          </>
+        ) : (
+          <Alert severity="info">{t('customer.recharge.unsupported')}</Alert>
+        )}
+      </Box>
+    </Root>
+  );
+}

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

@@ -5,7 +5,7 @@ import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { Link, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 import { styled } from '@mui/system';
 import Currency from '../../../components/currency';
@@ -24,8 +24,16 @@ const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
 const InfoDirection = 'column';
 const InfoAlignItems = 'flex-start';
 
+const supportRecharge = (subscription: TSubscriptionExpanded) => {
+  return (
+    ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
+    ['arcblock', 'ethereum'].includes(subscription?.paymentMethod?.type)
+  );
+};
+
 export default function CustomerSubscriptionDetail() {
   const { id } = useParams() as { id: string };
+  const navigate = useNavigate();
   const { t } = useLocaleContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
 
@@ -56,25 +64,35 @@ export default function CustomerSubscriptionDetail() {
               {t('payment.customer.subscriptions.title')}
             </Typography>
           </Stack>
-          <SubscriptionActions
-            subscription={data}
-            onChange={() => refresh()}
-            showExtra
-            actionProps={{
-              cancel: {
-                variant: 'outlined',
-                color: 'primary',
-              },
-              recover: {
-                variant: 'outlined',
-                color: 'info',
-              },
-              pastDue: {
-                variant: 'outlined',
-                color: 'primary',
-              },
-            }}
-          />
+          <Stack direction="row" gap={1}>
+            <SubscriptionActions
+              subscription={data}
+              onChange={() => refresh()}
+              showExtra
+              actionProps={{
+                cancel: {
+                  variant: 'outlined',
+                  color: 'primary',
+                },
+                recover: {
+                  variant: 'outlined',
+                  color: 'info',
+                },
+                pastDue: {
+                  variant: 'outlined',
+                  color: 'primary',
+                },
+              }}
+            />
+            {supportRecharge(data) && (
+              <Button
+                variant="outlined"
+                color="primary"
+                onClick={() => navigate(`/customer/subscription/${data.id}/recharge`)}>
+                {t('customer.recharge.title')}
+              </Button>
+            )}
+          </Stack>
         </Stack>
         <Box
           mt={4}