payment-kit 1.13.235 → 1.13.237

package/api/src/crons/index.ts

@@ -6,7 +6,6 @@ import {
   batchHandleStripePayments,
   batchHandleStripeSubscriptions,
 } from '../integrations/stripe/resource';
-import dayjs from '../libs/dayjs';
 import {
   expiredSessionCleanupCronTime,
   notificationCronTime,
@@ -89,7 +88,7 @@ function init() {
       {
         name: 'payment.stat',
         time: paymentStatCronTime,
-        fn: () => createPaymentStat(dayjs().subtract(1, 'day').toDate().toISOString()),
+        fn: () => createPaymentStat(),
         options: { runOnInit: false },
       },
     ],

package/api/src/crons/payment-stat.ts

@@ -84,29 +84,69 @@ export async function getPaymentStat(
   };
 }
 
-export async function createPaymentStat(date: string) {
-  const { stats, timestamp, currencies } = await getPaymentStat(date);
+export async function getDates() {
+  const item = await PaymentStat.findOne({
+    order: [['timestamp', 'DESC']],
+    limit: 1,
+    offset: 0,
+    attributes: ['timestamp'],
+  });
+
+  const dayInSeconds = 60 * 60 * 24;
+  const now = dayjs().unix() - dayInSeconds;
+
+  if (item) {
+    const dates: string[] = [];
+    let current = item.timestamp + dayInSeconds;
+    while (current < now) {
+      dates.push(
+        dayjs(current * 1000)
+          .toDate()
+          .toISOString()
+      );
+      current += dayInSeconds;
+    }
+
+    return dates;
+  }
+
+  return [
+    dayjs(now * 1000)
+      .subtract(1, 'day')
+      .toDate()
+      .toISOString(),
+  ];
+}
+
+export async function createPaymentStat(date?: string) {
+  const dates = date ? [date] : await getDates();
   await Promise.all(
-    currencies.map(async (currency) => {
-      const exist = await PaymentStat.findOne({ where: { timestamp, currency_id: currency.id } });
-      if (exist) {
-        await exist.update({
-          amount_paid: stats.payment![currency.id] || '0',
-          amount_payout: stats.payout![currency.id] || '0',
-          amount_refund: stats.refund![currency.id] || '0',
-        });
-        logger.info('PaymentStat updated', { date, timestamp, currency: currency.symbol });
-      } else {
-        await PaymentStat.create({
-          livemode: currency.livemode,
-          timestamp,
-          currency_id: currency.id,
-          amount_paid: stats.payment![currency.id] || '0',
-          amount_payout: stats.payout![currency.id] || '0',
-          amount_refund: stats.refund![currency.id] || '0',
-        });
-        logger.info('PaymentStat created', { date, timestamp, currency: currency.symbol });
-      }
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    dates.map(async (date) => {
+      const { stats, timestamp, currencies } = await getPaymentStat(date);
+      await Promise.all(
+        currencies.map(async (currency) => {
+          const exist = await PaymentStat.findOne({ where: { timestamp, currency_id: currency.id } });
+          if (exist) {
+            await exist.update({
+              amount_paid: stats.payment![currency.id] || '0',
+              amount_payout: stats.payout![currency.id] || '0',
+              amount_refund: stats.refund![currency.id] || '0',
+            });
+            logger.info('PaymentStat updated', { date, timestamp, currency: currency.symbol });
+          } else {
+            await PaymentStat.create({
+              livemode: currency.livemode,
+              timestamp,
+              currency_id: currency.id,
+              amount_paid: stats.payment![currency.id] || '0',
+              amount_payout: stats.payout![currency.id] || '0',
+              amount_refund: stats.refund![currency.id] || '0',
+            });
+            logger.info('PaymentStat created', { date, timestamp, currency: currency.symbol });
+          }
+        })
+      );
     })
   );
 }

package/api/src/libs/payment.ts

@@ -155,7 +155,11 @@ export function isCreditSufficientForPayment(args: {
   return { sufficient: true, balance };
 }
 
-export function getGasPayerExtra(txBuffer: Buffer) {
+export function getGasPayerExtra(txBuffer: Buffer, headers?: { [key: string]: string }) {
+  if (headers && headers['x-gas-payer-sig'] && headers['x-gas-payer-pk']) {
+    return { headers };
+  }
+
   const txHash = toTxHash(txBuffer);
   return {
     headers: {

package/api/src/routes/connect/change-payment.ts

@@ -104,7 +104,7 @@ export default {
     throw new Error(`ChangeMethod: Payment method ${paymentMethod.type} not supported`);
   },
 
-  onAuth: async ({ userDid, userPk, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, userPk, claims, extraParams }: CallbackArgs) => {
     const { subscriptionId } = extraParams;
     const { subscription, setupIntent, paymentCurrency, paymentMethod } = await ensureChangePaymentContext(
       subscriptionId
@@ -142,7 +142,7 @@ export default {
 
     if (paymentMethod.type === 'arcblock') {
       await prepareTxExecution();
-      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod);
+      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod, request);
       await afterTxExecution(paymentDetails);
       return { hash: paymentDetails.tx_hash };
     }

package/api/src/routes/connect/change-plan.ts

@@ -105,7 +105,7 @@ export default {
     throw new Error(`ChangePlan: Payment method ${paymentMethod.type} not supported`);
   },
 
-  onAuth: async ({ userDid, userPk, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, userPk, claims, extraParams }: CallbackArgs) => {
     const { subscriptionId } = extraParams;
     const { invoice, paymentMethod, subscription } = await ensureSubscription(subscriptionId);
 
@@ -140,7 +140,7 @@ export default {
     if (paymentMethod.type === 'arcblock') {
       await prepareTxExecution();
 
-      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod);
+      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod, request);
       await afterTxExecution(paymentDetails);
 
       return { hash: paymentDetails.tx_hash };

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

@@ -61,7 +61,7 @@ export default {
 
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
-  onAuth: async ({ userDid, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, claims, extraParams }: CallbackArgs) => {
     const { subscriptionId, currencyId } = extraParams;
     const { invoices, paymentMethod } = await ensureSubscriptionForCollectBatch(subscriptionId, currencyId);
 
@@ -80,7 +80,7 @@ export default {
       const txHash = await client.sendTransferV3Tx(
         // @ts-ignore
         { tx, wallet: fromAddress(userDid) },
-        getGasPayerExtra(buffer)
+        getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
       );
 
       const paymentIntents = await PaymentIntent.findAll({

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

@@ -96,7 +96,7 @@ export default {
 
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
-  onAuth: async ({ userDid, claims, extraParams }: CallbackArgs) => {
+  onAuth: async ({ request, userDid, claims, extraParams }: CallbackArgs) => {
     const { invoiceId } = extraParams;
     const { invoice, paymentIntent, paymentMethod } = await ensureInvoiceForCollect(invoiceId);
 
@@ -141,7 +141,7 @@ export default {
         const txHash = await client.sendTransferV3Tx(
           // @ts-ignore
           { tx, wallet: fromAddress(userDid) },
-          getGasPayerExtra(buffer)
+          getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
         );
 
         await afterTxExecution({

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

@@ -84,7 +84,7 @@ export default {
   },
 
   onAuth: async (args: CallbackArgs) => {
-    const { userDid, claims, extraParams } = args;
+    const { request, userDid, claims, extraParams } = args;
     const { checkoutSessionId, connectedDid } = extraParams;
     const { checkoutSession, customer, paymentIntent, paymentMethod } = await ensurePaymentIntent(
       checkoutSessionId,
@@ -113,7 +113,7 @@ export default {
         const txHash = await client.sendTransferV3Tx(
           // @ts-ignore
           { tx, wallet: fromAddress(userDid) },
-          getGasPayerExtra(buffer)
+          getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
         );
 
         await paymentIntent.update({

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

@@ -115,7 +115,7 @@ export default {
     throw new Error(`Payment method ${paymentMethod.type} not supported`);
   },
   onAuth: async (args: CallbackArgs) => {
-    const { userDid, userPk, claims, extraParams } = args;
+    const { request, userDid, userPk, claims, extraParams } = args;
     const { checkoutSessionId, connectedDid } = extraParams;
     const { setupIntent, checkoutSession, paymentMethod, subscription, invoice } = await ensureSetupIntent(
       checkoutSessionId,
@@ -169,7 +169,7 @@ export default {
       try {
         await prepareTxExecution();
 
-        const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod);
+        const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod, request);
         await afterTxExecution(paymentDetails);
 
         return { hash: paymentDetails.tx_hash };

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

@@ -6,6 +6,7 @@ import type { Transaction } from '@ocap/client';
 import { BN, fromTokenToUnit, toBase58 } from '@ocap/util';
 import { fromPublicKey } from '@ocap/wallet';
 import isEmpty from 'lodash/isEmpty';
+import type { Request } from 'express';
 
 import { estimateMaxGasForTx, hasStakedForGas } from '../../integrations/arcblock/stake';
 import { encodeApproveItx } from '../../integrations/ethereum/token';
@@ -920,7 +921,8 @@ export async function executeOcapTransactions(
   userDid: string,
   userPk: string,
   claims: any[],
-  paymentMethod: PaymentMethod
+  paymentMethod: PaymentMethod,
+  request: Request,
 ) {
   const client = paymentMethod.getOcapClient();
   const delegation = claims.find((x) => x.type === 'signature' && x.meta?.purpose === 'delegation');
@@ -947,7 +949,7 @@ export async function executeOcapTransactions(
       const txHash = await client[`send${type}Tx`](
         // @ts-ignore
         { tx, wallet: fromPublicKey(userPk, toTypeInfo(userDid)) },
-        getGasPayerExtra(buffer)
+        getGasPayerExtra(buffer, client.pickGasPayerHeaders(request))
       );
 
       return txHash;

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

@@ -117,7 +117,7 @@ export default {
     throw new Error(`subscription: Payment method ${paymentMethod.type} not supported`);
   },
   onAuth: async (args: CallbackArgs) => {
-    const { userDid, userPk, claims, extraParams } = args;
+    const { request, userDid, userPk, claims, extraParams } = args;
     const { checkoutSessionId, connectedDid } = extraParams;
     const { checkoutSession, customer, paymentMethod, subscription } = await ensurePaymentIntent(
       checkoutSessionId,
@@ -156,7 +156,7 @@ export default {
       await prepareTxExecution();
       const { invoice } = await ensureInvoiceForCheckout({ checkoutSession, customer, subscription });
 
-      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod);
+      const paymentDetails = await executeOcapTransactions(userDid, userPk, claims, paymentMethod, request);
       await afterTxExecution(invoice!, paymentDetails);
 
       return { hash: paymentDetails.tx_hash };

package/api/src/routes/payment-stats.ts

@@ -1,6 +1,7 @@
 import { Router } from 'express';
 import Joi from 'joi';
 import { Op } from 'sequelize';
+import { joinURL } from 'ufo';
 
 import { getPaymentStat } from '../crons/payment-stat';
 import { getTokenSummaryByDid } from '../integrations/arcblock/stake';
@@ -8,8 +9,16 @@ import { createListParamSchema } from '../libs/api';
 import { ethWallet, wallet } from '../libs/auth';
 import dayjs from '../libs/dayjs';
 import { authenticate } from '../libs/security';
-import { Invoice, PaymentIntent, Payout, Refund, Subscription } from '../store/models';
-import { PaymentStat } from '../store/models/payment-stat';
+import {
+  Invoice,
+  PaymentCurrency,
+  PaymentIntent,
+  PaymentMethod,
+  PaymentStat,
+  Payout,
+  Refund,
+  Subscription,
+} from '../store/models';
 
 const router = Router();
 const auth = authenticate<PaymentStat>({ component: true, roles: ['owner', 'admin'] });
@@ -50,8 +59,8 @@ router.get('/', auth, async (req, res) => {
 
     // Append live data at the end
     const now = dayjs().unix();
-    if (query.end && query.end > now) {
-      const { stats, timestamp, currencies } = await getPaymentStat(dayjs().toDate().toISOString());
+    if (query.end && query.end >= now) {
+      const { stats, timestamp, currencies } = await getPaymentStat(dayjs().toDate().toString());
       list.push(
         // @ts-ignore
         ...currencies
@@ -74,14 +83,38 @@ router.get('/', auth, async (req, res) => {
   }
 });
 
+async function getCurrencyLinks(livemode: boolean) {
+  const items = await PaymentCurrency.findAll({
+    where: { livemode },
+    include: [{ model: PaymentMethod, as: 'payment_method' }],
+  });
+
+  return items.reduce((acc, item: any) => {
+    if (item.payment_method.type === 'arcblock') {
+      acc[item.id] = joinURL(
+        item.payment_method.settings.arcblock?.explorer_host,
+        'accounts',
+        wallet.address,
+        'tokens'
+      );
+    }
+    if (item.payment_method.type === 'ethereum') {
+      acc[item.id] = joinURL(item.payment_method.settings.ethereum?.explorer_host, 'address', ethWallet.address);
+    }
+    return acc;
+  }, {} as any);
+}
+
 // eslint-disable-next-line consistent-return
 router.get('/summary', auth, async (req, res) => {
   try {
-    const [arcblock, ethereum] = await Promise.all([
+    const [arcblock, ethereum, links] = await Promise.all([
       getTokenSummaryByDid(wallet.address, !!req.livemode, 'arcblock'),
       getTokenSummaryByDid(ethWallet.address, !!req.livemode, 'ethereum'),
+      getCurrencyLinks(!!req.livemode),
     ]);
     res.json({
+      links,
       balances: { ...arcblock, ...ethereum },
       addresses: { arcblock: wallet.address, ethereum: ethWallet.address },
       summary: {

package/api/src/routes/subscriptions.ts

@@ -173,7 +173,6 @@ router.get('/search', auth, async (req, res) => {
   res.json({ count, list: docs, paging: { page, pageSize } });
 });
 
-// FIXME: exclude some sensitive fields from PaymentMethod
 router.get('/:id', authPortal, async (req, res) => {
   try {
     const doc = await Subscription.findOne({
@@ -830,8 +829,16 @@ router.put('/:id', authPortal, async (req, res) => {
           await subscriptionQueue.delete(subscription.id);
           await addSubscriptionJob(subscription, 'cycle', false, subscription.trial_end);
         } else {
-          await subscription.update({ status: 'past_due' });
-          logger.info('subscription past_due on invoice paid', {
+          await subscription.update({
+            status: 'past_due',
+            cancel_at_period_end: true,
+            cancelation_details: {
+              comment: 'subscription_update',
+              feedback: 'other',
+              reason: 'payment_failed',
+            },
+          });
+          logger.info('subscription past_due on invoice auto advance failed', {
             subscription: subscription.id,
             invoice: invoice.id,
           });

package/api/src/store/models/payment-currency.ts

@@ -125,7 +125,13 @@ export class PaymentCurrency extends Model<InferAttributes<PaymentCurrency>, Inf
     });
   }
 
-  public static associate() {}
+  public static associate(models: any) {
+    this.hasOne(models.PaymentMethod, {
+      sourceKey: 'payment_method_id',
+      foreignKey: 'id',
+      as: 'payment_method',
+    });
+  }
 
   public static findByPkOrSymbol(id: string, options: FindOptions<PaymentCurrency> = {}) {
     return this.findOne({

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.235
+version: 1.13.237
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.235",
+  "version": "1.13.237",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -42,18 +42,18 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "1.16.25",
+    "@abtnode/cron": "1.16.26",
     "@arcblock/did": "^1.18.115",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.9.71",
+    "@arcblock/did-connect": "^2.9.75",
     "@arcblock/did-util": "^1.18.115",
     "@arcblock/jwt": "^1.18.115",
-    "@arcblock/ux": "^2.9.71",
+    "@arcblock/ux": "^2.9.75",
     "@arcblock/validator": "^1.18.115",
-    "@blocklet/logger": "1.16.25",
-    "@blocklet/payment-react": "1.13.235",
-    "@blocklet/sdk": "1.16.25",
-    "@blocklet/ui-react": "^2.9.71",
+    "@blocklet/logger": "1.16.26",
+    "@blocklet/payment-react": "1.13.237",
+    "@blocklet/sdk": "1.16.26",
+    "@blocklet/ui-react": "^2.9.75",
     "@blocklet/uploader": "^0.0.78",
     "@mui/icons-material": "^5.15.15",
     "@mui/lab": "^5.0.0-alpha.170",
@@ -114,9 +114,9 @@
     "validator": "^13.11.0"
   },
   "devDependencies": {
-    "@abtnode/types": "1.16.25",
+    "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.235",
+    "@blocklet/payment-types": "1.13.237",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "0ce69f4fb2a09658835deab572b1f860f305b195"
+  "gitHead": "895430a130d53b62707f4f78c5295b06ce55d4db"
 }

package/src/components/invoice/table.tsx

@@ -13,8 +13,19 @@ type Props = {
   simple?: boolean;
 };
 
-InvoiceTable.defaultProps = {
-  simple: false,
+type InvoiceDetailItem = {
+  id: string;
+  product: string;
+  quantity: number;
+  rawQuantity: number;
+  price: string;
+  amount: string;
+};
+
+type InvoiceSummaryItem = {
+  key: string;
+  value: string;
+  color: string;
 };
 
 export function getAppliedBalance(invoice: TInvoiceExpanded) {
@@ -38,9 +49,63 @@ export function getAppliedBalance(invoice: TInvoiceExpanded) {
   return '0';
 }
 
+export function getInvoiceRows(invoice: TInvoiceExpanded) {
+  const detail: InvoiceDetailItem[] = invoice.lines.map((line) => ({
+    id: line.id,
+    product: `${line.description} ${
+      line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''
+    }`.trim(),
+    quantity: line.quantity,
+    rawQuantity: line.metadata?.quantity || 0,
+    price: !line.proration
+      ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount, invoice.paymentCurrency.decimal) // prettier-ignore
+      : '',
+    amount: formatAmount(line.amount, invoice.paymentCurrency.decimal),
+  }));
+
+  const summary: InvoiceSummaryItem[] = [
+    {
+      key: 'common.subtotal',
+      value: formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal),
+      color: 'text.primary',
+    },
+    {
+      key: 'common.total',
+      value: formatAmount(invoice.total, invoice.paymentCurrency.decimal),
+      color: 'text.primary',
+    },
+  ];
+  if (invoice.amount_paid !== '0') {
+    summary.push({
+      key: 'payment.customer.invoice.amountPaid',
+      value: formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal),
+      color: 'text.secondary',
+    });
+  }
+
+  const appliedBalance = getAppliedBalance(invoice);
+  if (appliedBalance !== '0') {
+    summary.push({
+      key: 'payment.customer.invoice.amountApplied',
+      value: formatAmount(appliedBalance, invoice.paymentCurrency.decimal),
+      color: 'text.secondary',
+    });
+  }
+  summary.push({
+    key: 'payment.customer.invoice.amountDue',
+    value: formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal),
+    color: 'text.primary',
+  });
+
+  return {
+    detail,
+    summary,
+  };
+}
+
 export default function InvoiceTable({ invoice, simple }: Props) {
   const { t } = useLocaleContext();
-  const appliedBalance = getAppliedBalance(invoice);
+  const { detail, summary } = getInvoiceRows(invoice);
 
   return (
     <StyledTable>
@@ -73,30 +138,23 @@ export default function InvoiceTable({ invoice, simple }: Props) {
         )}
       </TableHead>
       <TableBody>
-        {invoice.lines.map((line) => (
+        {detail.map((line) => (
           <TableRow key={line.id} sx={{ borderBottom: '1px solid #eee' }}>
-            <TableCell sx={{ fontWeight: 600 }}>
-              {line.description}
-              {line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''}
-            </TableCell>
+            <TableCell sx={{ fontWeight: 600 }}>{line.product}</TableCell>
             <TableCell align="right">
               <Stack direction="row" spacing={0.5} alignItems="center" justifyContent="flex-end">
                 <Typography>{line.quantity}</Typography>
-                {line.metadata && !!line.metadata.quantity && (
+                {!!line.rawQuantity && (
                   <Tooltip
-                    title={t('payment.customer.invoice.rawQuantity', { quantity: line.metadata.quantity })}
+                    title={t('payment.customer.invoice.rawQuantity', { quantity: line.rawQuantity })}
                     placement="top">
                     <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
                   </Tooltip>
                 )}
               </Stack>
             </TableCell>
-            <TableCell align="right">
-              {!line.proration
-                ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount, invoice.paymentCurrency.decimal) // prettier-ignore
-                : ''}
-            </TableCell>
-            <TableCell align="right">{formatAmount(line.amount, invoice.paymentCurrency.decimal)}</TableCell>
+            <TableCell align="right">{line.price}</TableCell>
+            <TableCell align="right">{line.amount}</TableCell>
             {!simple && (
               <TableCell align="right">
                 <LineItemActions data={line as any} />
@@ -104,55 +162,17 @@ export default function InvoiceTable({ invoice, simple }: Props) {
             )}
           </TableRow>
         ))}
-        <TableRow>
-          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            {t('common.subtotal')}
-          </TableCell>
-          <TableCell align="right" sx={{ fontWeight: 600 }}>
-            {formatAmount(invoice.subtotal, invoice.paymentCurrency.decimal)}
-          </TableCell>
-          <TableCell>&nbsp;</TableCell>
-        </TableRow>
-        <TableRow sx={{ borderBottom: '1px solid #eee' }}>
-          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            {t('common.total')}
-          </TableCell>
-          <TableCell align="right" sx={{ fontWeight: 600 }}>
-            {formatAmount(invoice.total, invoice.paymentCurrency.decimal)}
-          </TableCell>
-          <TableCell>&nbsp;</TableCell>
-        </TableRow>
-        {invoice.amount_paid !== '0' && (
-          <TableRow>
-            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
-              {t('payment.customer.invoice.amountPaid')}
-            </TableCell>
-            <TableCell align="right" sx={{ fontWeight: 600 }}>
-              {formatAmount(invoice.amount_paid, invoice.paymentCurrency.decimal)}
-            </TableCell>
-            <TableCell>&nbsp;</TableCell>
-          </TableRow>
-        )}
-        {appliedBalance !== '0' && (
-          <TableRow>
-            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: 'text.secondary' }}>
-              {t('payment.customer.invoice.amountApplied')}
+        {summary.map((line) => (
+          <TableRow key={line.key}>
+            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: line.color }}>
+              {t(line.key)}
             </TableCell>
             <TableCell align="right" sx={{ fontWeight: 600 }}>
-              {formatAmount(appliedBalance, invoice.paymentCurrency.decimal)}
+              {line.value}
             </TableCell>
             <TableCell>&nbsp;</TableCell>
           </TableRow>
-        )}
-        <TableRow>
-          <TableCell colSpan={3} align="right" sx={{ fontWeight: 600 }}>
-            {t('payment.customer.invoice.amountDue')}
-          </TableCell>
-          <TableCell align="right" sx={{ fontWeight: 600 }}>
-            {formatAmount(invoice.amount_remaining, invoice.paymentCurrency.decimal)}
-          </TableCell>
-          <TableCell>&nbsp;</TableCell>
-        </TableRow>
+        ))}
       </TableBody>
     </StyledTable>
   );
@@ -163,3 +183,7 @@ const StyledTable = styled(Table)`
     padding: 8px 0;
   }
 `;
+
+InvoiceTable.defaultProps = {
+  simple: false,
+};

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

@@ -1,6 +1,6 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { formatAmount, formatTime, getPrefix, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
-import type { TInvoiceExpanded, TInvoiceItemExpanded } from '@blocklet/payment-types';
+import { formatTime, getPrefix } from '@blocklet/payment-react';
+import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { Button } from '@mui/material';
 import {
   Font,
@@ -11,9 +11,9 @@ import {
   Text as PdfText,
   View as PdfView,
 } from '@react-pdf/renderer';
-import { useEffect, useState } from 'react';
 import { joinURL } from 'ufo';
 
+import { getInvoiceRows } from '../invoice/table';
 import compose from './compose';
 
 Font.register({
@@ -65,40 +65,8 @@ export function Download({ data }: { data: TInvoiceExpanded }) {
   );
 }
 
-function InvoicePage({ data, t }: any) {
-  const [subTotal, setSubTotal] = useState(0);
-
-  const calculateAmount = (quantity: string, rate: string) => {
-    const quantityNumber = parseFloat(quantity);
-    const rateNumber = parseFloat(rate);
-    const amount = quantityNumber && rateNumber ? quantityNumber * rateNumber : 0;
-    return amount.toFixed(2);
-  };
-
-  useEffect(() => {
-    let temp = 0;
-
-    data.lines
-      .map((line: TInvoiceItemExpanded) => {
-        return {
-          description:
-            line.description + (line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''),
-          quantity: line.quantity,
-          rate: !line.proration
-            ? formatAmount(getPriceUintAmountByCurrency(line.price, data.paymentCurrency) || line.amount, data.paymentCurrency.decimal) // prettier-ignore
-            : '',
-        };
-      })
-      .forEach((line: any) => {
-        const quantityNumber = parseFloat(line.quantity);
-        const rateNumber = parseFloat(line.rate);
-        const amount = quantityNumber && rateNumber ? quantityNumber * rateNumber : 0;
-
-        temp += amount;
-      });
-
-    setSubTotal(temp);
-  }, [data.lines]);
+function InvoicePage({ data, t }: { data: TInvoiceExpanded; t: any }) {
+  const { detail, summary } = getInvoiceRows(data);
 
   return (
     <Document>
@@ -167,63 +135,42 @@ function InvoicePage({ data, t }: any) {
           </View>
         </View>
 
-        {data.lines
-          .map((line: any) => {
-            return {
-              description:
-                line.description + (line.price.product.unit_label ? ` (per ${line.price.product.unit_label})` : ''),
-              quantity: line.quantity,
-              rate: !line.proration
-                ? formatAmount(getPriceUintAmountByCurrency(line.price, data.paymentCurrency) || line.amount, data.paymentCurrency.decimal) // prettier-ignore
-                : '',
-            };
-          })
-          .map((line: any) => {
-            return (
-              <View key={line.description} className="row flex">
-                <View className="w-48 p-4-8 pb-10">
-                  <Text2 className="dark" value={line.description} />
-                </View>
-                <View className="w-17 p-4-8 pb-10">
-                  <Text2 className="dark right" value={line.quantity} />
-                </View>
-                <View className="w-17 p-4-8 pb-10">
-                  <Text className="dark right">
-                    {line.rate} {data.paymentCurrency.symbol}
-                  </Text>
-                </View>
-                <View className="w-18 p-4-8 pb-10">
-                  <Text className="dark right">
-                    {calculateAmount(line.quantity, line.rate)} {data.paymentCurrency.symbol}
-                  </Text>
-                </View>
-              </View>
-            );
-          })}
-
-        <View className="flex">
-          <View className="w-50 mt-10" />
-          <View className="w-50 mt-20">
-            <View className="flex">
-              <View className="w-50 p-5">
-                <Text2 value={t('common.subtotal')} className="bold" />
+        {detail.map((line) => {
+          return (
+            <View key={line.id} className="row flex">
+              <View className="w-48 p-4-8 pb-10">
+                <Text2 className="dark" value={line.product} />
               </View>
-              <View className="w-50 p-5">
-                <Text className="right bold dark">
-                  {subTotal?.toFixed(2)} {data.paymentCurrency.symbol}
-                </Text>
+              <View className="w-17 p-4-8 pb-10">
+                <Text2 className="dark right" value={line.quantity} />
               </View>
-            </View>
-            <View className="flex">
-              <View className="w-50 p-5">
-                <Text2 className="bold" value={t('common.total')} />
+              <View className="w-17 p-4-8 pb-10">
+                <Text className="dark right">{line.price ? `${line.price} ${data.paymentCurrency.symbol}` : ''}</Text>
               </View>
-              <View className="w-50 p-5">
-                <Text className="right bold dark">
-                  {(typeof subTotal !== 'undefined' ? subTotal : 0).toFixed(2)} {data.paymentCurrency.symbol}
+              <View className="w-18 p-4-8 pb-10">
+                <Text className="dark right">
+                  {line.amount} {data.paymentCurrency.symbol}
                 </Text>
               </View>
             </View>
+          );
+        })}
+
+        <View className="flex">
+          <View className="w-50 mt-10" />
+          <View className="w-50 mt-20">
+            {summary.map((line) => (
+              <View className="flex" key={line.key}>
+                <View className="w-50 p-5">
+                  <Text2 value={t(line.key)} className="bold" />
+                </View>
+                <View className="w-50 p-5">
+                  <Text className="right bold dark">
+                    {line.value} {data.paymentCurrency.symbol}
+                  </Text>
+                </View>
+              </View>
+            ))}
           </View>
         </View>
       </Page>

package/src/libs/util.ts

@@ -197,9 +197,7 @@ export function canChangePaymentMethod(subscription: TSubscriptionExpanded) {
 }
 
 // Steal from https://d3js.org/d3-scale-chromatic/categorical
-export function getCategoricalColors(
-  specifier: string = '4e79a7f28e2ce1575976b7b259a14fedc949af7aa1ff9da79c755fbab0ab'
-) {
+export function getCategoricalColors(specifier: string = '4e79a7f28e2ce1575976b7b259a14fedc949af7aa1ff9da79c755f') {
   const n = (specifier.length / 6) | 0;
   const colors = new Array(n);
   let i = 0;

package/src/pages/admin/overview.tsx

@@ -18,6 +18,7 @@ import { stringToColor } from '../../libs/util';
 type TSummary = {
   balances: GroupedBN;
   addresses: GroupedBN;
+  links: GroupedBN;
   summary: { [key: string]: { status: string; count: number }[] };
 };
 
@@ -66,9 +67,11 @@ export const groupData = (data: TPaymentStat[], currencies: { [key: string]: any
       grouped[x.timestamp] = { timestamp: formatToDate(x.timestamp * 1000, locale, 'YYYY-MM-DD') };
     }
 
-    const { symbol } = currencies[x.currency_id];
-    // @ts-ignore
-    grouped[x.timestamp][symbol] = +x[key];
+    if (currencies[x.currency_id]) {
+      const { symbol } = currencies[x.currency_id];
+      // @ts-ignore
+      grouped[x.timestamp][symbol] = +x[key];
+    }
   });
 
   return Object.values(grouped);
@@ -77,7 +80,7 @@ export const groupData = (data: TPaymentStat[], currencies: { [key: string]: any
 export default function Overview() {
   const { t, locale } = useLocaleContext();
   const { settings } = usePaymentContext();
-  const maxDate = dayjs().add(1, 'day').toDate();
+  const maxDate = dayjs().toDate();
   const [state, setState] = useSetState({
     anchorEl: null,
     startDate: dayjs().subtract(30, 'day').toDate(),
@@ -256,7 +259,13 @@ export default function Overview() {
               </Stack>
               <Stack direction="column" spacing={1} sx={{ mt: 2 }}>
                 {Object.keys(summary.data.balances).map((currencyId) => (
-                  <Card key={currencyId} variant="outlined" sx={{ padding: 1 }}>
+                  <Card
+                    key={currencyId}
+                    component="a"
+                    href={summary.data?.links[currencyId] as string}
+                    target="_blank"
+                    variant="outlined"
+                    sx={{ padding: 1 }}>
                     <Stack direction="row" alignItems="center">
                       <Avatar
                         src={currencies[currencyId]?.logo}

package/src/pages/customer/index.tsx

@@ -1,7 +1,7 @@
 import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, formatError, getPrefix } from '@blocklet/payment-react';
+import { CustomerInvoiceList, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
@@ -32,6 +32,7 @@ const fetchData = (): Promise<Result> => {
 export default function CustomerHome() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
+  const { livemode, setLivemode } = usePaymentContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const navigate = useNavigate();
   const { isPending, startTransition } = useTransitionContext();
@@ -51,6 +52,12 @@ export default function CustomerHome() {
     });
   }, []);
 
+  useEffect(() => {
+    if (data && data.livemode !== livemode) {
+      setLivemode(data.livemode);
+    }
+  }, [data]);
+
   if (!data) {
     return <CircularProgress />;
   }

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

@@ -89,7 +89,7 @@ export default function CustomerInvoicePastDue() {
         </Stack>
       </Stack>
       <Root direction="column" spacing={3}>
-        <Alert severity="info">{t('payment.customer.pastDue.warning')}</Alert>
+        <Alert severity="error">{t('payment.customer.pastDue.warning')}</Alert>
         <Box className="section">
           <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
             {subscriptionId && currencyId && (