payment-kit 1.17.2 → 1.17.4

package/src/locales/zh.tsx

@@ -24,6 +24,7 @@ export default flat({
     rechargeTime: '充值时间',
     submit: '提交',
     custom: '自定义',
+    estimatedDuration: '预计可用 {duration}',
   },
   admin: {
     balances: '余额',
@@ -445,6 +446,9 @@ export default flat({
       update: '更新订阅',
       resume: '恢复付款',
       resumeTip: '您确定要继续收款吗？此订阅的未来账单将继续付款。',
+      paymentAddress: '扣费地址',
+      currentBalance: '扣款账户余额',
+      insufficientBalance: '余额不足，立即充值',
       cancel: {
         schedule: '计划取消',
         title: '取消订阅',
@@ -634,34 +638,37 @@ export default flat({
       error: '授权失败',
     },
     overdraftProtection: {
-      title: '透支保护',
-      setting: '透支保护设置',
-      tip: '为避免因扣费失败中断服务，您可以通过质押开启透支保护。按时付款不会收取额外费用，请及时付清账单，若可用质押不足或者超期未付，我们将从质押中扣除并收取服务费',
+      title: '订阅守护',
+      setting: '配置订阅守护',
+      tip: '为避免因扣费失败中断服务，您可以通过质押开启订阅守护。按时付款不会收取额外费用，请及时付清账单，若可用质押不足或者超期未付，我们将从质押中扣除并收取服务费',
       enabled: '已启用',
       disabled: '未启用',
       returnRemaining: '退还剩余质押',
-      returnRemainingTip: '退还剩余质押后，透支保护将自动关闭，请确认操作。',
+      returnRemainingTip: '退还剩余质押后，订阅守护服务将自动关闭，请确认操作。',
       applyRemainingSuccess: '质押退还申请成功',
       remaining: '您当前剩余可用质押：{amount} {symbol}, 每周期预计需质押：{estimateAmount} {symbol}。',
-      noRemaining: '当前无质押，为确保透支保护功能的正常使用，请至少质押 {estimateAmount} {symbol}。',
+      noRemaining: '当前无质押，为确保订阅守护服务的正常使用，请至少质押 {estimateAmount} {symbol}。',
       remainingNotEnough:
         '当前存在未支付的账单，总计 {due} {symbol}，如果不支付，您当前剩余质押将无法覆盖下期账单，剩余可用质押：{unused} {symbol}，请质押至少 {min} {symbol}。',
       due: '请先支付欠款',
-      insufficient: '额度不足，下期账单将无法使用透支保护',
-      insufficientTip: '透支保护额度不足，请尽快质押保证透支保护功能的正常使用。',
+      insufficient: '额度不足，下期账单将无法使用订阅守护服务, 请添加额度',
+      insufficientTip: '订阅守护服务额度不足，请尽快质押保证订阅守护服务的正常使用。',
       intervals: '个周期',
       estimatedDuration: '预计可用 {duration} {unit}',
       rule: '规则：N * ( P + Fee )',
-      ruleTip: 'N 为周期数, P 为订阅账单费用, Fee 为透支保护服务费用，单次费用为 {gas} {symbol}',
+      ruleTip: 'N 为周期数, P 为订阅账单费用, Fee 为订阅守护服务费用，单次费用为 {gas} {symbol}',
       min: '质押金额不得小于 {min} {symbol}',
-      settingSuccess: '透支保护设置成功',
-      settingError: '透支保护设置失败',
+      settingSuccess: '订阅守护配置成功',
+      settingError: '订阅守护配置失败',
       keepStake: '不退还质押',
       returnStake: '退还剩余质押',
       stake: '质押',
       address: '质押账户',
       total: '总质押：{total} {symbol}，',
       disableConfirm: '您当前有未支付的账单,请先付清账单。',
+      open: '开启订阅守护',
+      payerAddress: '付款账户',
+      stakingAddress: '质押地址',
     },
     unpaidInvoicesWarning: '您当前有未支付的账单,请先付清账单。',
     unpaidInvoicesWarningTip: '您当前有未支付的账单，请及时付清。',

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -156,7 +156,7 @@ export default function SubscriptionDetail(props: { id: string }) {
                 md: 3,
               },
             }}>
-            <SubscriptionMetrics subscription={data} />
+            <SubscriptionMetrics subscription={data} showBalance={false} />
           </Stack>
         </Box>
         <Divider />

package/src/pages/customer/recharge.tsx

@@ -38,6 +38,7 @@ import SubscriptionMetrics from '../../components/subscription/metrics';
 import { 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),
@@ -73,6 +74,7 @@ export default function RechargePage() {
   const [customAmount, setCustomAmount] = useState(false);
   const [presetAmounts, setPresetAmounts] = useState<Array<{ amount: string; cycles: number }>>([]);
   const { session } = useSessionContext();
+  const [cycleAmount, setCycleAmount] = useState('0');
 
   const {
     paymentCurrency,
@@ -116,6 +118,11 @@ export default function RechargePage() {
         { amount: getCycleAmount(5), cycles: 5 },
         { amount: getCycleAmount(10), cycles: 10 },
       ]);
+
+      setCycleAmount(fromUnitToToken(upcomingRes.data.amount || '0', upcomingRes.data?.currency?.decimal) || '0');
+      if (!amount && !customAmount) {
+        handleSelect(getCycleAmount(10));
+      }
     } catch (err) {
       setError(formatError(err) || t('common.fetchError'));
       console.error(err);
@@ -124,19 +131,36 @@ export default function RechargePage() {
     }
   };
 
+  const rechargeRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     fetchData();
   }, [subscriptionId]);
 
+  useEffect(() => {
+    if (rechargeRef.current && subscription) {
+      setTimeout(() => {
+        // @ts-ignore
+        rechargeRef.current?.scrollIntoView({
+          behavior: 'smooth',
+        });
+      }, 200);
+    }
+  }, [subscription]);
+
   const handleRecharge = () => {
     if (!subscription) return;
 
+    if (Number.isNaN(Number(amount))) {
+      return;
+    }
+
     connect.open({
       containerEl: undefined as unknown as Element,
       saveConnect: false,
       action: 'recharge',
       prefix: joinURL(getPrefix(), '/api/did'),
-      extraParams: { subscriptionId, amount },
+      extraParams: { subscriptionId, amount: Number(amount) },
       onSuccess: () => {
         connect.close();
         Toast.success(t('customer.recharge.success'));
@@ -154,7 +178,9 @@ export default function RechargePage() {
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     if (!subscription) return;
-
+    if (!/^\d*\.?\d*$/.test(value)) return;
+    // 不允许以小数点开头
+    if (value.startsWith('.')) return;
     const precision = subscription.paymentCurrency.maximum_precision || 6;
     const errorMessage = formatAmountPrecisionLimit(value, locale, precision);
     setAmountError(errorMessage || '');
@@ -198,13 +224,16 @@ export default function RechargePage() {
     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(),
+    if (!availableUnitKeys.includes(interval)) {
+      return t('customer.recharge.estimatedDuration', {
+        duration: totalIntervals,
+        unit: t('customer.recharge.intervals').toLowerCase(),
+      });
+    }
+    return t('common.estimatedDuration', {
+      duration: formatSmartDuration(totalIntervals, interval as TimeUnit, {
+        t,
+      }),
     });
   };
 
@@ -248,7 +277,7 @@ export default function RechargePage() {
               alignItems: { xs: 'flex-start', sm: 'flex-start', md: 'center' },
               gap: { xs: 1, sm: 1, md: 3 },
             }}>
-            <SubscriptionMetrics subscription={subscription} />
+            <SubscriptionMetrics subscription={subscription} showBalance={false} />
           </Stack>
         </Box>
 
@@ -292,7 +321,7 @@ export default function RechargePage() {
       </Box>
       <Divider />
 
-      <Box sx={{ maxWidth: 600 }}>
+      <Box sx={{ maxWidth: 600 }} ref={rechargeRef}>
         <Typography variant="h2" gutterBottom>
           {t('customer.recharge.title')}
         </Typography>
@@ -389,22 +418,29 @@ export default function RechargePage() {
             </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}
-              />
+              <Box>
+                <TextField
+                  fullWidth
+                  label={t('customer.recharge.amount')}
+                  variant="outlined"
+                  type="text"
+                  value={amount}
+                  error={!!amountError}
+                  helperText={amountError}
+                  onChange={handleAmountChange}
+                  InputProps={{
+                    endAdornment: <Typography>{subscription.paymentCurrency.symbol}</Typography>,
+                    autoComplete: 'off',
+                  }}
+                  sx={{ mt: 1 }}
+                  inputRef={customInputRef}
+                />
+                {amount && Number(amount) > 0 && Number(cycleAmount) > 0 && !amountError && (
+                  <Typography variant="body2" sx={{ color: 'text.lighter', mt: '8px !important' }} fontSize={12}>
+                    {formatEstimatedDuration(Math.floor(Number(amount) / Number(cycleAmount)))}
+                  </Typography>
+                )}
+              </Box>
             )}
 
             <Button

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

@@ -1,24 +1,34 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { CustomerInvoiceList, TxLink, api, formatTime, hasDelegateTxHash, useMobile } from '@blocklet/payment-react';
-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 {
+  CustomerInvoiceList,
+  TxLink,
+  api,
+  formatBNStr,
+  formatTime,
+  hasDelegateTxHash,
+  useMobile,
+} from '@blocklet/payment-react';
+import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined, CheckCircle } from '@mui/icons-material';
+import { Alert, Avatar, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { styled } from '@mui/system';
-import { BN } from '@ocap/util';
+import { BN, fromUnitToToken } from '@ocap/util';
+import { useCallback, useRef } from 'react';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
 import InfoRow from '../../../components/info-row';
 import SubscriptionDescription from '../../../components/subscription/description';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
-import SubscriptionActions from '../../../components/subscription/portal/actions';
+import SubscriptionActions, { ActionMethods } from '../../../components/subscription/portal/actions';
 import { canChangePaymentMethod } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import InfoMetric from '../../../components/info-metric';
 import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
+import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -29,6 +39,14 @@ const fetchOverdraftProtection = (
 ): Promise<{ enabled: boolean; remaining: string; unused: string; upcoming: { amount: string }; gas: string }> => {
   return api.get(`/api/subscriptions/${id}/overdraft-protection`).then((res) => res.data);
 };
+
+const fetchCycleAmount = (
+  subscriptionId: string,
+  params: { overdraftProtection: boolean }
+): Promise<{ amount: string; gas: string; currency: TPaymentCurrency }> => {
+  return api.get(`/api/subscriptions/${subscriptionId}/cycle-amount`, { params }).then((res) => res.data);
+};
+
 const InfoDirection = 'column';
 const InfoAlignItems = 'flex-start';
 
@@ -48,8 +66,29 @@ export default function CustomerSubscriptionDetail() {
     ready: ['active', 'trialing', 'past_due'].includes(data?.status || ''),
   });
 
+  const {
+    data: cycleAmount = {
+      amount: '0',
+      gas: '0',
+    },
+  } = useRequest(
+    () =>
+      fetchCycleAmount(id, {
+        overdraftProtection: true,
+      }),
+    {
+      refreshDeps: [id],
+    }
+  );
+
+  const actionRef = useRef<ActionMethods>();
+
   const enableOverdraftProtection = !!overdraftProtection?.enabled;
 
+  const actionSetUp = useCallback((methods: ActionMethods) => {
+    actionRef.current = methods;
+  }, []);
+
   if (data?.customer?.did && session?.user?.did && data.customer.did !== session.user.did) {
     return <Alert severity="error">You do not have permission to access other customer data</Alert>;
   }
@@ -75,13 +114,116 @@ export default function CustomerSubscriptionDetail() {
       new BN(overdraftProtection.unused).lt(
         new BN(overdraftProtection.upcoming?.amount).add(new BN(overdraftProtection.gas))
       );
+    const estimateAmount = +fromUnitToToken(cycleAmount.amount, data.paymentCurrency?.decimal);
+    const remainingStake = +fromUnitToToken(overdraftProtection?.unused, data.paymentCurrency?.decimal);
+    const formatEstimatedDuration = (cycles: number) => {
+      if (!data?.pending_invoice_item_interval) return '';
+      const { interval, interval_count: intervalCount } = data.pending_invoice_item_interval;
+      const totalIntervals = cycles * intervalCount;
+      const availableUnitKeys = ['hour', 'day', 'week', 'month', 'year'];
+
+      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,
+        }),
+      });
+    };
     if (!enabled) {
-      return t('customer.overdraftProtection.disabled');
+      return (
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Typography sx={{ color: 'text.lighter' }}>{t('customer.overdraftProtection.disabled')}</Typography>
+          <Button
+            size="small"
+            sx={{
+              fontSize: '13px',
+              color: 'text.link',
+              '&:hover': { backgroundColor: 'primary.lighter' },
+            }}
+            onClick={() =>
+              actionRef.current?.openOverdraftProtection({
+                enabled: true,
+              })
+            }>
+            {t('customer.overdraftProtection.open')}
+          </Button>
+        </Stack>
+      );
     }
+
     if (enabled && insufficient) {
-      return <Typography color="error">{t('customer.overdraftProtection.insufficient')}</Typography>;
+      return (
+        <Button
+          size="small"
+          color="error"
+          sx={{
+            fontSize: '12px',
+            textAlign: 'left',
+          }}
+          onClick={() =>
+            actionRef.current?.openOverdraftProtection({
+              enabled: true,
+            })
+          }>
+          {t('customer.overdraftProtection.insufficient')}
+        </Button>
+      );
     }
-    return t('customer.overdraftProtection.enabled');
+
+    return (
+      <Stack direction="row" spacing={1} alignItems="center">
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <CheckCircle
+            sx={{
+              fontSize: '16px',
+              color: 'success.main',
+              verticalAlign: 'middle',
+            }}
+          />
+          <Typography
+            sx={{
+              color: 'success.main',
+              fontWeight: 500,
+            }}>
+            {t('customer.overdraftProtection.enabled')}
+          </Typography>
+        </Stack>
+        <Divider
+          orientation="vertical"
+          flexItem
+          sx={{
+            mx: 1,
+            borderColor: 'divider',
+          }}
+        />
+        <Typography
+          sx={{
+            color: 'text.primary',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 0.5,
+            fontWeight: 500,
+          }}>
+          <Avatar src={data.paymentCurrency?.logo} sx={{ width: 16, height: 16 }} alt={data.paymentCurrency?.name} />
+          <Box display="flex" alignItems="baseline">
+            {formatBNStr(overdraftProtection?.unused, data.paymentCurrency.decimal)}
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                fontSize: '14px',
+                ml: 0.5,
+              }}>
+              {data.paymentCurrency.symbol}（{formatEstimatedDuration(Math.ceil(remainingStake / estimateAmount))}）
+            </Typography>
+          </Box>
+        </Typography>
+      </Stack>
+    );
   };
 
   return (
@@ -119,7 +261,7 @@ export default function CustomerSubscriptionDetail() {
                 onChange: () => refreshOverdraftProtection(),
               }}
               showRecharge
-              mode={isMobile ? 'menu' : 'btn'}
+              mode={isMobile ? 'menu-only' : 'primary-buttons'}
               actionProps={{
                 cancel: {
                   variant: 'outlined',
@@ -134,6 +276,7 @@ export default function CustomerSubscriptionDetail() {
                   color: 'primary',
                 },
               }}
+              setUp={actionSetUp}
             />
           </Stack>
         </Stack>

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

@@ -78,6 +78,7 @@ export default function SubscriptionEmbed() {
         ignore_zero: true,
         include_staking: true,
         customer_id: subscription?.customer_id,
+        include_overdraft_protection: false,
       }),
     {
       refreshDeps: [subscriptionId, authToken, subscription?.customer_id],