payment-kit 1.18.56 → 1.19.1

package/src/components/passport/actions.tsx

@@ -11,11 +11,14 @@ type Props = {
   variant?: string;
 };
 
-PassportActions.defaultProps = {
-  variant: 'compact',
-};
+export default function PassportActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
 
-export default function PassportActions(props: Props) {
   const { t } = useLocaleContext();
 
   const [state, setState] = useSetState({
@@ -26,6 +29,7 @@ export default function PassportActions(props: Props) {
   const onUnassign = async () => {
     try {
       setState({ loading: true });
+      // eslint-disable-next-line react/prop-types
       await api.delete(`/api/passports/assign/${props.data.name}`).then((res) => res.data);
       Toast.success(t('common.saved'));
     } catch (err) {
@@ -46,6 +50,7 @@ export default function PassportActions(props: Props) {
 
   return (
     <ClickBoundary>
+      {/* eslint-disable-next-line react/prop-types */}
       <Actions variant={props.variant} actions={actions} />
       {state.action === 'unassign' && (
         <ConfirmDialog

package/src/components/payment-currency/add.tsx

@@ -179,8 +179,17 @@ export default function PaymentCurrencyAdd({
                     }}
                   />
                   <Stack>
-                    <Typography fontWeight={500}>{option.name}</Typography>
-                    <Typography variant="caption" color="text.secondary">
+                    <Typography
+                      sx={{
+                        fontWeight: 500,
+                      }}>
+                      {option.name}
+                    </Typography>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                      }}>
                       {option.symbol}
                     </Typography>
                   </Stack>
@@ -189,7 +198,11 @@ export default function PaymentCurrencyAdd({
               isOptionEqualToValue={(option, value) => option.address === value.address}
             />
             <Divider sx={{ my: 3 }}>
-              <Typography variant="caption" color="text.secondary">
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                }}>
                 {t('admin.paymentCurrency.orManualInput')}
               </Typography>
             </Divider>

package/src/components/payment-currency/form.tsx

@@ -10,10 +10,6 @@ type TPaymentCurrencyFormProps = {
   disableKeys?: string[];
 };
 
-PaymentCurrencyForm.defaultProps = {
-  disableKeys: [],
-};
-
 export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurrencyFormProps) {
   const { t } = useLocaleContext();
   const { control, setValue } = useFormContext();
@@ -29,7 +25,12 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
   };
 
   return (
-    <Stack direction="column" alignItems="flex-start" spacing={2}>
+    <Stack
+      direction="column"
+      spacing={2}
+      sx={{
+        alignItems: 'flex-start',
+      }}>
       <FormInput
         key="name"
         name="name"
@@ -38,6 +39,7 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={disableKeys.includes('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         key="description"
@@ -47,6 +49,7 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={disableKeys.includes('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         key="contract"
@@ -58,7 +61,12 @@ export default function PaymentCurrencyForm({ disableKeys = [] }: TPaymentCurren
         disabled={disableKeys.includes('contract')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} />
       </Stack>
     </Stack>

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

@@ -27,13 +27,6 @@ type Props = {
   onChange: (action: string) => void;
 };
 
-PaymentIntentActionsInner.defaultProps = {
-  variant: 'compact',
-};
-PaymentIntentActions.defaultProps = {
-  variant: 'compact',
-};
-
 const fetchRefundData = (id: string) => {
   return api.get(`/api/payment-intents/${id}/refundable-amount`).then((res) => res.data);
 };
@@ -64,7 +57,13 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
     return true;
   };
   return (
-    <Stack direction="column" spacing={1} alignItems="flex-start" sx={{ width: 400 }}>
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={{
+        alignItems: 'flex-start',
+        width: 400,
+      }}>
       <Controller
         name="refund.reason"
         control={control}
@@ -103,7 +102,6 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
           </RadioGroup>
         )}
       />
-
       <FormControl fullWidth component="fieldset" variant="outlined">
         <Controller
           name="refund.amount"
@@ -121,8 +119,10 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
               placeholder={t('admin.paymentIntent.refundForm.amount')}
               error={!!(errors as any)?.refund?.amount}
               helperText={(errors as any)?.refund?.amount?.message}
-              InputProps={{
-                endAdornment: <InputAdornment position="end">{data.paymentCurrency.symbol}</InputAdornment>,
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">{data.paymentCurrency.symbol}</InputAdornment>,
+                },
               }}
             />
           )}
@@ -135,7 +135,6 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
           })}
         </FormHelperText>
       </FormControl>
-
       <Controller
         name="refund.description"
         control={control}
@@ -155,8 +154,10 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
             placeholder={t('admin.paymentIntent.refundForm.description')}
             error={!!(errors as any)?.refund?.description}
             helperText={(errors as any)?.refund?.description?.message}
-            inputProps={{
-              maxLength: 200,
+            slotProps={{
+              htmlInput: {
+                maxLength: 200,
+              },
             }}
           />
         )}
@@ -165,7 +166,7 @@ function RefundForm({ data, refundMaxAmount }: { data: TPaymentIntentExpanded; r
   );
 }
 
-export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
+export function PaymentIntentActionsInner({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
   const { reset, getValues, setValue, handleSubmit } = useFormContext();
@@ -262,7 +263,14 @@ export function PaymentIntentActionsInner({ data, variant, onChange }: Props) {
   );
 }
 
-export default function PaymentIntentActions(props: Props) {
+export default function PaymentIntentActions(rawProps: Props) {
+  const props = Object.assign(
+    {
+      variant: 'compact',
+    },
+    rawProps
+  );
+
   const methods = useForm({
     mode: 'onChange',
     defaultValues: {

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

@@ -10,7 +10,7 @@ import {
   useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } 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';
@@ -66,16 +66,14 @@ const getListKey = (props: ListProps) => {
   return 'payments';
 };
 
-PaymentList.defaultProps = {
-  features: {
+export default function PaymentList({
+  customer_id = '',
+  invoice_id = '',
+  features = {
     customer: true,
     filter: true,
   },
-  customer_id: '',
-  invoice_id: '',
-};
-
-export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
+}: ListProps) {
   const { t } = useLocaleContext();
 
   const listKey = getListKey({ customer_id, invoice_id });
@@ -120,7 +118,12 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
           const highlight = item.amount_received === '0' && item.status !== 'canceled';
           return (
             <Link to={`/admin/payments/${item.id}`}>
-              <Typography component="strong" sx={{ color: highlight ? 'warning.main' : 'inherit' }} fontWeight={600}>
+              <Typography
+                component="strong"
+                sx={{
+                  fontWeight: 600,
+                  color: highlight ? 'warning.main' : 'inherit',
+                }}>
                 {formatBNStr(
                   item.amount_received === '0' ? item.amount : item.amount_received,
                   item?.paymentCurrency.decimal
@@ -133,6 +136,24 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          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/payment-link/actions.tsx

@@ -18,11 +18,7 @@ type Props = {
   variant?: LiteralUnion<'compact' | 'normal', string>;
 };
 
-PaymentLinkActions.defaultProps = {
-  variant: 'compact',
-};
-
-export default function PaymentLinkActions({ data, variant, onChange }: Props) {
+export default function PaymentLinkActions({ data, variant = 'compact', onChange }: Props) {
   const { t } = useLocaleContext();
   const [state, setState] = useSetState({
     action: '',

package/src/components/payment-link/after-pay.tsx

@@ -54,8 +54,10 @@ export default function AfterPay() {
               error={!!get(errors, field.name)}
               fullWidth
               size="small"
-              inputProps={{
-                maxLength: 200,
+              slotProps={{
+                htmlInput: {
+                  maxLength: 200,
+                },
               }}
             />
           )}

package/src/components/payment-link/before-pay.tsx

@@ -16,7 +16,7 @@ import ProductSelect from './product-select';
 export default function BeforePay({
   triggerError = () => {},
 }: {
-  triggerError: (keys: { [key: string]: boolean }) => void;
+  triggerError?: (keys: { [key: string]: boolean }) => void;
 }) {
   const { t } = useLocaleContext();
   const [params, setParams] = useSearchParams();
@@ -123,12 +123,20 @@ export default function BeforePay({
             );
           })}
           {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).recurring) && (
-            <Typography color="error" fontSize="small">
+            <Typography
+              color="error"
+              sx={{
+                fontSize: 'small',
+              }}>
               {t('admin.paymentLink.recurringNotAligned')}
             </Typography>
           )}
           {items.fields.some((_, index) => !isPriceAligned(items.fields as any[], products, index).currency) && (
-            <Typography color="error" fontSize="small">
+            <Typography
+              color="error"
+              sx={{
+                fontSize: 'small',
+              }}>
               {t('admin.paymentLink.currencyNotAligned')}
             </Typography>
           )}
@@ -248,9 +256,11 @@ export default function BeforePay({
             <TextField
               {...field}
               size="small"
-              InputProps={{ endAdornment: t('common.days') }}
               helperText={get(errors, 'subscription_data.trial_period_days')?.message as string}
               error={!!get(errors, 'subscription_data.trial_period_days')}
+              slotProps={{
+                input: { endAdornment: t('common.days') },
+              }}
             />
           )}
         />

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

@@ -75,7 +75,11 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
           ]}
         />
       </ClickBoundary>
-      <Stack direction="column" alignItems="flex-start">
+      <Stack
+        direction="column"
+        sx={{
+          alignItems: 'flex-start',
+        }}>
         <InfoCard
           logo={product.images[0]}
           name={product.name}
@@ -85,10 +89,14 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
           name={getFieldName('quantity')}
           control={control}
           render={({ field }) => (
-            <Stack direction="row" alignItems="center" mt={1}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                mt: 1,
+              }}>
               <TextField
                 sx={{ width: 80, mr: 1 }}
-                inputProps={{ style: { padding: '4px 8px' } }}
                 size="small"
                 type="number"
                 {...field}
@@ -98,6 +106,9 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                     field.onChange(intValue);
                   }
                 }}
+                slotProps={{
+                  htmlInput: { style: { padding: '4px 8px' } },
+                }}
               />
               <FormLabel style={{ marginBottom: 0 }}>{t('common.quantity')}</FormLabel>
             </Stack>
@@ -118,7 +129,13 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         />
         {adjustable && (
           <>
-            <Stack direction="row" alignItems="center" mt={1} ml={6}>
+            <Stack
+              direction="row"
+              sx={{
+                alignItems: 'center',
+                mt: 1,
+                ml: 6,
+              }}>
               <Typography sx={{ mr: 0.5 }}>Between</Typography>
               <Controller
                 name={getFieldName('adjustable_quantity.minimum')}
@@ -131,10 +148,12 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                 render={({ field }) => (
                   <TextField
                     sx={{ width: 40 }}
-                    inputProps={{ style: { padding: '4px 8px' } }}
                     size="small"
                     error={!!adjustableError}
                     {...field}
+                    slotProps={{
+                      htmlInput: { style: { padding: '4px 8px' } },
+                    }}
                   />
                 )}
               />
@@ -152,10 +171,12 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
                 render={({ field }) => (
                   <TextField
                     sx={{ width: 40 }}
-                    inputProps={{ style: { padding: '4px 8px' } }}
                     size="small"
                     error={!!adjustableError}
                     {...field}
+                    slotProps={{
+                      htmlInput: { style: { padding: '4px 8px' } },
+                    }}
                   />
                 )}
               />

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

@@ -1,10 +1,16 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { useFullscreen, useSize } from 'ahooks';
 import IframeResizer from 'iframe-resizer-react';
 import { useTheme } from '@mui/material';
 import Chrome from './chrome';
 
-const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; version?: number }, ref) => {
+export default function PaymentLinkPreview({
+  ref = undefined,
+  id,
+  version = 1,
+}: { id: string; version?: number } & {
+  ref?: React.RefObject<unknown | null>;
+}) {
   const theme = useTheme();
   const innerRef = useRef(null);
   const size = useSize(innerRef);
@@ -50,10 +56,4 @@ const PaymentLinkPreview = forwardRef(({ id, version = 1 }: { id: string; versio
       )}
     </div>
   );
-});
-
-PaymentLinkPreview.defaultProps = {
-  version: 1,
-};
-
-export default PaymentLinkPreview;
+}

package/src/components/payment-link/product-select.tsx

@@ -7,40 +7,75 @@ import cloneDeep from 'lodash/cloneDeep';
 import { useState } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
+import Empty from '@arcblock/ux/lib/Empty';
 import { useProductsContext } from '../../contexts/products';
 
 type Props = {
   mode: LiteralUnion<'waiting' | 'selecting' | 'inline', string>;
   hasSelected: (price: any) => boolean;
   onSelect: (priceId: string) => void;
+  addProduct?: boolean;
+  filterPrice?: (price: any) => boolean;
 };
 
-const filterPrices = (product: TProductExpanded, hasSelected: (price: any) => boolean) => {
-  product.prices = product.prices.filter((x) => x.active && !hasSelected(x));
+const filterPrices = (
+  product: TProductExpanded,
+  hasSelected: (price: any) => boolean,
+  filterPrice?: (price: any) => boolean
+) => {
+  product.prices = product.prices.filter((x) => {
+    const isActive = x.active;
+    const notSelected = !hasSelected(x);
+    const customFilter = filterPrice ? filterPrice(x) : true;
+    return isActive && notSelected && customFilter;
+  });
   return product;
 };
 
-const filterProducts = (products: TProductExpanded[], hasSelected: (price: any) => boolean) => {
-  const filtered = cloneDeep(products).map((x) => filterPrices(x, hasSelected));
+const filterProducts = (
+  products: TProductExpanded[],
+  hasSelected: (price: any) => boolean,
+  filterPrice?: (price: any) => boolean
+) => {
+  const filtered = cloneDeep(products).map((x) => filterPrices(x, hasSelected, filterPrice));
   return filtered.filter((x) => x.prices.length);
 };
 
-export default function ProductSelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+export default function ProductSelect({
+  mode: initialMode,
+  hasSelected,
+  onSelect,
+  addProduct = true,
+  filterPrice = () => true,
+}: Props) {
   const { t } = useLocaleContext();
   const [mode, setMode] = useState(initialMode);
   const { products } = useProductsContext();
   const { settings } = usePaymentContext();
+  const [value, setValue] = useState('');
   const size = { width: 16, height: 16 };
 
   const handleSelect = (e: any) => {
+    setValue(e.target.value);
     setMode('waiting');
     onSelect(e.target.value);
   };
 
-  const items = (callback?: any) =>
-    filterProducts(products, hasSelected).map((product) => [
+  const items = (callback?: any) => {
+    const filteredProducts = filterProducts(products, hasSelected, filterPrice);
+
+    if (filteredProducts.length === 0) {
+      return <Empty>{t('admin.product.empty')}</Empty>;
+    }
+
+    return filteredProducts.map((product) => [
       <ListSubheader key={product.id} sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-        <Stack direction="row" alignItems="center" spacing={0.5}>
+        <Stack
+          direction="row"
+          spacing={0.5}
+          sx={{
+            alignItems: 'center',
+          }}>
           {product.images[0] ? (
             <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />
           ) : (
@@ -65,8 +100,17 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
                 callback(price);
               }
             }}>
-            <Typography color="text.primary">{formatPrice(price, currency!)}</Typography>
-            <Typography color="text.secondary" sx={{ ml: 2 }}>
+            <Typography
+              sx={{
+                color: 'text.primary',
+              }}>
+              {formatPrice(price, currency!)}
+            </Typography>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                ml: 2,
+              }}>
               {getPriceCurrencyOptions(price).length > 1
                 ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`
                 : ''}
@@ -75,6 +119,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
         );
       }),
     ]);
+  };
 
   if (mode === 'inline') {
     return <>{items(onSelect)}</>;
@@ -82,11 +127,20 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
 
   if (mode === 'selecting') {
     return (
-      <Select value="" fullWidth size="small" onChange={handleSelect} MenuProps={{ style: { maxHeight: 480 } }}>
-        <MenuItem value="add">
-          <AddOutlined />
-          {t('admin.product.add')}
-        </MenuItem>
+      <Select
+        fullWidth
+        size="small"
+        onChange={handleSelect}
+        value={value}
+        MenuProps={{
+          style: { maxHeight: 480 },
+        }}>
+        {addProduct && (
+          <MenuItem value="add">
+            <AddOutlined />
+            {t('admin.product.add')}
+          </MenuItem>
+        )}
         {items()}
       </Select>
     );

package/src/components/payment-method/arcblock.tsx

@@ -30,6 +30,7 @@ export default function ArcBlockMethodForm({ checkDisabled }: { checkDisabled: (
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         key="description"
@@ -39,6 +40,7 @@ export default function ArcBlockMethodForm({ checkDisabled }: { checkDisabled: (
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         key="secret_key"
@@ -68,7 +70,12 @@ export default function ArcBlockMethodForm({ checkDisabled }: { checkDisabled: (
         disabled={checkDisabled('settings.arcblock.explorer_host')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>

package/src/components/payment-method/base.tsx

@@ -31,6 +31,7 @@ export default function BaseMethodForm({ checkDisabled }: { checkDisabled: (key:
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         key="description"
@@ -40,6 +41,7 @@ export default function BaseMethodForm({ checkDisabled }: { checkDisabled: (key:
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <EvmRpcInput
         name="settings.base.api_host"
@@ -75,7 +77,12 @@ export default function BaseMethodForm({ checkDisabled }: { checkDisabled: (key:
         disabled={checkDisabled('settings.base.confirmation')}
       />
       <Stack direction="column">
-        <Typography mb={1}>{t('admin.paymentCurrency.logo.label')}</Typography>
+        <Typography
+          sx={{
+            mb: 1,
+          }}>
+          {t('admin.paymentCurrency.logo.label')}
+        </Typography>
         <Uploader onUploaded={onUploaded} preview={logo} disabled={checkDisabled('logo')} />
       </Stack>
     </>