payment-kit 1.14.21 → 1.14.23

package/src/components/payment-intent/list.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor, Table } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
@@ -10,7 +10,6 @@ import { Link } from 'react-router-dom';
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import Table from '../table';
 import PaymentIntentActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentIntentExpanded[]; count: number }> => {
@@ -105,7 +104,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       label: t('common.amount'),
       name: 'id',
       align: 'right',
-      width: 60,
+      width: 80,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
@@ -270,6 +269,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
           />
         )
       }
+      emptyNodeText={t('empty.payments')}
     />
   );
 }

package/src/components/payment-link/preview.tsx

@@ -1,31 +1,49 @@
-/* eslint-disable no-unsafe-optional-chaining */
-import { Box } from '@mui/material';
-import { useSize } from 'ahooks';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
-import { useRef } from 'react';
-
 import Chrome from './chrome';
 
+const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+  const innerRef = useRef(null);
+  const size = useSize(innerRef);
+  const scale = (size?.width || 0) / 1280;
+  const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
+
+  useImperativeHandle(ref, () => ({
+    ref: innerRef.current,
+    fullscreen,
+    toggleFullscreen,
+  }));
+
+  return (
+    <div ref={innerRef}>
+      {fullscreen ? (
+        <div style={{ width: '100%', height: '100%', background: '#fff' }}>
+          <IframeResizer
+            style={{ width: '100%', height: '100vh', overflow: 'hidden', border: 'none' }}
+            src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
+          />
+        </div>
+      ) : (
+        <Chrome sx={{ width: '100%', height: 800 * scale }}>
+          <IframeResizer
+            style={{
+              width: '1280px',
+              height: '800px',
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+              border: 'none',
+            }}
+            src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
+          />
+        </Chrome>
+      )}
+    </div>
+  );
+});
+
 PaymentLinkPreview.defaultProps = {
   version: 1,
 };
 
-export default function PaymentLinkPreview({ id, version }: { id: string; version?: number }) {
-  const ref = useRef(null);
-  const size = useSize(ref);
-  return (
-    <Chrome sx={{ width: '100%', maxWidth: 840 }}>
-      <Box ref={ref}>&nbsp;</Box>
-      <IframeResizer
-        style={{
-          minWidth: size ? size.width / 0.8 : 1050,
-          minHeight: '64vh',
-          transform: 'scale(0.8)',
-          transformOrigin: 'top left',
-          border: 'none',
-        }}
-        src={`${window.blocklet.prefix}checkout/pay/${id}?preview=1&version=${version}`}
-      />
-    </Chrome>
-  );
-}
+export default PaymentLinkPreview;

package/src/components/payouts/list.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatBNStr, formatTime, getPayoutStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getPayoutStatusColor, Table } from '@blocklet/payment-react';
 import type { TPayoutExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
@@ -10,7 +10,6 @@ import { Link } from 'react-router-dom';
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import Table from '../table';
 import PayoutActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPayoutExpanded[]; count: number }> => {
@@ -103,7 +102,7 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
       label: t('common.amount'),
       name: 'id',
       align: 'right',
-      width: 60,
+      width: 80,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPayoutExpanded;

package/src/components/price/form.tsx

@@ -30,6 +30,7 @@ import { styled } from '@mui/system';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
 
+import { get } from 'lodash';
 import Collapse from '../collapse';
 import CurrencySelect from './currency-select';
 
@@ -109,7 +110,6 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
     return names.reduce((prev, curr) => prev?.[curr], errors as any);
   };
   const { settings, livemode } = usePaymentContext();
-
   const currencies = useFieldArray({ control, name: getFieldName('currency_options') });
 
   const priceLocked = useWatch({ control, name: getFieldName('locked') });
@@ -117,6 +117,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const isMetered = useWatch({ control, name: getFieldName('recurring.usage_type') }) === 'metered';
   const isCustomInterval = useWatch({ control, name: getFieldName('recurring.interval_config') }) === 'month_2';
   const model = useWatch({ control, name: getFieldName('model') });
+  const intervalSelectValue = useWatch({ control, name: getFieldName('recurring.interval') });
   const quantityPositive = (v: number | undefined) => !v || v.toString().match(/^(0|[1-9]\d*)$/);
   const intervalCountPositive = (v: number) => Number.isInteger(Number(v)) && v > 0;
 
