payment-kit 1.20.5 → 1.20.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.5",
+  "version": "1.20.6",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -55,7 +55,8 @@
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.52-beta-20250908-085420-224a58fa",
     "@blocklet/logger": "^1.16.52-beta-20250908-085420-224a58fa",
-    "@blocklet/payment-react": "1.20.5",
+    "@blocklet/payment-react": "1.20.6",
+    "@blocklet/payment-vendor": "1.20.6",
     "@blocklet/sdk": "^1.16.52-beta-20250908-085420-224a58fa",
     "@blocklet/ui-react": "^3.1.37",
     "@blocklet/uploader": "^0.2.10",
@@ -124,7 +125,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.52-beta-20250908-085420-224a58fa",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.20.5",
+    "@blocklet/payment-types": "1.20.6",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -171,5 +172,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "998ec07a1e35502729edcc3689305a1afa3b0390"
+  "gitHead": "d04ed7906bd1e13240198623aa0d4eef4db8886e"
 }

package/src/components/collapse.tsx

@@ -74,6 +74,7 @@ export default function IconCollapse(rawProps: Props) {
           {props.addons} {expanded ? <ExpandLessOutlined /> : <ExpandMoreOutlined />}
         </Stack>
       </Stack>
+
       <Collapse in={expanded} sx={{ width: '100%' }}>
         {expanded || props.lazy ? props.children : null}
       </Collapse>

package/src/components/product/edit.tsx

@@ -30,6 +30,15 @@ export default function EditProduct({
         : // @ts-ignore
           Object.keys(product.metadata).map((x) => ({ key: x, value: product.metadata[x] })),
       prices: [],
+      // 处理 vendor_config 数据回显
+      vendor_config: product.vendor_config
+        ? product.vendor_config.map((vendor: any) => ({
+            vendor_id: vendor.vendor_id, // 直接使用 vendor_id
+            commission_rate: vendor.commission_rate?.toString() || '0',
+            commission_type:
+              vendor.commission_type === 'fixed_amount' ? 'fixed' : vendor.commission_type || 'percentage',
+          }))
+        : [],
     },
   });
 

package/src/components/product/form.tsx

@@ -9,9 +9,15 @@ import MetadataForm from '../metadata/form';
 import type { Price } from '../price/form';
 import Uploader from '../uploader';
 import ProductFeatures from './features';
