payment-kit 1.18.56 → 1.19.1

package/src/components/webhook/attempts.tsx

@@ -10,6 +10,7 @@ import {
   Grid,
   List,
   ListItem,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -49,13 +50,7 @@ type Props = {
   event?: TEvent & { requestInfo?: RequestInfo };
 };
 
-WebhookAttempts.defaultProps = {
-  event_id: '',
-  webhook_endpoint_id: '',
-  event: null,
-};
-
-export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }: Props) {
+export default function WebhookAttempts({ event_id = '', webhook_endpoint_id = '', event = undefined }: Props) {
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TWebhookAttemptExpanded>>(
     (d) => {
       const size = 15;
@@ -93,9 +88,14 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
 
   return (
     <Grid container spacing={2.5}>
-      <Grid item xs={12} md={4} className="attempt-list">
+      <Grid size={{ xs: 12, md: 4 }} className="attempt-list">
         {isEmpty(Object.keys(groupedAttempts)) ? (
-          <Typography color="text.secondary">No Attempt</Typography>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+            }}>
+            No Attempt
+          </Typography>
         ) : (
           <>
             <List sx={{ maxHeight: '64vh', overflowY: 'scroll' }}>
@@ -104,12 +104,17 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                   <ListSubheader>{date}</ListSubheader>
                   {items.map((attempt) => (
                     <ListItem
-                      button
                       key={attempt.id}
+                      component={ListItemButton}
                       onClick={() => handleAttemptClick(attempt)}
                       selected={selected === attempt}
                       secondaryAction={
-                        <Typography color="text.secondary">{formatTime(attempt.created_at, 'HH:mm:ss A')}</Typography>
+                        <Typography
+                          sx={{
+                            color: 'text.secondary',
+                          }}>
+                          {formatTime(attempt.created_at, 'HH:mm:ss A')}
+                        </Typography>
                       }>
                       <ListItemIcon>
                         {isSuccessAttempt(attempt.response_status) === false ? (
@@ -118,7 +123,16 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                           <CheckCircleOutlined color="success" />
                         )}
                       </ListItemIcon>
-                      <ListItemText primary={<Typography color="text.primary">{attempt.event.type}</Typography>} />
+                      <ListItemText
+                        primary={
+                          <Typography
+                            sx={{
+                              color: 'text.primary',
+                            }}>
+                            {attempt.event.type}
+                          </Typography>
+                        }
+                      />
                     </ListItem>
                   ))}
                 </React.Fragment>
@@ -129,11 +143,22 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
                 {loadingMore ? 'Loading more...' : 'Load more'}
               </Button>
             )}
-            {!hasMore && <Typography color="text.secondary">No more data</Typography>}
+            {!hasMore && (
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                }}>
+                No more data
+              </Typography>
+            )}
           </>
         )}
       </Grid>
