payment-kit 1.13.243 → 1.13.245

package/api/src/routes/subscriptions.ts

@@ -212,7 +212,14 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
     return res.status(400).json({ error: 'Subscription already canceled' });
   }
 
-  const { at = 'current_period_end', refund = 'none', time, feedback = 'other', comment = '' } = req.body;
+  const {
+    at = 'current_period_end',
+    refund = 'none',
+    time,
+    feedback = 'other',
+    comment = '',
+    reason = 'payment_disputed',
+  } = req.body;
   if (at === 'custom' && dayjs(time).unix() < dayjs().unix()) {
     return res.status(400).json({ error: 'cancel at must be a future timestamp' });
   }
@@ -220,9 +227,9 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
   // update cancel at
   const updates: Partial<Subscription> = {
     cancelation_details: {
-      reason: 'payment_disputed',
-      feedback: 'other',
-      comment: `Requested by ${req.user?.role}:${req.user?.did}`,
+      comment: comment || `Requested by ${req.user?.role}:${req.user?.did}`,
+      reason: reason || 'payment_disputed',
+      feedback: feedback || 'other',
     },
   };
   const now = dayjs().unix() + 3;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.243",
+  "version": "1.13.245",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,7 +51,7 @@
     "@arcblock/ux": "^2.9.77",
     "@arcblock/validator": "^1.18.116",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.243",
+    "@blocklet/payment-react": "1.13.245",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.77",
     "@blocklet/uploader": "^0.1.6",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.243",
+    "@blocklet/payment-types": "1.13.245",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "b699d54327e794d3b63e5c217ba5cddf759187b7"
+  "gitHead": "3e56c0c69652d8cc0f2770b649c93fc0e66321eb"
 }

package/src/components/invoice/list.tsx

@@ -5,11 +5,10 @@ import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import InvoiceActions from './action';
 
@@ -50,10 +49,6 @@ type ListProps = {
   ignore_zero?: boolean;
   include_staking?: boolean;
 
-  invoiceProps?: {
-    onClick?: (invoice: TInvoiceExpanded) => void | Promise<void>;
-  };
-
   mode?: 'admin' | 'customer';
 };
 
@@ -79,8 +74,6 @@ InvoiceList.defaultProps = {
   include_staking: false,
   ignore_zero: false,
 
-  invoiceProps: {},
-
   mode: 'admin',
 };
 
@@ -91,13 +84,11 @@ export default function InvoiceList({
   status,
   include_staking,
   ignore_zero,
-  invoiceProps,
   mode,
 }: ListProps) {
   const listKey = getListKey({ customer_id, subscription_id });
 
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
   const [search, setSearch] = useLocalStorageState<SearchProps & { ignore_zero?: boolean; include_staking?: boolean }>(
     listKey,
     {
@@ -112,7 +103,6 @@ export default function InvoiceList({
       },
     }
   );
-  const { startTransition } = useTransitionContext();
 
   const [data, setData] = useState({}) as any;
 
@@ -136,12 +126,14 @@ export default function InvoiceList({
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index];
+          const item = data.list[index] as TInvoiceExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
-              {item?.paymentCurrency.symbol}
-            </Typography>
+            <Link to={`/admin/billing/${item.id}`}>
+              <Typography component="strong" fontWeight={600}>
+                {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
+                {item?.paymentCurrency.symbol}
+              </Typography>
+            </Link>
           );
         },
       },
@@ -153,24 +145,38 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />
+            </Link>
+          );
         },
       },
     },
     {
       label: t('admin.invoice.number'),
       name: 'number',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return <Link to={`/admin/billing/${item.id}`}>{item.number}</Link>;
+        },
+      },
     },
     {
       label: t('common.description'),
       name: 'description',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index];
+          const item = data.list[index] as TInvoiceExpanded;
           const desc = item?.description || item?.id;
