payment-kit 1.13.119 → 1.13.121

package/api/src/integrations/blocklet/resource.ts

@@ -10,5 +10,6 @@ const handlePaywallResources = () => {
 
 export function initResourceHandler() {
   events.on(Events.componentAdded, handlePaywallResources);
+  events.on(Events.componentStarted, handlePaywallResources);
   events.on(Events.envUpdate, handlePaywallResources);
 }

package/api/src/libs/resource.ts

@@ -54,19 +54,17 @@ export async function initPaywallResources() {
       const config: any = JSON.parse(
         replace(fs.readFileSync(path.join(configPath!, 'config.json'), 'utf8'), {
           ...env,
-          // @ts-ignore
           monthPrice: resource.env?.MONTH_PRICE || '5',
-          // @ts-ignore
           yearPrice: resource.env?.YEAR_PRICE || '30',
+          passport: resource.env?.PASSPORT_NAME || 'discussionSubscriber',
         })
       );
       console.info('try import paywall config', config);
 
-      if (!Array.isArray(config.passports) || !config.passports.length) {
+      if (!config.passport) {
         console.warn(`invalid paywall resource from ${configPath}: passport empty`);
         continue;
       }
-
       if (!config.product) {
         console.warn(`invalid paywall resource from ${configPath}: product empty`);
         continue;
@@ -76,7 +74,7 @@ export async function initPaywallResources() {
         continue;
       }
 
-      const metadata = { source: resource.did };
+      const metadata = { source: resource.did, passport: config.passport };
       const currency = await PaymentCurrency.findOne({
         where: { is_base_currency: true, livemode: config.product.livemode },
       });
@@ -92,6 +90,12 @@ export async function initPaywallResources() {
       if (existProduct) {
         console.warn(`paywall resource already imported from path: ${configPath}`);
 
+        await existProduct.update({
+          name: config.product.name,
+          description: config.product.description,
+          metadata,
+        });
+
         // @ts-ignore
         const monthPrice = existProduct.prices.find(
           // @ts-ignore
@@ -174,26 +178,18 @@ export async function initPaywallResources() {
           });
           console.info('payment link recreated for paywall resource', { link: link.id });
 
-          await Promise.all(
-            config.passports.map((x: string) =>
-              updatePassportExtra(x, {
-                payment: { product: existProduct.id },
-                acquire: { pay: link.id },
-              })
-            )
-          );
+          await updatePassportExtra(config.passport, {
+            payment: { product: existProduct.id },
+            acquire: { pay: link.id },
+          });
           console.info('product and payment link reassociated with passport');
         } else {
           const existLink = await PaymentLink.findOne({ where: { 'metadata.source': resource.did } });
           if (existLink) {
-            await Promise.all(
-              config.passports.map((x: string) =>
-                updatePassportExtra(x, {
-                  payment: { product: existProduct.id },
-                  acquire: { pay: existLink.id },
-                })
-              )
-            );
+            await updatePassportExtra(config.passport, {
+              payment: { product: existProduct.id },
+              acquire: { pay: existLink.id },
+            });
           }
           console.info('product and payment link associated with passport again');
         }
@@ -257,14 +253,10 @@ export async function initPaywallResources() {
         });
         console.info('payment link created for paywall resource', { link: link.id });
 
-        await Promise.all(
-          config.passports.map((x: string) =>
-            updatePassportExtra(x, {
-              payment: { product: product.id },
-              acquire: { pay: link.id },
-            })
-          )
-        );
+        await updatePassportExtra(config.passport, {
+          payment: { product: product.id },
+          acquire: { pay: link.id },
+        });
         console.info('product and payment link associated with passport');
       }
       console.info(`paywall resource successfully imported from path: ${configPath}`);

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.119",
+  "version": "1.13.121",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.108",
     "@arcblock/ux": "^2.9.19",
     "@blocklet/logger": "1.16.23-beta-aeb9f5bd",
-    "@blocklet/payment-react": "1.13.119",
+    "@blocklet/payment-react": "1.13.121",
     "@blocklet/sdk": "1.16.23-beta-aeb9f5bd",
     "@blocklet/ui-react": "^2.9.19",
     "@blocklet/uploader": "^0.0.67",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23-beta-aeb9f5bd",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.119",
+    "@blocklet/payment-types": "1.13.121",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "476ee7af8213287b3953330a4ad179f4d29d4902"
+  "gitHead": "c02f337493cf7dac11324447534cf8684b763064"
 }

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

@@ -5,7 +5,8 @@ import type { Paginated, TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Avatar, AvatarGroup, Box, Button, CircularProgress, Stack, StackProps, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 
-import { formatSubscriptionProduct, getSubscriptionStatusColor } from '../../../libs/util';
+import { getSubscriptionStatusColor } from '../../../libs/util';
+import SubscriptionDescription from '../../subscription/description';
 import SubscriptionActions from './actions';
 
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscriptionExpanded>> => {
@@ -96,9 +97,7 @@ export default function CurrentSubscriptions({ id, onChange, onClickSubscription
                 </AvatarGroup>
                 <Stack direction="column" spacing={0.5}>
                   <Stack direction="row" spacing={2} alignItems="center">
-                    <Typography variant="body1" fontWeight={600}>
-                      {formatSubscriptionProduct(subscription.items)}
-                    </Typography>
+                    <SubscriptionDescription subscription={subscription} />
                     <Status
                       size="small"
                       sx={{ height: 18 }}

package/src/components/subscription/description.tsx

@@ -0,0 +1,35 @@
+import type { TSubscriptionExpanded } from '@blocklet/payment-types';
+import { InfoOutlined } from '@mui/icons-material';
+import { Stack, Tooltip, Typography } from '@mui/material';
+
+import { formatSubscriptionProduct } from '../../libs/util';
+
+type Props = {
+  subscription: TSubscriptionExpanded;
+  variant?: 'body1' | 'h5';
+};
+
+export default function SubscriptionDescription({ subscription, variant }: Props) {
+  if (subscription.description) {
+    return (
+      <Stack direction="row" alignItems="center" spacing={1}>
+        <Typography variant={variant} fontWeight={600}>
+          {subscription.description}
+        </Typography>
+        <Tooltip title={formatSubscriptionProduct(subscription.items)}>
+          <InfoOutlined sx={{ color: 'text.secondary' }} fontSize="small" />
+        </Tooltip>
+      </Stack>
+    );
+  }
+
+  return (
+    <Typography variant={variant} fontWeight={600}>
+      {formatSubscriptionProduct(subscription.items)}
+    </Typography>
+  );
+}
+
+SubscriptionDescription.defaultProps = {
+  variant: 'body1',
+};

package/src/components/subscription/list.tsx

@@ -8,9 +8,9 @@ import { useRequest } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { formatSubscriptionProduct } from '../../libs/util';
 import Table from '../table';
 import SubscriptionActions from './actions';
+import SubscriptionDescription from './description';
 import SubscriptionStatus from './status';
 
 const fetchData = (params: Record<string, any> = {}): Promise<{ list: TSubscriptionExpanded[]; count: number }> => {
@@ -88,7 +88,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
-          return formatSubscriptionProduct(item.items);
+          return <SubscriptionDescription subscription={item} />;
         },
       },
     },
@@ -146,6 +146,7 @@ export default function SubscriptionList({ customer_id, features, status }: List
       label: t('common.customer'),
       name: 'customer_id',
       options: {
+        // @ts-ignore
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TSubscriptionExpanded;
           return item.customer.email;

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -161,6 +161,7 @@ export default function SubscriptionDetail(props: { id: string }) {
               value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
             />
           )}
+          {!!data.description && <InfoRow label={t('common.description')} value={data.description} />}
         </Stack>
       </Box>
       <Box className="section">

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

@@ -14,10 +14,10 @@ import InfoRow from '../../../components/info-row';
 import InvoiceList from '../../../components/invoice/list';
 import SubscriptionActions from '../../../components/portal/subscription/actions';
 import SectionHeader from '../../../components/section/header';
+import SubscriptionDescription from '../../../components/subscription/description';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
 import SubscriptionStatus from '../../../components/subscription/status';
-import { formatSubscriptionProduct } from '../../../libs/util';
 
 const fetchData = (id: string | undefined): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -53,9 +53,7 @@ export default function CustomerSubscriptionDetail() {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="row" alignItems="center">
-              <Typography variant="h5" sx={{ fontWeight: 600 }}>
-                {formatSubscriptionProduct(data.items)}
-              </Typography>
+              <SubscriptionDescription subscription={data} variant="h5" />
               <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
             </Stack>
             <SubscriptionActions subscription={data} onChange={() => refresh()} showUpdate />