payment-kit 1.14.30 → 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

@@ -64,7 +64,7 @@ export default function CurrentSubscriptions({
 
   const showLoadingMore = useDelayedLoading(loadingMore);
 
-  if (loading || !data) {
+  if (!data || loading) {
     return <CircularProgress />;
   }
 
@@ -75,12 +75,13 @@ export default function CurrentSubscriptions({
     <Stack direction="column" spacing={2} sx={{ mt: 2 }}>
       {data.list?.length > 0 ? (
         <>
-          <Box
+          <Stack
             ref={listRef}
+            spacing={2}
             sx={{
               maxHeight: {
                 xs: '100%',
-                md: '450px',
+                md: '500px',
               },
               overflowY: 'auto',
             }}>
@@ -98,7 +99,7 @@ export default function CurrentSubscriptions({
                     padding: 1.5,
                     background: 'var(--backgrounds-bg-subtle, #F9FAFB)',
                     '&:hover': {
-                      backgroundColor: 'grey.50',
+                      backgroundColor: 'var(--backgrounds-bg-highlight, #eff6ff)',
                       transition: 'background-color 200ms linear',
                       cursor: 'pointer',
                     },
@@ -215,7 +216,7 @@ export default function CurrentSubscriptions({
                 {t('common.loadingMore', { resource: t('admin.subscriptions') })}
               </Box>
             )}
-          </Box>
+          </Stack>
           {isMobile && (
             <Box>
               {hasMore && (

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: {

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

@@ -88,6 +88,17 @@ export default function InvoiceDetail(props: { id: string }) {
   const handleEditMetadata = () => {
     setState((prev) => ({ editing: { ...prev.editing, metadata: true } }));
   };
+
+  const getDescription = (description: string) => {
+    let desc = description;
+    if (desc.startsWith('Slash stake')) {
+      desc = t('payment.invoice.reason.slashStake');
+    }
+    if (desc.startsWith('Subscription ')) {
+      desc = t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`);
+    }
+    return desc;
+  };
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -215,6 +226,10 @@ export default function InvoiceDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow
                 label={t('admin.invoice.number')}
@@ -224,7 +239,7 @@ export default function InvoiceDetail(props: { id: string }) {
               />
               <InfoRow
                 label={t('admin.invoice.description')}
-                value={data.description}
+                value={getDescription(data.description || '')}
                 direction={InfoDirection}
                 alignItems={InfoAlignItems}
               />
@@ -325,7 +340,7 @@ export default function InvoiceDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.summary')} />
             <Box className="section-body">
-              <InvoiceTable invoice={data} />
+              <InvoiceTable invoice={data} emptyNodeText={t('empty.summary')} />
             </Box>
           </Box>
           <Divider />

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

@@ -202,6 +202,10 @@ export default function SubscriptionDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow
                 label={t('common.customer')}

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

@@ -283,6 +283,10 @@ export default function CustomerDetail(props: { id: string }) {
                     md: 'repeat(2, 1fr)',
                     lg: 'repeat(3, 1fr)',
                   },
+                  gap: {
+                    xs: 0,
+                    md: 2,
+                  },
                 }}>
                 <InfoRow
                   label={t('admin.customer.name')}

package/src/pages/admin/customers/customers/index.tsx

@@ -112,7 +112,7 @@ export default function CustomersList() {
         sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TCustomer;
-          return <Link to={`/admin/customers/${item.id}`}>{formatTime(item.updated_at)}</Link>;
+          return <Link to={`/admin/customers/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },

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

@@ -219,6 +219,10 @@ export default function PaymentIntentDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow label={t('common.amount')} value={total} direction={InfoDirection} alignItems={InfoAlignItems} />
               <InfoRow

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

@@ -216,6 +216,10 @@ export default function PayoutDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow label={t('common.amount')} value={total} direction={InfoDirection} alignItems={InfoAlignItems} />
               <InfoRow

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

@@ -218,6 +218,10 @@ export default function RefundDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow
                 label={t('common.amount')}

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

@@ -298,6 +298,10 @@ export default function PaymentLinkDetail(props: { id: string }) {
                       md: 'repeat(2, 1fr)',
                       lg: 'repeat(3, 1fr)',
                     },
+                    gap: {
+                      xs: 0,
+                      md: 2,
+                    },
                   }}>
                   <InfoRow
                     sizes={[1, 1]}

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

@@ -223,6 +223,10 @@ export default function PriceDetail(props: { id: string }) {
                   md: 'repeat(2, 1fr)',
                   lg: 'repeat(3, 1fr)',
                 },
+                gap: {
+                  xs: 0,
+                  md: 2,
+                },
               }}>
               <InfoRow
                 label={t('admin.price.type')}

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

@@ -263,6 +263,10 @@ export default function PricingTableDetail(props: { id: string }) {
                       md: 'repeat(2, 1fr)',
                       lg: 'repeat(3, 1fr)',
                     },
+                    gap: {
+                      xs: 0,
+                      md: 2,
+                    },
                   }}>
                   <InfoRow
                     sizes={[1, 1]}

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

@@ -260,6 +260,10 @@ export default function ProductDetail(props: { id: string }) {
                     md: 'repeat(2, 1fr)',
                     lg: 'repeat(3, 1fr)',
                   },
+                  gap: {
+                    xs: 0,
+                    md: 2,
+                  },
                 }}>
                 <InfoRow
                   label={t('admin.product.name.label')}

package/src/pages/checkout/pricing-table.tsx

@@ -1,4 +1,3 @@
-import Center from '@arcblock/ux/lib/Center';
 import { CheckoutTable } from '@blocklet/payment-react';
 import Header from '@blocklet/ui-react/lib/Header';
 import { Box } from '@mui/material';
@@ -26,9 +25,16 @@ export default function PricingTablePage({ id }: Props) {
         hideNavMenu={undefined}
         maxWidth={false}
       />
-      <Center relative="parent">
+
+      <Box
+        sx={{
+          pt: {
+            xs: 0,
+            md: '60px',
+          },
+        }}>
         <CheckoutTable id={id} mode="standalone" />
-      </Center>
+      </Box>
     </Box>
   );
 }

package/src/pages/customer/index.tsx

@@ -6,6 +6,7 @@ import {
   formatBNStr,
   formatError,
   getPrefix,
+  TruncatedText,
   useMobile,
   usePaymentContext,
 } from '@blocklet/payment-react';
@@ -91,6 +92,7 @@ export default function CustomerHome() {
   const { events } = useSessionContext();
   const { settings } = usePaymentContext();
   const [currency, setCurrency] = useState(settings?.baseCurrency);
+  const [subscriptionLoading, setSubscriptionLoading] = useState(false);
   const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
 
   const { livemode, setLivemode } = usePaymentContext();
@@ -151,7 +153,11 @@ export default function CustomerHome() {
   };
 
   const onToggleActive = (e: SelectChangeEvent) => {
+    setSubscriptionLoading(true);
     setState({ onlyActive: e.target.value === 'active' });
+    setTimeout(() => {
+      setSubscriptionLoading(false);
+    }, 300);
   };
 
   const handleCurrencyChange = (e: SelectChangeEvent) => {
@@ -185,20 +191,24 @@ export default function CustomerHome() {
         </FormControl>
       </Box>
       <Box className="section-body">
-        <CurrentSubscriptions
-          id={data.id}
-          onlyActive={state.onlyActive}
-          changeActive={(v) => setState({ onlyActive: v })}
-          status={state.onlyActive ? 'active,trialing' : 'active,trialing,paused,past_due,canceled'}
-          style={{
-            cursor: 'pointer',
-          }}
-          onClickSubscription={(subscription) => {
-            startTransition(() => {
-              navigate(`/customer/subscription/${subscription.id}`);
-            });
-          }}
-        />
+        {subscriptionLoading ? (
+          <Box>{t('common.loading')}</Box>
+        ) : (
+          <CurrentSubscriptions
+            id={data.id}
+            onlyActive={state.onlyActive}
+            changeActive={(v) => setState({ onlyActive: v })}
+            status={state.onlyActive ? 'active,trialing' : 'active,trialing,paused,past_due,canceled'}
+            style={{
+              cursor: 'pointer',
+            }}
+            onClickSubscription={(subscription) => {
+              startTransition(() => {
+                navigate(`/customer/subscription/${subscription.id}`);
+              });
+            }}
+          />
+        )}
       </Box>
     </Box>
   );
@@ -380,21 +390,22 @@ export default function CustomerHome() {
         />
         <InfoRow
           label={t('admin.customer.address.city')}
-          value={data.address?.city}
+          value={<TruncatedText text={data.address?.city} maxLength={280} useWidth />}
+          // value={data.address?.city}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
         />
         <InfoRow
           label={t('admin.customer.address.line1')}
-          value={data.address?.line1}
+          value={<TruncatedText text={data.address?.line1} maxLength={280} useWidth />}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"
         />
         <InfoRow
           label={t('admin.customer.address.line2')}
-          value={data.address?.line2}
+          value={<TruncatedText text={data.address?.line2} maxLength={280} useWidth />}
           sizes={[1, 1]}
           alignItems="normal"
           direction="column"

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

@@ -101,6 +101,9 @@ export default function CustomerInvoiceDetail() {
     return <CircularProgress />;
   }
 
+  const isSlash =
+    data.paymentMethod?.type === 'arcblock' && data.paymentIntent?.payment_details?.arcblock?.type === 'slash';
+
   return (
     <InvoiceDetailRoot direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" justifyContent="space-between">
@@ -209,6 +212,10 @@ export default function CustomerInvoiceDetail() {
               md: 'repeat(2, 1fr)',
               lg: 'repeat(3, 1fr)',
             },
+            gap: {
+              xs: 0,
+              md: 2,
+            },
           }}>
           <InfoRow
             label={t('admin.invoice.description')}
@@ -282,22 +289,26 @@ export default function CustomerInvoiceDetail() {
           )}
         </Stack>
       </Box>
-      <Divider />
-      <Box className="section">
-        <Typography variant="h3" mb={1.5} className="section-header">
-          {t('payment.customer.products')}
-        </Typography>
-        <InvoiceTable invoice={data} simple />
-      </Box>
-      <Divider />
-      <Box className="section">
-        <Typography variant="h3" className="section-header">
-          {t('admin.refunds')}
-        </Typography>
-        <Box className="section-body">
-          <CustomerRefundList invoice_id={data.id} type="table" />
-        </Box>
-      </Box>
+      {!isSlash && (
+        <>
+          <Divider />
+          <Box className="section">
+            <Typography variant="h3" mb={1.5} className="section-header">
+              {t('payment.customer.products')}
+            </Typography>
+            <InvoiceTable invoice={data} simple />
+          </Box>
+          <Divider />
+          <Box className="section">
+            <Typography variant="h3" className="section-header">
+              {t('admin.refunds')}
+            </Typography>
+            <Box className="section-body">
+              <CustomerRefundList invoice_id={data.id} type="table" />
+            </Box>
+          </Box>
+        </>
+      )}
     </InvoiceDetailRoot>
   );
 }

package/src/pages/customer/invoice/past-due.tsx

@@ -72,7 +72,7 @@ export default function CustomerInvoicePastDue() {
   };
 
   return (
-    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: '960px' }}>
+    <Stack direction="column" spacing={3} sx={{ my: 2 }}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Stack
           direction="row"
@@ -100,10 +100,11 @@ export default function CustomerInvoicePastDue() {
               customer_id={data.id}
               subscription_id={subscriptionId}
               currency_id={currencyId}
-              pageSize={100}
+              pageSize={10}
               status="uncollectible"
               target="_blank"
               action="pay"
+              type="table"
             />
           </Box>
         </Box>