payment-kit 1.19.0 → 1.19.2

package/src/components/meter/form.tsx

@@ -0,0 +1,245 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+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';
+
+import type { TMeter } from '@blocklet/payment-types';
+import Collapse from '../collapse';
+import MetadataForm from '../metadata/form';
+
+type Props = {
+  mode?: 'create' | 'edit';
+};
+
+function MeterForm({ mode = 'create' }: Props) {
+  const { t } = useLocaleContext();
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<TMeter>();
+
+  // 监听聚合方法的变化，用于显示动态帮助信息
+  const aggregationMethod = useWatch({
+    control,
+    name: 'aggregation_method',
+    defaultValue: 'sum',
+  });
+
+  const getAggregationDescription = (method: string) => {
+    switch (method) {
+      case 'sum':
+        return t('admin.meter.aggregationMethod.sumDescription');
+      case 'count':
+        return t('admin.meter.aggregationMethod.countDescription');
+      case 'last':
+        return t('admin.meter.aggregationMethod.lastDescription');
+      default:
+        return '';
+    }
+  };
+
+  const isEditing = mode === 'edit';
+
+  return (
+    <Box sx={{ maxWidth: 600 }}>
+      {/* Header Section */}
+      <Box sx={{ mb: 4 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}>
+          {isEditing ? t('admin.meter.editDescription') : t('admin.meter.basicInfoDescription')}
+        </Typography>
+      </Box>
+      <Stack spacing={4}>
+        {/* Meter Name */}
+        <Box>
+          <FormInput
+            name="name"
+            rules={{
+              required: t('admin.meter.name.required'),
+              maxLength: {
+                value: 64,
+                message: t('common.maxLength', { len: 64 }),
+              },
+            }}
+            label={t('admin.meter.name.label')}
+            placeholder={t('admin.meter.name.placeholder')}
+            error={!!errors.name}
+            helperText={errors.name?.message}
+            autoFocus
+            inputProps={{ maxLength: 64 }}
+          />
+          <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+            {t('admin.meter.name.help')}
+          </FormHelperText>
+        </Box>
+
+        {/* Event Name - Only in create mode */}
+        {!isEditing && (
+          <Box>
+            <FormInput
+              name="event_name"
+              rules={{
+                required: t('admin.meter.eventName.required'),
+                maxLength: {
+                  value: 64,
+                  message: t('common.maxLength', { len: 64 }),
+                },
+              }}
+              label={t('admin.meter.eventName.label')}
+              placeholder={t('admin.meter.eventName.placeholder')}
+              error={!!errors.event_name}
+              helperText={errors.event_name?.message}
+              inputProps={{
+                maxLength: 64,
+                style: { fontFamily: 'monospace' },
+              }}
+            />
+            <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', gap: 1 }}>
+              <InfoOutlined color="info" sx={{ fontSize: 'small' }} />
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                {t('admin.meter.eventName.help')}
+              </Typography>
+            </Box>
+          </Box>
+        )}
+
+        {/* Event Name - Read-only in edit mode */}
+        {isEditing && (
+          <Box>
+            <FormInput
+              name="event_name"
+              label={t('admin.meter.eventName.label')}
+              disabled
+              inputProps={{
+                style: { fontFamily: 'monospace' },
+              }}
+            />
+            <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+              {t('admin.meter.eventName.editHelp')}
+            </FormHelperText>
+          </Box>
+        )}
+
+        {/* Aggregation Method - Only in create mode */}
+        {!isEditing && (
+          <Box>
+            <FormControl fullWidth error={!!errors.aggregation_method}>
+              <FormLabel sx={{ color: 'text.primary' }}>{t('admin.meter.aggregationMethod.label')}</FormLabel>
+              <Select
+                {...register('aggregation_method', { required: t('admin.meter.aggregationMethod.required') })}
+                label=""
+                defaultValue="sum">
+                <MenuItem value="sum">{t('admin.meter.aggregationMethod.sum')}</MenuItem>
+                <MenuItem value="count" disabled>
+                  {t('admin.meter.aggregationMethod.count')}
+                </MenuItem>
+                <MenuItem value="last" disabled>
+                  {t('admin.meter.aggregationMethod.last')}
+                </MenuItem>
+              </Select>
+            </FormControl>
+            <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+              {getAggregationDescription(aggregationMethod)}
+            </FormHelperText>
+          </Box>
+        )}
+
+        {/* Aggregation Method - Read-only in edit mode */}
+        {isEditing && (
+          <Box>
+            <FormInput
+              name="aggregation_method"
+              label={t('admin.meter.aggregationMethod.label')}
+              disabled
+              value={t(`admin.meter.aggregationMethod.${aggregationMethod}`)}
+            />
+            <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+              {t('admin.meter.aggregationMethod.editHelp')}
+            </FormHelperText>
+          </Box>
+        )}
+
+        {/* Unit - Only in create mode */}
+        {!isEditing && (
+          <Box>
+            <FormInput
+              name="unit"
+              rules={{
+                required: t('admin.meter.unit.required'),
+                maxLength: {
+                  value: 32,
+                  message: t('common.maxLength', { len: 32 }),
+                },
+              }}
+              label={t('admin.meter.unit.label')}
+              placeholder={t('admin.meter.unit.placeholder')}
+              error={!!errors.unit}
+              helperText={errors.unit?.message}
+              inputProps={{ maxLength: 32 }}
+            />
+            <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+              {t('admin.meter.unit.help')}
+            </FormHelperText>
+          </Box>
+        )}
+
+        {/* Unit - Read-only in edit mode */}
+        {isEditing && (
+          <Box>
+            <FormInput name="unit" label={t('admin.meter.unit.label')} disabled />
+            <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+              {t('admin.meter.unit.editHelp')}
+            </FormHelperText>
+          </Box>
+        )}
+
+        {/* Description */}
+        <Box>
+          <FormInput
+            name="description"
+            rules={{
+              maxLength: {
+                value: 255,
+                message: t('common.maxLength', { len: 255 }),
+              },
+            }}
+            label={t('admin.meter.description.label')}
+            placeholder={t('admin.meter.description.placeholder')}
+            multiline
+            minRows={3}
+            maxRows={5}
+            inputProps={{ maxLength: 255 }}
+          />
+          <FormHelperText sx={{ mt: 1 }} color="text.secondary">
+            {t('admin.meter.description.help')}
+          </FormHelperText>
+        </Box>
+
+        {/* Metadata Section */}
+        <Collapse trigger={t('common.metadata.label')}>
+          <Box sx={{ mb: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{
+                color: 'text.secondary',
+              }}>
+              {t('common.metadata.description')}
+            </Typography>
+          </Box>
+          <MetadataForm />
+        </Collapse>
+      </Stack>
+    </Box>
+  );
+}
+
+export default MeterForm;

package/src/components/meter/products.tsx

@@ -0,0 +1,264 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, formatTime, Status, Table, findCurrency, usePaymentContext } from '@blocklet/payment-react';
+import type { TProductExpanded, TMeter } from '@blocklet/payment-types';
+import { Add } from '@mui/icons-material';
+import { Box, Button, Typography, Alert, Tabs, Tab, Stack } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+import ProductsCreate from '../../pages/admin/products/products/create';
+import InfoCard from '../info-card';
+import ProductActions from '../product/actions';
+import { formatProductPrice } from '../../libs/util';
+
+interface MeterProductsProps {
+  meterId: string;
+  meter?: TMeter;
+}
+
+export interface MeterProductsRef {
+  refresh: () => void;
+}
+
+type ProductType = 'meter' | 'credit';
+
+const fetchMeterProducts = (meterId: string): Promise<{ list: TProductExpanded[]; count: number }> => {
+  return api.get(`/api/products?meter_id=${meterId}`).then((res: any) => res.data);
+};
+
+const fetchCreditProducts = (meterId: string): Promise<{ list: TProductExpanded[]; count: number }> => {
+  return api.get(`/api/products?type=credit&meter_id=${meterId}`).then((res: any) => res.data);
+};
+
+export default function MeterProducts({ meterId, meter = undefined }: MeterProductsProps) {
+  const { t, locale } = useLocaleContext();
+  const { settings } = usePaymentContext();
+  const [products, setProducts] = useState<TProductExpanded[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<ProductType>('credit');
+
+  const loadProducts = async (type: ProductType = activeTab) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = type === 'meter' ? await fetchMeterProducts(meterId) : await fetchCreditProducts(meterId);
+      setProducts(result.list);
+    } catch (err) {
+      console.error('Failed to fetch products:', err);
+      setError('Failed to load products');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadProducts();
+  }, [meterId, activeTab]);
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: ProductType) => {
+    setActiveTab(newValue);
+  };
+
+  const handleCreateProduct = () => {
+    setCreating(true);
+  };
+
+  const handleCloseCreate = () => {
+    setCreating(false);
+    loadProducts(); // 刷新产品列表
+  };
+
+  if (error) {
+    return (
+      <Alert severity="error" sx={{ mt: 1 }}>
+        {error}
+      </Alert>
+    );
+  }
+
+  const columns = [
+    {
+      label: t('admin.product.name.label'),
+      name: 'name',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = products[index];
+          if (!item) return null;
+          const currency =
+            findCurrency(settings.paymentMethods, item.prices[0]?.currency_id ?? '') || settings.baseCurrency;
+          return (
+            <Link to={`/admin/products/${item.id}`}>
+              <InfoCard
+                name={item.name}
+                description={formatProductPrice(item as any, currency!, locale)}
+                logo={item.images[0]}
+              />
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'active',
+      options: {
+        filter: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = products[index];
+          if (!item) return null;
+          return (
+            <Link to={`/admin/products/${item.id}`}>
+              <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />
+            </Link>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.createdAt'),
+      name: 'created_at',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = products[index];
+          if (!item) return null;
+          return <Link to={`/admin/products/${item.id}`}>{formatTime(item.created_at)}</Link>;
+        },
+      },
+    },
+    {
+      label: t('common.actions'),
+      name: 'id',
+      width: 100,
+      align: 'center',
+      options: {
+        sort: false,
+        customBodyRenderLite: (_: string, index: number) => {
+          const product = products[index];
+          if (!product) return null;
+          return <ProductActions data={product} onChange={() => loadProducts()} />;
+        },
+      },
+    },
+  ];
+
+  const getEmptyText = () => {
+    if (activeTab === 'meter') {
+      return {
+        text: t('admin.meter.products.emptyTip'),
+        buttonText: t('admin.meter.products.create'),
+      };
+    }
+    return {
+      text: t('admin.meter.creditProducts.emptyTip'),
+      buttonText: t('admin.creditProduct.create'),
+    };
+  };
+
+  const emptyConfig = getEmptyText();
+
+  return (
+    <Box>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
+        <Tabs
+          value={activeTab}
+          onChange={handleTabChange}
+          sx={{
+            flex: '1 0 auto',
+            maxWidth: '100%',
+            fontSize: 14,
+            borderBottom: 1,
+            borderColor: 'divider',
+            '.Mui-selected': {
+              fontSize: '14px !important',
+              color: 'primary.main',
+            },
+          }}>
+          <Tab label={t('admin.meter.products.creditCharge')} value="credit" />
+          <Tab label={t('admin.meter.products.meterService')} value="meter" />
+        </Tabs>
+      </Stack>
+      <Stack
+        direction="row"
+        sx={{
+          justifyContent: 'flex-end',
+          mb: 2,
+        }}>
+        <Button
+          variant="text"
+          color="inherit"
+          size="small"
+          sx={{ color: 'text.link', float: 'right' }}
+          startIcon={<Add />}
+          onClick={handleCreateProduct}>
+          {activeTab === 'meter' ? t('admin.meter.products.create') : t('admin.creditProduct.create')}
+        </Button>
+      </Stack>
+      <Table
+        hasRowLink
+        data={products}
+        columns={columns}
+        options={{
+          count: products.length,
+          page: 0,
+          rowsPerPage: products.length,
+          pagination: false,
+          search: false,
+          filter: false,
+          sort: false,
+          viewColumns: false,
+          download: false,
+          print: false,
+          selectableRows: 'none',
+        }}
+        loading={loading}
+        emptyNodeText={
+          <Box>
+            <Typography>{emptyConfig.text}</Typography>
+            <Button
+              size="small"
+              variant="text"
+              startIcon={<Add />}
+              onClick={handleCreateProduct}
+              sx={{ mt: 1, color: 'text.link' }}>
+              {emptyConfig.buttonText}
+            </Button>
+          </Box>
+        }
+      />
+      {creating && (
+        <ProductsCreate
+          open={creating}
+          onClose={handleCloseCreate}
+          onSubmit={() => loadProducts(activeTab)}
+          mode={activeTab === 'credit' ? 'credit' : 'standard'}
+          meterId={meterId}
+          initialPrice={
+            activeTab === 'meter'
+              ? {
+                  currency_id: meter?.currency_id || '',
+                  priceModel: 'credit_metered',
+                }
+              : {
+                  metadata: {
+                    credit_config: {
+                      currency_id: meter?.currency_id || '',
+                    },
+                  },
+                  name: meter?.unit || '',
+                }
+          }
+        />
+      )}
+    </Box>
+  );
+}

