payment-kit 1.19.1 → 1.19.2

package/api/src/libs/notification/template/customer-credit-grant-low-balance.ts

@@ -52,7 +52,7 @@ export class CustomerCreditGrantLowBalanceEmailTemplate
     // 计算百分比
     const available = new BN(creditGrant.remaining_amount);
     const total = new BN(creditGrant.amount);
-    const percentage = total.gt(0) ? available.mul(new BN(100)).div(total).toString() : '0';
+    const percentage = total.gt(new BN(0)) ? available.mul(new BN(100)).div(total).toString() : '0';
 
     return {
       locale,

package/api/src/libs/notification/template/customer-credit-insufficient.ts

@@ -58,7 +58,7 @@ export class CustomerCreditInsufficientEmailTemplate
     const at = formatTime(Date.now());
 
     // 检查是否完全耗尽（可用额度为0或负数）
-    const isExhausted = new BN(this.options.availableAmount).lte(0);
+    const isExhausted = new BN(this.options.availableAmount).lte(new BN(0));
 
     // 如果有订阅ID，获取订阅信息
     let productName: string | undefined;

package/api/src/libs/util.ts

@@ -12,6 +12,7 @@ import { joinURL, withQuery, withTrailingSlash } from 'ufo';
 import axios from 'axios';
 import { ethers } from 'ethers';
 import { fromUnitToToken } from '@ocap/util';
+import get from 'lodash/get';
 import dayjs from './dayjs';
 import { blocklet, wallet } from './auth';
 import type { PaymentCurrency, PaymentMethod, Subscription } from '../store/models';
@@ -268,11 +269,12 @@ export async function getUserOrAppInfo(
   }
   const { user } = await blocklet.getUser(address);
   if (user) {
+    const locale = get(user, 'locale', 'en');
     return {
       name: user?.fullName,
       avatar: joinURL(process.env.BLOCKLET_APP_URL!, user?.avatar),
       type: 'user',
-      url: getCustomerProfileUrl({ userDid: address, locale: 'en' }),
+      url: getCustomerProfileUrl({ userDid: address, locale }),
     };
   }
   return {

package/api/src/queues/credit-consume.ts

@@ -227,9 +227,9 @@ async function consumeAvailableCredits(
         metadata: {
           meter_event_id: context.meterEvent.id,
           meter_event_name: context.meterEvent.event_name,
-          required_amount: totalRequiredAmount,
+          required_amount: remainingToConsume.toString(),
           available_amount: totalAvailable.toString(),
-          consumed_amount: totalConsumed.toString(),
+          consumed_amount: consumed.toString(),
           pending_amount: pendingAmount,
           currency_id: currencyId,
           subscription_id: context.subscription?.id,
@@ -258,6 +258,19 @@ async function consumeAvailableCredits(
         },
       });
     }
+  } else if (remainingBalance === '0') {
+    await createEvent('Customer', 'customer.credit.insufficient', context.customer, {
+      metadata: {
+        meter_event_id: context.meterEvent.id,
+        meter_event_name: context.meterEvent.event_name,
+        required_amount: remainingToConsume.toString(),
+        available_amount: '0',
+        consumed_amount: consumed.toString(),
+        pending_amount: pendingAmount,
+        currency_id: currencyId,
+        subscription_id: context.subscription?.id,
+      },
+    }).catch(console.error);
   }
 
   return {

package/api/src/routes/customers.ts

@@ -45,9 +45,6 @@ router.get('/', auth, async (req, res) => {
   const { page, pageSize, ...query } = await schema.validateAsync(req.query, { stripUnknown: true });
   const where = getWhereFromKvQuery(query.q);
 
-  if (typeof query.livemode === 'boolean') {
-    where.livemode = query.livemode;
-  }
   if (query.did) {
     where.did = query.did;
   }
@@ -386,16 +383,48 @@ router.get('/payer-token', sessionMiddleware({ accessKey: true }), async (req, r
 });
 
 router.get('/:id', auth, async (req, res) => {
+  if (!req.params.id) {
+    return res.status(400).json({ error: 'Customer ID is required' });
+  }
   try {
     const doc = await Customer.findByPkOrDid(req.params.id as string);
     if (doc) {
       res.json(doc);
     } else {
-      res.status(404).json(null);
+      if (req.body.create) {
+        if (!req.user) {
+          return res.status(403).json({ error: 'Unauthorized' });
+        }
+        const { user } = await blocklet.getUser(req.params.id);
+        if (!user) {
+          return res.status(404).json({ error: 'User not found' });
+        }
+        const customer = await Customer.create({
+          livemode: true,
+          did: user.did,
+          name: user.fullName,
+          email: user.email,
+          phone: user.phone,
+          address: Customer.formatAddressFromUser(user),
+          description: user.remark,
+          metadata: {},
+          balance: '0',
+          next_invoice_sequence: 1,
+          delinquent: false,
+          invoice_prefix: Customer.getInvoicePrefix(),
+        });
+        logger.info('customer created', {
+          customerId: customer.id,
+          did: customer.did,
+        });
+        return res.json(customer);
+      }
+      return res.status(404).json(null);
     }
+    return res.status(404).json(null);
   } catch (err) {
     logger.error(err);
-    res.status(500).json({ error: `Failed to get customer: ${err.message}` });
+    return res.status(500).json({ error: `Failed to get customer: ${err.message}` });
   }
 });
 

package/api/src/routes/payment-currencies.ts

@@ -148,6 +148,12 @@ router.get('/', auth, async (req, res) => {
   if (typeof query.livemode === 'string') {
     where.livemode = JSON.parse(query.livemode);
   }
+  where.type = 'standard';
+  if (query.credit) {
+    where.type = {
+      [Op.in]: ['standard', 'credit'],
+    };
+  }
   const list = await PaymentCurrency.findAll({
     where,
     order: [['created_at', 'DESC']],

package/api/src/routes/webhook-endpoints.ts

@@ -43,9 +43,6 @@ router.get('/', auth, async (req, res) => {
   const { page, pageSize, status, ...query } = await schema.validateAsync(req.query, { stripUnknown: true });
   const where: WhereOptions<WebhookEndpoint> = {};
 
-  if (typeof query.livemode === 'boolean') {
-    where.livemode = query.livemode;
-  }
   if (status) {
     where.status = status
       .split(',')

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.19.1
+version: 1.19.2
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.19.1",
+  "version": "1.19.2",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -54,7 +54,7 @@
     "@blocklet/did-space-js": "^1.0.62",
     "@blocklet/js-sdk": "^1.16.44",
     "@blocklet/logger": "^1.16.44",
-    "@blocklet/payment-react": "1.19.1",
+    "@blocklet/payment-react": "1.19.2",
     "@blocklet/sdk": "^1.16.44",
     "@blocklet/ui-react": "^3.0.1",
     "@blocklet/uploader": "^0.1.97",
@@ -122,7 +122,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.44",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.19.1",
+    "@blocklet/payment-types": "1.19.2",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -168,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "48d5719c8ce4e89a16f8dd576ff8f72072e3909e"
+  "gitHead": "741c897204afc412721a942201516932bff59235"
 }

package/src/components/conditional-section.tsx

@@ -0,0 +1,87 @@
+import { Box } from '@mui/material';
+import { useState, ReactNode, useEffect, createContext, useContext, useMemo, useRef, useCallback } from 'react';
+
+const ConditionalSectionContext = createContext<{
+  hideRender: (hide?: boolean) => void;
+} | null>(null);
+
+// 导出hook供子组件使用
+export const useConditionalSection = () => {
+  const context = useContext(ConditionalSectionContext);
+  return context;
+};
+
+interface ConditionalSectionProps {
+  skeleton: boolean;
+  children: ReactNode;
+  skeletonComponent?: ReactNode;
+}
+
+/**
+ * 条件渲染组件 - 完全防闪现版本
+ *
+ * 彻底解决闪现问题的方案：
+ * 1. skeleton=true 时显示骨架屏组件
+ * 2. skeleton=false 时完全隐藏(display: none)渲染子组件，让其执行逻辑
+ * 3. 等待子组件执行完毕，如果没有调用hideRender则显示
+ * 4. 整个过程用户看不到任何闪现
+ *
+ * 使用方式：
+ * - 在任意深度的子组件中调用 useConditionalSection()?.hideRender()
+ */
+export default function ConditionalSection({ skeleton, children, skeletonComponent = null }: ConditionalSectionProps) {
+  const [renderState, setRenderState] = useState<'hidden' | 'visible' | 'none'>('hidden');
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleHideRender = useCallback((hide: boolean = true) => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setRenderState(hide ? 'none' : 'visible');
+  }, []);
+
+  const contextValue = useMemo(() => ({ hideRender: handleHideRender }), [handleHideRender]);
+
+  useEffect(() => {
+    if (!skeleton) {
+      timerRef.current = setTimeout(() => {
+        setRenderState('visible');
+        timerRef.current = null;
+      }, 3000);
+    }
+
+    // 清理定时器
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [skeleton]);
+
+  if (skeleton) {
+    return skeletonComponent;
+  }
+
+  if (renderState === 'none') {
+    return null;
+  }
+
+  return (
+    <ConditionalSectionContext.Provider value={contextValue}>
+      <Box
+        sx={{
+          position: renderState === 'hidden' ? 'absolute' : 'static',
+          left: renderState === 'hidden' ? '-9999px' : 'auto',
+          top: renderState === 'hidden' ? '-9999px' : 'auto',
+          visibility: renderState === 'hidden' ? 'hidden' : 'visible',
+          width: renderState === 'hidden' ? '0' : 'auto',
+          height: renderState === 'hidden' ? '0' : 'auto',
+          overflow: 'hidden',
+        }}>
+        {children}
+      </Box>
+    </ConditionalSectionContext.Provider>
+  );
+}

package/src/components/customer/credit-overview.tsx

@@ -1,9 +1,10 @@
 import { formatBNStr, CreditGrantsList, CreditTransactionsList, api } from '@blocklet/payment-react';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Avatar, Box, Card, CardContent, Stack, Typography, Tabs, Tab } from '@mui/material';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import type { TPaymentCurrency } from '@blocklet/payment-types';
 import { useRequest } from 'ahooks';
+import { useConditionalSection } from '../conditional-section';
 
 enum CreditTab {
   OVERVIEW = 'overview',
@@ -43,9 +44,30 @@ const fetchCreditSummary = async (customerId: string) => {
 export default function CreditOverview({ customerId, settings, mode = 'portal' }: CreditOverviewProps) {
   const { t } = useLocaleContext();
   const [creditTab, setCreditTab] = useState<CreditTab>(CreditTab.OVERVIEW);
+  const conditionalSection = useConditionalSection();
+
+  const creditCurrencies = useMemo(() => {
+    return (
+      settings?.paymentMethods
+        ?.filter((method: any) => method.type === 'arcblock')
+        ?.flatMap((method: any) => method.payment_currencies)
+        ?.filter((currency: TPaymentCurrency) => {
+          return currency.type === 'credit';
+        }) || []
+    );
+  }, [settings]);
+
   const { data: creditSummary } = useRequest(fetchCreditSummary, {
     defaultParams: [customerId],
     refreshDeps: [creditTab === CreditTab.OVERVIEW],
+    onSuccess: (data) => {
+      if (creditTab === CreditTab.OVERVIEW) {
+        const filteredCurrencies = creditCurrencies.filter((currency: TPaymentCurrency) => {
+          return data.grants?.[currency.id];
+        });
+        conditionalSection?.hideRender(filteredCurrencies.length === 0);
+      }
+    },
   });
 
   // 渲染信用概览卡片
@@ -141,20 +163,11 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
     );
   };
 
-  // 获取有信用额度的货币
-  const creditCurrencies =
-    settings?.paymentMethods
-      ?.filter((method: any) => method.type === 'arcblock')
-      ?.flatMap((method: any) => method.payment_currencies)
-      ?.filter((currency: TPaymentCurrency) => {
-        const currencyId = currency.id as string;
-        const grantData = creditSummary?.grants?.[currencyId];
-        return grantData;
-      }) || [];
-
-  if (creditCurrencies.length === 0) {
-    return null;
-  }
+  const filteredCreditCurrencies = useMemo(() => {
+    return creditCurrencies.filter((currency: TPaymentCurrency) => {
+      return creditSummary?.grants?.[currency.id];
+    });
+  }, [creditCurrencies, creditSummary?.grants]);
 
   return (
     <Stack sx={{ width: '100%' }}>
@@ -192,10 +205,10 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
                 gridTemplateColumns: 'repeat(1, 1fr)',
               },
             }}>
-            {creditCurrencies.map(renderCreditOverviewCard)}
+            {filteredCreditCurrencies.map(renderCreditOverviewCard)}
           </Box>
 
-          {creditCurrencies.length === 0 && (
+          {filteredCreditCurrencies.length === 0 && (
             <Box
               sx={{
                 display: 'flex',

package/src/components/customer/form.tsx

@@ -8,8 +8,9 @@ import {
   validatePhoneNumber,
   getPhoneUtil,
   validatePostalCode,
+  FormLabel,
 } from '@blocklet/payment-react';
-import { FormLabel, Stack } from '@mui/material';
+import { Stack } from '@mui/material';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
 import isEmail from 'validator/es/lib/isEmail';
 import { useMount } from 'ahooks';

package/src/components/metadata/form.tsx

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

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

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

package/src/components/meter/form.tsx

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

package/src/components/meter/products.tsx

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

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

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

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

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

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

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

package/src/components/price/form.tsx

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

package/src/components/product/form.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput } from '@blocklet/payment-react';
+import { FormInput, FormLabel } from '@blocklet/payment-react';
 import type { InferFormType, TProduct } from '@blocklet/payment-types';
-import { Box, Stack, Typography, FormLabel, Select, MenuItem } from '@mui/material';
+import { Box, Stack, Typography, Select, MenuItem } from '@mui/material';
 import { useFormContext, useWatch, Controller } from 'react-hook-form';
 
 import Collapse from '../collapse';
@@ -46,7 +46,7 @@ export default function ProductForm({ simple = false }: Props) {
         rules={{ required: true }}
         render={({ field }) => (
           <Box sx={{ width: '100%' }}>
-            <FormLabel sx={{ color: 'text.primary' }}>{t('admin.product.type.label')}</FormLabel>
+            <FormLabel sx={{ color: 'text.primary', fontSize: '0.875rem' }}>{t('admin.product.type.label')}</FormLabel>
             <Select {...field} fullWidth size="small">
               <MenuItem value="good">{t('admin.product.type.good')}</MenuItem>
               <MenuItem value="service">{t('admin.product.type.service')}</MenuItem>
@@ -135,11 +135,6 @@ export default function ProductForm({ simple = false }: Props) {
           <FormInput
             name="unit_label"
             label={t('admin.product.unit_label.label')}
-            placeholder={
-              productType === 'credit'
-                ? t('admin.creditProduct.unitLabel.placeholder')
-                : t('admin.product.unit_label.placeholder')
-            }
             rules={{
               maxLength: { value: 12, message: t('common.maxLength', { len: 12 }) },
             }}

package/src/locales/en.tsx

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

package/src/locales/zh.tsx

@@ -361,7 +361,7 @@ export default flat({
       },
       unit_label: {
         label: '单位标签',
-        placeholder: '座位',
+        placeholder: '单位',
       },
       billingType: {
         label: '计费类型',
@@ -424,6 +424,7 @@ export default flat({
       lookup_key: {
         label: '查找键',
         placeholder: '',
+        description: '查找键用于在API中识别价格',
       },
       recurring: {
         interval: '计费周期',
@@ -495,6 +496,7 @@ export default flat({
         format: '可售{num}件',
         noLimit: '不限制可售数量',
         valid: '可售数量不得少于已售数量',
+        description: '输入可售数量，0表示不限制可售数量',
       },
       quantitySold: {
         label: '已售数量',
@@ -505,6 +507,7 @@ export default flat({
         placeholder: '0表示无限制',
         format: '单次最多购买{num}件',
         noLimit: '不限制单次购买数量',
+        description: '输入限制单次购买的最大数量, 0表示无限制',
       },
       inventory: '库存设置',
     },
@@ -945,7 +948,7 @@ export default flat({
         totalAmount: '总额度',
         pendingAmount: '欠费额度',
         grantCount: '额度数量',
-        noGrantsDescription: '您还没有任何信用额度，请联系管理员添加。',
+        noGrantsDescription: '您还没有任何信用额度',
         status: {
           granted: '生效中',
           pending: '待生效',
@@ -1121,7 +1124,7 @@ export default flat({
       totalAmount: '总额度',
       pendingAmount: '欠费额度',
       grantCount: '额度数量',
-      noGrantsDescription: '您还没有任何信用额度，请联系管理员添加。',
+      noGrantsDescription: '您还没有任何信用额度',
       status: {
         granted: '生效中',
         pending: '待生效',

package/src/pages/admin/customers/customers/detail.tsx

@@ -42,10 +42,6 @@ const fetchData = async (
 ): Promise<{
   customer: TCustomerExpanded;
   summary: { [key: string]: GroupedBN };
-  creditSummary?: {
-    grants?: { [currencyId: string]: { totalAmount: string; remainingAmount: string } };
-    pendingAmount?: { [currencyId: string]: string };
-  } | null;
 }> => {
   const [customer, summary] = await Promise.all([
     api.get(`/api/customers/${id}`).then((res) => res.data),
@@ -311,15 +307,11 @@ export default function CustomerDetail(props: { id: string }) {
         }}>
         <Box className="payment-link-column-1" sx={{ flex: 1, gap: 2.5, display: 'flex', flexDirection: 'column' }}>
           {/* 信用管理区域 */}
-          {data.creditSummary && (
-            <>
-              <Box className="section">
-                <SectionHeader title={t('admin.creditGrants.title')} mb={0} />
-                <CreditOverview customerId={props.id} settings={settings} mode="dashboard" />
-              </Box>
-              <Divider />
-            </>
-          )}
+          <Box className="section">
+            <SectionHeader title={t('admin.creditGrants.title')} mb={0} />
+            <CreditOverview customerId={props.id} settings={settings} mode="dashboard" />
+          </Box>
+          <Divider />
 
           <Box className="section" sx={{ containerType: 'inline-size' }}>
             <SectionHeader title={t('admin.details')} />

package/src/pages/customer/index.tsx

@@ -40,6 +40,7 @@ import { memo, useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import CreditOverview from '../../components/customer/credit-overview';
+import ConditionalSection from '../../components/conditional-section';
 
 import { useTransitionContext } from '../../components/progress-bar';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
@@ -214,7 +215,6 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const [subscriptionStatus, setSubscriptionStatus] = useState(false);
   const [hasSubscriptions, setHasSubscriptions] = useState(false);
-  const [hasRevenues, setHasRevenues] = useState(false);
   const { startTransition } = useTransitionContext();
   const {
     data,
@@ -480,15 +480,15 @@ export default function CustomerHome() {
   );
 
   // 独立的Credit Card组件
-  const CreditCard = loadingCard ? (
-    <CardSkeleton height={400} />
-  ) : (
-    <Box className="base-card section section-credit">
-      <Box className="section-header" sx={{ mb: 2 }}>
-        <Typography variant="h3">{t('admin.creditGrants.title')}</Typography>
+  const CreditCard = (
+    <ConditionalSection skeleton={loadingCard}>
+      <Box className="base-card section section-credit">
+        <Box className="section-header" sx={{ mb: 2 }}>
+          <Typography variant="h3">{t('admin.creditGrants.title')}</Typography>
+        </Box>
+        <CreditOverview customerId={data?.id || ''} settings={settings} />
       </Box>
-      <CreditOverview customerId={data?.id} settings={settings} />
-    </Box>
+    </ConditionalSection>
   );
 
   const InvoiceCard = loadingCard ? (
@@ -519,13 +519,15 @@ export default function CustomerHome() {
     </Box>
   );
 
-  const RevenueCard = loadingCard ? null : (
-    <Box className="base-card section section-revenue" sx={{ visibility: hasRevenues ? 'visible' : 'hidden' }}>
-      <Box className="section-header">
-        <Typography variant="h3">{t('customer.payout.title')}</Typography>
+  const RevenueCard = (
+    <ConditionalSection skeleton={loadingCard}>
+      <Box className="base-card section section-revenue">
+        <Box className="section-header">
+          <Typography variant="h3">{t('customer.payout.title')}</Typography>
+        </Box>
+        <CustomerRevenueList />
       </Box>
-      <CustomerRevenueList setHasRevenues={setHasRevenues} />
-    </Box>
+    </ConditionalSection>
   );
 
   return (