payment-kit 1.13.161 → 1.13.162

package/src/components/payment-link/product-select.tsx

@@ -25,49 +25,68 @@ const filterProducts = (products: TProductExpanded[], hasSelected: (price: any)
   return filtered.filter((x) => x.prices.length);
 };
 
-export default function ProductSelect({ mode: initialMode, hasSelected, onSelect }: Props) {
-  const { t } = useLocaleContext();
+export function FilterProducts({ hasSelected, onSelect }: any) {
+  const size = { width: 16, height: 16 };
   const { products } = useProductsContext();
   const { settings } = usePaymentContext();
-  const [mode, setMode] = useState(initialMode);
 
+  return (
+    <>
+      {filterProducts(products, hasSelected).map((product) => [
+        <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
+          <Stack direction="row" alignItems="center" spacing={0.5}>
+            {product.images[0] ? (
+              <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />
+            ) : (
+              <Avatar variant="square" sx={size}>
+                {product.name.slice(0, 1)}
+              </Avatar>
+            )}
+            <Typography component="span">{product.name}</Typography>
+          </Stack>
+        </ListSubheader>,
+        ...product.prices.map((price) => (
+          <MenuItem
+            key={price.id}
+            sx={{ pl: 4.5 }}
+            value={price.id}
+            onClick={() => {
+              if (onSelect) {
+                const wrapPrice: any = price;
+                wrapPrice.productName = product.name;
+                wrapPrice.displayPrice = formatPrice(price, settings.baseCurrency);
+                onSelect(wrapPrice);
+              }
+            }}>
+            <Typography color="text.primary">{formatPrice(price, settings.baseCurrency)}</Typography>
+            <Typography color="text.secondary" sx={{ ml: 2 }}>
+              {getPriceCurrencyOptions(price).length > 1
+                ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`
+                : ''}
+            </Typography>
+          </MenuItem>
+        )),
+      ])}
+    </>
+  );
+}
+
+export default function ProductSelect({ mode: initialMode, hasSelected, onSelect }: Props) {
+  const { t } = useLocaleContext();
+  const [mode, setMode] = useState(initialMode);
   const handleSelect = (e: any) => {
     setMode('waiting');
     onSelect(e.target.value);
   };
 
   if (mode === 'selecting') {
-    const size = { width: 16, height: 16 };
     return (
       <Select value="" fullWidth size="small" onChange={handleSelect} MenuProps={{ style: { maxHeight: 480 } }}>
         <MenuItem value="add">
           <AddOutlined />
           {t('admin.product.add')}
         </MenuItem>
-        {filterProducts(products, hasSelected).map((product) => [
-          <ListSubheader key={product.id} sx={{ fontSize: '1rem', color: 'text.secondary', lineHeight: '2.5rem' }}>
-            <Stack direction="row" alignItems="center" spacing={0.5}>
-              {product.images[0] ? (
-                <Avatar src={product.images[0]} alt={product.name} variant="square" sx={size} />
-              ) : (
-                <Avatar variant="square" sx={size}>
-                  {product.name.slice(0, 1)}
-                </Avatar>
-              )}
-              <Typography component="span">{product.name}</Typography>
-            </Stack>
-          </ListSubheader>,
-          ...product.prices.map((price) => (
-            <MenuItem key={price.id} sx={{ pl: 4.5 }} value={price.id}>
-              <Typography color="text.primary">{formatPrice(price, settings.baseCurrency)}</Typography>
-              <Typography color="text.secondary" sx={{ ml: 2 }}>
-                {getPriceCurrencyOptions(price).length > 1
-                  ? ` +${getPriceCurrencyOptions(price).length - 1} more currencies`
-                  : ''}
-              </Typography>
-            </MenuItem>
-          )),
-        ])}
+        <FilterProducts hasSelected={hasSelected} />
       </Select>
     );
   }

package/src/components/refund/list.tsx

@@ -3,31 +3,39 @@ 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 { TRefundExpanded } from '@blocklet/payment-types';
-import { Alert, CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { CircularProgress, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
-import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
+import FilterTooolbar from '../filter-toolbar';
 import Table from '../table';
 import RefundActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TRefundExpanded[]; 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(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
   });
   return api.get(`/api/refunds?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
-  status: string;
+  status?: string;
   pageSize: number;
   page: number;
   customer_id?: string;
   invoice_id?: string;
   subscription_id?: string;
+  q?: Record<string, string>;
+  o?: string;
 };
 
 type ListProps = {
@@ -78,16 +86,18 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
     page: persisted.page ? persisted.page + 1 : 1,
   });
 
-  const { loading, error, data, refresh } = useRequest(() => fetchData(search));
+  const [data, setData] = useState({}) as any;
+
+  const refresh = () =>
+    fetchData(search).then((res: any) => {
+      setData(res);
+    });
+
   useEffect(() => {
     refresh();
-  }, [search, refresh]);
+  }, [search]);
 
-  if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
-  }
-
-  if (loading || !data) {
+  if (!data.list) {
     return <CircularProgress />;
   }
 
@@ -135,6 +145,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -179,7 +190,7 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
       durableKeys={['page', 'rowsPerPage']}
       data={data.list}
       columns={columns}
-      loading={loading}
+      loading={!data.list}
       onChange={onTableChange}
       options={{
         count: data.count,
@@ -189,23 +200,38 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
           const item = data.list[dataIndex] as TRefundExpanded;
           navigate(`/admin/payments/${item.id}`);
         },
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
+        },
+        onSearchChange: (text: string) => {
+          if (text) {
+            setSearch({
+              q: {
+                'like-description': text,
+                'like-metadata': text,
+              },
+              status: '',
+              pageSize: 100,
+              page: 1,
+            });
+          } else {
+            setSearch({
+              status: '',
+              customer_id,
+              invoice_id,
+              pageSize: 100,
+              page: 1,
+            });
+          }
+        },
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}
-      title={
-        <div className="table-toolbar-left">
-          <ToggleButtonGroup
-            value={search.status}
-            onChange={(_, value) => setSearch((x) => ({ ...x, status: value }))}
-            exclusive>
-            <ToggleButton value="">All</ToggleButton>
-            <ToggleButton value="succeeded">Succeeded</ToggleButton>
-            <ToggleButton value="canceled">Canceled</ToggleButton>
-            <ToggleButton value="pending,requires_action">Pending</ToggleButton>
-            <ToggleButton value="failed">Failed</ToggleButton>
-          </ToggleButtonGroup>
-        </div>
-      }
+      title={<FilterTooolbar setSearch={setSearch} search={search} status={['successed']} currency />}
     />
   );
 }

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

@@ -46,6 +46,7 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       label: t('common.createdAt'),
       name: 'id',
       options: {
+        sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TUsageRecord;
           return formatToDatetime(item.timestamp * 1000);

package/src/components/subscription/list.tsx

@@ -3,12 +3,12 @@ import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime } from '@blocklet/payment-react';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-import { CircularProgress, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { CircularProgress } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
+import FilterTooolbar from '../filter-toolbar';
 import Table from '../table';
 import SubscriptionActions from './actions';
 import SubscriptionDescription from './description';
@@ -19,15 +19,13 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscript
   Object.keys(params).forEach((key) => {
     let v = params[key];
     if (key === 'q') {
-      v = Object.entries(params[key])
+      v = Object.entries(v)
         .map((x) => x.join(':'))
         .join(' ');
     }
     search.set(key, String(v));
   });
-  return params.q
-    ? api.get(`api/subscriptions/search?${search.toString()}`).then((res) => res.data)
-    : api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
+  return api.get(`/api/subscriptions?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
@@ -36,6 +34,7 @@ type SearchProps = {
   page: number;
   customer_id?: string;
   q?: any;
+  o?: string;
 };
 
 type ListProps = {
@@ -86,7 +85,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
     });
 
   useEffect(() => {
-    debounce(refresh, 1000)();
+    refresh();
   }, [search]);
 
   if (!data.list) {
@@ -134,6 +133,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -193,35 +193,19 @@ 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,
-            });
-          }
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
         },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
               q: {
                 'like-metadata': text,
-                'like-did': text,
-                'like-name': text,
-                // 'like-product-name': text, // 这个还没实现
+                'like-description': text,
               },
               pageSize: 100,
               page: 1,
@@ -238,20 +222,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}
-      title={
-        <div className="table-toolbar-left">
-          <ToggleButtonGroup
-            value={search.status}
-            onChange={(_, value) => setSearch((x) => ({ ...x, status: value }))}
-            exclusive>
-            <ToggleButton value="active">Active</ToggleButton>
-            <ToggleButton value="trialing">Scheduled</ToggleButton>
-            <ToggleButton value="canceled">Canceled</ToggleButton>
-            <ToggleButton value="incomplete,incomplete_expired">Incomplete</ToggleButton>
-            <ToggleButton value="past_due,unpaid">Due</ToggleButton>
-          </ToggleButtonGroup>
-        </div>
-      }
+      title={<FilterTooolbar setSearch={setSearch} search={search} status={['active', 'canceled']} />}
     />
   );
 }

package/src/components/table.tsx

@@ -14,12 +14,13 @@ export default function Table({ options, columns, toolbar = true, footer = true,
   const defaultOptions = {
     print: false,
     download: false,
-    filter: true,
+    filter: false,
     selectableRows: 'none',
     rowsPerPage: 10,
     rowsPerPageOptions: [10, 20, 50, 100],
     searchDebounceTime: 300,
     tableBodyHeight: '100%',
+    loading: true,
   };
 
   const components: any = {};
@@ -30,6 +31,8 @@ export default function Table({ options, columns, toolbar = true, footer = true,
     components.TableFooter = EmptyStub;
   }
 
+  // components.TableHead = EmptyStub2
+
   return (
     <Wrapped
       locale={locale}
@@ -64,6 +67,15 @@ const Wrapped = styled(Datatable)`
     overflow: visible;
   }
 
+  .custom-toobar-title-inner span {
+    overflow: visible !important;
+  }
+
+  .custom-toobar-title-inner {
+    line-height: 30px !important;
+    padding: 10px 0;
+  }
+
   ${(props) => {
     if (props.isMobile) {
       return '';

package/src/global.css

@@ -44,7 +44,7 @@ a:hover {
 .MuiFormLabel-root {
   color: rgba(0, 0, 0, 0.8);
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   font-weight: 500;
 }
 

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

@@ -9,22 +9,19 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Table from '../../../../components/table';
-import { debounce } from '../../../../libs/util';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     let v = params[key];
     if (key === 'q') {
-      v = Object.entries(params[key])
+      v = Object.entries(v)
         .map((x) => x.join(':'))
         .join(' ');
     }
     search.set(key, String(v));
   });
-  return params.q
-    ? api.get(`api/customers/search?${search.toString()}`).then((res) => res.data)
-    : api.get(`/api/customers?${search.toString()}`).then((res) => res.data);
+  return api.get(`/api/customers?${search.toString()}`).then((res: any) => res.data);
 };
 
 export default function CustomersList() {
@@ -33,8 +30,9 @@ export default function CustomersList() {
 
   const { t } = useLocaleContext();
   const navigate = useNavigate();
-  const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any }>({
+  const [search, setSearch] = useState<{ active?: string; pageSize: number; page: number; q?: any; o?: string }>({
     active: '',
+    o: 'desc',
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
   });
@@ -47,7 +45,7 @@ export default function CustomersList() {
     });
 
   useEffect(() => {
-    debounce(refresh, 1000)();
+    refresh();
   }, [search]);
 
   if (!data.list) {
@@ -92,6 +90,7 @@ export default function CustomersList() {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -121,7 +120,13 @@ export default function CustomersList() {
           const item = data.list[dataIndex] as TCustomer;
           navigate(`/admin/customers/${item.id}`);
         },
-
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
+        },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
@@ -129,6 +134,8 @@ export default function CustomersList() {
                 'like-name': text,
                 'like-email': text,
                 'like-did': text,
+                'like-metadata': text,
+                'like-phone': text,
               },
               pageSize: 100,
               page: 1,

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

@@ -97,6 +97,7 @@ function PaymentLinks() {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },

package/src/pages/admin/products/prices/list.tsx

@@ -56,6 +56,7 @@ export default function PricesList({ product, onChange }: { product: Product; on
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },

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

@@ -84,6 +84,7 @@ function PricingTables() {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },

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

@@ -83,6 +83,7 @@ export default function ProductsList() {
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },

package/src/pages/customer/index.tsx

@@ -1,13 +1,7 @@
 import DID from '@arcblock/ux/lib/Address';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import {
-  CustomerInvoiceList,
-  CustomerPaymentList,
-  PaymentProvider,
-  formatError,
-  getPrefix,
-} from '@blocklet/payment-react';
+import { CustomerInvoiceList, PaymentProvider, formatError, getPrefix } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
@@ -117,12 +111,6 @@ export default function CustomerHome() {
               <CustomerInvoiceList customer_id={data.id} />
             </Box>
           </Box>
-          <Box className="section">
-            <SectionHeader title={t('payment.customer.payments')} mb={0} />
-            <Box className="section-body">
-              <CustomerPaymentList customer_id={data.id} />
-            </Box>
-          </Box>
         </Root>
       </Grid>
       <Grid item xs={12} md={4}>