payment-kit 1.21.16 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.21.16",
+  "version": "1.22.0",
   "scripts": {
     "dev": "blocklet dev --open",
     "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
@@ -44,34 +44,34 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@arcblock/did": "^1.25.6",
-    "@arcblock/did-connect-react": "^3.1.46",
+    "@abtnode/cron": "^1.16.54-beta-20251028-092308-569763e6",
+    "@arcblock/did": "^1.26.3",
+    "@arcblock/did-connect-react": "^3.1.52",
     "@arcblock/did-connect-storage-nedb": "^1.8.0",
-    "@arcblock/did-util": "^1.25.6",
-    "@arcblock/jwt": "^1.25.6",
-    "@arcblock/ux": "^3.1.46",
-    "@arcblock/validator": "^1.25.6",
-    "@blocklet/did-space-js": "^1.1.32",
+    "@arcblock/did-util": "^1.26.3",
+    "@arcblock/jwt": "^1.26.3",
+    "@arcblock/ux": "^3.1.52",
+    "@arcblock/validator": "^1.26.3",
+    "@blocklet/did-space-js": "^1.1.35",
     "@blocklet/error": "^0.2.5",
-    "@blocklet/js-sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/logger": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/payment-broker-client": "1.21.16",
-    "@blocklet/payment-react": "1.21.16",
-    "@blocklet/payment-vendor": "1.21.16",
-    "@blocklet/sdk": "^1.16.53-beta-20251011-054719-4ed2f6b7",
-    "@blocklet/ui-react": "^3.1.46",
-    "@blocklet/uploader": "^0.2.15",
-    "@blocklet/xss": "^0.2.12",
+    "@blocklet/js-sdk": "^1.16.54-beta-20251028-092308-569763e6",
+    "@blocklet/logger": "^1.16.54-beta-20251028-092308-569763e6",
+    "@blocklet/payment-broker-client": "1.22.0",
+    "@blocklet/payment-react": "1.22.0",
+    "@blocklet/payment-vendor": "1.22.0",
+    "@blocklet/sdk": "^1.16.54-beta-20251028-092308-569763e6",
+    "@blocklet/ui-react": "^3.1.52",
+    "@blocklet/uploader": "^0.3.1",
+    "@blocklet/xss": "^0.3.1",
     "@mui/icons-material": "^7.1.2",
     "@mui/lab": "7.0.0-beta.14",
     "@mui/material": "^7.1.2",
     "@mui/system": "^7.1.1",
-    "@ocap/asset": "^1.25.6",
-    "@ocap/client": "^1.25.6",
-    "@ocap/mcrypto": "^1.25.6",
-    "@ocap/util": "^1.25.6",
-    "@ocap/wallet": "^1.25.6",
+    "@ocap/asset": "^1.26.3",
+    "@ocap/client": "^1.26.3",
+    "@ocap/mcrypto": "^1.26.3",
+    "@ocap/util": "^1.26.3",
+    "@ocap/wallet": "^1.26.3",
     "@stripe/react-stripe-js": "^2.9.0",
     "@stripe/stripe-js": "^2.4.0",
     "ahooks": "^3.8.5",
@@ -126,9 +126,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.53-beta-20251011-054719-4ed2f6b7",
+    "@abtnode/types": "^1.16.54-beta-20251028-092308-569763e6",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.21.16",
+    "@blocklet/payment-types": "1.22.0",
     "@types/cookie-parser": "^1.4.9",
     "@types/cors": "^2.8.19",
     "@types/debug": "^4.1.12",
@@ -175,5 +175,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "16509d9abd2da2f52587972c863c79ba9e4cd49d"
+  "gitHead": "d69619c7d669bc6de8620273ff0f3f7b5d56383f"
 }

package/src/components/invoice/table.tsx

@@ -56,9 +56,9 @@ export function getAppliedBalance(invoice: TInvoiceExpanded) {
     invoice.ending_token_balance &&
     invoice.ending_token_balance[invoice.paymentCurrency.id]
   ) {
-    const starting = toBN(invoice.starting_token_balance[invoice.paymentCurrency.id]);
+    const starting = toBN(invoice.starting_token_balance[invoice.paymentCurrency.id] || '0');
 
-    const ending = toBN(invoice.ending_token_balance[invoice.paymentCurrency.id]);
+    const ending = toBN(invoice.ending_token_balance[invoice.paymentCurrency.id] || '0');
     return ending.sub(starting).toString();
   }
 

package/src/components/invoice-pdf/template.tsx

@@ -65,6 +65,16 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
               <span style={composeStyles('gray')}>{formatTime(data.period_end * 1000)}</span>
             </div>
           </div>
