payment-kit 1.17.2 → 1.17.3

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,
+};

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: {