payment-kit 1.20.8 → 1.20.10

package/src/pages/admin/products/vendors/create.tsx

@@ -15,24 +15,23 @@ import {
   MenuItem,
 } from '@mui/material';
 import { useState } from 'react';
-import { useForm, Controller } from 'react-hook-form';
+import { useForm, Controller, FormProvider } from 'react-hook-form';
 import { dispatch } from 'use-bus';
 
 import { joinURL, withQuery } from 'ufo';
 import DrawerForm from '../../../../components/drawer-form';
+import MetadataForm from '../../../../components/metadata/form';
 import { formatProxyUrl } from '../../../../libs/util';
 
 interface Vendor {
   id: string;
   vendor_key: string;
+  vendor_type: string;
   name: string;
   description: string;
   app_url: string;
-  webhook_path: string;
-  default_commission_rate: number;
-  default_commission_type: 'percentage' | 'fixed_amount';
+  vendor_did?: string;
   status: 'active' | 'inactive';
-  order_create_params: Record<string, any>;
   metadata: Record<string, any>;
   created_at: string;
   updated_at: string;
@@ -47,16 +46,13 @@ interface VendorCreateProps {
 
 interface VendorFormData {
   vendor_key: string;
+  vendor_type: string;
   name: string;
   description: string;
   app_url: string;
-  webhook_path: string;
-  blocklet_meta_url: string;
-  default_commission_rate: number;
-  default_commission_type: 'percentage' | 'fixed_amount';
+  vendor_did?: string;
   status: 'active' | 'inactive';
-  order_create_params: Record<string, any>;
-  metadata: Record<string, any>;
+  metadata: Array<{ key: string; value: string }>;
   app_pid?: string;
   app_logo?: string;
 }
@@ -72,41 +68,44 @@ export default function VendorCreate({
 
   const isEditMode = !!vendorData;
 
+  const defaultValues = vendorData
+    ? {
+        ...vendorData,
+        metadata: vendorData.metadata
+          ? Object.entries(vendorData.metadata).map(([key, value]) => ({
+              key,
+              value: typeof value === 'object' ? JSON.stringify(value) : String(value),
+            }))
+          : [],
+      }
+    : {
+        vendor_key: '',
+        vendor_type: 'launcher',
+        name: '',
+        description: '',
+        app_url: '',
+        vendor_did: '',
+        status: 'inactive' as const,
+        metadata: [{ key: 'blockletMetaUrl', value: '' }],
+        app_pid: '',
+        app_logo: '',
+      };
+
+  const methods = useForm<VendorFormData>({
+    mode: 'onChange',
+    defaultValues,
+  });
+
   const {
     control,
     handleSubmit,
     reset,
     formState: { errors, isValid },
     watch,
-  } = useForm<VendorFormData>({
-    mode: 'onChange',
-    defaultValues: vendorData
-      ? {
-          ...vendorData,
-          default_commission_rate: vendorData.default_commission_rate,
-          blocklet_meta_url: vendorData.metadata?.blockletMetaUrl || '',
-        }
-      : {
-          vendor_key: '',
-          name: '',
-          description: '',
-          app_url: '',
-          webhook_path: '',
-          blocklet_meta_url: '',
-          default_commission_rate: 80,
-          default_commission_type: 'percentage',
-          status: 'inactive',
-          order_create_params: {},
-          metadata: {},
-          app_pid: '',
-          app_logo: '',
-        },
-  });
+  } = methods;
 
   const watchedValues = watch();
 
-  const isPercentage = watchedValues.default_commission_type === 'percentage';
-
   const validateUrl = (url: string) => {
     if (!url) return t('admin.vendor.appUrlRequired');
     try {
@@ -118,25 +117,16 @@ export default function VendorCreate({
     }
   };
 
-  const validateWebhookPath = (path: string) => {
-    if (!path) return true;
-    if (!path.startsWith('/')) {
-      return t('admin.vendor.webhookPathInvalid');
+  const validateDid = (did: string | undefined) => {
+    if (!did) return true; // DID 是可选的
+    // DID 格式验证
+    const didPattern = /^(did:abt:)?[1-9A-HJ-NP-Za-km-z]{37}$/;
+    if (!didPattern.test(did.trim())) {
+      return t('admin.vendor.vendorDidInvalid');
     }
     return true;
   };
 
-  const validateBlockletMetaUrl = (url: string) => {
-    if (!url) return t('admin.vendor.blockletMetaUrlRequired'); // 必填字段
-    try {
-      // eslint-disable-next-line no-new
-      new URL(url);
-      return true;
-    } catch {
-      return t('admin.vendor.blockletMetaUrlInvalid');
-    }
-  };
-
   const onSubmit = async (data: VendorFormData) => {
     try {
       setLoading(true);
@@ -151,14 +141,24 @@ export default function VendorCreate({
         return;
       }
 
-      // 准备提交数据，将 blocklet_meta_url 放入 metadata
-      const { blocklet_meta_url: blockletMetaUrl, ...restData } = data;
+      // 准备提交数据，将 metadata 数组转换为对象
+      const { metadata: metadataArray, ...restData } = data;
+      const metadataObj = metadataArray.reduce((acc: Record<string, any>, item) => {
+        if (item.key && item.value) {
+          try {
+            // 尝试解析 JSON，如果失败则作为字符串处理
+            acc[item.key] = JSON.parse(item.value);
+          } catch {
+            acc[item.key] = item.value;
+          }
+        }
+        return acc;
+      }, {});
+
       const submitData = {
         ...restData,
-        metadata: {
-          ...data.metadata,
-          ...(blockletMetaUrl && { blockletMetaUrl }),
-        },
+        vendor_did: restData.vendor_did?.replace('did:abt:', '').trim(),
+        metadata: metadataObj,
       };
 
       // 如果状态为启用，则检测应用地址可用性
@@ -181,6 +181,10 @@ export default function VendorCreate({
           // 从响应中获取appPid和appLogo
           const blockletInfo = await response.json();
           if (blockletInfo) {
+            const component = blockletInfo.componentMountPoints?.find((x: any) => x.did === submitData.vendor_did);
+            if (component && !['', '/'].includes(component.mountPoint) && submitData.metadata) {
+              submitData.metadata.mountPoint = component.mountPoint;
+            }
             submitData.app_pid = blockletInfo.pid || blockletInfo.appPid;
             submitData.app_logo = blockletInfo.logo || blockletInfo.appLogo;
           }
@@ -227,20 +231,35 @@ export default function VendorCreate({
   };
 
   return (
-    <DrawerForm
-      icon={isEditMode ? null : <AddOutlined />}
-      text={isEditMode ? t('admin.vendor.edit') : t('admin.vendor.create')}
-      open={open}
-      onClose={handleClose}
-      width={800}
-      addons={
-        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={loading || !isValid}>
-          {loading && <CircularProgress size="small" sx={{ mr: 1 }} />}
-          {isEditMode ? t('admin.save') : t('admin.vendor.save')}
-        </Button>
-      }>
-      <Stack spacing={3}>
-        <Stack direction="row" spacing={2}>
+    <FormProvider {...methods}>
+      <DrawerForm
+        icon={isEditMode ? null : <AddOutlined />}
+        text={isEditMode ? t('admin.vendor.edit') : t('admin.vendor.create')}
+        open={open}
+        onClose={handleClose}
+        width={800}
+        addons={
+          <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)} disabled={loading || !isValid}>
+            {loading && <CircularProgress size="small" sx={{ mr: 1 }} />}
+            {isEditMode ? t('admin.save') : t('admin.vendor.save')}
+          </Button>
+        }>
+        <Stack spacing={3}>
+          <Controller
+            name="vendor_type"
+            control={control}
+            rules={{
+              required: t('admin.vendor.vendorTypeRequired'),
+            }}
+            render={({ field }) => (
+              <FormControl fullWidth required error={!!errors.vendor_type}>
+                <InputLabel>{t('admin.vendor.vendorType')}</InputLabel>
+                <Select {...field} label={t('admin.vendor.vendorType')}>
+                  <MenuItem value="launcher">{t('admin.vendor.launcher')}</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          />
           <Controller
             name="vendor_key"
             control={control}
@@ -266,9 +285,7 @@ export default function VendorCreate({
           <Controller
             name="name"
             control={control}
-            rules={{
-              required: t('admin.vendor.nameRequired'),
-            }}
+            rules={{ required: t('admin.vendor.nameRequired') }}
             render={({ field }) => (
               <TextField
                 {...field}
@@ -276,143 +293,76 @@ export default function VendorCreate({
                 required
                 fullWidth
                 error={!!errors.name}
-                helperText={errors.name?.message}
+                helperText={errors.name?.message || t('admin.vendor.displayNameHelp')}
               />
             )}
           />
-        </Stack>
-
-        <Controller
-          name="description"
-          control={control}
-          render={({ field }) => (
-            <TextField {...field} label={t('admin.vendor.description')} multiline rows={3} fullWidth />
-          )}
-        />
-
-        <Controller
-          name="app_url"
-          control={control}
-          rules={{
-            required: t('admin.vendor.appUrlRequired'),
-            validate: validateUrl,
-          }}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              label={t('admin.vendor.appUrl')}
-              required
-              fullWidth
-              error={!!errors.app_url}
-              helperText={errors.app_url?.message || t('admin.vendor.appUrlHelp')}
-            />
-          )}
-        />
 
-        <Controller
-          name="webhook_path"
-          control={control}
-          rules={{
-            validate: validateWebhookPath,
-          }}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              label={t('admin.vendor.webhookPath')}
-              fullWidth
-              error={!!errors.webhook_path}
-              helperText={errors.webhook_path?.message || t('admin.vendor.webhookPathHelp')}
-            />
-          )}
-        />
-
-        <Controller
-          name="blocklet_meta_url"
-          control={control}
-          rules={{
-            required: t('admin.vendor.blockletMetaUrlRequired'),
-            validate: validateBlockletMetaUrl,
-          }}
-          render={({ field }) => (
-            <TextField
-              {...field}
-              label={t('admin.vendor.blockletMetaUrl')}
-              required
-              fullWidth
-              error={!!errors.blocklet_meta_url}
-              helperText={errors.blocklet_meta_url?.message || t('admin.vendor.blockletMetaUrlHelp')}
-            />
-          )}
-        />
-
-        <Stack direction="row" spacing={0} sx={{ width: '30%' }}>
-          {/* 分成类型 - 隐藏，固定为比例分成 */}
           <Controller
-            name="default_commission_type"
+            name="description"
             control={control}
             render={({ field }) => (
-              <FormControl fullWidth sx={{ display: 'none' }}>
-                <InputLabel>{t('admin.vendor.commissionType')}</InputLabel>
-                <Select {...field} label={t('admin.vendor.commissionType')}>
-                  <MenuItem value="percentage">{t('admin.vendor.percentage')}</MenuItem>
-                  <MenuItem value="fixed_amount">{t('admin.vendor.fixedAmount')}</MenuItem>
-                </Select>
-              </FormControl>
+              <TextField {...field} label={t('admin.vendor.description')} multiline rows={3} fullWidth />
             )}
           />
+
           <Controller
-            name="default_commission_rate"
+            name="app_url"
             control={control}
             rules={{
-              required: t('admin.vendor.commissionRateRequired'),
-              min: {
-                value: 0,
-                message: t('admin.vendor.commissionRateMin'),
-              },
-              max: {
-                value: isPercentage ? 100 : 999999,
-                message: t('admin.vendor.commissionRateMax'),
-              },
+              required: t('admin.vendor.appUrlRequired'),
+              validate: validateUrl,
             }}
             render={({ field }) => (
               <TextField
                 {...field}
-                label={`${t('admin.vendor.commissionRate')} ${isPercentage ? '(%)' : ''}`}
-                type="number"
+                label={t('admin.vendor.appUrl')}
                 required
                 fullWidth
-                placeholder="20"
-                error={!!errors.default_commission_rate}
-                helperText={
-                  errors.default_commission_rate?.message ||
-                  (isPercentage ? t('admin.vendor.commissionRateHelp') : t('admin.vendor.commissionAmountHelp'))
+                error={!!errors.app_url}
+                helperText={errors.app_url?.message || t('admin.vendor.appUrlHelp')}
+              />
+            )}
+          />
+
+          <Controller
+            name="vendor_did"
+            control={control}
+            rules={{
+              required: t('admin.vendor.vendorDidRequired'),
+              validate: validateDid,
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label={t('admin.vendor.vendorDid')}
+                fullWidth
+                error={!!errors.vendor_did}
+                helperText={errors.vendor_did?.message || t('admin.vendor.vendorDidHelp')}
+              />
+            )}
+          />
+
+          <MetadataForm title={t('common.metadata.label')} />
+
+          <Controller
+            name="status"
+            control={control}
+            render={({ field }) => (
+              <FormControlLabel
+                sx={{ maxWidth: 'max-content' }}
+                control={
+                  <Switch
+                    checked={field.value === 'active'}
+                    onChange={(e) => field.onChange(e.target.checked ? 'active' : 'inactive')}
+                  />
                 }
-                inputProps={{
-                  min: 0,
-                  max: isPercentage ? 100 : 999999,
-                  step: isPercentage ? 10 : 1,
-                }}
+                label={watchedValues.status === 'active' ? t('admin.vendor.enabled') : t('admin.vendor.disabled')}
               />
             )}
           />
         </Stack>
-
-        <Controller
-          name="status"
-          control={control}
-          render={({ field }) => (
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={field.value === 'active'}
-                  onChange={(e) => field.onChange(e.target.checked ? 'active' : 'inactive')}
-                />
-              }
-              label={watchedValues.status === 'active' ? t('admin.vendor.enabled') : t('admin.vendor.disabled')}
-            />
-          )}
-        />
-      </Stack>
-    </DrawerForm>
+      </DrawerForm>
+    </FormProvider>
   );
 }

package/src/pages/admin/products/vendors/index.tsx

@@ -16,14 +16,11 @@ import VendorCreate from './create';
 interface Vendor {
   id: string;
   vendor_key: string;
+  vendor_type: 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;
@@ -95,7 +92,17 @@ export default function VendorsList() {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as Vendor;
-          return <InfoCard name={item.name} description={item.vendor_key} logo={undefined} />;
+          return (
+            <InfoCard
+              name={item.name}
+              description={
+                <Typography variant="body2" color="text.secondary" sx={{ textTransform: 'capitalize' }}>
+                  {item.vendor_type}
+                </Typography>
+              }
+              logo={undefined}
+            />
+          );
         },
       },
     },
@@ -114,21 +121,6 @@ export default function VendorsList() {
         },
       },
     },
-    {
-      label: t('admin.vendor.commission'),
-      name: 'commission',
-      options: {
-        filter: true,
-        customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index] as Vendor;
-          const commissionText =
-            item.default_commission_type === 'percentage'
-              ? `${item.default_commission_rate}%`
-              : `${item.default_commission_rate}`;
-          return <Typography variant="body2">{commissionText}</Typography>;
-        },
-      },
-    },
     {
       label: t('common.status'),
       name: 'status',
@@ -197,7 +189,7 @@ export default function VendorsList() {
   return (
     <>
       {/* 供应商服务公钥展示 */}
-      {data.pk && (
+      {window.blocklet.appPk && (
         <Box
           sx={{
             display: 'flex',
@@ -237,7 +229,7 @@ export default function VendorsList() {
             }}>
             <Chip
               sx={{ backgroundColor: 'grey.200', color: 'text.secondary' }}
-              label={data.pk}
+              label={window.blocklet.appPk}
               variant="outlined"
               size="small"
             />

package/src/pages/customer/subscription/detail.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import {
+  api,
   CreditTransactionsList,
   CustomerInvoiceList,
-  TxLink,
-  api,
   formatBNStr,
   formatTime,
   hasDelegateTxHash,
+  TxLink,
   useMobile,
 } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -25,31 +25,32 @@ import {
   Button,
   CircularProgress,
   Divider,
-  Stack,
-  Typography,
-  Link as MuiLink,
   IconButton,
+  Link as MuiLink,
+  Stack,
   Tooltip,
+  Typography,
   useTheme,
 } from '@mui/material';
-import { useRequest } from 'ahooks';
-import { Link, useNavigate, useParams } from 'react-router-dom';
 import { styled } from '@mui/system';
 import { BN, fromUnitToToken } from '@ocap/util';
+import { useRequest } from 'ahooks';
 import { useCallback, useRef } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
 import Currency from '../../../components/currency';
 import CustomerLink from '../../../components/customer/link';
+import InfoMetric from '../../../components/info-metric';
 import InfoRow from '../../../components/info-row';
+import InfoRowGroup from '../../../components/info-row-group';
 import SubscriptionDescription from '../../../components/subscription/description';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionActions, { ActionMethods } from '../../../components/subscription/portal/actions';
-import { canChangePaymentMethod } from '../../../libs/util';
+import VendorServiceList from '../../../components/subscription/vendor-service-list';
 import { useSessionContext } from '../../../contexts/session';
-import InfoMetric from '../../../components/info-metric';
-import { useUnpaidInvoicesCheckForSubscription, usePendingAmountForSubscription } from '../../../hooks/subscription';
+import { usePendingAmountForSubscription, useUnpaidInvoicesCheckForSubscription } from '../../../hooks/subscription';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
-import InfoRowGroup from '../../../components/info-row-group';
+import { canChangePaymentMethod } from '../../../libs/util';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -691,6 +692,20 @@ export default function CustomerSubscriptionDetail() {
           <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="customer" />
         </Box>
       </Box>
+      {(() => {
+        const vendorServices = data.items?.map((item) => item.price?.product?.vendor_config || []).flat();
+
+        if (!vendorServices || vendorServices.length === 0) return null;
+
+        return (
+          <>
+            <Divider />
+            <Box className="section">
+              <VendorServiceList vendorServices={vendorServices} subscriptionId={id} />
+            </Box>
+          </>
+        );
+      })()}
       <Divider />
       {isCredit ? (
         <Box className="section">