payment-kit 1.20.13 → 1.20.14

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>
 

package/src/locales/en.tsx

@@ -74,9 +74,11 @@ export default flat({
       saturday: 'Saturday',
     },
     name: 'Name',
+    type: 'Type',
     status: 'Status',
     remainingCredit: 'Remaining Credit',
     scope: 'Scope',
+    source: 'Source',
     effectiveDate: 'Effective Date',
     expirationDate: 'Expiration Date',
     creditGrant: 'Grant',
@@ -85,8 +87,13 @@ export default flat({
     meterEvent: 'Meter Event',
     creditAmount: 'Credit',
     createdAt: 'Created At',
+    expiresAt: 'Expires At',
     general: 'All usage-based prices',
     specific: 'Specific usage-based prices',
+    paid: 'Paid',
+    promotional: 'Promotional',
+    viewInvoice: 'View Invoice',
+    viewSourceData: 'View Source',
   },
   notification: {
     preferences: {
@@ -1317,6 +1324,8 @@ export default flat({
         backToGrants: 'Back to Credit Grants',
         viewDetails: 'View Details',
         overview: 'Overview',
+        relatedGrants: 'Credit Grants',
+        category: 'Category',
         overviewDescription: 'Monitor all currency credit balances, usage, and outstanding debt.',
         availableBalance: 'Available Balance',
         viewGrants: 'View Grants',

package/src/locales/zh.tsx

@@ -73,9 +73,11 @@ export default flat({
     },
     maxAmount: '最大金额为 {max}',
     name: '名称',
+    type: '类型',
     status: '状态',
     remainingCredit: '剩余额度',
     scope: '适用范围',
+    source: '来源',
     effectiveDate: '生效时间',
     expirationDate: '过期时间',
     creditGrant: '信用额度',
@@ -84,8 +86,13 @@ export default flat({
     meterEvent: '计量事件',
     creditAmount: '额度',
     createdAt: '创建时间',
+    expiresAt: '过期时间',
     general: '通用',
     specific: '指定使用范围',
+    paid: '付费',
+    promotional: '促销',
+    viewInvoice: '查看账单',
+    viewSourceData: '查看来源',
   },
   notification: {
     preferences: {
@@ -1282,6 +1289,8 @@ export default flat({
         pendingAmount: '欠费额度',
         grantCount: '额度数量',
         noGrantsDescription: '您还没有任何信用额度',
+        relatedGrants: '信用额度',
+        category: '分类',
         status: {
           granted: '生效中',
           pending: '待生效',

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

@@ -13,7 +13,13 @@ import {
   getInvoiceStatusColor,
   useMobile,
 } from '@blocklet/payment-react';
-import type { TInvoice, TInvoiceExpanded } from '@blocklet/payment-types';
+import type {
+  TCheckoutSession,
+  TCreditGrantExpanded,
+  TInvoice,
+  TInvoiceExpanded,
+  TPaymentLink,
+} from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Divider, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -37,8 +43,18 @@ import SectionHeader from '../../../../components/section/header';
 import { goBackOrFallback } from '../../../../libs/util';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRowGroup from '../../../../components/info-row-group';
+import RelatedCreditGrants from '../../../../components/customer/related-credit-grants';
 
-const fetchData = (id: string): Promise<TInvoiceExpanded> => {
+const fetchData = (
+  id: string
+): Promise<
+  TInvoiceExpanded & {
+    relatedInvoice?: TInvoiceExpanded;
+    checkoutSession: TCheckoutSession;
+    paymentLink: TPaymentLink;
+    relatedCreditGrants?: TCreditGrantExpanded[];
+  }
+> => {
   return api.get(`/api/invoices/${id}`).then((res) => res.data);
 };
 
@@ -366,6 +382,9 @@ export default function InvoiceDetail(props: { id: string }) {
                 )}
             </InfoRowGroup>
           </Box>
+          {data?.relatedCreditGrants && data.relatedCreditGrants.length > 0 && (
+            <RelatedCreditGrants grants={data.relatedCreditGrants} mode="dashboard" />
+          )}
           <Divider />
           <Box className="section">
             <SectionHeader title={t('admin.summary')} />