-      <Grid item xs={12} md={8}>
+      <Grid
+        size={{
+          xs: 12,
+          md: 8,
+        }}>
         {selected && (
           <Stack direction="column" spacing={2} sx={{ pt: 3, pl: 3, borderLeft: '1px solid', borderColor: 'grey.100' }}>
             <Typography variant="h6">{event_id ? selected.endpoint.url : selected.event.type}</Typography>
@@ -143,7 +168,12 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
               <CodeBlock language="json">{JSON.stringify(selected.response_body, null, 2)}</CodeBlock>
             </Box>
             <Box>
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack
+                direction="row"
+                spacing={1}
+                sx={{
+                  alignItems: 'center',
+                }}>
                 <Typography variant="h6">Request</Typography>
                 <RequestInfoPopper
                   // @ts-ignore
@@ -158,7 +188,12 @@ export default function WebhookAttempts({ event_id, webhook_endpoint_id, event }
         )}
         {data?.list.length === 0 && event && (
           <Box>
-            <Stack direction="row" alignItems="center" spacing={1}>
+            <Stack
+              direction="row"
+              spacing={1}
+              sx={{
+                alignItems: 'center',
+              }}>
               <Typography variant="h6">Event Data</Typography>
               <RequestInfoPopper
                 // @ts-ignore

package/src/components/webhook/request-info.tsx

@@ -16,11 +16,7 @@ type Props = {
   requestInfo?: RequestInfo;
   request?: RequestType;
 };
-RequestInfoPopper.defaultProps = {
-  requestInfo: null,
-  request: null,
-};
-export default function RequestInfoPopper({ requestInfo, request }: Props) {
+export default function RequestInfoPopper({ requestInfo = undefined, request = undefined }: Props) {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const handleClick = (e: React.MouseEvent<HTMLElement>) => {
@@ -119,7 +115,13 @@ export default function RequestInfoPopper({ requestInfo, request }: Props) {
           }}>
           {requestInfo ? (
             <>
-              <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                  mb: 1,
+                  display: 'block',
+                }}>
                 Requested by:
               </Typography>
               <InfoCard

package/src/contexts/products.tsx

@@ -1,28 +1,39 @@
-import { api } from '@blocklet/payment-react';
+import { api, CachedRequest } from '@blocklet/payment-react';
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
-import { createContext, useContext } from 'react';
+import { createContext, useContext, type JSX } from 'react';
+import useBus from 'use-bus';
 
 type ProductsContextType = {
   products: TProductExpanded[];
-  refresh: () => void;
+  refresh: (forceRefresh?: boolean) => void;
 };
 
 // @ts-ignore
 const ProductsContext = createContext<ProductsContextType>({ api });
 const { Provider, Consumer } = ProductsContext;
 
-const getProducts = async (): Promise<TProductExpanded[]> => {
-  // FIXME: pagination here
-  const { data } = await api.get('/api/products?active=true&page=1&pageSize=100&donation=hide');
-  return data.list || [];
+const fetchProducts = (forceRefresh = false): Promise<{ list: TProductExpanded[] }> => {
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `products-${livemode}`;
+
+  const cachedRequest = new CachedRequest(
+    cacheKey,
+    () => api.get('/api/products?active=true&page=1&pageSize=100&donation=hide'),
+    {
+      ttl: 1000 * 60 * 10, // 10分钟缓存
+      strategy: 'session',
+    }
+  );
+
+  return cachedRequest.fetch(forceRefresh);
 };
 
 // eslint-disable-next-line react/prop-types
 function ProductsProvider({ children }: { children: any }): JSX.Element {
-  const { data, error, run, loading } = useRequest(getProducts);
-
+  const { data, error, run, loading } = useRequest((forceRefresh = false) => fetchProducts(forceRefresh));
+  useBus('project.created', () => run(true), []);
   if (error) {
     return <Alert severity="error">{error.message}</Alert>;
   }
@@ -31,7 +42,7 @@ function ProductsProvider({ children }: { children: any }): JSX.Element {
     return <CircularProgress />;
   }
 
-  return <Provider value={{ products: data, refresh: run }}>{children}</Provider>;
+  return <Provider value={{ products: data?.list ?? [], refresh: () => run(true) }}>{children}</Provider>;
 }
 
 function useProductsContext() {
@@ -39,4 +50,10 @@ function useProductsContext() {
   return context;
 }
 
+export const clearProductsCache = () => {
+  const livemode = localStorage.getItem('livemode') !== 'false';
+  const cacheKey = `products-${livemode}`;
+  sessionStorage.removeItem(cacheKey);
+};
+
 export { ProductsContext, ProductsProvider, Consumer as ProductsConsumer, useProductsContext };

package/src/hooks/subscription.ts

@@ -3,6 +3,7 @@ import Toast from '@arcblock/ux/lib/Toast';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { useRequest } from 'ahooks';
 import { api } from '@blocklet/payment-react';
+import type { TPaymentCurrency } from '@blocklet/payment-types';
 
 export function useUnpaidInvoicesCheckForSubscription(subscriptionId: string, manualCheck: boolean = false) {
   const { t } = useLocaleContext();
@@ -28,3 +29,36 @@ export function useUnpaidInvoicesCheckForSubscription(subscriptionId: string, ma
     hasUnpaid: data?.count > 0,
   };
 }
+
+export function usePendingAmountForSubscription(subscriptionId: string, paymentCurrency?: TPaymentCurrency) {
+  const { data: pendingAmountSummary, run: checkPendingAmount } = useRequest(
+    async () => {
+      if (!subscriptionId || !paymentCurrency?.id) return null;
+
+      const response = await api.get('/api/meter-events/pending-amount', {
+        params: {
+          subscription_id: subscriptionId,
+          currency_id: paymentCurrency.id,
+        },
+      });
+
+      return response.data;
+    },
+    {
+      ready: !!subscriptionId && !!paymentCurrency?.id,
+      refreshDeps: [subscriptionId, paymentCurrency?.id],
+      pollingInterval: 30000, // 每30秒检查一次
+    }
+  );
+
+  // pendingAmountSummary 是 GroupedBN 格式: { [currencyId: string]: string }
+  const pendingAmount = pendingAmountSummary && paymentCurrency?.id ? pendingAmountSummary[paymentCurrency.id] : null;
+
+  const hasPendingAmount = pendingAmount && pendingAmount !== '0';
+
+  return {
+    pendingAmount,
+    hasPendingAmount,
+    checkPendingAmount,
+  };
+}

package/src/libs/meter-utils.ts

@@ -0,0 +1,196 @@
+import { api } from '@blocklet/payment-react';
+import type { TMeter, TCustomer, TPaymentCurrency, TSubscription } from '@blocklet/payment-types';
+
+export interface MeterInfo {
+  meter?: TMeter & { paymentCurrency?: TPaymentCurrency };
+  customer?: TCustomer;
+  paymentCurrency?: TPaymentCurrency;
+  subscription?: TSubscription;
+}
+
+export interface GetMeterInfoOptions {
+  meterId?: string;
+  customerId?: string;
+  eventName?: string;
+  includeCustomer?: boolean;
+  includePaymentCurrency?: boolean;
+  includeSubscription?: boolean;
+  subscriptionId?: string;
+}
+
+/**
+ * 获取meter相关信息的通用方法
+ * @param options 配置选项
+ * @returns Promise<MeterInfo>
+ */
+export async function getMeterInfo(options: GetMeterInfoOptions = {}): Promise<MeterInfo> {
+  const {
+    meterId,
+    customerId,
+    eventName,
+    includeCustomer = false,
+    includePaymentCurrency = false,
+    includeSubscription = false,
+    subscriptionId,
+  } = options;
+
+  const result: MeterInfo = {};
+
+  try {
+    // 获取meter信息
+    if (meterId) {
+      const { data: meter } = await api.get(`/api/meters/${meterId}`);
+      result.meter = meter;
+
+      // 如果meter包含paymentCurrency且需要包含
+      if (includePaymentCurrency && meter.paymentCurrency) {
+        result.paymentCurrency = meter.paymentCurrency;
+      }
+    } else if (eventName) {
+      // 通过event_name查找meter
+      const { data: meters } = await api.get(`/api/meters?event_name=${encodeURIComponent(eventName)}`);
+      if (meters.list && meters.list.length > 0) {
+        const [firstMeter] = meters.list;
+        result.meter = firstMeter;
+
+        if (includePaymentCurrency && firstMeter.paymentCurrency) {
+          result.paymentCurrency = firstMeter.paymentCurrency;
+        }
+      }
+    }
+
+    // 获取customer信息
+    if (includeCustomer && customerId) {
+      const { data: customer } = await api.get(`/api/customers/${customerId}`);
+      result.customer = customer;
+    }
+
+    // 获取subscription信息
+    if (includeSubscription && subscriptionId) {
+      const { data: subscription } = await api.get(`/api/subscriptions/${subscriptionId}`);
+      result.subscription = subscription;
+    }
+
+    // 如果需要paymentCurrency但还没有获取到，尝试从meter的currency_id获取
+    if (includePaymentCurrency && !result.paymentCurrency && result.meter?.currency_id) {
+      try {
+        const { data: paymentCurrency } = await api.get(`/api/payment-currencies/${result.meter.currency_id}`);
+        result.paymentCurrency = paymentCurrency;
+      } catch (err) {
+        console.warn('Failed to fetch payment currency:', err);
+      }
+    }
+
+    return result;
+  } catch (error) {
+    console.error('Error fetching meter info:', error);
+    throw error;
+  }
+}
+
+/**
+ * 获取meter的完整信息（包含所有关联数据）
+ * @param meterId meter ID
+ * @returns Promise<MeterInfo>
+ */
+export function getMeterFullInfo(meterId: string): Promise<MeterInfo> {
+  return getMeterInfo({
+    meterId,
+    includePaymentCurrency: true,
+  });
+}
+
+/**
+ * 根据事件名称获取meter信息
+ * @param eventName 事件名称
+ * @param includePaymentCurrency 是否包含支付货币信息
+ * @returns Promise<MeterInfo>
+ */
+export function getMeterByEventName(eventName: string, includePaymentCurrency = true): Promise<MeterInfo> {
+  return getMeterInfo({
+    eventName,
+    includePaymentCurrency,
+  });
+}
+
+/**
+ * 获取meter事件的完整上下文信息
+ * @param options 配置选项
+ * @returns Promise<MeterInfo>
+ */
+export function getMeterEventContext(options: {
+  meterId?: string;
+  eventName?: string;
+  customerId?: string;
+  subscriptionId?: string;
+}): Promise<MeterInfo> {
+  const { meterId, eventName, customerId, subscriptionId } = options;
+
+  return getMeterInfo({
+    meterId,
+    eventName,
+    customerId,
+    subscriptionId,
+    includeCustomer: !!customerId,
+    includePaymentCurrency: true,
+    includeSubscription: !!subscriptionId,
+  });
+}
+
+/**
+ * 批量获取多个meter的信息
+ * @param meterIds meter ID数组
+ * @param includePaymentCurrency 是否包含支付货币信息
+ * @returns Promise<MeterInfo[]>
+ */
+export function getBatchMeterInfo(meterIds: string[], includePaymentCurrency = true): Promise<MeterInfo[]> {
+  const promises = meterIds.map((meterId) =>
+    getMeterInfo({
+      meterId,
+      includePaymentCurrency,
+    }).catch((error) => {
+      console.warn(`Failed to fetch meter ${meterId}:`, error);
+      return { meter: undefined };
+    })
+  );
+
+  return Promise.all(promises);
+}
+
+/**
+ * 获取客户的meter使用情况
+ * @param customerId 客户ID
+ * @param meterId 可选的meter ID，如果不提供则获取所有meter
+ * @returns Promise<MeterInfo[]>
+ */
+export async function getCustomerMeterUsage(customerId: string, meterId?: string): Promise<MeterInfo[]> {
+  try {
+    // 获取客户的credit transactions来找到相关的meters
+    const params = new URLSearchParams();
+    params.append('customer_id', customerId);
+    if (meterId) {
+      params.append('meter_id', meterId);
+    }
+
+    const { data: transactions } = await api.get(`/api/credit-transactions?${params.toString()}`);
+
+    // 提取唯一的meter IDs
+    const uniqueMeterIds = [
+      ...new Set(
+        transactions.list
+          ?.map((t: any) => t.meter?.id)
+          .filter((id: any): id is string => Boolean(id) && typeof id === 'string')
+      ),
+    ] as string[];
+
+    if (uniqueMeterIds.length === 0) {
+      return [];
+    }
+
+    // 批量获取meter信息
+    return await getBatchMeterInfo(uniqueMeterIds);
+  } catch (error) {
+    console.error('Error fetching customer meter usage:', error);
+    return [];
+  }
+}

package/src/libs/util.ts

@@ -50,6 +50,10 @@ export function getPricingModel(price: TPrice) {
     return 'package';
   }
 
+  if (price.type === 'recurring' && price.recurring?.usage_type === 'metered' && price.recurring?.meter_id) {
+    return 'credit_metered';
+  }
+
   return 'standard';
 }