payment-kit 1.18.37 → 1.18.38

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.37",
+  "version": "1.18.38",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -45,30 +45,30 @@
   },
   "dependencies": {
     "@abtnode/cron": "^1.16.42",
-    "@arcblock/did": "^1.20.2",
+    "@arcblock/did": "^1.20.4",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.13",
-    "@arcblock/did-util": "^1.20.2",
-    "@arcblock/jwt": "^1.20.2",
-    "@arcblock/ux": "^2.13.13",
-    "@arcblock/validator": "^1.20.2",
+    "@arcblock/did-connect": "^2.13.18",
+    "@arcblock/did-util": "^1.20.4",
+    "@arcblock/jwt": "^1.20.4",
+    "@arcblock/ux": "^2.13.18",
+    "@arcblock/validator": "^1.20.4",
     "@blocklet/did-space-js": "^1.0.48",
     "@blocklet/js-sdk": "^1.16.42",
     "@blocklet/logger": "^1.16.42",
-    "@blocklet/payment-react": "1.18.37",
+    "@blocklet/payment-react": "1.18.38",
     "@blocklet/sdk": "^1.16.42",
-    "@blocklet/ui-react": "^2.13.13",
+    "@blocklet/ui-react": "^2.13.18",
     "@blocklet/uploader": "^0.1.84",
     "@blocklet/xss": "^0.1.33",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.20.2",
-    "@ocap/client": "^1.20.2",
-    "@ocap/mcrypto": "^1.20.2",
-    "@ocap/util": "^1.20.2",
-    "@ocap/wallet": "^1.20.2",
+    "@ocap/asset": "^1.20.4",
+    "@ocap/client": "^1.20.4",
+    "@ocap/mcrypto": "^1.20.4",
+    "@ocap/util": "^1.20.4",
+    "@ocap/wallet": "^1.20.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.0",
@@ -123,7 +123,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.42",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.37",
+    "@blocklet/payment-types": "1.18.38",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -153,7 +153,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.31",
+    "vite-plugin-blocklet": "^0.9.32",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -169,5 +169,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ea43bad3259d340da14fc0dd0e5b02f2c88c5093"
+  "gitHead": "c273fb068cea55d95017c8b9672f30d5d6c60167"
 }

package/src/app.tsx

@@ -2,8 +2,7 @@ import './global.css';
 
 import Center from '@arcblock/ux/lib/Center';
 import withTracker from '@arcblock/ux/lib/withTracker';
-import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
-// import { createTheme } from '@arcblock/ux/lib/Theme';
+import { ConfigProvider } from '@arcblock/ux/lib/Config';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { CircularProgress } from '@mui/material';
 import React, { Suspense } from 'react';
