payment-kit 1.18.56 → 1.19.1

package/src/components/product/form.tsx

@@ -2,8 +2,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { FormInput } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
-import { Box, Stack, Typography } from '@mui/material';
-import { useFormContext, useWatch } from 'react-hook-form';
+import { Box, Stack, Typography, FormLabel, Select, MenuItem } from '@mui/material';
+import { useFormContext, useWatch, Controller } from 'react-hook-form';
 
 import Collapse from '../collapse';
 import MetadataForm from '../metadata/form';
@@ -19,10 +19,11 @@ type Props = {
   simple?: boolean;
 };
 
-export default function ProductForm(props: Props) {
+export default function ProductForm({ simple = false }: Props) {
   const { t } = useLocaleContext();
   const { control, setValue, formState } = useFormContext();
   const images = useWatch({ control, name: 'images' });
+  const productType = useWatch({ control, name: 'type' }) ?? '';
 
   const onUploaded = (result: any) => {
     if (result.url) {
@@ -34,77 +35,119 @@ export default function ProductForm(props: Props) {
   };
 
   return (
-    <Stack spacing={2} mb={3} direction="row" alignItems="flex-start">
-      <Stack spacing={2} flex={2} alignItems="flex-start">
-        <FormInput
-          name="name"
-          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'),
-            maxLength: {
-              value: 250,
-              message: t('common.maxLength', { len: 250 }),
-            },
-          }}
-          label={t('admin.product.description.label')}
-          placeholder={t('admin.product.description.placeholder')}
-          error={!!formState.errors.description}
-          helperText={formState.errors.description?.message as string}
-          multiline
-          minRows={2}
-          maxRows={4}
-          inputProps={{ maxLength: 250 }}
-        />
-        <Collapse trigger={t('admin.product.additional')}>
-          <Stack spacing={2} alignItems="flex-start">
-            <FormInput
-              name="statement_descriptor"
-              label={t('admin.product.statement_descriptor.label')}
-              rules={{
-                maxLength: { value: 22, message: t('common.maxLength', { len: 22 }) },
-                pattern: {
-                  value: /^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"’\\]*$/,
-                  message: t('common.latinOnly'),
-                },
-              }}
-            />
-            <FormInput
-              name="unit_label"
-              label={t('admin.product.unit_label.label')}
-              rules={{
-                maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
-              }}
-            />
-            {!props.simple && <ProductFeatures />}
-            {!props.simple && <MetadataForm title={t('common.metadata.label')} />}
-          </Stack>
-        </Collapse>
-      </Stack>
-      <Box flex={1}>
-        <Stack direction="column">
-          <Typography mb={1}>{t('admin.product.image.label')}</Typography>
+    <Stack
+      spacing={3}
+      sx={{
+        mb: 3,
+      }}>
+      <Controller
+        name="type"
+        control={control}
+        rules={{ required: true }}
+        render={({ field }) => (
+          <Box sx={{ width: '100%' }}>
+            <FormLabel sx={{ color: 'text.primary' }}>{t('admin.product.type.label')}</FormLabel>
+            <Select {...field} fullWidth size="small">
+              <MenuItem value="good">{t('admin.product.type.good')}</MenuItem>
+              <MenuItem value="service">{t('admin.product.type.service')}</MenuItem>
+              <MenuItem value="credit">{t('admin.product.type.credit')}</MenuItem>
+            </Select>
+          </Box>
+        )}
+      />
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: 'flex-start',
+          flex: 1,
+          gap: 2,
+        }}>
+        <Stack sx={{ flex: 1, gap: 2 }}>
+          <FormInput
+            name="name"
+            rules={{
+              required: t('admin.product.name.required'),
+              maxLength: {
+                value: 64,
+                message: t('common.maxLength', { len: 64 }),
+              },
+            }}
+            label={t('admin.product.name.label')}
+            required
+            placeholder={
+              productType === 'credit' ? t('admin.creditProduct.name.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'),
+              maxLength: {
+                value: 250,
+                message: t('common.maxLength', { len: 250 }),
+              },
+            }}
+            label={t('admin.product.description.label')}
+            placeholder={
+              productType === 'credit'
+                ? t('admin.creditProduct.description.placeholder')
+                : t('admin.product.description.placeholder')
+            }
+            error={!!formState.errors.description}
+            helperText={formState.errors.description?.message as string}
+            multiline
+            required
+            minRows={2}
+            maxRows={4}
+            inputProps={{ maxLength: 250 }}
+          />
+        </Stack>
+
+        <Box sx={{ width: '100%', maxWidth: 160 }}>
+          <Typography variant="body2" sx={{ mb: 1, fontWeight: 500 }}>
+            {t('admin.product.image.label')}
+          </Typography>
           <Uploader onUploaded={onUploaded} preview={images[0]} />
