payment-kit 1.18.38 → 1.18.40

package/src/pages/admin/products/prices/detail.tsx

@@ -161,11 +161,7 @@ export default function PriceDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/products/pricing-tables/detail.tsx

@@ -157,11 +157,7 @@ export default function PricingTableDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/products/products/detail.tsx

@@ -197,11 +197,7 @@ export default function ProductDetail(props: { id: string }) {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/admin/settings/payment-methods/index.tsx

@@ -421,7 +421,7 @@ export default function PaymentMethods() {
       {Object.keys(groups).map((x) => (
         <Box key={x} mt={3}>
           <Stack direction="row" alignItems="center" mb={1} flexWrap="wrap" gap={1}>
-            <Typography variant="h6" sx={{ textTransform: 'uppercase' }}>
+            <Typography variant="subtitle2" sx={{ textTransform: 'uppercase' }}>
               {x}
             </Typography>
           </Stack>

package/src/pages/customer/index.tsx

@@ -29,6 +29,7 @@ import {
   Tooltip,
   Typography,
   Alert,
+  Divider,
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled } from '@mui/system';
@@ -58,7 +59,6 @@ const CurrencyCard = memo(
     label,
     data,
     currency,
-    type,
     icon,
   }: {
     label: string;
@@ -72,21 +72,10 @@ const CurrencyCard = memo(
       payment_method_id: string;
       symbol: string;
     };
-    type: 'balance' | 'spent' | 'stake' | 'refund' | 'due';
   }) => {
-    const navigate = useNavigate();
-    const { settings } = usePaymentContext();
-    const method = settings?.paymentMethods?.find((m) => m.id === currency.payment_method_id);
-    const { t } = useLocaleContext();
     const safeData = data || {};
     const value = formatBNStr(safeData[currency?.id], currency?.decimal, 6, true);
 
-    const handleCardClick = () => {
-      if (type === 'balance' && currency?.id) {
-        navigate(`/customer/recharge/${currency.id}`);
-      }
-    };
-
     return (
       <Box
         sx={{
@@ -94,7 +83,7 @@ const CurrencyCard = memo(
           position: 'relative',
           height: '100%',
           display: 'flex',
-          flexDirection: 'column',
+          flexDirection: 'row',
           justifyContent: 'space-between',
           containerType: 'inline-size',
         }}>
@@ -105,45 +94,9 @@ const CurrencyCard = memo(
           {icon}
           {label}
         </Typography>
-        <Typography variant="h3" gutterBottom sx={{ color: 'text.primary', whiteSpace: 'nowrap' }}>
+        <Typography variant="body1" gutterBottom sx={{ color: 'text.primary', whiteSpace: 'nowrap' }}>
           {value} {currency.symbol}
         </Typography>
-        {type === 'balance' && method?.type === 'arcblock' && (
-          <Tooltip title={t('customer.recharge.rechargeTooltip')} arrow placement="top">
-            <Box
-              onClick={handleCardClick}
-              sx={{
-                position: 'absolute',
-                top: 0,
-                right: '12px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '50%',
-                padding: '4px',
-                zIndex: 1,
-                cursor: 'pointer',
-                color: 'text.secondary',
-                '&:hover': {
-                  color: 'text.link',
-                },
-                '.recharge-title': {
-                  '@container (max-width: 230px)': {
-                    display: 'none',
-                  },
-                  '@container (min-width: 231px)': {
-                    display: 'inline-block',
-                  },
-                },
-              }}>
-              <AddOutlined fontSize="small" />
-
-              <Typography variant="body2" className="recharge-title">
-                {t('customer.recharge.title')}
-              </Typography>
-            </Box>
-          </Tooltip>
-        )}
       </Box>
     );
   }
@@ -207,27 +160,6 @@ const isCardVisible = (type: string, config: any, data: any, currency: any, meth
   return config.alwaysShow || hasSummaryValue;
 };
 
-const getCardVisibility = (currency: any, data: any, method: any) => {
-  return Object.entries(CARD_CONFIG).reduce(
-    (acc, [type, config]) => {
-      if (isCardVisible(type, config, data, currency, method)) {
-        acc.visibleCards.push(type as CardType);
-      }
-      return acc;
-    },
-    { visibleCards: [] as CardType[] }
-  );
-};
-
-// 计算最大卡片数量
-const calculateMaxCardCount = (currencies: any[], data: any, settings: any) => {
-  return currencies.reduce((maxCount, currency) => {
-    const method = settings?.paymentMethods?.find((m: any) => m.id === currency.payment_method_id);
-    const { visibleCards } = getCardVisibility(currency, data, method);
-    return Math.max(maxCount, visibleCards.length);
-  }, 0);
-};
-
 const getCardIcon = (type: CardType) => {
   const iconMap = {
     balance: <AccountBalanceWalletOutlined color="success" fontSize="small" />,
@@ -327,6 +259,12 @@ export default function CustomerHome() {
     );
   }
 
+  const handleRecharge = (currency: any) => {
+    if (currency?.id) {
+      navigate(`/customer/recharge/${currency.id}`);
+    }
+  };
+
   const onToggleActive = (e: SelectChangeEvent) => {
     setSubscriptionLoading(true);
     setState({ onlyActive: e.target.value === 'active' });
@@ -339,7 +277,7 @@ export default function CustomerHome() {
     loadingCard || !hasSubscriptions ? null : (
       <Box className="base-card section section-subscription">
         <Box className="section-header">
-          <Typography variant="h3">{t('admin.subscription.name')}</Typography>
+          <Typography variant="h3">{t('customer.subscription.title')}</Typography>
           <Stack direction="row" spacing={1} alignItems="center">
             <NotificationPreference />
             {subscriptionStatus && (
@@ -391,24 +329,28 @@ export default function CustomerHome() {
       </Box>
     );
 
-  const maxCardCount = calculateMaxCardCount(currencies, data, settings);
-
-  const responsiveColumns = {
-    xs: Math.min(2, maxCardCount),
-    sm: Math.min(3, maxCardCount),
-    md: maxCardCount,
-  };
-
   const SummaryCard = loadingCard ? (
     <SummaryCardSkeleton />
   ) : (
-    <Box className="base-card section section-summary">
+    <Box className="base-card section section-summary" sx={{ containerType: 'inline-size' }}>
       {data?.summary && (
         <>
           <Box className="section-header">
             <Typography variant="h3">{t('admin.customer.summary.stats')}</Typography>
           </Box>
-          <Stack gap={2} mt={2}>
+          <Stack
+            gap={2}
+            mt={2}
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: {
+                xs: 'repeat(1, 1fr)',
+                md: 'repeat(2, 1fr)',
+              },
+              '@container (max-width: 600px)': {
+                gridTemplateColumns: 'repeat(1, 1fr)',
+              },
+            }}>
             {currencies.map((c) => {
               const method = settings?.paymentMethods?.find((m) => m.id === c.payment_method_id);
               if (method?.type !== 'arcblock') {
@@ -418,47 +360,45 @@ export default function CustomerHome() {
                 <Stack
                   key={c.id}
                   sx={{
-                    pb: 2,
-                    borderBottom: '1px solid',
+                    borderRadius: 1,
+                    p: 2,
+                    gap: 2,
+                    border: '1px solid',
                     borderColor: 'grey.100',
-                    '&:last-child': { borderBottom: 'none', pb: 0 },
+                    boxShadow: 1,
                   }}>
-                  <Box alignItems="center" display="flex" gap={1}>
-                    <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
-                    <Typography
-                      variant="h5"
-                      component="div"
-                      sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
-                      {c?.symbol}
-                    </Typography>
-                    <Typography sx={{ fontSize: 12 }} color="text.lighter">
-                      {c?.methodName}
-                    </Typography>
-                  </Box>
+                  <Stack flexDirection="row" justifyContent="space-between">
+                    <Box alignItems="center" display="flex" gap={1}>
+                      <Avatar src={c?.logo} alt={c?.symbol} sx={{ width: 18, height: 18 }} />
+                      <Typography
+                        variant="h5"
+                        component="div"
+                        sx={{ fontSize: '16px', color: 'text.primary', fontWeight: '500' }}>
+                        {c?.symbol}
+                      </Typography>
+                      <Typography sx={{ fontSize: 12 }} color="text.lighter">
+                        {c?.methodName}
+                      </Typography>
+                    </Box>
+
+                    {method?.type === 'arcblock' && (
+                      <Tooltip title={t('customer.recharge.rechargeTooltip')} arrow placement="top">
+                        <Button onClick={() => handleRecharge(c)} variant="text" color="primary" size="small">
+                          <AddOutlined fontSize="small" />
+                          <Typography variant="body2" className="recharge-title">
+                            {t('customer.recharge.title')}
+                          </Typography>
+                        </Button>
+                      </Tooltip>
+                    )}
+                  </Stack>
+                  <Divider />
+
                   <Stack
                     className="section-body"
-                    flexDirection="row"
                     sx={{
-                      gap: 3,
+                      gap: 1,
                       mt: 1.5,
-                      flexWrap: 'wrap',
-                      position: 'relative',
-                      display: 'grid',
-                      gridTemplateColumns: {
-                        xs: `repeat(${responsiveColumns.xs}, 1fr)`,
-                        sm: `repeat(${responsiveColumns.sm}, 1fr)`,
-                        md: `repeat(${responsiveColumns.md}, 1fr)`,
-                      },
-                      '&::after': {
-                        content: '""',
-                        position: 'absolute',
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        width: '1px',
-                        backgroundColor: 'background.paper',
-                        zIndex: 1,
-                      },
                     }}>
                     {/* 使用配置渲染卡片 */}
                     {Object.entries(CARD_CONFIG).map(([type, config]) => {
@@ -472,28 +412,11 @@ export default function CustomerHome() {
                           className="card-item"
                           sx={{
                             position: 'relative',
-                            '&::after': {
-                              content: '""',
-                              position: 'absolute',
-                              right: 0,
-                              top: 0,
-                              bottom: 0,
-                              width: '1px',
-                              backgroundColor: 'grey.100',
-                              zIndex: 1,
-                            },
-                            '&:has(+ .placeholder)::after': {
-                              display: 'none',
-                            },
-                            '&:last-child::after': {
-                              display: 'none',
-                            },
                           }}>
                           <CurrencyCard
                             label={t(`admin.customer.summary.${type}`)}
                             data={data?.summary?.[config.key] || emptyObject}
                             currency={c}
-                            type={type as CardType}
                             icon={getCardIcon(type as CardType)}
                           />
                         </Box>
@@ -601,8 +524,11 @@ export default function CustomerHome() {
       )}
       <Root>
         {SummaryCard}
+        <Divider />
         {SubscriptionCard}
+        <Divider />
         {InvoiceCard}
+        <Divider />
         {RevenueCard}
         {/* {DetailCard} */}
       </Root>
@@ -623,6 +549,11 @@ const Content = styled(Stack)`
   .section {
     height: fit-content;
   }
+  .base-card {
+    border: none;
+    padding: 0;
+    box-shadow: none;
+  }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
     padding: 0px;
     .base-card {
@@ -634,18 +565,16 @@ const Content = styled(Stack)`
 
 const Root = styled(Stack)`
   gap: 24px;
+  display: flex;
+  flex-direction: column;
   @media (max-width: ${({ theme }) => theme.breakpoints.values.xl}px) {
     padding: 0px;
-    gap: 0;
     .base-card {
       border: none;
       box-shadow: none;
       padding-left: 0;
       padding-right: 0;
     }
-    .section-header h3 {
-      font-size: 18px;
-    }
     .section-summary {
       padding-top: 0;
     }

package/src/pages/customer/payout/detail.tsx

@@ -7,7 +7,6 @@ import {
   api,
   formatBNStr,
   formatTime,
-  getCustomerAvatar,
   getPayoutStatusColor,
   getUserProfileLink,
   useMobile,
@@ -19,13 +18,11 @@ import { styled } from '@mui/system';
 import { useRequest } from 'ahooks';
 
 import { useParams } from 'react-router-dom';
-import DID from '@arcblock/ux/lib/DID';
 import InfoMetric from '../../../components/info-metric';
 import InfoRow from '../../../components/info-row';
 import SectionHeader from '../../../components/section/header';
 import { goBackOrFallback } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
-import InfoCard from '../../../components/info-card';
 import InfoRowGroup from '../../../components/info-row-group';
 
 const fetchData = (
@@ -134,11 +131,7 @@ export default function PayoutDetail() {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,
@@ -153,47 +146,42 @@ export default function PayoutDetail() {
             <InfoMetric
               label={t('customer.payout.payer')}
               value={
-                <InfoCard
-                  logo={getCustomerAvatar(
-                    paymentIntent?.customer?.did,
-                    paymentIntent?.customer?.updated_at
-                      ? new Date(paymentIntent?.customer?.updated_at).toISOString()
-                      : '',
-                    48
-                  )}
-                  logoName={paymentIntent?.customer?.metadata?.anonymous ? '' : paymentIntent?.customer?.name}
-                  name={
-                    <Typography
-                      variant="subtitle2"
-                      sx={{
-                        ...(isAnonymousPayer
-                          ? {}
-                          : {
-                              cursor: 'pointer',
-                              '&:hover': {
-                                color: 'text.link',
-                              },
-                            }),
-                      }}
-                      onClick={() => {
-                        if (isAnonymousPayer) {
-                          return;
-                        }
-                        const url = getUserProfileLink(paymentIntent?.customer?.did, locale);
-                        window.open(url, '_blank');
-                      }}>
-                      {paymentIntent?.customer?.name}
-                      {paymentIntent?.customer?.email ? ` (${paymentIntent?.customer?.email})` : ''}
-                    </Typography>
-                  }
-                  description={
-                    <DID
-                      did={paymentIntent?.customer?.did}
-                      {...(isMobile ? { responsive: false, compact: true } : {})}
-                    />
-                  }
-                  size={40}
-                  variant="rounded"
+                <CustomerLink
+                  customer={paymentIntent.customer}
+                  cardProps={{
+                    onAvatarClick: () => {
+                      if (isAnonymousPayer) {
+                        return;
+                      }
+                      window.open(getUserProfileLink(paymentIntent?.customer?.did, locale), '_blank');
+                    },
+                    renderName: (user) => {
+                      return (
+                        <Typography
+                          variant="subtitle1"
+                          sx={{
+                            ...(isAnonymousPayer
+                              ? {}
+                              : {
+                                  cursor: 'pointer',
+                                  '&:hover': {
+                                    color: 'text.link',
+                                  },
+                                }),
+                          }}
+                          onClick={() => {
+                            if (isAnonymousPayer) {
+                              return;
+                            }
+                            const url = getUserProfileLink(user?.did, locale);
+                            window.open(url, '_blank');
+                          }}>
+                          {user.fullName}
+                        </Typography>
+                      );
+                    },
+                  }}
+                  linked={false}
                 />
               }
               divider

package/src/pages/customer/subscription/change-payment.tsx

@@ -22,7 +22,6 @@ import {
 import type { TCustomer, TPaymentCurrency, TPaymentMethod, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, CircularProgress, Stack, Typography } from '@mui/material';
-import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import pWaitFor from 'p-wait-for';
 import { useEffect, useState } from 'react';
@@ -221,7 +220,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
   };
 
   return (
-    <Root direction="column" spacing={4} sx={{ maxWidth: '540px' }}>
+    <Stack direction="column" spacing={4} sx={{ maxWidth: '540px' }}>
       <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
         <Stack
           direction="row"
@@ -307,7 +306,7 @@ function CustomerSubscriptionChangePayment({ subscription, customer, onComplete
           returnUrl={window.location.href.replace(/\/[^/]+$/, '')}
         />
       )}
-    </Root>
+    </Stack>
   );
 }
 
@@ -363,35 +362,3 @@ export default function DataWrapper() {
 
   return <FormWrapper subscription={data.subscription} customer={data.customer} onComplete={runAsync} />;
 }
-
-const Root = styled(Stack)`
-  .cko-payment-form {
-    // .MuiInputBase-root {
-    //   border-radius: 0;
-    // }
-
-    // .MuiInputAdornment-positionStart {
-    //   width: 50px;
-    // }
-
-    // .MuiBox-root {
-    //   border: 1px solid #ccc;
-    //   margin: -1px 0 0 -1px;
-    // }
-
-    // .MuiFormHelperText-root {
-    //   margin-left: 14px;
-    // }
-
-    // .MuiOutlinedInput-notchedOutline {
-    //   border: none;
-    // }
-  }
-
-  .cko-payment-submit {
-    .MuiButtonBase-root {
-      border-radius: 0;
-      font-size: 1.3rem;
-    }
-  }
-`;

package/src/pages/customer/subscription/detail.tsx

@@ -74,12 +74,14 @@ export default function CustomerSubscriptionDetail() {
   const { session } = useSessionContext();
   const { loading, error, data, refresh } = useRequest(() => fetchData(id));
   const { hasUnpaid, checkUnpaidInvoices } = useUnpaidInvoicesCheckForSubscription(id);
+  const overdraftProtectionReady =
+    ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock';
   const {
     data: overdraftProtection = null,
     loading: overdraftProtectionLoading,
     run: refreshOverdraftProtection,
   } = useRequest(() => fetchOverdraftProtection(id), {
-    ready: ['active', 'trialing', 'past_due'].includes(data?.status || '') && data?.paymentMethod?.type === 'arcblock',
+    ready: overdraftProtectionReady,
   });
 
   const {
@@ -94,6 +96,7 @@ export default function CustomerSubscriptionDetail() {
       }),
     {
       refreshDeps: [id],
+      ready: overdraftProtectionReady,
     }
   );
 
@@ -367,11 +370,7 @@ export default function CustomerSubscriptionDetail() {
                 sm: 'column',
                 md: 'row',
               },
-              alignItems: {
-                xs: 'flex-start',
-                sm: 'flex-start',
-                md: 'center',
-              },
+              alignItems: 'flex-start',
               gap: {
                 xs: 1,
                 sm: 1,

package/src/pages/integrations/donations/index.tsx

@@ -270,7 +270,7 @@ export default function DonationList() {
   return (
     <>
       <Stack direction="row" alignItems="center" gap={1} flexWrap="wrap">
-        <Typography variant="h6">{t('admin.donate.intro')}</Typography>
+        <Typography variant="body2">{t('admin.donate.intro')}</Typography>
         <Button variant="text" size="small" onClick={() => setShowExample(true)} sx={{ color: 'text.link' }}>
           {t('admin.donate.usage.viewExample')}
         </Button>

package/src/pages/integrations/overview.tsx

@@ -71,7 +71,7 @@ export default function Overview() {
         <Typography variant="h2" gutterBottom fontWeight="bold" mb={1}>
           {t('common.welcome')}
         </Typography>
-        <Typography variant="body1" color="text.secondary" mb={2}>
+        <Typography variant="body2" color="text.secondary" mb={2}>
           {t('common.welcomeDesc')}
         </Typography>
       </Box>