payment-kit 1.18.37 → 1.18.39

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;

package/src/components/info-card.tsx

@@ -61,21 +61,23 @@ export default function InfoCard(props: Props) {
         componentsProps={{
           tooltip: {
             sx: {
-              bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
-              color: (theme) => (theme.palette.mode === 'dark' ? '#ffffff' : theme.palette.text.primary),
-              boxShadow: '0 2px 10px rgba(0, 0, 0, 0.15)',
+              bgcolor: 'background.paper',
+              color: 'text.primary',
+              boxShadow: 2,
               borderRadius: 2,
               padding: '10px 16px',
               fontSize: 14,
               maxWidth: 400,
               minWidth: 240,
               wordBreak: 'break-word',
-              border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
+              border: '1px solid',
+              borderColor: 'divider',
               '& .MuiTooltip-arrow': {
-                color: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                color: 'background.paper',
                 '&::before': {
-                  border: (theme) => (theme.palette.mode === 'dark' ? '1px solid #3a3f48' : '1px solid #e0e0e0'),
-                  backgroundColor: (theme) => (theme.palette.mode === 'dark' ? '#2a2e37' : '#ffffff'),
+                  border: '1px solid',
+                  borderColor: 'grey.200',
+                  backgroundColor: 'background.paper',
                 },
               },
             },

package/src/components/invoice-pdf/pdf.tsx

@@ -100,7 +100,7 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
         size="small"
         onClick={generatePDF}
         disabled={!isReady || isGenerating}
-        sx={{ borderColor: 'var(--stroke-border-base, #EFF1F5)' }}>
+        sx={{ borderColor: 'grey.100' }}>
         {isGenerating ? (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             <CircularProgress size={16} sx={{ color: 'inherit' }} />

package/src/components/layout/admin.tsx

@@ -10,7 +10,7 @@ import { useSessionContext } from '../../contexts/session';
 
 const Root = styled(Dashboard)<{ padding: string }>`
   width: 100%;
-  background-color: white;
+  background-color: ${({ theme }) => theme.palette.background.default};
 
   > .dashboard-body > .dashboard-main {
     > .dashboard-content {
@@ -35,7 +35,7 @@ const Root = styled(Dashboard)<{ padding: string }>`
       }
 
       .MuiTabs-scroller {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
       }
 
       .page-content {

package/src/components/metadata/form.tsx

@@ -110,8 +110,9 @@ export default function MetadataForm({
             <IconButton
               onClick={() => metadata.remove(index)}
               sx={{
-                border: '1px solid var(--stroke-border-base, #EFF1F5)',
-                borderRadius: 'var(--radius-m, 8px)',
+                border: '1px solid',
+                borderColor: 'grey.100',
+                borderRadius: 1,
                 padding: '8px',
               }}>
               <DeleteOutlineOutlined color="error" sx={{ opacity: 0.75 }} />

package/src/components/metadata/list.tsx

@@ -18,7 +18,7 @@ export default function MetadataList({
   if (isEmpty(data)) {
     return (
       <Box sx={{ textAlign: 'center' }}>
-        <Typography color="primary" fontWeight={500}>
+        <Typography color="text.primary" fontWeight={500}>
           {t('common.metadata.empty')}
         </Typography>
         <Typography color="text.lighter">{t('common.metadata.emptyTip')}</Typography>

package/src/components/payment-link/chrome.tsx

@@ -6,7 +6,6 @@ export default function Chrome({ children, ...props }: any) {
 }
 
 const Root = styled(Box)`
-  background-color: #fcfeff;
   border-radius: 8px;
   margin-top: 40px;
   position: relative;

package/src/components/payment-link/item.tsx

@@ -54,7 +54,7 @@ export default function LineItem({ prefix, product, valid, onUpdate, onRemove }:
         p: 2,
         borderWidth: valid ? 1 : 2,
         borderStyle: 'solid',
-        borderColor: valid ? '#eee' : 'error.main',
+        borderColor: valid ? 'grey.100' : 'error.main',
         borderRadius: 2,
         position: 'relative',
       }}>