payment-kit 1.13.47 → 1.13.48

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.47",
+  "version": "1.13.48",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -103,7 +103,7 @@
     "@abtnode/types": "1.16.17",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.47",
+    "@did-pay/types": "1.13.48",
     "@types/cookie-parser": "^1.4.5",
     "@types/cors": "^2.8.15",
     "@types/dotenv-flow": "^3.3.2",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "e917c1f665d97114b37ddb566329a1f9c6a9ba6b"
+  "gitHead": "55d5b96dd4ab54fb3a4400cb7b78924db51de16d"
 }

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

@@ -11,6 +11,7 @@ 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';
@@ -115,7 +116,7 @@ export default function PaymentForm({
 
   const domSize = useSize(document.body);
 
-  const isCloumnLayout = useCreation(() => {
+  const isColumnLayout = useCreation(() => {
     if (domSize) {
       if (domSize?.width <= theme.breakpoints.values.md) {
         return true;
@@ -229,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 });
@@ -261,7 +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>
-            {isCloumnLayout ? null : <UserButtons />}
+            {isColumnLayout ? null : <UserButtons />}
           </Stack>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <FormInput

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();
@@ -121,43 +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: {
-                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>
+          <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/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',