payment-kit 1.17.2 → 1.17.4

package/src/components/customer/overdraft-protection.tsx

@@ -16,6 +16,8 @@ import {
   FormControl,
   RadioGroup,
   Radio,
+  Link,
+  Skeleton,
 } from '@mui/material';
 import Dialog from '@arcblock/ux/lib/Dialog';
 import { EventHandler, useState } from 'react';
@@ -23,7 +25,10 @@ import { api, formatAmountPrecisionLimit, Switch, useMobile } from '@blocklet/pa
 import { useRequest } from 'ahooks';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
+import { joinURL } from 'ufo';
+import { OpenInNewOutlined } from '@mui/icons-material';
 import Currency from '../currency';
+import { formatSmartDuration, TimeUnit } from '../../libs/dayjs';
 
 const fetchCycleAmount = (
   subscriptionId: string,
@@ -58,7 +63,8 @@ type OverdraftProtectionDialogProps = {
   onSave: (data: { enabled: boolean; additionalCount?: number; returnRemaining?: boolean }) => Promise<void>;
   onCancel: EventHandler<any>;
   open: boolean;
-  paymentAddress?: string;
+  stakingAddress?: string;
+  payerAddress?: string;
   currency: {
     symbol: string;
     logo: string;
@@ -66,10 +72,16 @@ type OverdraftProtectionDialogProps = {
     maximum_precision?: number;
   };
   subscription: TSubscriptionExpanded;
+  initValues?: {
+    enabled: boolean;
+    return_stake: boolean;
+  } | null;
 };
 
 OverdraftProtectionDialog.defaultProps = {
-  paymentAddress: '',
+  payerAddress: '',
+  stakingAddress: '',
+  initValues: null,
 };
 
 export default function OverdraftProtectionDialog({
@@ -78,20 +90,23 @@ export default function OverdraftProtectionDialog({
   onSave,
   onCancel,
   open,
-  paymentAddress,
+  stakingAddress,
+  payerAddress,
   currency,
   subscription,
+  initValues,
 }: OverdraftProtectionDialogProps) {
   const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const [customAmount, setCustomAmount] = useState(false);
-  const [presetAmounts, setPresetAmounts] = useState<{ amount: string; cycles: number }[]>([]);
+  const [presetAmounts, setPresetAmounts] = useState<{ amount: string; cycles: number; label: string }[]>([]);
 
   const {
     data: cycleAmount = {
       amount: '0',
       gas: '0',
     },
+    loading: cycleAmountLoading,
   } = useRequest(
     () =>
       fetchCycleAmount(subscription.id, {
@@ -100,10 +115,47 @@ export default function OverdraftProtectionDialog({
     {
       refreshDeps: [subscription.id],
       onSuccess: (data) => {
-        const presets = [1, 2, 5, 10];
+        const presets = (() => {
+          const { interval, interval_count: intervalCount } = subscription.pending_invoice_item_interval;
+
+          switch (interval) {
+            case 'hour':
+              return [
+                { cycles: Math.ceil(24 / intervalCount), label: '1 day' },
+                { cycles: Math.ceil((24 * 7) / intervalCount), label: '1 week' },
+                { cycles: Math.ceil((24 * 30) / intervalCount), label: '1 month' },
+                { cycles: Math.ceil((24 * 90) / intervalCount), label: '3 months' },
+                { cycles: Math.ceil((24 * 180) / intervalCount), label: '6 months' },
+              ];
+            case 'day':
+              return [
+                { cycles: Math.ceil(7 / intervalCount), label: '1 week' },
+                { cycles: Math.ceil(30 / intervalCount), label: '1 month' },
+                { cycles: Math.ceil(90 / intervalCount), label: '3 months' },
+                { cycles: Math.ceil(180 / intervalCount), label: '6 months' },
+                { cycles: Math.ceil(365 / intervalCount), label: '1 year' },
+              ];
+            default:
+              return [
+                { cycles: 1, label: '1x' },
+                { cycles: 2, label: '2x' },
+                { cycles: 3, label: '6x' },
+                { cycles: 6, label: '6x' },
+                { cycles: 12, label: '12x' },
+              ];
+          }
+        })();
+
         const getCycleAmount = (cycles: number) =>
           fromUnitToToken(new BN(data.amount).mul(new BN(cycles)).toString(), data?.currency?.decimal);
-        setPresetAmounts(presets.map((cycles) => ({ amount: getCycleAmount(cycles), cycles })));
+
+        setPresetAmounts(
+          presets.map(({ cycles, label }) => ({
+            amount: getCycleAmount(cycles),
+            cycles,
+            label,
+          }))
+        );
       },
     }
   );
@@ -117,6 +169,7 @@ export default function OverdraftProtectionDialog({
       enabled: !!subscription.overdraft_protection?.enabled,
       return_stake: false,
       amount: '0',
+      ...(initValues || {}),
     },
     mode: 'onChange',
   });
@@ -146,16 +199,28 @@ export default function OverdraftProtectionDialog({
     const totalIntervals = cycles * intervalCount;
     const availableUnitKeys = ['hour', 'day', 'week', 'month', 'year'];
 
-    const unitKey = availableUnitKeys.includes(interval)
-      ? `common.${interval}${totalIntervals > 1 ? 's' : ''}`
-      : 'customer.overdraftProtection.intervals';
-
-    return t('customer.overdraftProtection.estimatedDuration', {
-      duration: totalIntervals,
-      unit: t(unitKey).toLowerCase(),
+    if (!availableUnitKeys.includes(interval)) {
+      return t('customer.overdraftProtection.estimatedDuration', {
+        duration: totalIntervals,
+        unit: t('customer.overdraftProtection.intervals').toLowerCase(),
+      });
+    }
+    return t('common.estimatedDuration', {
+      duration: formatSmartDuration(totalIntervals, interval as TimeUnit, {
+        t,
+      }),
     });
   };
 
+  const getStakingAddressURL = () => {
+    return joinURL(
+      subscription.paymentMethod?.settings.arcblock?.explorer_host as string,
+      '/stakes',
+      stakingAddress as string,
+      '/tokens'
+    );
+  };
+
   return (
     <Dialog
       open={open}
@@ -207,16 +272,67 @@ export default function OverdraftProtectionDialog({
 
         {isEnabled ? (
           <Stack gap={1} sx={{ mt: '-8px' }}>
-            {paymentAddress && (
-              <Stack direction="row" alignItems="center" gap={isMobile ? 1 : 2} flexWrap="wrap">
+            {payerAddress && (
+              <Stack
+                sx={
+                  isMobile
+                    ? {
+                        flexDirection: 'column',
+                        gap: 1,
+                      }
+                    : {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 2,
+                      }
+                }>
                 <Typography variant="subtitle2" color="text.secondary">
-                  {t('customer.overdraftProtection.address')}
+                  {t('customer.overdraftProtection.payerAddress')}
                 </Typography>
                 <Typography variant="body2" sx={{ wordBreak: 'break-all', fontFamily: 'monospace', fontWeight: '700' }}>
-                  {paymentAddress}
+                  {payerAddress}
+                </Typography>
+              </Stack>
+            )}
+
+            {stakingAddress && (
+              <Stack
+                sx={
+                  isMobile
+                    ? {
+                        flexDirection: 'column',
+                        gap: 1,
+                      }
+                    : {
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 2,
+                      }
+                }>
+                <Typography variant="subtitle2" color="text.secondary">
+                  {t('customer.overdraftProtection.stakingAddress')}
                 </Typography>
+                <Link
+                  href={getStakingAddressURL()}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  sx={{
+                    wordBreak: 'break-all',
+                    fontFamily: 'monospace',
+                    fontWeight: '700',
+                    textDecoration: 'none',
+                    color: 'text.link',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: 1,
+                  }}>
+                  {stakingAddress}
+                  {!isMobile && <OpenInNewOutlined fontSize="small" />}
+                </Link>
               </Stack>
             )}
+
             <Typography variant="body2" color="text.secondary">
               {(() => {
                 if (Number(dueAmount) > 0 && !value.enabled) {
@@ -242,62 +358,91 @@ export default function OverdraftProtectionDialog({
             </Typography>
 
             <Grid container spacing={2} ml={-2} sx={{ mt: -1 }}>
-              {presetAmounts.map(({ amount: presetAmount, cycles }) => (
-                <Grid item xs={6} sm={4} key={presetAmount}>
-                  <Card
-                    variant="outlined"
-                    sx={{
-                      height: '100%',
-                      transition: 'all 0.3s',
-                      cursor: 'pointer',
-                      '&:hover': {
-                        transform: 'translateY(-4px)',
-                        boxShadow: 3,
-                      },
-                      ...(amount === presetAmount && !customAmount
-                        ? { borderColor: 'primary.main', borderWidth: 2 }
-                        : {}),
-                    }}>
-                    <CardActionArea
-                      onClick={() => {
-                        methods.setValue('amount', presetAmount);
-                        setCustomAmount(false);
-                      }}
-                      sx={{ height: '100%', p: 1 }}>
-                      <Stack spacing={1} alignItems="center">
-                        <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                          {presetAmount} {currency.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%',
-                    transition: 'all 0.3s',
-                    cursor: 'pointer',
-                    '&:hover': {
-                      transform: 'translateY(-4px)',
-                      boxShadow: 3,
-                    },
-                    ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
-                  }}>
-                  <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
-                    <Stack spacing={1} alignItems="center">
-                      <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                        {t('common.custom')}
-                      </Typography>
-                    </Stack>
-                  </CardActionArea>
-                </Card>
-              </Grid>
+              {cycleAmountLoading ? (
+                // 加载状态的占位
+                <>
+                  {[1, 2, 3, 4, 5].map((key) => (
+                    <Grid item xs={6} sm={4} key={key}>
+                      <Card variant="outlined" sx={{ height: '100%' }}>
+                        <CardActionArea sx={{ height: '100%', p: 1 }}>
+                          <Stack spacing={1} alignItems="center">
+                            <Skeleton variant="rectangular" width={80} height={32} />
+                            <Skeleton width={100} />
+                          </Stack>
+                        </CardActionArea>
+                      </Card>
+                    </Grid>
+                  ))}
+                  <Grid item xs={6} sm={4}>
+                    <Card variant="outlined" sx={{ height: '100%' }}>
+                      <CardActionArea sx={{ height: '100%', p: 2 }}>
+                        <Stack spacing={1} alignItems="center">
+                          <Skeleton variant="rectangular" width={80} height={24} />
+                        </Stack>
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
+                </>
+              ) : (
+                <>
+                  {presetAmounts.map(({ amount: presetAmount, cycles }) => (
+                    <Grid item xs={6} sm={4} key={presetAmount}>
+                      <Card
+                        variant="outlined"
+                        sx={{
+                          height: '100%',
+                          transition: 'all 0.3s',
+                          cursor: 'pointer',
+                          '&:hover': {
+                            transform: 'translateY(-4px)',
+                            boxShadow: 3,
+                          },
+                          ...(amount === presetAmount && !customAmount
+                            ? { borderColor: 'primary.main', borderWidth: 2 }
+                            : {}),
+                        }}>
+                        <CardActionArea
+                          onClick={() => {
+                            methods.setValue('amount', presetAmount);
+                            setCustomAmount(false);
+                          }}
+                          sx={{ height: '100%', p: 1 }}>
+                          <Stack spacing={1} alignItems="center">
+                            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                              {presetAmount} {currency.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%',
+                        transition: 'all 0.3s',
+                        cursor: 'pointer',
+                        '&:hover': {
+                          transform: 'translateY(-4px)',
+                          boxShadow: 3,
+                        },
+                        ...(customAmount ? { borderColor: 'primary.main', borderWidth: 2 } : {}),
+                      }}>
+                      <CardActionArea onClick={handleCustomSelect} sx={{ height: '100%', p: 2 }}>
+                        <Stack spacing={1} alignItems="center">
+                          <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                            {t('common.custom')}
+                          </Typography>
+                        </Stack>
+                      </CardActionArea>
+                    </Card>
+                  </Grid>
+                </>
+              )}
             </Grid>
 
             {customAmount && (
@@ -346,7 +491,7 @@ export default function OverdraftProtectionDialog({
                 </FormControl>
               </Stack>
             )}
-            {amount && Number(amount) > 0 && !methods.formState.errors.amount && (
+            {amount && Number(amount) > 0 && Number(estimateAmount) > 0 && !methods.formState.errors.amount && (
               <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
                 {t('customer.overdraftProtection.total', {
                   total: safeAdd(currency, amount, availableAmount),

package/src/components/subscription/metrics.tsx

@@ -3,21 +3,36 @@ import { api, formatBNStr, formatTime } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
+import { Button, Stack, Typography, Tooltip, Avatar, Box, CircularProgress, Skeleton } from '@mui/material';
+import { BN } from '@ocap/util';
+import { useNavigate } from 'react-router-dom';
+import { ArrowForward, InfoOutlined } from '@mui/icons-material';
 import InfoMetric from '../info-metric';
 import SubscriptionStatus from './status';
 
 type Props = {
   subscription: TSubscriptionExpanded;
+  showBalance?: boolean;
 };
 
 const fetchUpcoming = (id: string): Promise<{ amount: string }> => {
   return api.get(`/api/subscriptions/${id}/upcoming`).then((res) => res.data);
 };
 
-export default function SubscriptionMetrics({ subscription }: Props) {
+const fetchPayer = (id: string): Promise<{ token: string; paymentAddress: string }> => {
+  return api.get(`/api/subscriptions/${id}/payer-token`).then((res) => res.data);
+};
+
+export default function SubscriptionMetrics({ subscription, showBalance = true }: Props) {
   const { t } = useLocaleContext();
-  const { data: upcoming } = useRequest(() => fetchUpcoming(subscription.id));
+  const { data: upcoming, loading: upcomingLoading } = useRequest(() => fetchUpcoming(subscription.id));
+  const navigate = useNavigate();
+
+  const { data: payerValue, loading: payerLoading } = useRequest(() => fetchPayer(subscription.id), {
+    ready: showBalance,
+  });
 
+  const supportShowBalance = showBalance && ['arcblock', 'ethereum'].includes(subscription.paymentMethod.type);
   // let scheduleToCancelTime = 0;
   // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
   //   scheduleToCancelTime = subscription.cancel_at * 1000;
@@ -25,14 +40,43 @@ export default function SubscriptionMetrics({ subscription }: Props) {
   //   scheduleToCancelTime = subscription.current_period_end * 1000;
   // }
 
+  const isInsufficientBalance = new BN(payerValue?.token || '0').lt(new BN(upcoming?.amount || '0'));
+  const renderBalanceValue = () => {
+    if (upcomingLoading || payerLoading) {
+      return <CircularProgress size={16} />;
+    }
+
+    if (isInsufficientBalance) {
+      return (
+        <Button
+          component="a"
+          color="error"
+          onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}>
+          {t('admin.subscription.insufficientBalance')}
+          <ArrowForward sx={{ fontSize: '14px' }} />
+        </Button>
+      );
+    }
+
+    return (
+      <Stack flexDirection="row" alignItems="center" gap={0.5} sx={{ fontSize: '16px', fontWeight: 500 }}>
+        <Avatar
+          src={subscription.paymentCurrency?.logo}
+          sx={{ width: 16, height: 16 }}
+          alt={subscription.paymentCurrency?.name}
+        />
+        <Box display="flex" alignItems="baseline">
+          {formatBNStr(payerValue?.token, subscription.paymentCurrency.decimal)}
+          <Typography sx={{ fontSize: '14px', color: 'text.secondary', ml: 0.5 }}>
+            {subscription.paymentCurrency.symbol}
+          </Typography>
+        </Box>
+      </Stack>
+    );
+  };
   return (
     <>
       <InfoMetric label={t('common.status')} value={<SubscriptionStatus subscription={subscription} />} divider />
-      <InfoMetric
-        label={t('admin.subscription.startedAt')}
-        value={formatTime(subscription.start_date ? subscription.start_date * 1000 : subscription.created_at)}
-        divider
-      />
       {subscription.status === 'active' && !subscription.cancel_at && (
         <InfoMetric
           label={t('admin.subscription.nextInvoice')}
@@ -49,6 +93,34 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
+      {supportShowBalance && ['active', 'trialing'].includes(subscription.status) && (
+        <InfoMetric
+          label={
+            <Stack direction="row" spacing={1} alignItems="center">
+              <Typography>{t('admin.subscription.currentBalance')}</Typography>
+              <Tooltip
+                title={
+                  <Typography sx={{ fontFamily: 'monospace', fontSize: '13px' }}>
+                    {t('admin.subscription.paymentAddress')}：
+                    {payerLoading ? <Skeleton width={120} /> : payerValue?.paymentAddress}
+                  </Typography>
+                }
+                arrow>
+                <InfoOutlined
+                  sx={{
+                    fontSize: '16px',
+                    color: 'text.secondary',
+                    cursor: 'pointer',
+                    '&:hover': { color: 'primary.main' },
+                  }}
+                />
+              </Tooltip>
+            </Stack>
+          }
+          value={renderBalanceValue()}
+          divider
+        />
+      )}
       {/* {scheduleToCancelTime > 0 && (
         <InfoMetric label={t('admin.subscription.cancel.schedule')} value={formatTime(scheduleToCancelTime)} divider />
       )} */}
@@ -62,3 +134,7 @@ export default function SubscriptionMetrics({ subscription }: Props) {
     </>
   );
 }
+
+SubscriptionMetrics.defaultProps = {
+  showBalance: true,
+};