payment-kit 1.18.56 → 1.19.1

package/src/components/price/form.tsx

@@ -1,20 +1,31 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { findCurrency, formatAmountPrecisionLimit, usePaymentContext } from '@blocklet/payment-react';
+import {
+  findCurrency,
+  formatAmountPrecisionLimit,
+  usePaymentContext,
+  api,
+  FormLabel,
+  isCreditMetered,
+  formatPrice,
+} from '@blocklet/payment-react';
 import type {
   InferFormType,
   PriceRecurring,
+  TMeter,
+  TMeterExpanded,
+  TPaymentCurrency,
   TPaymentCurrencyExpanded,
   TPaymentMethodExpanded,
+  TPrice,
   TPriceExpanded,
 } from '@blocklet/payment-types';
-import { DeleteOutlineOutlined, InfoOutlined } from '@mui/icons-material';
+import { DeleteOutlineOutlined } from '@mui/icons-material';
 import {
   Alert,
   Box,
   Checkbox,
   FormControlLabel,
-  FormLabel,
   IconButton,
   InputAdornment,
   MenuItem,
@@ -23,19 +34,28 @@ import {
   TextField,
   ToggleButton,
   ToggleButtonGroup,
-  Tooltip,
   Typography,
+  Autocomplete,
+  Divider,
 } from '@mui/material';
+
 import { styled } from '@mui/system';
 import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
 import type { LiteralUnion } from 'type-fest';
+import { useMemo, useState } from 'react';
 
 import { get } from 'lodash';
+import { useRequest } from 'ahooks';
+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';
 
 export type Price = Omit<InferFormType<TPriceExpanded>, 'product_id' | 'object'> & {
-  model: LiteralUnion<'standard' | 'package' | 'graduated' | 'volume' | 'custom', string>;
+  model: LiteralUnion<'standard' | 'package' | 'graduated' | 'volume' | 'custom' | 'credit_metered', string>;
   recurring: Omit<PriceRecurring, 'usage_type'> & {
     interval_config: string;
   };
@@ -62,7 +82,7 @@ export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency' | 'quantity_sold'
     round: 'up',
   },
   tiers: [],
-  metadata: [],
+  metadata: {} as any,
   custom_unit_amount: null,
   currency_options: [],
   tiers_mode: null,
@@ -73,14 +93,11 @@ export const DEFAULT_PRICE: Omit<Price, 'product' | 'currency' | 'quantity_sold'
 type PriceFormProps = {
   prefix?: string;
   simple?: boolean;
+  meterId?: string;
+  productType?: string;
 };
 
-PriceForm.defaultProps = {
-  prefix: '',
-  simple: false,
-};
-
-const INPUT_WIDTH = 260;
+const INPUT_WIDTH = '100%';
 
 const hasMoreCurrency = (methods: TPaymentMethodExpanded[] = []) => {
   return methods.every((method) => method.payment_currencies.length > 1) || methods.length > 1;
@@ -96,7 +113,11 @@ function stripeCurrencyValidate(v: number, currency: TPaymentCurrencyExpanded |
   return true;
 }
 
-export default function PriceForm({ prefix, simple }: PriceFormProps) {
+const fetchMeters = (): Promise<{ list: TMeterExpanded[]; count: number }> => {
+  return api.get('/api/meters?status=active&limit=100').then((res: any) => res.data);
+};
+
+export default function PriceForm({ prefix = '', simple = false, productType = undefined }: PriceFormProps) {
   const getFieldName = (name: string) => (prefix ? `${prefix}.${name}` : name);
 
   const { t, locale } = useLocaleContext();
@@ -112,6 +133,8 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   };
   const { settings, livemode } = usePaymentContext();
   const currencies = useFieldArray({ control, name: getFieldName('currency_options') });
+  const formProductType = useWatch({ control, name: 'type' });
+  const currentProductType = productType || formProductType;
   const priceLocked = useWatch({ control, name: getFieldName('locked') });
   const isRecurring = useWatch({ control, name: getFieldName('type') }) === 'recurring';
   const isMetered = useWatch({ control, name: getFieldName('recurring.usage_type') }) === 'metered';
@@ -119,10 +142,37 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
   const model = useWatch({ control, name: getFieldName('model') });
   const intervalSelectValue = useWatch({ control, name: getFieldName('recurring.interval') });
   const defaultCurrencyId = useWatch({ control, name: getFieldName('currency_id') });
-  const defaultCurrency = findCurrency(settings.paymentMethods, defaultCurrencyId);
+  const creditCurrencies = useMemo(() => {
+    return settings.paymentMethods.flatMap((method: TPaymentMethodExpanded) =>
+      method.payment_currencies.filter((c: TPaymentCurrency) => c.type === 'credit')
+    );
+  }, [settings.paymentMethods]);
+  const { products } = useProductsContext();
   const quantityPositive = (v: number | undefined) => !v || v.toString().match(/^(0|[1-9]\d*)$/);
   const intervalCountPositive = (v: number) => Number.isInteger(Number(v)) && v > 0;
 
+  const meteringMeterId = useWatch({ control, name: getFieldName('recurring.meter_id') });
+  const [meters, setMeters] = useState<TMeterExpanded[]>([]);
+
+  const { loading: loadingMeters } = useRequest(
+    () => {
+      if (model === 'credit_metered') {
+        return fetchMeters();
+      }
+      return Promise.resolve({ list: [] as any, count: 0 });
+    },
+    {
+      refreshDeps: [model],
+      onSuccess: (result) => {
+        setMeters(result.list);
+      },
+    }
+  );
+
+  const getMeterDisplayName = (meter: TMeter) => {
+    return `${meter.name} (${meter.event_name} • ${meter.unit})`;
+  };
+
   const isLocked = priceLocked && window.blocklet?.PAYMENT_CHANGE_LOCKED_PRICE !== '1';
 
   const validateAmount = (v: number, currency: { maximum_precision?: number }) => {
@@ -155,9 +205,87 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
       ...update,
     });
   };
+
+  const selectedMeter = meters.find((m) => m.id === meteringMeterId);
+  const isCreditBilling = model === 'credit_metered';
+  const isCreditMode = currentProductType === 'credit';
+
   return (
     <Root direction="column" alignItems="flex-start" spacing={2}>
       {isLocked && <Alert severity="info">{t('admin.price.locked')}</Alert>}
+      <Controller
+        name={getFieldName('type')}
+        control={control}
+        disabled={isLocked}
+        render={({ field }) => (
+          <Box sx={{ width: INPUT_WIDTH }}>
+            <ToggleButtonGroup
+              {...field}
+              onChange={(_, value: string) => {
+                if (value !== null) {
+                  setValue(field.name, value);
+                }
+                if (value === 'one_time' && isCreditBilling) {
+                  setValue(getFieldName('model'), 'standard');
+                }
+              }}
+              exclusive
+              fullWidth
+              sx={{
+                height: 'auto',
+                '& .MuiToggleButton-root': {
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  justifyContent: 'flex-start',
+                  textAlign: 'left',
+                  height: 'auto',
+                  py: 1,
+                },
+              }}>
+              <ToggleButton value="recurring">
+                <Box>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontWeight: 'medium',
+                      color: 'text.primary',
+                    }}>
+                    {t('admin.price.types.recurring')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                      mt: 0.5,
+                    }}>
+                    {t('admin.price.types.recurringDesc')}
+                  </Typography>
+                </Box>
+              </ToggleButton>
+              <ToggleButton value="one_time">
+                <Box>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      fontWeight: 'medium',
+                      color: 'text.primary',
+                    }}>
+                    {t('admin.price.types.onetime')}
+                  </Typography>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      color: 'text.secondary',
+                      mt: 0.5,
+                    }}>
+                    {t('admin.price.types.onetimeDesc')}
+                  </Typography>
+                </Box>
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Box>
+        )}
+      />
       <Controller
         name={getFieldName('model')}
         control={control}
