payment-kit 1.15.16 → 1.15.18

package/api/tests/libs/util.spec.ts

@@ -10,7 +10,9 @@ import {
   getDataObjectFromQuery,
   getNextRetry,
   tryWithTimeout,
+  getSubscriptionNotificationCustomActions,
 } from '../../src/libs/util';
+import type { Subscription } from '../../src/store/models';
 
 describe('createIdGenerator', () => {
   it('should return a function that generates an ID with the specified prefix and size', () => {
@@ -240,3 +242,136 @@ describe('formatAmountPrecisionLimit', () => {
     expect(result).toBe('');
   });
 });
+
+describe('getSubscriptionNotificationCustomActions', () => {
+  const mockSubscription: Partial<Subscription> = {
+    service_actions: [
+      {
+        type: 'notification',
+        triggerEvents: ['customer.subscription.started', 'customer.subscription.renewed'],
+        name: 'Action 1',
+        text: { en: 'Action 1 Text', zh: '操作1文本' },
+        link: 'https://example.com/action1',
+        color: 'blue',
+        variant: 'outlined',
+      },
+      {
+        type: 'notification',
+        triggerEvents: ['customer.subscription.renewed', 'customer.subscription.upgraded'],
+        name: 'Action 2',
+        text: { en: 'Action 2 Text', zh: '操作2文本' },
+        link: 'https://example.com/action2',
+        color: 'green',
+        variant: 'contained',
+      },
+      {
+        type: 'other',
+        triggerEvents: ['customer.subscription.started'],
+        name: 'Action 3',
+        text: { en: 'Action 3 Text', zh: '操作3文本' },
+        link: 'https://example.com/action3',
+        color: 'red',
+        variant: 'text',
+      },
+    ],
+  };
+
+  it('should return an empty array if subscription is null', () => {
+    const result = getSubscriptionNotificationCustomActions(null as any, 'customer.subscription.started', 'en');
+    expect(result).toEqual([]);
+  });
+
+  it('should return an empty array if service_actions is empty', () => {
+    const result = getSubscriptionNotificationCustomActions(
+      { service_actions: [] } as any,
+      'customer.subscription.started',
+      'en'
+    );
+    expect(result).toEqual([]);
+  });
+
+  it('should filter actions based on event type and return formatted actions with color and variant', () => {
+    const result = getSubscriptionNotificationCustomActions(
+      mockSubscription as any,
+      'customer.subscription.renewed',
+      'en'
+    );
+    expect(result).toEqual([
+      {
+        name: 'Action 1',
+        title: 'Action 1 Text',
+        link: 'https://example.com/action1',
+      },
+      {
+        name: 'Action 2',
+        title: 'Action 2 Text',
+        link: 'https://example.com/action2',
+      },
+    ]);
+  });
+
+  it('should return actions with correct locale, color, and variant', () => {
+    const result = getSubscriptionNotificationCustomActions(
+      mockSubscription as any,
+      'customer.subscription.renewed',
+      'zh'
+    );
+    expect(result).toEqual([
+      {
+        name: 'Action 1',
+        title: '操作1文本',
+        link: 'https://example.com/action1',
+      },
+      {
+        name: 'Action 2',
+        title: '操作2文本',
+        link: 'https://example.com/action2',
+      },
+    ]);
+  });
+
+  it('should not return actions of non-notification type', () => {
+    const result = getSubscriptionNotificationCustomActions(
+      mockSubscription as any,
+      'customer.subscription.started',
+      'en'
+    );
+    expect(result).toEqual([
+      {
+        name: 'Action 1',
+        title: 'Action 1 Text',
+        link: 'https://example.com/action1',
+      },
+    ]);
+  });
+
+  it('should return an empty array if no matching actions found', () => {
+    const result = getSubscriptionNotificationCustomActions(
+      mockSubscription as any,
+      'customer.subscription.deleted',
+      'en'
+    );
+    expect(result).toEqual([]);
+  });
+
+  it('should handle all valid NotificationActionEvents', () => {
+    const allEvents = [
+      'customer.subscription.started',
+      'customer.subscription.renewed',
+      'customer.subscription.renew_failed',
+      'refund.succeeded',
+      'subscription.stake.slash.succeeded',
+      'customer.subscription.trial_will_end',
+      'customer.subscription.trial_start',
+      'customer.subscription.upgraded',
+      'customer.subscription.will_renew',
+      'customer.subscription.will_canceled',
+      'customer.subscription.deleted',
+    ];
+
+    allEvents.forEach((event) => {
+      const result = getSubscriptionNotificationCustomActions(mockSubscription as any, event, 'en');
+      expect(Array.isArray(result)).toBeTruthy();
+    });
+  });
+});

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.15.16",
+  "version": "1.15.18",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -45,18 +45,18 @@
     "@abtnode/cron": "^1.16.32",
     "@arcblock/did": "^1.18.135",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.10.39",
+    "@arcblock/did-connect": "^2.10.45",
     "@arcblock/did-util": "^1.18.135",
     "@arcblock/jwt": "^1.18.135",
-    "@arcblock/ux": "^2.10.39",
+    "@arcblock/ux": "^2.10.45",
     "@arcblock/validator": "^1.18.135",
     "@blocklet/js-sdk": "^1.16.32",
     "@blocklet/logger": "^1.16.32",
-    "@blocklet/payment-react": "1.15.16",
+    "@blocklet/payment-react": "1.15.18",
     "@blocklet/sdk": "^1.16.32",
-    "@blocklet/ui-react": "^2.10.39",
-    "@blocklet/uploader": "^0.1.40",
-    "@blocklet/xss": "^0.1.7",
+    "@blocklet/ui-react": "^2.10.45",
+    "@blocklet/uploader": "^0.1.43",
+    "@blocklet/xss": "^0.1.9",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -118,7 +118,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.32",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@blocklet/payment-types": "1.15.16",
+    "@blocklet/payment-types": "1.15.18",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -144,7 +144,7 @@
     "typescript": "^4.9.5",
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
-    "vite-plugin-blocklet": "^0.9.8",
+    "vite-plugin-blocklet": "^0.9.11",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -160,5 +160,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "6514eec9e9d7c69735a76ac097644248b3634b3f"
+  "gitHead": "f57a3e622d9701fa0421f1266efc2fd92bd84780"
 }

package/scripts/sdk.js

@@ -86,9 +86,43 @@ const payment = require('@blocklet/payment-js').default;
   //   cancel_url:
   //     'https://bbqa2t5pfyfroyobmzknmktshckzto4btkfagxyjqwy.did.abtnet.io/store/api/payment/cancel?redirect=https://bbqa2t5pfyfroyobmzknmktshckzto4btkfagxyjqwy.did.abtnet.io/maker/mint/z3CtLCSchoZj4H5gqwyATSAEdvfd1m88VnDUZ',
   //   mode: 'payment',
-  //   line_items: [{ price_id: 'price_wc1WPJy7FrbX1CBPJj7zuIys', quantity: 2 }],
-  //   metadata: { factoryAddress: 'z3CtLCSchoZj4H5gqwyATSAEdvfd1m88VnDUZ', quantity: 2 },
-  //   expires_at: 1721121607,
+  //   line_items: [
+  //     { price_id: 'price_G7TE6QZbvqkIaqzDJVb2afws', quantity: 2 },
+  //     { price_id: 'price_rOUdD9fQrBGqn6M3YywXdDeK', quantity: 2 },
+  //   ],
+  //   subscription_data: {
+  //     service_actions: [
+  //       {
+  //         type: 'notification',
+  //         text: {
+  //           zh: '查看文档',
+  //           en: 'View Documentation',
+  //         },
+  //         link: 'https://www.arcblock.io/docs/createblocklet/en/quick-start',
+  //         triggerEvents: ['customer.subscription.started', 'customer.subscription.deleted'],
+  //       },
+  //       {
+  //         type: 'notification',
+  //         text: {
+  //           zh: '社区提问',
+  //           en: 'Ask in Community',
+  //         },
+  //         link: 'https://community.arcblock.io/?locale=en',
+  //         triggerEvents: ['customer.subscription.started', 'customer.subscription.renewed'],
+  //       },
+  //       {
+  //         type: 'custom',
+  //         text: {
+  //           zh: '查看',
+  //           en: 'View',
+  //         },
+  //         link: 'https://www.arcblock.io/docs/createblocklet/en/quick-start',
+  //         color: 'primary',
+  //         variant: 'outlined',
+  //       },
+  //     ],
+  //   },
+  //   expires_at: 1729243800,
   // });
   // console.log('checkoutSession', checkoutSession);
   // const product = await payment.products.create({

package/src/components/invoice/list.tsx

@@ -229,7 +229,6 @@ export default function InvoiceList({
     columns.splice(3, 0, {
       label: t('common.customer'),
       name: 'customer_id',
-      width: 80,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;

package/src/components/invoice/table.tsx

@@ -11,6 +11,7 @@ import { styled } from '@mui/system';
 import { isEmpty } from 'lodash';
 import LineItemActions from '../subscription/items/actions';
 import { UsageRecordDialog } from '../subscription/items/usage-records';
+import { getInvoiceUsageReportStartEnd } from '../../libs/util';
 
 type Props = {
   invoice: TInvoiceExpanded;
@@ -122,6 +123,8 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
     subscriptionItemId: '',
   });
 
+  const usageReportRange = getInvoiceUsageReportStartEnd(invoice, true);
+
   const onOpenUsageRecords = (line: InvoiceDetailItem) => {
     if (line.rawQuantity && line.raw.subscription_id && line.raw.subscription_item_id) {
       setState({
@@ -271,8 +274,10 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
           subscriptionId={state.subscriptionId}
           id={state.subscriptionItemId}
           onConfirm={onCloseUsageRecords}
-          start={invoice.metadata?.usage_start || invoice.period_start}
-          end={invoice.metadata?.usage_end || invoice.period_end}
+          start={usageReportRange.start}
+          end={usageReportRange.end}
+          title={t('admin.subscription.usage.title')}
+          disableAddUsageQuantity
         />
       )}
     </Root>

package/src/components/subscription/items/index.tsx

@@ -4,6 +4,7 @@ import { formatPrice, Table, TruncatedText, useMobile } from '@blocklet/payment-
 import type { TPaymentCurrency, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 import { Avatar, Stack, Typography } from '@mui/material';
 
+import { Link } from 'react-router-dom';
 import Copyable from '../../copyable';
 import LineItemActions from './actions';
 import UsageRecords from './usage-records';
@@ -23,6 +24,8 @@ const size = { width: 48, height: 48 };
 export default function SubscriptionItemList({ data, currency, mode }: ListProps) {
   const { t } = useLocaleContext();
   const { isMobile } = useMobile();
+  const isAdmin = mode === 'admin';
+
   const columns = [
     {
       label: t('admin.subscription.product'),
@@ -53,13 +56,29 @@ export default function SubscriptionItemList({ data, currency, mode }: ListProps
                   {item.price.product.name.slice(0, 1)}
                 </Avatar>
               )}
-              <Typography color="text.primary" fontWeight={600}>
-                <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
-                {mode === 'customer' ? '' : ` - ${item?.price_id}`}
-              </Typography>
-              <Typography color="text.secondary" whiteSpace="nowrap">
-                {formatPrice(item.price, currency, item?.price.product.unit_label)}
-              </Typography>
+              {isAdmin ? (
+                <>
+                  <Typography color="text.primary" fontWeight={600}>
+                    <Link to={`/admin/products/${item?.price.product_id}`}>
+                      <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
+                    </Link>
+                  </Typography>
+                  <Typography color="text.secondary" whiteSpace="nowrap">
+                    <Link to={`/admin/products/${item?.price.id}`}>
+                      {formatPrice(item.price, currency, item?.price.product.unit_label)}
+                    </Link>
+                  </Typography>
+                </>
+              ) : (
+                <>
+                  <Typography color="text.primary" fontWeight={600}>
+                    <TruncatedText text={item?.price.product.name} maxLength={isMobile ? 20 : 50} useWidth />
+                  </Typography>
+                  <Typography color="text.secondary" whiteSpace="nowrap">
+                    {formatPrice(item.price, currency, item?.price.product.unit_label)}
+                  </Typography>
+                </>
+              )}
             </Stack>
           );
         },

package/src/components/subscription/items/usage-records.tsx

@@ -2,9 +2,9 @@
 import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { TUsageRecord } from '@blocklet/payment-types';
-import { Alert, Box, Button, CircularProgress, TextField } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, TextField, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 import { Bar, BarChart, Rectangle, Tooltip, XAxis, YAxis } from 'recharts';
@@ -47,17 +47,21 @@ function addUsageQuantity({
 }
 
 export function UsageRecordDialog({
+  title,
   subscriptionId,
   id,
   onConfirm,
   start = 0,
   end = 0,
+  disableAddUsageQuantity = false,
 }: {
+  title?: string;
   subscriptionId: string;
   id: string;
   onConfirm: any;
   start?: number;
   end?: number;
+  disableAddUsageQuantity?: boolean;
 }) {
   const { t } = useLocaleContext();
   const { loading, error, data } = useRequest(() => fetchData(subscriptionId, id, start, end), {
@@ -69,7 +73,7 @@ export function UsageRecordDialog({
   if (error) {
     return (
       <ConfirmDialog
-        title={t('admin.subscription.usage.current')}
+        title={title || t('admin.subscription.usage.current')}
         message={<Alert severity="error">{error.message}</Alert>}
         onConfirm={onConfirm}
         onCancel={onConfirm}
@@ -82,7 +86,7 @@ export function UsageRecordDialog({
   if (loading || !data) {
     return (
       <ConfirmDialog
-        title={t('admin.subscription.usage.current')}
+        title={title || t('admin.subscription.usage.current')}
         message={<CircularProgress />}
         onConfirm={onConfirm}
         onCancel={onConfirm}
@@ -109,12 +113,17 @@ export function UsageRecordDialog({
   };
   return (
     <ConfirmDialog
-      title={t('admin.subscription.usage.current')}
+      title={title || t('admin.subscription.usage.current')}
       message={
         <>
+          {start && end ? (
+            <Typography variant="h6" mb={2}>
+              {t('admin.subscription.usage.cycle')}: {formatTime(start * 1000)} - {formatTime(end * 1000)}
+            </Typography>
+          ) : null}
           {data.list.length > 0 ? (
             <BarChart
-              width={480}
+              width={540}
               height={240}
               data={data.list.map((item) => ({
                 ...item,
@@ -123,7 +132,7 @@ export function UsageRecordDialog({
               margin={{
                 top: 5,
                 right: 5,
-                left: 0,
+                left: 5,
                 bottom: 5,
               }}>
               <Tooltip />
@@ -138,8 +147,8 @@ export function UsageRecordDialog({
           ) : (
             <Empty>{t('admin.usageRecord.empty')}</Empty>
           )}
-          {!settings.livemode && window.location.pathname.includes('/admin/billing') && (
-            <Box sx={{ display: 'flex', justifyContent: 'center' }} pt={1} pb={1}>
+          {!settings.livemode && window.location.pathname.includes('/admin/billing') && !disableAddUsageQuantity && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} pt={1} pb={1} gap={1}>
               <TextField
                 id="add-usage-record"
                 label={t('admin.usageRecord.add.quantity')}
@@ -151,7 +160,9 @@ export function UsageRecordDialog({
                 value={usageQuantity}
                 onChange={(e) => setUsageQuantity(+e.target.value)}
               />
-              <Button onClick={handAddUsageQuantity}>{t('admin.usageRecord.add.label')}</Button>
+              <Button onClick={handAddUsageQuantity} sx={{ color: 'text.link' }}>
+                {t('admin.usageRecord.add.label')}
+              </Button>
             </Box>
           )}
         </>

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

@@ -167,20 +167,22 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange, ac
           {action?.text || t('admin.subscription.batchPay.button')}
         </Button>
       )}
-      {subscription.service_actions?.map((x) => (
-        // @ts-ignore
-        <Button
-          component={Link}
-          key={x.name}
-          variant={x.variant}
-          color={x.color}
-          href={x.link}
-          size="small"
-          target="_blank"
-          sx={{ textDecoration: 'none !important' }}>
-          {x.text[locale] || x.text.en || x.name}
-        </Button>
-      ))}
+      {subscription.service_actions
+        ?.filter((x: any) => x?.type !== 'notification')
+        .map((x) => (
+          // @ts-ignore
+          <Button
+            component={Link}
+            key={x.name}
+            variant={x?.variant || 'contained'}
+            color={x?.color || 'primary'}
+            href={x.link}
+            size="small"
+            target="_blank"
+            sx={{ textDecoration: 'none !important' }}>
+            {x.text[locale] || x.text.en || x.name}
+          </Button>
+        ))}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleCancel}

package/src/libs/util.ts

@@ -4,6 +4,8 @@
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
   LineItem,
+  PriceRecurring,
+  TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
@@ -271,3 +273,52 @@ export function isEmptyExceptNumber(value: any): boolean {
   }
   return isEmpty(value);
 }
+
+export function getRecurringPeriod(recurring: PriceRecurring) {
+  const { interval } = recurring;
+  const count = +recurring.interval_count || 1;
+  const dayInMs = 24 * 60 * 60 * 1000;
+
+  switch (interval) {
+    case 'hour':
+      return 60 * 60 * 1000;
+    case 'day':
+      return count * dayInMs;
+    case 'week':
+      return count * 7 * dayInMs;
+    case 'month':
+      return count * 30 * dayInMs;
+    case 'year':
+      return count * 365 * dayInMs;
+    default:
+      return 0;
+  }
+}
+
+export function getInvoiceUsageReportStartEnd(invoice: TInvoiceExpanded, showPreviousPeriod: boolean = false) {
+  const { subscription, paymentMethod } = invoice;
+  const usageReportRange = {
+    start: invoice.metadata?.usage_start || invoice.period_start,
+    end: invoice.metadata?.usage_end || invoice.period_end,
+  };
+  if (!subscription || !showPreviousPeriod) {
+    return usageReportRange;
+  }
+  if (invoice?.billing_reason === 'subscription_cancel') {
+    return usageReportRange;
+  }
+  const cycle = getRecurringPeriod(subscription.pending_invoice_item_interval);
+  let offset = 0;
+  if (['arcblock', 'ethereum'].includes(paymentMethod.type)) {
+    switch (invoice?.billing_reason) {
+      case 'subscription_cycle':
+        offset = cycle / 1000;
+        break;
+      default:
+        break;
+    }
+  }
+  usageReportRange.start = invoice.period_start - offset;
+  usageReportRange.end = invoice.period_end - offset;
+  return usageReportRange;
+}

package/src/locales/en.tsx

@@ -500,9 +500,11 @@ export default flat({
       usage: {
         title: 'Usage records',
         current: 'Usage records for current period',
+        range: 'Usage records for {start} - {end}',
         view: 'View usage',
         vary: 'Varies with usage',
         used: 'Unit used',
+        cycle: 'Usage cycle',
       },
       batchPay: {
         button: 'Pay due invoices',

package/src/locales/zh.tsx

@@ -489,9 +489,11 @@ export default flat({
       usage: {
         title: '使用记录',
         current: '当前周期的使用记录',
+        range: '周期使用记录（{start} - {end}）',
         view: '查看使用情况',
         vary: '随使用情况变化',
         used: '已使用单位',
+        cycle: '统计周期',
       },
       batchPay: {
         button: '批量付款',

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

@@ -315,7 +315,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.product.pricing')} />
             <Box className="section-body">
-              <SubscriptionItemList data={data.items} currency={data.paymentCurrency} />
+              <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="admin" />
             </Box>
           </Box>
           <Divider />

package/src/pages/customer/subscription/change-plan.tsx

@@ -200,7 +200,7 @@ export default function CustomerSubscriptionChangePlan() {
   };
 
   const table = { ...data.table, currency: data.subscription.paymentCurrency };
-  table.items.forEach((x: any) => {
+  (table.items || []).forEach((x: any) => {
     x.is_selected = x.price_id === state.priceId;
     if (data.subscription.items.find((y) => y.price_id === x.price_id)) {
       x.is_highlight = true;

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

@@ -228,20 +228,22 @@ export default function SubscriptionEmbed() {
           </List>
         </Box>
         <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
-          {subscription.service_actions?.map((x) => (
-            // @ts-ignore
-            <Button
-              component={Link}
-              key={x.name}
-              variant={x.variant}
-              color={x.color}
-              href={x.link}
-              size="small"
-              target="_blank"
-              sx={{ textDecoration: 'none !important' }}>
-              {x.text[locale] || x.text.en || x.name}
-            </Button>
-          ))}
+          {subscription.service_actions
+            ?.filter((x: any) => x?.type !== 'notification')
+            ?.map((x) => (
+              // @ts-ignore
+              <Button
+                component={Link}
+                key={x.name}
+                variant={x?.variant || 'contained'}
+                color={x.color || 'primary'}
+                href={x.link}
+                size="small"
+                target="_blank"
+                sx={{ textDecoration: 'none !important' }}>
+                {x.text[locale] || x.text.en || x.name}
+              </Button>
+            ))}
           <Button
             variant="contained"
             sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}

package/vite-server.config.ts

@@ -6,6 +6,14 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
+    resolve: {
+      alias: {
+        crypto: 'node:crypto',
+      },
+    },
     plugins: [tsconfigPaths()],
+    server: {
+      hmr: false,
+    },
   };
 });