@@ -147,12 +148,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         disabled={isLocked}
         render={({ field }) => (
           <Box sx={{ width: INPUT_WIDTH }}>
-            <FormLabel>{t('admin.price.model')}</FormLabel>
+            <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.model')}</FormLabel>
             <Select {...field} fullWidth size="small">
               <MenuItem value="standard">{t('admin.price.models.standard')}</MenuItem>
-              <MenuItem value="package" disabled>
-                {t('admin.price.models.package')}
-              </MenuItem>
+              <MenuItem value="package">{t('admin.price.models.package')}</MenuItem>
               <MenuItem value="graduated" disabled>
                 {t('admin.price.models.graduated')}
               </MenuItem>
@@ -177,7 +176,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           disabled={isLocked}
           render={({ field }) => (
             <Box>
-              <FormLabel>
+              <FormLabel sx={{ color: 'text.primary' }}>
                 <Stack direction="row" alignItems="center" spacing={0.5}>
                   <Typography component="span" color="text.primary">
                     {t('admin.price.amount')}
@@ -325,9 +324,10 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
             disabled={isLocked}
             render={({ field }) => (
               <Box>
-                <FormLabel>{t('admin.price.recurring.interval')}</FormLabel>
+                <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.recurring.interval')}</FormLabel>
                 <Select
                   {...field}
+                  value={field.value || 'month_1'}
                   onChange={(e) => {
                     const [interval, count] = e.target.value.split('_');
                     setValue(getFieldName('recurring.interval'), interval);
@@ -353,6 +353,14 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               name={getFieldName('recurring.interval_count')}
               control={control}
               disabled={isLocked}
+              rules={{
+                validate: (v) => {
+                  if (!intervalCountPositive(v)) {
+                    return t('admin.price.recurring.intervalCountTip');
+                  }
+                  return true;
+                },
+              }}
               render={({ field }) => (
                 <Box ml={2}>
                   <FormLabel>&nbsp;</FormLabel>
@@ -361,13 +369,16 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     type="number"
                     size="small"
                     sx={{ width: INPUT_WIDTH }}
-                    error={!intervalCountPositive(field.value)}
-                    helperText={!intervalCountPositive(field.value) && t('admin.price.recurring.intervalCountTip')}
+                    error={!!get(errors, getFieldName('recurring.interval_count'))}
+                    helperText={get(errors, getFieldName('recurring.interval_count'))?.message as string}
                     InputProps={{
                       startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
                       endAdornment: (
                         <InputAdornment position="end">
-                          <select onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}>
+                          <select
+                            onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}
+                            value={intervalSelectValue}
+                            style={{ background: 'none', outline: 'none' }}>
                             <option value="day">{t('common.days')}</option>
                             <option value="week">{t('common.weeks')}</option>
                             <option value="month">{t('common.months')}</option>
@@ -416,7 +427,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
           disabled={isLocked}
           render={({ field }) => (
             <Box>
-              <FormLabel>{t('admin.price.recurring.aggregate')}</FormLabel>
+              <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.recurring.aggregate')}</FormLabel>
               <Select {...field} sx={{ width: INPUT_WIDTH }} size="small">
                 <MenuItem value="sum">{t('admin.price.aggregate.sum')}</MenuItem>
                 <MenuItem value="max">{t('admin.price.aggregate.max')}</MenuItem>
@@ -435,7 +446,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               control={control}
               render={({ field }) => (
                 <Box>
-                  <FormLabel>{t('admin.price.quantityAvailable.label')}</FormLabel>
+                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.quantityAvailable.label')}</FormLabel>
                   <TextField
                     {...field}
                     size="small"
@@ -453,7 +464,9 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               control={control}
               render={({ field }) => (
                 <Box>
-                  <FormLabel>{t('admin.price.quantityLimitPerCheckout.label')}</FormLabel>
+                  <FormLabel sx={{ color: 'text.primary' }}>
+                    {t('admin.price.quantityLimitPerCheckout.label')}
+                  </FormLabel>
                   <TextField
                     {...field}
                     size="small"
@@ -471,7 +484,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               control={control}
               render={({ field }) => (
                 <Box>
-                  <FormLabel>{t('admin.price.nickname.label')}</FormLabel>
+                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.nickname.label')}</FormLabel>
                   <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
                 </Box>
               )}
@@ -481,7 +494,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               control={control}
               render={({ field }) => (
                 <Box>
-                  <FormLabel>{t('admin.price.lookup_key.label')}</FormLabel>
+                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.lookup_key.label')}</FormLabel>
                   <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} />
                 </Box>
               )}

package/src/components/price/upsell.tsx

@@ -1,4 +1,3 @@
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
 import type { TPriceExpanded } from '@blocklet/payment-types';
@@ -60,12 +59,10 @@ export function UpsellForm({ data, onChange }: { data: TPriceExpanded; onChange:
 }
 
 export default function PriceUpsell({ data, onChange }: { data: TPriceExpanded; onChange: Function }) {
-  const { t } = useLocaleContext();
-
   return (
     <Grid container>
       <Grid item xs={12} md={6}>
-        <InfoRow label={t('admin.price.upsell.to')} value={<UpsellForm data={data} onChange={onChange} />} />
+        <InfoRow label="" value={<UpsellForm data={data} onChange={onChange} />} />
       </Grid>
     </Grid>
   );

package/src/components/pricing-table/preview.tsx

@@ -1,30 +1,49 @@
-import { Box } from '@mui/material';
-import { useSize } from 'ahooks';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
-import { useRef } from 'react';
-
 import Chrome from '../payment-link/chrome';
 
+const PricingTablePreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+  const innerRef = useRef(null);
+  const size = useSize(innerRef);
+  const scale = (size?.width || 0) / 1280;
+  const [fullscreen, { toggleFullscreen }] = useFullscreen(innerRef);
+
+  useImperativeHandle(ref, () => ({
+    ref: innerRef.current,
+    fullscreen,
+    toggleFullscreen,
+  }));
+
+  return (
+    <div ref={innerRef}>
+      {fullscreen ? (
+        <div style={{ width: '100%', height: '100%', background: '#fff', border: 'none' }}>
+          <IframeResizer
+            style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
+            src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
+          />
+        </div>
+      ) : (
+        <Chrome sx={{ width: '100%', height: 800 * scale }}>
+          <IframeResizer
+            style={{
+              width: '1280px',
+              height: '800px',
+              transform: `scale(${scale})`,
+              transformOrigin: 'top left',
+              border: 'none',
+            }}
+            src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
+          />
+        </Chrome>
+      )}
+    </div>
+  );
+});
+
 PricingTablePreview.defaultProps = {
   version: 1,
 };
 
-export default function PricingTablePreview({ id, version }: { id: string; version?: number }) {
-  const ref = useRef(null);
-  const size = useSize(ref);
-  return (
-    <Chrome sx={{ width: '100%', maxWidth: 840 }}>
-      <Box ref={ref}>&nbsp;</Box>
-      <IframeResizer
-        style={{
-          minWidth: size ? size.width / 0.8 : 1050,
-          minHeight: '64vh',
-          transform: 'scale(0.8)',
-          transformOrigin: 'top left',
-          border: 'none',
-        }}
-        src={`${window.blocklet.prefix}checkout/pricing-table/${id}?preview=1&version=${version}`}
-      />
-    </Chrome>
-  );
-}
+export default PricingTablePreview;

package/src/components/product/cross-sell-select.tsx

@@ -28,7 +28,7 @@ export default function CrossSellSelect({ data, onSelect, valid }: Props) {
   };
 
   return (
-    <FormControl error={!valid}>
+    <FormControl error={!valid} sx={{ width: '100%' }}>
       <Select
         value={value}
         sx={{ minWidth: 300 }}

package/src/components/product/cross-sell.tsx

@@ -9,7 +9,6 @@ import { useState } from 'react';
 import { ProductsProvider, useProductsContext } from '../../contexts/products';
 import { formatProductPrice, isProductCurrenciesMatched } from '../../libs/util';
 import InfoCard from '../info-card';
-import InfoRow from '../info-row';
 import CrossSellSelect from './cross-sell-select';
 
 export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
@@ -84,13 +83,13 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
 }
 
 export default function ProductCrossSell({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
-  const { t } = useLocaleContext();
+  // const { t } = useLocaleContext();
 
   return (
     <ProductsProvider>
       <Grid container>
-        <Grid item xs={12} md={6}>
-          <InfoRow label={t('admin.product.cross_sell.to')} value={<CrossSellForm data={data} onChange={onChange} />} />
+        <Grid item xs={12}>
+          <CrossSellForm data={data} onChange={onChange} />
         </Grid>
       </Grid>
     </ProductsProvider>

package/src/components/product/edit-price.tsx

@@ -37,7 +37,6 @@ export default function EditPrice({
       recurring: price.recurring
         ? {
             ...price.recurring,
-            interval_config: [price.recurring.interval, price.recurring.interval_count].join('_'),
           }
         : DEFAULT_PRICE.recurring,
       currency_options: cloneDeep(price.currency_options).map((x: any) => {

package/src/components/refund/list.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
+import { Status, api, formatBNStr, formatTime, getPaymentIntentStatusColor, Table } from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import { capitalize, toLower } from 'lodash';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import Table from '../table';
 import RefundActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TRefundExpanded[]; count: number }> => {
@@ -125,7 +125,7 @@ export default function RefundList({
       label: t('common.amount'),
       name: 'id',
       align: 'right',
-      width: 60,
+      width: 80,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
@@ -178,7 +178,11 @@ export default function RefundList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return <Link to={`/admin/payments/${item.id}`}>{item.description || item.id}</Link>;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              {item.description ? capitalize(toLower(item.description.replace(/_/g, ' '))) : item.id}
+            </Link>
+          );
         },
       },
     },
@@ -294,6 +298,7 @@ export default function RefundList({
           />
         )
       }
+      emptyNodeText={t('empty.refunds')}
     />
   );
 }

package/src/components/section/header.tsx

@@ -17,8 +17,15 @@ export default function SectionHeader(props: Props) {
       alignItems="center"
       flexWrap="wrap"
       gap={1}
-      sx={{ mb: props.mb, mt: props.mt, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
-      <Typography variant="h6" sx={{ fontWeight: 600 }}>
+      sx={{ mb: props.mb, mt: props.mt, pb: 1 }}>
+      <Typography
+        variant="h3"
+        sx={{
+          fontSize: {
+            xs: '18px',
+            md: '1.25rem',
+          },
+        }}>
         {props.title}
       </Typography>
       {props.children}
@@ -28,6 +35,6 @@ export default function SectionHeader(props: Props) {
 
 SectionHeader.defaultProps = {
   children: null,
-  mb: 1,
-  mt: 1,
+  mb: 1.5,
+  mt: 1.5,
 };

package/src/components/subscription/description.tsx

@@ -5,19 +5,22 @@ import { Stack, Tooltip, Typography } from '@mui/material';
 
 type Props = {
   subscription: TSubscriptionExpanded;
-  variant?: 'body1' | 'h5';
+  variant?: 'body1' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';
+  hideSubscription?: boolean;
 };
 
-export default function SubscriptionDescription({ subscription, variant }: Props) {
+export default function SubscriptionDescription({ subscription, variant, hideSubscription }: Props) {
   if (subscription.description) {
     return (
       <Stack direction="row" alignItems="center" spacing={1}>
-        <Typography variant={variant} fontWeight={600}>
+        <Typography variant={variant} fontWeight={600} className="subscription-description">
           {subscription.description}
         </Typography>
-        <Tooltip title={formatSubscriptionProduct(subscription.items)}>
-          <InfoOutlined sx={{ color: 'text.secondary' }} fontSize="small" />
-        </Tooltip>
+        {!hideSubscription && (
+          <Tooltip title={formatSubscriptionProduct(subscription.items)}>
+            <InfoOutlined sx={{ color: 'text.secondary' }} fontSize="small" />
+          </Tooltip>
+        )}
       </Stack>
     );
   }
@@ -31,4 +34,5 @@ export default function SubscriptionDescription({ subscription, variant }: Props
 
 SubscriptionDescription.defaultProps = {
   variant: 'body1',
+  hideSubscription: false,
 };

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

@@ -1,11 +1,10 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatPrice } from '@blocklet/payment-react';
+import { formatPrice, Table } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@blocklet/payment-types';
-import { Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 
 import Copyable from '../../copyable';
-import Table from '../../table';
 import LineItemActions from './actions';
 import UsageRecords from './usage-records';
 
@@ -19,9 +18,10 @@ SubscriptionItemList.defaultProps = {
   mode: 'customer',
 };
 
+const size = { width: 48, height: 48 };
+
 export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
   const { t } = useLocaleContext();
-
   const columns = [
     {
       label: t('admin.subscription.product'),
@@ -30,12 +30,33 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
         customBodyRenderLite: (_: string, index: number) => {
           const item = data[index] as TSubscriptionItemExpanded;
           return (
-            <Stack>
+            <Stack
+              flexDirection="row"
+              flexWrap="wrap"
+              alignItems="center"
+              gap={{
+                xs: 1,
+                sm: 2,
+              }}>
+              {item.price.product.images.length > 0 ? (
+                // @ts-ignore
+                <Avatar
+                  key={item.price.product_id}
+                  src={item.price.product.images[0]}
+                  alt={item.price.product.name}
+                  variant="rounded"
+                  sx={size}
+                />
+              ) : (
+                <Avatar key={item.price.product_id} variant="rounded" sx={size}>
+                  {item.price.product.name.slice(0, 1)}
+                </Avatar>
+              )}
               <Typography color="text.primary" fontWeight={600}>
                 {item?.price.product.name}
                 {mode === 'customer' ? '' : ` - ${item?.price_id}`}
               </Typography>
-              <Typography color="text.secondary">
+              <Typography color="text.secondary" whiteSpace="nowrap">
                 {formatPrice(item.price, currency, item?.price.product.unit_label)}
               </Typography>
             </Stack>
@@ -112,6 +133,7 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
         page: 0,
         rowsPerPage: 100,
       }}
+      emptyNodeText={t('customer.product.empty')}
     />
   );
 }

package/src/components/subscription/list.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Status, api, formatTime } from '@blocklet/payment-react';
+import { Status, api, formatTime, Table } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
@@ -9,7 +9,6 @@ import { Link } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import Table from '../table';
 import SubscriptionActions from './actions';
 import SubscriptionDescription from './description';
 import SubscriptionStatus from './status';
@@ -238,6 +237,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
             setSearch={setSearch}
             search={search}
             status={['active', 'trialing', 'paused', 'past_due', 'canceled', 'incomplete', 'incomplete_expired']}
+            formatStatus={(x) => (x === 'canceled' ? 'ended' : x)}
           />
         )
       }

package/src/components/subscription/metrics.tsx

@@ -4,6 +4,7 @@ import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
 
 import InfoMetric from '../info-metric';
+import SubscriptionStatus from './status';
 
 type Props = {
   subscription: TSubscriptionExpanded;
@@ -17,15 +18,16 @@ export default function SubscriptionMetrics({ subscription }: Props) {
   const { t } = useLocaleContext();
   const { data: upcoming } = useRequest(() => fetchUpcoming(subscription.id));
 
-  let scheduleToCancelTime = 0;
-  if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
-    scheduleToCancelTime = subscription.cancel_at * 1000;
-  } else if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
-    scheduleToCancelTime = subscription.current_period_end * 1000;
-  }
+  // let scheduleToCancelTime = 0;
+  // if (['active', 'trialing', 'past_due'].includes(subscription.status) && subscription.cancel_at) {
+  //   scheduleToCancelTime = subscription.cancel_at * 1000;
+  // } else if (subscription.status !== 'canceled' && subscription.cancel_at_period_end) {
+  //   scheduleToCancelTime = subscription.current_period_end * 1000;
+  // }
 
   return (
     <>
+      <InfoMetric label={t('common.status')} value={<SubscriptionStatus subscription={subscription} />} divider />
       <InfoMetric
         label={t('admin.subscription.startedAt')}
         value={formatTime(subscription.start_date ? subscription.start_date * 1000 : subscription.created_at)}
@@ -47,9 +49,9 @@ export default function SubscriptionMetrics({ subscription }: Props) {
           divider
         />
       )}
-      {scheduleToCancelTime > 0 && (
+      {/* {scheduleToCancelTime > 0 && (
         <InfoMetric label={t('admin.subscription.cancel.schedule')} value={formatTime(scheduleToCancelTime)} divider />
-      )}
+      )} */}
       {subscription.status === 'canceled' && subscription.canceled_at && (
         <InfoMetric
           label={t('admin.subscription.cancel.done')}