payment-kit 1.17.1 → 1.17.3

package/src/libs/dayjs.ts

@@ -1,3 +1,135 @@
 import { dayjs } from '@blocklet/payment-react';
 
 export default dayjs;
+
+/**
+ * Time unit type definition
+ */
+export type TimeUnit = 'hour' | 'day' | 'week' | 'month' | 'year';
+
+/**
+ * Format options interface
+ */
+interface FormatDurationOptions {
+  t: (key: string, options?: Record<string, any>) => string;
+  pluralSuffix?: string;
+  separator?: string;
+}
+
+/**
+ * Conversion rule type
+ */
+export type ConversionRule = {
+  threshold: number;
+  convert: (value: number) => { main: number; remainder: number };
+  format: (main: number, remainder: number, value: number) => Array<[TimeUnit, number]>;
+};
+/**
+ * Smart duration formatter optimized for subscription periods
+ *
+ * Display Rules:
+ * 1. Hours:
+ *    - < 24h: show hours (e.g., "5 hours")
+ *    - 24-47h: show days and hours (e.g., "1 day 5 hours")
+ *    - >= 48h: convert to days
+ *
+ * 2. Days:
+ *    - < 7 days: show days (e.g., "5 days")
+ *    - 7-13 days: show 1 week + days (e.g., "1 week 3 days")
+ *    - 14+ days: show weeks if divisible, else days (e.g., "2 weeks" or "15 days")
+ *    - 30+ days: show months if divisible, else weeks/days (e.g., "1 month" or "5 weeks")
+ *
+ * 3. Weeks:
+ *    - < 4 weeks: show weeks (e.g., "3 weeks")
+ *    - 4-7 weeks: show 1 month + weeks (e.g., "1 month 2 weeks")
+ *    - 8+ weeks: show months if divisible, else weeks (e.g., "2 months" or "9 weeks")
+ *
+ * 4. Months:
+ *    - < 12: show months (e.g., "6 months")
+ *    - 12+: show years if divisible, else months (e.g., "1 year" or "15 months")
+ */
+export const formatSmartDuration = (
+  value: number,
+  unit: TimeUnit,
+  { t, separator = ' ' }: FormatDurationOptions
+): string => {
+  // Format single unit
+  const formatUnit = (val: number, unitType: TimeUnit): string =>
+    `${val} ${t(`common.${unitType}${val > 1 ? 's' : ''}`).toLowerCase()}`;
+
+  // Convert to largest possible unit
+  const convertToLargest = (val: number, fromUnit: TimeUnit): [TimeUnit, number][] => {
+    switch (fromUnit) {
+      case 'hour': {
+        if (val < 24) return [['hour', val]];
+        if (val < 48)
+          return [
+            ['day', Math.floor(val / 24)],
+            ['hour', val % 24],
+          ];
+        const days = Math.floor(val / 24);
+        return convertToLargest(days, 'day');
+      }
+      case 'day': {
+        if (val < 7) return [['day', val]];
+        if (val < 14)
+          return [
+            ['week', Math.floor(val / 7)],
+            ['day', val % 7],
+          ];
+        if (val < 30) return val % 7 === 0 ? [['week', val / 7]] : [['day', val]];
+        const years = Math.floor(val / 365);
+        const remainingDays = val % 365;
+        const months = Math.floor(remainingDays / 30);
+        if (years > 0) {
+          return months > 0
+            ? [
+                ['year', years],
+                ['month', months],
+              ]
+            : [['year', years]];
+        }
+        return months > 0
+          ? [
+              ['month', months],
+              ['week', Math.floor((remainingDays % 30) / 7)],
+            ]
+          : [['week', Math.floor(val / 7)]];
+      }
+      case 'week': {
+        if (val < 4) return [['week', val]];
+        if (val < 8)
+          return [
+            ['month', Math.floor(val / 4)],
+            ['week', val % 4],
+          ];
+        const months = Math.floor(val / 4);
+        return convertToLargest(months, 'month');
+      }
+      case 'month': {
+        const years = Math.floor(val / 12);
+        const months = val % 12;
+        if (years > 0) {
+          if (months > 0) {
+            return [
+              ['year', years],
+              ['month', months],
+            ];
+          }
+          return [['year', years]];
+        }
+        return [['month', val]];
+      }
+      case 'year':
+        return [['year', val]];
+      default:
+        return [[fromUnit, val]];
+    }
+  };
+
+  // Get units and filter out zero values
+  const units = convertToLargest(value, unit).filter(([, val]) => val > 0);
+
+  // Format all units
+  return units.map(([u, val]) => formatUnit(val, u)).join(separator);
+};