-          return desc.startsWith('Subscription ')
-            ? t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`)
-            : desc;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              {desc.startsWith('Subscription ')
+                ? t(`payment.invoice.reason.${desc.replace('Subscription ', '')}`)
+                : desc}
+            </Link>
+          );
         },
       },
     },
@@ -179,9 +185,9 @@ export default function InvoiceList({
       name: 'created_at',
       options: {
         sort: true,
-        responsive: 'vertical',
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -190,8 +196,9 @@ export default function InvoiceList({
       name: 'updated_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TInvoiceExpanded;
+          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -236,6 +243,7 @@ export default function InvoiceList({
 
   return (
     <Table
+      hasRowLink
       data={data.list}
       durable={`__${listKey}__`}
       durableKeys={['searchText']}
@@ -246,15 +254,6 @@ export default function InvoiceList({
         count: data.count,
         page: search!.page - 1,
         rowsPerPage: search!.pageSize,
-        onRowClick: async (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TInvoiceExpanded;
-
-          if (invoiceProps?.onClick) {
-            await invoiceProps.onClick(item);
-          } else {
-            startTransition(() => navigate(`/admin/billing/${item.id}`));
-          }
-        },
         onColumnSortChange(_: any, order: any) {
           setSearch({
             ...search!,

package/src/components/payment-intent/list.tsx

@@ -5,12 +5,11 @@ import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import PaymentIntentActions from './actions';
 
@@ -71,7 +70,6 @@ PaymentList.defaultProps = {
 
 export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
 
   const listKey = getListKey({ customer_id, invoice_id });
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
@@ -84,7 +82,6 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     },
   });
 
-  const { startTransition } = useTransitionContext();
   const [data, setData] = useState({}) as any;
 
   useEffect(() => {
@@ -109,17 +106,19 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return (
-            <Typography
-              component="strong"
-              sx={{ color: item.amount_received === '0' ? 'warning.main' : 'inherit' }}
-              fontWeight={600}>
-              {formatBNStr(
-                item.amount_received === '0' ? item.amount : item.amount_received,
-                item?.paymentCurrency.decimal
-              )}
-              &nbsp;
-              {item?.paymentCurrency.symbol}
-            </Typography>
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography
+                component="strong"
+                sx={{ color: item.amount_received === '0' ? 'warning.main' : 'inherit' }}
+                fontWeight={600}>
+                {formatBNStr(
+                  item.amount_received === '0' ? item.amount : item.amount_received,
+                  item?.paymentCurrency.decimal
+                )}
+                &nbsp;
+                {item?.paymentCurrency.symbol}
+              </Typography>
+            </Link>
           );
         },
       },
@@ -131,7 +130,11 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
-          return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
+            </Link>
+          );
         },
       },
     },
@@ -141,7 +144,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
-          return item.description || item.id;
+          return <Link to={`/admin/payments/${item.id}`}>{item.description || item.id}</Link>;
         },
       },
     },
@@ -150,8 +153,9 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -160,8 +164,9 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       name: 'updated_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentIntentExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -202,6 +207,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
 
   return (
     <Table
+      hasRowLink
       data={data.list || []}
       durable={`__${listKey}__`}
       durableKeys={['searchText']}
@@ -239,12 +245,6 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
             o: order,
           });
         },
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TPaymentIntentExpanded;
-          startTransition(() => {
-            navigate(`/admin/payments/${item.id}`);
-          });
-        },
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}

package/src/components/payouts/list.tsx

@@ -5,12 +5,11 @@ import type { TPayoutExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import PayoutActions from './actions';
 
@@ -73,7 +72,6 @@ PayoutList.defaultProps = {
 
 export default function PayoutList({ customer_id, payment_intent_id, status, features }: ListProps) {
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
 
   const listKey = getListKey({ customer_id, payment_intent_id });
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
@@ -86,7 +84,6 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
     },
   });
 
-  const { startTransition } = useTransitionContext();
   const [data, setData] = useState({}) as any;
 
   useEffect(() => {
@@ -111,11 +108,13 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPayoutExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
-              &nbsp;
-              {item?.paymentCurrency.symbol}
-            </Typography>
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography component="strong" fontWeight={600}>
+                {formatBNStr(item.amount, item?.paymentCurrency.decimal)}
+                &nbsp;
+                {item?.paymentCurrency.symbol}
+              </Typography>
+            </Link>
           );
         },
       },
@@ -127,7 +126,11 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPayoutExpanded;
-          return <Status label={item.status} color={getPayoutStatusColor(item.status)} />;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Status label={item.status} color={getPayoutStatusColor(item.status)} />
+            </Link>
+          );
         },
       },
     },
@@ -137,7 +140,7 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPayoutExpanded;
-          return item.description || item.id;
+          return <Link to={`/admin/payments/${item.id}`}>{item.description || item.id}</Link>;
         },
       },
     },
@@ -146,8 +149,9 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -156,8 +160,9 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
       name: 'updated_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPayoutExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -198,6 +203,8 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
 
   return (
     <Table
+      hasRowLink
+      durable={`__${listKey}__`}
       data={data.list || []}
       columns={columns}
       loading={!data.list}
@@ -233,12 +240,6 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
             o: order,
           });
         },
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TPayoutExpanded;
-          startTransition(() => {
-            navigate(`/admin/payments/${item.id}`);
-          });
-        },
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}

package/src/components/refund/list.tsx

@@ -5,11 +5,10 @@ import type { TRefundExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import RefundActions from './actions';
 
@@ -78,8 +77,6 @@ RefundList.defaultProps = {
 
 export default function RefundList({ customer_id, invoice_id, subscription_id, status, features }: ListProps) {
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
   const listKey = getListKey({ customer_id, invoice_id, subscription_id });
 
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
@@ -118,10 +115,12 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
-              {item?.paymentCurrency.symbol}
-            </Typography>
+            <Link to={`/admin/payments/${item.id}`}>
+              <Typography component="strong" fontWeight={600}>
+                {formatBNStr(item?.amount, item?.paymentCurrency.decimal)}&nbsp;
+                {item?.paymentCurrency.symbol}
+              </Typography>
+            </Link>
           );
         },
       },
@@ -134,7 +133,11 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;
+          return (
+            <Link to={`/admin/payments/${item.id}`}>
+              <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
+            </Link>
+          );
         },
       },
     },
@@ -144,7 +147,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TRefundExpanded;
-          return item.description || item.id;
+          return <Link to={`/admin/payments/${item.id}`}>{item.description || item.id}</Link>;
         },
       },
     },
@@ -153,8 +156,20 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.created_at)}</Link>;
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        sort: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TRefundExpanded;
+          return <Link to={`/admin/payments/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -194,6 +209,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
 
   return (
     <Table
+      hasRowLink
       data={data.list}
       durable={`__${listKey}__`}
       durableKeys={['searchText']}
@@ -204,12 +220,6 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, s
         count: data.count,
         page: search!.page - 1,
         rowsPerPage: search!.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TRefundExpanded;
-          startTransition(() => {
-            navigate(`/admin/payments/${item.id}`);
-          });
-        },
         onColumnSortChange(_: any, order: any) {
           setSearch({
             ...search!,

package/src/components/subscription/list.tsx

@@ -5,11 +5,10 @@ import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
-import { useTransitionContext } from '../progress-bar';
 import Table from '../table';
 import SubscriptionActions from './actions';
 import SubscriptionDescription from './description';
@@ -70,8 +69,6 @@ export default function SubscriptionList({ customer_id, features, status }: List
   const listKey = getListKey({ customer_id });
 
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
       status: (status || 'active') as string,
@@ -103,7 +100,11 @@ export default function SubscriptionList({ customer_id, features, status }: List
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
-          return <SubscriptionDescription subscription={item} />;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <SubscriptionDescription subscription={item} />
+            </Link>
+          );
         },
       },
     },
@@ -114,7 +115,11 @@ export default function SubscriptionList({ customer_id, features, status }: List
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
-          return <SubscriptionStatus subscription={item} />;
+          return (
+            <Link to={`/admin/billing/${item.id}`}>
+              <SubscriptionStatus subscription={item} />
+            </Link>
+          );
         },
       },
     },