@@ -165,8 +293,24 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
         disabled={isLocked}
         render={({ field }) => (
           <Box sx={{ width: INPUT_WIDTH }}>
-            <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.model')}</FormLabel>
-            <Select {...field} fullWidth size="small">
+            <FormLabel>{t('admin.price.model')}</FormLabel>
+            <Select
+              {...field}
+              fullWidth
+              size="small"
+              onChange={(e) => {
+                if (e.target.value === 'standard' && isCreditBilling) {
+                  setValue(getFieldName('currency_id'), settings.baseCurrency?.id);
+                }
+                field.onChange(e.target.value);
+                if (e.target.value === 'credit_metered') {
+                  setValue(getFieldName('type'), 'recurring');
+                  setValue(getFieldName('recurring.usage_type'), 'metered');
+                } else {
+                  setValue(getFieldName('recurring.usage_type'), 'licensed');
+                  setValue(getFieldName('recurring.meter_id'), '');
+                }
+              }}>
               <MenuItem value="standard">{t('admin.price.models.standard')}</MenuItem>
               <MenuItem value="package">{t('admin.price.models.package')}</MenuItem>
               <MenuItem value="graduated" disabled>
@@ -175,233 +319,305 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
               <MenuItem value="volume" disabled>
                 {t('admin.price.models.volume')}
               </MenuItem>
-              <MenuItem value="custom" disabled>
-                {t('admin.price.models.custom')}
-              </MenuItem>
+              <MenuItem value="credit_metered">{t('admin.price.models.creditMetered')}</MenuItem>
             </Select>
           </Box>
         )}
       />
