payment-kit 1.14.21 → 1.14.23

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.14.21",
+  "version": "1.14.23",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,29 +43,29 @@
   },
   "dependencies": {
     "@abtnode/cron": "1.16.28",
-    "@arcblock/did": "^1.18.127",
+    "@arcblock/did": "^1.18.128",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.11",
-    "@arcblock/did-util": "^1.18.127",
-    "@arcblock/jwt": "^1.18.127",
-    "@arcblock/ux": "^2.10.11",
-    "@arcblock/validator": "^1.18.127",
+    "@arcblock/did-connect": "^2.10.16",
+    "@arcblock/did-util": "^1.18.128",
+    "@arcblock/jwt": "^1.18.128",
+    "@arcblock/ux": "^2.10.16",
+    "@arcblock/validator": "^1.18.128",
     "@blocklet/js-sdk": "1.16.28",
     "@blocklet/logger": "1.16.28",
-    "@blocklet/payment-react": "1.14.21",
+    "@blocklet/payment-react": "1.14.23",
     "@blocklet/sdk": "1.16.28",
-    "@blocklet/ui-react": "^2.10.11",
+    "@blocklet/ui-react": "^2.10.16",
     "@blocklet/uploader": "^0.1.20",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/styles": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/asset": "^1.18.127",
-    "@ocap/client": "^1.18.127",
-    "@ocap/mcrypto": "^1.18.127",
-    "@ocap/util": "^1.18.127",
-    "@ocap/wallet": "^1.18.127",
+    "@ocap/asset": "^1.18.128",
+    "@ocap/client": "^1.18.128",
+    "@ocap/mcrypto": "^1.18.128",
+    "@ocap/util": "^1.18.128",
+    "@ocap/wallet": "^1.18.128",
     "@react-pdf/renderer": "^3.4.4",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
@@ -97,8 +97,8 @@
     "p-all": "3.0.0",
     "p-wait-for": "3",
     "pretty-ms-i18n": "^1.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.52.1",
     "react-international-phone": "^3.1.2",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.28",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.14.21",
+    "@blocklet/payment-types": "1.14.23",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -144,7 +144,7 @@
     "typescript": "^4.9.5",
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
-    "vite-plugin-blocklet": "^0.8.11",
+    "vite-plugin-blocklet": "^0.8.16",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "48565120b3bdaf21533fe73626db725330c0f374"
+  "gitHead": "868311b6e37e21e5755e7a78daf335f3057dd1c8"
 }

package/src/app.tsx

@@ -2,11 +2,12 @@ import './global.css';
 
 import Center from '@arcblock/ux/lib/Center';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