+        </Box>
+      </Stack>
+      <Collapse trigger={t('admin.product.additional')}>
+        <Stack
+          spacing={2}
+          sx={{
+            alignItems: 'flex-start',
+          }}>
+          <FormInput
+            name="statement_descriptor"
+            label={t('admin.product.statement_descriptor.label')}
+            rules={{
+              maxLength: { value: 22, message: t('common.maxLength', { len: 22 }) },
+              pattern: {
+                value: /^(?=.*[A-Za-z])[^\u4e00-\u9fa5<>"'\\]*$/,
+                message: t('common.latinOnly'),
+              },
+            }}
+          />
+          <FormInput
+            name="unit_label"
+            label={t('admin.product.unit_label.label')}
+            placeholder={
+              productType === 'credit'
+                ? t('admin.creditProduct.unitLabel.placeholder')
+                : t('admin.product.unit_label.placeholder')
+            }
+            rules={{
+              maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
+            }}
+          />
+          {!simple && <ProductFeatures />}
+          {!simple && <MetadataForm title={t('common.metadata.label')} color="inherit" />}
         </Stack>
-      </Box>
+      </Collapse>
     </Stack>
   );
 }
-
-ProductForm.defaultProps = {
-  simple: false,
-};

package/src/components/progress-bar.tsx

