payment-kit 1.19.1 → 1.19.3

package/src/components/edit-in-line.tsx

@@ -0,0 +1,197 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { formatError } from '@blocklet/payment-react';
+import { Check, Close, EditOutlined } from '@mui/icons-material';
+import { IconButton, Stack, TextField, Typography } from '@mui/material';
+import { useState, useEffect } from 'react';
+
+interface EditInLineProps {
+  value: string;
+  onSave: (newValue: string) => Promise<void>;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  maxLength?: number;
+  validate?: (value: string) => string | null;
+  successMessage?: string;
+  autoFocus?: boolean;
+  onEdit?: () => void;
+  onCancel?: () => void;
+  hideSuccessToast?: boolean;
+}
+
+export default function EditInLine({
+  value,
+  onSave,
+  placeholder = '',
+  required = true,
+  disabled = false,
+  multiline = false,
+  maxLength = 255,
+  validate = () => null,
+  successMessage = '',
+  autoFocus = false,
+  onEdit = () => {},
+  onCancel = () => {},
+  hideSuccessToast = false,
+}: EditInLineProps) {
+  const [edit, setEdit] = useState(false);
+  const [tempValue, setTempValue] = useState(value);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { t } = useLocaleContext();
+
+  // 当外部 value 变化时同步更新
+  useEffect(() => {
+    if (!edit) {
+      setTempValue(value);
+    }
+  }, [value, edit]);
+
+  const validateValue = (val: string): string => {
+    if (required && !val.trim()) {
+      return t('common.required');
+    }
+    if (maxLength && val.length > maxLength) {
+      return t('common.maxLength', { len: maxLength });
+    }
+    if (validate) {
+      const customError = validate(val);
+      if (customError) {
+        return customError;
+      }
+    }
+    return '';
+  };
+
+  const handleSave = async () => {
+    const validationError = validateValue(tempValue);
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setLoading(true);
+    try {
+      await onSave(tempValue);
+      if (!hideSuccessToast) {
+        Toast.success(successMessage || t('common.saved'));
+      }
+      setEdit(false);
+      setError('');
+    } catch (err) {
+      Toast.error(formatError(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setTempValue(value);
+    setEdit(false);
+    setError('');
+    onCancel?.();
+  };
+
+  const handleChange = (newValue: string) => {
+    setTempValue(newValue);
+    const validationError = validateValue(newValue);
+    setError(validationError);
+  };
+
+  const handleEdit = () => {
+    setEdit(true);
+    setTempValue(value);
+    setError('');
+    onEdit?.();
+  };
+
+  if (disabled) {
+    return (
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        {value || <span style={{ fontStyle: 'italic' }}>{placeholder}</span>}
+      </Typography>
+    );
+  }
+
+  return (
+    <Stack
+      direction="row"
+      spacing={1}
+      sx={{
+        alignItems: multiline ? 'flex-start' : 'center',
+        flexWrap: 'wrap',
+        width: '100%',
+      }}>
+      {edit ? (
+        <>
+          <TextField
+            value={tempValue}
+            onChange={(e) => handleChange(e.target.value)}
+            variant="outlined"
+            size="small"
+            multiline={multiline}
+            rows={multiline ? 3 : 1}
+            sx={{ flex: 1, minWidth: '200px' }}
+            placeholder={placeholder}
+            error={!!error}
+            disabled={loading}
+            autoFocus={autoFocus}
+            slotProps={{
+              input: {
+                endAdornment: error ? (
+                  <Typography color="error" sx={{ whiteSpace: 'nowrap' }}>
+                    {error}
+                  </Typography>
+                ) : undefined,
+              },
+              htmlInput: {
+                maxLength,
+              },
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !multiline && !e.shiftKey) {
+                e.preventDefault();
+                handleSave();
+              }
+              if (e.key === 'Escape') {
+                e.preventDefault();
+                handleCancel();
+              }
+            }}
+          />
+          <Stack direction="row" spacing={0.5}>
+            <IconButton
+              onClick={handleSave}
+              size="small"
+              disabled={!!error || loading}
+              color="primary"
+              title={t('common.save')}>
+              <Check />
+            </IconButton>
+            <IconButton onClick={handleCancel} size="small" disabled={loading} title={t('common.cancel')}>
+              <Close />
+            </IconButton>
+          </Stack>
+        </>
+      ) : (
+        <>
+          <Typography
+            variant="body2"
+            sx={{
+              wordBreak: 'break-word',
+              whiteSpace: multiline ? 'pre-wrap' : 'nowrap',
+              overflow: multiline ? 'visible' : 'hidden',
+              textOverflow: multiline ? 'clip' : 'ellipsis',
+            }}>
+            {value || <span style={{ color: '#999', fontStyle: 'italic' }}>{placeholder}</span>}
+          </Typography>
+          <IconButton onClick={handleEdit} size="small" title={t('common.edit')}>
+            <EditOutlined fontSize="small" />
+          </IconButton>
+        </>
+      )}
+    </Stack>
+  );
+}

package/src/components/metadata/form.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput } from '@blocklet/payment-react';
+import { FormInput, FormLabel } from '@blocklet/payment-react';
 import { AddOutlined, Autorenew, DeleteOutlineOutlined, FormatAlignLeft } from '@mui/icons-material';
-import { Box, Button, Divider, IconButton, Stack, TextField, InputAdornment, Tooltip, FormLabel } from '@mui/material';
+import { Box, Button, Divider, IconButton, Stack, TextField, InputAdornment, Tooltip } from '@mui/material';
 import { useEffect, useRef, useState, useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { isObject, debounce } from 'lodash';

package/src/components/meter/add-usage-dialog.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatError, useMobile, getCustomerAvatar } from '@blocklet/payment-react';
+import { api, formatError, useMobile, getCustomerAvatar, FormLabel } from '@blocklet/payment-react';
 import type { TCustomer, TPaymentCurrency } from '@blocklet/payment-types';
-import { Box, Stack, Autocomplete, TextField, Button, Avatar, FormLabel, Typography } from '@mui/material';
+import { Box, Stack, Autocomplete, TextField, Button, Avatar, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
 import Toast from '@arcblock/ux/lib/Toast';
 import Dialog from '@arcblock/ux/lib/Dialog';

package/src/components/meter/form.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput } from '@blocklet/payment-react';
-import { FormControl, Select, MenuItem, Typography, Box, FormHelperText, Stack, FormLabel } from '@mui/material';
+import { FormInput, FormLabel } from '@blocklet/payment-react';
+import { FormControl, Select, MenuItem, Typography, Box, FormHelperText, Stack } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { InfoOutlined } from '@mui/icons-material';
 

package/src/components/meter/products.tsx

@@ -38,7 +38,7 @@ export default function MeterProducts({ meterId, meter = undefined }: MeterProdu
   const [loading, setLoading] = useState(false);
   const [creating, setCreating] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<ProductType>('meter');
+  const [activeTab, setActiveTab] = useState<ProductType>('credit');
 
   const loadProducts = async (type: ProductType = activeTab) => {
     setLoading(true);
@@ -183,8 +183,8 @@ export default function MeterProducts({ meterId, meter = undefined }: MeterProdu
               color: 'primary.main',
             },
           }}>
-          <Tab label={t('admin.meter.products.meterService')} value="meter" />
           <Tab label={t('admin.meter.products.creditCharge')} value="credit" />
+          <Tab label={t('admin.meter.products.meterService')} value="meter" />
         </Tabs>
       </Stack>
       <Stack

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

@@ -1,8 +1,8 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { api, findCurrency, formatError, formatPrice, usePaymentContext } from '@blocklet/payment-react';
+import { api, findCurrency, formatError, formatPrice, usePaymentContext, FormLabel } from '@blocklet/payment-react';
 import type { TPrice, TProduct, TProductExpanded } from '@blocklet/payment-types';
-import { Box, Checkbox, FormControlLabel, FormLabel, Stack, TextField, Typography } from '@mui/material';
+import { Box, Checkbox, FormControlLabel, Stack, TextField, Typography } from '@mui/material';
 import { useSetState } from 'ahooks';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 

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

@@ -10,6 +10,7 @@ import { Link } from 'react-router-dom';
 import { styled } from '@mui/system';
 import { debounce } from '../../../libs/util';
 import CustomerLink from '../../customer/link';
+import { useConditionalSection } from '../../conditional-section';
 
 const fetchData = (
   params: Record<string, any> = {}
@@ -47,7 +48,6 @@ type ListProps = {
   status?: string;
   customer_id?: string;
   currency_id?: string;
-  setHasRevenues?: (hasRevenues: boolean) => void;
 };
 
 const getListKey = (props: ListProps) => {
@@ -57,14 +57,10 @@ const getListKey = (props: ListProps) => {
   return 'payouts-mine';
 };
 
-export default function CustomerRevenueList({
-  currency_id = '',
-  status = '',
-  customer_id = '',
-  setHasRevenues = () => {},
-}: ListProps) {
+export default function CustomerRevenueList({ currency_id = '', status = '', customer_id = '' }: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile('sm');
+  const conditionalSection = useConditionalSection();
 
   const listKey = getListKey({ customer_id });
   const defaultPageSize = useDefaultPageSize(10);
@@ -87,12 +83,11 @@ export default function CustomerRevenueList({
     debounce(() => {
       fetchData(search).then((res: any) => {
         setData(res);
-        if (setHasRevenues) {
-          setHasRevenues(res.count > 0);
-        }
+        const hasData = res.count > 0;
+        conditionalSection?.hideRender(!hasData);
       });
     }, 300)();
-  }, [search]);
+  }, [search, conditionalSection]);
 
   const columns = [
     {

package/src/components/price/currency-select.tsx

@@ -18,6 +18,7 @@ type Props = {
   disabled?: boolean;
   selectSX?: SxProps;
   currencyFilter?: (currency: any) => boolean;
+  hideMethod?: boolean;
 };
 
 export default function CurrencySelect({
@@ -29,6 +30,7 @@ export default function CurrencySelect({
   disabled = false,
   selectSX = {},
   currencyFilter = () => true,
+  hideMethod = false,
 }: Props) {
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
@@ -80,7 +82,7 @@ export default function CurrencySelect({
           justifyContent: 'flex-end',
           textAlign: 'right',
         }}>
-        {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+        {selectedCurrency?.symbol} {hideMethod ? '' : `(${selectedPaymentMethod?.name})`}
         {canSelect && <ArrowDropDown sx={{ color: 'text.secondary', fontSize: 21 }} />}
       </Typography>
     );
@@ -97,7 +99,7 @@ export default function CurrencySelect({
         value={value}
         renderValue={() => (
           <Typography variant="body1" sx={{ display: 'inline-flex', fontSize: '12px', color: 'text.secondary' }}>
-            {selectedCurrency?.symbol} ({selectedPaymentMethod?.name})
+            {selectedCurrency?.symbol} {hideMethod ? '' : `(${selectedPaymentMethod?.name})`}
           </Typography>
         )}
         onChange={handleSelect}
@@ -113,18 +115,20 @@ export default function CurrencySelect({
             }
 
             return [
-              <ListSubheader
-                key={method.id}
-                sx={{ fontSize: '0.875rem', color: 'text.secondary', lineHeight: '2.1875rem' }}>
-                {method.name}
-              </ListSubheader>,
+              hideMethod ? null : (
+                <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} />
+                    {hideMethod ? null : <Currency logo={currency.logo} name={currency.name} />}
                     <Typography
                       sx={{
-                        fontWeight: 'bold',
+                        fontWeight: hideMethod ? 'normal' : 'bold',
                       }}>
                       {currency.symbol}
                     </Typography>

package/src/components/price/form.tsx

@@ -50,7 +50,6 @@ import ProductSelect from '../payment-link/product-select';
 import Collapse from '../collapse';
 import { useProductsContext } from '../../contexts/products';
 import CurrencySelect from './currency-select';
-import MetadataForm from '../metadata/form';
 import { getProductByPriceId } from '../../libs/util';
 import InfoCard from '../info-card';
 
@@ -225,8 +224,11 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                 if (value !== null) {
                   setValue(field.name, value);
                 }
-                if (value === 'one_time' && isCreditBilling) {
+                if (value === 'one_time') {
                   setValue(getFieldName('model'), 'standard');
+                  setValue(getFieldName('currency_id'), settings.baseCurrency?.id);
+                  setValue(getFieldName('recurring.meter_id'), '');
+                  setValue(getFieldName('recurring.usage_type'), 'licensed');
                 }
               }}
               exclusive
@@ -299,7 +301,7 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
               fullWidth
               size="small"
               onChange={(e) => {
-                if (e.target.value === 'standard' && isCreditBilling) {
+                if (e.target.value === 'standard') {
                   setValue(getFieldName('currency_id'), settings.baseCurrency?.id);
                 }
                 field.onChange(e.target.value);
@@ -313,13 +315,15 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
               }}>
               <MenuItem value="standard">{t('admin.price.models.standard')}</MenuItem>
               <MenuItem value="package">{t('admin.price.models.package')}</MenuItem>
+              <MenuItem value="credit_metered" disabled={isCreditMode}>
+                {t('admin.price.models.creditMetered')}
+              </MenuItem>
               <MenuItem value="graduated" disabled>
                 {t('admin.price.models.graduated')}
               </MenuItem>
               <MenuItem value="volume" disabled>
                 {t('admin.price.models.volume')}
               </MenuItem>
-              <MenuItem value="credit_metered">{t('admin.price.models.creditMetered')}</MenuItem>
             </Select>
           </Box>
         )}
@@ -771,7 +775,7 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
             }
             expanded={isLocked}
             style={{ width: INPUT_WIDTH }}>
-            <Box sx={{ width: INPUT_WIDTH, mb: 2 }}>
+            <Box sx={{ width: INPUT_WIDTH, mb: 2, pl: 2, pr: 1 }}>
               {/* Credit 数量配置 */}
               <Controller
                 name={getFieldName('metadata')}
@@ -815,6 +819,7 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                               }}
                               value={field.value?.credit_config?.currency_id || creditCurrencies?.[0]?.id}
                               disabled={isLocked}
+                              hideMethod
                               selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
                             />
                           </InputAdornment>
@@ -1045,16 +1050,17 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
               },
             }}>
             <Stack
-              spacing={2}
               sx={{
                 alignItems: 'flex-start',
                 width: INPUT_WIDTH,
+                pl: 2,
+                pr: 1,
               }}>
               <Controller
                 name={getFieldName('quantity_available')}
                 control={control}
                 render={({ field }) => (
-                  <>
+                  <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{t('admin.price.quantityAvailable.label')}</FormLabel>
                     <TextField
                       {...field}
@@ -1065,14 +1071,23 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                       error={!quantityPositive(field.value)}
                       helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
                     />
-                  </>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.price.quantityAvailable.description')}
+                    </Typography>
+                  </Box>
                 )}
               />
               <Controller
                 name={getFieldName('quantity_limit_per_checkout')}
                 control={control}
                 render={({ field }) => (
-                  <>
+                  <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{t('admin.price.quantityLimitPerCheckout.label')}</FormLabel>
                     <TextField
                       {...field}
@@ -1084,7 +1099,16 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                       error={!quantityPositive(field.value)}
                       helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
                     />
-                  </>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.price.quantityLimitPerCheckout.description')}
+                    </Typography>
+                  </Box>
                 )}
               />
               <Controller
@@ -1097,10 +1121,10 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                   },
                 }}
                 render={({ field }) => (
-                  <>
+                  <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{t('admin.price.nickname.label')}</FormLabel>
                     <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
-                  </>
+                  </Box>
                 )}
               />
               <Controller
@@ -1113,14 +1137,21 @@ export default function PriceForm({ prefix = '', simple = false, productType = u
                   },
                 }}
                 render={({ field }) => (
-                  <>
+                  <Box sx={{ width: '100%', mb: 2 }}>
                     <FormLabel>{t('admin.price.lookup_key.label')}</FormLabel>
                     <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
-                  </>
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.price.lookup_key.description')}
+                    </Typography>
+                  </Box>
                 )}
               />
