payment-kit 1.16.7 → 1.16.8

package/api/src/routes/customers.ts

@@ -86,24 +86,25 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
 
   try {
     const doc = await Customer.findByPkOrDid(req.user.did as string);
+    const livemode = req.query.livemode ? !!req?.livemode : !!doc?.livemode;
     if (!doc) {
       if (req.query.fallback) {
         const result = await blocklet.getUser(req.user.did);
-        res.json({ ...result.user, address: {} });
+        res.json({ ...result.user, address: {}, livemode });
       } else {
         res.json({ error: 'Customer not found' });
       }
     } else {
       const [summary, stake, token] = await Promise.all([
         doc.getSummary(),
-        getStakeSummaryByDid(doc.did, req?.livemode || doc.livemode),
-        getTokenSummaryByDid(doc.did, req?.livemode || doc.livemode),
+        getStakeSummaryByDid(doc.did, livemode),
+        getTokenSummaryByDid(doc.did, livemode),
       ]);
-      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token } });
+      res.json({ ...doc.toJSON(), summary: { ...summary, stake, token }, livemode });
     }
   } catch (err) {
-    console.error(err);
-    res.json(null);
+    console.error('get customer failed', err);
+    res.status(500).json({ error: `Failed to get customer: ${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.16.7
+version: 1.16.8
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.16.7",
+  "version": "1.16.8",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.150",
     "@blocklet/js-sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/logger": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/payment-react": "1.16.7",
+    "@blocklet/payment-react": "1.16.8",
     "@blocklet/sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/ui-react": "^2.10.74",
     "@blocklet/uploader": "^0.1.53",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.16.7",
+    "@blocklet/payment-types": "1.16.8",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "ebd2f35810953ca0a6c0c008a4c95f2296cccb38"
+  "gitHead": "ad6dca32db4f5074471e000b714ff5046e06608f"
 }

package/src/pages/customer/index.tsx

@@ -28,7 +28,7 @@ import {
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import { styled, SxProps } from '@mui/system';
-import { useSetState } from 'ahooks';
+import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
@@ -101,19 +101,14 @@ export default function CustomerHome() {
   const navigate = useNavigate();
   const { isMobile } = useMobile('lg');
   const { isPending, startTransition } = useTransitionContext();
-
-  const [data, setData] = useState<Result>();
+  const { data, error, loading, runAsync } = useRequest(fetchData, {
+    manual: true,
+  });
   const countryDetail = useMemo(() => {
     const item = defaultCountries.find((v) => v[1] === data?.address?.country);
     return item ? parseCountry(item) : { name: '' };
   }, [data]);
 
-  const runAsync = () => {
-    fetchData().then((res) => {
-      setData(res);
-    });
-  };
-
   useEffect(() => {
     runAsync();
     events.on('switch-did', () => {
@@ -127,6 +122,18 @@ export default function CustomerHome() {
     }
   }, [data]);
 
+  if (loading) {
+    return <ProgressBar pending />;
+  }
+
+  if (error) {
+    return (
+      <Alert sx={{ mt: 3 }} severity="error">
+        {formatError(error)}
+      </Alert>
+    );
+  }
+
   if (!data) {
     return null;
   }

package/src/pages/customer/subscription/embed.tsx

@@ -16,6 +16,7 @@ import {
   getPrefix,
   getSubscriptionStatusColor,
   useDefaultPageSize,
+  useMobile,
 } from '@blocklet/payment-react';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 import {
@@ -60,6 +61,7 @@ export default function SubscriptionEmbed() {
   const subscriptionId = params.get('id') || '';
   const authToken = params.get('authToken') || '';
   const defaultPageSize = useDefaultPageSize(20);
+  const { isMobile } = useMobile();
   const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
   const { data } = useRequest(
     () =>
@@ -181,7 +183,7 @@ export default function SubscriptionEmbed() {
           width: '100%',
           height: '100%',
         }}>
-        <Typography component="h3" sx={{ textAlign: 'center' }} variant="h5" gutterBottom>
+        <Typography component="h3" sx={{ textAlign: 'center', fontWeight: 500 }} variant="h5" gutterBottom>
           {t('payment.customer.subscriptions.current')}
         </Typography>
         <Box sx={{ marginTop: '12px' }}>
@@ -212,8 +214,10 @@ export default function SubscriptionEmbed() {
                   return (
                     <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                       <Typography component="div" sx={{ flex: 3, gap: 1, display: 'flex', alignItems: 'center' }}>
-                        {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
-                        <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
+                        <Typography component="span" sx={{ whiteSpace: 'nowrap' }}>
+                          {formatToDate(item.created_at, locale, 'YYYY-MM-DD')}
+                        </Typography>
+                        {!isMobile && <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />}
                       </Typography>
                       <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                         {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;