payment-kit 1.18.16 → 1.18.17

package/api/src/routes/connect/shared.ts

@@ -13,7 +13,7 @@ import { encodeApproveItx } from '../../integrations/ethereum/token';
 import { blocklet, ethWallet, wallet } from '../../libs/auth';
 import logger from '../../libs/logger';
 import { getGasPayerExtra, getTokenLimitsForDelegation } from '../../libs/payment';
-import { getFastCheckoutAmount, getStatementDescriptor } from '../../libs/session';
+import { getFastCheckoutAmount, getStatementDescriptor, isDonationCheckoutSession } from '../../libs/session';
 import {
   expandSubscriptionItems,
   getSubscriptionCreateSetup,
@@ -59,7 +59,7 @@ export async function ensureCheckoutSession(checkoutSessionId: string) {
   return checkoutSession;
 }
 
-export async function ensurePaymentIntent(checkoutSessionId: string, userDid?: string): Promise<Result> {
+export async function ensurePaymentIntent(checkoutSessionId: string, userDid?: string, skipCustomer?: boolean): Promise<Result> {
   const checkoutSession = await ensureCheckoutSession(checkoutSessionId);
 
   let paymentCurrencyId;
@@ -98,12 +98,69 @@ export async function ensurePaymentIntent(checkoutSessionId: string, userDid?: s
     paymentCurrencyId = subscription.currency_id;
     paymentMethodId = subscription.default_payment_method_id;
   }
-
-  const customer = await Customer.findByPk(checkoutSession.customer_id);
+  let customer = null;
+  if (!skipCustomer) {
+  // 检查是否为打赏场景
+  const isDonation = isDonationCheckoutSession(checkoutSession);  
+  
+  // if donation, create customer if not exists
+  if (isDonation && !checkoutSession.customer_id && userDid) {
+    customer = await Customer.findByPkOrDid(userDid);
+    if (!customer) {
+      const { user } = await blocklet.getUser(userDid);
+      if (user) {
+        customer = await Customer.create({
+          did: userDid,
+          email: user.email,
+          name: user.fullName || userDid,
+          description: user.remark,
+          metadata: { fromDonation: true },
+          livemode: checkoutSession.livemode,
+          phone: user.phone,
+          delinquent: false,
+          balance: '0',
+          next_invoice_sequence: 1,
+          invoice_prefix: Customer.getInvoicePrefix(),
+        });
+        logger.info('Customer created for donation', { userDid, customerId: customer.id });
+      } else {
+        customer = await Customer.create({
+          did: userDid,
+          email: '',
+          name: 'anonymous',
+          description: 'Anonymous customer',
+          metadata: { fromDonation: true, anonymous: true },
+          livemode: checkoutSession.livemode,
+          phone:'',
+          delinquent: false,
+          balance: '0',
+          next_invoice_sequence: 1,
+          invoice_prefix: Customer.getInvoicePrefix(),
+        });
+      }
+    }
+    
+    if (customer) {
+      await checkoutSession.update({ customer_id: customer.id, customer_did: customer.did });
+      if (paymentIntent) {
+        await paymentIntent.update({ customer_id: customer.id });
+      }
+      logger.info('Customer associated with donation', { 
+        userDid, 
+        customerId: customer.id,
+        checkoutSessionId: checkoutSession.id,
+        paymentIntentId: paymentIntent?.id
+      });
+    }
+  } else {
+    // 非打赏场景或已有客户ID的情况
+    customer = await Customer.findByPk(checkoutSession.customer_id);
+  }
   if (!customer) {
     throw new Error('Customer not found');
   }
-  if (userDid) {
+  
+  if (userDid && !isDonation) {
     const { user } = await blocklet.getUser(userDid, { enableConnectedAccount: true });
     if (!user) {
       throw new Error('Seems you have not connected to this app before');
@@ -113,6 +170,8 @@ export async function ensurePaymentIntent(checkoutSessionId: string, userDid?: s
       throw new Error('This is not your payment intent');
     }
   }
+  }
+
 
   const [paymentMethod, paymentCurrency] = await Promise.all([
     PaymentMethod.findByPk(paymentMethodId),
@@ -134,7 +193,7 @@ export async function ensurePaymentIntent(checkoutSessionId: string, userDid?: s
   return {
     checkoutSession,
     paymentIntent,
-    customer,
+    customer: customer as Customer,
     subscription,
     paymentMethod,
     paymentCurrency,

package/api/src/routes/customers.ts

@@ -114,7 +114,7 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
           did: req.user.did,
           name: user.fullName,
           email: user.email,
-          phone: '',
+          phone: user.phone,
           address: {},
           description: user.remark,
           metadata: {},

package/api/src/routes/donations.ts

@@ -145,7 +145,7 @@ router.get('/', async (req, res) => {
       ],
       order: [['created_at', 'DESC']],
       offset: (page - 1) * pageSize,
-      include: [{ model: Customer, as: 'customer', attributes: ['id', 'did', 'name'] }],
+      include: [{ model: Customer, as: 'customer', attributes: ['id', 'did', 'name', 'metadata'] }],
       limit: pageSize,
     });
 

package/api/src/routes/invoices.ts

@@ -143,7 +143,7 @@ router.get('/', authMine, async (req, res) => {
         { model: PaymentCurrency, as: 'paymentCurrency' },
         { model: PaymentMethod, as: 'paymentMethod' },
         // { model: PaymentIntent, as: 'paymentIntent' },
-        // { model: Subscription, as: 'subscription' },
+        { model: Subscription, as: 'subscription', attributes: ['id', 'description'] },
         { model: Customer, as: 'customer' },
       ],
     });

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.16
+version: 1.18.17
 logo: logo.png
 files:
   - dist
@@ -48,6 +48,7 @@ interfaces:
             - /methods/**
             - /currencies/**
           blockUnauthorized: false
+    proxyBehavior: service
 community: ''
 documentation: ''
 homepage: ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.16",
+  "version": "1.18.17",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,21 +43,21 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.39",
+    "@abtnode/cron": "^1.16.40",
     "@arcblock/did": "^1.19.15",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.12.17",
+    "@arcblock/did-connect": "^2.12.25",
     "@arcblock/did-util": "^1.19.15",
     "@arcblock/jwt": "^1.19.15",
-    "@arcblock/ux": "^2.12.17",
+    "@arcblock/ux": "^2.12.25",
     "@arcblock/validator": "^1.19.15",
-    "@blocklet/js-sdk": "^1.16.39",
-    "@blocklet/logger": "^1.16.39",
-    "@blocklet/payment-react": "1.18.16",
-    "@blocklet/sdk": "^1.16.39",
-    "@blocklet/ui-react": "^2.12.17",
-    "@blocklet/uploader": "^0.1.71",
-    "@blocklet/xss": "^0.1.27",
+    "@blocklet/js-sdk": "^1.16.40",
+    "@blocklet/logger": "^1.16.40",
+    "@blocklet/payment-react": "1.18.17",
+    "@blocklet/sdk": "^1.16.40",
+    "@blocklet/ui-react": "^2.12.25",
+    "@blocklet/uploader": "^0.1.76",
+    "@blocklet/xss": "^0.1.28",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -89,7 +89,7 @@
     "google-libphonenumber": "^3.2.38",
     "html2canvas": "^1.4.1",
     "iframe-resizer-react": "^1.1.1",
-    "joi": "^17.13.3",
+    "joi": "^17.12.2",
     "json-stable-stringify": "^1.1.1",
     "jspdf": "^2.5.2",
     "lodash": "^4.17.21",
@@ -119,9 +119,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.39",
+    "@abtnode/types": "^1.16.40",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.16",
+    "@blocklet/payment-types": "1.18.17",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -151,7 +151,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.24",
+    "vite-plugin-blocklet": "^0.9.25",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "676b921c6fc399d3a031b848bfbe0fbffee430a1"
+  "gitHead": "9d43381dd3744506455547260f5e621c6ad88e8f"
 }

package/src/components/info-card.tsx

@@ -10,6 +10,7 @@ type Props = {
   variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
   sx?: SxProps;
   className?: string;
+  logoName?: string;
 };
 
 export default function InfoCard(props: Props) {
@@ -18,7 +19,7 @@ export default function InfoCard(props: Props) {
   return (
     <Stack direction="row" alignItems="center" spacing={1} className={`info-card-wrapper ${props.className}`}>
       {props.logo ? (
-        <Avatar src={props.logo} alt={avatarName} variant={props.variant as any} sx={dimensions} />
+        <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
       ) : (
         <Avatar variant={props.variant as any} sx={dimensions}>
           {avatarName?.slice(0, 1)}
@@ -47,4 +48,5 @@ InfoCard.defaultProps = {
   variant: 'rounded',
   sx: {},
   className: '',
+  logoName: '',
 };

package/src/locales/en.tsx

@@ -797,7 +797,7 @@ export default flat({
       intervals: 'intervals',
       history: 'Fund History',
       relatedSubscriptions: 'Related Subscriptions',
-      rechargeTooltip: 'Click to recharge balance',
+      rechargeTooltip: 'Click to add funds',
     },
     delegation: {
       title:

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

@@ -112,6 +112,8 @@ export default function PayoutDetail(props: { id: string }) {
     return data.destination;
   };
 
+  const isAnonymousPayer = paymentIntent?.customer?.metadata?.anonymous;
+
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
@@ -206,23 +208,32 @@ export default function PayoutDetail(props: { id: string }) {
                         : '',
                       48
                     )}
+                    logoName={paymentIntent?.customer?.metadata?.anonymous ? '' : paymentIntent?.customer?.name}
                     name={
                       <Typography
                         variant="subtitle2"
                         sx={{
-                          cursor: 'pointer',
-                          '&:hover': {
-                            color: 'text.link',
-                          },
+                          ...(isAnonymousPayer
+                            ? {}
+                            : {
+                                cursor: 'pointer',
+                                '&:hover': {
+                                  color: 'text.link',
+                                },
+                              }),
                         }}
                         onClick={() => {
+                          if (isAnonymousPayer) {
+                            return;
+                          }
                           const url = getCustomerProfileUrl({
                             userDid: paymentIntent?.customer?.did,
                             locale: 'zh',
                           });
                           window.open(url, '_blank');
                         }}>
-                        {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                        {paymentIntent?.customer?.name}
+                        {paymentIntent?.customer?.email ? ` (${paymentIntent?.customer?.email})` : ''}
                       </Typography>
                     }
                     description={

package/src/pages/customer/index.tsx

@@ -8,7 +8,15 @@ import {
   OverdueInvoicePayment,
 } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
-import { ExpandMore, AccountBalanceWalletOutlined } from '@mui/icons-material';
+import {
+  ExpandMore,
+  AccountBalanceWalletOutlined,
+  AddOutlined,
+  CreditCardOutlined,
+  AccountBalanceOutlined,
+  InfoOutlined,
+  AssignmentReturnOutlined,
+} from '@mui/icons-material';
 import {
   Avatar,
   Box,
@@ -23,7 +31,7 @@ import {
   Alert,
 } from '@mui/material';
 import type { SelectChangeEvent } from '@mui/material/Select';
-import { styled, SxProps } from '@mui/system';
+import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { flatten, isEmpty } from 'lodash';
 import { memo, useEffect, useState } from 'react';
@@ -49,19 +57,20 @@ const CurrencyCard = memo(
     label,
     data,
     currency,
-    sx,
     type,
+    icon,
   }: {
     label: string;
     data: {
       [key: string]: string;
     };
+    icon: any;
     currency: {
       id: string;
       decimal: number;
       payment_method_id: string;
+      symbol: string;
     };
-    sx: SxProps;
     type: 'balance' | 'spent' | 'stake' | 'refund' | 'due';
   }) => {
     const navigate = useNavigate();
@@ -84,17 +93,19 @@ const CurrencyCard = memo(
     return (
       <Box
         sx={{
-          padding: '12px 16px',
-          borderRadius: 'var(--radius-m, 8px)',
           transition: 'all 0.2s ease-in-out',
           position: 'relative',
-          ...sx,
+          borderRight: '1px solid var(--stroke-border-base, #EFF1F5)',
         }}>
-        <Typography variant="h4" gutterBottom>
+        <Typography
+          variant="body1"
+          gutterBottom
+          sx={{ color: 'text.secondary', display: 'flex', alignItems: 'center', gap: 1 }}>
+          {icon}
           {label}
         </Typography>
-        <Typography variant="h3" gutterBottom>
-          {value}
+        <Typography variant="h3" gutterBottom sx={{ color: 'text.primary', whiteSpace: 'nowrap' }}>
+          {value} {currency.symbol}
         </Typography>
         {type === 'balance' && method?.type === 'arcblock' && (
           <Tooltip title={t('customer.recharge.rechargeTooltip')} arrow placement="top">
@@ -102,7 +113,7 @@ const CurrencyCard = memo(
               onClick={handleCardClick}
               sx={{
                 position: 'absolute',
-                top: '12px',
+                top: 0,
                 right: '12px',
                 display: 'flex',
                 alignItems: 'center',
@@ -111,8 +122,12 @@ const CurrencyCard = memo(
                 padding: '4px',
                 zIndex: 1,
                 cursor: 'pointer',
+                color: 'text.secondary',
+                '&:hover': {
+                  color: 'text.link',
+                },
               }}>
-              <AccountBalanceWalletOutlined fontSize="small" />
+              <AddOutlined fontSize="small" />
             </Box>
           </Tooltip>
         )}
@@ -165,7 +180,7 @@ export default function CustomerHome() {
   });
   const navigate = useNavigate();
   const [subscriptionStatus, setSubscriptionStatus] = useState(false);
-  const [hasSubscriptions, setHasSubscriptions] = useState(true);
+  const [hasSubscriptions, setHasSubscriptions] = useState(false);
   const { startTransition } = useTransitionContext();
   const {
     data,
@@ -174,6 +189,24 @@ export default function CustomerHome() {
     loading = true,
   } = useRequest(fetchData, {
     manual: true,
+    onSuccess: async (res) => {
+      if (!hasSubscriptions) {
+        const search = new URLSearchParams();
+        const searchParams = {
+          page: 1,
+          pageSize: 5,
+          showTotalCount: true,
+          customer_id: res.id,
+        };
+        Object.entries(searchParams).forEach(([key, value]) => {
+          search.set(key, String(value));
+        });
+        const { data: subscriptions } = await api.get(`/api/subscriptions?${search.toString()}`);
+        if (subscriptions.totalCount > 0 || subscriptions.count > 0) {
+          setHasSubscriptions(true);
+        }
+      }
+    },
   });
 
   const loadingCard = loading || !data;
@@ -322,50 +355,64 @@ export default function CustomerHome() {
             className="section-body"
             flexDirection="row"
             sx={{
-              gap: 2,
+              gap: 3,
               mt: 1.5,
               flexWrap: 'wrap',
+              position: 'relative',
               '>div': {
-                flex: 1,
+                flex: '1',
+                '@media (max-width: 1100px)': {
+                  flex: '0 0 calc(50% - 12px)',
+                  maxWidth: 'calc(50% - 12px)',
+                },
+              },
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                bottom: 0,
+                width: '1px',
+                backgroundColor: 'background.paper',
+                zIndex: 1,
               },
             }}>
             <CurrencyCard
               label={t('admin.customer.summary.balance')}
               data={data?.summary?.token || emptyObject}
               currency={currency}
-              sx={{
-                background: 'var(--tags-tag-orange-bg, #B7FEE3)',
-                color: 'var(--tags-tag-orange-text, #007C52)',
-              }}
               type="balance"
+              icon={<AccountBalanceWalletOutlined color="success" fontSize="small" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.spent')}
               data={data?.summary?.paid || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-green-bg, #B7FEE3)', color: 'var(--tags-tag-green-text, #007C52)' }}
               type="spent"
+              icon={<CreditCardOutlined color="warning" fontSize="small" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.stake')}
               data={data?.summary?.stake || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-blue-bg, #D2ECFF)', color: 'var(--tags-tag-blue-text, #0051E9)' }}
               type="stake"
+              icon={<AccountBalanceOutlined fontSize="small" color="info" />}
             />
             <CurrencyCard
               label={t('admin.customer.summary.refund')}
               data={data?.summary?.refund || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-purple-bg, #EFE9FF)', color: 'var(--tags-tag-purple-text, #007C52)' }}
               type="refund"
+              icon={
+                <AssignmentReturnOutlined fontSize="small" sx={{ color: 'var(--tags-tag-purple-icon, #7c3aed)' }} />
+              }
             />
             <CurrencyCard
               label={t('admin.customer.summary.due')}
               data={data?.summary?.due || emptyObject}
               currency={currency}
-              sx={{ background: 'var(--tags-tag-red-bg, #FFE2E6)', color: 'var(--tags-tag-red-text, #E40031)' }}
               type="due"
+              icon={<InfoOutlined fontSize="small" color="error" />}
             />
           </Stack>
         </>
@@ -396,7 +443,7 @@ export default function CustomerHome() {
         )}
       </Box>
       <Box className="section-body">
-        <CustomerInvoiceList customer_id={data?.id} type="table" include_staking />
+        <CustomerInvoiceList customer_id={data?.id} type="table" include_staking relatedSubscription />
       </Box>
     </Box>
   );

package/src/pages/customer/invoice/past-due.tsx

@@ -153,6 +153,7 @@ export default function CustomerInvoicePastDue() {
               action="pay"
               type="table"
               onTableDataChange={onTableDataChange}
+              relatedSubscription
             />
           </Box>
         </Box>

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

@@ -59,6 +59,8 @@ export default function PayoutDetail() {
   const currency = data.paymentCurrency;
   const total = [formatBNStr(data?.amount, currency.decimal), currency.symbol].join(' ');
   const { paymentIntent, paymentLink } = data || {};
+
+  const isAnonymousPayer = paymentIntent?.customer?.metadata?.anonymous;
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
@@ -160,23 +162,32 @@ export default function PayoutDetail() {
                       : '',
                     48
                   )}
+                  logoName={paymentIntent?.customer?.metadata?.anonymous ? '' : paymentIntent?.customer?.name}
                   name={
                     <Typography
                       variant="subtitle2"
                       sx={{
-                        cursor: 'pointer',
-                        '&:hover': {
-                          color: 'text.link',
-                        },
+                        ...(isAnonymousPayer
+                          ? {}
+                          : {
+                              cursor: 'pointer',
+                              '&:hover': {
+                                color: 'text.link',
+                              },
+                            }),
                       }}
                       onClick={() => {
+                        if (isAnonymousPayer) {
+                          return;
+                        }
                         const url = getCustomerProfileUrl({
                           userDid: paymentIntent?.customer?.did,
                           locale: 'zh',
                         });
                         window.open(url, '_blank');
                       }}>
-                      {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                      {paymentIntent?.customer?.name}
+                      {paymentIntent?.customer?.email ? ` (${paymentIntent?.customer?.email})` : ''}
                     </Typography>
                   }
                   description={