payment-kit 1.17.2 → 1.17.4

package/src/components/subscription/portal/actions.tsx

@@ -14,7 +14,7 @@ import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Link, Stack, Tooltip } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
@@ -23,6 +23,22 @@ import OverdraftProtectionDialog from '../../customer/overdraft-protection';
 import Actions from '../../actions';
 import { useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 
+interface ActionConfig {
+  key: string;
+  show: boolean;
+  label: string;
+  tooltip?: string;
+  onClick: (e?: React.MouseEvent) => void;
+  variant?: 'text' | 'outlined' | 'contained';
+  color?: 'inherit' | 'primary' | 'secondary' | 'error';
+  sx?: any;
+  primary?: boolean;
+  component?: any;
+  href?: string;
+  target?: string;
+  divider?: boolean;
+}
+
 type ActionProps = {
   [key: string]: {
     color?: string;
@@ -33,6 +49,15 @@ type ActionProps = {
     text?: string;
   };
 };
+export interface ProtectionInitValues {
+  enabled?: boolean;
+  return_stake?: boolean;
+}
+export interface ActionMethods {
+  openOverdraftProtection: (initValues?: ProtectionInitValues) => void;
+}
+
+export type ActionDisplayMode = 'all-buttons' | 'primary-buttons' | 'menu-only';
 
 type Props = {
   subscription: TSubscriptionExpanded;
@@ -45,9 +70,11 @@ type Props = {
         onChange: () => any | Promise<any>;
       };
   showDelegation?: boolean;
+  showUnsubscribe?: boolean;
   onChange?: (action?: string) => any | Promise<any>;
   actionProps?: ActionProps;
-  mode?: 'menu' | 'btn';
+  mode?: ActionDisplayMode;
+  setUp?: (methods: ActionMethods) => void;
 };
 
 SubscriptionActions.defaultProps = {
@@ -57,7 +84,9 @@ SubscriptionActions.defaultProps = {
   showDelegation: false,
   onChange: null,
   actionProps: {},
-  mode: 'btn',
+  mode: 'all-buttons',
+  setUp: null,
+  showUnsubscribe: true,
 };
 const fetchExtraActions = async ({
   id,
@@ -102,9 +131,11 @@ export function SubscriptionActionsInner({
   showRecharge,
   showOverdraftProtection,
   showDelegation,
+  showUnsubscribe,
   onChange,
   actionProps,
   mode,
+  setUp,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -122,6 +153,7 @@ export function SubscriptionActionsInner({
     loading: false,
     openProtection: false,
     protectionLoading: false,
+    protectionInitValues: null,
   });
 
   const shouldFetchDelegation = showDelegation && ['active', 'trialing', 'past_due'].includes(subscription?.status);
@@ -146,6 +178,19 @@ export function SubscriptionActionsInner({
       refreshDeps: [subscription.id, shouldFetchOverdraftProtection],
     });
 
+  useEffect(() => {
+    if (setUp) {
+      setUp({
+        openOverdraftProtection: (initValues?: ProtectionInitValues) =>
+          setState({
+            openProtection: true,
+            // @ts-ignore
+            protectionInitValues: initValues,
+          }),
+      });
+    }
+  }, [setUp]);
+
   const handleCancel = async () => {
     try {
       const result = await checkUnpaidInvoices();
@@ -273,162 +318,148 @@ export function SubscriptionActionsInner({
   };
 
   const renderActions = () => {
-    if (mode === 'menu') {
-      const actions = [
-        showDelegation &&
-          noDelegation && {
-            label: t('customer.delegation.btn'),
-            handler: handleDelegate,
-            color: 'primary',
-            divider: true,
-          },
-        shouldFetchOverdraftProtection && {
-          label: t('customer.overdraftProtection.title'),
-          handler: () => setState({ openProtection: true }),
-          color: 'primary',
+    const supportUnsubscribe = action?.action === 'cancel' && showUnsubscribe;
+    const supportAction = action && (action?.action !== 'cancel' || supportUnsubscribe);
+
+    const serviceActions = subscription.service_actions?.filter((x: any) => x?.type !== 'notification') || [];
+    const actionConfigs: ActionConfig[] = [
+      {
+        key: 'delegation',
+        show: showDelegation && noDelegation,
+        label: t('customer.delegation.btn'),
+        tooltip: t('customer.delegation.title'),
+        onClick: handleDelegate,
+        variant: 'outlined',
+        color: 'primary',
+        primary: true,
+      },
+      {
+        key: 'protection',
+        show: shouldFetchOverdraftProtection,
+        label: t('customer.overdraftProtection.setting'),
+        onClick: () => setState({ openProtection: true, protectionInitValues: null }),
+        variant: 'outlined',
+        color: 'primary',
+      },
+      {
+        key: 'recharge',
+        show: !!(showRecharge && supportRecharge(subscription)),
+        label: t('customer.recharge.title'),
+        onClick: (e) => {
+          e?.stopPropagation();
+          navigate(`/customer/subscription/${subscription.id}/recharge`);
         },
-        showRecharge &&
-          supportRecharge(subscription) && {
-            label: t('customer.recharge.title'),
-            handler: () => navigate(`/customer/subscription/${subscription.id}/recharge`),
-            color: 'primary',
-            divider: true,
-          },
-        !extraActions?.batchPay &&
-          action && {
-            label: action?.text || t(`payment.customer.${action.action}.button`),
-            handler: () => {
-              if (action.action === 'pastDue') {
-                navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
-              } else {
-                setState({
-                  action: action.action,
-                  subscription: subscription.id,
-                });
-              }
-            },
-            color: action.color as any,
-          },
-        extraActions?.changePlan && {
-          label: action?.text || t('payment.customer.changePlan.button'),
-          handler: () => navigate(`/customer/subscription/${subscription.id}/change-plan`),
-          color: 'primary',
+        variant: 'outlined',
+        color: 'primary',
+        primary: true,
+      },
+      {
+        key: 'changePlan',
+        show: !!extraActions?.changePlan,
+        label: action?.text || t('payment.customer.changePlan.button'),
+        onClick: (e) => {
+          e?.stopPropagation();
+          navigate(`/customer/subscription/${subscription.id}/change-plan`);
+        },
+        variant: 'contained',
+        color: 'primary',
+        sx: action?.sx,
+      },
+      {
+        key: 'batchPay',
+        show: !!extraActions?.batchPay,
+        label: action?.text || t('admin.subscription.batchPay.button'),
+        onClick: (e) => {
+          e?.stopPropagation();
+          navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions?.batchPay}`);
         },
-        !!extraActions?.batchPay && {
-          label: action?.text || t('admin.subscription.batchPay.button'),
-          handler: () =>
-            navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`),
-          color: 'error',
+        variant: 'outlined',
+        color: 'error',
+        sx: action?.sx,
+        primary: true,
+      },
+      {
+        key: 'mainAction',
+        show: !!(!extraActions?.batchPay && supportAction),
+        label: action?.text || t(`payment.customer.${action?.action}.button`),
+        onClick: (e) => {
+          e?.stopPropagation();
+          if (action?.action === 'pastDue') {
+            navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
+          } else {
+            // @ts-ignore
+            setState({ action: action?.action, subscription: subscription.id });
+          }
         },
-        ...(subscription.service_actions
-          ?.filter((x: any) => x?.type !== 'notification')
-          .map((x) => ({
-            label: x.text[locale] || x.text.en || x.name,
-            handler: () => {
-              window.open(x.link, '_blank');
-            },
-            color: x?.color || 'primary',
-          })) || []),
-      ].filter(Boolean);
+        // @ts-ignore
+        variant: action?.variant || 'outlined',
+        // @ts-ignore
+        color: action?.color || 'primary',
+        sx: action?.sx,
+        divider: serviceActions.length > 0,
+      },
+      // @ts-ignore
+      ...serviceActions.map((x) => ({
+        key: x.name,
+        show: true,
+        label: x.text[locale] || x.text.en || x.name,
+        onClick: () => window.open(x.link, '_blank'),
+        variant: x?.variant || 'contained',
+        color: x?.color || 'primary',
+        component: Link,
+        href: x.link,
+        target: '_blank',
+        sx: { textDecoration: 'none !important' },
+      })),
+    ];
 
-      return (
-        <Actions
-          // @ts-ignore
-          actions={actions}
-        />
-      );
-    }
-    return (
-      <>
-        {showDelegation && noDelegation && (
-          <Tooltip title={t('customer.delegation.title')}>
-            <Button variant="outlined" color="primary" onClick={handleDelegate}>
-              {t('customer.delegation.btn')}
-            </Button>
-          </Tooltip>
-        )}
+    // 过滤出要显示的操作
+    const visibleActions = actionConfigs.filter((a) => a.show);
 
-        {shouldFetchOverdraftProtection && (
-          <Button variant="outlined" color="primary" onClick={() => setState({ openProtection: true })}>
-            {t('customer.overdraftProtection.title')}
-          </Button>
-        )}
+    // 转换为菜单项
+    const toMenuItem = (item: any) => ({
+      label: item.label,
+      handler: item.onClick,
+      color: item.color,
+      divider: item.divider,
+    });
 
-        {showRecharge && supportRecharge(subscription) && (
-          <Button
-            variant="outlined"
-            color="primary"
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate(`/customer/subscription/${subscription.id}/recharge`);
-            }}>
-            {t('customer.recharge.title')}
-          </Button>
-        )}
-        {!extraActions?.batchPay && action && (
-          <Button
-            variant={action.variant as any}
-            color={action.color as any}
-            size="small"
-            sx={action?.sx as any}
-            onClick={(e) => {
-              e.stopPropagation();
-              if (action.action === 'pastDue') {
-                navigate(`/customer/invoice/past-due?subscription=${subscription.id}`);
-              } else {
-                setState({
-                  action: action.action,
-                  subscription: subscription.id,
-                });
-              }
-            }}>
-            {action?.text || t(`payment.customer.${action.action}.button`)}
-          </Button>
-        )}
-        {extraActions?.changePlan && (
-          <Button
-            variant="contained"
-            color="primary"
-            size="small"
-            sx={action?.sx as any}
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate(`/customer/subscription/${subscription.id}/change-plan`);
-            }}>
-            {action?.text || t('payment.customer.changePlan.button')}
-          </Button>
-        )}
-        {!!extraActions?.batchPay && (
-          <Button
-            variant="outlined"
-            color="error"
-            size="small"
-            sx={action?.sx as any}
-            onClick={(e) => {
-              e.stopPropagation();
-              navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`);
-            }}>
-            {action?.text || t('admin.subscription.batchPay.button')}
-          </Button>
+    const toButton = (item: ActionConfig) => (
+      <Button
+        key={item.key}
+        variant={item.variant}
+        color={item.color}
+        onClick={item.onClick}
+        component={item.component}
+        href={item.href}
+        target={item.target}
+        sx={item.sx}
+        size="small">
+        {item.tooltip ? (
+          <Tooltip title={item.tooltip}>
+            <span>{item.label}</span>
+          </Tooltip>
+        ) : (
+          item.label
         )}
-        {subscription.service_actions
-          ?.filter((x: any) => x?.type !== 'notification')
-          .map((x) => (
-            // @ts-ignore
-            <Button
-              component={Link}
-              key={x.name}
-              variant={x?.variant || 'contained'}
-              color={x?.color || 'primary'}
-              href={x.link}
-              size="small"
-              target="_blank"
-              sx={{ textDecoration: 'none !important' }}>
-              {x.text[locale] || x.text.en || x.name}
-            </Button>
-          ))}
-      </>
+      </Button>
     );
+    if (mode === 'menu-only') {
+      return <Actions actions={visibleActions.map(toMenuItem)} />;
+    }
+
+    if (mode === 'primary-buttons') {
+      const primaryButtons = visibleActions.filter((a) => a.primary);
+      const menuItems = visibleActions.filter((a) => !a.primary);
+      return (
+        <>
+          {primaryButtons.map(toButton)}
+          {menuItems.length > 0 && <Actions actions={menuItems.map(toMenuItem)} />}
+        </>
+      );
+    }
+
+    return <>{visibleActions.map(toButton)}</>;
   };
 
   return (
@@ -466,11 +497,13 @@ export function SubscriptionActionsInner({
           value={overdraftProtection}
           onSave={handleOverdraftProtection}
           open={state.openProtection}
-          paymentAddress={subscription.overdraft_protection?.payment_details?.arcblock?.payer}
+          payerAddress={subscription.overdraft_protection?.payment_details?.arcblock?.payer}
+          stakingAddress={subscription.overdraft_protection?.payment_details?.arcblock?.staking?.address}
           currency={subscription.paymentCurrency}
           subscription={subscription}
           loading={state.protectionLoading}
           onCancel={() => setState({ openProtection: false })}
+          initValues={state.protectionInitValues}
         />
       )}
     </Stack>
@@ -500,7 +533,9 @@ SubscriptionActionsInner.defaultProps = {
   showRecharge: false,
   showOverdraftProtection: false,
   showDelegation: false,
+  showUnsubscribe: true,
   onChange: null,
   actionProps: {},
-  mode: 'btn',
+  mode: 'all-buttons',
+  setUp: null,
 };

package/src/components/subscription/portal/list.tsx

@@ -192,6 +192,7 @@ export default function CurrentSubscriptions({
                             onChange(v);
                           }
                         }}
+                        showUnsubscribe={false}
                         showRecharge
                         actionProps={{
                           cancel: {

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.',