payment-kit 1.19.0 → 1.19.2

package/src/locales/zh.tsx

@@ -7,10 +7,16 @@ export default flat({
     estimated: '预估',
     metadata: {
       label: '元数据',
+      description: '添加自定义键值对以存储有关此计量器的其他信息。',
       add: '添加更多元数据',
       edit: '编辑元数据',
       empty: '无元数据',
       emptyTip: '您还没有添加任何元数据，您可以添加它',
+      formMode: '切换到表单模式',
+      jsonMode: '切换到JSON模式',
+      jsonPlaceholder: '输入JSON数据...',
+      invalidJson: 'JSON格式无效，请检查您的输入',
+      formatJson: '格式化JSON',
     },
     price: '价格',
     add: '添加',
@@ -50,6 +56,19 @@ export default flat({
       saturday: '星期六',
     },
     maxAmount: '最大金额为 {max}',
+    name: '名称',
+    status: '状态',
+    remainingCredit: '剩余额度',
+    scope: '适用范围',
+    effectiveDate: '生效时间',
+    expirationDate: '过期时间',
+    creditGrant: '信用额度',
+    subscription: '订阅',
+    meterEvent: '计量事件',
+    creditAmount: '额度',
+    createdAt: '创建时间',
+    general: '通用',
+    specific: '指定使用范围',
   },
   notification: {
     preferences: {
@@ -87,6 +106,203 @@ export default flat({
     billing: '订阅和账单',
     invoices: '账单',
     subscriptions: '订阅',
+    meters: '计量器',
+    meterEvents: {
+      title: '计量事件',
+    },
+    meter: {
+      add: '添加计量器',
+      edit: '编辑计量器',
+      save: '保存计量器',
+      saved: '计量器保存成功',
+      activate: '激活计量器',
+      activated: '计量器激活成功',
+      deactivate: '停用计量器',
+      deactivated: '计量器停用成功',
+      deleted: '计量器删除成功',
+      deleteConfirm: '确定要删除此计量器吗？此操作无法撤销。',
+      activateConfirm: '确定要激活此计量器吗？它将开始收集使用数据。',
+      deactivateConfirm:
+        '停用后，此计量器将无法接收更多事件。尝试为此计量器创建事件将返回错误。之前报告的使用数据将保留。您可以随时重新激活。',
+      view: '查看计量器',
+      basicInfo: '基本信息',
+      basicInfoDescription: '配置计量器的核心设置以跟踪使用事件。',
+      editDescription: '更新计量器名称、描述和元数据。事件名称和聚合方法等核心设置无法更改。',
+      inactive: '计量器未激活',
+      inactiveTip: '此计量器未收集使用数据。激活它以开始跟踪事件。',
+      name: {
+        label: '计量器名称',
+        required: '计量器名称为必填项',
+        placeholder: 'API 请求',
+        help: '此计量器的描述性名称，将在您的仪表板中显示。',
+      },
+      eventName: {
+        label: '事件名称',
+        required: '事件名称为必填项',
+        placeholder: 'api_request',
+        help: '将发送到此计量器的事件名称',
+        editHelp: '为保持数据一致性，计量器创建后无法更改事件名称。',
+      },
+      aggregationMethod: {
+        label: '聚合方法',
+        required: '聚合方法为必填项',
+        sum: '求和',
+        sumHint: '将所有事件值相加',
+        sumDescription: '求和聚合方法将所有使用事件值相加，并报告事件摘要和计费的总计。',
+        count: '计数',
+        countHint: '计算事件数量',
+        countDescription: '计数聚合方法计算接收到的事件数量，并报告事件摘要和计费的总计数。',
+        last: '最后值',
+        lastHint: '使用最近的事件值',
+        lastDescription: '最后值聚合方法使用接收到的最近事件值，并报告该值用于事件摘要和计费。',
+        editHelp: '为保持数据一致性，计量器创建后无法更改聚合方法。',
+      },
+      unit: {
+        label: '计量单位',
+        required: '计量单位为必填项',
+        placeholder: '请求',
+        help: '此计量器的测量单位',
+        editHelp: '为保持数据一致性，计量器创建后无法更改计量单位。',
+      },
+      description: {
+        label: '描述',
+        placeholder: '跟踪 API 使用情况以进行计费',
+        help: '可选描述，帮助您和您的团队了解此计量器跟踪的内容。',
+      },
+      events: {
+        title: '事件',
+        dailyEventCount: '每日事件数量',
+        dailyTotalValue: '每日总使用量',
+        eventName: '事件名称',
+        value: '使用量',
+        customer: '客户',
+        subscription: '订阅',
+        reportTime: '上报时间',
+        count: '共 {count} 个事件',
+        empty: '暂无事件数据',
+        emptyTip: '当有事件上报时，数据将显示在这里',
+        filterByCustomer: '按客户筛选',
+        eventCount: '事件数量',
+        totalValue: '总使用量',
+        hourly: '按小时',
+        totalEvents: '总事件数',
+        timeRange: '时间粒度',
+        hourlyView: '小时视图',
+        dailyView: '日视图',
+      },
+      usageGuide: {
+        title: '如何报告使用情况',
+        description: '使用事件名称 "{eventName}" 向此计量器发送事件。计量器将{method}值并以{unit}为单位跟踪使用情况。',
+        tip: '使用事件名称 "{eventName}" 向此计量器发送事件。计量器将{aggregationMethodHint}，并以{unit}为单位跟踪使用情况。',
+        apiEndpoint: 'API 端点',
+        curlExample: 'cURL 示例',
+        jsExample: 'JavaScript 示例',
+        pythonExample: 'Python 示例',
+        important: '重要提示',
+        tip1: '将 YOUR_API_KEY 替换为您的实际 API 密钥',
+        tip2: '事件名称必须完全匹配：{eventName}',
+        tip3: '包含时间戳以进行准确跟踪',
+        moreInfo: '更多信息，请参阅我们的',
+        apiDocs: 'API 文档',
+      },
+      products: {
+        count: '{count} 个关联产品',
+        create: '创建产品',
+        created: '产品创建成功',
+        createPrompt: '输入产品名称：',
+        manage: '管理',
+        empty: '无产品',
+        title: '产品',
+        emptyTip: '此计量器尚未关联任何产品。',
+        meterService: '计量服务',
+        creditCharge: 'Credit 计费',
+      },
+      creditProducts: {
+        emptyTip: '此计量器尚未关联任何 Credit 产品。',
+      },
+    },
+    creditProduct: {
+      create: '创建 Credit 产品',
+      defaultName: '{name} 额度充值包',
+      defaultDescription: '{name} 额度充值包',
+      defaultNickname: 'Credit 充值',
+      unitLabel: '单位',
+      settings: 'Credit 设置',
+      name: {
+        placeholder: '输入 Credit 产品名称',
+      },
+      description: {
+        placeholder: '描述此 Credit 产品的用途和价值',
+      },
+      priceNotice: 'Credit 产品用于为用户提供可消费的额度，支持一次性购买和套餐包两种模式。',
+      creditAmount: {
+        label: 'Credit 数量',
+        placeholder: '用户购买此价格获得的 Credit 数量',
+        help: '留空表示按单价售卖，填入数字表示固定套餐包',
+        description: '用户购买数量决定获得的 Credit',
+      },
+      validDuration: {
+        label: '可用时长',
+        help: 'Credit 的有效期限，从购买时开始计算',
+        description: '设置为 0 表示永不过期',
+        hours: '小时',
+        days: '天',
+        weeks: '周',
+        months: '月',
+        years: '年',
+      },
+      associatedPrices: {
+        label: '关联价格',
+        placeholder: '选择此 Credit 可用于的服务价格',
+        help: '选择后，购买的 Credit 只能用于指定的服务',
+        description: '不选择任何价格表示 Credit 可用于所有服务',
+      },
+      priority: {
+        label: '使用优先级',
+        help: '当用户有多个 Credit 时的使用顺序，数字越小优先级越高',
+        description: '范围：0-100，0 为最高优先级，50 为默认值',
+      },
+    },
+    meterEvent: {
+      title: '计量事件详情',
+      totalEvents: '总事件数：{count}',
+      noEvents: '暂无事件',
+      noEventsHint: '您可以在测试模式下手动添加测试事件。',
+      identifier: '标识符',
+      customer: '客户',
+      customerId: '客户ID',
+      value: '数值',
+      subscription: '订阅',
+      creditConsumed: '消耗额度',
+      usageValue: '使用量',
+      reportedAt: '上报时间',
+      processedAt: '处理时间',
+      eventIdentifier: '事件标识符',
+      usageDetails: '使用详情',
+      chart: {
+        eventCount: '每日事件数',
+        totalValue: '每日用量总数',
+      },
+      filter: {
+        customer: '筛选客户',
+      },
+      add: {
+        button: '添加用量',
+        title: '添加用量',
+        customerId: '客户',
+        customerIdPlaceholder: '选择客户',
+        value: '数值',
+        valuePlaceholder: '输入用量数值',
+        subscriptionId: '订阅',
+        subscriptionIdPlaceholder: '输入订阅ID（可选）',
+        subscriptionIdHint: '可选 - 将此用量关联到特定订阅',
+        timestamp: '时间',
+        timestampHint: '此用量发生的时间',
+        validation: '客户和数值为必填项',
+        success: '用量事件添加成功',
+        submit: '提交',
+      },
+    },
     developers: '开发者工具箱',
     webhooks: '钩子',
     events: '事件',
@@ -100,6 +316,7 @@ export default flat({
     business: '企业设置',
     summary: '摘要',
     product: {
+      empty: '暂无产品',
       info: '产品信息',
       add: '添加产品',
       view: '查看产品详情',
@@ -144,21 +361,43 @@ export default flat({
       },
       unit_label: {
         label: '单位标签',
-        placeholder: '座位',
+        placeholder: '单位',
+      },
+      billingType: {
+        label: '计费类型',
+        standard: '标准计费',
+        metered: '计量计费',
+        help: '选择如何向客户收费',
+      },
+      meter: {
+        label: '计量器',
+        placeholder: '选择计量器来跟踪使用情况',
+        required: '计量计费需要选择一个计量器',
+        help: '选择用于跟踪此产品使用情况的计量器',
+        pricingNote: '对于计量产品，定价会自动基于所选计量器跟踪的使用情况。您只需要设置单价和计费周期。',
       },
       cross_sell: {
         title: '交叉销售',
         to: '交叉销售',
         tip: '',
       },
+      type: {
+        label: '产品类型',
+        service: '服务',
+        credit: 'Credit',
+        good: '商品',
+      },
     },
     price: {
       name: '价格',
       type: '使用类型',
       info: '价格信息',
+      plan: '价格方案',
       lookupKey: '查找键',
       setAsDefault: '设置为默认价格',
       detail: '定价详情',
+      addAnother: '添加价格方案',
+      order: '方案 {order}',
       add: '添加另一个价格',
       view: '查看价格详情',
       additional: '附加选项',
@@ -185,6 +424,7 @@ export default flat({
       lookup_key: {
         label: '查找键',
         placeholder: '',
+        description: '查找键用于在API中识别价格',
       },
       recurring: {
         interval: '计费周期',
@@ -200,15 +440,42 @@ export default flat({
       },
       models: {
         standard: '标准定价',
+        standardDesc: '单一固定价格',
         package: '套餐定价',
+        packageDesc: '按单位数量定价',
         graduated: '毕业定价',
         volume: '量价定价',
         custom: '客户自定义价格',
+        usageBased: '基于使用量',
+        creditMetered: 'Credit 计量计费',
+      },
+      creditMetered: {
+        label: 'Credit 计量计费',
+        placeholder: '选择计量器来跟踪使用情况',
+        required: 'Credit 计量计费需要选择一个计量器',
+        help: '选择用于跟踪此产品使用情况的计量器',
+        selectMeter: '选择计量器',
+        pricingNote: '对于计量产品，定价会自动基于所选计量器跟踪的使用情况。',
+        description: 'Credit 计量计费的订阅需要有对应的 Credit 消费，如果 Credit 消耗完，对应的服务会停止。',
       },
       types: {
         onetime: '一次性',
+        onetimeDesc: '收取一次性费用',
         recurring: '周期性',
+        recurringDesc: '收取持续费用',
       },
+      paymentType: '付费类型',
+      billingModel: '计费模式',
+      pricing: '定价',
+      additionalCurrencies: '其他货币',
+      advanced: '高级设置',
+      customInterval: '自定义间隔',
+      perUnit: '每单位',
+      choosePricingModel: '选择定价模式',
+      usage: '使用量',
+      usageDesc: '根据用户数量、单位或席位定价。需要记录以便Stripe跟踪客户服务使用情况。',
+      meter: '计量器',
+      billingPeriod: '计费周期',
       aggregate: {
         sum: '在周期内的使用值总和',
         max: '周期内的最大使用值',
@@ -229,6 +496,7 @@ export default flat({
         format: '可售{num}件',
         noLimit: '不限制可售数量',
         valid: '可售数量不得少于已售数量',
+        description: '输入可售数量，0表示不限制可售数量',
       },
       quantitySold: {
         label: '已售数量',
@@ -239,6 +507,7 @@ export default flat({
         placeholder: '0表示无限制',
         format: '单次最多购买{num}件',
         noLimit: '不限制单次购买数量',
+        description: '输入限制单次购买的最大数量, 0表示无限制',
       },
       inventory: '库存设置',
     },
@@ -246,6 +515,7 @@ export default flat({
       create: '创建优惠券',
       view: '查看优惠券',
     },
+
     paymentLink: {
       view: '查看支付链接',
       info: '支付链接信息',
@@ -490,6 +760,21 @@ export default flat({
       webhooks: '钩子调用',
       type: '类型',
       pendingWebhooks: '待处理的钩子',
+      events: {
+        dailyEventCount: '每日事件数量',
+        dailyTotalValue: '每日总使用量',
+        eventName: '事件名称',
+        value: '值',
+        customer: '客户',
+        subscription: '订阅',
+        reportTime: '上报时间',
+        count: '共 {count} 个事件',
+        empty: '暂无事件数据',
+        emptyTip: '当有事件上报时，数据将显示在这里',
+        filterByCustomer: '按客户筛选',
+        eventCount: '事件数量',
+        totalValue: '总使用量',
+      },
     },
     invoice: {
       view: '查看账单',
@@ -641,6 +926,42 @@ export default flat({
         line2: '详细地址',
         postal_code: '邮政编码',
       },
+      creditGrants: {
+        title: '信用额度',
+        summary: '额度汇总',
+        noGrants: '未找到信用额度',
+        grantDetail: '信用额度详情',
+        overview: '额度概览',
+        overviewDescription: '监控所有货币的信用余额、使用情况和未偿债务。',
+        availableBalance: '可用余额',
+        usage: '使用情况',
+        viewGrants: '查看额度',
+        viewUsage: '查看使用情况',
+        recentActivity: '最近活动',
+        quickStats: '快速统计',
+        activeGrants: '活跃额度',
+        totalCreditValue: '总信用价值',
+        outstandingDebt: '未偿债务',
+        buyCredits: '购买额度',
+        viewAllActivity: '查看所有活动',
+        creditBalance: '信用余额',
+        totalAmount: '总额度',
+        pendingAmount: '欠费额度',
+        grantCount: '额度数量',
+        noGrantsDescription: '您还没有任何信用额度',
+        status: {
+          granted: '生效中',
+          pending: '待生效',
+          expired: '已过期',
+          depleted: '已耗尽',
+          voided: '已作废',
+        },
+        originalAmount: '原始金额',
+        grantId: '额度ID',
+        grants: '额度',
+        addCredit: '添加额度',
+        viewDetails: '查看详情',
+      },
     },
     passport: {
       intro: '管理应用通行证的付款设置，必须同时设置商品和购买入口',
@@ -781,6 +1102,50 @@ export default flat({
       depositFailed: '申请转入冷钱包失败',
       appBalance: '热钱包余额',
     },
+    creditGrants: {
+      title: '信用额度',
+      summary: '额度汇总',
+      noGrants: '未找到信用额度',
+      grantDetail: '信用额度详情',
+      overview: '额度概览',
+      overviewDescription: '监控所有货币的信用余额、使用情况和未偿债务。',
+      availableBalance: '可用余额',
+      usage: '使用情况',
+      viewGrants: '查看额度',
+      viewUsage: '查看使用情况',
+      recentActivity: '最近活动',
+      quickStats: '快速统计',
+      activeGrants: '活跃额度',
+      totalCreditValue: '总信用价值',
+      outstandingDebt: '未偿债务',
+      buyCredits: '购买额度',
+      viewAllActivity: '查看所有活动',
+      creditBalance: '信用余额',
+      totalAmount: '总额度',
+      pendingAmount: '欠费额度',
+      grantCount: '额度数量',
+      noGrantsDescription: '您还没有任何信用额度',
+      status: {
+        granted: '生效中',
+        pending: '待生效',
+        expired: '已过期',
+        depleted: '已耗尽',
+        voided: '已作废',
+      },
+      originalAmount: '原始金额',
+      grantId: '额度ID',
+      grants: '额度',
+      addCredit: '添加额度',
+      viewDetails: '查看详情',
+    },
+    creditTransactions: {
+      title: '额度账单',
+      summary: '账单汇总',
+      noTransactions: '未找到额度账单',
+      totalTransactions: '总账单数',
+      totalCreditUsed: '总使用额度',
+      transactionDate: '交易时间',
+    },
   },
   empty: {
     image: '无图片',
@@ -806,6 +1171,7 @@ export default flat({
     subscription: {
       manage: '管理订阅',
       cancel: '取消订阅',
+      title: '订阅',
     },
     invoiceHistory: '历史账单',
     product: {
@@ -870,6 +1236,7 @@ export default flat({
     },
     unpaidInvoicesWarning: '您当前有未支付的账单,请先付清账单。',
     unpaidInvoicesWarningTip: '您当前有未支付的账单，请及时付清。',
+    pendingAmountWarningTip: '您有 {amount} {symbol} 的使用费用因额度不足无法处理，请及时充值。',
     invoice: {
       relatedInvoice: '关联账单',
       donation: '打赏记录',

package/src/pages/admin/billing/index.tsx

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Tabs from '@arcblock/ux/lib/Tabs';
-// import { Typography } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -8,10 +8,14 @@ import { useTransitionContext } from '../../../components/progress-bar';
 
 const SubscriptionDetail = React.lazy(() => import('./subscriptions/detail'));
 const InvoiceDetail = React.lazy(() => import('./invoices/detail'));
+const MeterDetail = React.lazy(() => import('./meters/detail'));
+const MeterCreate = React.lazy(() => import('./meters/create'));
+const MeterEventDetail = React.lazy(() => import('./meters/meter-event'));
 
 const pages = {
   invoices: React.lazy(() => import('./invoices')),
   subscriptions: React.lazy(() => import('./subscriptions')),
+  meters: React.lazy(() => import('./meters')),
 };
 
 export default function BillingIndex() {
@@ -28,6 +32,14 @@ export default function BillingIndex() {
     return <InvoiceDetail id={page} />;
   }
 
+  if (page.startsWith('mtr_')) {
+    return <MeterDetail id={page} />;
+  }
+
+  if (page.startsWith('mevt_')) {
+    return <MeterEventDetail id={page} />;
+  }
+
   const onTabChange = (newTab: string) => {
     startTransition(() => {
       navigate(`/admin/billing/${newTab}`);
@@ -39,42 +51,58 @@ export default function BillingIndex() {
   const tabs = [
     { label: t('admin.invoices'), value: 'invoices' },
     { label: t('admin.subscriptions'), value: 'subscriptions' },
+    { label: t('admin.meters'), value: 'meters' },
   ];
 
+  let extra = null;
+  if (page === 'meters') {
+    extra = <MeterCreate />;
+  }
+
   return (
-    <div>
-      {/* <Typography variant="h5" sx={{ mb: 1, fontWeight: 600 }}>
-        {t('admin.billing')}
-      </Typography> */}
-      {/* @ts-ignore */}
-      <Tabs
-        // @ts-ignore
-        tabs={tabs}
-        // @ts-ignore
-        current={page}
-        // @ts-ignore
-        onChange={onTabChange}
-        scrollButtons="auto"
+    <>
+      <Stack
+        direction="row"
+        spacing={1}
         sx={{
-          '.MuiTab-root': {
-            color: 'text.lighter',
-          },
-          '.MuiTabs-indicator': {
-            display: 'none',
-          },
-          '.Mui-selected': {
-            fontSize: 24,
-            color: 'text.primary',
-          },
-          '.MuiTabs-hideScrollbar': {
-            border: 'none !important',
-          },
-          '.MuiTouchRipple-root': {
-            display: 'none',
-          },
-        }}
-      />
+          alignItems: 'flex-start',
+          justifyContent: 'end',
+          flexWrap: 'wrap',
+        }}>
+        {/* @ts-ignore */}
+        <Tabs
+          // @ts-ignore
+          tabs={tabs}
+          // @ts-ignore
+          current={page}
+          // @ts-ignore
+          onChange={onTabChange}
+          scrollButtons="auto"
+          variant="scrollable"
+          sx={{
+            flex: '1 0 auto',
+            maxWidth: '100%',
+            '.MuiTab-root': {
+              color: 'text.lighter',
+            },
+            '.MuiTabs-indicator': {
+              display: 'none',
+            },
+            '.Mui-selected': {
+              fontSize: 24,
+              color: 'text.primary',
+            },
+            '.MuiTabs-hideScrollbar': {
+              border: 'none !important',
+            },
+            '.MuiTouchRipple-root': {
+              display: 'none',
+            },
+          }}
+        />
+        <Box>{extra}</Box>
+      </Stack>
       {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
-    </div>
+    </>
   );
 }

package/src/pages/admin/billing/invoices/detail.tsx

@@ -406,7 +406,7 @@ export default function InvoiceDetail(props: { id: string }) {
           </Box>
           <Divider />
           <Box className="section">
-            <SectionHeader title={t('admin.events')} />
+            <SectionHeader title={t('admin.events.title')} />
             <Box className="section-body">
               <EventList
                 features={{ toolbar: false }}

package/src/pages/admin/billing/meters/create.tsx

@@ -0,0 +1,60 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { AddOutlined } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { useForm, FormProvider } from 'react-hook-form';
+import Toast from '@arcblock/ux/lib/Toast';
+import { dispatch } from 'use-bus';
+
+import type { TMeter } from '@blocklet/payment-types';
+import MeterForm from '../../../../components/meter/form';
+import DrawerForm from '../../../../components/drawer-form';
+
+export default function MeterCreate() {
+  const { t } = useLocaleContext();
+  const { refresh } = usePaymentContext();
+  const methods = useForm<TMeter>({
+    defaultValues: {
+      name: '',
+      event_name: '',
+      aggregation_method: 'sum',
+      unit: '',
+      description: '',
+      metadata: {},
+    },
+  });
+
+  const { handleSubmit, reset, clearErrors } = methods;
+
+  const onSubmit = async (data: TMeter) => {
+    try {
+      await api.post('/api/meters', data);
+      Toast.success(t('admin.meter.saved'));
+      reset();
+      clearErrors();
+      dispatch('meter.created');
+      dispatch('drawer.submitted');
+      refresh(true);
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    }
+  };
+
+  return (
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('admin.meter.add')}
+      onClose={() => clearErrors()}
+      width={640}
+      addons={
+        <Button variant="contained" size="small" onClick={handleSubmit(onSubmit)}>
+          {t('admin.meter.save')}
+        </Button>
+      }>
+      <FormProvider {...methods}>
+        <MeterForm />
+      </FormProvider>
+    </DrawerForm>
+  );
+}