-      <Stack direction="row">
-        <Controller
-          name={getFieldName('unit_amount')}
-          control={control}
-          rules={{
-            required: t('admin.price.unit_amount.required'),
-            validate: (v) => {
-              const hasStripError = !stripeCurrencyValidate(v, defaultCurrency);
-              if (hasStripError) {
-                return t('admin.price.unit_amount.stripeTip');
+      {/* 3. Credit 计量计费专用区域 */}
+      {isCreditBilling && (
+        <Box sx={{ width: INPUT_WIDTH }}>
+          <Alert severity="info" sx={{ mb: 2 }}>
+            {t('admin.price.creditMetered.description')}
+          </Alert>
+          <FormLabel sx={{ color: 'text.primary' }}>
+            {t('admin.price.creditMetered.selectMeter')}{' '}
+            <Typography component="span" sx={{ color: 'error.main' }}>
+              *
+            </Typography>
+          </FormLabel>
+          <Autocomplete
+            options={meters}
+            getOptionLabel={getMeterDisplayName}
+            loading={loadingMeters}
+            value={selectedMeter || null}
+            disabled={isLocked}
+            onChange={(_, meter: TMeterExpanded | null) => {
+              setValue(getFieldName('recurring.meter_id'), meter?.id || '');
+              if (meter?.paymentCurrency) {
+                setValue(getFieldName('currency_id'), meter.paymentCurrency.id);
+                setValue(getFieldName('unit_amount'), 1);
               }
-              return validateAmount(v, defaultCurrency ?? {});
-            },
-          }}
-          disabled={isLocked}
-          render={({ field }) => (
-            <Box>
-              <FormLabel sx={{ color: 'text.primary' }}>
-                <Stack direction="row" alignItems="center" spacing={0.5}>
-                  <Typography component="span" color="text.primary">
-                    {t('admin.price.amount')}
-                  </Typography>
-                  <Tooltip title={t('admin.price.amountTip')} placement="top" arrow>
-                    <InfoOutlined fontSize="small" sx={{ color: 'text.secondary' }} />
-                  </Tooltip>
-                </Stack>
-              </FormLabel>
+            }}
+            fullWidth
+            renderInput={(params) => (
               <TextField
-                {...field}
-                type="number"
+                {...params}
+                required
+                error={!meteringMeterId}
+                helperText={
+                  !meteringMeterId ? t('admin.price.creditMetered.required') : t('admin.price.creditMetered.help')
+                }
                 size="small"
-                sx={{ width: INPUT_WIDTH }}
-                error={!!getFieldError(getFieldName('unit_amount'))}
-                helperText={getFieldError(getFieldName('unit_amount'))?.message}
                 InputProps={{
+                  ...params.InputProps,
                   endAdornment: (
-                    <InputAdornment position="end">
-                      <CurrencySelect
-                        mode="selected"
-                        hasSelected={(currency) =>
-                          currencies.fields.some((x: any) => x.currency_id === currency.id) ||
-                          currency.id === defaultCurrencyId
-                        }
-                        onSelect={(currencyId) => {
-                          const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
-                          if (index > -1) {
-                            // @ts-ignore
-                            handleCurrencyChange(index, currencyId);
-                          }
-                          setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
-                            shouldValidate: true,
-                          });
-                          setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
-                        }}
-                        value={defaultCurrencyId}
-                        disabled={isLocked}
-                        selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
-                      />
-                    </InputAdornment>
+                    <>
+                      {loadingMeters ? <div>{t('common.loading')}</div> : null}
+                      {params.InputProps.endAdornment}
+                    </>
                   ),
                 }}
-                onChange={(e) => {
-                  const { value } = e.target;
-                  field.onChange(value);
-                  const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
-                  if (index === -1) {
-                    return;
-                  }
-                  setValue(getFieldName(`currency_options.${index}.unit_amount`), value, { shouldValidate: true });
-                }}
               />
-            </Box>
-          )}
-        />
-        {model === 'package' && (
-          <Controller
-            name={getFieldName('transform_quantity.divide_by')}
-            control={control}
-            disabled={isLocked}
-            render={({ field }) => (
-              <Box ml={2}>
-                <FormLabel>&nbsp;</FormLabel>
-                <TextField
-                  {...field}
-                  type="number"
-                  size="small"
-                  sx={{ width: INPUT_WIDTH }}
-                  InputProps={{
-                    startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
-                    endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
-                  }}
-                />
-              </Box>
             )}
           />
-        )}
-      </Stack>
-      {hasMoreCurrency(settings.paymentMethods) && (
-        <Stack direction="column" spacing={2}>
-          {currencies.fields.map((item: any, index: number) => {
-            if (item.currency_id === defaultCurrencyId) {
-              return null;
-            }
-            const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
-            const currency = findCurrency(settings.paymentMethods, item.currency_id);
-            return (
-              <Stack key={item.currency_id} direction="row" alignItems="start" spacing={1}>
-                <Controller
-                  name={fieldName}
-                  control={control}
-                  rules={{
-                    required: t('admin.price.unit_amount.required'),
-                    validate: (v) => {
-                      const hasStripError = !stripeCurrencyValidate(v, currency);
-                      if (hasStripError) {
-                        return t('admin.price.unit_amount.stripeTip');
+        </Box>
+      )}
+      {!isCreditBilling && (
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={2}
+          sx={{
+            width: INPUT_WIDTH,
+            '&': {
+              flexWrap: { xs: 'nowrap', sm: 'wrap' },
+            },
+          }}>
+          <Stack spacing={2} sx={{ flex: 1, minWidth: { xs: 'auto', sm: '300px' }, '>div': { width: '100%' } }}>
+            <Box sx={{ width: '100%' }}>
+              <FormLabel tooltip={t('admin.price.amountTip')}>{t('admin.price.amount')}</FormLabel>
+              <Controller
+                name={getFieldName('unit_amount')}
+                control={control}
+                rules={{
+                  required: t('admin.price.unit_amount.required'),
+                  validate: (v) => {
+                    const currency = findCurrency(settings.paymentMethods, defaultCurrencyId);
+                    const hasStripError = !stripeCurrencyValidate(v, currency);
+                    if (hasStripError) {
+                      return t('admin.price.unit_amount.stripeTip');
+                    }
+                    return validateAmount(v, currency ?? {});
+                  },
+                }}
+                disabled={isLocked}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    type="number"
+                    size="small"
+                    fullWidth
+                    error={!!getFieldError(getFieldName('unit_amount'))}
+                    helperText={getFieldError(getFieldName('unit_amount'))?.message}
+                    InputProps={{
+                      endAdornment: (
+                        <InputAdornment position="end">
+                          <CurrencySelect
+                            mode="selected"
+                            hasSelected={(currency) =>
+                              currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                              currency.id === defaultCurrencyId
+                            }
+                            currencyFilter={(c) => c.type !== 'credit'}
+                            onSelect={(currencyId) => {
+                              const index = currencies.fields.findIndex(
+                                (x: any) => x.currency_id === defaultCurrencyId
+                              );
+                              if (index > -1) {
+                                // @ts-ignore
+                                handleCurrencyChange(index, currencyId);
+                              }
+                              setValue(getFieldName('currency'), findCurrency(settings.paymentMethods, currencyId), {
+                                shouldValidate: true,
+                              });
+                              setValue(getFieldName('currency_id'), currencyId, { shouldValidate: true });
+                            }}
+                            value={defaultCurrencyId}
+                            disabled={isLocked}
+                            selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                          />
+                        </InputAdornment>
+                      ),
+                    }}
+                    onChange={(e) => {
+                      const { value } = e.target;
+                      field.onChange(value);
+                      const index = currencies.fields.findIndex((x: any) => x.currency_id === defaultCurrencyId);
+                      if (index === -1) {
+                        return;
                       }
-                      return validateAmount(v, currency ?? {});
-                    },
-                  }}
-                  disabled={isLocked}
-                  render={({ field }) => {
+                      setValue(getFieldName(`currency_options.${index}.unit_amount`), value, {
+                        shouldValidate: true,
+                      });
+                    }}
+                  />
+                )}
+              />
+            </Box>
+            {hasMoreCurrency(settings.paymentMethods) &&
+              currencies.fields.filter((x: any) => x.currency_id !== defaultCurrencyId).length > 0 && (
+                <Stack spacing={1.5} sx={{ width: INPUT_WIDTH }}>
+                  {currencies.fields.map((item: any, index: number) => {
+                    if (item.currency_id === defaultCurrencyId) {
+                      return null;
+                    }
+                    const fieldName = getFieldName(`currency_options.${index}.unit_amount`);
+                    const currency = findCurrency(settings.paymentMethods, item.currency_id);
                     return (
-                      <TextField
-                        {...field}
-                        type="number"
-                        size="small"
-                        sx={{ width: INPUT_WIDTH }}
-                        error={!!getFieldError(fieldName)}
-                        helperText={getFieldError(fieldName)?.message as string}
-                        InputProps={{
-                          endAdornment: (
-                            <InputAdornment position="end">
-                              <CurrencySelect
-                                mode="selected"
-                                hasSelected={(c) =>
-                                  currencies.fields.some((x: any) => x.currency_id === c.id) ||
-                                  c.id === defaultCurrencyId
+                      <Stack
+                        key={item.currency_id}
+                        direction="row"
+                        spacing={1}
+                        sx={{
+                          alignItems: 'start',
+                        }}>
+                        <Box sx={{ flex: 1 }}>
+                          <Controller
+                            name={fieldName}
+                            control={control}
+                            rules={{
+                              required: t('admin.price.unit_amount.required'),
+                              validate: (v) => {
+                                const hasStripError = !stripeCurrencyValidate(v, currency);
+                                if (hasStripError) {
+                                  return t('admin.price.unit_amount.stripeTip');
                                 }
-                                onSelect={(currencyId) => {
-                                  const cIndex = currencies.fields.findIndex(
-                                    (x: any) => x.currency_id === currency?.id
-                                  );
-                                  if (cIndex > -1) {
-                                    // @ts-ignore
-                                    handleCurrencyChange(cIndex, currencyId);
-                                  }
+                                return validateAmount(v, currency ?? {});
+                              },
+                            }}
+                            disabled={isLocked}
+                            render={({ field }) => (
+                              <TextField
+                                {...field}
+                                type="number"
+                                size="small"
+                                fullWidth
+                                sx={{ minWidth: '300px' }}
+                                error={!!getFieldError(fieldName)}
+                                helperText={getFieldError(fieldName)?.message as string}
+                                InputProps={{
+                                  endAdornment: (
+                                    <InputAdornment position="end">
+                                      <CurrencySelect
+                                        mode="selected"
+                                        hasSelected={(c) =>
+                                          currencies.fields.some((x: any) => x.currency_id === c.id) ||
+                                          c.id === defaultCurrencyId
+                                        }
+                                        currencyFilter={(c) => c.type !== 'credit'}
+                                        onSelect={(currencyId) => {
+                                          const cIndex = currencies.fields.findIndex(
+                                            (x: any) => x.currency_id === currency?.id
+                                          );
+                                          if (cIndex > -1) {
+                                            // @ts-ignore
+                                            handleCurrencyChange(cIndex, currencyId);
+                                          }
+                                        }}
+                                        value={currency?.id!}
+                                        disabled={isLocked}
+                                        selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                                      />
+                                    </InputAdornment>
+                                  ),
                                 }}
-                                value={currency?.id!}
-                                disabled={isLocked}
-                                selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
                               />
-                            </InputAdornment>
-                          ),
-                        }}
-                      />
+                            )}
+                          />
+                        </Box>
+                        {model === 'package' && <Box sx={{ flex: 1 }} />}
+                        {!isLocked && (
+                          <IconButton
+                            size="small"
+                            disabled={isLocked}
+                            onClick={() => handleRemoveCurrency(index)}
+                            sx={{ mt: 0.5, ml: -1 }}>
+                            <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
+                          </IconButton>
+                        )}
+                      </Stack>
                     );
+                  })}
+                </Stack>
+              )}
+            {/* 添加更多货币 */}
+            {!isLocked && hasMoreCurrency(settings.paymentMethods) && !isCreditBilling && (
+              <Box sx={{ width: INPUT_WIDTH }}>
+                <CurrencySelect
+                  mode="waiting"
+                  hasSelected={(currency) =>
+                    currencies.fields.some((x: any) => x.currency_id === currency.id) ||
+                    currency.id === defaultCurrencyId
+                  }
+                  currencyFilter={(c) => c.type !== 'credit'}
+                  onSelect={(currencyId) => {
+                    currencies.append({ currency_id: currencyId, unit_amount: 0 });
                   }}
+                  value=""
+                  width="100%"
                 />
-                {!isLocked && (
-                  <IconButton size="small" disabled={isLocked} onClick={() => handleRemoveCurrency(index)}>
-                    <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />
-                  </IconButton>
+              </Box>
+            )}
+          </Stack>
+
+          {model === 'package' && (
+            <Box
+              sx={{
+                flex: { xs: 'none', sm: 1 },
+                width: { xs: '100%', sm: 'auto' },
+                mt: { xs: 0, sm: 0 },
+              }}>
+              <FormLabel
+                sx={{
+                  visibility: { xs: 'visible', sm: 'hidden' },
+                  display: 'block',
+                }}>
+                {t('admin.price.perUnit')}
+              </FormLabel>
+              <Controller
+                name={getFieldName('transform_quantity.divide_by')}
+                control={control}
+                disabled={isLocked}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    type="number"
+                    size="small"
+                    fullWidth
+                    InputProps={{
+                      startAdornment: <InputAdornment position="start">{t('common.per')}</InputAdornment>,
+                      endAdornment: <InputAdornment position="end">{t('common.unit')}</InputAdornment>,
+                    }}
+                  />
                 )}
-              </Stack>
-            );
-          })}
-          {!isLocked && (
-            <CurrencySelect
-              mode="waiting"
-              hasSelected={(currency) =>
-                currencies.fields.some((x: any) => x.currency_id === currency.id) || currency.id === defaultCurrencyId
-              }
-              onSelect={(currencyId) => currencies.append({ currency_id: currencyId, unit_amount: 0 })}
-              value=""
-              width="260px"
-            />
+              />
+            </Box>
           )}
         </Stack>
       )}
-      <Controller
-        name={getFieldName('type')}
-        control={control}
-        disabled={isLocked}
-        render={({ field }) => (
-          <ToggleButtonGroup
-            {...field}
-            onChange={(_, value: string) => {
-              if (value !== null) {
-                setValue(field.name, value);
-              }
-            }}
-            exclusive>
-            <ToggleButton value="recurring">{t('admin.price.types.recurring')}</ToggleButton>
-            <ToggleButton value="one_time">{t('admin.price.types.onetime')}</ToggleButton>
-          </ToggleButtonGroup>
-        )}
-      />
+      {/* 周期性配置 */}
       {isRecurring && (
-        <Stack direction="row">
-          <Controller
-            name={getFieldName('recurring.interval_config')}
-            control={control}
-            disabled={isLocked}
-            rules={{
-              validate: (val) => {
-                const hasStripe = currencies.fields?.some((x: any) => {
-                  return !!settings.paymentMethods.find(
-                    (y) => y?.type === 'stripe' && x?.currency_id === y?.default_currency_id
-                  );
-                });
-                if (val === 'hour_1' && hasStripe) {
-                  return t('admin.price.recurring.stripeTip');
-                }
-                return true;
-              },
-            }}
-            render={({ field }) => (
-              <Box>
-                <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.recurring.interval')}</FormLabel>
+        <Stack direction="row" spacing={2} sx={{ width: INPUT_WIDTH }}>
+          <Box sx={{ flex: 1 }}>
+            <FormLabel>{t('admin.price.recurring.interval')}</FormLabel>
+            <Controller
+              name={getFieldName('recurring.interval_config')}
+              control={control}
+              disabled={isLocked}
+              rules={{
+                validate: (val) => {
+                  const hasStripe = currencies.fields?.some((x: any) => {
+                    return !!settings.paymentMethods.find(
+                      (y: TPaymentMethodExpanded) => y?.type === 'stripe' && x?.currency_id === y?.default_currency_id
+                    );
+                  });
+                  if (val === 'hour_1' && hasStripe) {
+                    return t('admin.price.recurring.stripeTip');
+                  }
+                  return true;
+                },
+              }}
+              render={({ field }) => (
                 <Select
                   {...field}
                   value={field.value || 'month_1'}
@@ -412,7 +628,7 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                     setValue(getFieldName('recurring.interval_config'), e.target.value);
                     trigger(getFieldName('recurring.interval_config'));
                   }}
-                  sx={{ width: INPUT_WIDTH }}
+                  fullWidth
                   error={!!get(errors, getFieldName('recurring.interval_config'))}
                   size="small">
                   {!livemode && <MenuItem value="hour_1">{t('common.hourly')}</MenuItem>}
@@ -424,181 +640,490 @@ export default function PriceForm({ prefix, simple }: PriceFormProps) {
                   <MenuItem value="year_1">{t('common.yearly')}</MenuItem>
                   <MenuItem value="month_2">{t('common.custom')}</MenuItem>
                 </Select>
-                {get(errors, getFieldName('recurring.interval_config'))?.message && (
-                  <Typography color="error" sx={{ fontSize: '0.65625rem', mt: 0.5, ml: 1.75 }}>
-                    {/* @ts-ignore */}
-                    {get(errors, getFieldName('recurring.interval_config')).message}
-                  </Typography>
-                )}
-              </Box>
+              )}
+            />
+            {get(errors, getFieldName('recurring.interval_config'))?.message && (
+              <Typography color="error" sx={{ fontSize: '0.75rem', mt: 0.5 }}>
+                {/* @ts-ignore */}
+                {get(errors, getFieldName('recurring.interval_config')).message}
+              </Typography>
             )}
-          />
+          </Box>
+
+          {/* 自定义间隔 */}
           {isCustomInterval && (
-            <Controller
-              name={getFieldName('recurring.interval_count')}
-              control={control}
-              disabled={isLocked}
-              rules={{
-                validate: (v) => {
-                  if (!intervalCountPositive(v)) {
-                    return t('admin.price.recurring.intervalCountTip');
-                  }
-                  return true;
-                },
-              }}
-              render={({ field }) => (
-                <Box ml={2}>
-                  <FormLabel>&nbsp;</FormLabel>
+            <Box sx={{ flex: 1 }}>
+              <FormLabel sx={{ visibility: 'hidden' }}>placeholder</FormLabel>
+              <Controller
+                name={getFieldName('recurring.interval_count')}
+                control={control}
+                disabled={isLocked}
+                rules={{
+                  validate: (v) => {
+                    if (!intervalCountPositive(v)) {
+                      return t('admin.price.recurring.intervalCountTip');
+                    }
+                    return true;
+                  },
+                }}
+                render={({ field }) => (
                   <TextField
                     {...field}
                     type="number"
                     size="small"
-                    sx={{ width: INPUT_WIDTH }}
+                    fullWidth
                     error={!!get(errors, getFieldName('recurring.interval_count'))}
                     helperText={get(errors, getFieldName('recurring.interval_count'))?.message as string}
-                    InputProps={{
-                      startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
-                      endAdornment: (
-                        <InputAdornment position="end">
-                          <select
-                            onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}
-                            value={intervalSelectValue}
-                            style={{ background: 'none', outline: 'none' }}>
-                            <option value="day">{t('common.days')}</option>
-                            <option value="week">{t('common.weeks')}</option>
-                            <option value="month">{t('common.months')}</option>
-                            <option value="year">{t('common.years')}</option>
-                          </select>
-                        </InputAdornment>
-                      ),
+                    slotProps={{
+                      input: {
+                        startAdornment: <InputAdornment position="start">{t('common.every')}</InputAdornment>,
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <select
+                              onChange={(e) => setValue(getFieldName('recurring.interval'), e.target.value)}
+                              value={intervalSelectValue}
+                              style={{ background: 'none', outline: 'none' }}>
+                              <option value="day">{t('common.days')}</option>
+                              <option value="week">{t('common.weeks')}</option>
+                              <option value="month">{t('common.months')}</option>
+                              <option value="year">{t('common.years')}</option>
+                            </select>
+                          </InputAdornment>
+                        ),
+                      },
                     }}
                   />
-                </Box>
-              )}
-            />
+                )}
+              />
+            </Box>
           )}
         </Stack>
       )}
-      {isRecurring && (
-        <Controller
-          name={getFieldName('recurring.usage_type')}
-          control={control}
-          disabled={isLocked}
-          render={({ field }) => (
-            <FormControlLabel
-              sx={{ alignItems: 'flex-start' }}
-              control={
-                <Checkbox
-                  checked={isMetered}
-                  {...field}
-                  onChange={(_, checked: boolean) => setValue(field.name, checked ? 'metered' : 'licensed')}
-                />
-              }
-              label={
-                <Stack>
-                  <Typography color="text.primary">{t('admin.price.recurring.metered')}</Typography>
-                  <Typography color="text.secondary" sx={{ maxWidth: '80%' }}>
-                    {t('admin.price.recurring.meteredTip')}
-                  </Typography>
-                </Stack>
-              }
-            />
-          )}
-        />
+      {isRecurring && !isCreditMode && !isCreditBilling && (
+        <Box sx={{ width: INPUT_WIDTH }}>
+          <Controller
+            name={getFieldName('recurring.usage_type')}
+            control={control}
+            disabled={isLocked}
+            render={({ field }) => (
+              <FormControlLabel
+                sx={{ alignItems: 'flex-start' }}
+                control={
+                  <Checkbox
+                    checked={field.value === 'metered'}
+                    {...field}
+                    onChange={(_, checked: boolean) => setValue(field.name, checked ? 'metered' : 'licensed')}
+                  />
+                }
+                label={
+                  <Stack>
+                    <Typography
+                      sx={{
+                        color: 'text.primary',
+                      }}>
+                      {t('admin.price.recurring.metered')}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        maxWidth: '80%',
+                      }}>
+                      {t('admin.price.recurring.meteredTip')}
+                    </Typography>
+                  </Stack>
+                }
+              />
+            )}
+          />
+        </Box>
       )}
-      {isRecurring && isMetered && (
-        <Controller
-          name={getFieldName('recurring.aggregate_usage')}
-          control={control}
-          disabled={isLocked}
-          render={({ field }) => (
-            <Box>
-              <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.recurring.aggregate')}</FormLabel>
-              <Select {...field} sx={{ width: INPUT_WIDTH }} size="small">
+      {/* 聚合方式选择 - 仅在按量计费时显示 */}
+      {isRecurring && isMetered && !isCreditBilling && (
+        <Box sx={{ width: INPUT_WIDTH }}>
+          <FormLabel>{t('admin.price.recurring.aggregate')}</FormLabel>
+          <Controller
+            name={getFieldName('recurring.aggregate_usage')}
+            control={control}
+            disabled={isLocked}
+            render={({ field }) => (
+              <Select {...field} fullWidth size="small">
                 <MenuItem value="sum">{t('admin.price.aggregate.sum')}</MenuItem>
                 <MenuItem value="max">{t('admin.price.aggregate.max')}</MenuItem>
                 <MenuItem value="last_ever">{t('admin.price.aggregate.last_ever')}</MenuItem>
                 <MenuItem value="last_during_period">{t('admin.price.aggregate.last_during_period')}</MenuItem>
               </Select>
-            </Box>
-          )}
-        />
+            )}
+          />
+        </Box>
       )}
-      {!simple && (
-        <Collapse trigger={t('admin.price.additional')} expanded={isLocked}>
-          <Stack spacing={2} alignItems="flex-start">
-            <Controller
-              name={getFieldName('quantity_available')}
-              control={control}
-              render={({ field }) => (
-                <Box>
-                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.quantityAvailable.label')}</FormLabel>
-                  <TextField
-                    {...field}
-                    size="small"
-                    sx={{ width: INPUT_WIDTH }}
-                    type="number"
-                    placeholder={t('admin.price.quantityAvailable.placeholder')}
-                    error={!quantityPositive(field.value)}
-                    helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
+      {/* Credit 模式的特殊配置 */}
+      {isCreditMode && (
+        <>
+          <Divider sx={{ width: '100%' }} />
+          <Collapse
+            trigger={
+              <Typography sx={{ fontWeight: 500 }}>
+                {t('admin.creditProduct.settings')}
+                <Typography component="span" color="error" sx={{ ml: 0.5 }}>
+                  *
+                </Typography>
+              </Typography>
+            }
+            expanded={isLocked}
+            style={{ width: INPUT_WIDTH }}>
+            <Box sx={{ width: INPUT_WIDTH, mb: 2 }}>
+              {/* Credit 数量配置 */}
+              <Controller
+                name={getFieldName('metadata')}
+                control={control}
+                render={({ field }) => (
+                  <Box sx={{ width: '100%', mb: 2 }}>
+                    <FormLabel required>{t('admin.creditProduct.creditAmount.label')}</FormLabel>
+                    <TextField
+                      size="small"
+                      fullWidth
+                      type="number"
+                      placeholder={t('admin.creditProduct.creditAmount.placeholder')}
+                      value={field.value?.credit_config?.credit_amount || ''}
+                      disabled={isLocked}
+                      onChange={(e) => {
+                        const metadata = field.value || {};
+                        const creditConfig = metadata.credit_config || {};
+                        if (e.target.value) {
+                          creditConfig.credit_amount = e.target.value;
+                        } else {
+                          delete creditConfig.credit_amount;
+                        }
+                        metadata.credit_config = creditConfig;
+                        field.onChange(metadata);
+                      }}
+                      inputProps={{ min: 0, step: 'any' }}
+                      // eslint-disable-next-line react/jsx-no-duplicate-props
+                      InputProps={{
+                        endAdornment: (
+                          <InputAdornment position="end">
+                            <CurrencySelect
+                              mode="selected"
+                              hasSelected={(c) => currencies.fields.some((x: any) => x.currency_id === c.id)}
+                              currencyFilter={(c) => c.type === 'credit'}
+                              onSelect={(currencyId) => {
+                                const metadata = field.value || {};
+                                const creditConfig = metadata.credit_config || {};
+                                creditConfig.currency_id = currencyId;
+                                metadata.credit_config = creditConfig;
+                                field.onChange(metadata);
+                              }}
+                              value={field.value?.credit_config?.currency_id || creditCurrencies?.[0]?.id}
+                              disabled={isLocked}
+                              selectSX={{ '.MuiOutlinedInput-notchedOutline': { border: 'none' } }}
+                            />
+                          </InputAdornment>
+                        ),
+                      }}
+                    />
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.creditProduct.creditAmount.description')}
+                    </Typography>
+                  </Box>
+                )}
+              />
+
+              {/* 可用时长配置 */}
+              <Box sx={{ width: '100%', mb: 2 }}>
+                <FormLabel tooltip={t('admin.creditProduct.validDuration.help')}>
+                  {t('admin.creditProduct.validDuration.label')}
+                </FormLabel>
+                <Stack
+                  direction="row"
+                  spacing={1}
+                  sx={{
+                    alignItems: 'center',
+                  }}>
+                  <Controller
+                    name={getFieldName('metadata.credit_config.valid_duration_value')}
+                    control={control}
+                    render={({ field }) => (
+                      <TextField
+                        {...field}
+                        size="small"
+                        type="number"
+                        sx={{ flex: 1 }}
+                        value={field.value ?? '0'}
+                        placeholder="0"
+                        disabled={isLocked}
+                        inputProps={{ min: 0 }}
+                      />
+                    )}
                   />
-                </Box>
-              )}
-            />
-            <Controller
-              name={getFieldName('quantity_limit_per_checkout')}
-              control={control}
-              render={({ field }) => (
-                <Box>
-                  <FormLabel sx={{ color: 'text.primary' }}>
-                    {t('admin.price.quantityLimitPerCheckout.label')}
-                  </FormLabel>
-                  <TextField
-                    {...field}
-                    size="small"
-                    sx={{ width: INPUT_WIDTH }}
-                    type="number"
-                    placeholder={t('admin.price.quantityLimitPerCheckout.placeholder')}
-                    error={!quantityPositive(field.value)}
-                    helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
+                  <Controller
+                    name={getFieldName('metadata.credit_config.valid_duration_unit')}
+                    control={control}
+                    render={({ field }) => (
+                      <Select
+                        {...field}
+                        size="small"
+                        sx={{ minWidth: 120 }}
+                        disabled={isLocked}
+                        value={field.value || 'days'}>
+                        {!livemode && <MenuItem value="hours">{t('admin.creditProduct.validDuration.hours')}</MenuItem>}
+                        <MenuItem value="days">{t('admin.creditProduct.validDuration.days')}</MenuItem>
+                        <MenuItem value="weeks">{t('admin.creditProduct.validDuration.weeks')}</MenuItem>
+                        <MenuItem value="months">{t('admin.creditProduct.validDuration.months')}</MenuItem>
+                        <MenuItem value="years">{t('admin.creditProduct.validDuration.years')}</MenuItem>
+                      </Select>
+                    )}
                   />
-                </Box>
-              )}
-            />
-            <Controller
-              name={getFieldName('nickname')}
-              control={control}
-              rules={{
-                maxLength: {
-                  value: 64,
-                  message: t('common.maxLength', { len: 64 }),
-                },
-              }}
-              render={({ field }) => (
-                <Box>
-                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.nickname.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
-                </Box>
-              )}
-            />
-            <Controller
-              name={getFieldName('lookup_key')}
-              control={control}
-              rules={{
-                maxLength: {
-                  value: 64,
-                  message: t('common.maxLength', { len: 64 }),
-                },
-              }}
-              render={({ field }) => (
-                <Box>
-                  <FormLabel sx={{ color: 'text.primary' }}>{t('admin.price.lookup_key.label')}</FormLabel>
-                  <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
-                </Box>
-              )}
-            />
-          </Stack>
-        </Collapse>
+                </Stack>
+                <Typography
+                  variant="caption"
+                  sx={{
+                    color: 'text.secondary',
+                    display: 'block',
+                    mt: 0.5,
+                  }}>
+                  {t('admin.creditProduct.validDuration.description')}
+                </Typography>
+              </Box>
+
+              {/* 关联特定价格 */}
+              <Controller
+                name={getFieldName('metadata')}
+                control={control}
+                render={({ field }) => (
+                  <Box sx={{ width: '100%', mb: 2 }}>
+                    <FormLabel tooltip={t('admin.creditProduct.associatedPrices.help')}>
+                      {t('admin.creditProduct.associatedPrices.label')}
+                    </FormLabel>
+
+                    {/* 显示已选择的价格 */}
+                    {field.value?.credit_config?.applicable_prices &&
+                      Array.isArray(field.value.credit_config.applicable_prices) &&
+                      field.value.credit_config.applicable_prices.length > 0 && (
+                        <Stack spacing={1} sx={{ mb: 2 }}>
+                          {field.value.credit_config.applicable_prices.map((priceId: string) => {
+                            const product = getProductByPriceId(products, priceId);
+                            if (!product) {
+                              return null;
+                            }
+                            const productCurrency =
+                              findCurrency(settings.paymentMethods, product.prices[0]?.currency_id ?? '') ||
+                              settings.baseCurrency;
+
+                            return (
+                              <Box
+                                key={priceId}
+                                sx={{
+                                  display: 'flex',
+                                  alignItems: 'center',
+                                  justifyContent: 'space-between',
+                                  p: 1,
+                                  border: '1px solid',
+                                  borderColor: 'divider',
+                                  borderRadius: 1,
+                                  backgroundColor: 'background.paper',
+                                }}>
+                                <InfoCard
+                                  logo={product.images[0]}
+                                  name={product.name}
+                                  description={formatPrice(product.prices[0] as TPrice, productCurrency!)}
+                                />
+                                <IconButton
+                                  size="small"
+                                  onClick={() => {
+                                    const metadata = field.value || {};
+                                    const creditConfig = metadata.credit_config || {};
+                                    const currentPrices = creditConfig.applicable_prices || [];
+                                    const newPrices = currentPrices.filter((id: string) => id !== priceId);
+                                    if (newPrices.length > 0) {
+                                      creditConfig.applicable_prices = newPrices;
+                                    } else {
+                                      delete creditConfig.applicable_prices;
+                                    }
+                                    metadata.credit_config = creditConfig;
+                                    field.onChange(metadata);
+                                  }}>
+                                  <DeleteOutlineOutlined fontSize="small" />
+                                </IconButton>
+                              </Box>
+                            );
+                          })}
+                        </Stack>
+                      )}
+
+                    {/* 价格选择器 */}
+                    <ProductSelect
+                      mode="selecting"
+                      addProduct={false}
+                      filterPrice={(x) => {
+                        return isCreditMetered(x) && x.currency_id === field.value?.credit_config?.currency_id;
+                      }}
+                      hasSelected={(price) => {
+                        const selectedPrices = field.value?.credit_config?.applicable_prices || [];
+                        return selectedPrices.includes(price.id);
+                      }}
+                      onSelect={(priceId) => {
+                        const metadata = field.value || {};
+                        const creditConfig = metadata.credit_config || {};
+                        const currentPrices = creditConfig.applicable_prices || [];
+                        creditConfig.applicable_prices = [...currentPrices, priceId];
+                        metadata.credit_config = creditConfig;
+                        field.onChange(metadata);
+                      }}
+                    />
+
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.creditProduct.associatedPrices.description')}
+                    </Typography>
+                  </Box>
+                )}
+              />
+
+              {/* 优先级设置 */}
+              <Controller
+                name={getFieldName('metadata')}
+                control={control}
+                disabled={isLocked}
+                render={({ field }) => (
+                  <Box sx={{ width: '100%' }}>
+                    <FormLabel tooltip={t('admin.creditProduct.priority.help')} required>
+                      {t('admin.creditProduct.priority.label')}
+                    </FormLabel>
+                    <TextField
+                      size="small"
+                      fullWidth
+                      type="number"
+                      placeholder="50"
+                      value={field.value?.credit_config?.priority ?? '50'}
+                      onChange={(e) => {
+                        const metadata = field.value || {};
+                        const creditConfig = metadata.credit_config || {};
+                        const value = e.target.value ?? '50';
+                        creditConfig.priority = value;
+                        metadata.credit_config = creditConfig;
+                        field.onChange(metadata);
+                      }}
+                      inputProps={{ min: 0, max: 100 }}
+                    />
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        color: 'text.secondary',
+                        display: 'block',
+                        mt: 0.5,
+                      }}>
+                      {t('admin.creditProduct.priority.description')}
+                    </Typography>
+                  </Box>
+                )}
+              />
+            </Box>
+          </Collapse>
+        </>
+      )}
+      {!simple && (
+        <>
+          <Divider sx={{ width: '100%' }} />
+          <Collapse
+            trigger={t('admin.price.advanced')}
+            expanded={isLocked}
+            style={{
+              width: INPUT_WIDTH,
+              '.MuiCollapse-root': {
+                width: '100%',
+              },
+            }}>
+            <Stack
+              spacing={2}
+              sx={{
+                alignItems: 'flex-start',
+                width: INPUT_WIDTH,
+              }}>
+              <Controller
+                name={getFieldName('quantity_available')}
+                control={control}
+                render={({ field }) => (
+                  <>
+                    <FormLabel>{t('admin.price.quantityAvailable.label')}</FormLabel>
+                    <TextField
+                      {...field}
+                      size="small"
+                      sx={{ width: INPUT_WIDTH }}
+                      type="number"
+                      placeholder={t('admin.price.quantityAvailable.placeholder')}
+                      error={!quantityPositive(field.value)}
+                      helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
+                    />
+                  </>
+                )}
+              />
+              <Controller
+                name={getFieldName('quantity_limit_per_checkout')}
+                control={control}
+                render={({ field }) => (
+                  <>
+                    <FormLabel>{t('admin.price.quantityLimitPerCheckout.label')}</FormLabel>
+                    <TextField
+                      {...field}
+                      size="small"
+                      sx={{ width: INPUT_WIDTH }}
+                      type="number"
+                      fullWidth
+                      placeholder={t('admin.price.quantityLimitPerCheckout.placeholder')}
+                      error={!quantityPositive(field.value)}
+                      helperText={!quantityPositive(field.value) && t('admin.price.quantity.tip')}
+                    />
+                  </>
+                )}
+              />
+              <Controller
+                name={getFieldName('nickname')}
+                control={control}
+                rules={{
+                  maxLength: {
+                    value: 64,
+                    message: t('common.maxLength', { len: 64 }),
+                  },
+                }}
+                render={({ field }) => (
+                  <>
+                    <FormLabel>{t('admin.price.nickname.label')}</FormLabel>
+                    <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
+                  </>
+                )}
+              />
+              <Controller
+                name={getFieldName('lookup_key')}
+                control={control}
+                rules={{
+                  maxLength: {
+                    value: 64,
+                    message: t('common.maxLength', { len: 64 }),
+                  },
+                }}
+                render={({ field }) => (
+                  <>
+                    <FormLabel>{t('admin.price.lookup_key.label')}</FormLabel>
+                    <TextField {...field} size="small" sx={{ width: INPUT_WIDTH }} inputProps={{ maxLength: 64 }} />
+                  </>
+                )}
+              />
+              {/* 元数据 */}
+              <MetadataForm title={t('common.metadata.label')} color="inherit" name={getFieldName('metadata')} />
+            </Stack>
+          </Collapse>
+        </>
       )}
     </Root>
   );