payment-kit 1.13.141 → 1.13.142

package/api/src/libs/api.ts

@@ -70,3 +70,25 @@ export function getWhereFromQuery(query: string) {
   const parsed = parser.parse(query);
   return handleCondition(parsed);
 }
+
+export const getWhereFromKvQuery = (query: string) => {
+  const out: any = {};
+  const likes: any = [];
+  query.split(' ').forEach((kv: string) => {
+    const [k, v] = kv.split(':');
+    if (v) {
+      let value = decodeURIComponent(v).replace('+', ' ');
+      if ((k as any).indexOf('like') > -1) {
+        // like
+        value = { [k?.slice(5) as any]: { [Op.like]: `%${v}%` } } as any;
+        likes.push(value);
+      } else {
+        out[k as string] = value;
+      }
+    }
+  });
+  if (likes.length > 0) {
+    out[Op.or] = likes;
+  }
+  return out;
+};

package/api/src/routes/customers.ts

@@ -4,7 +4,7 @@ import Joi from 'joi';
 import pick from 'lodash/pick';
 import type { WhereOptions } from 'sequelize';
 
-import { getWhereFromQuery } from '../libs/api';
+import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { formatMetadata } from '../libs/util';
 import { Customer } from '../store/models/customer';
@@ -65,19 +65,21 @@ const searchSchema = Joi.object<{
   pageSize: number;
   query: string;
   livemode?: boolean;
+  q?: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   query: Joi.string(),
   livemode: Joi.boolean().empty(''),
+  q: Joi.string(),
 });
 router.get('/search', auth, async (req, res) => {
-  const { page, pageSize, query, livemode } = await searchSchema.validateAsync(req.query, {
+  const { page, pageSize, query, livemode, q } = await searchSchema.validateAsync(req.query, {
     stripUnknown: false,
     allowUnknown: true,
   });
 
-  const where = getWhereFromQuery(query);
+  const where = q ? getWhereFromKvQuery(q) : getWhereFromQuery(query);
   if (typeof livemode === 'boolean') {
     where.livemode = livemode;
   }

package/api/src/routes/invoices.ts

@@ -4,6 +4,7 @@ import Joi from 'joi';
 import type { WhereOptions } from 'sequelize';
 
 import { syncStripeInvoice } from '../integrations/stripe/handlers/invoice';
+import { getWhereFromKvQuery } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { expandLineItems } from '../libs/session';
 import { Customer } from '../store/models/customer';
@@ -106,6 +107,42 @@ router.get('/', authMine, async (req, res) => {
   }
 });
 
+const searchSchema = Joi.object<{
+  page: number;
+  pageSize: number;
+  livemode?: boolean;
+  q: string;
+}>({
+  page: Joi.number().integer().min(1).default(1),
+  pageSize: Joi.number().integer().min(1).max(100).default(20),
+  livemode: Joi.boolean().empty(''),
+  q: Joi.string(),
+});
+router.get('/search', authMine, async (req, res) => {
+  const { page, pageSize, livemode, q } = await searchSchema.validateAsync(req.query, {
+    stripUnknown: false,
+    allowUnknown: true,
+  });
+
+  const where = getWhereFromKvQuery(q);
+  if (typeof livemode === 'boolean') {
+    where.livemode = livemode;
+  }
+
+  const { rows: list, count } = await Invoice.findAndCountAll({
+    where,
+    order: [['created_at', 'DESC']],
+    offset: (page - 1) * pageSize,
+    limit: pageSize,
+    include: [
+      { model: PaymentCurrency, as: 'paymentCurrency' },
+      { model: Customer, as: 'customer' },
+    ],
+  });
+
+  res.json({ count, list });
+});
+
 router.get('/:id', authPortal, async (req, res) => {
   try {
     const doc = await Invoice.findOne({

package/api/src/routes/payment-intents.ts

@@ -4,7 +4,7 @@ import Joi from 'joi';
 import type { WhereOptions } from 'sequelize';
 
 import { syncStripPayment } from '../integrations/stripe/handlers/payment-intent';
-import { getWhereFromQuery } from '../libs/api';
+import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { CheckoutSession } from '../store/models/checkout-session';
 import { Customer } from '../store/models/customer';
@@ -109,23 +109,26 @@ const searchSchema = Joi.object<{
   pageSize: number;
   query: string;
   livemode?: boolean;
+  q?: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   query: Joi.string(),
   livemode: Joi.boolean().empty(''),
+  q: Joi.string(),
 });
 router.get('/search', authMine, async (req, res) => {
-  const { page, pageSize, query, livemode } = await searchSchema.validateAsync(req.query, {
+  const { page, pageSize, query, livemode, q } = await searchSchema.validateAsync(req.query, {
     stripUnknown: false,
     allowUnknown: true,
   });
 
-  const where = getWhereFromQuery(query);
+  const where = q ? getWhereFromKvQuery(q) : getWhereFromQuery(query);
   if (typeof livemode === 'boolean') {
     where.livemode = livemode;
   }
-  const { rows: list, count } = await Subscription.findAndCountAll({
+
+  const { rows: list, count } = await PaymentIntent.findAndCountAll({
     where,
     order: [['created_at', 'DESC']],
     offset: (page - 1) * pageSize,

package/api/src/routes/products.ts

@@ -4,7 +4,7 @@ import Joi from 'joi';
 import pick from 'lodash/pick';
 import type { WhereOptions } from 'sequelize';
 
-import { getWhereFromQuery } from '../libs/api';
+import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import logger from '../libs/logger';
 import { authenticate } from '../libs/security';
 import { formatMetadata } from '../libs/util';
@@ -167,19 +167,21 @@ const searchSchema = Joi.object<{
   pageSize: number;
   query: string;
   livemode?: boolean;
+  q?: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   query: Joi.string(),
   livemode: Joi.boolean().empty(''),
+  q: Joi.string(),
 });
 router.get('/search', auth, async (req, res) => {
-  const { page, pageSize, query, livemode } = await searchSchema.validateAsync(req.query, {
+  const { page, pageSize, query, livemode, q } = await searchSchema.validateAsync(req.query, {
     stripUnknown: false,
     allowUnknown: true,
   });
 
-  const where = getWhereFromQuery(query);
+  const where = q ? getWhereFromKvQuery(q) : getWhereFromQuery(query);
   if (typeof livemode === 'boolean') {
     where.livemode = livemode;
   }

package/api/src/routes/subscriptions.ts

@@ -6,7 +6,7 @@ import pick from 'lodash/pick';
 import uniq from 'lodash/uniq';
 import type { WhereOptions } from 'sequelize';
 
-import { getWhereFromQuery } from '../libs/api';
+import { getWhereFromKvQuery, getWhereFromQuery } from '../libs/api';
 import dayjs from '../libs/dayjs';
 import logger from '../libs/logger';
 import { isDelegationSufficientForPayment } from '../libs/payment';
@@ -143,19 +143,21 @@ const searchSchema = Joi.object<{
   pageSize: number;
   query: string;
   livemode?: boolean;
+  q?: string;
 }>({
   page: Joi.number().integer().min(1).default(1),
   pageSize: Joi.number().integer().min(1).max(100).default(20),
   query: Joi.string(),
   livemode: Joi.boolean().empty(''),
+  q: Joi.string(),
 });
 router.get('/search', auth, async (req, res) => {
-  const { page, pageSize, query, livemode } = await searchSchema.validateAsync(req.query, {
+  const { page, pageSize, query, livemode, q } = await searchSchema.validateAsync(req.query, {
     stripUnknown: false,
     allowUnknown: true,
   });
 
-  const where = getWhereFromQuery(query);
+  const where = q ? getWhereFromKvQuery(q) : getWhereFromQuery(query);
   if (typeof livemode === 'boolean') {
     where.livemode = livemode;
   }

package/api/tests/libs/util.spec.ts

@@ -1,13 +1,17 @@
+import { Op } from 'sequelize';
 import dayjs from '../../src/libs/dayjs';
 import {
   createCodeGenerator,
   createIdGenerator,
   formatMetadata,
   getDataObjectFromQuery,
+
   getNextRetry,
   tryWithTimeout,
 } from '../../src/libs/util';
 
+import { getWhereFromKvQuery } from '../../src/libs/api'
+
 describe('createIdGenerator', () => {
   it('should return a function that generates an ID with the specified prefix and size', () => {
     const generateId = createIdGenerator('test', 10);
@@ -175,3 +179,30 @@ describe('getDataObjectFromQuery', () => {
     });
   });
 });
+
+describe('getWhereFromKvQuery', () => {
+  it('should return an empty object when the q string is empty', () => {
+    const result = getWhereFromKvQuery('');
+    expect(result).toEqual({});
+  });
+
+  it('should return a common object when the q string without like', () => {
+    const q = 'status:succeeded xxx:yyy';
+    const result = getWhereFromKvQuery(q);
+    expect(result).toEqual({
+      status: 'succeeded',
+      xxx: 'yyy',
+    });
+  });
+
+  it('should return a likes object when the q string with like', () => {
+    const q = 'like-status:succ like-email:1533';
+    const result = getWhereFromKvQuery(q);
+    expect(result).toEqual({
+      [Op.or]: [
+        { status: { [Op.like]: `%succ%` } },
+        { email: { [Op.like]: `%1533%` } }
+      ],
+    });
+  });
+});

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.141",
+  "version": "1.13.142",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.29",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.141",
+    "@blocklet/payment-react": "1.13.142",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.29",
     "@blocklet/uploader": "^0.0.73",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.141",
+    "@blocklet/payment-types": "1.13.142",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "1ba6793cbc8e55e7164997697058bff996a53b05"
+  "gitHead": "99dfea2fee995b1a5a086675119585a8f23eed0a"
 }

package/src/components/invoice/list.tsx

@@ -16,17 +16,26 @@ import InvoiceActions from './action';
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(params[key])
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
-  return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
+  return params.q
+    ? api.get(`api/invoices/search?${search.toString()}`).then((res) => res.data)
+    : api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
-  status: string;
+  status?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
   subscription_id?: string;
+  q?: any;
 };
 
 type ListProps = {
@@ -121,6 +130,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       name: 'status',
       width: 60,
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />;
@@ -135,6 +145,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       label: t('common.description'),
       name: 'description',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index];
           return item?.description || item?.id;
@@ -181,6 +192,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       name: 'customer_id',
       width: 60,
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return <CustomerLink customer={item.customer} />;
@@ -218,6 +230,49 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
             navigate(`/admin/billing/${item.id}`);
           }
         },
+        onFilterChange: (key: any, filterList: any, type: any, index: number) => {
+          if (type === 'reset') {
+            setSearch({
+              status: '',
+              customer_id,
+              subscription_id,
+              pageSize: 100,
+              page: 1,
+            });
+          } else if (filterList && filterList[index]) {
+            // 这里暂时没有更好的取值方式
+            const value = filterList[index][0];
+            setSearch({
+              q: {
+                ...search.q,
+                [key]: encodeURIComponent(value),
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-status': text,
+                'like-customer_email': text,
+                'like-description': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              status: '',
+              customer_id,
+              subscription_id,
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}

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

@@ -3,9 +3,8 @@ import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, getPaymentIntentStatusColor } from '@blocklet/payment-react';
 import type { TPaymentIntentExpanded } from '@blocklet/payment-types';
-import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
-import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -16,17 +15,26 @@ import PaymentIntentActions from './actions';
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentIntentExpanded[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(params[key])
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
-  return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
+  return params.q
+    ? api.get(`api/payment-intents/search?${search.toString()}`).then((res) => res.data)
+    : api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
-  status: string;
+  status?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
   invoice_id?: string;
+  q?: any;
 };
 
 type ListProps = {
@@ -74,16 +82,15 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     page: persisted.page ? persisted.page + 1 : 1,
   });
 
-  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
-  useEffect(() => {
-    refresh();
-  }, [search, refresh]);
+  const [data, setData] = useState({}) as any;
 
-  if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
+  useEffect(() => {
+    fetchData(search).then((res: any) => {
+      setData(res);
+    });
+  }, [search]);
 
-  if (loading || !data) {
+  if (!data) {
     return <CircularProgress />;
   }
 
@@ -121,6 +128,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       label: t('common.description'),
       name: 'description',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return item.description || item.id;
@@ -153,11 +161,12 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       label: t('common.customer'),
       name: 'customer_id',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return <CustomerLink customer={item.customer} />;
         },
-      },
+      } as any,
     });
   }
 
@@ -173,14 +182,57 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     <Table
       durable={listKey}
       durableKeys={['page', 'rowsPerPage']}
-      data={data.list}
+      data={data.list || []}
       columns={columns}
-      loading={loading}
+      loading={!data}
       onChange={onTableChange}
       options={{
         count: data.count,
         page: search.page - 1,
         rowsPerPage: search.pageSize,
+        onFilterChange: (key: any, filterList: any, type: any, index: number) => {
+          if (type === 'reset') {
+            setSearch({
+              status: '',
+              customer_id,
+              invoice_id,
+              pageSize: 100,
+              page: 1,
+            });
+          } else if (filterList && filterList[index]) {
+            // 这里暂时没有更好的取值方式
+            const value = filterList[index][0];
+            setSearch({
+              q: {
+                ...search.q,
+                [key]: encodeURIComponent(value),
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-status': text,
+                'like-receipt_email': text,
+                'like-description': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              status: '',
+              customer_id,
+              invoice_id,
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPaymentIntentExpanded;
           navigate(`/admin/payments/${item.id}`);

package/src/components/subscription/description.tsx

@@ -1,9 +1,8 @@
+import { formatSubscriptionProduct } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
 import { Stack, Tooltip, Typography } from '@mui/material';
 
-import { formatSubscriptionProduct } from '../../libs/util';
-
 type Props = {
   subscription: TSubscriptionExpanded;
   variant?: 'body1' | 'h5';

package/src/components/subscription/items/usage-records.tsx

@@ -48,7 +48,7 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TUsageRecord;
-          return formatToDatetime(item.created_at);
+          return formatToDatetime(item.timestamp);
         },
       },
     },

package/src/components/subscription/list.tsx

@@ -17,16 +17,25 @@ import SubscriptionStatus from './status';
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscriptionExpanded[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(params[key])
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
-  return api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
+  return params.q
+    ? api.get(`api/subscriptions/search?${search.toString()}`).then((res) => res.data)
+    : api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
-  status: string;
+  status?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
+  q?: any;
 };
 
 type ListProps = {
@@ -97,6 +106,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       label: t('common.status'),
       name: 'status',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
           return <SubscriptionStatus subscription={item} />;
@@ -147,6 +157,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       label: t('common.customer'),
       name: 'customer_id',
       options: {
+        filter: true,
         // @ts-ignore
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
@@ -180,6 +191,47 @@ export default function SubscriptionList({ customer_id, features, status }: List
           const item = data.list[dataIndex] as TSubscriptionExpanded;
           navigate(`/admin/billing/${item.id}`);
         },
+        onFilterChange: (key: any, filterList: any, type: any, index: number) => {
+          if (type === 'reset') {
+            setSearch({
+              status: '',
+              customer_id,
+              pageSize: 100,
+              page: 1,
+            });
+          } else if (filterList && filterList[index]) {
+            // 这里暂时没有更好的取值方式
+            const value = filterList[index][0];
+            setSearch({
+              q: {
+                ...search.q,
+                [key]: encodeURIComponent(value),
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-status': text,
+                // 'like-receipt_email': text,
+                'like-description': text,
+              },
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              status: '',
+              customer_id,
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}

package/src/libs/util.ts

@@ -14,7 +14,6 @@ import type {
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
-  TSubscriptionItemExpanded,
 } from '@blocklet/payment-types';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
@@ -156,13 +155,6 @@ export function isPriceAligned(list: LineItem[], products: TProductExpanded[], i
   };
 }
 
-export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength = 2) {
-  const names = items.map((x) => x.price.product?.name).filter(Boolean);
-  return (
-    names.slice(0, maxLength).join(', ') + (names.length > maxLength ? ` and ${names.length - maxLength} more` : '')
-  );
-}
-
 export function groupPricingTableItems(items: any[]) {
   const grouped: { [key: string]: any[] } = {};
   items.forEach((x: any, index) => {

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { TxLink, api, formatError, formatTime } from '@blocklet/payment-react';
+import { TxLink, api, formatError, formatSubscriptionProduct, formatTime } from '@blocklet/payment-react';
 import type { TProduct, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -21,7 +21,6 @@ import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
 import SubscriptionMetrics from '../../../../components/subscription/metrics';
 import SubscriptionStatus from '../../../../components/subscription/status';
-import { formatSubscriptionProduct } from '../../../../libs/util';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);

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

@@ -14,9 +14,17 @@ import Table from '../../../../components/table';
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    let v = params[key];
+    if (key === 'q') {
+      v = Object.entries(params[key])
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
-  return api.get(`/api/customers?${search.toString()}`).then((res) => res.data);
+  return params.q
+    ? api.get(`api/customers/search?${search.toString()}`).then((res) => res.data)
+    : api.get(`/api/customers?${search.toString()}`).then((res) => res.data);
 };
 
 export default function CustomersList() {
@@ -25,7 +33,7 @@ export default function CustomersList() {
 
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-  const [search, setSearch] = useState<{ active: string; pageSize: number; page: number }>({
+  const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any }>({
     active: '',
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
@@ -111,6 +119,25 @@ export default function CustomersList() {
           const item = data.list[dataIndex] as TCustomer;
           navigate(`/admin/customers/${item.id}`);
         },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-name': text,
+                'like-email': text,
+              },
+              pageSize: 100,
+              page: 1,
+              active: '',
+            });
+          } else {
+            setSearch({
+              active: '',
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
       }}
       loading={loading}
       onChange={onTableChange}

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

@@ -55,6 +55,7 @@ export default function ProductsList() {
       label: t('admin.product.name.label'),
       name: 'name',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const product = data.list[index] as TProductExpanded;
           return (
@@ -71,6 +72,7 @@ export default function ProductsList() {
       label: t('common.status'),
       name: 'active',
       options: {
+        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index];
           return <Status label={item?.active ? 'Active' : 'Archived'} color={item?.active ? 'success' : 'default'} />;

package/src/pages/customer/invoice.tsx

@@ -43,7 +43,7 @@ export default function CustomerHome() {
           success: t('payment.customer.invoice.paySuccess'),
           error: t('payment.customer.invoice.payError'),
           confirm: '',
-        },
+        } as any,
         extraParams: { invoiceId: params.id },
         onSuccess: async () => {
           connectApi.close();

package/src/pages/customer/subscription/update.tsx

@@ -1,7 +1,14 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { PricingTable, api, formatError, formatPrice, formatTime } from '@blocklet/payment-react';
+import {
+  PricingTable,
+  api,
+  formatError,
+  formatPrice,
+  formatSubscriptionProduct,
+  formatTime,
+} from '@blocklet/payment-react';
 import type { TLineItemExpanded, TPricingTableExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { LoadingButton } from '@mui/lab';
@@ -14,7 +21,6 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import InfoCard from '../../../components/info-card';
 import SectionHeader from '../../../components/section/header';
 import { useSessionContext } from '../../../contexts/session';
-import { formatSubscriptionProduct } from '../../../libs/util';
 
 const fetchData = async (
   id: string
@@ -151,7 +157,7 @@ export default function CustomerSubscriptionUpdate() {
               success: t('payment.customer.upgrade.success'),
               error: t('payment.customer.upgrade.error'),
               confirm: '',
-            },
+            } as any,
             extraParams: { invoiceId: result.data.latest_invoice_id, subscriptionId: result.data.id },
             onSuccess: () => {
               setState({ paid: true, paying: false });