@@ -45,118 +44,116 @@ const CustomerBalanceRecharge = React.lazy(() => import('./pages/customer/rechar
 function App() {
   return (
     <TransitionProvider>
-      <LocaleProvider translations={translations} fallbackLocale="en">
-        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
-          <Suspense
-            fallback={
-              <Center>
-                <CircularProgress />
-              </Center>
-            }>
-            <Routes>
-              <Route path="/" element={<HomePage />} />
-              <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
-              <Route key="admin-index" path="/admin" element={<AdminPage />} />,
-              <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
-              <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
-              <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
-              <Route key="integrations-index" path="/integrations" element={<IntegrationsPage />} />
-              <Route key="integrations-tabs" path="/integrations/:group" element={<IntegrationsPage />} />
-              <Route key="integrations-sub" path="/integrations/:group/:page" element={<IntegrationsPage />} />
-              <Route key="integrations-fallback" path="/integrations/*" element={<IntegrationsPage />} />
-              <Route
-                key="customer-home"
-                path="/customer"
-                element={
-                  <UserLayout>
-                    <CustomerHome />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-subscription"
-                path="/customer/subscription/:id"
-                element={
-                  <UserLayout>
-                    <CustomerSubscriptionDetail />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-subscription-change-plan"
-                path="/customer/subscription/:id/change-plan"
-                element={
-                  <UserLayout>
-                    <CustomerSubscriptionChangePlan />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-subscription-change-payment"
-                path="/customer/subscription/:id/change-payment"
-                element={
-                  <UserLayout>
-                    <CustomerSubscriptionChangePayment />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-recharge"
-                path="/customer/subscription/:id/recharge"
-                element={
-                  <UserLayout>
-                    <CustomerRecharge />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-balance-recharge"
-                path="/customer/recharge/:currencyId"
-                element={
-                  <UserLayout>
-                    <CustomerBalanceRecharge />
-                  </UserLayout>
-                }
-              />
-              <Route key="customer-embed" path="/customer/embed/subscription" element={<CustomerSubscriptionEmbed />} />
-              <Route
-                key="subscription-embed"
-                path="/embed/customer/subscription"
-                element={<CustomerSubscriptionEmbed />}
-              />
-              <Route
-                key="customer-due"
-                path="/customer/invoice/past-due"
-                element={
-                  <UserLayout>
-                    <CustomerInvoicePastDue />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-invoice"
-                path="/customer/invoice/:id"
-                element={
-                  <UserLayout>
-                    <CustomerInvoiceDetail />
-                  </UserLayout>
-                }
-              />
-              <Route
-                key="customer-payout"
-                path="/customer/payout/:id"
-                element={
-                  <UserLayout>
-                    <CustomerPayoutDetail />
-                  </UserLayout>
-                }
-              />
-              <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
-              <Route path="*" element={<Navigate to="/" />} />
-            </Routes>
-          </Suspense>
-        </ErrorBoundary>
-      </LocaleProvider>
+      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
+        <Suspense
+          fallback={
+            <Center>
+              <CircularProgress />
+            </Center>
+          }>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/checkout/:action/:id" element={<CheckoutPage />} />
+            <Route key="admin-index" path="/admin" element={<AdminPage />} />,
+            <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
+            <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
+            <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
+            <Route key="integrations-index" path="/integrations" element={<IntegrationsPage />} />
+            <Route key="integrations-tabs" path="/integrations/:group" element={<IntegrationsPage />} />
+            <Route key="integrations-sub" path="/integrations/:group/:page" element={<IntegrationsPage />} />
+            <Route key="integrations-fallback" path="/integrations/*" element={<IntegrationsPage />} />
+            <Route
+              key="customer-home"
+              path="/customer"
+              element={
+                <UserLayout>
+                  <CustomerHome />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-subscription"
+              path="/customer/subscription/:id"
+              element={
+                <UserLayout>
+                  <CustomerSubscriptionDetail />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-subscription-change-plan"
+              path="/customer/subscription/:id/change-plan"
+              element={
+                <UserLayout>
+                  <CustomerSubscriptionChangePlan />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-subscription-change-payment"
+              path="/customer/subscription/:id/change-payment"
+              element={
+                <UserLayout>
+                  <CustomerSubscriptionChangePayment />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-recharge"
+              path="/customer/subscription/:id/recharge"
+              element={
+                <UserLayout>
+                  <CustomerRecharge />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-balance-recharge"
+              path="/customer/recharge/:currencyId"
+              element={
+                <UserLayout>
+                  <CustomerBalanceRecharge />
+                </UserLayout>
+              }
+            />
+            <Route key="customer-embed" path="/customer/embed/subscription" element={<CustomerSubscriptionEmbed />} />
+            <Route
+              key="subscription-embed"
+              path="/embed/customer/subscription"
+              element={<CustomerSubscriptionEmbed />}
+            />
+            <Route
+              key="customer-due"
+              path="/customer/invoice/past-due"
+              element={
+                <UserLayout>
+                  <CustomerInvoicePastDue />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-invoice"
+              path="/customer/invoice/:id"
+              element={
+                <UserLayout>
+                  <CustomerInvoiceDetail />
+                </UserLayout>
+              }
+            />
+            <Route
+              key="customer-payout"
+              path="/customer/payout/:id"
+              element={
+                <UserLayout>
+                  <CustomerPayoutDetail />
+                </UserLayout>
+              }
+            />
+            <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
+            <Route path="*" element={<Navigate to="/" />} />
+          </Routes>
+        </Suspense>
+      </ErrorBoundary>
     </TransitionProvider>
   );
 }
@@ -170,16 +167,18 @@ export default function WrappedApp() {
   usePreventWheel();
 
   return (
-    <ToastProvider>
-      <PaymentThemeProvider>
-        <SessionProvider
-          serviceHost={prefix}
-          protectedRoutes={['/admin/*', '/customer/*', '/integrations/*'].map((item) => joinURL(prefix, item))}>
-          <Router basename={prefix}>
-            <AppWithTracker />
-          </Router>
-        </SessionProvider>
-      </PaymentThemeProvider>
-    </ToastProvider>
+    <ConfigProvider translations={translations} fallbackLocale="en">
+      <ToastProvider>
+        <PaymentThemeProvider>
+          <SessionProvider
+            serviceHost={prefix}
+            protectedRoutes={['/admin/*', '/customer/*', '/integrations/*'].map((item) => joinURL(prefix, item))}>
+            <Router basename={prefix}>
+              <AppWithTracker />
+            </Router>
+          </SessionProvider>
+        </PaymentThemeProvider>
+      </ToastProvider>
+    </ConfigProvider>
   );
 }

package/src/components/chart.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/require-default-props */
 import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
-import { Box, Skeleton } from '@mui/material';
+import { Box, Skeleton, useTheme } from '@mui/material';
 import { useState } from 'react';
 import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
 
@@ -18,6 +18,7 @@ export default function Chart({
   currencies: TCurrencyMap;
   height?: number;
 }) {
+  const theme = useTheme();
   const [series, setSeries] = useState<any>(
     Object.keys(currencies).reduce(
       (acc, key) => {
@@ -60,8 +61,10 @@ export default function Chart({
             left: 0,
             bottom: 0,
           }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <Tooltip />
+          <CartesianGrid strokeDasharray="3 3" stroke={theme.palette.grey[200]} />
+          <Tooltip
+            contentStyle={{ backgroundColor: theme.palette.background.paper, borderColor: theme.palette.grey[200] }}
+          />
           {Object.keys(currencies).map((x: string, i) => {
             const dataKey = currencies[x]?.symbol as string;
             const color = currencies[x]?.color as string;
@@ -84,8 +87,19 @@ export default function Chart({
             onMouseOver={onMouseOver}
             onMouseOut={onMouseOut}
           />
-          <XAxis dataKey="timestamp" />
-          <YAxis orientation="left" mirror tickLine tickMargin={2} />
+          <XAxis
+            dataKey="timestamp"
+            tick={{ fill: theme.palette.text.secondary }}
+            stroke={theme.palette.text.secondary}
+          />
+          <YAxis
+            orientation="left"
+            mirror
+            tickLine
+            tickMargin={2}
+            tick={{ fill: theme.palette.text.secondary }}
+            stroke={theme.palette.text.secondary}
+          />
         </AreaChart>
       </ResponsiveContainer>
     </Box>

package/src/components/customer/notification-preference.tsx

@@ -79,6 +79,9 @@ function TimeSelector({
           size="small"
           sx={{
             minWidth: 'fit-content',
+            '& input::-webkit-calendar-picker-indicator': {
+              filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(1) brightness(80%)' : 'none'),
+            },
           }}
           {...field}
           error={!!fieldState.error}
@@ -122,18 +125,16 @@ function DaySelector({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          backgroundColor: 'var(--backgrounds-bg-field)',
+          backgroundColor: 'grey.50',
           '&:hover, &:focus': {
             borderColor: 'primary.main',
           },
+          color: 'text.secondary',
         }}
         size="large"
         startIcon={<DateRangeOutlined fontSize="small" color="action" sx={{ fontSize: '1rem !important' }} />}
         endIcon={
-          <Typography
-            variant="caption"
-            color="text.secondary"
-            sx={{ fontSize: '0.75rem !important', lineHeight: 'normal' }}>
+          <Typography variant="caption" color="action" sx={{ fontSize: '0.75rem !important', lineHeight: 'normal' }}>
             {t('notification.preferences.day')}
           </Typography>
         }>

package/src/components/date-range-picker.tsx

@@ -1,21 +1,6 @@
 import { DateRangePicker as DatePicker } from 'mui-daterange-picker';
 import type { DateRangePickerWrapperProps } from 'mui-daterange-picker/dist/components/DateRangePickerWrapper';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
-import { create } from '@arcblock/ux/lib/Theme';
 
 export default function DateRangePicker(props: DateRangePickerWrapperProps) {
-  const theme = useTheme();
-  const merged = create({
-    ...theme,
-    palette: {
-      primary: {
-        main: '#0086FF',
-      },
-    },
-  });
-  return (
-    <ThemeProvider theme={merged}>
-      <DatePicker {...props} wrapperClassName="date-range-picker" />
-    </ThemeProvider>
-  );
+  return <DatePicker {...props} wrapperClassName="date-range-picker" />;
 }

package/src/components/drawer-form.tsx

@@ -68,7 +68,8 @@ export default function DrawerForm(props: Props) {
             pb: 2,
             pt: 2,
             gap: 1,
-            borderBottom: '1px solid var(--stroke-sep, #EFF1F5)',
+            borderBottom: '1px solid',
+            borderColor: 'grey.200',
             '@media (max-width: 600px)': {
               '& > .addons-wrapper': {
                 width: '100%',
@@ -120,13 +121,13 @@ const Container = styled<any>(Drawer)`
   }
   .drawer-form-footer {
     padding: 0 20px 24px;
-    background: #fff;
+    background: ${({ theme }) => theme.palette.background.paper};
   }
   @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
     .drawer-form-header-wrapper {
       position: sticky;
       top: 0;
-      background: #fff;
+      background: ${({ theme }) => theme.palette.background.paper};
       z-index: 999;
     }
     .drawer-form-footer {

package/src/components/filter-toolbar.tsx

@@ -9,11 +9,12 @@ import {
 } from '@blocklet/payment-react';
 import type { TCustomer } from '@blocklet/payment-types';
 import { Add, Close } from '@mui/icons-material';
-import { Button, Menu, MenuItem } from '@mui/material';
+import { Button, Menu, MenuItem, TextField } from '@mui/material';
 import { Box, styled } from '@mui/system';
 import { useEffect, useState } from 'react';
 
 import { flatten } from 'lodash';
+import { useRequest } from 'ahooks';
 import { ProductsProvider, useProductsContext } from '../contexts/products';
 import InfoCard from './info-card';
 import ProductSelect from './payment-link/product-select';
@@ -236,28 +237,43 @@ function SearchCurrency({ setSearch, search }: Pick<Props, 'setSearch' | 'search
 function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'search'>) {
   const [customers, setCustomers] = useState<TCustomer[]>([]);
   const [show, setShow] = useState(null);
-  const [text, setText] = useState('');
+  const [searchText, setSearchText] = useState('');
   const { t } = useLocaleContext();
 
-  useEffect(() => {
-    fetchUserData({
-      q: {
-        'like-name': text,
-        'like-email': text,
-        'like-did': text,
-        'like-metadata': text,
-        'like-phone': text,
+  const customerRequest = useRequest(
+    (text: string) => {
+      return fetchUserData({
+        q: {
+          'like-name': text,
+          'like-email': text,
+          'like-did': text,
+          'like-metadata': text,
+          'like-phone': text,
+        },
+        page: 1,
+        pageSize: 10,
+      });
+    },
+    {
+      onSuccess: (data) => {
+        setCustomers(data.list);
       },
-      page: 1,
-      pageSize: 10,
-    }).then((data: any) => {
-      setCustomers(data.list);
-    });
-  }, [text]);
+      debounceWait: 500,
+    }
+  );
+
+  useEffect(() => {
+    customerRequest.run(searchText);
+  }, [searchText]);
 
   return (
-    <section onClick={(e: any) => setShow(e.currentTarget)}>
-      <Button className="option-btn" variant="text">
+    <section>
+      <Button
+        className="option-btn"
+        variant="text"
+        onClick={(e) => {
+          setShow(e.currentTarget as any);
+        }}>
         {search!.customer_id ? (
           <Close
             sx={{ color: 'text.secondary', cursor: 'pointer', fontSize: '1.05rem' }}
@@ -283,23 +299,21 @@ function SearchCustomers({ setSearch, search }: Pick<Props, 'setSearch' | 'searc
           e.stopPropagation();
           setShow(null);
         }}>
-        <section style={{ padding: '10px 10px 0 10px' }}>
-          <input
-            style={{
+        <Box sx={{ p: 1 }}>
+          <TextField
+            placeholder="Search customer"
+            size="small"
+            sx={{
               width: '100%',
-              boxSizing: 'border-box',
-              border: '1px solid #eee',
-              padding: '5px 10px',
-              borderRadius: '20px',
-              marginBottom: '10px',
             }}
-            type="text"
-            placeholder="Search customer"
+            value={searchText}
             onChange={(e) => {
-              setText(e.target.value);
+              setSearchText(e.target.value);
+              e.stopPropagation();
             }}
+            onClick={(e) => e.stopPropagation()}
           />
-        </section>
+        </Box>
         {customers.map((x: any) => (
           <MenuItem
             key={x.id}
@@ -484,9 +498,9 @@ const Root = styled(Box)`
     display: flex;
     align-items: center;
     border-radius: 25px;
-    background: #f6f6f6;
+    background: ${({ theme }) => theme.palette.grey[100]};
     padding: 5px 10px;
-    color: #555;
+    color: ${({ theme }) => theme.palette.text.secondary};
     font-size: 14px;
     line-height: 14px;
     overflow: visible;
@@ -505,8 +519,9 @@ const Root = styled(Box)`
       0px 8px 10px 1px rgba(0, 0, 0, 0.14),
       0px 3px 14px 2px rgba(0, 0, 0, 0.12);
     padding: 0;
-    background: #fff;
-    border: 1px solid #eee;
+    background: ${({ theme }) => theme.palette.background.paper};
+    border: 1px solid;
+    border-color: ${({ theme }) => theme.palette.grey[100]};
     z-index: 999999;
     top: 15px;
     display: block;