payment-kit 1.13.46 → 1.13.48

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/api/src/routes/checkout-sessions.ts

@@ -198,15 +198,14 @@ export async function getCheckoutSessionAmounts(checkoutSession: CheckoutSession
 
 export async function ensureCheckoutSessionOpen(req: Request, res: Response, next: NextFunction) {
   const doc = await CheckoutSession.findByPk(req.params.id);
-
   if (!doc) {
-    return res.status(404).json({ error: 'Checkout session not found' });
+    return res.status(404).json({ code: 'CHECKOUT_NOT_FOUND', error: 'Checkout session not found' });
   }
   if (doc.status === 'complete') {
-    return res.status(403).json({ error: 'Checkout session completed' });
+    return res.status(403).json({ code: 'CHECKOUT_COMPLETED', error: 'Checkout session completed' });
   }
   if (doc.status === 'expired') {
-    return res.status(403).json({ error: 'Checkout session already expired' });
+    return res.status(403).json({ code: 'CHECKOUT_EXPIRED', error: 'Checkout session already expired' });
   }
 
   req.doc = doc;
@@ -405,7 +404,7 @@ router.get('/retrieve/:id', user, async (req, res) => {
 router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
   try {
     if (!req.user) {
-      return res.status(403).json({ error: 'Please login to continue' });
+      return res.status(403).json({ code: 'REQUIRE_LOGIN', error: 'Please login to continue' });
     }
 
     const checkoutSession = req.doc as CheckoutSession;
@@ -416,7 +415,9 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
         const result = await getCrossSellItem(checkoutSession);
         // @ts-ignore
         if (result.id) {
-          return res.status(400).json({ error: 'Please select cross sell product to continue' });
+          return res
+            .status(400)
+            .json({ code: 'REQUIRE_CROSS_SELL', error: 'Please select cross sell product to continue' });
         }
       }
     }
@@ -496,13 +497,13 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
       if (paymentIntent) {
         // Check payment intent, if we have a payment intent, we should not create a new one
         if (paymentIntent.status === 'succeeded') {
-          return res.status(403).json({ error: 'Checkout session payment completed' });
+          return res.status(403).json({ code: 'PAYMENT_SUCCEEDED', error: 'Checkout session payment completed' });
         }
         if (paymentIntent.status === 'canceled') {
-          return res.status(403).json({ error: 'Checkout session payment canceled' });
+          return res.status(403).json({ code: 'PAYMENT_CANCELLED', error: 'Checkout session payment canceled' });
         }
         if (paymentIntent.status === 'processing') {
-          return res.status(403).json({ error: 'Checkout session payment processing' });
+          return res.status(403).json({ code: 'PAYMENT_PROCESSING', error: 'Checkout session payment processing' });
         }
         paymentIntent = await paymentIntent.update({
           amount: checkoutSession.amount_total,
@@ -553,13 +554,13 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
 
       if (setupIntent) {
         if (setupIntent.status === 'succeeded') {
-          return res.status(403).json({ error: 'Checkout session setup completed' });
+          return res.status(403).json({ code: 'SETUP_SUCCEEDED', error: 'Checkout session setup completed' });
         }
         if (setupIntent.status === 'canceled') {
-          return res.status(403).json({ error: 'Checkout session setup canceled' });
+          return res.status(403).json({ code: 'SETUP_CANCELED', error: 'Checkout session setup canceled' });
         }
         if (setupIntent.status === 'processing') {
-          return res.status(403).json({ error: 'Checkout session setup processing' });
+          return res.status(403).json({ code: 'SETUP_PROCESSING', error: 'Checkout session setup processing' });
         }
         await setupIntent.update({
           customer_id: customer.id,
@@ -597,7 +598,9 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
       }
       if (subscription) {
         if (subscription.status !== 'incomplete') {
-          return res.status(403).json({ error: 'Checkout session subscription status unexpected' });
+          return res
+            .status(403)
+            .json({ code: 'SUBSCRIPTION_INVALID', error: 'Checkout session subscription status unexpected' });
         }
         subscription = await subscription.update({
           currency_id: paymentCurrency.id,
@@ -768,7 +771,7 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
     return res.json({ paymentIntent, setupIntent, stripeContext, subscription, checkoutSession, customer, delegation });
   } catch (err) {
     console.error(err);
-    res.status(500).json({ error: err.message });
+    res.status(500).json({ code: err.code, error: err.message });
   }
 });
 

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.48
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.46",
+  "version": "1.13.48",
   "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.48",
     "@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": "55d5b96dd4ab54fb3a4400cb7b78924db51de16d"
 }

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

@@ -1,17 +1,17 @@
 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';
 import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
 import { useSessionContext } from '../../../contexts/session';
@@ -21,6 +21,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 +73,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 +114,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 isColumnLayout = 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}`)
@@ -217,6 +230,9 @@ export default function PaymentForm({
         }
       }
     } catch (err) {
+      if (err.response?.data?.code) {
+        dispatch(`error.${err.response?.data?.code}`);
+      }
       Toast.error(formatError(err));
     } finally {
       setState({ submitting: false });
@@ -249,16 +265,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>
+            {isColumnLayout ? 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/product-card.tsx

@@ -14,7 +14,7 @@ type Props = {
 export default function ProductCard({ size, variant, name, logo, description, extra }: Props) {
   const s = { width: size, height: size };
   return (
-    <Stack direction="row" alignItems="center" spacing={1} flex={2}>
+    <Stack direction="row" alignItems="flex-start" spacing={1} flex={2}>
       {logo ? (
         // @ts-ignore
         <Avatar src={logo} alt={name} variant={variant} sx={s} />
@@ -25,11 +25,11 @@ export default function ProductCard({ size, variant, name, logo, description, ex
         </Avatar>
       )}
       <Stack direction="column" alignItems="flex-start" justifyContent="space-around">
-        <Typography variant="body1" sx={{ fontWeight: 500 }} color="text.primary">
+        <Typography variant="body1" sx={{ fontWeight: 500, mb: 0.5, lineHeight: 1 }} color="text.primary">
           {name}
         </Typography>
         {description && (
-          <Typography variant="body1" sx={{ fontSize: '0.85rem', lineHeight: '120%' }} color="text.secondary">
+          <Typography variant="body1" sx={{ fontSize: '0.85rem', mb: 0.5, lineHeight: 1 }} color="text.secondary">
             {description}
           </Typography>
         )}

package/src/components/checkout/summary.tsx

@@ -1,9 +1,10 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { TCheckoutSessionExpanded, TLineItemExpanded, TPaymentCurrency } from '@did-pay/types';
 import { LoadingButton } from '@mui/lab';
-import { Fade, Stack, Typography } from '@mui/material';
+import { Fade, Grow, Stack, Typography, keyframes } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
+import useBus from 'use-bus';
 
 import api from '../../libs/api';
 import { formatCheckoutHeadlines } from '../../libs/util';
@@ -11,6 +12,24 @@ import Status from '../status';
 import PaymentAmount from './amount';
 import ProductItem from './product-item';
 
+const shake = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(2deg);
+  }
+  50% {
+    transform: rotate(0eg);
+  }
+  75% {
+    transform: rotate(-2deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+`;
+
 type Props = {
   checkoutSession: TCheckoutSessionExpanded;
   currency: TPaymentCurrency;
@@ -42,10 +61,21 @@ export default function PaymentSummary({
   onCancelCrossSell,
 }: Props) {
   const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false });
+  const [state, setState] = useSetState({ loading: false, shake: false });
   const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
   const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
 
+  useBus(
+    'error.REQUIRE_CROSS_SELL',
+    () => {
+      setState({ shake: true });
+      setTimeout(() => {
+        setState({ shake: false });
+      }, 1000);
+    },
+    []
+  );
+
   const handleUpsell = async (from: string, to: string) => {
     await onUpsell(from, to);
     runAsync();
@@ -82,7 +112,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}
@@ -116,35 +151,46 @@ export default function PaymentSummary({
           ))}
         </Stack>
         {data && checkoutSession.line_items.some((x) => x.price_id === data.id) === false && (
-          <Stack
-            direction="column"
-            alignItems="flex-end"
-            spacing={0.5}
-            sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, mt: 8, mb: 4 }}>
-            <ProductItem
-              item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
-              session={checkoutSession}
-              currency={currency}
-              onUpsell={noop}
-              onDownsell={noop}
-            />
-            <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
-              <Typography>
-                {checkoutSession.cross_sell_behavior === 'required' && (
-                  <Status label={t('checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
-                )}
-              </Typography>
-              <LoadingButton
-                size="small"
-                loadingPosition="end"
-                color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
-                variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
-                loading={state.loading}
-                onClick={handleApplyCrossSell}>
-                {t('checkout.cross_sell.add')}
-              </LoadingButton>
+          <Grow in>
+            <Stack
+              direction="column"
+              alignItems="flex-end"
+              spacing={0.5}
+              sx={{
+                border: '1px solid #eee',
+                borderRadius: 1,
+                padding: 1,
+                animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : 'none',
+                mt: {
+                  xs: 4,
+                  md: 8,
+                },
+              }}>
+              <ProductItem
+                item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
+                session={checkoutSession}
+                currency={currency}
+                onUpsell={noop}
+                onDownsell={noop}
+              />
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: 1 }}>
+                <Typography>
+                  {checkoutSession.cross_sell_behavior === 'required' && (
+                    <Status label={t('checkout.required')} color="info" variant="outlined" sx={{ mr: 1 }} />
+                  )}
+                </Typography>
+                <LoadingButton
+                  size="small"
+                  loadingPosition="end"
+                  color={checkoutSession.cross_sell_behavior === 'required' ? 'info' : 'info'}
+                  variant={checkoutSession.cross_sell_behavior === 'required' ? 'text' : 'text'}
+                  loading={state.loading}
+                  onClick={handleApplyCrossSell}>
+                  {t('checkout.cross_sell.add')}
+                </LoadingButton>
+              </Stack>
             </Stack>
-          </Stack>
+          </Grow>
         )}
       </Stack>
     </Fade>

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/libs/api.ts

@@ -1,5 +1,6 @@
 import { getLocale } from '@arcblock/ux/lib/Locale/context';
 import axios from 'axios';
+import isNull from 'lodash/isNull';
 
 axios.interceptors.request.use(
   (config) => {
@@ -9,7 +10,7 @@ axios.interceptors.request.use(
 
     const livemode = localStorage.getItem('livemode');
     const locale = getLocale(window.blocklet.languages);
-    config.params = { ...(config.params || {}), livemode, locale };
+    config.params = { ...(config.params || {}), livemode: isNull(livemode) ? true : JSON.parse(livemode), locale };
 
     return config;
   },

package/src/locales/en.tsx

@@ -513,6 +513,7 @@ export default flat({
     portal: 'Manage subscriptions',
     cardPay: '{action} with card',
     empty: 'No thing to pay',
+    per: 'per',
     pay: 'Pay {payee}',
     try1: 'Try {name}',
     try2: 'Try {name} and {count} more',

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>
   );
 }