payment-kit 1.13.163 → 1.13.165

package/api/src/index.ts

@@ -27,6 +27,7 @@ import routes from './routes';
 import changePaymentHandlers from './routes/connect/change-payment';
 import changePlanHandlers from './routes/connect/change-plan';
 import collectHandlers from './routes/connect/collect';
+import collectBatchHandlers from './routes/connect/collect-batch';
 import payHandlers from './routes/connect/pay';
 import setupHandlers from './routes/connect/setup';
 import subscribeHandlers from './routes/connect/subscribe';
@@ -54,6 +55,7 @@ app.use(ensureI18n());
 
 const router = express.Router();
 handlers.attach(Object.assign({ app: router }, collectHandlers));
+handlers.attach(Object.assign({ app: router }, collectBatchHandlers));
 handlers.attach(Object.assign({ app: router }, payHandlers));
 handlers.attach(Object.assign({ app: router }, setupHandlers));
 handlers.attach(Object.assign({ app: router }, subscribeHandlers));

package/api/src/locales/zh.ts

@@ -11,7 +11,7 @@ export default flat({
       validityPeriod: '服务周期',
       trialPeriod: '试用期',
       viewSubscription: '查看订阅',
-      viewInvoice: '查看发票',
+      viewInvoice: '查看账单',
       viewTxHash: '查看交易',
       trialDuration: '试用期时长',
       duration: '时长',

package/api/src/queues/payment.ts

@@ -77,7 +77,7 @@ export const handlePaymentSucceed = async (paymentIntent: PaymentIntent) => {
         logger.info(`Subscription ${subscription.id} updated on payment done ${invoice.id}`);
       } else if (subscription.status === 'past_due' && subscription.cancelation_details?.reason === 'payment_failed') {
         // ensure no uncollectible amount before recovering from payment failed
-        const result = await Invoice.getUncollectibleAmountBySubscription(subscription.id);
+        const [result] = await Invoice.getUncollectibleAmount({ subscriptionId: subscription.id });
         if (isEmpty(result)) {
           // reset billing cycle anchor and cancel_* if we are recovering from payment failed
           if (subscription.cancel_at && subscription.cancel_at !== subscription.current_period_end) {

package/api/src/routes/connect/collect-batch.ts

@@ -0,0 +1,125 @@
+/* eslint-disable no-await-in-loop */
+import type { Transaction } from '@ocap/client';
+import { fromAddress } from '@ocap/wallet';
+
+import type { CallbackArgs } from '../../libs/auth';
+import { wallet } from '../../libs/auth';
+import { getGasPayerExtra } from '../../libs/payment';
+import { getTxMetadata } from '../../libs/util';
+import { invoiceQueue } from '../../queues/invoice';
+import { handlePaymentSucceed, paymentQueue } from '../../queues/payment';
+import { PaymentIntent } from '../../store/models';
+import { ensureSubscriptionForCollectBatch, getAuthPrincipalClaim } from './shared';
+
+// Used to collect uncollectible invoices for a subscription and currency
+export default {
+  action: 'collect-batch',
+  authPrincipal: false,
+  claims: {
+    authPrincipal: async ({ extraParams }: CallbackArgs) => {
+      const { paymentMethod } = await ensureSubscriptionForCollectBatch(
+        extraParams.subscriptionId,
+        extraParams.currencyId
+      );
+      return getAuthPrincipalClaim(paymentMethod, 'pay');
+    },
+  },
+  onConnect: async ({ userDid, userPk, extraParams }: CallbackArgs) => {
+    const { subscriptionId, currencyId } = extraParams;
+    const { amount, invoices, paymentCurrency, paymentMethod } = await ensureSubscriptionForCollectBatch(
+      subscriptionId,
+      currencyId
+    );
+
+    if (paymentMethod.type === 'arcblock') {
+      const tokens = [{ address: paymentCurrency.contract as string, value: amount }];
+      // @ts-ignore
+      const itx: TransferV3Tx = {
+        outputs: [{ owner: wallet.address, tokens, assets: [] }],
+        data: getTxMetadata({
+          subscriptionId,
+          currencyId,
+          invoices,
+        }),
+      };
+
+      const claims: { [key: string]: object } = {
+        prepareTx: {
+          type: 'TransferV3Tx',
+          description: `Pay all past due invoices for ${subscriptionId}`,
+          partialTx: { from: userDid, pk: userPk, itx },
+          requirement: { tokens },
+          chainInfo: {
+            host: paymentMethod.settings?.arcblock?.api_host as string,
+            id: paymentMethod.settings?.arcblock?.chain_id as string,
+          },
+        },
+      };
+
+      return claims;
+    }
+
+    throw new Error(`Payment method ${paymentMethod.type} not supported`);
+  },
+  onAuth: async ({ userDid, claims, extraParams }: CallbackArgs) => {
+    const { subscriptionId, currencyId } = extraParams;
+    const { invoices, paymentMethod } = await ensureSubscriptionForCollectBatch(subscriptionId, currencyId);
+
+    if (paymentMethod.type === 'arcblock') {
+      const client = paymentMethod.getOcapClient();
+      const claim = claims.find((x) => x.type === 'prepareTx');
+
+      const tx: Partial<Transaction> = client.decodeTx(claim.finalTx);
+      if (claim.delegator && claim.from) {
+        tx.delegator = claim.delegator;
+        tx.from = claim.from;
+      }
+
+      // @ts-ignore
+      const { buffer } = await client.encodeTransferV3Tx({ tx });
+      const txHash = await client.sendTransferV3Tx(
+        // @ts-ignore
+        { tx, wallet: fromAddress(userDid) },
+        getGasPayerExtra(buffer)
+      );
+
+      const paymentIntents = await PaymentIntent.findAll({
+        where: {
+          invoice_id: invoices,
+        },
+      });
+      for (const paymentIntent of paymentIntents) {
+        await paymentIntent.update({
+          status: 'succeeded',
+          amount_received: paymentIntent.amount,
+          capture_method: 'manual',
+          last_payment_error: null,
+          payment_details: {
+            arcblock: {
+              tx_hash: txHash,
+              payer: userDid,
+            },
+          },
+        });
+
+        await handlePaymentSucceed(paymentIntent);
+
+        // cleanup the queue
+        let exist = await paymentQueue.get(paymentIntent.id);
+        if (exist) {
+          await paymentQueue.delete(paymentIntent.id);
+        }
+        if (paymentIntent.invoice_id) {
+          exist = await invoiceQueue.get(paymentIntent.invoice_id);
+          if (exist) {
+            await invoiceQueue.delete(paymentIntent.invoice_id);
+          }
+        }
+      }
+
+      return { hash: txHash };
+    }
+
+    throw new Error(`Payment method ${paymentMethod.type} not supported`);
+  },
+};

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

@@ -4,6 +4,7 @@ import { toTypeInfo } from '@arcblock/did';
 import { toDelegateAddress } from '@arcblock/did-util';
 import { BN } from '@ocap/util';
 import { fromPublicKey } from '@ocap/wallet';
+import isEmpty from 'lodash/isEmpty';
 
 import { estimateMaxGasForTx, hasStakedForGas } from '../../integrations/blockchain/stake';
 import { blocklet, wallet } from '../../libs/auth';
@@ -768,3 +769,34 @@ export async function ensureChangePaymentContext(subscriptionId: string) {
     paymentCurrency,
   };
 }
+
+export async function ensureSubscriptionForCollectBatch(subscriptionId: string, currencyId: string) {
+  const subscription = await Subscription.findByPk(subscriptionId);
+  if (!subscription) {
+    throw new Error(`Subscription ${subscriptionId} not found when prepare batch collect`);
+  }
+
+  const paymentCurrency = await PaymentCurrency.findByPk(currencyId);
+  if (!paymentCurrency) {
+    throw new Error(`PaymentCurrency ${currencyId} not found when prepare batch collect`);
+  }
+
+  const [summary, detail] = await Invoice.getUncollectibleAmount({
+    subscriptionId: subscription.id,
+    customerId: subscription.customer_id,
+    currencyId,
+  });
+  if (isEmpty(summary) || !summary[currencyId] || summary[currencyId] === '0') {
+    throw new Error(`No uncollectible invoice found for subscription ${subscriptionId} to batch collect`);
+  }
+
+  const paymentMethod = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+
+  return {
+    subscription,
+    paymentCurrency: paymentCurrency as PaymentCurrency,
+    paymentMethod: paymentMethod as PaymentMethod,
+    amount: summary[currencyId],
+    invoices: detail[currencyId],
+  };
+}

package/api/src/routes/subscriptions.ts

@@ -1375,4 +1375,24 @@ router.get('/:id/usage-records', authPortal, (req, res) => {
   createUsageRecordQueryFn(req.doc)(req, res);
 });
 
+// Get invoice summary
+router.get('/:id/summary', authPortal, async (req, res) => {
+  try {
+    const subscription = await Subscription.findByPk(req.params.id);
+    if (!subscription) {
+      return res.status(404).json({ error: 'Subscription not found' });
+    }
+
+    const [summary] = await Invoice.getUncollectibleAmount({
+      subscriptionId: subscription.id,
+      currencyId: subscription.currency_id,
+      customerId: subscription.customer_id,
+    });
+    return res.json(summary);
+  } catch (err) {
+    console.error(err);
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 export default router;

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

@@ -161,11 +161,11 @@ export class Customer extends Model<InferAttributes<Customer>, InferCreationAttr
 
   public async getSummary() {
     const { PaymentIntent, Refund, Invoice } = this.sequelize.models;
-    const [paid, due, refunded] = await Promise.all([
+    const [paid, [due], refunded] = await Promise.all([
       // @ts-ignore
       PaymentIntent!.getPaidAmountByCustomer(this.id),
       // @ts-ignore
-      Invoice!.getUncollectibleAmountByCustomer(this.id),
+      Invoice!.getUncollectibleAmount({ customerId: this.id }),
       // @ts-ignore
       Refund!.getRefundAmountByCustomer(this.id),
     ]);
@@ -176,8 +176,8 @@ export class Customer extends Model<InferAttributes<Customer>, InferCreationAttr
   public async canMakeNewPurchase(excludedInvoiceId: string = '') {
     const { Invoice } = this.sequelize.models;
     // @ts-ignore
-    const result = await Invoice!.getUncollectibleAmountByCustomer(this.id, excludedInvoiceId);
-    return Object.entries(result).every(([, amount]) => new BN(amount).lte(new BN(0)));
+    const [summary] = await Invoice!.getUncollectibleAmount({ customerId: this.id, excludedInvoiceId });
+    return Object.entries(summary).every(([, amount]) => new BN(amount).lte(new BN(0)));
   }
 
   public getBalanceToApply(currencyId: string, amount: string) {

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

@@ -19,6 +19,7 @@ import type {
   CustomerShipping,
   DiscountAmount,
   GroupedBN,
+  GroupedStrList,
   PaymentError,
   PaymentSettings,
   SimpleCustomField,
@@ -523,44 +524,59 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
     return ['paid', 'void'].includes(this.status);
   }
 
-  public static async getUncollectibleAmount(where: WhereOptions<Invoice>): Promise<GroupedBN> {
+  private static async _getUncollectibleAmount(where: WhereOptions<Invoice>): Promise<[GroupedBN, GroupedStrList]> {
     const invoices = await Invoice.findAll({ where });
-    return invoices.reduce((acc: GroupedBN, invoice) => {
+    const summary: GroupedBN = {};
+    const detail: GroupedStrList = {};
+
+    invoices.forEach((invoice) => {
       const key = invoice.currency_id;
-      if (!acc[key]) {
-        acc[key] = '0';
+      if (!summary[key]) {
+        summary[key] = '0';
+      }
+      if (!detail[key]) {
+        detail[key] = [];
       }
 
-      acc[key] = new BN(acc[key]).add(new BN(invoice.amount_remaining)).toString();
+      summary[key] = new BN(summary[key]).add(new BN(invoice.amount_remaining)).toString();
+      detail[key]!.push(invoice.id);
+    });
 
-      return acc;
-    }, {});
+    return [summary, detail];
   }
 
-  public static getUncollectibleAmountByCustomer(customerId: string, excludedInvoiceId?: string) {
-    const where: WhereOptions<Invoice> = {
-      status: ['uncollectible'],
-      customer_id: customerId,
-      amount_remaining: { [Op.gt]: '0' },
-    };
-    if (excludedInvoiceId) {
-      where.id = { [Op.not]: excludedInvoiceId };
+  public static getUncollectibleAmount({
+    customerId,
+    subscriptionId,
+    currencyId,
+    excludedInvoiceId,
+  }: {
+    customerId?: string;
+    subscriptionId?: string;
+    currencyId?: string;
+    excludedInvoiceId?: string;
+  }) {
+    if (!customerId && !subscriptionId) {
+      throw new Error('customerId or subscriptionId is required for getUncollectibleAmount');
     }
-
-    return Invoice.getUncollectibleAmount(where);
-  }
-
-  public static getUncollectibleAmountBySubscription(subscriptionId: string, excludedInvoiceId?: string) {
     const where: WhereOptions<Invoice> = {
       status: ['uncollectible'],
-      subscription_id: subscriptionId,
       amount_remaining: { [Op.gt]: '0' },
     };
+    if (currencyId) {
+      where.currency_id = currencyId;
+    }
+    if (customerId) {
+      where.customer_id = customerId;
+    }
+    if (subscriptionId) {
+      where.subscription_id = subscriptionId;
+    }
     if (excludedInvoiceId) {
       where.id = { [Op.not]: excludedInvoiceId };
     }
 
-    return Invoice.getUncollectibleAmount(where);
+    return this._getUncollectibleAmount(where);
   }
 }
 

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

@@ -322,7 +322,7 @@ export class Subscription extends Model<InferAttributes<Subscription>, InferCrea
                   },
                 });
                 if (count === 2) {
-                  // 当且仅当 有试用期的订阅更新了 && 恰好有 2 次发票,此时订阅的试用期刚好结束
+                  // 当且仅当 有试用期的订阅更新了 && 恰好有 2 次账单,此时订阅的试用期刚好结束
                   createEvent('Subscription', 'customer.subscription.trial_end', model, options).catch(console.error);
                 }
               }

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

@@ -2,6 +2,7 @@
 import type { LiteralUnion } from 'type-fest';
 
 export type GroupedBN = { [currencyId: string]: string };
+export type GroupedStrList = { [currencyId: string]: string[] };
 
 export type Pagination<T = any> = T & {
   // offset based

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

@@ -1,17 +1,16 @@
 import { Op } from 'sequelize';
+
+import { getWhereFromKvQuery } from '../../src/libs/api';
 import dayjs from '../../src/libs/dayjs';
 import {
   createCodeGenerator,
   createIdGenerator,
   formatMetadata,
   getDataObjectFromQuery,
-
   getNextRetry,
   tryWithTimeout,
 } from '../../src/libs/util';
 
-import { getWhereFromKvQuery } from '../../src/libs/api'
-
 describe('createIdGenerator', () => {
   it('should return a function that generates an ID with the specified prefix and size', () => {
     const generateId = createIdGenerator('test', 10);
@@ -199,11 +198,7 @@ describe('getWhereFromKvQuery', () => {
     const q = 'like-status:succ like-number:1533';
     const result = getWhereFromKvQuery(q);
     expect(result).toEqual({
-      [Op.or]: [
-        { status: { [Op.like]: `%succ%` } },
-        { number: { [Op.like]: `%1533%` } }
-      ],
+      [Op.or]: [{ status: { [Op.like]: '%succ%' } }, { number: { [Op.like]: '%1533%' } }],
     });
   });
-
-});
+});

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.13.163
+version: 1.13.165
 logo: logo.png
 files:
   - dist
@@ -93,7 +93,7 @@ navigation:
   - id: billing
     title:
       en: Billing
-      zh: 订阅管理
+      zh: 我的账单
     icon: ion:receipt-outline
     link: /customer
     section:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.163",
+  "version": "1.13.165",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -50,7 +50,7 @@
     "@arcblock/jwt": "^1.18.110",
     "@arcblock/ux": "^2.9.39",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.163",
+    "@blocklet/payment-react": "1.13.165",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.39",
     "@blocklet/uploader": "^0.0.74",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.163",
+    "@blocklet/payment-types": "1.13.165",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "2f485afbabe92bb6e63b09c4e69cb2ae06d3d2be"
+  "gitHead": "24fadab6620ca13856393399efd6a1dffc431d66"
 }

package/src/components/filter-toolbar.tsx

@@ -40,7 +40,7 @@ type Props = {
   setSearch: (x: any) => void;
 };
 
-export default function FilterTooolbar(props: Props) {
+export default function FilterToolbar(props: Props) {
   const { setSearch, search, status, currency } = props;
   const isProduct = window.location.pathname.includes('product');
   const handleSearch = (obj: any) => {
@@ -71,7 +71,7 @@ const defaultProps = {
   currency: false,
 };
 
-FilterTooolbar.defaultProps = defaultProps;
+FilterToolbar.defaultProps = defaultProps;
 SearchStatus.defaultProps = defaultProps;
 SearchCurrency.defaultProps = defaultProps;
 SearchProducts.defaultProps = defaultProps;
@@ -218,7 +218,7 @@ function SearchCustomers({ setSearch }: Pick<Props, 'setSearch'>) {
         'like-phone': text,
       },
       page: 1,
-      pageSize: 100,
+      pageSize: 10,
     }).then((data: any) => {
       setCustomers(data.list);
     });
@@ -315,7 +315,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
           [key]: str,
         },
         page: 1,
-        pageSize: 100,
+        pageSize: 10,
       });
     });
   }, [price]);
@@ -371,7 +371,7 @@ function SearchProducts({ setSearch }: Pick<Props, 'setSearch'>) {
 const Root = styled(Box)`
   .table-toolbar-left {
     display: flex;
-    align-items: cneter;
+    align-items: center;
   }
 
   .table-toolbar-left section {
@@ -396,10 +396,6 @@ const Root = styled(Box)`
     padding: 0 3px;
   }
 
-  .custom-toobar-title-inner {
-    line-height: normal;
-  }
-
   .status-options {
     position: absolute;
     box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
@@ -419,8 +415,4 @@ const Root = styled(Box)`
     list-style: none;
     line-height: normal;
   }
-
-  .custom-toobar-title-inner span {
-    overflow: auto;
-  }
 `;

package/src/components/invoice/list.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
-import FilterTooolbar from '../filter-toolbar';
+import FilterToolbar from '../filter-toolbar';
 import Table from '../table';
 import InvoiceActions from './action';
 
@@ -41,6 +41,7 @@ type ListProps = {
   features?: {
     customer?: boolean;
     toolbar?: boolean;
+    filter?: boolean;
     footer?: boolean;
   };
   customer_id?: string;
@@ -68,6 +69,7 @@ const getListKey = (props: ListProps) => {
 InvoiceList.defaultProps = {
   features: {
     customer: true,
+    filter: true,
   },
   customer_id: '',
   subscription_id: '',
@@ -150,20 +152,21 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       },
     },
     {
-      label: t('admin.invoice.dueDate'),
-      name: 'due_date',
+      label: t('common.createdAt'),
+      name: 'created_at',
       options: {
-        customBodyRender: (e: number) => {
-          return e ? formatTime(e * 1000) : '-';
+        sort: true,
+        responsive: 'vertical',
+        customBodyRender: (e: string) => {
+          return formatTime(e);
         },
       },
     },
     {
-      label: t('common.createdAt'),
-      name: 'created_at',
+      label: t('common.updatedAt'),
+      name: 'updated_at',
       options: {
         sort: true,
-        responsive: 'vertical',
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -260,7 +263,14 @@ export default function InvoiceList({ customer_id, subscription_id, features, st
       toolbar={features?.toolbar}
       footer={features?.footer}
       title={
-        <FilterTooolbar setSearch={setSearch} search={search} status={['paid', 'open', 'uncollectible']} currency />
+        features?.filter && (
+          <FilterToolbar
+            setSearch={setSearch}
+            search={search}
+            status={['draft', 'open', 'void', 'paid', 'uncollectible']}
+            currency
+          />
+        )
       }
     />
   );

package/src/components/payment-intent/list.tsx

@@ -10,7 +10,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { debounce } from '../../libs/util';
 import CustomerLink from '../customer/link';
-import FilterTooolbar from '../filter-toolbar';
+import FilterToolbar from '../filter-toolbar';
 import Table from '../table';
 import PaymentIntentActions from './actions';
 
@@ -42,6 +42,7 @@ type ListProps = {
   features?: {
     customer?: boolean;
     toolbar?: boolean;
+    filter?: boolean;
     footer?: boolean;
   };
   customer_id?: string;
@@ -107,8 +108,15 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return (
-            <Typography component="strong" fontWeight={600}>
-              {fromUnitToToken(item?.amount_received, item?.paymentCurrency.decimal)}&nbsp;
+            <Typography
+              component="strong"
+              sx={{ color: item.amount_received === '0' ? 'warning.main' : 'inherit' }}
+              fontWeight={600}>
+              {fromUnitToToken(
+                item.amount_received === '0' ? item.amount : item.amount_received,
+                item?.paymentCurrency.decimal
+              )}
+              &nbsp;
               {item?.paymentCurrency.symbol}
             </Typography>
           );
@@ -120,7 +128,6 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       name: 'status',
       width: 60,
       options: {
-        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />;
@@ -131,7 +138,6 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       label: t('common.description'),
       name: 'description',
       options: {
-        filter: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TPaymentIntentExpanded;
           return item.description || item.id;
@@ -143,7 +149,16 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       name: 'created_at',
       options: {
         sort: true,
-        filterType: 'dropdown',
+        customBodyRender: (e: string) => {
+          return formatTime(e);
+        },
+      },
+    },
+    {
+      label: t('common.updatedAt'),
+      name: 'updated_at',
+      options: {
+        sort: true,
         customBodyRender: (e: string) => {
           return formatTime(e);
         },
@@ -230,7 +245,22 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
       toolbar={features?.toolbar}
       footer={features?.footer}
       title={
-        <FilterTooolbar setSearch={setSearch} search={search} status={['succeeded', 'requires_action']} currency />
+        features?.filter && (
+          <FilterToolbar
+            setSearch={setSearch}
+            search={search}
+            status={[
+              'requires_payment_method',
+              'requires_confirmation',
+              'requires_action',
+              'processing',
+              'requires_capture',
+              'canceled',
+              'succeeded',
+            ]}
+            currency
+          />
+        )
       }
     />
   );

package/src/components/refund/list.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
-import FilterTooolbar from '../filter-toolbar';
+import FilterToolbar from '../filter-toolbar';
 import Table from '../table';
 import RefundActions from './actions';
 
@@ -42,6 +42,7 @@ type ListProps = {
   features?: {
     customer?: boolean;
     toolbar?: boolean;
+    filter?: boolean;
     footer?: boolean;
   };
   customer_id?: string;
@@ -231,7 +232,16 @@ export default function RefundList({ customer_id, invoice_id, subscription_id, f
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}
-      title={<FilterTooolbar setSearch={setSearch} search={search} status={['successed']} currency />}
+      title={
+        features?.filter && (
+          <FilterToolbar
+            setSearch={setSearch}
+            search={search}
+            status={['requires_action', 'pending', 'failed', 'canceled', 'succeeded']}
+            currency
+          />
+        )
+      }
     />
   );
 }

package/src/components/subscription/list.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import CustomerLink from '../customer/link';
-import FilterTooolbar from '../filter-toolbar';
+import FilterToolbar from '../filter-toolbar';
 import Table from '../table';
 import SubscriptionActions from './actions';
 import SubscriptionDescription from './description';
@@ -41,6 +41,7 @@ type ListProps = {
   features?: {
     customer?: boolean;
     toolbar?: boolean;
+    filter?: boolean;
     footer?: boolean;
   };
   customer_id?: string;
@@ -222,7 +223,15 @@ export default function SubscriptionList({ customer_id, features, status }: List
       }}
       toolbar={features?.toolbar}
       footer={features?.footer}
-      title={<FilterTooolbar setSearch={setSearch} search={search} status={['active', 'canceled']} />}
+      title={
+        features?.filter && (
+          <FilterToolbar
+            setSearch={setSearch}
+            search={search}
+            status={['active', 'canceled', 'incomplete', 'incomplete_expired', 'past_due', 'trialing', 'paused']}
+          />
+        )
+      }
     />
   );
 }

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

@@ -5,6 +5,7 @@ import { ConfirmDialog, api, formatError, formatToDate, getSubscriptionAction }
 import type { TSubscriptionExpanded } from '@blocklet/payment-types';
 import { Button, Link, Stack } from '@mui/material';
 import { useRequest, useSetState } from 'ahooks';
+import isEmpty from 'lodash/isEmpty';
 import { FormProvider, useForm, useFormContext } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 
@@ -12,29 +13,52 @@ import CustomerCancelForm from './cancel';
 
 type Props = {
   subscription: TSubscriptionExpanded;
-  showUpdate?: boolean;
+  showExtra?: boolean;
   onChange: (action?: string) => any | Promise<any>;
 };
 
 SubscriptionActions.defaultProps = {
-  showUpdate: false,
+  showExtra: false,
 };
 
-const fetchUpdateOptions = ({ id, showUpdate }: { id: string; showUpdate: boolean }): Promise<boolean> => {
-  if (!showUpdate) {
-    return Promise.resolve(false);
+const fetchExtraActions = async ({
+  id,
+  showExtra,
+}: {
+  id: string;
+  showExtra: boolean;
+}): Promise<{ changePlan: boolean; batchPay: string }> => {
+  if (!showExtra) {
+    return Promise.resolve({ changePlan: false, batchPay: '' });
   }
 
-  return api.get(`/api/subscriptions/${id}/change-plan`).then((res) => !!res.data);
+  const [changePlan, batchPay] = await Promise.all([
+    api
+      .get(`/api/subscriptions/${id}/change-plan`)
+      .then((res) => !!res.data)
+      .catch(() => false),
+    api
+      .get(`/api/subscriptions/${id}/summary`)
+      .then((res) => {
+        if (!isEmpty(res.data) && Object.keys(res.data).length === 1) {
+          return Object.keys(res.data)[0] as string;
+        }
+
+        return '';
+      })
+      .catch(() => ''),
+  ]);
+
+  return { changePlan, batchPay };
 };
 
-export function SubscriptionActionsInner({ subscription, showUpdate, onChange }: Props) {
+export function SubscriptionActionsInner({ subscription, showExtra, onChange }: Props) {
   const { t, locale } = useLocaleContext();
   const { reset, getValues } = useFormContext();
   const navigate = useNavigate();
   const action = getSubscriptionAction(subscription);
 
-  const { data } = useRequest(() => fetchUpdateOptions({ id: subscription.id, showUpdate: !!showUpdate }));
+  const { data: extraActions } = useRequest(() => fetchExtraActions({ id: subscription.id, showExtra: !!showExtra }));
 
   const [state, setState] = useSetState({
     action: '',
@@ -75,7 +99,7 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
 
   return (
     <Stack direction="row" alignItems="center" spacing={1}>
-      {action && (
+      {!extraActions?.batchPay && action && (
         <Button
           variant={action.variant as any}
           color={action.color as any}
@@ -93,7 +117,7 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
           {t(`payment.customer.${action.action}.button`)}
         </Button>
       )}
-      {data && (
+      {extraActions?.changePlan && (
         <Button
           variant="contained"
           color="primary"
@@ -104,6 +128,17 @@ export function SubscriptionActionsInner({ subscription, showUpdate, onChange }:
           {t('payment.customer.changePlan.button')}
         </Button>
       )}
+      {!!extraActions?.batchPay && (
+        <Button
+          variant="contained"
+          color="info"
+          size="small"
+          onClick={() => {
+            navigate(`/customer/invoice/past-due?subscription=${subscription.id}&currency=${extraActions.batchPay}`);
+          }}>
+          {t('admin.subscription.batchPay.button')}
+        </Button>
+      )}
       {subscription.service_actions?.map((x) => (
         // @ts-ignore
         <Button
@@ -160,5 +195,5 @@ export default function SubscriptionActions(props: Props) {
 }
 
 SubscriptionActionsInner.defaultProps = {
-  showUpdate: false,
+  showExtra: false,
 };

package/src/locales/en.tsx

@@ -231,6 +231,7 @@ export default flat({
       customer: 'Customer portal',
     },
     paymentIntent: {
+      list: 'Payments',
       name: 'Payment',
       view: 'View payment detail',
       empty: 'No payment intent',
@@ -385,6 +386,9 @@ export default flat({
         vary: 'Varies with usage',
         used: 'Unit used',
       },
+      batchPay: {
+        button: 'Pay due invoices',
+      },
     },
     customer: {
       view: 'View customer',

package/src/locales/zh.tsx

@@ -21,8 +21,8 @@ export default flat({
     coupons: '优惠券',
     pricing: '定价',
     pricingTables: '价格表',
-    billing: '订阅和发票',
-    invoices: '发票',
+    billing: '订阅和账单',
+    invoices: '账单',
     subscriptions: '订阅',
     developers: '开发者工具箱',
     webhooks: '钩子',
@@ -53,7 +53,7 @@ export default flat({
       removeTip: '删除将隐藏此产品不再允许新购买。确定要删除此产品吗？',
       archived: '此产品已存档',
       archivedTip:
-        '此产品无法添加到新的发票、订阅、支付链接或定价表。具有此产品的任何现有订阅将保持活动状态，直到取消，任何现有的支付链接或定价表将被停用。',
+        '此产品无法添加到新的账单、订阅、支付链接或定价表。具有此产品的任何现有订阅将保持活动状态，直到取消，任何现有的支付链接或定价表将被停用。',
       locked: '此产品已锁定，因为至少有一个价格用于订阅或支付。',
       image: {
         label: '图片',
@@ -71,7 +71,7 @@ export default flat({
       description: {
         label: '描述',
         required: '产品描述是必需的',
-        placeholder: '在结账、发票页面显示的产品描述',
+        placeholder: '在结账、账单页面显示的产品描述',
       },
       statement_descriptor: {
         label: '声明描述',
@@ -183,7 +183,7 @@ export default flat({
       mintNft: '购买完成时铸造 NFT',
       mintNftFrom: '从下面的 NFT 集合铸造',
       noConfirmPage: '不显示确认页面',
-      createInvoice: '为相关付款创建发票。',
+      createInvoice: '为相关付款创建账单。',
       adjustable: '可调整数量',
       adjustableQuantity: '允许客户调整数量',
       noProducts: '支付链接必须至少有一个产品',
@@ -223,10 +223,11 @@ export default flat({
       customer: '客户门户',
     },
     paymentIntent: {
-      name: '支付',
-      view: '查看支付详情',
-      empty: '没有支付意向',
-      refund: '退款支付',
+      list: '付款记录',
+      name: '付款记录',
+      view: '查看付款详情',
+      empty: '没有付款记录',
+      refund: '退款',
       received: '实收金额',
     },
     paymentMethod: {
@@ -297,11 +298,11 @@ export default flat({
       pendingWebhooks: '待处理的钩子',
     },
     invoice: {
-      view: '查看发票',
-      name: '发票',
-      from: '发票来自',
-      empty: '没有发票',
-      number: '发票编号',
+      view: '查看账单',
+      name: '账单',
+      from: '账单来自',
+      empty: '没有账单',
+      number: '账单编号',
       dueDate: '截止日期',
       finalizedAt: '已完成时间',
       paidAt: '支付日期',
@@ -309,8 +310,8 @@ export default flat({
       customer: '开具给',
       billing: '计费方式',
       download: '下载PDF',
-      edit: '编辑发票',
-      duplicate: '复制发票',
+      edit: '编辑账单',
+      duplicate: '复制账单',
     },
     subscription: {
       view: '查看订阅',
@@ -323,11 +324,11 @@ export default flat({
       trailEnd: '试用期结束于{date}',
       discount: '折扣',
       startedAt: '开始于',
-      nextInvoice: '下一张发票',
+      nextInvoice: '下一张账单',
       itemId: '订阅项目ID',
       update: '更新订阅',
       resume: '恢复付款',
-      resumeTip: '您确定要继续收款吗？此订阅的未来发票将继续付款。',
+      resumeTip: '您确定要继续收款吗？此订阅的未来账单将继续付款。',
       cancel: {
         schedule: '计划取消',
         title: '取消订阅',
@@ -356,12 +357,12 @@ export default flat({
           custom: '暂停到自定义日期',
         },
         behavior: {
-          title: '发票行为',
-          keep_as_draft: '保留发票为草稿',
+          title: '账单行为',
+          keep_as_draft: '保留账单为草稿',
           keep_as_draft_tip: '对于目前提供服务但等待收款的企业。',
-          mark_uncollectible: '将发票标记为不可收款',
+          mark_uncollectible: '将账单标记为不可收款',
           mark_uncollectible_tip: '对于目前提供免费服务的企业。',
-          void: '作废发票',
+          void: '作废账单',
           voidTip: '对于目前不提供服务的企业。',
         },
         until: {
@@ -376,6 +377,9 @@ export default flat({
         vary: '随使用情况变化',
         used: '已使用单位',
       },
+      batchPay: {
+        button: '批量付款',
+      },
     },
     customer: {
       view: '查看客户',
@@ -387,7 +391,7 @@ export default flat({
       name: '名称',
       email: '电子邮件',
       phone: '电话',
-      invoicePrefix: '发票前缀',
+      invoicePrefix: '账单前缀',
       balance: '余额 ({currency})',
       address: {
         label: '地址',

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

@@ -132,6 +132,16 @@ export default function InvoiceDetail(props: { id: string }) {
             label={t('admin.paymentCurrency.name')}
             value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
           />
+          {data.subscription && (
+            <InfoRow
+              label={t('admin.subscription.name')}
+              value={
+                <Link to={`/admin/billing/${data.subscription.id}`}>
+                  {data.subscription.description || data.subscription.id}
+                </Link>
+              }
+            />
+          )}
         </Stack>
       </Box>
       <Box className="section">

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

@@ -1,5 +1,5 @@
 import InvoiceList from '../../../../components/invoice/list';
 
 export default function InvoicesList() {
-  return <InvoiceList features={{ customer: true, toolbar: true }} />;
+  return <InvoiceList features={{ customer: true, toolbar: true, filter: true }} />;
 }

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

@@ -41,7 +41,7 @@ export default function PaymentIndex() {
   // @ts-ignore
   const TabComponent = pages[page] || pages.intents;
   const tabs = [
-    { label: t('admin.payments'), value: 'intents' },
+    { label: t('admin.paymentIntent.list'), value: 'intents' },
     { label: t('admin.refunds'), value: 'refunds' },
     { label: t('admin.paymentLinks'), value: 'links' },
   ];

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

@@ -1,6 +1,12 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
+import {
+  CustomerInvoiceList,
+  PaymentProvider,
+  formatError,
+  getPrefix,
+  usePaymentContext,
+} from '@blocklet/payment-react';
 import type { TCustomerExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -18,7 +24,7 @@ const fetchData = (): Promise<TCustomerExpanded> => {
   return api.get('/api/customers/me').then((res) => res.data);
 };
 
-export default function CustomerInvoicePastDue() {
+export function CustomerInvoicePastDue() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
   const { connect } = usePaymentContext();
@@ -49,12 +55,13 @@ export default function CustomerInvoicePastDue() {
   }
 
   const subscriptionId = params.get('subscription') || '';
+  const currencyId = params.get('currency') || '';
   const handleBatchPay = () => {
     connect.open({
       containerEl: undefined as unknown as Element,
       action: 'collect-batch',
       prefix: joinURL(window.location.origin, getPrefix(), '/api/did'),
-      extraParams: { subscriptionId },
+      extraParams: { subscriptionId, currencyId },
       onSuccess: () => {
         connect.close();
       },
@@ -83,9 +90,9 @@ export default function CustomerInvoicePastDue() {
         <Alert severity="info">{t('payment.customer.pastDue.warning')}</Alert>
         <Box className="section">
           <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
-            {subscriptionId && false && (
-              <Button size="small" variant="contained" color="primary" onClick={handleBatchPay}>
-                {t('payment.customer.pastDue.batchPay')}
+            {subscriptionId && currencyId && (
+              <Button size="small" variant="contained" color="info" onClick={handleBatchPay}>
+                {t('admin.subscription.batchPay.button')}
               </Button>
             )}
           </SectionHeader>
@@ -93,9 +100,11 @@ export default function CustomerInvoicePastDue() {
             <CustomerInvoiceList
               customer_id={data.id}
               subscription_id={subscriptionId}
+              currency_id={currencyId}
               pageSize={100}
               status="uncollectible"
               target="_blank"
+              action="pay"
             />
           </Box>
         </Box>
@@ -109,3 +118,13 @@ const Root = styled(Stack)`
     text-decoration: underline;
   }
 `;
+
+export default function PastDueWrapper() {
+  const { session, connectApi } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connectApi}>
+      <CustomerInvoicePastDue />
+    </PaymentProvider>
+  );
+}

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

@@ -60,7 +60,7 @@ export default function CustomerSubscriptionDetail() {
               <SubscriptionDescription subscription={data} variant="h5" />
               <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
             </Stack>
-            <SubscriptionActions subscription={data} onChange={() => refresh()} showUpdate />
+            <SubscriptionActions subscription={data} onChange={() => refresh()} showExtra />
           </Stack>
           <Stack
             className="section-body"