payment-kit 1.18.34 → 1.18.36

package/api/src/routes/customers.ts

@@ -25,6 +25,8 @@ import {
 import { getSubscriptionPaymentAddress, calculateRecommendedRechargeAmount } from '../libs/subscription';
 import { expandLineItems } from '../libs/session';
 import { handleNotificationPreferenceChange } from '../queues/notification';
+import { getEndpointAndSpaceDid } from '../libs/did-space';
+import { spaceQueue } from '../queues/space';
 
 const router = Router();
 const auth = authenticate<Customer>({ component: true, roles: ['owner', 'admin'] });
@@ -172,6 +174,51 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
   }
 });
 
+router.post('/sync-to-space', sessionMiddleware(), async (req, res) => {
+  if (!req.user) {
+    return res.status(403).json({ error: 'Unauthorized' });
+  }
+  try {
+    const userDid = req.user.did;
+    const jobId = `space-${userDid}`;
+    const { endpoint } = await getEndpointAndSpaceDid(userDid);
+    if (endpoint) {
+      const mainTask = await spaceQueue.get(jobId);
+      if (mainTask) {
+        return res.json({
+          success: true,
+          message: 'Billing data sync already in progress',
+        });
+      }
+      spaceQueue.push({
+        id: jobId,
+        job: {
+          type: 'customer',
+          data: {
+            id: userDid,
+          },
+        },
+        delay: 60, // delay 1min
+      });
+      logger.info('Queued billing sync to DID Space for user:', { did: req.user.did });
+
+      return res.json({
+        success: true,
+        message: 'Billing data sync will start soon',
+      });
+    }
+    return res.json({
+      success: false,
+      message: 'No endpoint found for the user',
+    });
+  } catch (error) {
+    return res.json({
+      success: false,
+      message: error.message,
+    });
+  }
+});
+
 // get overdue invoices
 router.get('/:id/overdue/invoices', sessionMiddleware(), async (req, res) => {
   if (!req.user) {

package/api/src/store/models/invoice.ts

@@ -298,7 +298,12 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
         'subscription_cancel',
         'subscription',
         'manual',
-        'upcoming'
+        'upcoming',
+        'slash_stake',
+        'stake',
+        'overdraft_protection',
+        'stake_overdraft_protection',
+        'recharge'
       ),
     },
     custom_fields: {
@@ -469,8 +474,12 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
         createdAt: 'created_at',
         updatedAt: 'updated_at',
         hooks: {
-          afterCreate: (model: Invoice, options) =>
-            createEvent('Invoice', 'invoice.created', model, options).catch(console.error),
+          afterCreate: (model: Invoice, options) => {
+            createEvent('Invoice', 'invoice.created', model, options).catch(console.error);
+            if (model.status === 'paid') {
+              createEvent('Invoice', 'invoice.paid', model, options).catch(console.error);
+            }
+          },
           afterUpdate: (model: Invoice, options) => {
             createEvent('Invoice', 'invoice.updated', model, options).catch(console.error);
             createStatusEvent(

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

@@ -13,8 +13,14 @@ import {
   getSubscriptionNotificationCustomActions,
   isUserInBlocklist,
   api,
+  md5,
+  safeJsonParse,
+  getExplorerLink,
+  resolveAddressChainTypes,
+  formatCurrencyInfo,
+  getExplorerTxUrl,
 } from '../../src/libs/util';
-import type { Subscription, PaymentMethod } from '../../src/store/models';
+import type { Subscription, PaymentMethod, PaymentCurrency } from '../../src/store/models';
 
 import { blocklet } from '../../src/libs/auth';
 import logger from '../../src/libs/logger';
@@ -653,3 +659,211 @@ describe('isUserInBlocklist', () => {
     expect(result).toBe(true);
   });
 });
+
+describe('md5', () => {
+  it('should generate a consistent hash for the same input', () => {
+    const input = 'test-string';
+    const result1 = md5(input);
+    const result2 = md5(input);
+    expect(result1).toBe(result2);
+  });
+
+  it('should generate different hashes for different inputs', () => {
+    const result1 = md5('test-string-1');
+    const result2 = md5('test-string-2');
+    expect(result1).not.toBe(result2);
+  });
+
+  it('should return a 32 character hexadecimal string', () => {
+    const result = md5('test-string');
+    expect(result).toMatch(/^[0-9a-f]{32}$/);
+  });
+});
+
+describe('safeJsonParse', () => {
+  it('should parse valid JSON strings', () => {
+    const input = '{"key":"value","number":123}';
+    const result = safeJsonParse(input, null);
+    expect(result).toEqual({ key: 'value', number: 123 });
+  });
+
+  it('should return the default value when parsing invalid JSON', () => {
+    const input = '{invalid json}';
+    const defaultValue = { default: true };
+    const result = safeJsonParse(input, defaultValue);
+    expect(result).toEqual(defaultValue);
+  });
+
+  it('should return the input when parsing fails and no default value is provided', () => {
+    const input = '{invalid json}';
+    const result = safeJsonParse(input, undefined);
+    expect(result).toBe(input);
+  });
+});
+
+describe('getExplorerLink', () => {
+  it('should return undefined when chainHost is not provided', () => {
+    const result = getExplorerLink({
+      type: 'asset',
+      did: 'did:example:123',
+      chainHost: undefined,
+    });
+    expect(result).toBeUndefined();
+  });
+
+  it('should construct a proper asset URL with the given parameters', () => {
+    const result = getExplorerLink({
+      type: 'asset',
+      did: 'did:example:123',
+      chainHost: 'https://chain.example.com',
+    });
+    expect(result).toBe('https://chain.example.com/explorer/assets/did:example:123');
+  });
+
+  it('should construct a proper account URL with the given parameters', () => {
+    const result = getExplorerLink({
+      type: 'account',
+      did: 'did:example:123',
+      chainHost: 'https://chain.example.com',
+    });
+    expect(result).toBe('https://chain.example.com/explorer/accounts/did:example:123');
+  });
+
+  it('should append query parameters when provided', () => {
+    const result = getExplorerLink({
+      type: 'tx',
+      did: 'txhash123',
+      chainHost: 'https://chain.example.com',
+      queryParams: { foo: 'bar', baz: 'qux' },
+    });
+    expect(result).toBe('https://chain.example.com/explorer/txs/txhash123?foo=bar&baz=qux');
+  });
+
+  it('should construct a default URL when type is not recognized', () => {
+    const result = getExplorerLink({
+      type: 'unknown',
+      did: 'did:example:123',
+      chainHost: 'https://chain.example.com',
+    });
+    expect(result).toBe('https://chain.example.com/');
+  });
+
+  it('should handle invalid chain host URLs', () => {
+    const result = getExplorerLink({
+      type: 'asset',
+      did: 'did:example:123',
+      chainHost: 'invalid-url',
+    });
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('resolveAddressChainTypes', () => {
+  it('should return ethereum, base, and arcblock for Ethereum addresses', () => {
+    const result = resolveAddressChainTypes('0x71C7656EC7ab88b098defB751B7401B5f6d8976F');
+    expect(result).toEqual(['ethereum', 'base', 'arcblock']);
+  });
+
+  it('should return arcblock for non-Ethereum addresses', () => {
+    const result = resolveAddressChainTypes('did:abt:z1muQ3xqHQK2uiACHyChikobsiY5kLqtShA');
+    expect(result).toEqual(['arcblock']);
+  });
+});
+
+describe('formatCurrencyInfo', () => {
+  it('should format amount with currency symbol when isToken is true', () => {
+    const paymentCurrency = { symbol: 'ETH', decimal: 18 } as PaymentCurrency;
+    const result = formatCurrencyInfo('10', paymentCurrency, null, true);
+    expect(result).toBe('10 ETH');
+  });
+
+  it('should use fromUnitToToken to format amount when isToken is false', () => {
+    const paymentCurrency = { symbol: 'ETH', decimal: 18 } as PaymentCurrency;
+    // Mock the fromUnitToToken function to return a predictable value
+    // In a real test, you might use jest.mock to mock this dependency
+    // For this example, we'll assume fromUnitToToken converts correctly
+    const result = formatCurrencyInfo('1000000000000000000', paymentCurrency, null);
+    // In reality, this would be '1 ETH'
+    expect(result).toContain('ETH');
+  });
+
+  it('should include payment method name for non-arcblock payment methods', () => {
+    const paymentCurrency = { symbol: 'USD', decimal: 2 } as PaymentCurrency;
+    const paymentMethod = { type: 'stripe', name: 'Credit Card' } as PaymentMethod;
+    const result = formatCurrencyInfo('1000', paymentCurrency, paymentMethod, true);
+    expect(result).toBe('1000 USD (Credit Card)');
+  });
+
+  it('should not include payment method name for arcblock payment methods', () => {
+    const paymentCurrency = { symbol: 'ABT', decimal: 18 } as PaymentCurrency;
+    const paymentMethod = { type: 'arcblock', name: 'ArcBlock' } as PaymentMethod;
+    const result = formatCurrencyInfo('5', paymentCurrency, paymentMethod, true);
+    expect(result).toBe('5 ABT');
+  });
+
+  it('should handle undefined or empty amount', () => {
+    const paymentCurrency = { symbol: 'ETH', decimal: 18 } as PaymentCurrency;
+    const result = formatCurrencyInfo('', paymentCurrency, null, true);
+    expect(result).toBe('0 ETH');
+  });
+
+  it('should use default values when currency information is missing', () => {
+    const paymentCurrency = {} as PaymentCurrency;
+    const result = formatCurrencyInfo('10', paymentCurrency, null, true);
+    expect(result).toBe('10 ');
+  });
+});
+
+describe('getExplorerTxUrl', () => {
+  it('should return empty string when explorerHost or txHash is not provided', () => {
+    const result1 = getExplorerTxUrl({
+      explorerHost: '',
+      txHash: 'hash123',
+      type: 'ethereum',
+    });
+    expect(result1).toBe('');
+
+    const result2 = getExplorerTxUrl({
+      explorerHost: 'https://explorer.example.com',
+      txHash: '',
+      type: 'ethereum',
+    });
+    expect(result2).toBe('');
+  });
+
+  it('should construct a proper URL for arcblock type', () => {
+    const result = getExplorerTxUrl({
+      explorerHost: 'https://explorer.example.com',
+      txHash: 'hash123',
+      type: 'arcblock',
+    });
+    expect(result).toBe('https://explorer.example.com/txs/hash123');
+  });
+
+  it('should construct a proper URL for non-arcblock types', () => {
+    const result = getExplorerTxUrl({
+      explorerHost: 'https://explorer.example.com',
+      txHash: 'hash123',
+      type: 'ethereum',
+    });
+    expect(result).toBe('https://explorer.example.com/tx/hash123');
+  });
+
+  it('should handle different blockchain types correctly', () => {
+    const testCases = [
+      { type: 'ethereum', expected: '/tx/' },
+      { type: 'base', expected: '/tx/' },
+      { type: 'bitcoin', expected: '/tx/' },
+      { type: 'arcblock', expected: '/txs/' },
+    ];
+
+    testCases.forEach(({ type, expected }) => {
+      const result = getExplorerTxUrl({
+        explorerHost: 'https://explorer.example.com',
+        txHash: 'hash123',
+        type: type as any,
+      });
+      expect(result).toContain(expected);
+    });
+  });
+});

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.18.34
+version: 1.18.36
 logo: logo.png
 files:
   - dist
@@ -71,6 +71,7 @@ capabilities:
   navigation: true
   clusterMode: false
   component: true
+  didSpace: requiredOnConnect
 screenshots:
   - setting.png
   - payment.png

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.34",
+  "version": "1.18.36",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -47,18 +47,19 @@
     "@abtnode/cron": "^1.16.42",
     "@arcblock/did": "^1.20.2",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.13.12",
+    "@arcblock/did-connect": "^2.13.13",
     "@arcblock/did-util": "^1.20.2",
     "@arcblock/jwt": "^1.20.2",
-    "@arcblock/ux": "^2.13.12",
+    "@arcblock/ux": "^2.13.13",
     "@arcblock/validator": "^1.20.2",
+    "@blocklet/did-space-js": "^1.0.48",
     "@blocklet/js-sdk": "^1.16.42",
     "@blocklet/logger": "^1.16.42",
-    "@blocklet/payment-react": "1.18.34",
+    "@blocklet/payment-react": "1.18.36",
     "@blocklet/sdk": "^1.16.42",
-    "@blocklet/ui-react": "^2.13.12",
-    "@blocklet/uploader": "^0.1.83",
-    "@blocklet/xss": "^0.1.32",
+    "@blocklet/ui-react": "^2.13.13",
+    "@blocklet/uploader": "^0.1.84",
+    "@blocklet/xss": "^0.1.33",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -122,7 +123,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.42",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.34",
+    "@blocklet/payment-types": "1.18.36",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -168,5 +169,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0ddb7c08956891409919c8027b56b77eba1726d4"
+  "gitHead": "98872e06bac0c437b53a6648ce4487e9f6d2336b"
 }

package/scripts/sdk.js

@@ -69,16 +69,72 @@ const checkoutModule = {
       subscription_data: {
         no_stake: true,
       },
+    });
+    console.log('createBatchSubscription', checkoutSession);
+    return checkoutSession;
+  },
+
+  // 批量订阅 + 免质押 + 自定义表单规则
+  async createBatchSubscriptionWithCustomField() {
+    const checkoutSession = await payment.checkout.sessions.create({
+      mode: 'subscription',
+      line_items: [
+        {
+          price_id: 'price_fQFIS12yi0JR3KePLmitjrhA',
+          quantity: 1,
+          subscription_data: {
+            metadata: { test: 'test price_fQFIS12yi0JR3KePLmitjrhA' },
+          },
+        },
+        {
+          price_id: 'price_PXyI9Duz99eqty1AqbaEc73u',
+          quantity: 1,
+          subscription_data: {
+            metadata: { test: 'test price_PXyI9Duz99eqty1AqbaEc73u' },
+          },
+        },
+      ],
+      enable_subscription_grouping: true,
+      subscription_data: {
+        no_stake: true,
+      },
+      phone_number_collection: {
+        enabled: true,
+      },
+      billing_address_collection: 'required',
       metadata: {
         page_info: {
           form_purpose_description: {
             en: 'Information collected helps us process your payment and deliver our services.',
             zh: '收集的信息帮助我们处理您的付款并提供服务。',
           },
+          field_validation: {
+            customer_name: {
+              pattern: '^[a-zA-Z\\s]{2,50}$',
+              pattern_message: {
+                en: 'Name should only contain 2-50 letters and spaces',
+                zh: '姓名应只包含2-50个字母和空格',
+              },
+            },
+            customer_email: {
+              pattern: '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$',
+              pattern_message: {
+                en: 'Please enter a valid email address',
+                zh: '请输入有效的电子邮件地址',
+              },
+            },
+            'billing_address.line1': {
+              pattern: '^.{5,100}$',
+              pattern_message: {
+                en: 'Address should be 5-100 characters',
+                zh: '地址应为5-100个字符',
+              },
+            },
+          },
         },
       },
     });
-    console.log('createBatchSubscription', checkoutSession);
+    console.log('createBatchSubscriptionWithCustomField', checkoutSession);
     return checkoutSession;
   },
 
@@ -469,7 +525,7 @@ const testModules = {
 
 async function runTest() {
   payment.environments.setTestMode(true);
-  await testModules.checkout.createBatchSubscription();
+  await testModules.checkout.createBatchSubscriptionWithCustomField();
 }
 
 async function main() {

package/src/components/customer/link.tsx

@@ -1,17 +1,13 @@
 import type { TCustomer } from '@blocklet/payment-types';
 import { Link } from 'react-router-dom';
-
+import UserCard from '@arcblock/ux/lib/UserCard';
 import { getCustomerAvatar } from '@blocklet/payment-react';
-import DID from '@arcblock/ux/lib/DID';
-import { Box, Typography } from '@mui/material';
-import InfoCard from '../info-card';
 
 export default function CustomerLink({
   customer,
   linked,
   linkTo,
   size,
-  tooltip,
 }: {
   customer: TCustomer;
   linked?: boolean;
@@ -22,61 +18,40 @@ export default function CustomerLink({
   if (!customer) {
     return null;
   }
+  const CustomerCard = (
+    // @ts-ignore
+    <UserCard
+      did={customer?.did}
+      showHoverCard
+      sx={{
+        border: 'none',
+        p: 0,
+        minWidth: 0,
+      }}
+      avatarProps={{
+        size: size === 'small' ? 24 : 40,
+      }}
+      showDid={size !== 'small'}
+      {...(customer.metadata.anonymous === true
+        ? {
+            user: {
+              fullName: customer.name || customer.email,
+              did: customer.did,
+              email: customer.email,
+              avatar: getCustomerAvatar(
+                customer?.did,
+                customer?.updated_at ? new Date(customer.updated_at).toISOString() : ''
+              ),
+            },
+          }
+        : {})}
+    />
+  );
   if (linked) {
-    return (
-      <Link to={linkTo || `/admin/customers/${customer.id}`}>
-        <Box sx={{ '.info-card-wrapper': { cursor: 'pointer' }, '.info-card': { minWidth: 0 } }}>
-          {/* @ts-ignore */}
-          <InfoCard
-            logo={getCustomerAvatar(
-              customer?.did,
-              customer?.updated_at ? new Date(customer.updated_at).toISOString() : '',
-              size === 'small' ? 24 : 48
-            )}
-            name={
-              <Typography
-                sx={{ maxWidth: 208, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-                className="customer-link-name">
-                {customer.name || customer.email}
-              </Typography>
-            }
-            {...(size === 'small'
-              ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
-              : {
-                  description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
-                  size: 48,
-                })}
-          />
-        </Box>
-      </Link>
-    );
+    return <Link to={linkTo || `/admin/customers/${customer.id}`}>{CustomerCard}</Link>;
   }
 
-  return (
-    <Box sx={{ '.info-card': { minWidth: 0 } }}>
-      {/* @ts-ignore */}
-      <InfoCard
-        logo={getCustomerAvatar(
-          customer.did,
-          customer.updated_at ? new Date(customer.updated_at).toISOString() : '',
-          size === 'small' ? 24 : 48
-        )}
-        name={
-          <Typography
-            sx={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
-            className="customer-link-name">
-            {customer.name || customer.email}
-          </Typography>
-        }
-        {...(size === 'small'
-          ? { tooltip: tooltip ? <DID did={customer?.did} /> : false, size: 24 }
-          : {
-              description: <DID did={customer?.did} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />,
-              size: 48,
-            })}
-      />
-    </Box>
-  );
+  return CustomerCard;
 }
 
 CustomerLink.defaultProps = {

package/src/components/invoice/list.tsx

@@ -282,7 +282,7 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <CustomerLink customer={item.customer} />;
+          return <CustomerLink customer={item.customer} size="small" />;
         },
       },
     });

package/src/components/payouts/list.tsx

@@ -15,6 +15,8 @@ import { useLocalStorageState } from 'ahooks';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import DID from '@arcblock/ux/lib/DID';
+import ShortenLabel from '@arcblock/ux/lib/UserCard/Content/shorten-label';
 import { debounce, getAppInfo } from '../../libs/util';
 import CustomerLink from '../customer/link';
 import FilterToolbar from '../filter-toolbar';
@@ -202,8 +204,12 @@ export default function PayoutList({ customer_id, payment_intent_id, status, fea
           if (appInfo) {
             return (
               <InfoCard
-                name={appInfo.name}
-                description={`${item.destination.slice(0, 6)}...${item.destination.slice(-6)}`}
+                name={
+                  <ShortenLabel sx={{ fontWeight: 500 }} maxLength={30}>
+                    {appInfo.name}
+                  </ShortenLabel>
+                }
+                description={<DID did={item.destination} compact responsive={false} sx={{ whiteSpace: 'nowrap' }} />}
                 logo={appInfo.avatar}
                 size={40}
               />

package/src/libs/util.ts

@@ -3,14 +3,12 @@
 /* eslint-disable @typescript-eslint/indent */
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
-  ChainType,
   LineItem,
   PriceRecurring,
   TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
-  TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
@@ -350,17 +348,6 @@ export function getAppInfo(address: string): { name: string; avatar: string; typ
   return null;
 }
 
-export function getTokenBalanceLink(method: TPaymentMethod, address: string) {
-  const explorerHost = (method?.settings?.[method?.type as ChainType] as any)?.explorer_host || '';
-  if (method.type === 'arcblock' && address) {
-    return joinURL(explorerHost, 'accounts', address, 'tokens');
-  }
-  if (['ethereum', 'base'].includes(method.type) && address) {
-    return joinURL(explorerHost, 'address', address);
-  }
-  return '';
-}
-
 export function isWillCanceled(subscription: TSubscriptionExpanded) {
   const now = Date.now() / 1000;
   if (

package/src/pages/admin/customers/customers/detail.tsx

@@ -211,8 +211,8 @@ export default function CustomerDetail(props: { id: string }) {
                   52
                 )}
                 alt={data.customer.name}
-                variant="square"
-                sx={{ width: 52, height: 52, borderRadius: 'var(--radius-s, 4px)' }}
+                variant="circular"
+                sx={{ width: 52, height: 52 }}
               />
               <Typography variant="h2" sx={{ fontWeight: 600 }}>
                 {data.customer.name}

package/src/pages/admin/customers/customers/index.tsx

@@ -75,9 +75,8 @@ export default function CustomersList() {
                     item?.updated_at ? new Date(item.updated_at).toISOString() : '',
                     48
                   )}
-                  variant="square"
+                  variant="circular"
                   alt={item?.name}
-                  sx={{ borderRadius: 'var(--radius-m, 8px)' }}
                 />
                 <Typography sx={{ wordBreak: 'break-all' }}>{item.name}</Typography>
               </Stack>