package/src/components/meter/usage-guide.tsx

@@ -0,0 +1,174 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { Box, Typography, Paper, Alert, Link } from '@mui/material';
+import { styled } from '@mui/system';
+
+type TMeter = {
+  id: string;
+  name: string;
+  event_name: string;
+  unit: string;
+  aggregation_method: string;
+};
+
+interface MeterUsageGuideProps {
+  meter: TMeter;
+}
+
+export default function MeterUsageGuide({ meter }: MeterUsageGuideProps) {
+  const { t } = useLocaleContext();
+
+  const curlExample = `curl -X POST https://your-domain.com/api/meter-events \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer YOUR_API_KEY" \\
+  -d '{
+    "event_name": "${meter.event_name}",
+    "payload": {
+      "customer_id": "cus_example123",
+      "value": "10",
+      "subscription_id": "sub_example123"
+    },
+    "identifier": "unique_event_id_${Date.now()}",
+    "metadata": {
+      "source": "api",
+      "version": "1.0"
+    }
+  }'`;
+
+  const jsExample = `// Using fetch API
+const response = await fetch('/api/meter-events', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    'Authorization': 'Bearer YOUR_API_KEY'
+  },
+  body: JSON.stringify({
+    event_name: '${meter.event_name}',
+    payload: {
+      customer_id: 'cus_example123',
+      value: '10',
+      subscription_id: 'sub_example123'
+    },
+    identifier: \`unique_event_id_\${Date.now()}\`,
+    metadata: {
+      source: 'web',
+      version: '1.0'
+    }
+  })
+});
+
+const result = await response.json();
+console.log('Event recorded:', result);`;
+
+  const pythonExample = `import requests
+import time
+
+url = "https://your-domain.com/api/meter-events"
+headers = {
+    "Content-Type": "application/json",
+    "Authorization": "Bearer YOUR_API_KEY"
+}
+
+data = {
+    "event_name": "${meter.event_name}",
+    "payload": {
+        "customer_id": "cus_example123",
+        "value": "10",
+        "subscription_id": "sub_example123"
+    },
+    "identifier": f"unique_event_id_{int(time.time())}",
+    "metadata": {
+        "source": "python",
+        "version": "1.0"
+    }
+}
+
+response = requests.post(url, json=data, headers=headers)
+print("Event recorded:", response.json())`;
+
+  return (
+    <Box>
+      <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.meter.usageGuide.title')}
+      </Typography>
+      <Alert severity="info" sx={{ mb: 3 }}>
+        <Typography variant="body2">
+          {t('admin.meter.usageGuide.description', {
+            eventName: meter.event_name,
+            unit: meter.unit,
+            method: meter.aggregation_method,
+          })}
+        </Typography>
+      </Alert>
+      <Typography variant="subtitle1" sx={{ mb: 2, fontWeight: 600 }}>
+        {t('admin.meter.usageGuide.apiEndpoint')}
+      </Typography>
+      <CodeBlock>
+        <Typography variant="body2" component="pre">
+          POST /api/meter-events
+        </Typography>
+      </CodeBlock>
+      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
+        {t('admin.meter.usageGuide.curlExample')}
+      </Typography>
+      <CodeBlock>
+        <Typography variant="body2" component="pre">
+          {curlExample}
+        </Typography>
+      </CodeBlock>
+      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
+        {t('admin.meter.usageGuide.jsExample')}
+      </Typography>
+      <CodeBlock>
+        <Typography variant="body2" component="pre">
+          {jsExample}
+        </Typography>
+      </CodeBlock>
+      <Typography variant="subtitle1" sx={{ mb: 2, mt: 3, fontWeight: 600 }}>
+        {t('admin.meter.usageGuide.pythonExample')}
+      </Typography>
+      <CodeBlock>
+        <Typography variant="body2" component="pre">
+          {pythonExample}
+        </Typography>
+      </CodeBlock>
+      <Alert severity="warning" sx={{ mt: 3 }}>
+        <Typography variant="body2">
+          <strong>{t('admin.meter.usageGuide.important')}:</strong>
+        </Typography>
+        <ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
+          <li>{t('admin.meter.usageGuide.tip1')}</li>
+          <li>{t('admin.meter.usageGuide.tip2')}</li>
+          <li>{t('admin.meter.usageGuide.tip3')}</li>
+        </ul>
+      </Alert>
+      <Box sx={{ mt: 3 }}>
+        <Typography
+          variant="body2"
+          sx={{
+            color: 'text.secondary',
+          }}>
+          {t('admin.meter.usageGuide.moreInfo')}{' '}
+          <Link href="/docs/api/meter-events" target="_blank">
+            {t('admin.meter.usageGuide.apiDocs')}
+          </Link>
+        </Typography>
+      </Box>
+    </Box>
+  );
+}
+
+const CodeBlock = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(2),
+  backgroundColor: theme.palette.grey[50],
+  border: `1px solid ${theme.palette.grey[200]}`,
+  borderRadius: theme.shape.borderRadius,
+  overflow: 'auto',
+  '& pre': {
+    margin: 0,
+    fontFamily: 'Monaco, Consolas, "Courier New", monospace',
+    fontSize: '0.875rem',
+    lineHeight: 1.5,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all',
+  },
+}));

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

@@ -39,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"
@@ -48,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"