payment-kit 1.17.0 → 1.17.1

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.165",
     "@blocklet/js-sdk": "^1.16.36",
     "@blocklet/logger": "^1.16.36",
-    "@blocklet/payment-react": "1.17.0",
+    "@blocklet/payment-react": "1.17.1",
     "@blocklet/sdk": "^1.16.36",
     "@blocklet/ui-react": "^2.11.15",
     "@blocklet/uploader": "^0.1.60",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.36",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.17.0",
+    "@blocklet/payment-types": "1.17.1",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -166,5 +166,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "b25f7f7c1990a01db3c43dff90eecb65f37bd5d7"
+  "gitHead": "fe7302197bbf98d5490f8bc0d6738d9c51c53646"
 }

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

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import DidAddress from '@arcblock/ux/lib/DID';
 import {
   Status,
   api,
@@ -10,6 +11,7 @@ import {
   formatTime,
   formatToDate,
   formatToDatetime,
+  getCustomerAvatar,
   getDidConnectQueryParams,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
@@ -37,6 +39,8 @@ import { useRequest } from 'ahooks';
 import { useMemo } from 'react';
 import { joinURL, withQuery } from 'ufo';
 import prettyMs from 'pretty-ms-i18n';
+import InfoRow from '../../../components/info-row';
+import InfoCard from '../../../components/info-card';
 
 const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
@@ -110,7 +114,7 @@ export default function SubscriptionEmbed() {
 
   const invoices = data?.list || [];
 
-  const infoList = [
+  const infoList: { name: string; value: React.ReactNode }[] = [
     {
       name: t('payment.customer.subscriptions.plan'),
       value: (
@@ -167,11 +171,25 @@ export default function SubscriptionEmbed() {
         </Typography>
       ),
     });
+
+    infoList.push({
+      name: t('payment.customer.subscriptions.owner'),
+      value: (
+        <InfoCard
+          logo={getCustomerAvatar(
+            subscription.customer.did,
+            subscription.customer.updated_at ? new Date(subscription.customer.updated_at).toISOString() : '',
+            48
+          )}
+          name={subscription.customer.email}
+          description={<DidAddress did={subscription.customer.did} responsive />}
+        />
+      ),
+    });
   }
 
   return (
     <Position>
-      <Typography title={t('payment.checkout.subscription')} />
       <Box
         className="mini-invoice-wrap"
         sx={{
@@ -179,27 +197,21 @@ export default function SubscriptionEmbed() {
           flexDirection: 'column',
           alignItem: 'center',
           justifyContent: 'flex-start',
-          padding: '16px',
+          padding: '8px',
+          gap: '12px',
           width: '100%',
           height: '100%',
         }}>
-        <Typography component="h3" sx={{ textAlign: 'center', fontWeight: 500 }} variant="h5" gutterBottom>
+        <Typography component="h2" sx={{ textAlign: 'center' }} variant="h3" gutterBottom>
           {t('payment.customer.subscriptions.current')}
         </Typography>
-        <Box sx={{ marginTop: '12px' }}>
-          <List>
-            {infoList.map(({ name, value }) => {
-              return (
-                <ListItem key={name} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span">{name}</Typography>
-                  <Typography component="span">{value}</Typography>
-                </ListItem>
-              );
-            })}
-          </List>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {infoList.map(({ name, value }) => {
+            return <InfoRow label={name} value={value} direction="column" alignItems="flex-start" sx={{ mb: 0 }} />;
+          })}
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px', flex: 1, overflow: 'hidden' }}>
+        <Box sx={{ flex: 1, overflow: 'hidden' }}>
           <List sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
@@ -273,7 +285,7 @@ function Position({ children }: any) {
         maxWidth: '500px',
         background: '#fff',
         margin: '0 auto',
-        height: '100%',
+        height: '100vh',
       }}>
       {children}
     </Box>