payment-kit 1.18.38 → 1.18.40

package/scripts/sdk.js

@@ -196,6 +196,32 @@ const checkoutModule = {
     console.log('createCheckoutWithSettingId', checkoutSession);
     return { setting, checkoutSession };
   },
+
+  async createCheckoutWithServiceAction() {
+    const checkoutSession = await payment.checkout.sessions.create({
+      mode: 'subscription',
+      line_items: [{ price_id: 'price_fQFIS12yi0JR3KePLmitjrhA', quantity: 1 }],
+      subscription_data: {
+        service_actions: [
+          {
+            text: {
+              zh: '全链接测试',
+              en: 'Full Link Test',
+            },
+            link: 'https://baidu.com',
+          },
+          {
+            text: {
+              zh: '相对路径访问',
+              en: 'Relative Path Access',
+            },
+            link: '/.well-known/service/user/notifications',
+          },
+        ],
+      },
+    });
+    console.log('createCheckoutWithServiceAction', checkoutSession);
+  },
 };
 
 const paymentModule = {
@@ -515,7 +541,6 @@ const subscriptionModule = {
   },
 };
 
-// 测试模块注册
 const testModules = {
   checkout: checkoutModule,
   payment: paymentModule,
@@ -523,6 +548,7 @@ const testModules = {
   subscription: subscriptionModule,
 };
 
+// 测试入口
 async function runTest() {
   payment.environments.setTestMode(true);
   await testModules.checkout.createBatchSubscriptionWithCustomField();

package/src/components/customer/link.tsx

@@ -2,18 +2,21 @@ import type { TCustomer } from '@blocklet/payment-types';
 import { Link } from 'react-router-dom';
 import UserCard from '@arcblock/ux/lib/UserCard';
 import { getCustomerAvatar } from '@blocklet/payment-react';
+import { InfoType, UserCardProps } from '@arcblock/ux/lib/UserCard/types';
 
 export default function CustomerLink({
   customer,
   linked,
   linkTo,
   size,
+  cardProps,
 }: {
   customer: TCustomer;
   linked?: boolean;
   linkTo?: string;
   size?: 'default' | 'small';
   tooltip?: boolean;
+  cardProps?: UserCardProps;
 }) {
   if (!customer) {
     return null;
@@ -31,6 +34,7 @@ export default function CustomerLink({
       avatarProps={{
         size: size === 'small' ? 24 : 40,
       }}
+      popupInfoType={InfoType.Minimal}
       showDid={size !== 'small'}
       {...(customer.metadata.anonymous === true
         ? {
@@ -45,6 +49,7 @@ export default function CustomerLink({
             },
           }
         : {})}
+      {...cardProps}
     />
   );
   if (linked) {
@@ -59,4 +64,5 @@ CustomerLink.defaultProps = {
   linkTo: '',
   size: 'default',
   tooltip: true,
+  cardProps: {},
 };

package/src/components/info-card.tsx

@@ -41,11 +41,11 @@ export default function InfoCard(props: Props) {
           wordBreak: getWordBreakStyle(props.name),
           minWidth: 140,
         }}>
-        <Typography variant="body1" color="text.primary" component="div">
+        <Typography variant="body2" color="text.primary" component="div">
           {props.name}
         </Typography>
         {props.description && (
-          <Typography variant="subtitle1" color="text.secondary">
+          <Typography variant="subtitle2" color="text.secondary">
             {props.description}
           </Typography>
         )}

package/src/components/info-metric.tsx

@@ -16,7 +16,7 @@ export default function InfoMetric(props: Props) {
   return (
     <>
       <Stack direction="column" alignItems="flex-start">
-        <Typography component="div" variant="body1" mb={1} color="text.primary" sx={{ fontWeight: 500 }}>
+        <Typography component="div" variant="subtitle2" mb={1} color="text.primary">
           {props.label}
           {!!props.tip && (
             <Tooltip title={props.tip}>

package/src/components/metadata/list.tsx

@@ -18,10 +18,12 @@ export default function MetadataList({
   if (isEmpty(data)) {
     return (
       <Box sx={{ textAlign: 'center' }}>
-        <Typography color="text.primary" fontWeight={500}>
+        <Typography variant="subtitle1" color="text.primary">
           {t('common.metadata.empty')}
         </Typography>
-        <Typography color="text.lighter">{t('common.metadata.emptyTip')}</Typography>
+        <Typography variant="body2" color="text.lighter">
+          {t('common.metadata.emptyTip')}
+        </Typography>
         <Button sx={{ color: 'text.link' }} onClick={handleEditMetadata}>
           {t('common.add')}
         </Button>

package/src/components/subscription/description.tsx

@@ -5,17 +5,18 @@ import { Stack, Tooltip, Typography } from '@mui/material';
 
 type Props = {
   subscription: TSubscriptionExpanded;
-  variant?: 'body1' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
+  variant?: 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
   hideSubscription?: boolean;
+  maxLength?: number;
 };
 
-export default function SubscriptionDescription({ subscription, variant, hideSubscription }: Props) {
+export default function SubscriptionDescription({ subscription, variant, hideSubscription, maxLength = 80 }: Props) {
   const { isMobile } = useMobile();
   if (subscription.description) {
     return (
       <Stack direction="row" alignItems="center" spacing={1}>
-        <Typography variant={variant} fontWeight={600} className="subscription-description">
-          <TruncatedText text={subscription.description} maxLength={80} useWidth />
+        <Typography variant={variant} className="subscription-description">
+          <TruncatedText text={subscription.description} maxLength={maxLength} useWidth />
         </Typography>
         {!hideSubscription && !isMobile && (
           <Tooltip title={formatSubscriptionProduct(subscription.items)}>
@@ -27,8 +28,8 @@ export default function SubscriptionDescription({ subscription, variant, hideSub
   }
 
   return (
-    <Typography variant={variant} fontWeight={600}>
-      {formatSubscriptionProduct(subscription.items)}
+    <Typography variant={variant}>
+      <TruncatedText text={formatSubscriptionProduct(subscription.items)} maxLength={maxLength} useWidth />
     </Typography>
   );
 }
@@ -36,4 +37,5 @@ export default function SubscriptionDescription({ subscription, variant, hideSub
 SubscriptionDescription.defaultProps = {
   variant: 'body1',
   hideSubscription: false,
+  maxLength: 80,
 };

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

@@ -10,15 +10,19 @@ import {
   getSubscriptionAction,
   usePaymentContext,
   OverdueInvoicePayment,
+  formatBNStr,
 } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Button, Link, Stack, Tooltip } from '@mui/material';
+import { Button, Link, Stack, Tooltip, Typography, Box, Alert } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, ReactNode } from 'react';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { joinURL } from 'ufo';
+import { BN } from '@ocap/util';
+import DID from '@arcblock/ux/lib/DID';
+import { AddOutlined } from '@mui/icons-material';
 import CustomerCancelForm from './cancel';
 import OverdraftProtectionDialog from '../../customer/overdraft-protection';
 import Actions from '../../actions';
@@ -28,11 +32,12 @@ import { isWillCanceled } from '../../../libs/util';
 interface ActionConfig {
   key: string;
   show: boolean;
-  label: string;
+  label: string | ReactNode | (() => ReactNode);
+  labelText?: string;
   tooltip?: string;
   onClick: (e?: React.MouseEvent) => void;
   variant?: 'text' | 'outlined' | 'contained';
-  color?: 'inherit' | 'primary' | 'secondary' | 'error';
+  color?: 'inherit' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
   sx?: any;
   primary?: boolean;
   component?: any;
@@ -43,8 +48,8 @@ interface ActionConfig {
 
 type ActionProps = {
   [key: string]: {
-    color?: string;
-    variant?: string;
+    color?: 'inherit' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+    variant?: 'text' | 'outlined' | 'contained';
     sx?: {
       [key: string]: any;
     };
@@ -65,6 +70,7 @@ type Props = {
   subscription: TSubscriptionExpanded;
   showExtra?: boolean;
   showRecharge?: boolean;
+  showBalanceInfo?: boolean;
   showOverdraftProtection?:
     | boolean
     | {
@@ -77,11 +83,16 @@ type Props = {
   actionProps?: ActionProps;
   mode?: ActionDisplayMode;
   setUp?: (methods: ActionMethods) => void;
+  includeActions?: string[] | null;
+  excludeActions?: string[] | null;
+  forceShowDetailAction?: boolean;
+  buttonSize?: 'small' | 'medium' | 'large';
 };
 
 SubscriptionActions.defaultProps = {
   showExtra: false,
   showRecharge: false,
+  showBalanceInfo: false,
   showOverdraftProtection: false,
   showDelegation: false,
   onChange: null,
@@ -89,6 +100,10 @@ SubscriptionActions.defaultProps = {
   mode: 'all-buttons',
   setUp: null,
   showUnsubscribe: true,
+  includeActions: null,
+  excludeActions: null,
+  forceShowDetailAction: false,
+  buttonSize: 'small',
 };
 const fetchExtraActions = async ({
   id,
@@ -138,6 +153,11 @@ export function SubscriptionActionsInner({
   actionProps,
   mode,
   setUp,
+  showBalanceInfo,
+  includeActions,
+  excludeActions,
+  forceShowDetailAction,
+  buttonSize,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -147,8 +167,35 @@ export function SubscriptionActionsInner({
   const { checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(subscription.id, true);
   const action = getSubscriptionAction(subs, actionProps ?? {});
 
+  const showAction = (actionName: string) => {
+    if (excludeActions && excludeActions.length > 0) {
+      return !excludeActions.includes(actionName);
+    }
+    if (includeActions && includeActions.length > 0) {
+      return includeActions.includes(actionName);
+    }
+    return true;
+  };
+
   const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
+  const { data: upcoming = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/upcoming`).then((res) => res.data),
+    {
+      ready: showAction('recharge') && !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const { data: payerValue = {} } = useRequest(
+    () => api.get(`/api/subscriptions/${subscription.id}/payer-token`).then((res) => res.data),
+    {
+      ready: showAction('recharge') && !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+    }
+  );
+
+  const isInsufficientBalance =
+    upcoming?.amount && payerValue?.token && new BN(payerValue.token || '0').lt(new BN(upcoming.amount || '0'));
+
   const [state, setState] = useSetState({
     action: '',
     subscription: '',
@@ -164,12 +211,13 @@ export function SubscriptionActionsInner({
     ((typeof showOverdraftProtection === 'boolean' && showOverdraftProtection) ||
       (typeof showOverdraftProtection === 'object' && showOverdraftProtection.show)) &&
     subscription?.paymentMethod?.type === 'arcblock' &&
-    ['active', 'trialing', 'past_due'].includes(subscription?.status);
+    ['active', 'trialing', 'past_due'].includes(subscription?.status) &&
+    showAction('protection');
 
   const { data: delegation = { sufficient: true }, refresh: refreshDelegation } = useRequest(
     () => api.get(`/api/subscriptions/${subscription.id}/delegation`).then((res) => res.data),
     {
-      ready: shouldFetchDelegation,
+      ready: showAction('delegation') && shouldFetchDelegation,
       refreshDeps: [subscription.id, shouldFetchDelegation],
     }
   );
@@ -336,7 +384,17 @@ export function SubscriptionActionsInner({
     const supportUnsubscribe = action?.action === 'cancel' && showUnsubscribe;
     const supportAction = action && (action?.action !== 'cancel' || supportUnsubscribe);
     const supportResume = isWillCanceled(subscription) && action?.action === 'recover';
-    const serviceActions = subscription.service_actions?.filter((x: any) => x?.type !== 'notification') || [];
+    const serviceActions = subscription.service_actions?.filter((x: any) => x?.type !== 'notification') || [
+      {
+        name: 'notification',
+        text: {
+          en: 'Application Details',
+          zh: '应用详情',
+        },
+        link: '/customer/notification',
+        color: 'primary',
+      },
+    ];
     const actionConfigs: ActionConfig[] = [
       {
         key: 'delegation',
@@ -344,8 +402,8 @@ export function SubscriptionActionsInner({
         label: t('customer.delegation.btn'),
         tooltip: t('customer.delegation.title'),
         onClick: handleDelegate,
-        variant: 'outlined',
-        color: 'primary',
+        variant: actionProps?.delegation?.variant || 'outlined',
+        color: actionProps?.delegation?.color || 'primary',
         primary: true,
       },
       {
@@ -353,20 +411,105 @@ export function SubscriptionActionsInner({
         show: shouldFetchOverdraftProtection,
         label: t('customer.overdraftProtection.setting'),
         onClick: () => setState({ openProtection: true, protectionInitValues: null }),
-        variant: 'outlined',
-        color: 'primary',
+        variant: actionProps?.protection?.variant || 'outlined',
+        color: actionProps?.protection?.color || 'primary',
       },
       {
         key: 'recharge',
         show: !!(showRecharge && supportRecharge(subscription)),
-        label: t('customer.recharge.title'),
+        label: () => {
+          const balanceDisplay = (
+            <Stack direction="row" spacing={0.5} alignItems="center">
+              <AddOutlined fontSize="small" />
+              {t('customer.recharge.title')}
+            </Stack>
+          );
+
+          if (showBalanceInfo && subscription.paymentCurrency) {
+            const formattedBalance = formatBNStr(payerValue?.token || '0', subscription.paymentCurrency.decimal);
+            const formattedUpcoming = formatBNStr(upcoming?.amount || '0', subscription.paymentCurrency.decimal);
+
+            return (
+              <Tooltip
+                componentsProps={{
+                  tooltip: {
+                    sx: {
+                      bgcolor: 'background.paper',
+                      color: 'text.primary',
+                      boxShadow: 2,
+                      padding: '10px 16px',
+                      maxWidth: 480,
+                      minWidth: 350,
+                      wordBreak: 'break-word',
+                    },
+                  },
+                }}
+                title={
+                  <Box>
+                    {isInsufficientBalance && (
+                      <Alert severity="error" sx={{ py: 0, mb: 1 }}>
+                        {t('admin.subscription.insufficientBalance')}
+                      </Alert>
+                    )}
+                    <Stack spacing={0.5}>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
+                          {t('admin.subscription.currentBalance')}
+                        </Typography>
+                        <Typography variant="body2">
+                          {formattedBalance} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
+                          {t('admin.subscription.nextInvoiceAmount')}
+                        </Typography>
+                        <Typography variant="body2">
+                          {formattedUpcoming} {subscription.paymentCurrency.symbol}
+                        </Typography>
+                      </Box>
+                      <Box display="flex" justifyContent="space-between">
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
+                          {t('admin.subscription.paymentAddress')}
+                        </Typography>
+                        <DID did={payerValue?.paymentAddress} responsive={false} compact showAvatar={false} />
+                      </Box>
+                    </Stack>
+                  </Box>
+                }
+                placement="top">
+                {balanceDisplay}
+              </Tooltip>
+            );
+          }
+
+          return balanceDisplay;
+        },
+        labelText: t('customer.recharge.title'),
         onClick: (e) => {
           e?.stopPropagation();
           navigate(`/customer/subscription/${subscription.id}/recharge`);
         },
-        variant: 'outlined',
-        color: 'primary',
+        variant: actionProps?.recharge?.variant || 'outlined',
+        color: actionProps?.recharge?.color || 'primary',
         primary: !isWillCanceled(subscription),
+        sx:
+          isInsufficientBalance || payerValue.token === '0'
+            ? {
+                '&::before': {
+                  content: '""',
+                  backgroundColor: 'error.main',
+                  borderRadius: '50%',
+                  position: 'absolute',
+                  top: '3px',
+                  right: '-3px',
+                  width: '6px',
+                  height: '6px',
+                  zIndex: 1,
+                },
+                ...(actionProps?.recharge?.sx || {}),
+              }
+            : actionProps?.recharge?.sx || {},
       },
       {
         key: 'changePlan',
@@ -376,9 +519,9 @@ export function SubscriptionActionsInner({
           e?.stopPropagation();
           navigate(`/customer/subscription/${subscription.id}/change-plan`);
         },
-        variant: 'contained',
-        color: 'primary',
-        sx: action?.sx,
+        variant: actionProps?.changePlan?.variant || 'contained',
+        color: actionProps?.changePlan?.color || 'primary',
+        sx: actionProps?.changePlan?.sx,
       },
       {
         key: 'batchPay',
@@ -390,9 +533,9 @@ export function SubscriptionActionsInner({
             batchPay: true,
           });
         },
-        variant: 'outlined',
-        color: 'error',
-        sx: action?.sx,
+        variant: actionProps?.batchPay?.variant || 'outlined',
+        color: actionProps?.batchPay?.color || 'error',
+        sx: actionProps?.batchPay?.sx,
         primary: true,
       },
       {
@@ -432,38 +575,61 @@ export function SubscriptionActionsInner({
     ];
 
     // 过滤出要显示的操作
-    const visibleActions = actionConfigs.filter((a) => a.show);
+    const visibleActions = actionConfigs.filter((a) => a.show && showAction(a.key));
 
     // 转换为菜单项
     const toMenuItem = (item: any) => ({
-      label: item.label,
+      label: item.labelText || (typeof item.label === 'function' ? item.label() : item.label),
       handler: item.onClick,
       color: item.color,
       divider: item.divider,
     });
-
-    const toButton = (item: ActionConfig) => (
+    const detailAction = forceShowDetailAction && (
       <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
-        )}
+        className="action-button"
+        key="detail"
+        sx={actionProps?.detail?.sx || {}}
+        variant={actionProps?.detail?.variant || 'outlined'}
+        color={actionProps?.detail?.color || 'primary'}
+        onClick={() => navigate(`/customer/subscription/${subscription.id}`)}>
+        {t('customer.subscription.manage')}
       </Button>
     );
+
+    const toButton = (item: ActionConfig) => {
+      const labelContent = typeof item.label === 'function' ? item.label() : item.label;
+
+      return (
+        <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}
+          className="action-button"
+          size={buttonSize}>
+          {item.tooltip ? (
+            <Tooltip title={item.tooltip}>
+              <span>{labelContent}</span>
+            </Tooltip>
+          ) : (
+            labelContent
+          )}
+        </Button>
+      );
+    };
     if (mode === 'menu-only') {
-      return <Actions actions={visibleActions.map(toMenuItem)} variant="outlined" />;
+      return (
+        <>
+          {detailAction}
+          {visibleActions.length > 0 && (
+            <Actions actions={visibleActions.map(toMenuItem)} variant="outlined" sx={actionProps?.menu?.sx || {}} />
+          )}
+        </>
+      );
     }
 
     if (mode === 'primary-buttons') {
@@ -471,13 +637,21 @@ export function SubscriptionActionsInner({
       const menuItems = visibleActions.filter((a) => !a.primary);
       return (
         <>
+          {detailAction}
           {primaryButtons.map(toButton)}
-          {menuItems.length > 0 && <Actions actions={menuItems.map(toMenuItem)} variant="outlined" />}
+          {menuItems.length > 0 && (
+            <Actions actions={menuItems.map(toMenuItem)} variant="outlined" sx={actionProps?.menu?.sx || {}} />
+          )}
         </>
       );
     }
 
-    return <>{visibleActions.map(toButton)}</>;
+    return (
+      <>
+        {detailAction}
+        {visibleActions.map(toButton)}
+      </>
+    );
   };
 
   return (
@@ -566,10 +740,15 @@ SubscriptionActionsInner.defaultProps = {
   showExtra: false,
   showRecharge: false,
   showOverdraftProtection: false,
+  showBalanceInfo: false,
   showDelegation: false,
   showUnsubscribe: true,
   onChange: null,
   actionProps: {},
   mode: 'all-buttons',
   setUp: null,
+  includeActions: null,
+  excludeActions: null,
+  forceShowDetailAction: false,
+  buttonSize: 'small',
 };