payment-kit 1.18.38 → 1.18.40

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,
-                    background: '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}
@@ -216,32 +245,82 @@ 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 && (

package/src/components/subscription/status.tsx

@@ -1,5 +1,5 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, formatToDate, getSubscriptionStatusColor, formatSubscriptionStatus } from '@blocklet/payment-react';
+import { Status, getSubscriptionStatusColor, formatSubscriptionStatus, getLineTimeInfo } from '@blocklet/payment-react';
 import type { TSubscription } from '@blocklet/payment-types';
 import { AccessTimeOutlined } from '@mui/icons-material';
 
@@ -13,10 +13,14 @@ export default function SubscriptionStatus({
   const { t } = useLocaleContext();
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at_period_end && subscription.current_period_end > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.current_period_end * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
-          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.current_period_end * 1000) })}
+          label={t('admin.subscription.cancel.will', {
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
+          })}
           color="warning"
           {...rest}
         />
@@ -24,10 +28,14 @@ export default function SubscriptionStatus({
     }
 
     if (subscription.cancel_at && subscription.cancel_at >= Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.cancel_at * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
-          label={t('admin.subscription.cancel.will', { date: formatToDate(subscription.cancel_at * 1000) })}
+          label={t('admin.subscription.cancel.will', {
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
+          })}
           color="warning"
           {...rest}
         />
@@ -35,10 +43,12 @@ export default function SubscriptionStatus({
     }
 
     if (subscription.trial_end && subscription.trial_end > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.trial_end * 1000);
       return (
         <Status
           label={t('admin.subscription.trialEnd', {
-            date: formatToDate(subscription.trial_end * 1000),
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
           })}
           color="info"
           {...rest}
@@ -49,11 +59,13 @@ export default function SubscriptionStatus({
 
   if (subscription.pause_collection && ['active', 'trialing'].includes(subscription.status)) {
     if (subscription.pause_collection.resumes_at && subscription.pause_collection.resumes_at > Date.now() / 1000) {
+      const dateInfo = getLineTimeInfo(subscription.pause_collection.resumes_at * 1000);
       return (
         <Status
           icon={<AccessTimeOutlined />}
           label={t('admin.subscription.pause.until.custom', {
-            date: formatToDate(subscription.pause_collection.resumes_at * 1000),
+            date: dateInfo.time,
+            prefix: dateInfo.isToday ? 'at' : 'on',
           })}
           color="default"
           {...rest}

package/src/locales/en.tsx

@@ -506,7 +506,7 @@ export default flat({
       attention: 'Uncollectible invoices',
       name: 'Invoice',
       from: 'Billed from',
-      empty: 'No invoice',
+      empty: 'No invoices',
       number: 'Invoice Number',
       description: 'Billing Description',
       dueDate: 'Due',
@@ -522,7 +522,7 @@ export default flat({
     subscription: {
       view: 'View subscription',
       name: 'Subscription',
-      empty: 'No subscription',
+      empty: 'No subscriptions',
       viewAll: 'View all subscriptions',
       noActiveEmpty: 'You currently have no active subscriptions. You can choose to view your subscription history.',
       attention: 'Past due subscriptions',
@@ -530,7 +530,10 @@ export default flat({
       collectionMethod: 'Billing',
       currentPeriod: 'Current Period',
       trialingPeriod: 'Trial Period',
-      trialEnd: 'Trial ends {date}',
+      trialEnd: 'Trial ends {prefix} {date}',
+      willEnd: 'Will end {prefix} {date}',
+      ended: 'Ended {prefix} {date}',
+      renew: 'Renew {prefix} {date}',
       discount: 'Discount',
       startedAt: 'Started',
       nextInvoice: 'Next Invoice',
@@ -547,7 +550,7 @@ export default flat({
         schedule: 'Scheduled to cancel',
         title: 'Cancel subscription',
         required: 'Custom cancel time is required',
-        will: 'End on {date}',
+        will: 'End {prefix} {date}',
         done: 'Canceled',
         at: {
           title: 'Cancel',
@@ -813,10 +816,12 @@ export default flat({
   customer: {
     subscription: {
       cancel: 'Cancel Subscription',
+      manage: 'Manage Subscription',
+      title: 'Subscriptions',
     },
     invoiceHistory: 'Invoice History',
     product: {
-      empty: 'No Product',
+      empty: 'No Products',
     },
     recharge: {
       title: 'Add Funds',
@@ -885,12 +890,12 @@ export default flat({
       donation: 'Donation',
     },
     payout: {
-      empty: 'No Payout',
+      empty: 'No Revenues',
       payer: 'Payer',
       receiver: 'Receiver',
       payTxHash: 'Payment TxHash',
       viewReference: 'View Reference',
-      title: 'Revenue',
+      title: 'Revenues',
     },
     pastDue: {
       warning: 'You have due invoices, please pay them to keep your services active',

package/src/locales/zh.tsx

@@ -519,7 +519,10 @@ export default flat({
       collectionMethod: '计费',
       currentPeriod: '当前周期',
       trialingPeriod: '试用期',
-      trialEnd: '试用期结束于{date}',
+      trialEnd: '试用期结束于 {date}',
+      willEnd: '将于 {date} 结束',
+      ended: '结束于 {date}',
+      renew: '下次续费: {date}',
       discount: '折扣',
       startedAt: '开始于',
       nextInvoice: '下次账单时间',
@@ -535,7 +538,7 @@ export default flat({
         schedule: '计划取消',
         title: '取消订阅',
         required: '必须指定自定义取消时间',
-        will: '于{date}取消',
+        will: '于 {date} 取消',
         done: '已取消',
         at: {
           title: '取消',
@@ -789,6 +792,7 @@ export default flat({
   },
   customer: {
     subscription: {
+      manage: '管理订阅',
       cancel: '取消订阅',
     },
     invoiceHistory: '历史账单',

package/src/pages/admin/billing/invoices/detail.tsx

@@ -172,11 +172,7 @@ export default function InvoiceDetail(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/billing/subscriptions/detail.tsx

@@ -143,11 +143,7 @@ export default function SubscriptionDetail(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/customers/customers/detail.tsx

@@ -232,11 +232,7 @@ export default function CustomerDetail(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/developers/events/detail.tsx

@@ -85,11 +85,7 @@ export default function EventDetail(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/developers/index.tsx

@@ -47,7 +47,7 @@ export default function DevelopersIndex() {
 
   return (
     <div>
-      <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
+      <Typography variant="h5" sx={{ mb: 1 }}>
         {t('admin.developers')}
       </Typography>
       {/* @ts-ignore */}

package/src/pages/admin/developers/webhooks/detail.tsx

@@ -49,9 +49,7 @@ export default function WebhookDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="column" alignItems="flex-start">
-              <Typography variant="h5" fontWeight={600}>
-                {data.url}
-              </Typography>
+              <Typography variant="h5">{data.url}</Typography>
               <Typography variant="body1" color="text.secondary">
                 {data.description}
               </Typography>

package/src/pages/admin/overview.tsx

@@ -222,19 +222,19 @@ export default function Overview() {
             </Button>
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.paymentIntent.list')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payments} currencies={currencies} />
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.payouts')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={payouts} currencies={currencies} />
           </Stack>
           <Stack direction="column" gap={1}>
-            <Typography component="h4" variant="h5">
+            <Typography component="h4" variant="subtitle1">
               {t('admin.refunds')}
             </Typography>
             <Chart loading={!trend.data} height={320} data={refunds} currencies={currencies} />
@@ -298,7 +298,7 @@ export default function Overview() {
                         sx={{ width: 36, height: 36 }}
                       />
                       <Box flex={1}>
-                        <Typography variant="h5" component="div" sx={{ fontSize: '1.75rem' }}>
+                        <Typography variant="body1" component="div" sx={{ fontSize: '1.75rem' }}>
                           {formatBNStr(
                             summary.data?.balances?.[currencyId] as string,
                             currencies[currencyId]?.decimal as number

package/src/pages/admin/payments/intents/detail.tsx

@@ -140,7 +140,10 @@ export default function PaymentIntentDetail(props: { id: string }) {
                 sx={{ width: '52px', height: '52px', borderRadius: 0.5 }}
               />
               <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-                <Amount amount={received} sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }} />
+                <Amount
+                  amount={data?.amount_received === '0' ? total : received}
+                  sx={{ my: 0, fontSize: '1.75rem', lineHeight: '32px' }}
+                />
                 <Copyable text={props.id} />
               </Stack>
             </Stack>
@@ -158,11 +161,7 @@ export default function PaymentIntentDetail(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/payments/payouts/detail.tsx

@@ -182,11 +182,7 @@ export default function PayoutDetail(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/payments/refunds/detail.tsx

@@ -156,11 +156,7 @@ export default function RefundDetail(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/links/detail.tsx

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