payment-kit 1.13.46 → 1.13.47

package/api/dev.ts

@@ -3,4 +3,4 @@ import { setupClient } from 'vite-plugin-blocklet';
 
 import { app } from './src';
 
-setupClient(app);
+setupClient(app, { port: 47069 });

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.46",
+  "version": "1.13.47",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -40,25 +40,25 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did": "^1.18.93",
+    "@arcblock/did": "^1.18.95",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.8.6",
-    "@arcblock/did-util": "^1.18.93",
-    "@arcblock/ux": "^2.8.6",
+    "@arcblock/did-connect": "^2.8.7",
+    "@arcblock/did-util": "^1.18.95",
+    "@arcblock/ux": "^2.8.7",
     "@blocklet/logger": "1.16.17",
     "@blocklet/sdk": "1.16.17",
-    "@blocklet/ui-react": "^2.8.6",
+    "@blocklet/ui-react": "^2.8.7",
     "@blocklet/uploader": "^0.0.33",
-    "@mui/icons-material": "^5.14.15",
-    "@mui/lab": "^5.0.0-alpha.150",
-    "@mui/material": "^5.14.15",
-    "@mui/styles": "^5.14.15",
-    "@mui/system": "^5.14.15",
-    "@ocap/asset": "^1.18.93",
-    "@ocap/client": "^1.18.93",
-    "@ocap/mcrypto": "^1.18.93",
-    "@ocap/util": "^1.18.93",
-    "@ocap/wallet": "^1.18.93",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/lab": "^5.0.0-alpha.151",
+    "@mui/material": "^5.14.16",
+    "@mui/styles": "^5.14.16",
+    "@mui/system": "^5.14.16",
+    "@ocap/asset": "^1.18.95",
+    "@ocap/client": "^1.18.95",
+    "@ocap/mcrypto": "^1.18.95",
+    "@ocap/util": "^1.18.95",
+    "@ocap/wallet": "^1.18.95",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.10",
     "ahooks": "^3.7.8",
@@ -88,7 +88,7 @@
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
     "react-international-phone": "^3.1.2",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
     "rimraf": "^3.0.2",
     "sequelize": "^6.33.0",
     "sqlite3": "^5.1.6",
@@ -103,12 +103,12 @@
     "@abtnode/types": "1.16.17",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.46",
+    "@did-pay/types": "1.13.47",
     "@types/cookie-parser": "^1.4.5",
     "@types/cors": "^2.8.15",
     "@types/dotenv-flow": "^3.3.2",
     "@types/express": "^4.17.20",
-    "@types/node": "^18.18.7",
+    "@types/node": "^18.18.8",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react": "^2.2.0",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7c37d3e6f4814056ddc98033b257707fbefba2d9"
+  "gitHead": "e917c1f665d97114b37ddb566329a1f9c6a9ba6b"
 }

package/src/components/checkout/form/index.tsx

@@ -1,13 +1,12 @@
 import 'react-international-phone/style.css';
 
-import SessionManager from '@arcblock/did-connect/lib/SessionManager';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@did-pay/types';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Tooltip, Typography } from '@mui/material';
-import { useSetState } from 'ahooks';
+import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useCreation, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect } from 'react';
@@ -21,6 +20,7 @@ import FormInput from '../../input';
 import AddressForm from './address';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
+import UserButtons from './user-buttons';
 
 const phoneUtil = PhoneNumberUtil.getInstance();
 