+          <div style={composeStyles('flex mb-5')}>
+            <div style={composeStyles('w-40')}>
+              <span style={composeStyles('bold')}>{t('admin.paymentCurrency.name')}</span>
+            </div>
+            <div style={composeStyles('w-60')}>
+              <span style={composeStyles('gray')}>
+                {data.paymentCurrency.symbol} ({data.paymentMethod.name})
+              </span>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -137,6 +147,26 @@ export function InvoiceTemplate({ data, t }: InvoicePDFProps) {
         );
       })}
 
+      {detail.length === 0 && (
+        <div style={composeStyles('row flex')}>
+          <div style={composeStyles('w-38 p-4-8 pb-15')}>
+            <span style={composeStyles('gray')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-15 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+          <div style={composeStyles('w-17 p-4-8 pb-15')}>
+            <span style={composeStyles('gray right')}>-</span>
+          </div>
+        </div>
+      )}
+
       {/* Summary */}
       <div
         style={{

package/src/components/subscription/payment-method-info.tsx

@@ -0,0 +1,222 @@
+import { Button } from '@arcblock/ux';
+import DID from '@arcblock/ux/lib/DID';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { StripeForm, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import type { TCustomer } from '@blocklet/payment-types';
+import { CreditCard, Email, AccountBalance } from '@mui/icons-material';
+import { Box, Stack, Typography } from '@mui/material';
+import { useSetState } from 'ahooks';
+import { useEffect } from 'react';
+
+interface PaymentMethodData {
+  id?: string;
+  type: string;
+  // Stripe payment methods
+  card?: {
+    brand: string;
+    last4: string;
+    exp_month: number;
+    exp_year: number;
+  };
+  link?: {
+    email: string;
+  };
+  us_bank_account?: {
+    account_type: string;
+    bank_name: string;
+    last4: string;
+  };
+  billing_details?: {
+    name?: string;
+    email?: string;
+    phone?: string;
+  };
+  // On-chain payment methods (arcblock/ethereum/base)
+  payer?: string;
+}
+
+interface Props {
+  subscriptionId: string;
+  customer: TCustomer;
+  paymentMethodDetails: PaymentMethodData | null;
+  editable?: boolean;
+  paymentMethodType: string;
+  onUpdate?: () => void;
+}
+
+export default function PaymentMethodInfo({
+  subscriptionId,
+  customer,
+  paymentMethodDetails,
+  editable = false,
+  onUpdate = () => {},
+  paymentMethodType,
+}: Props) {
+  const { t, locale } = useLocaleContext();
+  const { connect } = usePaymentContext();
+
+  const [state, setState] = useSetState<{
+    editing: boolean;
+    submitting: boolean;
+    setupIntentId: string | null;
+    clientSecret: string | null;
+    publishableKey: string | null;
+  }>({
+    editing: false,
+    submitting: false,
+    setupIntentId: null,
+    clientSecret: null,
+    publishableKey: null,
+  });
+
+  useEffect(() => {
+    if (!state.editing) {
+      setState({ clientSecret: null, publishableKey: null, setupIntentId: null });
+    }
+  }, [state.editing, setState]);
+
+  const handleEdit = async () => {
+    if (paymentMethodType === 'stripe') {
+      try {
+        setState({ submitting: true });
+        const { data } = await api.post(`/api/subscriptions/${subscriptionId}/update-stripe-payment-method`);
+        setState({
+          editing: true,
+          clientSecret: data.client_secret,
+          publishableKey: data.publishable_key,
+          setupIntentId: data.setup_intent_id,
+          submitting: false,
+        });
+      } catch (err) {
+        Toast.error(formatError(err));
+        setState({ submitting: false });
+      }
+    } else {
+      connect.open({
+        action: 'change-payer',
+        saveConnect: false,
+        locale: locale as 'en' | 'zh',
+        useSocket: true,
+        messages: {
+          scan: '',
+          title: t('admin.subscription.changePayer.connect.title'),
+          success: t('admin.subscription.changePayer.connect.success'),
+          error: t('admin.subscription.changePayer.connect.error'),
+          confirm: '',
+        } as any,
+        extraParams: { subscriptionId },
+        onSuccess: () => {
+          connect.close();
+          Toast.success(t('admin.subscription.changePayer.connect.success'));
+          onUpdate?.();
+        },
+        onClose: () => {
+          connect.close();
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+        },
+      });
+    }
+  };
+
+  const handleConfirm = () => {
+    setTimeout(() => {
+      Toast.success(t('admin.subscription.changePayer.connect.success'));
+      setState({ editing: false, submitting: false });
+      onUpdate?.();
+    }, 2000);
+  };
+
+  const handleCancel = () => {
+    setState({ editing: false, clientSecret: null, publishableKey: null, setupIntentId: null });
+  };
+
+  if (!paymentMethodDetails) {
+    return null;
+  }
+
+  const { card, link, us_bank_account: usBankAccount, payer, type } = paymentMethodDetails;
+
+  if (state.editing && state.clientSecret && state.publishableKey) {
+    return (
+      <Box>
+        <StripeForm
+          clientSecret={state.clientSecret}
+          intentType="setup_intent"
+          publicKey={state.publishableKey}
+          customer={customer}
+          mode="setup"
+          onConfirm={handleConfirm}
+          onCancel={handleCancel}
+          returnUrl={window.location.href}
+        />
+      </Box>
+    );
+  }
+
+  const renderPaymentMethodInfo = () => {
+    if (type === 'card' && card) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <CreditCard sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {card.brand.toUpperCase()} •••• {card.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'link' && link) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <Email sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {t('admin.subscription.changePayer.stripe.linkType')} ({link.email})
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (type === 'us_bank_account' && usBankAccount) {
+      return (
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <AccountBalance sx={{ fontSize: 16, color: 'text.secondary' }} />
+          <Typography variant="body2">
+            {usBankAccount.bank_name || t('admin.subscription.changePayer.stripe.bankAccount')} ••••{' '}
+            {usBankAccount.last4}
+          </Typography>
+        </Stack>
+      );
+    }
+
+    if (['arcblock', 'ethereum', 'base'].includes(type) && payer) {
+      return <DID did={payer} responsive={false} compact copyable={false} />;
+    }
+
+    return (
+      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+        {type || '-'}
+      </Typography>
+    );
+  };
+
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flex: 1 }}>
+      {renderPaymentMethodInfo()}
+      {editable && (
+        <Button
+          variant="text"
+          size="small"
+          sx={{
+            color: 'text.link',
+          }}
+          loading={state.submitting}
+          onClick={handleEdit}>
+          {t('admin.subscription.changePayer.btn')}
+        </Button>
+      )}
+    </Stack>
+  );
+}

package/src/global.css

@@ -79,3 +79,7 @@ th.MuiTableCell-head {
 .MuiTooltip-tooltip {
   max-width: 500px;
 }
+
+.date-range-picker .MuiListItem-root {
+  cursor: pointer;
+}

package/src/libs/util.ts

@@ -252,7 +252,7 @@ export function stringToColor(str: string) {
 
   // @ts-ignore
   const hash = Hasher.SHA3.hash256(str).slice(-12);
-
+  // @ts-ignore
   const index = Math.abs(hexToNumber(hash)) % colors.length;
   return colors[index];
 }

package/src/locales/en.tsx

@@ -1421,6 +1421,19 @@ export default flat({
       batchPay: {
         button: 'Pay due invoices',
       },
+      payerAddress: 'Payment Address',
+      changePayer: {
+        btn: 'Change',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: 'Bank Account',
+        },
+        connect: {
+          title: 'Change Payment Address',
+          success: 'Payment Address changed successfully',
+          error: 'Failed to change payment Address',
+        },
+      },
     },
     customer: {
       view: 'View customer',

package/src/locales/zh.tsx

@@ -1387,6 +1387,19 @@ export default flat({
       batchPay: {
         button: '批量付款',
       },
+      payerAddress: '扣费地址',
+      changePayer: {
+        btn: '变更',
+        stripe: {
+          linkType: 'Stripe Link',
+          bankAccount: '银行账户',
+        },
+        connect: {
+          title: '变更扣费地址',
+          success: '扣费地址变更成功',
+          error: '扣费地址变更失败',
+        },
+      },
     },
     customer: {
       view: '查看客户',

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

@@ -55,7 +55,7 @@ const fetchData = (
     relatedCreditGrants?: TCreditGrantExpanded[];
   }
 > => {
-  return api.get(`/api/invoices/${id}`).then((res) => res.data);
+  return api.get(`/api/invoices/${id}?sync=true`).then((res: any) => res.data);
 };
 
 const InfoDirection = 'column';
@@ -92,7 +92,7 @@ export default function InvoiceDetail(props: { id: string }) {
   const createUpdater = (key: string) => async (updates: TInvoice) => {
     try {
       setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
-      await api.put(`/api/invoices/${props.id}`, updates).then((res) => res.data);
+      await api.put(`/api/invoices/${props.id}`, updates).then((res: any) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
     } catch (err) {
@@ -120,6 +120,8 @@ export default function InvoiceDetail(props: { id: string }) {
   };
   // @ts-ignore
   const isDonation = data?.checkoutSession?.submit_type === 'donate';
+  const showDownloadButton =
+    ['open', 'paid', 'uncollectible'].includes(data.status) && !isDonation && !isEmpty(data.lines);
   return (
     <Root direction="column" spacing={2.5} sx={{ mb: 4 }}>
       <Box>
@@ -144,7 +146,7 @@ export default function InvoiceDetail(props: { id: string }) {
             </Typography>
           </Stack>
           <Box style={{ display: 'flex', gap: '10px' }}>
-            <Download data={data} />
+            {showDownloadButton && <Download data={data} />}
             <InvoiceActions data={data} onChange={runAsync} variant="normal" />
           </Box>
         </Stack>

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

@@ -35,6 +35,7 @@ import { goBackOrFallback } from '../../../../libs/util';
 import InfoRowGroup from '../../../../components/info-row-group';
 import VendorServiceList from '../../../../components/subscription/vendor-service-list';
 import { useSessionContext } from '../../../../contexts/session';
+import PaymentMethodInfo from '../../../../components/subscription/payment-method-info';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -285,6 +286,21 @@ export default function SubscriptionDetail(props: { id: string }) {
                   />
                 }
               />
+
+              {(data as any).paymentMethodDetails && (
+                <InfoRow
+                  label={t('admin.subscription.payerAddress')}
+                  value={
+                    <PaymentMethodInfo
+                      subscriptionId={data.id}
+                      customer={data.customer}
+                      paymentMethodDetails={(data as any).paymentMethodDetails}
+                      editable={false}
+                      paymentMethodType={data.paymentMethod?.type}
+                    />
+                  }
+                />
+              )}
               {data.payment_details && hasDelegateTxHash(data.payment_details, data.paymentMethod) && (
                 <InfoRow
                   label={t('common.delegateTxHash')}

package/src/pages/admin/overview.tsx

@@ -3,7 +3,7 @@ import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { api, formatBNStr, formatToDate, usePaymentContext } from '@blocklet/payment-react';
 import { BN } from '@ocap/util';
-import type { GroupedBN, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
+import type { GroupedBN, TPaymentCurrency, TPaymentMethod, TPaymentStat } from '@blocklet/payment-types';
 import {
   Avatar,
   Box,
@@ -175,8 +175,8 @@ export default function Overview() {
 
   const currencies: TCurrencyMap = useMemo(() => {
     const map: TCurrencyMap = {};
-    (settings.paymentMethods || []).forEach((method) => {
-      (method.payment_currencies || []).forEach((currency) => {
+    (settings.paymentMethods || []).forEach((method: { payment_currencies: TPaymentCurrency[] }) => {
+      (method.payment_currencies || []).forEach((currency: TPaymentCurrency) => {
         if (!map[currency.id]) {
           map[currency.id] = {
             ...currency,
@@ -1105,10 +1105,12 @@ export default function Overview() {
                     sx={{
                       p: 1.5,
                       flex: '1 1 calc(50% - 8px)',
+                      minWidth: 0,
                       borderRadius: 1,
                       backgroundColor: theme.mode === 'dark' ? 'grey.100' : 'grey.50',
                       border: 'none',
                       boxShadow: 'none',
+                      containerType: 'inline-size',
                     }}>
                     <Box>
                       <Typography
@@ -1124,13 +1126,11 @@ export default function Overview() {
                         sx={{
                           gap: 1.5,
                           flexWrap: 'wrap',
-                          flexDirection: {
-                            xs: 'column',
-                            md: 'row',
-                          },
-                          alignItems: {
-                            xs: 'flex-start',
-                            md: 'baseline',
+                          flexDirection: 'row',
+                          alignItems: 'baseline',
+                          '@container (max-width: 220px)': {
+                            flexDirection: 'column',
+                            alignItems: 'flex-start',
                           },
                         }}>
                         <Typography
@@ -1239,14 +1239,14 @@ export default function Overview() {
 
       <Grid
         container
+        spacing={{ xs: 3, lg: 6 }}
         sx={{
-          gap: { xs: 3, md: 6 },
           mb: 4,
         }}>
         <Grid
           size={{
             xs: 12,
-            md: 8,
+            lg: 8,
           }}>
           {renderFinancialSection()}
         </Grid>
@@ -1254,7 +1254,7 @@ export default function Overview() {
         <Grid
           size={{
             xs: 12,
-            md: 3,
+            lg: 4,
           }}>
           {renderBusinessMonitoringSection()}
         </Grid>
@@ -1265,7 +1265,7 @@ export default function Overview() {
         open={open}
         anchorEl={state.anchorEl}
         onClose={() => setState({ anchorEl: null })}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>
         <DateRangePicker
           open
           toggle={onTogglePicker as any}