@@ -3,7 +3,7 @@ import LinearProgress from '@mui/material/LinearProgress';
 import * as React from 'react';
 
 type Props = {
-  pending: boolean;
+  pending?: boolean;
 };
 
 export default function ProgressBar({ pending = true }: Props) {

package/src/components/refund/actions.tsx

@@ -15,13 +15,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-RefundActions.defaultProps = {
-  variant: 'compact',
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange: () => {},
-};
-
-export default function RefundActions({ data, variant, onChange }: Props) {
+export default function RefundActions({ data, variant = 'compact', onChange = () => {} }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const [state, setState] = useSetState({

package/src/components/refund/list.tsx

@@ -10,7 +10,7 @@ import {
   useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { TRefundExpanded } from '@blocklet/payment-types';
-import { CircularProgress, Typography } from '@mui/material';
+import { Avatar, CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
@@ -78,25 +78,16 @@ const getListKey = (props: ListProps) => {
   return 'refunds';
 };
 
-RefundList.defaultProps = {
-  features: {
+export default function RefundList({
+  customer_id = '',
+  invoice_id = '',
+  subscription_id = '',
+  status = '',
+  features = {
     customer: true,
     filter: true,
   },
-  customer_id: '',
-  invoice_id: '',
-  status: '',
-  subscription_id: '',
-  payment_intent_id: '',
-};
-
-export default function RefundList({
-  customer_id,
-  invoice_id,
-  subscription_id,
-  status,
-  features,
-  payment_intent_id,
+  payment_intent_id = '',
 }: ListProps) {
   const { t } = useLocaleContext();
   const listKey = getListKey({ customer_id, invoice_id, subscription_id, payment_intent_id });
@@ -139,7 +130,11 @@ export default function RefundList({
           const item = data.list[index] as TRefundExpanded;
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography component="strong" fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                }}>
                 {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>
@@ -148,6 +143,24 @@ export default function RefundList({
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography sx={{ display: 'flex', alignItems: 'center', whiteSpace: 'nowrap' }}>
+                <Avatar src={item.paymentMethod.logo} sx={{ width: 18, height: 18, mr: 1 }} />
+                {item.paymentMethod.name}
+              </Typography>
+            </Link>
+          );
+        },
+      },
+    },
     {
       label: t('common.status'),
       name: 'status',

package/src/components/section/header.tsx

@@ -8,16 +8,20 @@ type Props = {
   mt?: number;
 };
 
-export default function SectionHeader(props: Props) {
+export default function SectionHeader({ title, children = null, mb = 1.5, mt = 1.5 }: Props) {
   return (
     <Stack
       className="section-header"
       direction="row"
-      justifyContent="space-between"
-      alignItems="center"
-      flexWrap="wrap"
-      gap={1}
-      sx={{ mb: props.mb, mt: props.mt, pb: 1 }}>
+      sx={{
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 1,
+        mb,
+        mt,
+        pb: 1,
+      }}>
       <Typography
         variant="h3"
         sx={{
@@ -27,15 +31,9 @@ export default function SectionHeader(props: Props) {
           },
         }}
         component="div">
-        {props.title}
+        {title}
       </Typography>
-      {props.children}
+      {children}
     </Stack>
   );
 }
-
-SectionHeader.defaultProps = {
-  children: null,
-  mb: 1.5,
-  mt: 1.5,
-};

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

@@ -56,7 +56,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
 
   return (
     <Root sx={{ width: 400 }}>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <Typography className="form-title">{t('admin.subscription.cancel.at.title')}</Typography>
         <Stack>
           <RadioGroup>
@@ -114,7 +119,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
         </Stack>
       </Stack>
       <Divider sx={{ my: 1 }} />
-      <Stack direction="row" spacing={3} alignItems="flex-start">
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <Typography className="form-title">{t('admin.subscription.cancel.refund.title')}</Typography>
         <Stack>
           <RadioGroup>
@@ -152,7 +162,12 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
       {data.paymentMethod.type === 'arcblock' && (
         <>
           <Divider sx={{ my: 1 }} />
-          <Stack direction="row" spacing={3} alignItems="flex-start">
+          <Stack
+            direction="row"
+            spacing={3}
+            sx={{
+              alignItems: 'flex-start',
+            }}>
             <Typography className="form-title">{t('admin.subscription.cancel.staking.title')}</Typography>
             <RadioGroup>
               <FormControlLabel
@@ -204,8 +219,10 @@ export default function SubscriptionCancelForm({ data }: { data: TSubscriptionEx
                   placeholder={t('admin.subscription.cancel.staking.slashReason')}
                   error={!!(formState.errors as any)?.cancel?.slashReason}
                   helperText={(formState.errors as any)?.cancel?.slashReason?.message}
-                  inputProps={{
-                    maxLength: 200,
+                  slotProps={{
+                    htmlInput: {
+                      maxLength: 200,
+                    },
                   }}
                 />
               )}

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

@@ -20,15 +20,11 @@ type Props = {
   onChange: (action: string) => void;
 };
 
-SubscriptionActionsInner.defaultProps = {
-  variant: 'compact',
-};
-
 const fetchStakingData = (id: string, time: string): Promise<{ return_amount: string; slash_amount: string }> => {
   return api.get(`/api/subscriptions/${id}/staking?time=${encodeURIComponent(time)}`).then((res: any) => res.data);
 };
 
-function SubscriptionActionsInner({ data, variant, onChange }: Props) {
+function SubscriptionActionsInner({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { reset, getValues, setError, handleSubmit } = useFormContext();
@@ -197,7 +193,14 @@ function SubscriptionActionsInner({ data, variant, onChange }: Props) {
   );
 }
 
-export default function SubscriptionActions(props: Props) {
+export default function SubscriptionActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
+
   const methods = useForm({
     defaultValues: {
       cancel: {
@@ -224,7 +227,3 @@ export default function SubscriptionActions(props: Props) {
     </FormProvider>
   );
 }
-
-SubscriptionActions.defaultProps = {
-  variant: 'compact',
-};

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

@@ -9,9 +9,22 @@ export default function SubscriptionPauseForm() {
 
   return (
     <Stack direction="column" spacing={3} sx={{ width: 400 }}>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
-        <Typography flex={1}>{t('admin.subscription.pause.type.title')}</Typography>
-        <Stack flex={2}>
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
+        <Typography
+          sx={{
+            flex: 1,
+          }}>
+          {t('admin.subscription.pause.type.title')}
+        </Typography>
+        <Stack
+          sx={{
+            flex: 2,
+          }}>
           <Controller
             name="pause.type"
             control={control}
@@ -50,9 +63,22 @@ export default function SubscriptionPauseForm() {
           )}
         </Stack>
       </Stack>
-      <Stack direction="row" spacing={3} alignItems="flex-start">
-        <Typography flex={1}>{t('admin.subscription.pause.behavior.title')}</Typography>
-        <Stack flex={2}>
+      <Stack
+        direction="row"
+        spacing={3}
+        sx={{
+          alignItems: 'flex-start',
+        }}>
+        <Typography
+          sx={{
+            flex: 1,
+          }}>
+          {t('admin.subscription.pause.behavior.title')}
+        </Typography>
+        <Stack
+          sx={{
+            flex: 2,
+          }}>
           <Controller
             name="pause.behavior"
             control={control}

package/src/components/subscription/actions/slash-stake.tsx

@@ -34,10 +34,12 @@ export default function SlashStakeForm({ data, stakeValue }: { data: TSubscripti
             placeholder={t('admin.subscription.cancel.staking.slashReason')}
             error={!!(formState.errors as any)?.slashStake?.slashReason}
             helperText={(formState.errors as any)?.slashStake?.slashReason?.message}
-            inputProps={{
-              maxLength: 200,
-            }}
             sx={{ mt: 1 }}
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
+            }}
           />
         )}
       />

package/src/components/subscription/description.tsx

@@ -10,11 +10,21 @@ type Props = {
   maxLength?: number;
 };
 
-export default function SubscriptionDescription({ subscription, variant, hideSubscription, maxLength = 80 }: Props) {
+export default function SubscriptionDescription({
+  subscription,
+  variant = 'body1',
+  hideSubscription = false,
+  maxLength = 80,
+}: Props) {
   const { isMobile } = useMobile();
   if (subscription.description) {
     return (
-      <Stack direction="row" alignItems="center" spacing={1}>
+      <Stack
+        direction="row"
+        spacing={1}
+        sx={{
+          alignItems: 'center',
+        }}>
         <Typography variant={variant} className="subscription-description">
           <TruncatedText text={subscription.description} maxLength={maxLength} useWidth />
         </Typography>
@@ -33,9 +43,3 @@ export default function SubscriptionDescription({ subscription, variant, hideSub
     </Typography>
   );
 }
-
-SubscriptionDescription.defaultProps = {
-  variant: 'body1',
-  hideSubscription: false,
-  maxLength: 80,
-};

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

@@ -15,13 +15,9 @@ type ListProps = {
   mode?: 'admin' | 'customer';
 };
 
-SubscriptionItemList.defaultProps = {
-  mode: 'customer',
-};
-
 const size = { width: 48, height: 48 };
 
-export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
+export default function SubscriptionItemList({ data, currency, mode = 'customer' }: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
   const isAdmin = mode === 'admin';
@@ -35,12 +31,15 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
           const item = data[index] as TSubscriptionItemExpanded;
           return (
             <Stack
-              flexDirection="row"
-              flexWrap="wrap"
-              alignItems="center"
-              gap={{
-                xs: 1,
-                sm: 2,
+              sx={{
+                flexDirection: 'row',
+                flexWrap: 'wrap',
+                alignItems: 'center',
+
+                gap: {
+                  xs: 1,
+                  sm: 2,
+                },
               }}>
               {item.price.product.images.length > 0 ? (
                 // @ts-ignore
@@ -58,12 +57,20 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
               )}
               {isAdmin ? (
                 <>
-                  <Typography color="text.primary" fontWeight={600}>
+                  <Typography
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: 600,
+                    }}>
                     <Link to={`/admin/products/${item?.price.product_id}`}>
                       <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
                     </Link>
                   </Typography>
-                  <Typography color="text.secondary" whiteSpace="nowrap">
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      whiteSpace: 'nowrap',
+                    }}>
                     <Link to={`/admin/products/${item?.price.id}`}>
                       {formatPrice(item.price, currency, item?.price.product.unit_label)}
                     </Link>
@@ -71,10 +78,18 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
                 </>
               ) : (
                 <>
-                  <Typography color="text.primary" fontWeight={600}>
+                  <Typography
+                    sx={{
+                      color: 'text.primary',
+                      fontWeight: 600,
+                    }}>
                     <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
                   </Typography>
-                  <Typography color="text.secondary" whiteSpace="nowrap">
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      whiteSpace: 'nowrap',
+                    }}>
                     {formatPrice(item.price, currency, item?.price.product.unit_label)}
                   </Typography>
                 </>
@@ -94,7 +109,7 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
         },
       },
     },
-    {
+    currency.type !== 'credit' && {
       label: t('common.quantity'),
       name: 'quantity',
       options: {