-              {/* 元数据 */}
-              <MetadataForm title={t('common.metadata.label')} color="inherit" name={getFieldName('metadata')} />
             </Stack>
           </Collapse>
         </>

package/src/components/product/form.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput } from '@blocklet/payment-react';
+import { FormInput, FormLabel } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
-import { Box, Stack, Typography, FormLabel, Select, MenuItem } from '@mui/material';
+import { Box, Stack, Typography, Select, MenuItem } from '@mui/material';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 
 import Collapse from '../collapse';
@@ -46,7 +46,7 @@ export default function ProductForm({ simple = false }: Props) {
         rules={{ required: true }}
         render={({ field }) => (
           <Box sx={{ width: '100%' }}>
-            <FormLabel sx={{ color: 'text.primary' }}>{t('admin.product.type.label')}</FormLabel>
+            <FormLabel sx={{ color: 'text.primary', fontSize: '0.875rem' }}>{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>
@@ -135,11 +135,6 @@ export default function ProductForm({ simple = false }: Props) {
           <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 }) },
             }}

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

@@ -138,7 +138,6 @@ export default function CurrentSubscriptions({
                   sx={{
                     flexWrap: 'wrap',
                     padding: 2,
-                    height: '100%',
                     borderRadius: 1,
                     border: '1px solid',
                     borderColor: 'divider',

package/src/locales/en.tsx

@@ -384,7 +384,7 @@ export default flat({
       },
       unit_label: {
         label: 'Unit label',
-        placeholder: 'Seat',
+        placeholder: 'Unit',
       },
       billingType: {
         label: 'Billing type',
@@ -452,6 +452,7 @@ export default flat({
       lookup_key: {
         label: 'Lookup key',
         placeholder: '',
+        description: 'Lookup key is used to identify the price in the API',
       },
       recurring: {
         interval: 'Billing period',
@@ -526,6 +527,7 @@ export default flat({
         format: 'Available {num} pieces',
         noLimit: 'No limit on available quantity',
         valid: 'Available quantity must be greater than or equal to sold quantity',
+        description: 'Enter the number of units that can be sold, 0 means unlimited',
       },
       quantitySold: {
         label: 'Sold quantity',
@@ -536,6 +538,7 @@ export default flat({
         placeholder: '0 means unlimited',
         format: 'Limit {num} pieces per checkout',
         noLimit: 'No limit on quantity per checkout',
+        description: 'Enter the number of units that can be purchased in a single checkout, 0 means unlimited',
       },
       inventory: 'Inventory Settings',
     },
@@ -987,7 +990,7 @@ export default flat({
         viewAllActivity: 'View All Activity',
         pendingAmount: 'Outstanding Charges',
         grantCount: 'Grant Count',
-        noGrantsDescription: "You don't have any credit grants yet. Please contact the administrator to add them.",
+        noGrantsDescription: "You don't have any credit grants yet.",
         addCredit: 'Add Credit',
       },
     },
@@ -1162,7 +1165,7 @@ export default flat({
       totalAmount: 'Total Amount',
       pendingAmount: 'Pending Amount',
       grantCount: 'Grant Count',
-      noGrantsDescription: "You don't have any credit grants yet. Please contact the administrator to add them.",
+      noGrantsDescription: "You don't have any credit grants yet.",
       status: {
         granted: 'Active',
         pending: 'Pending',