+import VendorConfig from './vendor-config';
 
 export type Product = InferFormType<TProduct> & {
   prices: Price[];
+  vendor_config: {
+    vendor_id: string;
+    commission_rate: number;
+    commission_type: 'percentage' | 'fixed';
+  }[];
 };
 
 type Props = {
@@ -114,6 +120,11 @@ export default function ProductForm({ simple = false }: Props) {
           <Uploader onUploaded={onUploaded} preview={images[0]} />
         </Box>
       </Stack>
+      <Stack sx={{ '& .vendor-config': { mt: 2 } }}>
+        <Collapse trigger={t('admin.product.vendorConfig.title')}>
+          <VendorConfig />
+        </Collapse>
+      </Stack>
       <Collapse trigger={t('admin.product.additional')}>
         <Stack
           spacing={2}

package/src/components/product/vendor-config.tsx

@@ -0,0 +1,249 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { FormInput, FormLabel, api } from '@blocklet/payment-react';
+import { AddOutlined, DeleteOutlineOutlined } from '@mui/icons-material';
+import { Alert, Box, Button, Divider, IconButton, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+
+interface Vendor {
+  id: string;
+  name: string;
+  description: string;
+  vendor_key: string;
+  default_commission_rate: number;
+  default_commission_type: 'percentage' | 'fixed_amount';
+}
+
+export default function VendorConfig() {
+  const { t } = useLocaleContext();
+  const { control, setValue, setError: setFormError, clearErrors } = useFormContext();
+  const [vendors, setVendors] = useState<Vendor[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const lastItemRef = useRef<HTMLDivElement | null>(null);
+
+  const vendorConfigs = useFieldArray({ control, name: 'vendor_config' });
+
+  useEffect(() => {
+    const fetchVendors = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const response = await api.get('/api/vendors');
+        setVendors(response.data?.data || []);
+      } catch (err: any) {
+        setError(err.message || 'Failed to fetch vendors');
+        console.error('Failed to fetch vendors:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchVendors();
+  }, []);
+
+  const selectedVendorIds = vendorConfigs.fields.map((item: any) => item.vendor_id);
+  const noneSelectedVendors = vendors.filter((v) => !selectedVendorIds.includes(v.id));
+
+  const watchedVendorConfig = useWatch({ control, name: 'vendor_config' });
+
+  const [totalCommission, setTotalCommission] = useState(0);
+
+  useEffect(() => {
+    const vendorConfigArray = watchedVendorConfig || [];
+
+    const percentageFields = vendorConfigArray.filter((field: any) => field?.commission_type === 'percentage');
+
+    const total = percentageFields.reduce((sum: number, field: any) => {
+      const rate = Number(field?.commission_rate || 0);
+      return sum + rate;
+    }, 0);
+
+    setTotalCommission(total);
+
+    const isValid = total <= 100;
+
+    if (vendorConfigArray.length > 0) {
+      if (isValid) {
+        clearErrors('vendor_config_total');
+      } else {
+        setFormError('vendor_config_total', {
+          type: 'manual',
+          message: t('admin.product.vendorConfig.totalCommissionExceeded', {
+            total: total.toFixed(0),
+          }),
+        });
+      }
+    } else {
+      clearErrors('vendor_config_total');
+    }
+  }, [watchedVendorConfig, clearErrors, setFormError, t]);
+
+  const validateTotalCommission = () => {
+    return totalCommission <= 100;
+  };
+
+  return (
+    <Box sx={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }} className="vendor-config">
+      {error && (
+        <Alert severity="error" onClose={() => setError(null)} sx={{ mt: 1 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Stack
+        sx={{
+          maxHeight: 400,
+          minHeight: 'auto',
+          overflow: 'auto',
+          flex: 1,
+        }}>
+        {vendorConfigs.fields.map((vendorField: any, index: number) => (
+          <Stack
+            key={vendorField.id}
+            ref={index === vendorConfigs.fields.length - 1 ? lastItemRef : null}
+            sx={{ mb: 2, alignItems: 'flex-end', '&:last-child': { mb: 0 } }}
+            spacing={2}
+            direction="row">
+            <Stack direction="row" spacing={2} sx={{ flex: 1 }}>
+              <Controller
+                name={`vendor_config.${index}.vendor_id`}
+                control={control}
+                render={({ field }) => {
+                  return (
+                    <Box sx={{ minWidth: 320 }}>
+                      <FormLabel>{t('admin.product.vendorConfig.productCode')}</FormLabel>
+                      <Select
+                        {...field}
+                        fullWidth
+                        onChange={(e) => {
+                          const vendorId = e.target.value as string;
+                          field.onChange(vendorId);
+
+                          const selectedVendor = vendors.find((v) => v.id === vendorId);
+                          if (selectedVendor) {
+                            setValue(`vendor_config.${index}.commission_rate`, selectedVendor.default_commission_rate);
+                            const commissionType =
+                              selectedVendor.default_commission_type === 'fixed_amount'
+                                ? 'fixed'
+                                : selectedVendor.default_commission_type;
+                            setValue(`vendor_config.${index}.commission_type`, commissionType);
+                          }
+                        }}
+                        renderValue={(value: string) => {
+                          const vendor = vendors.find((v) => v.id === value);
+                          if (!vendor) return null;
+                          return <Box sx={{ display: 'flex', flexDirection: 'column' }}>{vendor.name}</Box>;
+                        }}>
+                        {noneSelectedVendors.length ? (
+                          noneSelectedVendors.map((vendor) => (
+                            <MenuItem key={vendor.id} value={vendor.id} sx={{ gap: 1 }}>
+                              <Typography variant="h5">{vendor.name}</Typography>
+                              <Typography variant="body2" color="text.secondary">
+                                {vendor.vendor_key}
+                              </Typography>
+                            </MenuItem>
+                          ))
+                        ) : (
+                          <MenuItem disabled value="">
+                            {t('admin.product.vendorConfig.noVendor')}
+                          </MenuItem>
+                        )}
+                      </Select>
+                    </Box>
+                  );
+                }}
+              />
+
+              <Controller
+                name={`vendor_config.${index}.commission_type`}
+                control={control}
+                render={({ field }) => (
+                  <Box sx={{ minWidth: 140, display: 'none' }}>
+                    <FormLabel>{t('admin.product.vendorConfig.commissionType')}</FormLabel>
+                    <Select {...field} fullWidth>
+                      <MenuItem value="percentage">{t('admin.vendor.percentage')}</MenuItem>
+                      <MenuItem value="fixed">{t('admin.vendor.fixedAmount')}</MenuItem>
+                    </Select>
+                  </Box>
+                )}
+              />
+
+              <Controller
+                name={`vendor_config.${index}.commission_rate`}
+                control={control}
+                rules={{
+                  required: t('admin.product.vendorConfig.commissionRateRequired'),
+                  min: { value: 0, message: t('admin.product.vendorConfig.commissionRateMin') },
+                  max: { value: 100, message: t('admin.product.vendorConfig.commissionRateMax') },
+                }}
+                render={({ field }) => (
+                  <FormInput
+                    {...(field as any)}
+                    size="small"
+                    placeholder={t('admin.product.vendorConfig.commissionRate')}
+                    label={t('admin.product.vendorConfig.commissionRate')}
+                    type="number"
+                    inputProps={{
+                      min: 0,
+                      max: 100,
+                      step: 10,
+                    }}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      field.onChange(e);
+                    }}
+                  />
+                )}
+              />
+            </Stack>
+            <IconButton
+              onClick={() => vendorConfigs.remove(index)}
+              sx={{
+                border: '1px solid',
+                borderColor: 'divider',
+                borderRadius: 1,
+                padding: '8px',
+              }}>
+              <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+            </IconButton>
+          </Stack>
+        ))}
+      </Stack>
+      {(watchedVendorConfig || []).length > 0 && (
+        <Alert severity={validateTotalCommission() ? 'info' : 'error'} sx={{ mt: 1, mb: 2 }}>
+          {validateTotalCommission()
+            ? t('admin.product.vendorConfig.totalCommission', {
+                total: totalCommission.toFixed(0),
+              })
+            : t('admin.product.vendorConfig.totalCommissionExceeded', {
+                total: totalCommission.toFixed(0),
+              })}
+        </Alert>
+      )}
+
+      <Divider />
+      <Stack
+        direction="row"
+        sx={{
+          mt: vendorConfigs.fields.length ? 2 : 1,
+          justifyContent: 'space-between',
+        }}>
+        <Button
+          size="small"
+          variant="outlined"
+          color="primary"
+          sx={{ color: 'text.primary' }}
+          onClick={() =>
+            vendorConfigs.append({
+              vendor_id: '',
+              commission_rate: 0,
+              commission_type: 'percentage',
+            })
+          }
+          disabled={loading || selectedVendorIds.length === vendors.length || noneSelectedVendors.length === 0}>
+          <AddOutlined fontSize="small" /> {t('admin.product.vendorConfig.add')}
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

package/src/components/vendor/actions.tsx

@@ -0,0 +1,145 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { ConfirmDialog, api, formatError } from '@blocklet/payment-react';
+import { useSetState } from 'ahooks';
+import type { LiteralUnion } from 'type-fest';
+
+import Actions from '../actions';
+import ClickBoundary from '../click-boundary';
+
+interface Vendor {
+  id: string;
+  vendor_key: string;
+  name: string;
+  description: string;
+  app_url: string;
+  webhook_path: string;
+  default_commission_rate: number;
+  default_commission_type: 'percentage' | 'fixed_amount';
+  status: 'active' | 'inactive';
+  order_create_params: Record<string, any>;
+  metadata: Record<string, any>;
+  created_at: string;
+  updated_at: string;
+}
+
+type VendorActionProps = {
+  data: Vendor;
+  onChange: (action: string) => void;
+  variant?: LiteralUnion<'compact' | 'normal', string>;
+};
+
+export default function VendorActions({ data, variant = 'compact', onChange }: VendorActionProps) {
+  const { t } = useLocaleContext();
+  const [state, setState] = useSetState({
+    action: '',
+    loading: false,
+  });
+
+  const onToggleStatus = async () => {
+    try {
+      setState({ loading: true });
+      const newStatus = data.status === 'active' ? 'inactive' : 'active';
+      await api.put(`/api/vendors/${data.id}`, { status: newStatus }).then((res: any) => res.data);
+      Toast.success(t('common.saved'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  const onRemove = async () => {
+    try {
+      setState({ loading: true });
+      await api.delete(`/api/vendors/${data.id}`).then((res: any) => res.data);
+      Toast.success(t('common.removed'));
+      onChange(state.action);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  // 测试发货功能
+  const onTestFulfillment = async () => {
+    try {
+      setState({ loading: true });
+      const result = await api
+        .post(`/api/vendors/${data.id}/test-fulfillment`, {
+          productCode: 'test_product',
+        })
+        .then((res: any) => res.data);
+
+      Toast.success(
+        '发货测试成功！\n' +
+          `订单号: ${result.fulfillmentResult?.orderId || 'N/A'}\n` +
+          `状态: ${result.fulfillmentResult?.status || 'N/A'}\n` +
+          `服务地址: ${result.fulfillmentResult?.serviceUrl || 'N/A'}`
+      );
+      onChange(state.action);
+    } catch (err) {
+      Toast.error(`发货测试失败: ${formatError(err)}`);
+    } finally {
+      setState({ loading: false, action: '' });
+    }
+  };
+
+  return (
+    <ClickBoundary>
+      <Actions
+        variant={variant}
+        actions={[
+          {
+            label: '测试发货',
+            handler: onTestFulfillment,
+            color: 'success',
+          },
+          data.status === 'active'
+            ? {
+                label: t('admin.vendor.deactivate'),
+                handler: () => setState({ action: 'toggle_status' }),
+                color: 'primary',
+              }
+            : {
+                label: t('admin.vendor.activate'),
+                handler: () => setState({ action: 'toggle_status' }),
+                color: 'primary',
+              },
+          {
+            label: t('admin.vendor.delete'),
+            handler: () => setState({ action: 'remove' }),
+            color: 'error',
+            divider: true,
+          },
+        ].filter(Boolean)}
+      />
+      {state.action === 'toggle_status' && (
+        <ConfirmDialog
+          onConfirm={onToggleStatus}
+          onCancel={() => setState({ action: '' })}
+          title={data.status === 'active' ? t('admin.vendor.deactivate') : t('admin.vendor.activate')}
+          message={
+            data.status === 'active'
+              ? t('admin.vendor.deactivateTip', { name: data.name })
+              : t('admin.vendor.activateTip', { name: data.name })
+          }
+          loading={state.loading}
+        />
+      )}
+      {state.action === 'remove' && (
+        <ConfirmDialog
+          onConfirm={onRemove}
+          onCancel={() => setState({ action: '' })}
+          title={t('admin.vendor.delete')}
+          message={t('admin.vendor.deleteTip', { name: data.name })}
+          loading={state.loading}
+        />
+      )}
+    </ClickBoundary>
+  );
+}

package/src/locales/en.tsx

@@ -40,6 +40,7 @@ export default flat({
     advancedFeatures: 'Advanced Features',
     quickStarts: 'Quick Starts',
     copy: 'Copy',
+    copied: 'Copied',
     copySuccess: 'Copy Success',
     copyFailed: 'Copy Failed',
     copyTip: 'Please copy manually',
@@ -98,6 +99,13 @@ export default flat({
     overview: 'Overview',
     payments: 'Payments',
     connections: 'Connections',
+    back: 'Back',
+    actions: 'Actions',
+    create: 'Create',
+    creating: 'Creating...',
+    save: 'Save',
+    saving: 'Saving...',
+    cancel: 'Cancel',
     paymentLinks: 'Payment links',
     paymentMethods: 'Payment methods',
     customers: 'Customers',
@@ -105,6 +113,7 @@ export default flat({
     pricing: 'Pricing',
     coupons: 'Coupons',
     pricingTables: 'Pricing tables',
+    vendors: 'Vendors',
     billing: 'Billing',
     invoices: 'Invoices',
     subscriptions: 'Subscriptions',
@@ -419,6 +428,25 @@ export default flat({
         credit: 'Credit',
         good: 'Good',
       },
+      vendorConfig: {
+        title: 'Vendor Configuration',
+        add: 'Add Vendor',
+        empty: 'No vendors configured. Click "Add Vendor" to configure vendor services.',
+        vendor: 'Vendor',
+        vendorRequired: 'Vendor is required',
+        productCode: 'Product Code',
+        productCodeRequired: 'Product code is required',
+        commissionType: 'Commission Type',
+        commissionRate: 'Commission Rate',
+        commissionRateRequired: 'Commission rate is required',
+        commissionRateMin: 'Commission rate must be greater than or equal to 0',
+        commissionRateMax: 'Commission rate cannot exceed 100%',
+        amount: 'Fixed Amount',
+        noVendor: 'No vendor available',
+        amountRequired: 'Fixed amount is required',
+        totalCommission: 'Total commission rate: {total}%',
+        totalCommissionExceeded: 'Total commission rate exceeds 100%: {total}%',
+      },
     },
     price: {
       name: 'Price',
@@ -835,6 +863,67 @@ export default flat({
         success: 'Invoice voided',
       },
     },
+    vendor: {
+      create: 'Create Vendor',
+      edit: 'Edit Vendor',
+      delete: 'Delete Vendor',
+      save: 'Save Vendor',
+      saved: 'Vendor saved successfully',
+      test: 'Test',
+      testConnection: 'Test Connection',
+      testSuccess: 'Connection test successful',
+      testAfterSave: 'Vendor saved successfully. You can test the connection to verify the configuration.',
+      testToEnable: 'Vendor saved successfully. Test the connection to enable the vendor.',
+      enabled: 'Enabled',
+      disabled: 'Disabled',
+      addressCheckFailed: 'Address check failed, cannot save when enabled',
+      updateSuccess: 'Vendor updated successfully',
+      testFailed: 'Connection test failed (Status: {status})',
+      testError: 'Connection test failed - network error',
+      vendorKeyInvalid: 'Vendor type must contain only lowercase letters, numbers, and underscores',
+      deleteTitle: 'Delete Vendor',
+      deleteContent: 'Are you sure you want to delete vendor "{name}"? This action cannot be undone.',
+      deleteTip: 'Are you sure you want to delete vendor "{name}"? This action cannot be undone.',
+      activate: 'Activate Vendor',
+      activateTip: 'Are you sure you want to activate vendor "{name}"?',
+      deactivate: 'Deactivate Vendor',
+      deactivateTip: 'Are you sure you want to deactivate vendor "{name}"?',
+      name: 'Vendor Name',
+      nameRequired: 'Vendor name is required',
+      vendorKey: 'Vendor Type',
+      vendorKeyRequired: 'Vendor type is required',
+      vendorKeyHelp: 'Unique identifier for the vendor (e.g., launcher, did_names)',
+      description: 'Description',
+      appUrl: 'App URL',
+      appUrlRequired: 'App URL is required',
+      appUrlInvalid: 'Please enter a valid URL starting with http:// or https://',
+      appUrlHelp: 'The base URL of the vendor application',
+      webhookPath: 'Webhook Path',
+      webhookPathInvalid: 'Please enter a valid path starting with /',
+      webhookPathHelp: 'Optional webhook callback path (e.g., /webhooks/status)',
+      blockletMetaUrl: 'Blocklet Meta URL',
+      blockletMetaUrlRequired: 'Blocklet Meta URL is required',
+      blockletMetaUrlInvalid: 'Please enter a valid URL starting with http:// or https://',
+      blockletMetaUrlHelp: 'Required blocklet metadata URL for application information',
+      commission: 'Commission',
+      commissionRate: 'Commission Rate',
+      commissionRateRequired: 'Commission rate is required',
+      commissionRateMin: 'Commission rate must be greater than or equal to 0',
+      commissionRateMax: 'Commission rate is too high',
+      commissionType: 'Commission Type',
+      commissionRateHelp: 'Commission rate as percentage',
+      commissionAmountHelp: 'Fixed commission amount',
+      percentage: 'Percentage',
+      fixedAmount: 'Fixed Amount',
+      active: 'Active',
+      inactive: 'Inactive',
+      basicInfo: 'Basic Information',
+      apiConfig: 'API Configuration',
+      commissionConfig: 'Commission Configuration',
+      status: 'Status',
+      servicePublicKey: 'Service Public Key',
+      servicePublicKeyDescription: 'Used for vendor communication authentication',
+    },
     subscription: {
       view: 'View subscription',
       name: 'Subscription',