payment-kit 1.18.17 → 1.18.19

package/src/components/customer/link.tsx

@@ -2,16 +2,22 @@ import type { TCustomer } from '@blocklet/payment-types';
 import { Link } from 'react-router-dom';
 
 import { getCustomerAvatar } from '@blocklet/payment-react';
+import DID from '@arcblock/ux/lib/DID';
+import { Box, Typography } from '@mui/material';
 import InfoCard from '../info-card';
 
 export default function CustomerLink({
   customer,
   linked,
   linkTo,
+  size,
+  tooltip,
 }: {
   customer: TCustomer;
   linked?: boolean;
   linkTo?: string;
+  size?: 'default' | 'small';
+  tooltip?: boolean;
 }) {
   if (!customer) {
     return null;
@@ -19,29 +25,63 @@ export default function CustomerLink({
   if (linked) {
     return (
       <Link to={linkTo || `/admin/customers/${customer.id}`}>
-        <InfoCard
-          logo={getCustomerAvatar(
-            customer?.did,
-            customer?.updated_at ? new Date(customer.updated_at).toISOString() : '',
-            48
-          )}
-          name={customer.email}
-          description={`${customer.did.slice(0, 6)}...${customer.did.slice(-6)}`}
-        />
+        <Box sx={{ '.info-card-wrapper': { cursor: 'pointer' }, '.info-card': { minWidth: 0 } }}>
+          {/* @ts-ignore */}
+          <InfoCard
+            logo={getCustomerAvatar(
+              customer?.did,
+              customer?.updated_at ? new Date(customer.updated_at).toISOString() : '',
+              size === 'small' ? 24 : 48
+            )}
+            name={
+              <Typography
+                sx={{ maxWidth: 208, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                className="customer-link-name">
+                {customer.name || customer.email}
+              </Typography>
+            }
+            {...(size === 'small'
+              ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
+              : {
+                  description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
+                  size: 48,
+                })}
+          />
+        </Box>
       </Link>
     );
   }
 
   return (
-    <InfoCard
-      logo={getCustomerAvatar(customer.did, customer.updated_at ? new Date(customer.updated_at).toISOString() : '', 48)}
-      name={customer.email}
-      description={<span style={{ wordBreak: 'break-all' }}>{customer?.did}</span>}
-    />
+    <Box sx={{ '.info-card': { minWidth: 0 } }}>
+      {/* @ts-ignore */}
+      <InfoCard
+        logo={getCustomerAvatar(
+          customer.did,
+          customer.updated_at ? new Date(customer.updated_at).toISOString() : '',
+          size === 'small' ? 24 : 48
+        )}
+        name={
+          <Typography
+            sx={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+            className="customer-link-name">
+            {customer.name || customer.email}
+          </Typography>
+        }
+        {...(size === 'small'
+          ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
+          : {
+              description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
+              size: 48,
+            })}
+      />
+    </Box>
   );
 }
 
 CustomerLink.defaultProps = {
   linked: true,
   linkTo: '',
+  size: 'default',
+  tooltip: true,
 };

package/src/components/customer/overdraft-protection.tsx

@@ -26,7 +26,7 @@ import { useRequest } from 'ahooks';
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { joinURL } from 'ufo';
-import { OpenInNewOutlined } from '@mui/icons-material';
+import { HelpOutline, OpenInNewOutlined } from '@mui/icons-material';
 import Currency from '../currency';
 import { formatSmartDuration, TimeUnit } from '../../libs/dayjs';
 
@@ -228,7 +228,41 @@ export default function OverdraftProtectionDialog({
       maxWidth="sm"
       fullWidth
       className="base-dialog"
-      title={t('customer.overdraftProtection.setting')}
+      title={
+        <Stack direction="row" alignItems="center" spacing={1}>
+          <Typography variant="h6" component="span">
+            {t('customer.overdraftProtection.setting')}
+          </Typography>
+          <Link
+            href="https://www.arcblock.io/content/blog/en/payment-kit-v117-sub-guard#listen-to-the-audio-overview"
+            target="_blank"
+            rel="noopener noreferrer"
+            underline="hover"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 0.5,
+              fontSize: '14px',
+              fontWeight: 'normal',
+              ml: 1,
+              color: 'text.link',
+              '&:hover': { color: 'primary.main' },
+              ...(isMobile ? { fontSize: '12px' } : {}),
+            }}>
+            <Tooltip title={t('customer.overdraftProtection.learnMore')} placement="top">
+              <HelpOutline
+                fontSize="small"
+                sx={{
+                  fontSize: '16px',
+                  color: 'text.secondary',
+                  cursor: 'pointer',
+                  '&:hover': { color: 'primary.main' },
+                }}
+              />
+            </Tooltip>
+          </Link>
+        </Stack>
+      }
       actions={
         <Stack direction="row" spacing={2}>
           <Button variant="outlined" onClick={onCancel}>

package/src/components/info-card.tsx

@@ -1,5 +1,5 @@
 import { getWordBreakStyle } from '@blocklet/payment-react';
-import { Avatar, Stack, SxProps, Typography } from '@mui/material';
+import { Avatar, Stack, SxProps, Typography, Tooltip } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 type Props = {
@@ -11,13 +11,20 @@ type Props = {
   sx?: SxProps;
   className?: string;
   logoName?: string;
+  tooltip?: string | React.ReactNode;
 };
 
 export default function InfoCard(props: Props) {
   const dimensions = { width: props.size, height: props.size, ...props.sx };
   const avatarName = typeof props.name === 'string' ? props.name : props.logo;
-  return (
-    <Stack direction="row" alignItems="center" spacing={1} className={`info-card-wrapper ${props.className}`}>
+
+  const cardContent = (
+    <Stack
+      direction="row"
+      alignItems="center"
+      spacing={1}
+      className={`info-card-wrapper ${props.className}`}
+      sx={{ cursor: props.tooltip ? 'pointer' : 'default' }}>
       {props.logo ? (
         <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
       ) : (
@@ -30,16 +37,56 @@ export default function InfoCard(props: Props) {
         alignItems="flex-start"
         justifyContent="space-around"
         className="info-card"
-        sx={{ wordBreak: getWordBreakStyle(props.name), minWidth: 140 }}>
+        sx={{
+          wordBreak: getWordBreakStyle(props.name),
+          minWidth: 140,
+        }}>
         <Typography variant="body1" color="text.primary" component="div">
           {props.name}
         </Typography>
-        <Typography variant="subtitle1" color="text.secondary">
-          {props.description}
-        </Typography>
+        {props.description && (
+          <Typography variant="subtitle1" color="text.secondary">
+            {props.description}
+          </Typography>
+        )}
       </Stack>
     </Stack>
   );
+
+  if (props.tooltip) {
+    return (
+      <Tooltip
+        title={props.tooltip}
+        placement="top-start"
+        componentsProps={{
+          tooltip: {
+            sx: {
+              bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+              color: (theme) => (theme.palette.mode === 'dark' ? '#ffffff' : theme.palette.text.primary),
+              boxShadow: '0 2px 10px rgba(0, 0, 0, 0.15)',
+              borderRadius: 2,
+              padding: '10px 16px',
+              fontSize: 14,
+              maxWidth: 400,
+              minWidth: 240,
+              wordBreak: 'break-word',
+              border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
+              '& .MuiTooltip-arrow': {
+                color: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                '&::before': {
+                  border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
+                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                },
+              },
+            },
+          },
+        }}>
+        {cardContent}
+      </Tooltip>
+    );
+  }
+
+  return cardContent;
 }
 
 InfoCard.defaultProps = {
@@ -49,4 +96,5 @@ InfoCard.defaultProps = {
   sx: {},
   className: '',
   logoName: '',
+  tooltip: false,
 };

package/src/components/info-row-group.tsx

@@ -0,0 +1,122 @@
+import { Box, Skeleton, SxProps } from '@mui/material';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  Children,
+  cloneElement,
+  isValidElement,
+  ReactElement,
+  useLayoutEffect,
+} from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { InfoRowGroupContext } from '../contexts/info-row';
+
+type InfoRowGroupProps = {
+  children: React.ReactNode;
+  loading?: boolean;
+  skeletonHeight?: number;
+  sx?: SxProps;
+};
+
+function InfoRowGroup({ children, loading = false, skeletonHeight = 24, sx = {} }: InfoRowGroupProps) {
+  const [maxLabelWidth, setMaxLabelWidth] = useState<number>(0);
+  const [measurementStage, setMeasurementStage] = useState<'measuring' | 'complete'>('measuring');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { locale } = useLocaleContext();
+
+  const resetMeasurement = () => {
+    setMeasurementStage('measuring');
+    setMaxLabelWidth(0);
+  };
+
+  useLayoutEffect(() => {
+    if (loading || !containerRef.current) return;
+
+    if (measurementStage === 'measuring' || maxLabelWidth === 0) {
+      const labelElements = containerRef.current.querySelectorAll('.info-row-label');
+
+      if (labelElements.length > 0) {
+        let maxWidth = 0;
+        labelElements.forEach((label) => {
+          const width = (label as HTMLElement).offsetWidth;
+          if (width > maxWidth) {
+            maxWidth = width;
+          }
+        });
+
+        maxWidth += 16;
+
+        if (maxWidth > 0) {
+          setMaxLabelWidth(maxWidth);
+          requestAnimationFrame(() => {
+            setMeasurementStage('complete');
+          });
+        }
+      }
+    }
+  }, [children, loading, measurementStage, locale]); // 添加locale作为依赖项
+
+  useEffect(() => {
+    resetMeasurement();
+  }, [locale]);
+
+  // Create skeleton rows for loading state
+  const renderSkeletons = () => {
+    // Count the number of InfoRow children
+    let count = 0;
+    Children.forEach(children, (child) => {
+      if (isValidElement(child) && child.type && (child.type as any).displayName === 'InfoRow') {
+        count++;
+      }
+    });
+
+    return Array(count)
+      .fill(0)
+      .map((_, index) => (
+        <Box key={`skeleton-row-${count - index}`} sx={{ display: 'flex', gap: 2 }}>
+          <Skeleton width="30%" height={skeletonHeight} />
+          <Skeleton width="65%" height={skeletonHeight} />
+        </Box>
+      ));
+  };
+
+  // Clone children with calculated width
+  const renderChildren = () => {
+    return Children.map(children, (child) => {
+      if (isValidElement(child) && child.type && (child.type as any).displayName === 'InfoRow') {
+        const childProps = {
+          ...child.props,
+          sx: {
+            ...child.props.sx,
+            visibility: measurementStage === 'measuring' ? 'hidden' : 'visible',
+            '.info-row-label': {
+              width: maxLabelWidth > 0 ? `${maxLabelWidth}px` : 'auto',
+              minWidth: maxLabelWidth > 0 ? `${maxLabelWidth}px` : 'auto',
+              whiteSpace: 'nowrap',
+              transition: 'width 0.3s ease-out, min-width 0.3s ease-out',
+            },
+          },
+        };
+        return cloneElement(child as ReactElement, childProps);
+      }
+      return child;
+    });
+  };
+
+  return (
+    <InfoRowGroupContext.Provider value>
+      <Box ref={containerRef} sx={{ ...sx }}>
+        {loading ? renderSkeletons() : renderChildren()}
+      </Box>
+    </InfoRowGroupContext.Provider>
+  );
+}
+
+InfoRowGroup.defaultProps = {
+  loading: false,
+  skeletonHeight: 24,
+  sx: {},
+};
+
+export default InfoRowGroup;

package/src/components/info-row.tsx

@@ -1,8 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Box, Stack, SxProps } from '@mui/material';
+import { useContext } from 'react';
 import type { ReactNode } from 'react';
 import { getWordBreakStyle } from '@blocklet/payment-react';
 import { isEmptyExceptNumber } from '../libs/util';
+import { InfoRowGroupContext } from '../contexts/info-row';
 
 type Props = {
   label: string | ReactNode;
@@ -27,6 +29,7 @@ export default function InfoRow(props: Props) {
   const { t } = useLocaleContext();
   const isNone = isEmptyExceptNumber(props.value);
   const sizes = props.sizes || [1, 3];
+  const inGroup = useContext(InfoRowGroupContext);
   return (
     <Stack
       direction={props.direction || 'row'}
@@ -47,11 +50,18 @@ export default function InfoRow(props: Props) {
           flex={sizes[0]}
           className="info-row-label"
           color="text.primary"
-          fontWeight={500}
           fontSize={14}
           sx={{
             flex: props.direction === 'column' ? 'none' : sizes[0],
             mb: props.direction === 'column' ? 0.5 : 0,
+            ...(inGroup && {
+              flex: 'none',
+              whiteSpace: 'nowrap',
+            }),
+            fontWeight: {
+              xs: 500,
+              md: 400,
+            },
           }}>
           {props.label}
         </Box>
@@ -68,3 +78,6 @@ export default function InfoRow(props: Props) {
     </Stack>
   );
 }
+
+// Add display name for identification
+InfoRow.displayName = 'InfoRow';

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatBNStr, formatTime, Table, useDefaultPageSize } from '@blocklet/payment-react';
+import { api, formatBNStr, formatTime, Table, useDefaultPageSize, useMobile } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentIntentExpanded, TPayoutExpanded } from '@blocklet/payment-types';
 import { Box, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
@@ -64,6 +64,7 @@ CustomerRevenueList.defaultProps = {
 
 export default function CustomerRevenueList({ currency_id, status, customer_id }: ListProps) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile('sm');
 
   const listKey = getListKey({ customer_id });
   const defaultPageSize = useDefaultPageSize(10);
@@ -121,7 +122,11 @@ export default function CustomerRevenueList({ currency_id, status, customer_id }
           };
           // @ts-ignore
           return item?.paymentIntent?.customer ? (
-            <CustomerLink customer={item.paymentIntent.customer} linkTo={`/customer/payout/${item.id}`} />
+            <CustomerLink
+              customer={item.paymentIntent.customer}
+              linkTo={`/customer/payout/${item.id}`}
+              size={isMobile ? 'small' : 'default'}
+            />
           ) : (
             t('common.none')
           );

package/src/components/subscription/items/index.tsx

@@ -123,7 +123,7 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
       },
     },
     mode === 'admin' && {
-      label: '',
+      label: t('common.actions'),
       name: '',
       align: 'center',
       options: {

package/src/components/subscription/metrics.tsx

@@ -6,7 +6,7 @@ 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 { AccountBalanceWalletOutlined, ArrowForward } from '@mui/icons-material';
 import InfoMetric from '../info-metric';
 import SubscriptionStatus from './status';
 
@@ -59,7 +59,12 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
     }
 
     return (
-      <Stack flexDirection="row" alignItems="center" gap={0.5} sx={{ fontSize: '16px', fontWeight: 500 }}>
+      <Stack
+        flexDirection="row"
+        alignItems="center"
+        gap={0.5}
+        sx={{ fontSize: '16px', fontWeight: 500, cursor: 'pointer', '&:hover': { color: 'primary.main' } }}
+        onClick={() => navigate(`/customer/subscription/${subscription.id}/recharge`)}>
         <Avatar
           src={subscription.paymentCurrency?.logo}
           sx={{ width: 16, height: 16 }}
@@ -67,9 +72,7 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
         />
         <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>
+          <Typography sx={{ fontSize: '14px', ml: 0.5 }}>{subscription.paymentCurrency.symbol}</Typography>
         </Box>
       </Stack>
     );
@@ -105,13 +108,18 @@ export default function SubscriptionMetrics({ subscription, showBalance = true }
                     {payerLoading ? <Skeleton width={120} /> : payerValue?.paymentAddress}
                   </Typography>
                 }
+                placement="top"
                 arrow>
-                <InfoOutlined
+                <AccountBalanceWalletOutlined
                   sx={{
                     fontSize: '16px',
                     color: 'text.secondary',
                     cursor: 'pointer',
                     '&:hover': { color: 'primary.main' },
+                    display: {
+                      xs: 'none',
+                      md: 'block',
+                    },
                   }}
                 />
               </Tooltip>

package/src/contexts/info-row.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+// Create shared context for InfoRowGroup that InfoRow can use
+export const InfoRowGroupContext = createContext(false);

package/src/locales/en.tsx

@@ -809,6 +809,7 @@ export default flat({
     overdraftProtection: {
       title: 'SubGuard™',
       setting: 'Set SubGuard™',
+      learnMore: 'Click to learn more about 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',

package/src/locales/zh.tsx

@@ -786,6 +786,7 @@ export default flat({
     overdraftProtection: {
       title: '订阅守护',
       setting: '配置订阅守护',
+      learnMore: '点击了解更多关于订阅守护',
       tip: '为避免因扣费失败中断服务，您可以通过质押开启订阅守护。按时付款不会收取额外费用，请及时付清账单，若可用质押不足或者超期未付，我们将从质押中扣除并收取服务费',
       enabled: '已启用',
       disabled: '未启用',