payment-kit 1.18.39 → 1.18.41

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

@@ -22,6 +22,7 @@ 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';
@@ -32,10 +33,11 @@ interface ActionConfig {
   key: string;
   show: boolean;
   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;
@@ -46,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;
     };
@@ -81,6 +83,10 @@ type Props = {
   actionProps?: ActionProps;
   mode?: ActionDisplayMode;
   setUp?: (methods: ActionMethods) => void;
+  includeActions?: string[] | null;
+  excludeActions?: string[] | null;
+  forceShowDetailAction?: boolean;
+  buttonSize?: 'small' | 'medium' | 'large';
 };
 
 SubscriptionActions.defaultProps = {
@@ -94,6 +100,10 @@ SubscriptionActions.defaultProps = {
   mode: 'all-buttons',
   setUp: null,
   showUnsubscribe: true,
+  includeActions: null,
+  excludeActions: null,
+  forceShowDetailAction: false,
+  buttonSize: 'small',
 };
 const fetchExtraActions = async ({
   id,
@@ -144,6 +154,10 @@ export function SubscriptionActionsInner({
   mode,
   setUp,
   showBalanceInfo,
+  includeActions,
+  excludeActions,
+  forceShowDetailAction,
+  buttonSize,
 }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
@@ -153,19 +167,29 @@ 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: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+      ready: showAction('recharge') && !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
     }
   );
 
   const { data: payerValue = {} } = useRequest(
     () => api.get(`/api/subscriptions/${subscription.id}/payer-token`).then((res) => res.data),
     {
-      ready: !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
+      ready: showAction('recharge') && !!(showRecharge && supportRecharge(subscription)) && showBalanceInfo,
     }
   );
 
@@ -187,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],
     }
   );
