payment-kit 1.13.161 → 1.13.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.161",
+  "version": "1.13.162",
   "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.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.161",
+    "@blocklet/payment-react": "1.13.162",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.39",
     "@blocklet/uploader": "^0.0.74",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.161",
+    "@blocklet/payment-types": "1.13.162",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "55cb16d9cd06b91b949a1a1c88b14670b0c1aca8"
+  "gitHead": "e11cae8972d35cde567d4784511aacd33a29c1bc"
 }

package/src/components/filter-toolbar.tsx

@@ -0,0 +1,375 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { api, usePaymentContext } from '@blocklet/payment-react';
+import type { TCustomer } from '@blocklet/payment-types';
+import { Add, Close } from '@mui/icons-material';
+import { Box, styled } from '@mui/system';
+import { useEffect, useState } from 'react';
+
+import { ProductsProvider } from '../contexts/products';
+import InfoCard from './info-card';
+import { FilterProducts } from './payment-link/product-select';
+
+const fetchUserData = (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(v)
+        .map((x) => x.join(':'))
+        .join(' ');
+    }
+    search.set(key, String(v));
+  });
+  return api.get(`api/customers?${search.toString()}`).then((res) => res.data);
+};
+
+const fetchSubscriptionItems = (params: Record<string, any> = {}): Promise<{ list: TCustomer[]; count: number }> => {
+  const search = new URLSearchParams();
+  Object.keys(params).forEach((key) => {
+    const v = params[key];
+    search.set(key, String(v));
+  });
+  return api.get(`api/subscription-items?${search.toString()}`).then((res) => res.data);
+};
+
+type Props = {
+  search?: Record<string, any>;
+  status?: string[];
+  currency?: boolean;
+  setSearch: (x: any) => void;
+};
+
+export default function FilterTooolbar(props: Props) {
+  const { setSearch, search, status, currency } = props;
+  const handleSearch = (obj: any) => {
+    setSearch({
+      ...search,
+      ...obj,
+    });
+  };
+
+  return (
+    <Root>
+      <div className="table-toolbar-left">
+        <SearchStatus setSearch={handleSearch} status={status} />
+        <SearchCustomers setSearch={handleSearch} />
+        {currency ? <SearchCurrency setSearch={handleSearch} /> : <SearchProducts setSearch={handleSearch} />}
+      </div>
+    </Root>
+  );
+}
+
+const defaultProps = {
+  search: {},
+  status: {},
+  currency: false,
+};
+
+FilterTooolbar.defaultProps = defaultProps;
+SearchStatus.defaultProps = defaultProps;
+SearchCurrency.defaultProps = defaultProps;
+SearchProducts.defaultProps = defaultProps;
+SearchCustomers.defaultProps = defaultProps;
+
+function SearchStatus({ status = [], setSearch }: Pick<Props, 'status' | 'setSearch'>) {
+  const [show, setShow] = useState(false);
+  const [display, setDisplay] = useState('');
+  const { t } = useLocaleContext();
+  return (
+    <section
+      onClick={() => {
+        setShow(!show);
+      }}>
+      <div className="option-btn">
+        {display ? (
+          <Close
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSearch({
+                status: '',
+              });
+              setDisplay('');
+            }}
+          />
+        ) : (
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+        )}
+        {t('common.status')}
+        <span>{display}</span>
+      </div>
+      <ul className="status-options" style={{ display: show ? 'block' : 'none' }}>
+        {status.map((x: any) => (
+          <li
+            onClick={() => {
+              setSearch({
+                status: x,
+              });
+              setDisplay(x);
+            }}
+            key={x}>
+            {x}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function filterCurrency(methods: any) {
+  const out: any = {};
+  methods.forEach((m: any) => {
+    const currencies = m.payment_currencies;
+    currencies.forEach((c: any) => {
+      out[c.symbol] = c.id;
+    });
+  });
+  return out;
+}
+
+function SearchCurrency({ setSearch }: Pick<Props, 'setSearch'>) {
+  const [show, setShow] = useState(false);
+  const [display, setDisplay] = useState('');
+  const { settings } = usePaymentContext();
+  const currencies = filterCurrency(settings.paymentMethods);
+  const { t } = useLocaleContext();
+
+  return (
+    <section
+      onClick={() => {
+        setShow(!show);
+      }}>
+      <div className="option-btn">
+        {display ? (
+          <Close
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSearch({
+                currency_id: '',
+              });
+              setDisplay('');
+            }}
+          />
+        ) : (
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+        )}
+        {t('common.currency')}
+        <span>{display}</span>
+      </div>
+      <ul className="status-options" style={{ display: show ? 'block' : 'none' }}>
+        {Object.keys(currencies).map((k: any) => (
+          <li
+            onClick={() => {
+              setSearch({
+                currency_id: currencies[k],
+              });
+              setDisplay(k);
+            }}
+            key={k}>
+            {k}
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
+  const [customers, setCustomers] = useState([]);
+  const [show, setShow] = useState(false);
+  const [text, setText] = useState('');
+  const [display, setDisplay] = useState('');
+  const { t } = useLocaleContext();
+
+  useEffect(() => {
+    fetchUserData({
+      q: {
+        'like-name': text,
+        'like-email': text,
+        'like-did': text,
+        'like-metadata': text,
+        'like-phone': text,
+      },
+      page: 1,
+      pageSize: 100,
+    }).then((data: any) => {
+      setCustomers(data.list);
+    });
+  }, [text]);
+
+  return (
+    <section onClick={() => setShow(!show)}>
+      <div className="option-btn">
+        {display ? (
+          <Close
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSearch({
+                customer_id: '',
+              });
+              setDisplay('');
+            }}
+          />
+        ) : (
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+        )}
+        {t('common.customer')}
+        <span>{display}</span>
+      </div>
+      <ul className="status-options" style={{ display: show ? 'block' : 'none' }} onClick={(e) => e.stopPropagation()}>
+        <input
+          type="text"
+          placeholder="search customers"
+          onChange={(e) => {
+            setText(e.target.value);
+          }}
+        />
+        {customers.map((x: any) => (
+          <li
+            key={x.id}
+            onClick={() => {
+              setSearch({
+                customer_id: x.id,
+              });
+              setDisplay(x.name);
+            }}>
+            <InfoCard
+              logo={`/.well-known/service/user/avatar/${x.did}?imageFilter=resize&w=48&h=48`}
+              name={x.email}
+              key={x.id}
+              description={`${x.did.slice(0, 6)}...${x.did.slice(-6)}`}
+            />
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}
+
+function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
+  const [show, setShow] = useState(false);
+  const [price, setPrice] = useState({} as any);
+  const [display, setDisplay] = useState('');
+  const isSubscription = window.location.pathname.includes('subscriptions');
+  const { t } = useLocaleContext();
+
+  useEffect(() => {
+    if (!price.id) {
+      return;
+    }
+    fetchSubscriptionItems({
+      price_id: price.id,
+    }).then((data) => {
+      const str = data.list.map((x: any) => x.subscription_id).join(',');
+      const key = isSubscription ? 'id' : 'subscription_id';
+      setSearch({
+        q: {
+          [key]: str,
+        },
+        page: 1,
+        pageSize: 100,
+      });
+    });
+  }, [price]);
+
+  return (
+    <section onClick={() => setShow(!show)}>
+      <div className="option-btn">
+        {display ? (
+          <Close
+            sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setSearch({
+                q: '',
+              });
+              setDisplay('');
+            }}
+          />
+        ) : (
+          <Add sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.2rem' }} />
+        )}
+        {t('admin.subscription.product')}
+        <span>{display}</span>
+      </div>
+      <ul className="status-options" style={{ display: show ? 'block' : 'none' }} onClick={(e) => e.stopPropagation()}>
+        <ProductsProvider>
+          <FilterProducts
+            hasSelected={() => false}
+            onSelect={(p: any) => {
+              setPrice(p);
+              setDisplay(`${p.productName}(${p.displayPrice})`);
+            }}
+          />
+        </ProductsProvider>
+      </ul>
+    </section>
+  );
+}
+
+const Root = styled(Box)`
+  .table-toolbar-left {
+    display: flex;
+    align-items: cneter;
+  }
+
+  .table-toolbar-left section {
+    position: relative;
+    list-style: none;
+    font-size: 14px;
+    font-weight: normal;
+    padding: 0 5px;
+    cursor: pointer;
+  }
+
+  .option-btn {
+    display: flex;
+    align-items: center;
+    border-radius: 25px;
+    background: #f6f6f6;
+    padding: 0 10px;
+  }
+
+  .option-btn span {
+    color: #3773f2;
+    padding: 0 3px;
+  }
+
+  .custom-toobar-title-inner {
+    line-height: normal;
+  }
+
+  .status-options {
+    position: absolute;
+    padding: 10px;
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 5px;
+    z-index: 999999;
+    top: 25px;
+    display: block;
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .status-options input {
+    width: 100%;
+    border: 1px solid #eee;
+    padding: 5px 10px;
+    border-radius: 20px;
+    margin-bottom: 10px;
+  }
+
+  .status-options li {
+    list-style: none;
+    padding: 5px;
+    line-height: normal;
+  }
+
+  .custom-toobar-title-inner span {
+    overflow: auto;
+  }
+`;

package/src/components/invoice/list.tsx

@@ -3,13 +3,13 @@ import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { Status, api, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
-import { CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { CircularProgress, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 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 InvoiceActions from './action';
 
@@ -18,15 +18,13 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TInvoiceEx
   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/invoices/search?${search.toString()}`).then((res) => res.data)
-    : api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
+  return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
@@ -36,6 +34,7 @@ type SearchProps = {
   customer_id?: string;
   subscription_id?: string;
   q?: any;
+  o?: string;
 };
 
 type ListProps = {
@@ -69,7 +68,6 @@ const getListKey = (props: ListProps) => {
 InvoiceList.defaultProps = {
   features: {
     customer: true,
-    filter: true,
   },
   customer_id: '',
   subscription_id: '',
@@ -102,7 +100,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
     });
 
   useEffect(() => {
-    debounce(refresh, 1000)();
+    refresh();
   }, [search]);
 
   if (!data.list) {
@@ -131,7 +129,6 @@ 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)} />;
@@ -146,7 +143,6 @@ 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;
@@ -166,6 +162,8 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
+        responsive: 'vertical',
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -193,7 +191,6 @@ 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} />;
@@ -231,34 +228,19 @@ 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,
-            });
-          }
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
         },
         onSearchChange: (text: string) => {
           if (text) {
             setSearch({
               q: {
-                'like-did': text,
-                'like-name': text,
+                'like-description': text,
+                'like-metadata': text,
                 'like-number': text,
               },
               pageSize: 100,
@@ -278,18 +260,7 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       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="draft">Draft</ToggleButton>
-            <ToggleButton value="uncollectible">Outstanding</ToggleButton>
-            <ToggleButton value="open">Past Due</ToggleButton>
-            <ToggleButton value="paid">Paid</ToggleButton>
-          </ToggleButtonGroup>
-        </div>
+        <FilterTooolbar setSearch={setSearch} search={search} status={['paid', 'open', 'uncollectible']} currency />
       }
     />
   );

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

@@ -3,13 +3,14 @@ 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 { CircularProgress, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { CircularProgress, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 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 PaymentIntentActions from './actions';
 
@@ -18,15 +19,13 @@ const fetchData = (params: Record<string, any> = {}): Promise<{ list: TPaymentIn
   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/payment-intents/search?${search.toString()}`).then((res) => res.data)
-    : api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
+  return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
 };
 
 type SearchProps = {
@@ -36,6 +35,7 @@ type SearchProps = {
   customer_id?: string;
   invoice_id?: string;
   q?: any;
+  o?: any;
 };
 
 type ListProps = {
@@ -142,6 +142,8 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       label: t('common.createdAt'),
       name: 'created_at',
       options: {
+        sort: true,
+        filterType: 'dropdown',
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -193,34 +195,12 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
         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-did': text,
-                'like-name': text,
+                'like-description': text,
+                'like-metadata': text,
               },
               pageSize: 100,
               page: 1,
@@ -235,6 +215,13 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
             });
           }
         },
+        onColumnSortChange(_: any, order: any) {
+          setSearch({
+            ...search,
+            q: search.q || {},
+            o: order,
+          });
+        },
         onRowClick: (_: any, { dataIndex }: any) => {
           const item = data.list[dataIndex] as TPaymentIntentExpanded;
           navigate(`/admin/payments/${item.id}`);
@@ -243,18 +230,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       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="requires_capture">Uncaptured</ToggleButton>
-            <ToggleButton value="requires_action,requires_confirmation,requires_payment_method">Failed</ToggleButton>
-          </ToggleButtonGroup>
-        </div>
+        <FilterTooolbar setSearch={setSearch} search={search} status={['succeeded', 'requires_action']} currency />
       }
     />
   );