-import { ThemeProvider, createTheme } from '@arcblock/ux/lib/Theme';
+// import { createTheme } from '@arcblock/ux/lib/Theme';
 import { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { CircularProgress } from '@mui/material';
 import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { PaymentThemeProvider } from '@blocklet/payment-react';
 import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
@@ -27,18 +28,18 @@ const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subs
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
 
-const theme = createTheme({
-  typography: {
-    fontSize: 14,
-    allVariants: {
-      textTransform: 'none',
-    },
-  },
-});
+// const theme = createTheme({
+//   typography: {
+//     fontSize: 14,
+//     allVariants: {
+//       textTransform: 'none',
+//     },
+//   },
+// });
 
 function App() {
   return (
-    <ThemeProvider theme={theme}>
+    <PaymentThemeProvider>
       <TransitionProvider>
         <LocaleProvider translations={translations} fallbackLocale="en">
           <ErrorBoundary FallbackComponent={ErrorFallback} onReset={window.location.reload}>
@@ -59,7 +60,7 @@ function App() {
                   key="customer-home"
                   path="/customer"
                   element={
-                    <Layout>
+                    <Layout padding="0">
                       <CustomerHome />
                     </Layout>
                   }
@@ -128,7 +129,7 @@ function App() {
           </ErrorBoundary>
         </LocaleProvider>
       </TransitionProvider>
-    </ThemeProvider>
+    </PaymentThemeProvider>
   );
 }
 

package/src/components/balance-list.tsx

@@ -1,12 +1,13 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatBNStr, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN } from '@blocklet/payment-types';
-import { Stack, Typography } from '@mui/material';
+import { Avatar, Stack, Typography } from '@mui/material';
 import flatten from 'lodash/flatten';
 import isEmpty from 'lodash/isEmpty';
 
 type Props = {
   data?: GroupedBN;
+  showLogo?: boolean;
 };
 
 export default function BalanceList(props: Props) {
@@ -26,7 +27,15 @@ export default function BalanceList(props: Props) {
           return null;
         }
         return (
-          <Stack key={currencyId} sx={{ width: '100%', maxWidth: '200px' }} direction="row" spacing={1}>
+          <Stack
+            key={currencyId}
+            sx={{ width: '100%', maxWidth: '200px' }}
+            direction="row"
+            spacing={1}
+            alignItems="center">
+            {props?.showLogo && (
+              <Avatar src={currency.logo} alt={currency.symbol} style={{ width: '18px', height: '18px' }} />
+            )}
             <Typography sx={{ width: '32px' }} color="text.secondary">
               {currency.symbol}
             </Typography>
@@ -42,4 +51,5 @@ export default function BalanceList(props: Props) {
 
 BalanceList.defaultProps = {
   data: {},
+  showLogo: false,
 };

package/src/components/copyable.tsx

@@ -1,6 +1,6 @@
 import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 export default function Copyable({ text, children, style }: { text: string; children?: React.ReactNode; style?: any }) {
   const { locale } = useLocaleContext();
@@ -13,6 +13,7 @@ export default function Copyable({ text, children, style }: { text: string; chil
         <Stack ref={containerRef} direction="row" alignItems="center" color="text.secondary">
           {children || (
             <Typography
+              className="copyable-text"
               component="span"
               sx={{
                 mr: 0.5,
@@ -25,7 +26,7 @@ export default function Copyable({ text, children, style }: { text: string; chil
               {text}
             </Typography>
           )}
-          {copyButton}
+          <Box sx={{ height: '1em', mt: '-0.4em' }}>{copyButton}</Box>
         </Stack>
       )}
     />

package/src/components/customer/edit.tsx

@@ -1,10 +1,13 @@
-import Dialog from '@arcblock/ux/lib/Dialog';
+/* eslint-disable no-nested-ternary */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { isValidCountry } from '@blocklet/payment-react';
-import type { TCustomer } from '@blocklet/payment-types';
-import { Button, CircularProgress, Stack } from '@mui/material';
-import type { EventHandler } from 'react';
+import { AddOutlined } from '@mui/icons-material';
 import { FormProvider, useForm } from 'react-hook-form';
+import { Button, CircularProgress } from '@mui/material';
+import type { EventHandler } from 'react';
+import type { TCustomer } from '@blocklet/payment-types';
+
+import DrawerForm from '../drawer-form';
 
 import CustomerForm from './form';
 
@@ -20,6 +23,7 @@ export default function EditCustomer({
   onCancel: EventHandler<any>;
 }) {
   const { t } = useLocaleContext();
+
   const methods = useForm<TCustomer>({
     defaultValues: {
       name: data.name || '',
@@ -49,27 +53,27 @@ export default function EditCustomer({
   };
 
   return (
-    <Dialog
+    <DrawerForm
+      icon={<AddOutlined />}
+      text={t('payment.customer.update')}
+      width={520}
+      addons={null}
       open
-      disableEscapeKeyDown
-      fullWidth
-      maxWidth="sm"
-      onClose={() => onCancel(null)}
-      showCloseButton={false}
-      title={t('payment.customer.update')}
-      actions={
-        <Stack direction="row">
-          <Button size="small" sx={{ mr: 2 }} onClick={onCancel}>
-            {t('common.cancel')}
-          </Button>
-          <Button variant="contained" color="primary" size="small" disabled={loading} onClick={onSubmit}>
-            {loading && <CircularProgress size="small" />} {t('common.save')}
-          </Button>
-        </Stack>
+      hideLiveMode
+      onClose={onCancel}
+      footer={
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={loading}
+          onClick={onSubmit}
+          sx={{ width: '100%', mt: 2.5 }}>
+          {loading && <CircularProgress size="small" />} {t('common.save')}
+        </Button>
       }>
       <FormProvider {...methods}>
         <CustomerForm />
       </FormProvider>
-    </Dialog>
+    </DrawerForm>
   );
 }

package/src/components/customer/form.tsx

@@ -1,24 +1,29 @@
 import 'react-international-phone/style.css';
 
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { FormInput, PhoneInput } from '@blocklet/payment-react';
-import { InputAdornment, Stack, Typography } from '@mui/material';
+import { FormInput, PhoneInput, CountrySelect } from '@blocklet/payment-react';
+import { FormLabel, Stack } from '@mui/material';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import { Controller, useFormContext } from 'react-hook-form';
-import { CountrySelector } from 'react-international-phone';
 import isEmail from 'validator/es/lib/isEmail';
 
 const phoneUtil = PhoneNumberUtil.getInstance();
 
 export default function CustomerForm() {
   const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
+  const { control } = useFormContext();
 
   return (
-    <Stack direction="column" spacing={1}>
-      <Typography component="h6" sx={{ mb: 1, color: 'text.primary', fontWeight: 600 }}>
-        {t('payment.checkout.contact')}
-      </Typography>
+    <Stack
+      direction="column"
+      spacing={1}
+      sx={{
+        '.MuiFormLabel-root': {
+          color: 'text.primary',
+          mt: 1,
+          mb: 0.5,
+        },
+      }}>
       <FormInput
         name="name"
         variant="outlined"
@@ -26,9 +31,7 @@ export default function CustomerForm() {
         rules={{
           required: t('payment.checkout.required'),
         }}
-        InputProps={{
-          startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.name')}</InputAdornment>,
-        }}
+        label={t('payment.checkout.customer.name')}
       />
       <FormInput
         name="email"
@@ -38,10 +41,9 @@ export default function CustomerForm() {
           required: t('payment.checkout.required'),
           validate: (x) => (isEmail(x) ? true : t('payment.checkout.invalid')),
         }}
-        InputProps={{
-          startAdornment: <InputAdornment position="start">{t('payment.checkout.customer.email')}</InputAdornment>,
-        }}
+        label={t('payment.checkout.customer.email')}
       />
+      <FormLabel className="base-label">{t('payment.checkout.customer.phone')}</FormLabel>
       <PhoneInput
         name="phone"
         variant="outlined"
@@ -62,20 +64,8 @@ export default function CustomerForm() {
         }}
       />
 
-      <Typography component="h6" sx={{ pt: 2, color: 'text.primary', fontWeight: 600 }}>
-        {t('payment.checkout.billing.required')}
-      </Typography>
-      <Controller
-        name="address.country"
-        control={control}
-        render={({ field }) => (
-          <CountrySelector
-            selectedCountry={field.value}
-            onSelect={({ iso2 }) => setValue(field.name, iso2)}
-            buttonStyle={{}}
-          />
-        )}
-      />
+      <FormLabel className="base-label">{t('payment.checkout.billing.required')}</FormLabel>
+      <Controller name="address.country" control={control} render={({ field }) => <CountrySelect {...field} />} />
       <FormInput
         name="address.state"
         variant="outlined"

package/src/components/customer/link.tsx

@@ -7,7 +7,6 @@ export default function CustomerLink({ customer, linked }: { customer: TCustomer
   if (!customer) {
     return null;
   }
-
   if (linked) {
     return (
       <Link to={`/admin/customers/${customer.id}`}>
@@ -24,7 +23,7 @@ export default function CustomerLink({ customer, linked }: { customer: TCustomer
     <InfoCard
       logo={`/.well-known/service/user/avatar/${customer.did}?imageFilter=resize&w=48&h=48`}
       name={customer.email}
-      description={customer.did}
+      description={<span style={{ wordBreak: 'break-all' }}>{customer?.did}</span>}
     />
   );
 }

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

@@ -0,0 +1,21 @@
+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>
+  );
+}

package/src/components/drawer-form.tsx

@@ -15,6 +15,8 @@ type Props = {
   open?: boolean;
   style?: Record<string, any>;
   onClose?: Function;
+  hideLiveMode?: boolean;
+  footer?: React.ReactNode;
 };
 
 DrawerForm.defaultProps = {
@@ -22,6 +24,8 @@ DrawerForm.defaultProps = {
   open: false,
   width: 960,
   onClose: noop,
+  hideLiveMode: false,
+  footer: null,
 };
 
 export default function DrawerForm(props: Props) {
@@ -55,17 +59,18 @@ export default function DrawerForm(props: Props) {
           direction="row"
           alignItems="center"
           justifyContent="space-between"
-          sx={{ pl: 3, pr: 3, pb: 2, mt: 2, borderBottom: '1px solid #eee' }}>
+          className="drawer-form-header-wrapper"
+          sx={{ pl: 3, pr: 3, pb: 2, pt: 2, borderBottom: '1px solid var(--stroke-sep, #EFF1F5)' }}>
           <Stack direction="row" alignItems="center">
             <Typography className="drawer-form-header" variant="h6" sx={{ fontWeight: 600 }}>
               {props.text}
             </Typography>
-            {!settings.livemode && <Livemode />}
+            {!settings.livemode && !props.hideLiveMode && <Livemode />}
           </Stack>
           <Stack direction="row" alignItems="center" justifyContent="space-between">
             <Close
               sx={{ mr: props.addons ? 1 : 0, color: 'text.secondary', cursor: 'pointer' }}
-              onClick={() => setOpen(false)}
+              onClick={handleClose}
             />
             {props.addons && <Divider orientation="vertical" flexItem sx={{ mr: 2 }} />}
             {props.addons}
@@ -74,6 +79,7 @@ export default function DrawerForm(props: Props) {
         <Box className="drawer-form-body" sx={{ mx: 3, my: 2 }}>
           {props.children}
         </Box>
+        <Box className="drawer-form-footer">{props.footer}</Box>
       </Container>
     </>
   );
@@ -81,8 +87,25 @@ export default function DrawerForm(props: Props) {
 
 const Container = styled<any>(Drawer)`
   > .MuiPaper-root {
-    width: 80%;
+    width: 100%;
     min-width: 360px;
     max-width: ${(props) => props.width}px;
   }
+  .drawer-form-footer {
+    padding: 0 20px 24px;
+    background: #fff;
+  }
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.sm}px) {
+    .drawer-form-header-wrapper {
+      position: sticky;
+      top: 0;
+      background: #fff;
+      z-index: 999;
+    }
+    .drawer-form-footer {
+      position: sticky;
+      bottom: 0;
+      z-index: 999;
+    }
+  }
 `;

package/src/components/event/list.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { getDurableData } from '@arcblock/ux/lib/Datatable';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { api, formatTime } from '@blocklet/payment-react';
+import { api, formatTime, Table } from '@blocklet/payment-react';
 import type { TEventExpanded } from '@blocklet/payment-types';
 import { Alert, CircularProgress, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
@@ -9,7 +9,6 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { useTransitionContext } from '../progress-bar';
-import Table from '../table';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TEventExpanded[]; count: number }> => {
   const search = new URLSearchParams();
@@ -177,6 +176,7 @@ export default function EventList({ type, object_id, features }: ListProps) {
     {
       label: t('common.createdAt'),
       name: 'created_at',
+      minWidth: 100,
       options: {
         customBodyRender: (e: string) => {
           return formatTime(e);
@@ -213,6 +213,7 @@ export default function EventList({ type, object_id, features }: ListProps) {
         },
       }}
       toolbar={features?.toolbar}
+      emptyNodeText={t('empty.events')}
     />
   );
 }

package/src/components/filter-toolbar.tsx

@@ -39,10 +39,11 @@ type Props = {
   currency?: boolean;
   setSearch: (x: any) => void;
   donation?: string[];
+  formatStatus?: (x: string) => string;
 };
 
 export default function FilterToolbar(props: Props) {
-  const { setSearch, search, status, currency, donation } = props;
+  const { setSearch, search, status, currency, donation, formatStatus = (v) => v } = props;
   const isProduct = window.location.pathname.includes('product');
   const handleSearch = (obj: any) => {
     setSearch({
@@ -54,7 +55,7 @@ export default function FilterToolbar(props: Props) {
   return (
     <Root>
       <Box className="table-toolbar-left">
-        <SearchStatus setSearch={handleSearch} search={search} status={status} />
+        <SearchStatus setSearch={handleSearch} search={search} status={status} formatStatus={formatStatus} />
         {Array.isArray(donation) && donation.length > 0 && (
           <SearchDonation setSearch={handleSearch} search={search} donation={donation} />
         )}
@@ -78,6 +79,7 @@ const defaultProps = {
   status: [],
   currency: false,
   donation: [],
+  formatStatus: (v: string) => v,
 };
 
 FilterToolbar.defaultProps = defaultProps;
@@ -87,7 +89,12 @@ SearchProducts.defaultProps = defaultProps;
 SearchCustomers.defaultProps = defaultProps;
 SearchDonation.defaultProps = defaultProps;
 
-function SearchStatus({ status = [], search, setSearch }: Pick<Props, 'status' | 'search' | 'setSearch'>) {
+function SearchStatus({
+  status = [],
+  search,
+  setSearch,
+  formatStatus,
+}: Pick<Props, 'status' | 'search' | 'setSearch' | 'formatStatus'>) {
   const [show, setShow] = useState(null);
   const { t } = useLocaleContext();
   return (
@@ -131,7 +138,7 @@ function SearchStatus({ status = [], search, setSearch }: Pick<Props, 'status' |
               setShow(null);
             }}
             key={x}>
-            {x}
+            {formatStatus ? formatStatus(x) : x}
           </MenuItem>
         ))}
       </Menu>

package/src/components/info-card.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Stack, Typography } from '@mui/material';
+import { Avatar, Stack, SxProps, Typography } from '@mui/material';
 import type { LiteralUnion } from 'type-fest';
 
 type Props = {
@@ -7,11 +7,12 @@ type Props = {
   description: any;
   size?: number;
   variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
+  sx?: SxProps;
 };
 
 // FIXME: @wangshijun add image filter for logo
 export default function InfoCard(props: Props) {
-  const dimensions = { width: props.size, height: props.size };
+  const dimensions = { width: props.size, height: props.size, ...props.sx };
   return (
     <Stack direction="row" alignItems="center" spacing={1}>
       {props.logo ? (
@@ -37,4 +38,5 @@ InfoCard.defaultProps = {
   logo: '',
   size: 40,
   variant: 'rounded',
+  sx: {},
 };

package/src/components/info-metric.tsx

@@ -12,7 +12,7 @@ export default function InfoMetric(props: Props) {
   return (
     <>
       <Stack direction="column" alignItems="flex-start">
-        <Typography component="div" variant="body1" mb={1} color="text.secondary">
+        <Typography component="div" variant="body1" mb={1} color="text.primary" sx={{ fontWeight: 500 }}>
           {props.label}
           {!!props.tip && (
             <Tooltip title={props.tip}>
@@ -20,7 +20,7 @@ export default function InfoMetric(props: Props) {
             </Tooltip>
           )}
         </Typography>
-        <Typography component="div" variant="body1" color="text.primary" sx={{ width: '100%' }}>
+        <Typography component="div" variant="body1" color="text.secondary" sx={{ width: '100%' }}>
           {props.value}
         </Typography>
       </Stack>