@@ -359,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',
@@ -367,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,
       },
       {
@@ -376,8 +411,8 @@ 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',
@@ -385,6 +420,7 @@ export function SubscriptionActionsInner({
         label: () => {
           const balanceDisplay = (
             <Stack direction="row" spacing={0.5} alignItems="center">
+              <AddOutlined fontSize="small" />
               {t('customer.recharge.title')}
             </Stack>
           );
@@ -417,23 +453,23 @@ export function SubscriptionActionsInner({
                     )}
                     <Stack spacing={0.5}>
                       <Box display="flex" justifyContent="space-between">
-                        <Typography sx={{ color: 'text.secondary' }}>
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.currentBalance')}
                         </Typography>
-                        <Typography>
+                        <Typography variant="body2">
                           {formattedBalance} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
                       <Box display="flex" justifyContent="space-between">
-                        <Typography sx={{ color: 'text.secondary' }}>
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.nextInvoiceAmount')}
                         </Typography>
-                        <Typography>
+                        <Typography variant="body2">
                           {formattedUpcoming} {subscription.paymentCurrency.symbol}
                         </Typography>
                       </Box>
                       <Box display="flex" justifyContent="space-between">
-                        <Typography sx={{ color: 'text.secondary' }}>
+                        <Typography sx={{ color: 'text.secondary' }} variant="body2">
                           {t('admin.subscription.paymentAddress')}
                         </Typography>
                         <DID did={payerValue?.paymentAddress} responsive={false} compact showAvatar={false} />
@@ -449,12 +485,13 @@ export function SubscriptionActionsInner({
 
           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'
@@ -464,14 +501,15 @@ export function SubscriptionActionsInner({
                   backgroundColor: 'error.main',
                   borderRadius: '50%',
                   position: 'absolute',
-                  top: '-4px',
-                  right: '-4px',
-                  width: '8px',
-                  height: '8px',
+                  top: '3px',
+                  right: '-3px',
+                  width: '6px',
+                  height: '6px',
                   zIndex: 1,
                 },
+                ...(actionProps?.recharge?.sx || {}),
               }
-            : {},
+            : actionProps?.recharge?.sx || {},
       },
       {
         key: 'changePlan',
@@ -481,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',
@@ -495,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,
       },
       {
@@ -537,15 +575,26 @@ 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 detailAction = forceShowDetailAction && (
+      <Button
+        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;
@@ -560,7 +609,8 @@ export function SubscriptionActionsInner({
           href={item.href}
           target={item.target}
           sx={item.sx}
-          size="small">
+          className="action-button"
+          size={buttonSize}>
           {item.tooltip ? (
             <Tooltip title={item.tooltip}>
               <span>{labelContent}</span>
@@ -572,7 +622,14 @@ export function SubscriptionActionsInner({
       );
     };
     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') {
@@ -580,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 (
@@ -682,4 +747,8 @@ SubscriptionActionsInner.defaultProps = {
   actionProps: {},
   mode: 'all-buttons',
   setUp: null,
+  includeActions: null,
+  excludeActions: null,
+  forceShowDetailAction: false,
+  buttonSize: 'small',
 };

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

@@ -3,7 +3,17 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Empty from '@arcblock/ux/lib/Empty';
 import { api, formatPrice, getSubscriptionTimeSummary, useMobile } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
+import {
+  Avatar,
+  AvatarGroup,
+  Box,
+  Button,
+  CircularProgress,
+  Divider,
+  Stack,
+  StackProps,
+  Typography,
+} from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
 import { useRef } from 'react';
@@ -39,8 +49,6 @@ type Props = {
   setHasSubscriptions?: (state: boolean) => void;
 } & Omit<StackProps, 'onChange'>;
 
-const pageSize = 5;
-
 export default function CurrentSubscriptions({
   id,
   status,
@@ -52,9 +60,10 @@ export default function CurrentSubscriptions({
   setHasSubscriptions = () => {},
   ...rest
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { isMobile } = useMobile();
   const listRef = useRef<HTMLDivElement | null>(null);
+  const pageSize = isMobile ? 5 : 10;
 
   const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll<SubscriptionListResponse>(
     (d) => {
@@ -91,54 +100,76 @@ export default function CurrentSubscriptions({
   const hasAnySubscriptions = data.totalCount > 0;
 
   const hasMore = data && data.list?.length < data.count;
-  const size = { width: 48, height: 48 };
-
+  const size = isMobile ? { width: 42, height: 42 } : { width: 44, height: 44 };
   return (
-    <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
+    <Stack direction="column" spacing={2} sx={{ mt: 2, containerType: 'inline-size' }}>
       {data.list?.length > 0 ? (
         <>
           <Stack
             ref={listRef}
-            spacing={2}
             sx={{
               maxHeight: {
                 xs: '100%',
-                md: '500px',
+                md: '700px',
               },
               overflowY: 'auto',
               webkitOverflowScrolling: 'touch',
+              display: 'grid',
+              gridTemplateColumns: {
+                xs: 'repeat(1, 1fr)',
+                md: 'repeat(2, 1fr)',
+              },
+              '@container (max-width: 600px)': {
+                gridTemplateColumns: 'repeat(1, 1fr)',
+              },
+              gap: 2,
             }}>
             {data.list.map((subscription) => {
+              const summary = getSubscriptionTimeSummary(subscription, locale);
+              const subscriptionTime = summary
+                ? t(`admin.subscription.${summary?.action}`, {
+                    date: summary?.time,
+                    prefix: summary?.isToday ? 'at' : 'on',
+                  })
+                : '';
               return (
                 <Stack
                   key={subscription.id}
-                  direction="row"
-                  justifyContent="space-between"
-                  gap={{
-                    xs: 1,
-                    sm: 2,
-                  }}
                   sx={{
-                    padding: 1.5,
-                    backgroundColor: 'grey.50',
+                    padding: 2,
+                    height: '100%',
+                    borderRadius: 1,
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    boxShadow: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    gap: 2,
                     '&:hover': {
-                      backgroundColor: 'grey.100',
+                      backgroundColor: 'grey.50',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },
                   }}
                   flexWrap="wrap">
-                  <Stack direction="column" flex={1} spacing={0.5} {...rest}>
+                  <Stack direction="column" flex={1} spacing={2} {...rest}>
                     <Stack
-                      direction={isMobile ? 'column' : 'row'}
+                      direction="row"
                       spacing={1}
-                      alignItems={isMobile ? 'flex-start' : 'center'}
-                      flexWrap="wrap"
+                      alignItems="flex-start"
                       justifyContent="space-between"
                       onClick={() => onClickSubscription(subscription)}>
-                      <Stack direction="row" spacing={1.5}>
-                        <AvatarGroup max={3}>
-                          {subscription.items.map((item) =>
+                      <Stack direction="row" spacing={1.5} alignItems="center">
+                        <AvatarGroup
+                          max={2}
+                          sx={{
+                            '& .MuiAvatar-colorDefault': {
+                              ...size,
+                              boxSizing: 'border-box',
+                            },
+                          }}>
+                          {subscription.items.slice(0, 2).map((item) =>
                             item.price.product.images.length > 0 ? (
                               // @ts-ignore
                               <Avatar
@@ -155,15 +186,13 @@ export default function CurrentSubscriptions({
                             )
                           )}
                         </AvatarGroup>
-                        <Stack
-                          direction="column"
-                          spacing={0.5}
-                          sx={{
-                            '.MuiTypography-body1': {
-                              fontSize: '16px',
-                            },
-                          }}>
-                          <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
+                        <Stack direction="column" spacing={0.25}>
+                          <SubscriptionDescription
+                            subscription={subscription}
+                            hideSubscription
+                            maxLength={isMobile ? 30 : 40}
+                            variant={isMobile ? 'subtitle2' : 'subtitle1'}
+                          />
                           <SubscriptionStatus
                             subscription={subscription}
                             sx={{ height: 18, width: 'fit-content' }}
@@ -171,40 +200,40 @@ export default function CurrentSubscriptions({
                           />
                         </Stack>
                       </Stack>
-                      <Stack>
-                        <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
-                          {
-                            // @ts-ignore
-                            formatPrice(subscription.items[0].price, subscription.paymentCurrency)
-                          }
-                        </Typography>
-                      </Stack>
                     </Stack>
+
+                    <Divider />
                     <Stack
                       gap={1}
                       justifyContent="space-between"
-                      flexWrap="wrap"
+                      flexWrap="nowrap"
                       sx={{
-                        flexDirection: {
-                          xs: 'column',
-                          lg: 'row',
-                        },
-                        alignItems: {
-                          xs: 'flex-start',
-                          lg: 'center',
-                        },
+                        flexDirection: 'row',
+                        alignItems: 'center',
                       }}>
                       <Box
                         component="div"
                         onClick={() => onClickSubscription(subscription)}
-                        sx={{ display: 'flex', gap: 0.5, flexDirection: isMobile ? 'column' : 'row' }}>
-                        {getSubscriptionTimeSummary(subscription)
-                          .split(',')
-                          .map((x) => (
-                            <Typography key={x} variant="body1" color="text.secondary">
-                              {x}
-                            </Typography>
-                          ))}
+                        sx={{
+                          display: 'flex',
+                          gap: {
+                            xs: 0.5,
+                            md: 1,
+                          },
+                          flexDirection: 'row',
+                          flexWrap: 'wrap',
+                        }}>
+                        <Typography variant={isMobile ? 'subtitle2' : 'subtitle1'} sx={{ whiteSpace: 'nowrap' }}>
+                          {
+                            // @ts-ignore
+                            formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                          }
+                        </Typography>
+                        {subscriptionTime && (
+                          <Typography variant="body2" color="text.secondary">
+                            ({subscriptionTime})
+                          </Typography>
+                        )}
                       </Box>
                       <SubscriptionActions
                         subscription={subscription}
@@ -217,32 +246,81 @@ export default function CurrentSubscriptions({
                         showUnsubscribe={false}
                         showRecharge={!isWillCanceled(subscription)}
                         showBalanceInfo
+                        includeActions={['recharge']}
                         actionProps={{
-                          cancel: {
-                            variant: 'outlined',
-                            color: 'primary',
-                          },
-                          recover: {
-                            variant: 'outlined',
-                            color: 'info',
-                          },
-                          pastDue: {
-                            variant: 'outlined',
+                          recharge: {
+                            variant: 'text',
                             color: 'primary',
+                            sx: {
+                              whiteSpace: 'nowrap',
+                            },
                           },
                         }}
                       />
                     </Stack>
                   </Stack>
+                  <Stack
+                    sx={{
+                      display: 'flex',
+                      justifyContent: 'flex-end',
+                      '.action-button': {
+                        flex: 1,
+                      },
+                    }}>
+                    <SubscriptionActions
+                      subscription={subscription}
+                      onChange={(v) => {
+                        reload();
+                        if (onChange) {
+                          onChange(v);
+                        }
+                      }}
+                      forceShowDetailAction
+                      showUnsubscribe={false}
+                      excludeActions={['recharge']}
+                      actionProps={{
+                        cancel: {
+                          variant: 'outlined',
+                          color: 'primary',
+                        },
+                        recover: {
+                          variant: 'outlined',
+                          color: 'info',
+                        },
+                        pastDue: {
+                          variant: 'outlined',
+                          color: 'primary',
+                        },
+                        detail: {
+                          variant: 'contained',
+                          sx: {
+                            color: 'text.primary',
+
+                            backgroundColor: 'grey.100',
+                            '&:hover': {
+                              backgroundColor: 'grey.200',
+                            },
+                          },
+                        },
+                        menu: {
+                          sx: {
+                            color: 'text.primary',
+                          },
+                        },
+                      }}
+                      mode="menu-only"
+                      buttonSize="medium"
+                    />
+                  </Stack>
                 </Stack>
               );
             })}
-            {hasMore && !isMobile && showLoadingMore && (
-              <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
-                {t('common.loadingMore', { resource: t('admin.subscriptions') })}
-              </Box>
-            )}
           </Stack>
+          {hasMore && !isMobile && showLoadingMore && (
+            <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
+              {t('common.loadingMore', { resource: t('admin.subscriptions') })}
+            </Box>
+          )}
           {isMobile && (
             <Box>
               {hasMore && (