@blocklet/payment-react 1.23.0 → 1.23.2

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

@@ -6,7 +6,7 @@
 /* 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, Popover } 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';
@@ -21,7 +21,6 @@ import { usePaymentContext } from '../../contexts/payment';
 import api from '../../libs/api';
 import Table from '../../components/table';
 import { createLink, handleNavigation } from '../../libs/navigation';
-import SourceDataViewer from '../../components/source-data-viewer';
 
 type Result = Paginated<TCreditTransactionExpanded>;
 
@@ -73,6 +72,18 @@ const getInvoiceDetailLink = (invoiceId: string, inDashboard: boolean) => {
   };
 };
 
+const getTransactionDetailLink = (transactionId: string, inDashboard: boolean) => {
+  let path = `/customer/credit-transaction/${transactionId}`;
+  if (inDashboard) {
+    path = `/admin/customers/${transactionId}`;
+  }
+
+  return {
+    link: createLink(path),
+    connect: false,
+  };
+};
+
 const TransactionsTable = React.memo((props: Props) => {
   const {
     pageSize,
@@ -110,12 +121,6 @@ const TransactionsTable = React.memo((props: Props) => {
     end: undefined,
   });
 
-  // Source Data Popover state
-  const [sourceDataPopover, setSourceDataPopover] = useState<{
-    anchorEl: HTMLElement | null;
-    data: any;
-  }>({ anchorEl: null, data: null });
-
   const handleDateRangeChange = useCallback((newValue: DateRangeValue) => {
     setFilters(newValue);
     setSearch((prev) => ({
@@ -158,6 +163,15 @@ const TransactionsTable = React.memo((props: Props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [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 columns = [
     {
       label: t('common.amount'),
@@ -174,19 +188,23 @@ const TransactionsTable = React.memo((props: Props) => {
 
           if (!includeGrants) {
             return (
-              <Typography>
-                {displayAmount} {unit}
-              </Typography>
+              <Box onClick={(e) => handleTransactionClick(e, item)}>
+                <Typography>
+                  {displayAmount} {unit}
+                </Typography>
+              </Box>
             );
           }
 
           return (
-            <Typography
-              sx={{
-                color: isGrant ? 'success.main' : 'error.main',
-              }}>
-              {isGrant ? '+' : '-'} {displayAmount} {unit}
-            </Typography>
+            <Box onClick={(e) => handleTransactionClick(e, item)}>
+              <Typography
+                sx={{
+                  color: isGrant ? 'success.main' : 'error.main',
+                }}>
+                {isGrant ? '+' : '-'} {displayAmount} {unit}
+              </Typography>
+            </Box>
           );
         },
       },
@@ -232,9 +250,11 @@ const TransactionsTable = React.memo((props: Props) => {
             : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
 
           return (
-            <Typography variant="body2" sx={{ fontWeight: 400 }}>
-              {description}
-            </Typography>
+            <Box onClick={(e) => handleTransactionClick(e, item)}>
+              <Typography variant="body2" sx={{ fontWeight: 400 }}>
+                {description}
+              </Typography>
+            </Box>
           );
         },
       },
@@ -269,14 +289,16 @@ const TransactionsTable = React.memo((props: Props) => {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data?.list[index] as any;
           return (
-            <Typography
-              variant="body2"
-              sx={{
-                color: 'text.secondary',
-                fontSize: '0.875rem',
-              }}>
-              {formatToDate(item.created_at, locale, 'YYYY-MM-DD HH:mm')}
-            </Typography>
+            <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>
           );
         },
       },
@@ -289,7 +311,6 @@ const TransactionsTable = React.memo((props: Props) => {
           const item = data?.list[index] as any;
           const isGrant = item.activity_type === 'grant';
           const invoiceId = isGrant ? item.metadata?.invoice_id : null;
-          const sourceData = !isGrant && item.meterEvent?.source_data;
 
           return (
             <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
@@ -306,19 +327,17 @@ const TransactionsTable = React.memo((props: Props) => {
                   {t('common.viewInvoice')}
                 </Button>
               )}
-              {sourceData && (
+              {!isGrant && (
                 <Button
                   variant="text"
                   size="small"
                   color="primary"
                   onClick={(e) => {
                     e.preventDefault();
-                    setSourceDataPopover({
-                      anchorEl: e.currentTarget,
-                      data: sourceData,
-                    });
+                    const link = getTransactionDetailLink(item.id, isAdmin && mode === 'dashboard');
+                    handleNavigation(e, link.link, navigate);
                   }}>
-                  {t('common.viewSourceData')}
+                  {t('common.viewDetail')}
                 </Button>
               )}
             </Box>
@@ -378,35 +397,6 @@ const TransactionsTable = React.memo((props: Props) => {
         mobileTDFlexDirection="row"
         emptyNodeText={t('admin.creditTransactions.noTransactions')}
       />
-      <Popover
-        open={Boolean(sourceDataPopover.anchorEl)}
-        anchorEl={sourceDataPopover.anchorEl}
-        onClose={() => setSourceDataPopover({ anchorEl: null, data: null })}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-        slotProps={{
-          paper: {
-            sx: {
-              minWidth: {
-                xs: 0,
-                md: 320,
-              },
-              maxHeight: 450,
-              p: {
-                xs: 1,
-                md: 3,
-              },
-            },
-          },
-        }}>
-        {sourceDataPopover.data && <SourceDataViewer data={sourceDataPopover.data} showGroups />}
-      </Popover>
     </TableRoot>
   );
 });

package/src/locales/en.tsx

@@ -14,6 +14,7 @@ export default flat({
     options: 'Options',
     advanced: 'Advanced options',
     login: 'Login to access this page',
+    accessDenied: 'You do not have permission to access other customer data',
     settings: 'Settings',
     preview: 'Preview',
     required: 'Required',
@@ -57,6 +58,21 @@ export default flat({
     stakeTxHash: 'Stake Transaction',
     slashTxHash: 'Slash Transaction',
     transferTxHash: 'Transfer Transaction',
+    mintTxHash: 'Mint Transaction',
+    pending: 'Pending',
+    failed: 'Failed',
+    completed: 'Completed',
+    creditTransaction: 'Credit Transaction',
+    creditAmount: 'Credit Amount',
+    remainingBalance: 'Remaining Balance',
+    transferStatus: 'Transaction Status',
+    sourceData: 'Source Data',
+    viewGrant: 'View Grant',
+    viewSubscription: 'View Subscription',
+    view: 'View',
+    meterEvent: 'Meter Event',
+    source: 'Source',
+    viewDetail: 'View Detail',
     customer: 'Customer',
     currency: 'Currency',
     custom: 'Custom',

package/src/locales/zh.tsx

@@ -18,6 +18,7 @@ export default flat({
     required: '必填',
     setup: '设置',
     login: '登录以访问此页面',
+    accessDenied: '您无权访问其他客户的数据',
     amount: '金额',
     total: '总计',
     subtotal: '小计',
@@ -57,6 +58,21 @@ export default flat({
     stakeTxHash: '质押交易',
     slashTxHash: '罚没交易',
     transferTxHash: '扣款交易',
+    mintTxHash: '铸造交易',
+    pending: '处理中',
+    failed: '失败',
+    completed: '已完成',
+    creditTransaction: '信用交易',
+    creditAmount: '信用额度',
+    remainingBalance: '剩余余额',
+    transferStatus: '交易状态',
+    sourceData: '源数据',
+    viewGrant: '查看额度',
+    viewSubscription: '查看订阅',
+    view: '查看',
+    meterEvent: '计量事件',
+    source: '来源',
+    viewDetail: '查看详情',
     customer: '客户',
     currency: '币种',
     custom: '自定义',