@blocklet/payment-react 1.24.2 → 1.24.4

package/src/history/credit/transactions-list.tsx

@@ -6,11 +6,11 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TCreditTransactionExpanded } from '@blocklet/payment-types';
-import { Box, Typography, Grid, Stack, Link, Button, Chip } from '@mui/material';
+import { Box, Typography, Grid, Stack, Link, Button } from '@mui/material';
 import { useRequest } from 'ahooks';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useNavigate } from 'react-router-dom';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/system';
 import { joinURL } from 'ufo';
 import DateRangePicker, { type DateRangeValue } from '../../components/date-range-picker';
@@ -72,10 +72,10 @@ const getInvoiceDetailLink = (invoiceId: string, inDashboard: boolean) => {
   };
 };
 
-const getTransactionDetailLink = (transactionId: string, inDashboard: boolean) => {
-  let path = `/customer/credit-transaction/${transactionId}`;
+const getSubscriptionDetailLink = (subscriptionId: string, inDashboard: boolean) => {
+  let path = `/customer/subscription/${subscriptionId}`;
   if (inDashboard) {
-    path = `/admin/customers/${transactionId}`;
+    path = `/admin/billing/${subscriptionId}`;
   }
 
   return {
@@ -84,6 +84,114 @@ const getTransactionDetailLink = (transactionId: string, inDashboard: boolean) =
   };
 };
 
+const getCreditTransactionDetailLink = (transactionId: string) => {
+  const path = `/customer/credit-transaction/${transactionId}`;
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
+const getMeterEventDetailLink = (meterEventId: string) => {
+  // Meter event detail page is only available in admin dashboard
+  const path = `/admin/billing/${meterEventId}`;
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
+const getSubscriptionId = (item: any) =>
+  item.metadata?.subscription_id || item.subscription_id || item.invoice?.subscription_id;
+
+const getInvoiceId = (item: any) => item.metadata?.invoice_id || item.invoice?.id;
+const getMeterEventId = (item: any) => item.source || item.metadata?.meter_event_id;
+
+// Extract credit activity classification logic for table columns reuse
+const getCreditActivityFlags = (item: any) => {
+  const isGrant = item.activity_type === 'grant';
+  const isScheduled = isGrant && item.metadata?.delivery_mode === 'schedule';
+  const isDepleted = isGrant && item.status === 'depleted';
+  const isExpired = isGrant && (item.status === 'expired' || item.status === 'voided');
+  const isInactive = isDepleted || isExpired;
+
+  return { isGrant, isScheduled, isDepleted, isExpired, isInactive };
+};
+
+const getTransactionDetailLink = (item: any, inDashboard: boolean) => {
+  if (item.activity_type === 'grant') {
+    const invoiceId = getInvoiceId(item);
+    if (invoiceId) {
+      return getInvoiceDetailLink(invoiceId, inDashboard);
+    }
+
+    return getGrantDetailLink(item.id, inDashboard);
+  }
+
+  if (!inDashboard) {
+    return getCreditTransactionDetailLink(item.id);
+  }
+
+  const meterEventId = getMeterEventId(item);
+  if (!meterEventId) {
+    return null;
+  }
+
+  return getMeterEventDetailLink(meterEventId);
+};
+
+const getTransactionDescription = (item: any, t: Function) => {
+  const { isGrant, isScheduled, isInactive } = getCreditActivityFlags(item);
+  const isPaid = isGrant && item.category === 'paid' && (!isScheduled || item.metadata?.schedule_seq === 1);
+
+  if (!isGrant) {
+    const secondLine = item.metadata?.is_repayment ? t('common.creditActivity.repayment') : item.description || '';
+    return {
+      isGrant,
+      isInactive,
+      activityType: t('common.creditActivity.consumption'),
+      secondLine,
+    };
+  }
+
+  if (isPaid) {
+    let secondLine = item.description || '';
+    if (item.invoice?.total && item.invoice?.paymentCurrency) {
+      const invoiceCurrency = item.invoice.paymentCurrency;
+      const paidAmount = formatCreditAmount(
+        formatBNStr(item.invoice.total, invoiceCurrency.decimal || 0),
+        invoiceCurrency.symbol || ''
+      );
+      secondLine = t('common.creditActivity.paidAmount', { amount: paidAmount });
+    }
+
+    return {
+      isGrant,
+      isInactive,
+      activityType: t('common.creditActivity.paidGrant'),
+      secondLine,
+    };
+  }
+
+  if (isScheduled) {
+    return {
+      isGrant,
+      isInactive,
+      activityType: t('common.creditActivity.resetGrant'),
+      secondLine: item.description || '',
+    };
+  }
+
+  return {
+    isGrant,
+    isInactive,
+    activityType: t('common.creditActivity.promotionalGrant'),
+    secondLine: item.description || '',
+  };
+};
+
 const TransactionsTable = React.memo((props: Props) => {
   const {
     pageSize,
@@ -101,6 +209,7 @@ const TransactionsTable = React.memo((props: Props) => {
   const { t, locale } = useLocaleContext();
   const { session } = usePaymentContext();
   const isAdmin = ['owner', 'admin'].includes(session?.user?.role || '');
+  const isDashboard = isAdmin && mode === 'dashboard';
   const navigate = useNavigate();
 
   // 如果没有传入 customer_id，使用当前登录用户的 DID
@@ -121,7 +230,7 @@ const TransactionsTable = React.memo((props: Props) => {
     end: undefined,
   });
 
-  const handleDateRangeChange = useCallback((newValue: DateRangeValue) => {
+  const handleDateRangeChange = (newValue: DateRangeValue) => {
     setFilters(newValue);
     setSearch((prev) => ({
       ...prev,
@@ -129,7 +238,7 @@ const TransactionsTable = React.memo((props: Props) => {
       start: newValue.start || undefined,
       end: newValue.end || undefined,
     }));
-  }, []);
+  };
 
   const { loading, data = { list: [], count: 0 } } = useRequest(
     () =>
@@ -149,9 +258,14 @@ const TransactionsTable = React.memo((props: Props) => {
   // 初始化时应用默认日期筛选
   useEffect(() => {
     if (showTimeFilter && !search.start && !search.end) {
-      handleDateRangeChange(filters);
+      setSearch((prev) => ({
+        ...prev,
+        page: 1,
+        start: filters.start || undefined,
+        end: filters.end || undefined,
+      }));
     }
-  }, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
+  }, [showTimeFilter, search.start, search.end, filters.start, filters.end]);
 
   const prevData = useRef(data);
 
@@ -164,122 +278,125 @@ const TransactionsTable = React.memo((props: Props) => {
   }, [data]);
 
   const handleTransactionClick = (e: React.MouseEvent, item: any) => {
-    if (item.activity_type === 'grant') {
-      const { link } = getGrantDetailLink(item.id, isAdmin && mode === 'dashboard');
-      handleNavigation(e, link, navigate, { target: link.external ? '_blank' : '_self' });
-    } else {
-      const { link } = getTransactionDetailLink(item.id, isAdmin && mode === 'dashboard');
-      handleNavigation(e, link, navigate, { target: link.external ? '_blank' : '_self' });
+    const detail = getTransactionDetailLink(item, isDashboard);
+    if (!detail) {
+      return;
     }
+
+    handleNavigation(e, detail.link, navigate, { target: detail.link.external ? '_blank' : '_self' });
   };
+  const openSubscription = (e: React.MouseEvent, subscriptionId: string) => {
+    e.preventDefault();
+    const link = getSubscriptionDetailLink(subscriptionId, isDashboard);
+    handleNavigation(e, link.link, navigate);
+  };
+
+  const openInvoice = (e: React.MouseEvent, invoiceId: string) => {
+    e.preventDefault();
+    const link = getInvoiceDetailLink(invoiceId, isDashboard);
+    handleNavigation(e, link.link, navigate);
+  };
+
+  const renderActionButton = (label: string, onClick: (e: React.MouseEvent) => void) => (
+    <Button variant="text" size="small" color="primary" sx={{ whiteSpace: 'nowrap' }} onClick={onClick}>
+      {label}
+    </Button>
+  );
+
   const columns = [
     {
-      label: t('common.amount'),
-      name: 'credit_amount',
-      align: 'right',
+      label: t('common.date'),
+      name: 'created_at',
       options: {
+        setCellProps: () => ({ style: { width: '25%' } }),
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
-          const isGrant = item.activity_type === 'grant';
-          const isExpiredGrant = isGrant && item.status === 'expired';
-          const amount = isGrant ? item.amount : item.credit_amount;
-          const currency = item.paymentCurrency || item.currency;
-          const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
-          const displayAmount = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
-
-          if (!includeGrants) {
-            return (
-              <Box onClick={(e) => handleTransactionClick(e, item)}>
-                <Typography>{displayAmount}</Typography>
-              </Box>
-            );
-          }
-
-          const amountNode = (
-            <Typography
-              sx={{
-                color: isGrant ? (isExpiredGrant ? 'text.disabled' : 'success.main') : 'error.main',
-              }}>
-              {isGrant ? '+' : '-'} {displayAmount}
-            </Typography>
-          );
-
           return (
             <Box onClick={(e) => handleTransactionClick(e, item)}>
-              <Stack direction="row" spacing={1} alignItems="center" justifyContent="flex-end" sx={{ width: '100%' }}>
-                {isExpiredGrant && (
-                  <Chip
-                    label={t('admin.creditGrants.status.expired')}
-                    size="small"
-                    variant="outlined"
-                    sx={{
-                      mr: 2,
-                      height: 18,
-                      fontSize: '12px',
-                      color: 'text.disabled',
-                      borderColor: 'text.disabled',
-                    }}
-                  />
-                )}
-                {amountNode}
-              </Stack>
+              <Typography variant="body2" sx={{ fontSize: '0.875rem' }}>
+                {formatToDate(item.created_at, locale, 'YYYY-MM-DD HH:mm')}
+              </Typography>
             </Box>
           );
         },
       },
     },
     {
-      label: t('common.creditGrant'),
-      name: 'credit_grant',
+      label: t('common.description'),
+      name: 'description',
       options: {
+        setCellProps: () => ({ style: { width: '25%' } }),
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
-          const isGrant = item.activity_type === 'grant';
-          const isExpiredGrant = isGrant && item.status === 'expired';
-
-          const grantName = isGrant ? item.name : item.creditGrant.name;
-          const grantId = isGrant ? item.id : item.credit_grant_id;
-          const nameNode = (
-            <Typography variant="body2" sx={{ cursor: 'pointer', color: isExpiredGrant ? 'text.disabled' : undefined }}>
-              {grantName || `Grant ${grantId.slice(-6)}`}
-            </Typography>
-          );
+          const { activityType, secondLine, isInactive, isGrant } = getTransactionDescription(item, t);
+
           return (
-            <Stack
-              direction="row"
-              spacing={1}
-              onClick={(e) => {
-                const link = getGrantDetailLink(grantId, isAdmin && mode === 'dashboard');
-                handleNavigation(e, link.link, navigate);
-              }}
-              sx={{
-                alignItems: 'center',
-              }}>
-              {nameNode}
-            </Stack>
+            <Box onClick={(e) => handleTransactionClick(e, item)} sx={{ cursor: 'pointer' }}>
+              <Stack direction="column" spacing={0.25}>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: isInactive ? 'text.secondary' : isGrant ? 'success.main' : 'error.main',
+                  }}>
+                  {activityType}
+                </Typography>
+                {secondLine && (
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {secondLine}
+                  </Typography>
+                )}
+              </Stack>
+            </Box>
           );
         },
       },
     },
     {
-      label: t('common.description'),
-      name: 'description',
+      label: t('common.amount'),
+      name: 'credit_amount',
+      align: 'right',
       options: {
+        setCellProps: () => ({ style: { width: '20%' } }),
+        customHeadLabelRender: () => <Box sx={{ pr: 5 }}>{t('common.amount')}</Box>,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
-          const isGrant = item.activity_type === 'grant';
-          const isExpiredGrant = isGrant && item.status === 'expired';
-          const description = isGrant
-            ? item.name || item.description || 'Credit Granted'
-            : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
-
-          const descriptionNode = (
-            <Typography variant="body2" sx={{ fontWeight: 400, color: isExpiredGrant ? 'text.disabled' : undefined }}>
-              {description}
-            </Typography>
-          );
+          const { isGrant, isDepleted, isExpired, isInactive } = getCreditActivityFlags(item);
+          const amount = isGrant ? item.amount : item.credit_amount;
+          const currency = item.paymentCurrency || item.currency;
+          const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
+          const displayAmount = formatCreditAmount(formatBNStr(amount, currency?.decimal || 0), unit);
+
+          if (!includeGrants) {
+            return (
+              <Box onClick={(e) => handleTransactionClick(e, item)} sx={{ pr: 5 }}>
+                <Typography>{displayAmount}</Typography>
+              </Box>
+            );
+          }
 
-          return <Box onClick={(e) => handleTransactionClick(e, item)}>{descriptionNode}</Box>;
+          return (
+            <Box onClick={(e) => handleTransactionClick(e, item)} sx={{ pr: 5 }}>
+              <Stack direction="column" spacing={0.25} alignItems="flex-end">
+                <Typography
+                  sx={{
+                    fontWeight: 500,
+                    color: isInactive ? 'text.secondary' : isGrant ? 'success.main' : 'error.main',
+                    whiteSpace: 'nowrap',
+                  }}>
+                  {isGrant ? '+' : '-'} {displayAmount}
+                </Typography>
+                {isDepleted ? (
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {t('common.consumed')}
+                  </Typography>
+                ) : isExpired ? (
+                  <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                    {t('common.expired')}
+                  </Typography>
+                ) : null}
+              </Stack>
+            </Box>
+          );
         },
       },
     },
@@ -306,64 +423,27 @@ const TransactionsTable = React.memo((props: Props) => {
           },
         ]
       : []),
-    {
-      label: t('common.date'),
-      name: 'created_at',
-      options: {
-        customBodyRenderLite: (_: string, index: number) => {
-          const item = data?.list[index] as any;
-          return (
-            <Box onClick={(e) => handleTransactionClick(e, item)}>
-              <Typography
-                variant="body2"
-                sx={{
-                  color: 'text.secondary',
-                  fontSize: '0.875rem',
-                }}>
-                {formatToDate(item.created_at, locale, 'YYYY-MM-DD HH:mm')}
-              </Typography>
-            </Box>
-          );
-        },
-      },
-    },
     {
       label: t('common.actions'),
       name: 'actions',
       options: {
+        setCellProps: () => ({ style: { width: '25%' } }),
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
-          const isGrant = item.activity_type === 'grant';
-          const invoiceId = isGrant ? item.metadata?.invoice_id : null;
+          const { isGrant, isScheduled } = getCreditActivityFlags(item);
+          const isPaid = isGrant && item.category === 'paid' && !isScheduled;
+          const subscriptionId = getSubscriptionId(item);
+          const invoiceId = isGrant ? getInvoiceId(item) : null;
+          const shouldShowSubscription = Boolean(subscriptionId) && (!isGrant || isScheduled || isPaid);
 
           return (
-            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
-              {isGrant && invoiceId && (
-                <Button
-                  variant="text"
-                  size="small"
-                  color="primary"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === 'dashboard');
-                    handleNavigation(e, link.link, navigate);
-                  }}>
-                  {t('common.viewInvoice')}
-                </Button>
-              )}
-              {!isGrant && (
-                <Button
-                  variant="text"
-                  size="small"
-                  color="primary"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    const link = getTransactionDetailLink(item.id, isAdmin && mode === 'dashboard');
-                    handleNavigation(e, link.link, navigate);
-                  }}>
-                  {t('common.viewDetail')}
-                </Button>
-              )}
+            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'nowrap' }}>
+              {shouldShowSubscription && subscriptionId
+                ? renderActionButton(t('common.viewSubscription'), (e) => openSubscription(e, subscriptionId))
+                : null}
+              {isPaid && invoiceId
+                ? renderActionButton(t('common.viewInvoice'), (e) => openInvoice(e, invoiceId))
+                : null}
             </Box>
           );
         },

package/src/history/invoice/list.tsx

@@ -23,6 +23,7 @@ import api from '../../libs/api';
 import StripePaymentAction from '../../components/stripe-payment-action';
 import {
   formatBNStr,
+  formatCreditAmount,
   formatError,
   formatToDate,
   formatToDatetime,
@@ -112,6 +113,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
   const listKey = 'invoice-table';
   const { t, locale } = useLocaleContext();
   const navigate = useNavigate();
+  const { getCurrency } = usePaymentContext();
 
   const [search, setSearch] = useState<{ pageSize: number; page: number }>({
     pageSize: pageSize || 10,
@@ -256,25 +258,126 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     ...(relatedSubscription
       ? [
           {
-            label: t('common.relatedSubscription'),
-            name: 'subscription',
+            label: t('common.purchaseItems'),
+            name: 'purchase_items',
             options: {
               customBodyRenderLite: (_: string, index: number) => {
                 const invoice = data?.list[index] as TInvoiceExpanded;
-                return invoice.subscription_id ? (
-                  <Box
-                    onClick={(e) => handleRelatedSubscriptionClick(e, invoice)}
-                    sx={{ color: 'text.link', cursor: 'pointer' }}>
-                    {invoice.subscription?.description}
-                  </Box>
-                ) : (
-                  <Box onClick={(e) => handleLinkClick(e, invoice)} sx={{ ...linkStyle, color: 'text.lighter' }}>
-                    {t('common.none')}
+                const lines = (invoice as any).lines || [];
+                const items = lines
+                  .map((line: any) => {
+                    const name = line.price?.product?.name || line.description;
+                    if (!name) {
+                      return null;
+                    }
+                    const quantity = Number(line.quantity || 0);
+                    const label = Number.isFinite(quantity) && quantity > 1 ? `${name} x${quantity}` : name;
+                    const lineKey = line.id || line.price?.id || line.price?.product?.id || line.description || name;
+                    return { key: String(lineKey), label };
+                  })
+                  .filter(Boolean) as Array<{ key: string; label: string }>;
+
+                if (items.length === 0 && invoice.subscription?.description) {
+                  items.push({
+                    key: `subscription-${invoice.subscription_id || invoice.id}`,
+                    label: invoice.subscription.description,
+                  });
+                }
+                const isSubscription = Boolean(invoice.subscription_id);
+                const clickableProps = isSubscription
+                  ? { onClick: (e: React.MouseEvent) => handleRelatedSubscriptionClick(e, invoice) }
+                  : {};
+
+                if (items.length === 0) {
+                  return (
+                    <Box sx={{ color: 'text.lighter' }}>
+                      <Typography sx={{ fontSize: 14 }}>{t('common.none')}</Typography>
+                    </Box>
+                  );
+                }
+
+                return (
+                  <Box {...clickableProps} sx={isSubscription ? { cursor: 'pointer' } : undefined}>
+                    <Stack spacing={0.5}>
+                      {items.map((item) => (
+                        <Typography
+                          key={`${invoice.id}-item-${item.key}`}
+                          sx={{ fontSize: 14, color: isSubscription ? 'text.link' : 'text.primary' }}
+                          noWrap>
+                          {item.label}
+                        </Typography>
+                      ))}
+                    </Stack>
                   </Box>
                 );
               },
             },
           },
+          {
+            label: t('common.credits'),
+            name: 'credits',
+            options: {
+              customBodyRenderLite: (_: string, index: number) => {
+                const invoice = data?.list[index] as TInvoiceExpanded;
+                const lines = (invoice as any).lines || [];
+                const creditItems: Array<{ key: string; label: string }> = [];
+
+                lines.forEach((line: any) => {
+                  const lineKey = String(
+                    line.id || line.price?.id || line.price?.product?.id || line.description || invoice.id
+                  );
+                  const pushCreditItem = (suffix: string, label: string) => {
+                    creditItems.push({ key: `${lineKey}-${suffix}`, label });
+                  };
+                  const creditConfig = line.price?.metadata?.credit_config;
+                  const creditAmount = Number(creditConfig?.credit_amount || 0);
+                  if (creditAmount > 0) {
+                    const quantity = Number(line.quantity || 0);
+                    const totalAmount = creditAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+                    const currencySymbol =
+                      getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || 'Credits';
+                    pushCreditItem('amount', `+${formatCreditAmount(String(totalAmount), currencySymbol)}`);
+                    return;
+                  }
+
+                  const scheduleConfig = creditConfig?.schedule;
+                  const scheduledAmount = Number(scheduleConfig?.amount_per_grant || 0);
+                  if (scheduleConfig?.enabled && scheduleConfig?.delivery_mode === 'schedule' && scheduledAmount > 0) {
+                    const quantity = Number(line.quantity || 0);
+                    const totalAmount = scheduledAmount * (Number.isFinite(quantity) && quantity > 0 ? quantity : 1);
+                    const currencySymbol =
+                      getCurrency(creditConfig?.currency_id)?.symbol || creditConfig?.currency_id || 'Credits';
+                    pushCreditItem('schedule', `+${formatCreditAmount(String(totalAmount), currencySymbol)}`);
+                    return;
+                  }
+
+                  const creditInfo = (line.price as any)?.credit;
+                  const creditInfoAmount = Number(creditInfo?.amount || 0);
+                  if (creditInfoAmount > 0) {
+                    const currencySymbol = creditInfo.currency?.symbol || 'Credits';
+                    pushCreditItem('credit', `+${formatCreditAmount(String(creditInfoAmount), currencySymbol)}`);
+                  }
+                });
+
+                if (creditItems.length === 0) {
+                  return '-';
+                }
+
+                return (
+                  <Stack spacing={0.5}>
+                    {creditItems.map((creditItem) => (
+                      <Typography
+                        key={`${invoice.id}-credit-${creditItem.key}`}
+                        sx={{ fontSize: 14, color: 'success.main' }}
+                        noWrap>
+                        {creditItem.label}
+                      </Typography>
+                    ))}
+                  </Stack>
+                );
+              },
+            },
+          },
         ]
       : []),
     {
@@ -296,23 +399,6 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         },
       },
     },
-
-    {
-      label: t('common.description'),
-      name: '',
-      options: {
-        sort: false,
-        customBodyRenderLite: (val: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
-
-          return (
-            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
-              {getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id}
-            </Box>
-          );
-        },
-      },
-    },
     {
       label: t('common.status'),
       name: 'status',