payment-kit 1.20.13 → 1.20.15

package/api/src/store/models/credit-transaction.ts

@@ -135,6 +135,11 @@ export class CreditTransaction extends Model<
       foreignKey: 'subscription_id',
       as: 'subscription',
     });
+
+    this.belongsTo(models.MeterEvent, {
+      foreignKey: 'source',
+      as: 'meterEvent',
+    });
   }
 
   public static async getUsageSummary({

package/api/src/store/models/meter-event.ts

@@ -14,7 +14,7 @@ import type { LiteralUnion } from 'type-fest';
 import { BN } from '@ocap/util';
 import { createEvent } from '../../libs/audit';
 import { createIdGenerator } from '../../libs/util';
-import { GroupedBN, GroupedStrList, MeterEventPayload, MeterEventStatus } from './types';
+import { GroupedBN, GroupedStrList, MeterEventPayload, MeterEventStatus, SourceData } from './types';
 import { Customer } from './customer';
 import { Subscription, type TSubscription } from './subscription';
 import { Meter, type TMeter } from './meter';
@@ -43,6 +43,7 @@ export class MeterEvent extends Model<InferAttributes<MeterEvent>, InferCreation
   declare credit_consumed: string; // 已消费的credit数量
   declare credit_pending: string; // 待消费的credit数量（债务）
   declare metadata?: Record<string, any>;
+  declare source_data?: SourceData;
 
   // 审计字段
   declare created_by?: string;
@@ -215,18 +216,27 @@ export class MeterEvent extends Model<InferAttributes<MeterEvent>, InferCreation
   }
 
   public static initialize(sequelize: any) {
-    this.init(this.GENESIS_ATTRIBUTES, {
-      sequelize,
-      modelName: 'MeterEvent',
-      tableName: 'meter_events',
-      createdAt: 'created_at',
-      updatedAt: 'updated_at',
-      indexes: [{ fields: ['identifier'], unique: true }, { fields: ['status'] }, { fields: ['event_name'] }],
-      hooks: {
-        afterCreate: (model: MeterEvent, options) =>
-          createEvent('MeterEvent', 'billing.meter_event.created', model, options).catch(console.error),
+    this.init(
+      {
+        ...this.GENESIS_ATTRIBUTES,
+        source_data: {
+          type: DataTypes.JSON,
+          allowNull: true,
+        },
       },
-    });
+      {
+        sequelize,
+        modelName: 'MeterEvent',
+        tableName: 'meter_events',
+        createdAt: 'created_at',
+        updatedAt: 'updated_at',
+        indexes: [{ fields: ['identifier'], unique: true }, { fields: ['status'] }, { fields: ['event_name'] }],
+        hooks: {
+          afterCreate: (model: MeterEvent, options) =>
+            createEvent('MeterEvent', 'billing.meter_event.created', model, options).catch(console.error),
+        },
+      }
+    );
   }
 
   // 批量处理未处理的事件

package/api/src/store/models/types.ts

@@ -817,3 +817,21 @@ export type Restrictions = {
   minimum_amount?: string;
   minimum_amount_currency?: string;
 };
+
+export type LocalizedText = {
+  zh: string;
+  en: string;
+};
+
+export type SimpleSourceData = Record<string, string>;
+
+export type StructuredSourceDataField = {
+  key: string;
+  label: string | LocalizedText;
+  value: string;
+  type?: 'text' | 'image' | 'url';
+  url?: string;
+  group?: string;
+};
+
+export type SourceData = SimpleSourceData | StructuredSourceDataField[];

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.20.13
+version: 1.20.15
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.20.13",
+  "version": "1.20.15",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -56,8 +56,8 @@
     "@blocklet/error": "^0.2.5",
     "@blocklet/js-sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/logger": "^1.16.52-beta-20250912-112002-e3499e9c",
-    "@blocklet/payment-react": "1.20.13",
-    "@blocklet/payment-vendor": "1.20.13",
+    "@blocklet/payment-react": "1.20.15",
+    "@blocklet/payment-vendor": "1.20.15",
     "@blocklet/sdk": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@blocklet/ui-react": "^3.1.41",
     "@blocklet/uploader": "^0.2.11",
@@ -126,7 +126,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.52-beta-20250912-112002-e3499e9c",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.20.13",
+    "@blocklet/payment-types": "1.20.15",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -173,5 +173,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0cbe918549f7d06561b5307fb947bfbbd2250984"
+  "gitHead": "d205c3b1ec7d2b819e375ed2eb8b70c9d48f0bcb"
 }

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

@@ -324,7 +324,7 @@ export default function CreditOverview({ customerId, settings, mode = 'portal' }
         )}
         {creditTab === CreditTab.GRANTS && <CreditGrantsList customer_id={customerId} mode={mode} key={creditTab} />}
         {creditTab === CreditTab.TRANSACTIONS && (
-          <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} />
+          <CreditTransactionsList customer_id={customerId} mode={mode} key={creditTab} includeGrants />
         )}
       </Box>
       {autoRecharge.open && (

package/src/components/customer/related-credit-grants.tsx

@@ -0,0 +1,194 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { formatBNStr, formatToDate, Table, usePaymentContext } from '@blocklet/payment-react';
+import type { TCreditGrantExpanded } from '@blocklet/payment-types';
+import { Box, Chip, Divider, styled, Typography } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+
+interface RelatedCreditGrantsProps {
+  grants: TCreditGrantExpanded[];
+  showDivider?: boolean;
+  mode?: 'dashboard' | 'portal';
+}
+
+export function StatusChip({ status, label = '' }: { status: string; label?: string }) {
+  const getStatusColor = (statusValue: string) => {
+    switch (statusValue) {
+      case 'granted':
+        return 'success';
+      case 'pending':
+        return 'warning';
+      case 'expired':
+        return 'default';
+      case 'depleted':
+        return 'default';
+      case 'voided':
+        return 'default';
+      default:
+        return 'default';
+    }
+  };
+
+  return <Chip label={label || status} size="small" color={getStatusColor(status) as any} />;
+}
+
+export default function RelatedCreditGrants({ grants, showDivider = true, mode = 'portal' }: RelatedCreditGrantsProps) {
+  const { t, locale } = useLocaleContext();
+  const { session } = usePaymentContext();
+  const navigate = useNavigate();
+
+  const isAdmin = ['owner', 'admin'].includes(session?.user?.role || '');
+
+  const inDashboard = mode === 'dashboard' && isAdmin;
+
+  if (!grants?.length) {
+    return null;
+  }
+
+  const handleShowGrantDetail = (grant: TCreditGrantExpanded) => {
+    let path = `/customer/credit-grant/${grant.id}`;
+    if (inDashboard) {
+      path = `/admin/customers/${grant.id}`;
+    }
+    navigate(path);
+  };
+
+  const columns = [
+    {
+      label: t('common.name'),
+      name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          return <Box onClick={() => handleShowGrantDetail(grant)}>{grant.name || grant.id}</Box>;
+        },
+      },
+    },
+    {
+      label: t('common.status'),
+      name: 'status',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={() => handleShowGrantDetail(grant)}>
+              <StatusChip status={grant.status} label={t(`admin.customer.creditGrants.status.${grant.status}`)} />
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.remainingCredit'),
+      name: 'remaining_amount',
+      align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={() => handleShowGrantDetail(grant)}>
+              <Typography variant="body2">
+                {formatBNStr(grant.remaining_amount, grant.paymentCurrency?.decimal || 0)}{' '}
+                {grant.paymentCurrency?.symbol}
+              </Typography>
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.scope'),
+      name: 'scope',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          let scope = 'general';
+          if (grant.applicability_config?.scope?.prices) {
+            scope = 'specific';
+          }
+          return (
+            <Box onClick={() => handleShowGrantDetail(grant)}>
+              {scope === 'specific' ? t('common.specific') : t('common.general')}
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.effectiveDate'),
+      name: 'effective_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          const effectiveAt = grant.effective_at ? grant.effective_at * 1000 : grant.created_at;
+          return (
+            <Box onClick={() => handleShowGrantDetail(grant)}>
+              {formatToDate(effectiveAt, locale, 'YYYY-MM-DD HH:mm')}
+            </Box>
+          );
+        },
+      },
+    },
+    {
+      label: t('common.expirationDate'),
+      name: 'expires_at',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const grant = grants[index] as TCreditGrantExpanded;
+          return (
+            <Box onClick={() => handleShowGrantDetail(grant)}>
+              <Typography variant="body2">
+                {grant.expires_at ? formatToDate(grant.expires_at * 1000, locale, 'YYYY-MM-DD HH:mm') : '-'}
+              </Typography>
+            </Box>
+          );
+        },
+      },
+    },
+  ];
+
+  return (
+    <>
+      {showDivider && <Divider />}
+      <TableRoot className="section">
+        <Typography
+          variant="h3"
+          className="section-header"
+          sx={{
+            mb: 2,
+          }}>
+          {t('admin.customer.creditGrants.relatedGrants')}
+        </Typography>
+        <Table
+          data={grants}
+          columns={columns}
+          options={{
+            count: grants.length,
+            page: 0,
+            rowsPerPage: grants.length,
+            pagination: false,
+          }}
+          loading={false}
+          toolbar={false}
+          footer={false}
+          emptyNodeText={t('admin.customer.creditGrants.noGrants')}
+        />
+      </TableRoot>
+    </>
+  );
+}
+
+const TableRoot = styled(Box)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    .MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
+      > div {
+        width: fit-content;
+        flex: inherit;
+        font-size: 14px;
+      }
+    }
+    .invoice-summary {
+      padding-right: 20px;
+    }
+  }
+`;

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

@@ -41,6 +41,14 @@ const addMeterEvent = (data: any): Promise<any> => {
         source: 'manual',
         created_by: 'admin',
       },
+      source_data: [
+        {
+          key: 'origin',
+          label: 'created_by',
+          value: 'Admin',
+          type: 'text',
+        },
+      ],
     })
     .then((res) => res.data);
 };

package/src/components/meter/events-list.tsx

@@ -5,7 +5,6 @@ import type { TCustomer, TPaymentCurrency, TMeterEventExpanded } from '@blocklet
 import {
   Box,
   Typography,
-  Alert,
   Stack,
   Card,
   Autocomplete,
@@ -19,7 +18,7 @@ import {
 } from '@mui/material';
 import { CalendarTodayOutlined, Add } from '@mui/icons-material';
 import { useEffect, useMemo } from 'react';
-import { useSetState } from 'ahooks';
+import { useSetState, useLocalStorageState, useRequest } from 'ahooks';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { fromUnitToToken } from '@ocap/util';
 import { Link } from 'react-router-dom';
@@ -34,6 +33,14 @@ interface MeterEventsListProps {
   paymentCurrency: TPaymentCurrency;
 }
 
+type SearchProps = {
+  pageSize: number;
+  page: number;
+  customer_id?: string;
+  start?: number;
+  end?: number;
+};
+
 interface TMeterEventStats {
   date: string;
   event_count: number;
@@ -42,22 +49,9 @@ interface TMeterEventStats {
 }
 
 interface EventsState {
-  events: TMeterEventExpanded[];
   stats: TMeterEventStats[];
   customers: TCustomer[];
-  loading: boolean;
   statsLoading: boolean;
-  error: string | null;
-  pagination: {
-    page: number;
-    limit: number;
-    total: number;
-  };
-  filters: {
-    customer_id?: string;
-    start?: string;
-    end?: string;
-  };
   anchorEl: any;
   startDate: Date;
   endDate: Date;
@@ -66,14 +60,30 @@ interface EventsState {
   addUsageDialog: boolean;
 }
 
-const fetchEvents = (meterId: string, params: any): Promise<{ list: TMeterEventExpanded[]; count: number }> => {
+const fetchEvents = (
+  meterId: string,
+  params: SearchProps = {} as SearchProps
+): Promise<{ list: TMeterEventExpanded[]; count: number }> => {
   const searchParams = new URLSearchParams();
   searchParams.append('meter_id', meterId);
-  Object.keys(params).forEach((key) => {
-    if (params[key] !== undefined && params[key] !== '') {
-      searchParams.append(key, params[key]);
-    }
-  });
+
+  // 确保 start 和 end 参数被正确添加
+  if (params.page !== undefined) {
+    searchParams.append('page', String(params.page));
+  }
+  if (params.pageSize !== undefined) {
+    searchParams.append('pageSize', String(params.pageSize));
+  }
+  if (params.start !== undefined) {
+    searchParams.append('start', String(params.start));
+  }
+  if (params.end !== undefined) {
+    searchParams.append('end', String(params.end));
+  }
+  if (params.customer_id) {
+    searchParams.append('customer_id', params.customer_id);
+  }
+
   return api.get(`/api/meter-events?${searchParams.toString()}`).then((res: any) => res.data);
 };
 
@@ -143,19 +153,31 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
   const { isMobile } = useMobile('md');
   const { livemode } = usePaymentContext();
   const maxDate = dayjs().endOf('day').toDate();
+
+  const [search, setSearch] = useLocalStorageState<SearchProps>(`meter-events-${meterId}`, {
+    defaultValue: {
+      pageSize: 10,
+      page: 1,
+      start: dayjs().subtract(30, 'day').startOf('day').unix(),
+      end: dayjs().endOf('day').unix(),
+    },
+  });
+
+  const {
+    data = {
+      list: [],
+      count: 0,
+    },
+    refresh,
+    loading,
+  } = useRequest(() => fetchEvents(meterId, search), {
+    refreshDeps: [search],
+  });
+
   const [state, setState] = useSetState<EventsState>({
-    events: [],
     stats: [],
     customers: [],
-    loading: false,
     statsLoading: false,
-    error: null,
-    pagination: {
-      page: 0,
-      limit: 10,
-      total: 0,
-    },
-    filters: {},
     anchorEl: null,
     startDate: dayjs().subtract(30, 'day').startOf('day').toDate(),
     endDate: maxDate,
@@ -209,35 +231,6 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
     return emptyData.map((empty) => dataMap.get(empty.date) || empty);
   }, [state.stats, state.statsLoading, state.startDate, state.endDate, granularity]);
 
-  const loadEvents = async (page = 0, limit = 10) => {
-    setState({ loading: true, error: null });
-    try {
-      const params: any = {
-        page,
-        limit,
-      };
-
-      if (state.startDate && state.endDate) {
-        params.start = dayjs(state.startDate).unix();
-        params.end = dayjs(state.endDate).unix();
-      }
-
-      if (state.selectedCustomer) {
-        params.customer_id = state.selectedCustomer.id;
-      }
-
-      const result = await fetchEvents(meterId, params);
-      setState({
-        events: result.list,
-        pagination: { page, limit, total: result.count },
-        loading: false,
-      });
-    } catch (err) {
-      console.error('Failed to fetch events:', err);
-      setState({ error: 'Failed to load events', loading: false });
-    }
-  };
-
   const loadStats = async () => {
     setState({ statsLoading: true });
     try {
@@ -259,28 +252,43 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
     try {
       const result = await fetchCustomers();
       setState({ customers: result.list });
+
+      // Initialize selected customer if exists in search
+      if (search!.customer_id && result.list.length > 0) {
+        const selectedCustomer = result.list.find((c) => c.id === search!.customer_id);
+        if (selectedCustomer) {
+          setState({ selectedCustomer });
+        }
+      }
     } catch (err) {
       console.error('Failed to fetch customers:', err);
     }
   };
 
   useEffect(() => {
-    loadEvents();
-    loadStats();
     loadCustomers();
   }, [meterId]);
 
+  // Initialize state dates from search params
+  useEffect(() => {
+    if (search?.start && search?.end) {
+      setState({
+        startDate: dayjs.unix(search.start).toDate(),
+        endDate: dayjs.unix(search.end).toDate(),
+      });
+    }
+  }, [search?.start, search?.end]);
+
   useEffect(() => {
-    loadEvents(0, state.pagination.limit);
     loadStats();
   }, [state.startDate, state.endDate, state.selectedCustomer, granularity]);
 
-  const handlePageChange = (page: number) => {
-    loadEvents(page, state.pagination.limit);
-  };
-
-  const handleRowsPerPageChange = (rowsPerPage: number) => {
-    loadEvents(0, rowsPerPage);
+  const onTableChange = ({ page, rowsPerPage }: any) => {
+    if (search!.pageSize !== rowsPerPage) {
+      setSearch((x) => ({ ...x!, pageSize: rowsPerPage, page: 1 }));
+    } else if (search!.page !== page + 1) {
+      setSearch((x) => ({ ...x!, page: page + 1 }));
+    }
   };
 
   const onTogglePicker = (e: any) => {
@@ -292,6 +300,10 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
   };
 
   const onRangeChange = (range: any) => {
+    const newStart = dayjs(range.startDate).startOf('day').unix();
+    const newEnd = dayjs(range.endDate).endOf('day').unix();
+
+    setSearch((x) => ({ ...x!, start: newStart, end: newEnd, page: 1 }));
     setState({
       startDate: range.startDate,
       endDate: dayjs(range.endDate).endOf('day').toDate(),
@@ -306,6 +318,7 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
   };
 
   const handleCustomerChange = (customer: TCustomer | null) => {
+    setSearch((x) => ({ ...x!, customer_id: customer?.id, page: 1 }));
     setState({ selectedCustomer: customer });
   };
 
@@ -322,18 +335,10 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
   };
 
   const handleAddUsageSuccess = () => {
-    loadEvents(0, state.pagination.limit);
+    refresh();
     loadStats();
   };
 
-  if (state.error) {
-    return (
-      <Alert severity="error" sx={{ mt: 1 }}>
-        {state.error}
-      </Alert>
-    );
-  }
-
   const open = Boolean(state.anchorEl);
   const id = open ? 'date-range-picker-popover' : undefined;
 
@@ -345,7 +350,7 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
         filter: false,
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const item = state.events[index];
+          const item = data.list[index];
           if (!item) return null;
           const value = fromUnitToToken(item.payload.value || '0', paymentCurrency.decimal);
           return <Link to={`/admin/billing/${item.id}`}>{`${value} ${paymentCurrency.symbol}`}</Link>;
@@ -359,7 +364,7 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
         filter: false,
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const item = state.events[index];
+          const item = data.list[index];
           if (!item || !item?.customer) return '-';
           return <CustomerLink customer={item.customer} size="small" />;
         },
@@ -372,7 +377,7 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
         filter: false,
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const item = state.events[index];
+          const item = data.list[index];
           if (!item) return '-';
           const subscriptionId = (item as any).payload?.subscription_id;
           if (!subscriptionId) return '-';
@@ -393,7 +398,7 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
         filter: false,
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const item = state.events[index];
+          const item = data.list[index];
           return <Link to={`/admin/billing/${item?.id}`}>{item ? formatTime(item.created_at) : '-'}</Link>;
         },
       },
@@ -610,28 +615,20 @@ export default function MeterEventsList({ meterId, paymentCurrency }: MeterEvent
           sx={{
             color: 'text.secondary',
           }}>
-          {t('admin.meter.events.count', { count: state.pagination.total })}
+          {t('admin.meter.events.count', { count: data.count })}
         </Typography>
       </Box>
       <Table
-        data={state.events}
+        data={data.list}
         columns={columns}
+        onChange={onTableChange}
         options={{
-          count: state.pagination.total,
-          page: state.pagination.page,
-          rowsPerPage: state.pagination.limit,
-          onChangePage: handlePageChange,
-          onChangeRowsPerPage: handleRowsPerPageChange,
-          search: false,
-          filter: false,
-          sort: false,
-          viewColumns: false,
-          download: false,
-          print: false,
-          selectableRows: 'none',
+          count: data.count,
+          page: search!.page - 1,
+          rowsPerPage: search!.pageSize,
           responsive: isMobile ? 'vertical' : 'standard',
         }}
-        loading={state.loading}
+        loading={loading}
         emptyNodeText={t('admin.meter.events.empty')}
       />
       {/* 日期选择器弹窗 */}

package/src/components/product/form.tsx

@@ -109,7 +109,6 @@ export default function ProductForm({ simple = false }: Props) {
             required
             minRows={2}
             maxRows={4}
-            inputProps={{ maxLength: 250 }}
           />
         </Stack>