payment-kit 1.19.0 → 1.19.1

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';
@@ -136,6 +136,24 @@ export default function PaymentList({
         },
       },
     },
+    {
+      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/preview.tsx

@@ -9,7 +9,7 @@ export default function PaymentLinkPreview({
   id,
   version = 1,
 }: { id: string; version?: number } & {
-  ref?: React.RefObject<unknown>;
+  ref?: React.RefObject<unknown | null>;
 }) {
   const theme = useTheme();
   const innerRef = useRef(null);

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

@@ -7,38 +7,68 @@ 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"
@@ -89,6 +119,7 @@ export default function ProductSelect({ mode: initialMode, hasSelected, onSelect
         );
       }),
     ]);
+  };
 
   if (mode === 'inline') {
     return <>{items(onSelect)}</>;
@@ -96,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"

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"

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

@@ -30,6 +30,7 @@ export default function BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         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 BitcoinMethodForm({ checkDisabled }: { checkDisabled: (k
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         key="chain_id"

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

@@ -31,6 +31,7 @@ export default function EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         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 EthereumMethodForm({ checkDisabled }: { checkDisabled: (
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
         disabled={checkDisabled('description')}
+        inputProps={{ maxLength: 255 }}
       />
       <EvmRpcInput
         name="settings.ethereum.api_host"

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

@@ -14,6 +14,7 @@ export default function StripeMethodForm({ checkDisabled }: { checkDisabled: (ke
         label={t('admin.paymentMethod.name.label')}
         placeholder={t('admin.paymentMethod.name.tip')}
         disabled={checkDisabled('name')}
+        inputProps={{ maxLength: 32 }}
       />
       <FormInput
         name="description"
@@ -21,6 +22,7 @@ export default function StripeMethodForm({ checkDisabled }: { checkDisabled: (ke
         rules={{ required: true }}
         label={t('admin.paymentMethod.description.label')}
         placeholder={t('admin.paymentMethod.description.tip')}
+        inputProps={{ maxLength: 255 }}
       />
       <FormInput
         name="settings.stripe.dashboard"

package/src/components/payouts/list.tsx

@@ -10,7 +10,7 @@ import {
   useDefaultPageSize,
 } from '@blocklet/payment-react';
 import type { TPayoutExpanded } 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';
@@ -132,6 +132,24 @@ export default function PayoutList({
         },
       },
     },
+    {
+      label: t('common.paymentMethod'),
+      name: 'paymentMethod',
+      width: 120,
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          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/price/currency-select.tsx

@@ -2,7 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { usePaymentContext } from '@blocklet/payment-react';
 import { AddOutlined, ArrowDropDown } from '@mui/icons-material';
 import { ListSubheader, MenuItem, Select, Stack, SxProps, Typography } from '@mui/material';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { LiteralUnion } from 'type-fest';
 
 import { flatten } from 'lodash';
@@ -17,6 +17,7 @@ type Props = {
   width?: string;
   disabled?: boolean;
   selectSX?: SxProps;
+  currencyFilter?: (currency: any) => boolean;
 };
 
 export default function CurrencySelect({
@@ -27,11 +28,27 @@ export default function CurrencySelect({
   width = '100%',
   disabled = false,
   selectSX = {},
+  currencyFilter = () => true,
 }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
   const [mode, setMode] = useState(initialMode);
 
+  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+
+  useEffect(() => {
+    if (value && initialMode === 'selected' && currencies.length > 0) {
+      const currency = currencies.find((c) => c.id === value);
+      if (currency && !hasSelected(currency)) {
+        const timer = setTimeout(() => {
+          onSelect(value);
+        }, 0);
+        return () => clearTimeout(timer);
+      }
+    }
+    return undefined;
+  }, [value, initialMode]);
+
   const handleSelect = (e: any) => {
     if (disabled) {
       return;
@@ -40,8 +57,6 @@ export default function CurrencySelect({
     onSelect(e.target.value);
   };
 
-  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
-
   const selectedCurrency = currencies.find((x) => x.id === value);
 
   const selectedPaymentMethod = settings.paymentMethods.find((x) => x.payment_currencies.some((c) => c.id === value));
@@ -59,11 +74,13 @@ export default function CurrencySelect({
           }
         }}
         sx={{
-          fontSize: '12px',
           cursor: canSelect ? 'pointer' : 'default',
           display: 'inline-flex',
+          minWidth: '120px',
+          justifyContent: 'flex-end',
+          textAlign: 'right',
         }}>
-        {selectedCurrency?.symbol}({selectedPaymentMethod?.name})
+        {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
         {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
@@ -88,32 +105,35 @@ export default function CurrencySelect({
         sx={{ width, ...selectSX }}
         disabled={disabled}
         onClose={() => setMode(initialMode)}>
-        {extraCurrencies.map((method) => [
-          <ListSubheader
-            key={method.id}
-            sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-            {method.name}
-          </ListSubheader>,
-          ...method.payment_currencies.map((currency) => (
-            <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
-              <Stack
-                direction="row"
-                sx={{
-                  justifyContent: 'space-between',
-                  gap: 2,
-                  width: '100%',
-                }}>
-                <Currency logo={currency.logo} name={currency.name} />
-                <Typography
-                  sx={{
-                    fontWeight: 'bold',
-                  }}>
-                  {currency.symbol}
-                </Typography>
-              </Stack>
-            </MenuItem>
-          )),
-        ])}
+        {extraCurrencies
+          .map((method) => {
+            const filteredCurrencies = method.payment_currencies.filter(currencyFilter);
+            if (filteredCurrencies.length === 0) {
+              return null;
+            }
+
+            return [
+              <ListSubheader
+                key={method.id}
+                sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
+                {method.name}
+              </ListSubheader>,
+              ...filteredCurrencies.map((currency) => (
+                <MenuItem key={currency.id} sx={{ pl: 3 }} value={currency.id}>
+                  <Stack direction="row" sx={{ width: '100%', justifyContent: 'space-between', gap: 2 }}>
+                    <Currency logo={currency.logo} name={currency.name} />
+                    <Typography
+                      sx={{
+                        fontWeight: 'bold',
+                      }}>
+                      {currency.symbol}
+                    </Typography>
+                  </Stack>
+                </MenuItem>
+              )),
+            ];
+          })
+          .filter(Boolean)}
       </Select>
     );
   }