@@ -125,10 +130,12 @@ export default function SubscriptionList({ customer_id, features, status }: List
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
           return (
-            <Status
-              label={item.collection_method === 'charge_automatically' ? 'Auto' : 'Manual'}
-              color={item.collection_method === 'charge_automatically' ? 'default' : 'warning'}
-            />
+            <Link to={`/admin/billing/${item.id}`}>
+              <Status
+                label={item.collection_method === 'charge_automatically' ? 'Auto' : 'Manual'}
+                color={item.collection_method === 'charge_automatically' ? 'default' : 'warning'}
+              />
+            </Link>
           );
         },
       },
@@ -138,8 +145,9 @@ export default function SubscriptionList({ customer_id, features, status }: List
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TSubscriptionExpanded;
+          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -184,6 +192,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
 
   return (
     <Table
+      hasRowLink
       data={data.list}
       columns={columns}
       loading={!data.list}
@@ -194,12 +203,6 @@ export default function SubscriptionList({ customer_id, features, status }: List
         count: data.count,
         page: search!.page - 1,
         rowsPerPage: search!.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TSubscriptionExpanded;
-          startTransition(() => {
-            navigate(`/admin/billing/${item.id}`);
-          });
-        },
         onColumnSortChange(_: any, order: any) {
           setSearch({
             ...search!,

package/src/components/table.tsx

@@ -8,7 +8,7 @@ function EmptyStub() {
   return null;
 }
 
-export default function Table({ options, columns, toolbar = true, footer = true, ...rest }: any) {
+export default function Table({ options, columns, toolbar = true, footer = true, hasRowLink = false, ...rest }: any) {
   const { isMobile } = useMobile();
   const { locale } = useLocaleContext();
 
@@ -46,12 +46,25 @@ export default function Table({ options, columns, toolbar = true, footer = true,
       })}
       {...rest}
       components={components}
+      hasRowLink={hasRowLink}
       isMobile={isMobile}
     />
   );
 }
 
 const Wrapped = styled(Datatable)`
+  ${(props) =>
+    props.hasRowLink
+      ? `.MuiTableCell-root {
+    font-size: 1rem !important;
+    padding: 0;
+  }`
+      : ''}
+
+  th.MuiTableCell-head {
+    padding: 8px 24px 8px 0;
+  }
+
   tr.MuiTableRow-root:not(.MuiTableRow-footer) {
     border-bottom: 1px solid rgba(224, 224, 224, 0.4);
   }
@@ -64,17 +77,17 @@ const Wrapped = styled(Datatable)`
     background: #f5f5f5;
   }
 
+  th a,
+  td a {
+    text-decoration: none;
+    display: block;
+    color: inherit;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-right: 24px;
+  }
+
   > div {
     overflow: visible;
   }
-
-  ${(props) => {
-    if (props.isMobile) {
-      return '';
-    }
-
-    return `.MuiTableRow-root > td:first-of-type{
-              padding-left: 6px;
-            }`;
-  }}
 `;

package/src/global.css

@@ -63,10 +63,6 @@ th.MuiTableCell-head {
   padding: 8px 24px 8px 0;
 }
 
-.MuiTableRow-hover {
-  cursor: pointer;
-}
-
 .MuiRadio-root {
   padding: 4px;
 }

package/src/pages/admin/customers/customers/index.tsx

@@ -6,9 +6,8 @@ import { api, formatTime } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Avatar, CircularProgress, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
-import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
@@ -30,8 +29,6 @@ export default function CustomersList() {
   const persisted = getDurableData(listKey);
 
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
   const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any; o?: string }>({
     active: '',
     o: 'desc',
@@ -62,10 +59,12 @@ export default function CustomersList() {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TCustomer;
           return (
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              <Avatar src={`/.well-known/service/user/avatar/${item.did}?imageFilter=resize&w=48&h=48`} />
-              <Typography>{item.name}</Typography>
-            </Stack>
+            <Link to={`/admin/customers/${item.id}`}>
+              <Stack direction="row" alignItems="center" spacing={0.5}>
+                <Avatar src={`/.well-known/service/user/avatar/${item.did}?imageFilter=resize&w=48&h=48`} />
+                <Typography>{item.name}</Typography>
+              </Stack>
+            </Link>
           );
         },
       },
@@ -76,25 +75,42 @@ export default function CustomersList() {
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TCustomer;
-          return <DidAddress did={item.did} />;
+          return (
+            <Link to={`/admin/customers/${item.id}`}>
+              <DidAddress did={item.did} />
+            </Link>
+          );
         },
       },
     },
     {
       label: t('common.email'),
       name: 'email',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TCustomer;
+          return <Link to={`/admin/customers/${item.id}`}>{item.email}</Link>;
+        },
+      },
     },
     {
       label: t('admin.customer.phone'),
       name: 'phone',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TCustomer;
+          return <Link to={`/admin/customers/${item.id}`}>{item.phone}</Link>;
+        },
+      },
     },
     {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TCustomer;
+          return <Link to={`/admin/customers/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -110,6 +126,7 @@ export default function CustomersList() {
 
   return (
     <Table
+      hasRowLink
       durable={`__${listKey}__`}
       durableKeys={['page', 'rowsPerPage', 'searchText']}
       data={data.list}
@@ -118,12 +135,6 @@ export default function CustomersList() {
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TCustomer;
-          startTransition(() => {
-            navigate(`/admin/customers/${item.id}`);
-          });
-        },
         onColumnSortChange(_: any, order: any) {
           setSearch({
             ...search,

package/src/pages/admin/products/links/index.tsx

@@ -6,13 +6,12 @@ import type { TPaymentLinkExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PaymentLinkActions from '../../../../components/payment-link/actions';
-import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
 import { formatPaymentLinkPricing } from '../../../../libs/util';
@@ -29,8 +28,6 @@ function PaymentLinks() {
   const listKey = 'payment-links';
   const { t } = useLocaleContext();
   const { settings } = usePaymentContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
 
   const persisted = getDurableData(listKey);
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -74,14 +71,24 @@ function PaymentLinks() {
       name: 'active',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index];
-          return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;
+          const item = data.list[index] as TPaymentLinkExpanded;
+          return (
+            <Link to={`/admin/products/${item.id}`}>
+              <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />
+            </Link>
+          );
         },
       },
     },
     {
       label: t('common.title'),
       name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentLinkExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{item.name}</Link>;
+        },
+      },
     },
     {
       label: t('admin.price.name'),
@@ -89,9 +96,11 @@ function PaymentLinks() {
       options: {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const doc = data.list[index] as TPaymentLinkExpanded;
-          const result = formatPaymentLinkPricing(doc, settings.baseCurrency);
-          return [result.amount, result.then].filter(Boolean).join(', ');
+          const item = data.list[index] as TPaymentLinkExpanded;
+          const result = formatPaymentLinkPricing(item, settings.baseCurrency);
+          return (
+            <Link to={`/admin/products/${item.id}`}>{[result.amount, result.then].filter(Boolean).join(', ')}</Link>
+          );
         },
       },
     },
@@ -100,8 +109,9 @@ function PaymentLinks() {
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPaymentLinkExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -111,8 +121,8 @@ function PaymentLinks() {
       options: {
         sort: false,
         customBodyRenderLite: (_: string, index: number) => {
-          const doc = data.list[index] as TPaymentLinkExpanded;
-          return <PaymentLinkActions data={doc} onChange={refresh} />;
+          const item = data.list[index] as TPaymentLinkExpanded;
+          return <PaymentLinkActions data={item} onChange={refresh} />;
         },
       },
     },
@@ -128,6 +138,7 @@ function PaymentLinks() {
 
   return (
     <Table
+      hasRowLink
       durable={`__${listKey}__`}
       durableKeys={['page', 'rowsPerPage', 'searchText']}
       title={
@@ -148,12 +159,6 @@ function PaymentLinks() {
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TPaymentLinkExpanded;
-          startTransition(() => {
-            navigate(`/admin/products/${item.id}`);
-          });
-        },
       }}
       loading={loading}
       onChange={onTableChange}

package/src/pages/admin/products/pricing-tables/index.tsx

@@ -6,13 +6,12 @@ import type { TPricingTableExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { joinURL } from 'ufo';
 import useBus from 'use-bus';
 
 import Copyable from '../../../../components/copyable';
 import PricingTableActions from '../../../../components/pricing-table/actions';
-import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { ProductsProvider } from '../../../../contexts/products';
 
@@ -27,8 +26,6 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPricingTa
 function PricingTables() {
   const listKey = 'pricing-tables';
   const { t } = useLocaleContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
 
   const persisted = getDurableData(listKey);
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
@@ -73,22 +70,33 @@ function PricingTables() {
       name: 'active',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index];
-          return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;
+          const item = data.list[index] as TPricingTableExpanded;
+          return (
+            <Link to={`/admin/products/${item.id}`}>
+              <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />
+            </Link>
+          );
         },
       },
     },
     {
       label: t('common.title'),
       name: 'name',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPricingTableExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{item.name}</Link>;
+        },
+      },
     },
     {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TPricingTableExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -115,6 +123,7 @@ function PricingTables() {
 
   return (
     <Table
+      hasRowLink
       durable={`__${listKey}__`}
       durableKeys={['page', 'rowsPerPage', 'searchText']}
       title={
@@ -135,12 +144,6 @@ function PricingTables() {
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TPricingTableExpanded;
-          startTransition(() => {
-            navigate(`/admin/products/${item.id}`);
-          });
-        },
       }}
       loading={loading}
       onChange={onTableChange}

package/src/pages/admin/products/products/index.tsx

@@ -5,13 +5,12 @@ import { Status, api, formatTime, usePaymentContext } from '@blocklet/payment-re
 import type { TProductExpanded } from '@blocklet/payment-types';
 import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import useBus from 'use-bus';
 
 import FilterToolbar from '../../../../components/filter-toolbar';
 import InfoCard from '../../../../components/info-card';
 import ProductActions from '../../../../components/product/actions';
-import { useTransitionContext } from '../../../../components/progress-bar';
 import Table from '../../../../components/table';
 import { formatProductPrice } from '../../../../libs/util';
 
@@ -34,8 +33,6 @@ export default function ProductsList() {
   const persisted = getDurableData(listKey);
 
   const { t, locale } = useLocaleContext();
-  const navigate = useNavigate();
-  const { startTransition } = useTransitionContext();
   const { settings } = usePaymentContext();
   const [search, setSearch] = useState<{ active: string; pageSize: number; page: any; q?: any; o?: any }>({
     active: '',
@@ -67,13 +64,15 @@ export default function ProductsList() {
       options: {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
-          const product = data.list[index] as TProductExpanded;
+          const item = data.list[index] as TProductExpanded;
           return (
-            <InfoCard
-              name={product.name}
-              description={formatProductPrice(product as any, settings.baseCurrency, locale)}
-              logo={product.images[0]}
-            />
+            <Link to={`/admin/products/${item.id}`}>
+              <InfoCard
+                name={item.name}
+                description={formatProductPrice(item as any, settings.baseCurrency, locale)}
+                logo={item.images[0]}
+              />
+            </Link>
           );
         },
       },
@@ -84,8 +83,12 @@ export default function ProductsList() {
       options: {
         filter: true,
         customBodyRenderLite: (_: string, index: number) => {
-          const item = data.list[index];
-          return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;
+          const item = data.list[index] as TProductExpanded;
+          return (
+            <Link to={`/admin/products/${item.id}`}>
+              <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />
+            </Link>
+          );
         },
       },
     },
@@ -94,8 +97,9 @@ export default function ProductsList() {
       name: 'created_at',
       options: {
         sort: true,
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TProductExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{formatTime(item.created_at)}</Link>;
         },
       },
     },
@@ -103,8 +107,10 @@ export default function ProductsList() {
       label: t('common.updatedAt'),
       name: 'updated_at',
       options: {
-        customBodyRender: (e: string) => {
-          return formatTime(e);
+        sort: true,
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = data.list[index] as TProductExpanded;
+          return <Link to={`/admin/products/${item.id}`}>{formatTime(item.updated_at)}</Link>;
         },
       },
     },
@@ -133,6 +139,7 @@ export default function ProductsList() {
 
   return (
     <Table
+      hasRowLink
       durable={`__${listKey}__`}
       durableKeys={['page', 'rowsPerPage', 'searchText']}
       title={<FilterToolbar setSearch={setSearch} search={search} status={['active', 'archived']} />}
@@ -168,12 +175,6 @@ export default function ProductsList() {
             });
           }
         },
-        onRowClick: (_: any, { dataIndex }: any) => {
-          const item = data.list[dataIndex] as TProductExpanded;
-          startTransition(() => {
-            navigate(`/admin/products/${item.id}`);
-          });
-        },
       }}
       loading={!data.list}
       onChange={onTableChange}