payment-kit 1.14.29 → 1.14.31

package/src/components/product/features.tsx

@@ -1,11 +1,15 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
 import { Box, Button, IconButton, TextField, Typography } from '@mui/material';
+import { get } from 'lodash';
 import { Controller, useFieldArray, useFormContext } from 'react-hook-form';
 
 export default function MetadataForm() {
   const { t } = useLocaleContext();
-  const { control } = useFormContext();
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
   const features = useFieldArray({ control, name: 'features' });
   return (
     <Box sx={{ width: 1 }}>
@@ -13,7 +17,17 @@ export default function MetadataForm() {
       {features.fields.map((feature, index) => (
         <Box key={feature.id} mt={2} sx={{ width: 1 }}>
           <Controller
-            render={({ field }) => <TextField {...field} sx={{ width: '80%' }} size="small" />}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                sx={{ width: '80%' }}
+                size="small"
+                inputProps={{ maxLength: 64 }}
+                error={!!get(errors, field.name)}
+                helperText={get(errors, field.name)?.message as string}
+              />
+            )}
+            rules={{ maxLength: { value: 64, message: t('common.maxLength', { len: 64 }) } }}
             name={`features.${index}.name`}
             control={control}
           />

package/src/components/product/form.tsx

@@ -38,16 +38,29 @@ export default function ProductForm(props: Props) {
       <Stack spacing={2} flex={2} alignItems="flex-start">
         <FormInput
           name="name"
-          rules={{ required: t('admin.product.name.required') }}
+          rules={{
+            required: t('admin.product.name.required'),
+            maxLength: {
+              value: 64,
+              message: t('common.maxLength', { len: 64 }),
+            },
+          }}
           label={t('admin.product.name.label')}
           placeholder={t('admin.product.name.placeholder')}
           error={!!formState.errors.name}
           helperText={formState.errors.name?.message as string}
           autoFocus
+          inputProps={{ maxLength: 64 }}
         />
         <FormInput
           name="description"
-          rules={{ required: t('admin.product.description.required') }}
+          rules={{
+            required: t('admin.product.description.required'),
+            maxLength: {
+              value: 256,
+              message: t('common.maxLength', { len: 256 }),
+            },
+          }}
           label={t('admin.product.description.label')}
           placeholder={t('admin.product.description.placeholder')}
           error={!!formState.errors.description}
@@ -55,11 +68,22 @@ export default function ProductForm(props: Props) {
           multiline
           minRows={2}
           maxRows={4}
+          inputProps={{ maxLength: 256 }}
         />
         <Collapse trigger={t('admin.product.additional')}>
           <Stack spacing={2} alignItems="flex-start">
-            <FormInput name="statement_descriptor" label={t('admin.product.statement_descriptor.label')} />
-            <FormInput name="unit_label" label={t('admin.product.unit_label.label')} />
+            <FormInput
+              name="statement_descriptor"
+              label={t('admin.product.statement_descriptor.label')}
+              rules={{ maxLength: { value: 32, message: t('common.maxLength', { len: 32 }) } }}
+              inputProps={{ maxLength: 32 }}
+            />
+            <FormInput
+              name="unit_label"
+              label={t('admin.product.unit_label.label')}
+              rules={{ maxLength: { value: 32, message: t('common.maxLength', { len: 32 }) } }}
+              inputProps={{ maxLength: 32 }}
+            />
             {!props.simple && <ProductFeatures />}
             {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
           </Stack>

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

@@ -147,6 +147,16 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
                   symbol,
                 })}
               />
+              <FormControlLabel
+                value="slash"
+                disabled={loading || !staking}
+                onClick={() => !(loading || !staking) && setValue('cancel.staking', 'slash')}
+                control={<Radio checked={stakingType === 'slash'} />}
+                label={t('admin.subscription.cancel.staking.slash', {
+                  unused: formatAmount(staking?.return_amount || '0', decimal),
+                  symbol,
+                })}
+              />
             </RadioGroup>
           </Stack>
         </>

package/src/components/subscription/description.tsx

@@ -1,4 +1,4 @@
-import { formatSubscriptionProduct, useMobile } from '@blocklet/payment-react';
+import { formatSubscriptionProduct, TruncatedText, useMobile } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
@@ -15,7 +15,7 @@ export default function SubscriptionDescription({ subscription, variant, hideSub
     return (
       <Stack direction="row" alignItems="center" spacing={1}>
         <Typography variant={variant} fontWeight={600} className="subscription-description">
-          {subscription.description}
+          <TruncatedText text={subscription.description} maxLength={80} useWidth />
         </Typography>
         {!hideSubscription && !isMobile && (
           <Tooltip title={formatSubscriptionProduct(subscription.items)}>

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatPrice, Table } from '@blocklet/payment-react';
+import { formatPrice, Table, TruncatedText, useMobile } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 import { Avatar, Stack, Typography } from '@mui/material';
 
@@ -22,6 +22,7 @@ const size = { width: 48, height: 48 };
 
 export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
   const { t } = useLocaleContext();
+  const { isMobile } = useMobile();
   const columns = [
     {
       label: t('admin.subscription.product'),
@@ -53,7 +54,7 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
                 </Avatar>
               )}
               <Typography color="text.primary" fontWeight={600}>
-                {item?.price.product.name}
+                <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
                 {mode === 'customer' ? '' : ` - ${item?.price_id}`}
               </Typography>
               <Typography color="text.secondary" whiteSpace="nowrap">

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

@@ -11,7 +11,9 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
   return (
     <Stack direction="column" spacing={1} alignItems="flex-start">
       <Typography>
-        {t('payment.customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}
+        {data.status === 'trialing'
+          ? t('payment.customer.cancel.trialDescription')
+          : t('payment.customer.cancel.description', { date: formatTime(data.current_period_end * 1000) })}
       </Typography>
       <Controller
         name="cancel.feedback"
@@ -66,6 +68,12 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
       <Controller
         name="cancel.comment"
         control={control}
+        rules={{
+          maxLength: {
+            value: 200,
+            message: t('common.maxLength', { len: 200 }),
+          },
+        }}
         render={({ field }) => (
           <TextField
             variant="outlined"
@@ -76,6 +84,9 @@ export default function CustomerCancelForm({ data }: { data: TSubscriptionExpand
             maxRows={4}
             placeholder={t('payment.customer.cancel.comment')}
             {...field}
+            inputProps={{
+              maxLength: 200,
+            }}
           />
         )}
       />

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

@@ -1,21 +1,16 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Empty from '@arcblock/ux/lib/Empty';
-import {
-  Status,
-  api,
-  formatPrice,
-  getSubscriptionStatusColor,
-  getSubscriptionTimeSummary,
-  useMobile,
-  formatSubscriptionStatus,
-} from '@blocklet/payment-react';
+import { api, formatPrice, getSubscriptionTimeSummary, useMobile } from '@blocklet/payment-react';
 import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
+import { useRef } from 'react';
 import SubscriptionDescription from '../description';
 import SubscriptionActions from './actions';
+import SubscriptionStatus from '../status';
+import useDelayedLoading from '../../../hooks/loading';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
   const search = new URLSearchParams();
@@ -47,168 +42,197 @@ export default function CurrentSubscriptions({
 }: Props) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
+  const listRef = useRef<HTMLDivElement | null>(null);
 
-  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
+  const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status, customer_id: id });
+      return fetchData({ page, pageSize, status, customer_id: id, activeFirst: true });
     },
     {
       reloadDeps: [id, status],
+      ...(isMobile
+        ? {}
+        : {
+            target: listRef,
+            isNoMore: (d) => {
+              return d?.list?.length === 0 || (d?.list?.length ?? 0) >= (d?.count ?? 0);
+            },
+          }),
     }
   );
 
-  if (loading || !data) {
-    return <CircularProgress />;
-  }
+  const showLoadingMore = useDelayedLoading(loadingMore);
 
-  if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.subscriptions.empty')}</Typography>;
+  if (!data || loading) {
+    return <CircularProgress />;
   }
 
-  const hasMore = data && data.list.length < data.count;
+  const hasMore = data && data.list?.length < data.count;
   const size = { width: 48, height: 48 };
 
   return (
     <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
       {data.list?.length > 0 ? (
         <>
-          {data.list.map((subscription) => {
-            return (
-              <Stack
-                key={subscription.id}
-                direction="row"
-                justifyContent="space-between"
-                gap={{
-                  xs: 1,
-                  sm: 2,
-                }}
-                sx={{
-                  padding: 1.5,
-                  background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
-                  '&:hover': {
-                    backgroundColor: 'grey.50',
-                    transition: 'background-color 200ms linear',
-                    cursor: 'pointer',
-                  },
-                }}
-                flexWrap="wrap">
-                <Stack direction="column" flex={1} spacing={0.5} {...rest}>
-                  <Stack
-                    direction={isMobile ? 'column' : 'row'}
-                    spacing={1}
-                    alignItems={isMobile ? 'flex-start' : 'center'}
-                    flexWrap="wrap"
-                    justifyContent="space-between"
-                    onClick={() => onClickSubscription(subscription)}>
-                    <Stack direction="row" spacing={1.5}>
-                      <AvatarGroup max={3}>
-                        {subscription.items.map((item) =>
-                          item.price.product.images.length > 0 ? (
+          <Stack
+            ref={listRef}
+            spacing={2}
+            sx={{
+              maxHeight: {
+                xs: '100%',
+                md: '500px',
+              },
+              overflowY: 'auto',
+            }}>
+            {data.list.map((subscription) => {
+              return (
+                <Stack
+                  key={subscription.id}
+                  direction="row"
+                  justifyContent="space-between"
+                  gap={{
+                    xs: 1,
+                    sm: 2,
+                  }}
+                  sx={{
+                    padding: 1.5,
+                    background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
+                    '&:hover': {
+                      backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      transition: 'background-color 200ms linear',
+                      cursor: 'pointer',
+                    },
+                  }}
+                  flexWrap="wrap">
+                  <Stack direction="column" flex={1} spacing={0.5} {...rest}>
+                    <Stack
+                      direction={isMobile ? 'column' : 'row'}
+                      spacing={1}
+                      alignItems={isMobile ? 'flex-start' : 'center'}
+                      flexWrap="wrap"
+                      justifyContent="space-between"
+                      onClick={() => onClickSubscription(subscription)}>
+                      <Stack direction="row" spacing={1.5}>
+                        <AvatarGroup max={3}>
+                          {subscription.items.map((item) =>
+                            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>
+                            )
+                          )}
+                        </AvatarGroup>
+                        <Stack
+                          direction="column"
+                          spacing={0.5}
+                          sx={{
+                            '.MuiTypography-body1': {
+                              fontSize: '16px',
+                            },
+                          }}>
+                          <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
+                          <SubscriptionStatus
+                            subscription={subscription}
+                            sx={{ height: 18, width: 'fit-content' }}
+                            size="small"
+                          />
+                        </Stack>
+                      </Stack>
+                      <Stack>
+                        <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
+                          {
                             // @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>
-                          )
-                        )}
-                      </AvatarGroup>
-                      <Stack
-                        direction="column"
-                        spacing={0.5}
-                        sx={{
-                          '.MuiTypography-body1': {
-                            fontSize: '16px',
-                          },
-                        }}>
-                        <SubscriptionDescription subscription={subscription} hideSubscription variant="body1" />
-                        <Status
-                          size="small"
-                          sx={{ height: 18, width: 'fit-content' }}
-                          label={formatSubscriptionStatus(subscription.status)}
-                          color={getSubscriptionStatusColor(subscription.status)}
-                        />
+                            formatPrice(subscription.items[0].price, subscription.paymentCurrency)
+                          }
+                        </Typography>
                       </Stack>
                     </Stack>
-                    <Stack>
-                      <Typography variant="subtitle1" fontWeight={500} fontSize={16}>
-                        {
-                          // @ts-ignore
-                          formatPrice(subscription.items[0].price, subscription.paymentCurrency)
-                        }
-                      </Typography>
-                    </Stack>
-                  </Stack>
-                  <Stack
-                    gap={1}
-                    justifyContent="space-between"
-                    flexWrap="wrap"
-                    sx={{
-                      flexDirection: {
-                        xs: 'column',
-                        lg: 'row',
-                      },
-                      alignItems: {
-                        xs: 'flex-start',
-                        lg: '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>
-                        ))}
-                    </Box>
-                    <SubscriptionActions
-                      subscription={subscription}
-                      onChange={onChange}
-                      actionProps={{
-                        cancel: {
-                          variant: 'outlined',
-                          color: 'primary',
+                    <Stack
+                      gap={1}
+                      justifyContent="space-between"
+                      flexWrap="wrap"
+                      sx={{
+                        flexDirection: {
+                          xs: 'column',
+                          lg: 'row',
                         },
-                        recover: {
-                          variant: 'outlined',
-                          color: 'info',
+                        alignItems: {
+                          xs: 'flex-start',
+                          lg: 'center',
                         },
-                        pastDue: {
-                          variant: 'outlined',
-                          color: 'primary',
-                        },
-                      }}
-                    />
+                      }}>
+                      <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>
+                          ))}
+                      </Box>
+                      <SubscriptionActions
+                        subscription={subscription}
+                        onChange={(v) => {
+                          reload();
+                          if (onChange) {
+                            onChange(v);
+                          }
+                        }}
+                        actionProps={{
+                          cancel: {
+                            variant: 'outlined',
+                            color: 'primary',
+                          },
+                          recover: {
+                            variant: 'outlined',
+                            color: 'info',
+                          },
+                          pastDue: {
+                            variant: 'outlined',
+                            color: 'primary',
+                          },
+                        }}
+                      />
+                    </Stack>
                   </Stack>
                 </Stack>
-              </Stack>
-            );
-          })}
-          <Box>
-            {hasMore && (
-              <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
-                {loadingMore
-                  ? t('common.loadingMore', { resource: t('admin.subscriptions') })
-                  : t('common.loadMore', { resource: t('admin.subscriptions') })}
-              </Button>
+              );
+            })}
+            {hasMore && !isMobile && showLoadingMore && (
+              <Box alignItems="center" gap={0.5} display="flex" mt={0.5}>
+                {t('common.loadingMore', { resource: t('admin.subscriptions') })}
+              </Box>
             )}
-            {!hasMore && data.count > pageSize && (
-              <Typography color="text.secondary">
-                {t('common.noMore', { resource: t('admin.subscriptions') })}
-              </Typography>
-            )}
-          </Box>
+          </Stack>
+          {isMobile && (
+            <Box>
+              {hasMore && (
+                <Button variant="text" type="button" color="inherit" onClick={loadMore} disabled={loadingMore}>
+                  {loadingMore
+                    ? t('common.loadingMore', { resource: t('admin.subscriptions') })
+                    : t('common.loadMore', { resource: t('admin.subscriptions') })}
+                </Button>
+              )}
+              {!hasMore && data.count > pageSize && (
+                <Typography color="text.secondary">
+                  {t('common.noMore', { resource: t('admin.subscriptions') })}
+                </Typography>
+              )}
+            </Box>
+          )}
         </>
       ) : (
         <Empty>

package/src/hooks/loading.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect, useRef } from 'react';
+
+function useDelayedLoading(loading: boolean, delay: number = 300) {
+  const [showLoading, setShowLoading] = useState(false);
+  const delayTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (delayTimeout.current) {
+      clearTimeout(delayTimeout.current);
+    }
+    if (loading) {
+      delayTimeout.current = setTimeout(() => {
+        setShowLoading(true);
+      }, delay);
+    } else {
+      setShowLoading(false);
+    }
+    return () => {
+      if (delayTimeout.current) {
+        clearTimeout(delayTimeout.current);
+      }
+    };
+  }, [loading, delay]);
+
+  return showLoading;
+}
+
+export default useDelayedLoading;

package/src/locales/en.tsx

@@ -16,6 +16,9 @@ export default flat({
     add: 'Add',
     fullscreen: 'Fullscreen',
     exit: 'Exit',
+    maxLength: 'Max {len} characters',
+    minLength: 'Min {len} characters',
+    loading: 'Loading...',
   },
   admin: {
     balances: 'Balances',
@@ -459,8 +462,9 @@ export default flat({
         },
         staking: {
           title: 'Stake',
-          none: 'No return',
+          none: 'No return or slash',
           proration: 'Return Remaining Stake {unused}{symbol}',
+          slash: 'Slash Remaining Stake {unused}{symbol}',
         },
       },
       pause: {
@@ -592,6 +596,7 @@ export default flat({
     payments: 'No Payments',
     prices: 'No Prices',
     pricing: 'You haven’t added any prices you can add it',
+    summary: 'No Summary',
   },
   customer: {
     subscription: {

package/src/locales/zh.tsx

@@ -16,6 +16,9 @@ export default flat({
     add: '添加',
     fullscreen: '全屏',
     exit: '退出',
+    maxLength: '最多输入{len}个字符',
+    minLength: '最少输入{len}个字符',
+    loading: '加载中...',
   },
   admin: {
     balances: '余额',
@@ -450,8 +453,9 @@ export default flat({
         },
         staking: {
           title: '质押',
-          none: '不退还质押',
+          none: '不退还 / 罚没质押',
           proration: '退还剩余部分 {unused}{symbol}',
+          slash: '罚没剩余部分 {unused}{symbol}',
         },
       },
       pause: {
@@ -582,6 +586,7 @@ export default flat({
     payments: '没有付款记录',
     prices: '没有价格',
     pricing: '您还没有设置定价，您可以添加它',
+    summary: '没有摘要',
   },
   customer: {
     subscription: {