payment-kit 1.18.34 → 1.18.35

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.35
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.34",
+  "version": "1.18.35",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -54,7 +54,7 @@
     "@arcblock/validator": "^1.20.2",
     "@blocklet/js-sdk": "^1.16.42",
     "@blocklet/logger": "^1.16.42",
-    "@blocklet/payment-react": "1.18.34",
+    "@blocklet/payment-react": "1.18.35",
     "@blocklet/sdk": "^1.16.42",
     "@blocklet/ui-react": "^2.13.12",
     "@blocklet/uploader": "^0.1.83",
@@ -122,7 +122,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.35",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -168,5 +168,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0ddb7c08956891409919c8027b56b77eba1726d4"
+  "gitHead": "802a98b5ca81475f8cd7b9dcbb77fce7240b9788"
 }

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>

package/src/pages/admin/payments/payouts/detail.tsx

@@ -203,6 +203,7 @@ export default function PayoutDetail(props: { id: string }) {
                 label={t('customer.payout.payer')}
                 value={
                   <InfoCard
+                    variant="circular"
                     logo={getCustomerAvatar(
                       paymentIntent?.customer?.did,
                       paymentIntent?.customer?.updated_at
@@ -242,7 +243,6 @@ export default function PayoutDetail(props: { id: string }) {
                       />
                     }
                     size={40}
-                    variant="rounded"
                   />
                 }
                 divider

package/src/pages/customer/recharge/account.tsx

@@ -27,6 +27,7 @@ import {
   formatBNStr,
   formatPrice,
   formatNumber,
+  getTokenBalanceLink,
 } from '@blocklet/payment-react';
 import type { TPaymentCurrency, TPaymentMethod } from '@blocklet/payment-types';
 import { joinURL } from 'ufo';
@@ -34,7 +35,7 @@ import { AccountBalanceWalletOutlined, ArrowBackOutlined, ArrowForwardOutlined }
 import Empty from '@arcblock/ux/lib/Empty';
 import { BN, fromUnitToToken } from '@ocap/util';
 import RechargeList from '../../../components/invoice/recharge';
-import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import { goBackOrFallback } from '../../../libs/util';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';
 

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

@@ -25,6 +25,7 @@ import {
   formatTime,
   api,
   formatBNStr,
+  getTokenBalanceLink,
 } from '@blocklet/payment-react';
 import { joinURL } from 'ufo';
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
@@ -35,7 +36,7 @@ import SubscriptionDescription from '../../../components/subscription/descriptio
 import InfoRow from '../../../components/info-row';
 import Currency from '../../../components/currency';
 import SubscriptionMetrics from '../../../components/subscription/metrics';
-import { getTokenBalanceLink, goBackOrFallback } from '../../../libs/util';
+import { goBackOrFallback } from '../../../libs/util';
 import CustomerLink from '../../../components/customer/link';
 import { useSessionContext } from '../../../contexts/session';
 import { formatSmartDuration, TimeUnit } from '../../../libs/dayjs';

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

@@ -229,6 +229,7 @@ export default function SubscriptionEmbed() {
             </Stack>
           }
           size={24}
+          variant="circular"
         />
       ),
     });