package/src/locales/en.tsx

@@ -25,6 +25,7 @@ export default flat({
     rechargeTime: 'Recharge Time',
     submit: 'Submit',
     custom: 'Custom',
+    estimatedDuration: '{duration} est.',
   },
   admin: {
     balances: 'Balances',
@@ -456,6 +457,9 @@ export default flat({
       resume: 'Resume payment collection',
       resumeTip:
         'Are you sure you want to resume collecting payments? Any future invoices for this subscription will resume payment collection.',
+      paymentAddress: 'Payment Address',
+      currentBalance: 'Current Balance',
+      insufficientBalance: 'Insufficient Balance, please add funds',
       cancel: {
         schedule: 'Scheduled to cancel',
         title: 'Cancel subscription',
@@ -648,38 +652,41 @@ export default flat({
       error: 'Delegate failed',
     },
     overdraftProtection: {
-      title: 'Overdraft Protection',
-      setting: 'Overdraft Protection Setting',
-      tip: 'To avoid service interruption due to unpaid invoices, you can enable overdraft protection by staking. Timely payment will not incur additional fees. Please settle your invoices promptly. If your available stake is insufficient or payment is overdue, we will deduct the amount from your stake and charge a service fee.',
+      title: 'SubGuard',
+      setting: 'Set SubGuard',
+      tip: 'To avoid service interruption due to unpaid invoices, you can enable SubGuard by staking. Timely payment will not incur additional fees. Please settle your invoices promptly. If your available stake is insufficient or payment is overdue, we will deduct the amount from your stake and charge a service fee.',
       enabled: 'Enabled',
       disabled: 'Disabled',
       returnRemaining: 'Return Remaining Stake',
       returnRemainingTip:
-        'Once the remaining stake is returned, the overdraft protection will be automatically disabled. Please confirm the action.',
+        'Once the remaining stake is returned, the SubGuard will be automatically disabled. Please confirm the action.',
       applyRemainingSuccess: 'Stake return application successful',
       remaining:
         'Your current remaining stake: {amount} {symbol}, estimated required stake per cycle: {estimateAmount} {symbol}.',
       noRemaining:
-        'No remaining stake available. Please stake at least {estimateAmount} {symbol} as soon as possible to ensure overdraft protection is enabled.',
+        'No remaining stake available. Please stake at least {estimateAmount} {symbol} as soon as possible to ensure SubGuard is enabled.',
       remainingNotEnough:
         'You have unpaid invoices totaling {due} {symbol}. If not paid, your remaining stake will be insufficient to cover the next invoice. Available stake: {unused} {symbol}. Please stake at least {min} {symbol}.',
       due: 'Please pay the outstanding amount first',
-      insufficient: 'Insufficient Stake to cover the next invoice',
-      insufficientTip: 'Insufficient Stake, please stake to ensure overdraft protection is enabled.',
+      insufficient: 'Insufficient Stake to cover the next invoice, please add stake',
+      insufficientTip: 'Insufficient Stake, please stake to ensure SubGuard is enabled.',
       intervals: 'cycles',
       estimatedDuration: '{duration} {unit} est.',
       rule: 'Rule: N * ( P + Fee )',
       ruleTip:
-        'N is the number of cycles, P is the subscription bill amount, Fee is the overdraft protection service fee, the single fee is {gas} {symbol}',
+        'N is the number of cycles, P is the subscription bill amount, Fee is the SubGuard service fee, the single fee is {gas} {symbol}',
       min: 'The amount must be greater or equal to {min} {symbol}',
-      settingSuccess: 'Overdraft protection setting successful',
-      settingError: 'Overdraft protection setting failed',
-      keepStake: 'Not Return',
+      settingSuccess: 'Set SubGuard Successful',
+      settingError: 'Set SubGuard Failed',
+      keepStake: 'Keep Remaining Stake For SubGuard',
       returnStake: 'Return Remaining Stake',
       stake: 'Stake',
       address: 'Staking Address',
       total: 'Total Stake: {total} {symbol}, ',
       disableConfirm: 'You currently have unpaid invoices, please settle your invoices first.',
+      open: 'Enable SubGuard',
+      payerAddress: 'Payer',
+      stakingAddress: 'Staking Address',
     },
     unpaidInvoicesWarning: 'You currently have unpaid invoices, please settle your invoices first.',
     unpaidInvoicesWarningTip: 'You currently have unpaid invoices, please settle your invoices promptly.',

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>