@@ -72,6 +72,7 @@ export default function PaymentForm({
   onPaid,
   onError,
 }: PageData) {
+  const theme = useTheme();
   const { t } = useLocaleContext();
   const { session, connectApi } = useSessionContext();
   const { control, getValues, setValue, handleSubmit } = useFormContext();
@@ -112,6 +113,17 @@ export default function PaymentForm({
   const paymentCurrency = useWatch({ control, name: 'payment_currency' });
   const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
 
+  const domSize = useSize(document.body);
+
+  const isCloumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+
   const payee = getStatementDescriptor(checkoutSession.line_items);
   const buttonText = session.user
     ? t(`checkout.${checkoutSession.mode}`)
@@ -249,16 +261,7 @@ export default function PaymentForm({
         <Stack className="cko-payment-contact">
           <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
             <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('checkout.contact')}</Typography>
-            <Stack direction="row" alignItems="center" justifyContent="space-between">
-              <LocaleSelector showText={false} />
-              {session.user ? (
-                <SessionManager session={session} />
-              ) : (
-                <Tooltip title={t('checkout.login')} arrow>
-                  <SessionManager session={session} />
-                </Tooltip>
-              )}
-            </Stack>
+            {isCloumnLayout ? null : <UserButtons />}
           </Stack>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <FormInput

package/src/components/checkout/form/user-buttons.tsx

@@ -0,0 +1,24 @@
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { Stack, Tooltip } from '@mui/material';
+
+import { useSessionContext } from '../../../contexts/session';
+
+export default function UserButtons() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <LocaleSelector showText={false} />
+      {session.user ? (
+        <SessionManager session={session} />
+      ) : (
+        <Tooltip title={t('checkout.login')} arrow>
+          <SessionManager session={session} />
+        </Tooltip>
+      )}
+    </Stack>
+  );
+}

package/src/components/checkout/header.tsx

@@ -1,9 +1,11 @@
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import type { TCheckoutSessionExpanded } from '@did-pay/types';
 import { Avatar, Stack, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
+import { useCreation, useLocalStorageState, useSize } from 'ahooks';
 
 import { getStatementDescriptor } from '../../libs/util';
 import Livemode from '../livemode';
+import UserButtons from './form/user-buttons';
 
 type Props = {
   checkoutSession: TCheckoutSessionExpanded;
@@ -12,12 +14,27 @@ type Props = {
 export default function PaymentHeader({ checkoutSession }: Props) {
   const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
   const brand = getStatementDescriptor(checkoutSession.line_items);
+  const theme = useTheme();
+
+  const domSize = useSize(document.body);
+
+  const isCloumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
 
   return (
-    <Stack className="cko-header" direction="row" spacing={1} alignItems="center">
-      <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
-      <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
-      {!livemode && <Livemode />}
+    <Stack className="cko-header" direction="row" spacing={1} alignItems="center" justifyContent="space-between">
+      <Stack direction="row" spacing={1} alignItems="center">
+        <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
+        <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
+        {!livemode && <Livemode />}
+      </Stack>
+      {isCloumnLayout ? <UserButtons /> : null}
     </Stack>
   );
 }

package/src/components/checkout/pay.tsx

@@ -81,7 +81,7 @@ export default function CheckoutPay({
   if (!checkoutSession) {
     return (
       <PaymentRoot>
-        <Stack direction="row" className="cko-container">
+        <Stack className="cko-container">
           <Stack className="cko-overview">
             <OverviewSkeleton />
           </Stack>
@@ -223,7 +223,7 @@ export function CheckoutPayMain({
   return (
     <FormProvider {...methods}>
       <PaymentRoot>
-        <Stack direction="row" className="cko-container">
+        <Stack className="cko-container">
           <Fade in>
             <Stack className="cko-overview" direction="column">
               <PaymentHeader checkoutSession={state.checkoutSession} />
@@ -269,14 +269,16 @@ export function CheckoutPayMain({
 export const PaymentRoot = styled(Box)`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: nowrap;
+  flex-direction: column;
   justify-content: center;
-  min-height: 0;
+  align-items: center;
+  min-height: 100vh;
+  position: relative;
 
   &:before {
     animation-fill-mode: both;
     background: #ffffff;
-    content: ' ';
+    content: '';
     height: 100%;
     position: fixed;
     right: 0;
@@ -288,21 +290,30 @@ export const PaymentRoot = styled(Box)`
 
   .cko-container {
     width: 100%;
-    max-width: 920px;
+    max-width: 1000px;
     display: flex;
-    align-items: flex-start;
+    flex-direction: row;
     justify-content: space-between;
     position: relative;
-    transform: translateY(max(48px, calc(50vh - 55%)));
+    padding: 0 16px;
   }
 
   .cko-overview {
-    width: 380px;
+    width: 400px;
     min-height: 540px;
+    position: relative;
+  }
+  .cko-header {
+    left: 0;
+    margin-bottom: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
   }
 
   .cko-payment {
-    width: 380px;
+    width: 400px;
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -337,10 +348,38 @@ export const PaymentRoot = styled(Box)`
     }
   }
 
+  .cko-header {
+  }
+
   .cko-footer {
     position: absolute;
     bottom: 0;
-    left: 0;
+    left: 12px;
     margin: 12px 0;
   }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    &:before {
+      display: none;
+    }
+    .cko-container {
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      min-width: 350px;
+      max-width: 400px;
+    }
+    .cko-overview {
+      width: 100%;
+      min-height: auto;
+    }
+    .cko-payment {
+      width: 100%;
+    }
+
+    .cko-footer {
+      position: static;
+      margin-top: 0;
+    }
+  }
 `;

package/src/components/checkout/summary.tsx

@@ -82,7 +82,12 @@ export default function PaymentSummary({
 
   return (
     <Fade in>
-      <Stack className="cko-product" direction="column" sx={{ mt: 4 }}>
+      <Stack
+        className="cko-product"
+        direction="column"
+        sx={{
+          mt: 8,
+        }}>
         <Stack className="cko-product-summary" sx={{ mb: 4 }}>
           <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {headlines.action}
@@ -120,7 +125,15 @@ export default function PaymentSummary({
             direction="column"
             alignItems="flex-end"
             spacing={0.5}
-            sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, mt: 8, mb: 4 }}>
+            sx={{
+              border: '1px solid #eee',
+              borderRadius: 1,
+              padding: 1,
+              mt: {
+                xs: 4,
+                md: 8,
+              },
+            }}>
             <ProductItem
               item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
               session={checkoutSession}

package/src/components/livemode.tsx

@@ -10,7 +10,7 @@ export default function Livemode() {
       sx={{
         ml: 2,
         height: 18,
-        lineHeight: 18,
+        lineHeight: 1,
         textTransform: 'uppercase',
         fontSize: '0.8rem',
         fontWeight: 'bold',

package/src/components/portal/invoice/list.tsx

@@ -4,7 +4,6 @@ import type { Paginated, TInvoiceExpanded } from '@did-pay/types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import api from '../../../libs/api';
@@ -63,12 +62,23 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   const grouped = groupByDate(data.list);
 
   return (
-    <Stack direction="column" spacing={3} sx={{ mt: 1 }}>
+    <Stack direction="column" gap={3} sx={{ mt: 1 }}>
       {Object.entries(grouped).map(([date, invoices]) => (
-        <React.Fragment key={date}>
-          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2 }}>{date}</Typography>
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
           {invoices.map((invoice) => (
-            <Stack key={invoice.id} direction="row" justifyContent="space-between" spacing={3} flexWrap="nowrap">
+            <Stack
+              key={invoice.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 4,
+              }}
+              flexWrap="nowrap">
               <Box flex={2}>
                 <Link to={`/customer/invoice/${invoice.id}`}>
                   <Typography component="span">{invoice.number}</Typography>
@@ -91,7 +101,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
               </Box>
             </Stack>
           ))}
-        </React.Fragment>
+        </Box>
       ))}
       <Box>
         {hasMore && (

package/src/components/portal/subscription/list.tsx

@@ -99,7 +99,15 @@ export function CurrentSubscriptionsInner({ id, onChange }: Props) {
   return (
     <Stack direction="column" spacing={4} sx={{ mt: 2 }}>
       {data.list.map((subscription) => (
-        <Stack key={subscription.id} direction="row" justifyContent="space-between" spacing={3}>
+        <Stack
+          key={subscription.id}
+          direction="row"
+          justifyContent="space-between"
+          gap={{
+            xs: 1,
+            sm: 3,
+          }}
+          flexWrap="wrap">
           <Stack direction="column" spacing={0.5}>
             <Stack direction="row" spacing={1} alignItems="center">
               <AvatarGroup max={3}>

package/src/components/section/header.tsx

@@ -14,6 +14,8 @@ export default function SectionHeader(props: Props) {
       direction="row"
       justifyContent="space-between"
       alignItems="center"
+      flexWrap="wrap"
+      gap={1}
       sx={{ mb: props.mb, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {props.title}

package/src/components/status.tsx

@@ -6,7 +6,7 @@ export default function Status(props: ChipProps) {
       size="small"
       variant="outlined"
       {...props}
-      sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 20, textTransform: 'capitalize' }}
+      sx={{ ...(props.sx || {}), borderRadius: '4px', height: 20, lineHeight: 1, textTransform: 'capitalize' }}
     />
   );
 }

package/src/pages/checkout/pricing-table.tsx

@@ -77,18 +77,32 @@ export default function PricingTable({ id }: Props) {
 
   if (error) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center relative="parent">
           <Alert severity="error">{error.message}</Alert>
         </Center>
-      </div>
+      </Box>
     );
   }
 
   if (loading || !data) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center>
           <Stack direction="column" alignItems="center" spacing={4}>
@@ -98,25 +112,32 @@ export default function PricingTable({ id }: Props) {
             <Typography component="div" variant="h6" sx={{ width: '10%' }}>
               <Skeleton />
             </Typography>
-            <Stack direction="row" flexWrap="wrap" spacing={5}>
+            <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
               <ProductSkeleton key={1} count={2} />
               <ProductSkeleton key={2} count={3} />
               <ProductSkeleton key={3} count={4} />
             </Stack>
           </Stack>
         </Center>
-      </div>
+      </Box>
     );
   }
 
   if (data.items.length === 0) {
     return (
-      <div style={{ height: '90vh', width: '100vw' }}>
+      <Box
+        sx={{
+          width: '100vw',
+          minHeight: '90vh',
+          pb: 4,
+          display: 'flex',
+          flexDirection: 'column',
+        }}>
         <Header />
         <Center relative="parent">
           <Alert severity="warning">{t('checkout.noPricing')}</Alert>
         </Center>
-      </div>
+      </Box>
     );
   }
 
@@ -137,16 +158,45 @@ export default function PricingTable({ id }: Props) {
   };
 
   return (
-    <div style={{ height: '90vh', width: '100vw' }}>
+    <Box
+      sx={{
+        width: '100vw',
+        minHeight: '90vh',
+        pb: 4,
+        display: {
+          xs: 'block',
+          sm: 'flex',
+        },
+        flexDirection: 'column',
+      }}>
       <Header />
       <Center relative="parent">
-        <Stack direction="column" alignItems="center" spacing={5}>
+        <Stack
+          direction="column"
+          alignItems="center"
+          sx={{
+            pt: {
+              xs: 4,
+              sm: 2,
+            },
+            gap: {
+              xs: 3,
+              sm: 5,
+            },
+          }}>
           <Typography variant="h4" color="text.primary" fontWeight={600}>
             {data.name}
             {!livemode && <Livemode />}
           </Typography>
           {Object.keys(recurring).length > 1 && (
-            <ToggleButtonGroup value={state.interval} onChange={(_, value) => setState({ interval: value })} exclusive>
+            <ToggleButtonGroup
+              value={state.interval}
+              onChange={(_, value) => {
+                if (value !== null) {
+                  setState({ interval: value });
+                }
+              }}
+              exclusive>
               {Object.keys(recurring).map((x) => (
                 <ToggleButton key={x} value={x} sx={{ textTransform: 'capitalize' }}>
                   {formatRecurring(recurring[x] as PriceRecurring, true, '', locale)}
@@ -154,7 +204,7 @@ export default function PricingTable({ id }: Props) {
               ))}
             </ToggleButtonGroup>
           )}
-          <Stack direction="row" flexWrap="wrap" spacing={5}>
+          <Stack flexWrap="wrap" direction="row" gap={{ xs: 3, sm: 5, md: 10 }} justifyContent="center">
             {grouped[state.interval]?.map((x) => {
               return (
                 <Fade in>
@@ -226,6 +276,6 @@ export default function PricingTable({ id }: Props) {
           </Stack>
         </Stack>
       </Center>
-    </div>
+    </Box>
   );
 }