payment-kit 1.13.151 → 1.13.152

package/api/src/routes/checkout-sessions.ts

@@ -504,6 +504,14 @@ router.put('/:id/submit', user, ensureCheckoutSessionOpen, async (req, res) => {
 
       await customer.update(updates);
     }
+    const canMakeNewPurchase = await customer.canMakeNewPurchase(checkoutSession.invoice_id);
+    if (!canMakeNewPurchase) {
+      return res.status(403).json({
+        code: 'CUSTOMER_LIMITED',
+        error: 'Customer can not make new purchase, maybe you have unpaid invoices from previous purchases',
+      });
+    }
+
     await checkoutSession.update({ customer_id: customer.id, customer_did: req.user.did });
 
     // payment intent is only created when checkout session is in payment mode

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

@@ -532,6 +532,7 @@ export async function ensureInvoiceForCollect(invoiceId: string) {
     throw new Error(`Payment intent already canceled for invoice ${invoiceId}`);
   }
   if (paymentIntent.status === 'succeeded') {
+    await invoice.update({ status: 'paid' });
     throw new Error(`Payment intent already succeeded for invoice ${invoiceId}`);
   }
 

package/api/src/routes/customers.ts

@@ -102,7 +102,12 @@ router.get('/me', user(), async (req, res) => {
 
   try {
     const doc = await Customer.findByPkOrDid(req.user.did as string);
-    res.json(doc);
+    if (!doc) {
+      res.status(404).json({ error: 'Customer not found' });
+    } else {
+      const summary = await doc.getSummary();
+      res.json({ ...doc.toJSON(), summary });
+    }
   } catch (err) {
     console.error(err);
     res.json(null);
@@ -119,6 +124,22 @@ router.get('/:id', auth, async (req, res) => {
   }
 });
 
+router.get('/:id/summary', auth, async (req, res) => {
+  try {
+    const doc = await Customer.findByPkOrDid(req.params.id as string);
+    if (!doc) {
+      res.status(404).json({ error: 'Customer not found' });
+      return;
+    }
+
+    const result = await doc.getSummary();
+    res.json(result);
+  } catch (err) {
+    console.error(err);
+    res.json(null);
+  }
+});
+
 // eslint-disable-next-line consistent-return
 router.put('/:id', authPortal, async (req, res) => {
   try {

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

@@ -154,6 +154,27 @@ export class Customer extends Model<InferAttributes<Customer>, InferCreationAttr
     return `${this.invoice_prefix}-${padStart(sequence.toString(), 4, '0')}`;
   }
 
+  public async getSummary() {
+    const { PaymentIntent, Refund, Invoice } = this.sequelize.models;
+    const [paid, due, refunded] = await Promise.all([
+      // @ts-ignore
+      PaymentIntent!.getPaidAmountByCustomer(this.id),
+      // @ts-ignore
+      Invoice!.getUncollectibleAmountByCustomer(this.id),
+      // @ts-ignore
+      Refund!.getRefundAmountByCustomer(this.id),
+    ]);
+
+    return { paid, due, refunded };
+  }
+
+  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)));
+  }
+
   public getBalanceToApply(currencyId: string, amount: string) {
     const tokens = this.token_balance || {};
     const balance = tokens[currencyId] || '0';

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

@@ -1,6 +1,15 @@
 /* eslint-disable @typescript-eslint/indent */
 /* eslint-disable @typescript-eslint/lines-between-class-members */
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import { BN } from '@ocap/util';
+import {
+  CreationOptional,
+  DataTypes,
+  InferAttributes,
+  InferCreationAttributes,
+  Model,
+  Op,
+  WhereOptions,
+} from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
@@ -9,6 +18,7 @@ import type {
   CustomerAddress,
   CustomerShipping,
   DiscountAmount,
+  GroupedBN,
   PaymentError,
   PaymentSettings,
   SimpleCustomField,
@@ -511,6 +521,32 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
   public isImmutable() {
     return ['paid', 'void'].includes(this.status);
   }
+
+  public static async getUncollectibleAmountByCustomer(
+    customerId: string,
+    excludedInvoiceId?: string
+  ): Promise<GroupedBN> {
+    const where: WhereOptions<Invoice> = {
+      status: 'uncollectible',
+      customer_id: customerId,
+      amount_remaining: { [Op.gt]: '0' },
+    };
+    if (excludedInvoiceId) {
+      where.id = { [Op.not]: excludedInvoiceId };
+    }
+    const invoices = await Invoice.findAll({ where });
+
+    return invoices.reduce((acc: GroupedBN, invoice) => {
+      const key = invoice.currency_id;
+      if (!acc[key]) {
+        acc[key] = '0';
+      }
+
+      acc[key] = new BN(acc[key]).add(new BN(invoice.amount_remaining)).toString();
+
+      return acc;
+    }, {});
+  }
 }
 
 export type TInvoice = InferAttributes<Invoice>;

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

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 /* eslint-disable @typescript-eslint/indent */
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import { BN } from '@ocap/util';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
 import { createIdGenerator } from '../../libs/util';
-import type { PaymentDetails, PaymentError } from './types';
+import type { GroupedBN, PaymentDetails, PaymentError } from './types';
 
 export const nextPaymentIntentId = createIdGenerator('pi', 24);
 
@@ -280,6 +281,27 @@ export class PaymentIntent extends Model<InferAttributes<PaymentIntent>, InferCr
   public isImmutable() {
     return ['canceled', 'succeeded'].includes(this.status);
   }
+
+  public static async getPaidAmountByCustomer(customerId: string): Promise<GroupedBN> {
+    const payments = await PaymentIntent.findAll({
+      where: {
+        status: 'succeeded',
+        customer_id: customerId,
+        amount_received: { [Op.gt]: '0' },
+      },
+    });
+
+    return payments.reduce((acc: GroupedBN, payment) => {
+      const key = payment.currency_id;
+      if (!acc[key]) {
+        acc[key] = '0';
+      }
+
+      acc[key] = new BN(acc[key]).add(new BN(payment.amount_received)).toString();
+
+      return acc;
+    }, {});
+  }
 }
 
 export type TPaymentIntent = InferAttributes<PaymentIntent>;

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

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/lines-between-class-members */
 /* eslint-disable @typescript-eslint/indent */
-import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model } from 'sequelize';
+import { BN } from '@ocap/util';
+import { CreationOptional, DataTypes, InferAttributes, InferCreationAttributes, Model, Op } from 'sequelize';
 import type { LiteralUnion } from 'type-fest';
 
 import { createEvent, createStatusEvent } from '../../libs/audit';
 import { createIdGenerator } from '../../libs/util';
-import type { PaymentDetails, PaymentError } from './types';
+import type { GroupedBN, PaymentDetails, PaymentError } from './types';
 
 export const nextRefundId = createIdGenerator('re', 24);
 
@@ -236,6 +237,27 @@ export class Refund extends Model<InferAttributes<Refund>, InferCreationAttribut
   public isImmutable() {
     return ['canceled', 'succeeded'].includes(this.status);
   }
+
+  public static async getRefundAmountByCustomer(customerId: string, status: string = 'succeeded'): Promise<GroupedBN> {
+    const refunds = await Refund.findAll({
+      where: {
+        status,
+        customer_id: customerId,
+        amount: { [Op.gt]: '0' },
+      },
+    });
+
+    return refunds.reduce((acc: GroupedBN, refund) => {
+      const key = refund.currency_id;
+      if (!acc[key]) {
+        acc[key] = '0';
+      }
+
+      acc[key] = new BN(acc[key]).add(new BN(refund.amount)).toString();
+
+      return acc;
+    }, {});
+  }
 }
 
 export type TRefund = InferAttributes<Refund>;

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

@@ -1,6 +1,8 @@
 /* eslint-disable @typescript-eslint/indent */
 import type { LiteralUnion } from 'type-fest';
 
+export type GroupedBN = { [currencyId: string]: string };
+
 export type Pagination<T = any> = T & {
   // offset based
   page?: number;

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.151",
+  "version": "1.13.152",
   "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.29",
     "@blocklet/logger": "1.16.23",
-    "@blocklet/payment-react": "1.13.151",
+    "@blocklet/payment-react": "1.13.152",
     "@blocklet/sdk": "1.16.23",
     "@blocklet/ui-react": "^2.9.29",
     "@blocklet/uploader": "^0.0.73",
@@ -110,7 +110,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.23",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@blocklet/payment-types": "1.13.151",
+    "@blocklet/payment-types": "1.13.152",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -149,5 +149,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "1697697b65f9372e868fb10d5766edb3144f44f8"
+  "gitHead": "5d6d2b6a8c0422e1055ddcec4e3179fd734cdbc5"
 }

package/src/app.tsx

@@ -21,6 +21,7 @@ const CheckoutPage = React.lazy(() => import('./pages/checkout'));
 const AdminPage = React.lazy(() => import('./pages/admin'));
 const CustomerHome = React.lazy(() => import('./pages/customer/index'));
 const CustomerInvoice = React.lazy(() => import('./pages/customer/invoice'));
+const CustomerInvoicePastDue = React.lazy(() => import('./pages/customer/invoice/past-due'));
 const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/subscription/detail'));
 const CustomerSubscriptionUpdate = React.lazy(() => import('./pages/customer/subscription/update'));
 
@@ -79,6 +80,15 @@ function App() {
                 }
               />
               <Route key="subscription-embed" path="/customer/embed/subscription" element={<MiniInvoiceList />} />,
+              <Route
+                key="customer-due"
+                path="/customer/invoice/past-due"
+                element={
+                  <Layout>
+                    <CustomerInvoicePastDue />
+                  </Layout>
+                }
+              />
               <Route
                 key="customer-invoice"
                 path="/customer/invoice/:id"

package/src/components/balance-list.tsx

@@ -0,0 +1,43 @@
+import { formatAmount, usePaymentContext } from '@blocklet/payment-react';
+import type { GroupedBN } from '@blocklet/payment-types';
+import { Stack, Typography } from '@mui/material';
+import flatten from 'lodash/flatten';
+import isEmpty from 'lodash/isEmpty';
+
+type Props = {
+  data?: GroupedBN;
+};
+
+export default function BalanceList(props: Props) {
+  const { settings } = usePaymentContext();
+  const currencies = flatten(settings.paymentMethods.map((method) => method.payment_currencies));
+
+  if (isEmpty(props.data)) {
+    return <Typography>None</Typography>;
+  }
+
+  return (
+    <Stack direction="column" alignItems="flex-start" sx={{ width: '100%' }}>
+      {Object.entries(props.data).map(([currencyId, amount]) => {
+        const currency = currencies.find((c) => c.id === currencyId);
+        if (!currency) {
+          return null;
+        }
+        return (
+          <Stack key={currencyId} sx={{ width: '100%' }} direction="row" spacing={1}>
+            <Typography sx={{ flex: 1 }} color="text.primary">
+              {formatAmount(amount, currency.decimal)}
+            </Typography>
+            <Typography sx={{ width: '32px' }} color="text.secondary">
+              {currency.symbol}
+            </Typography>
+          </Stack>
+        );
+      })}
+    </Stack>
+  );
+}
+
+BalanceList.defaultProps = {
+  data: {},
+};

package/src/components/info-metric.tsx

@@ -12,7 +12,7 @@ export default function InfoMetric(props: Props) {
   return (
     <>
       <Stack direction="column" alignItems="flex-start">
-        <Typography variant="body1" mb={1} color="text.secondary">
+        <Typography component="div" variant="body1" mb={1} color="text.secondary">
           {props.label}
           {!!props.tip && (
             <Tooltip title={props.tip}>
@@ -20,7 +20,7 @@ export default function InfoMetric(props: Props) {
             </Tooltip>
           )}
         </Typography>
-        <Typography variant="body1" color="text.primary">
+        <Typography component="div" variant="body1" color="text.primary" sx={{ width: '100%' }}>
           {props.value}
         </Typography>
       </Stack>

package/src/global.css

@@ -10,7 +10,6 @@ a {
   color: rgba(0, 0, 0, 0.87);
 }
 a:hover {
-  color: rgba(0, 0, 0, 0.87);
   text-decoration: underline;
 }
 

package/src/locales/en.tsx

@@ -392,6 +392,7 @@ export default flat({
       spent: 'Spent Amount',
       refund: 'Refund Amount',
       dispute: 'Dispute Amount',
+      due: 'Due Amount',
       name: 'Name',
       email: 'Email',
       phone: 'Phone',

package/src/locales/zh.tsx

@@ -383,6 +383,7 @@ export default flat({
       spent: '花费金额',
       refund: '退款金额',
       dispute: '争议金额',
+      due: '欠款金额',
       name: '名称',
       email: '电子邮件',
       phone: '电话',

package/src/pages/admin/customers/customers/detail.tsx

@@ -3,7 +3,7 @@ import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
-import type { TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -13,6 +13,7 @@ import { isEmpty } from 'lodash';
 import { FlagEmoji } from 'react-international-phone';
 import { Link, useNavigate } from 'react-router-dom';
 
+import BalanceList from '../../../../components/balance-list';
 import Copyable from '../../../../components/copyable';
 import CustomerActions from '../../../../components/customer/actions';
 import EditCustomer from '../../../../components/customer/edit';
@@ -25,8 +26,18 @@ import PaymentList from '../../../../components/payment-intent/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
 
-const fetchData = (id: string): Promise<TCustomerExpanded> => {
-  return api.get(`/api/customers/${id}`).then((res) => res.data);
+const fetchData = async (
+  id: string
+): Promise<{ customer: TCustomerExpanded; summary: { [key: string]: GroupedBN } }> => {
+  const results = await Promise.all([
+    api.get(`/api/customers/${id}`).then((res) => res.data),
+    api.get(`/api/customers/${id}/summary`).then((res) => res.data),
+  ]);
+
+  return {
+    customer: results[0],
+    summary: results[1],
+  };
 };
 
 function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentMethodExpanded[]) {
@@ -123,7 +134,7 @@ export default function CustomerDetail(props: { id: string }) {
     }
   };
 
-  const tokenBalances = getTokenBalances(data, settings.paymentMethods);
+  const tokenBalances = getTokenBalances(data.customer, settings.paymentMethods);
 
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
@@ -142,9 +153,9 @@ export default function CustomerDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Typography variant="h5" sx={{ fontWeight: 600 }}>
-              {data.name}
+              {data.customer.name}
             </Typography>
-            <CustomerActions data={data} onChange={onChange} variant="normal" />
+            <CustomerActions data={data.customer} onChange={onChange} variant="normal" />
           </Stack>
           <Stack
             className="section-body"
@@ -153,9 +164,15 @@ export default function CustomerDetail(props: { id: string }) {
             justifyContent="flex-start"
             flexWrap="wrap"
             sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
-            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
-            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
-            <InfoMetric label={t('admin.customer.spent')} value={0} divider />
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.customer.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} divider />
+            <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} divider />
+            <InfoMetric
+              label={t('admin.customer.refund')}
+              value={<BalanceList data={data.summary.refunded} />}
+              divider
+            />
+            <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} divider />
             {tokenBalances.map((x) => (
               <InfoMetric
                 key={x.currency}
@@ -181,13 +198,13 @@ export default function CustomerDetail(props: { id: string }) {
           </Button>
         </SectionHeader>
         <Stack>
-          <InfoRow label={t('common.did')} value={<DidAddress did={data.did} />} />
-          <InfoRow label={t('admin.customer.name')} value={data.name} />
-          <InfoRow label={t('admin.customer.phone')} value={data.phone} />
-          <InfoRow label={t('admin.customer.email')} value={data.email} />
-          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.invoice_prefix} />
-          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          <InfoRow label={t('common.did')} value={<DidAddress did={data.customer.did} />} />
+          <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
+          <InfoRow label={t('admin.customer.phone')} value={data.customer.phone} />
+          <InfoRow label={t('admin.customer.email')} value={data.customer.email} />
+          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.customer.invoice_prefix} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.customer.created_at)} />
+          <InfoRow label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} />
           <InfoRow
             alignItems="flex-start"
             label={t('admin.customer.address.label')}
@@ -196,24 +213,24 @@ export default function CustomerDetail(props: { id: string }) {
                 <InfoRow
                   label={t('admin.customer.address.country')}
                   value={
-                    data.address?.country ? (
-                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                    data.customer.address?.country ? (
+                      <FlagEmoji iso2={data.customer.address?.country} style={{ display: 'flex', width: 24 }} />
                     ) : (
                       ''
                     )
                   }
                 />
-                <InfoRow label={t('admin.customer.address.state')} value={data.address?.state} />
-                <InfoRow label={t('admin.customer.address.city')} value={data.address?.city} />
-                <InfoRow label={t('admin.customer.address.line1')} value={data.address?.line1} />
-                <InfoRow label={t('admin.customer.address.line2')} value={data.address?.line2} />
-                <InfoRow label={t('admin.customer.address.postal_code')} value={data.address?.postal_code} />
+                <InfoRow label={t('admin.customer.address.state')} value={data.customer.address?.state} />
+                <InfoRow label={t('admin.customer.address.city')} value={data.customer.address?.city} />
+                <InfoRow label={t('admin.customer.address.line1')} value={data.customer.address?.line1} />
+                <InfoRow label={t('admin.customer.address.line2')} value={data.customer.address?.line2} />
+                <InfoRow label={t('admin.customer.address.postal_code')} value={data.customer.address?.postal_code} />
               </Stack>
             }
           />
           {state.editing.customer && (
             <EditCustomer
-              data={data}
+              data={data.customer}
               loading={state.loading.customer}
               onSave={onUpdateInfo}
               onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
@@ -224,19 +241,19 @@ export default function CustomerDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.subscriptions')} mb={0} />
         <Box className="section-body">
-          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
         <SectionHeader title={t('admin.payments')} mb={0} />
         <Box className="section-body">
-          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
         <SectionHeader title={t('admin.invoices')} mb={0} />
         <Box className="section-body">
-          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
@@ -253,16 +270,16 @@ export default function CustomerDetail(props: { id: string }) {
         </SectionHeader>
         <Box className="section-body">
           {!state.editing.metadata &&
-            (isEmpty(data.metadata) ? (
+            (isEmpty(data.customer.metadata) ? (
               <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
             ) : (
-              Object.keys(data.metadata || {}).map((key) => (
-                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              Object.keys(data.customer.metadata || {}).map((key) => (
+                <InfoRow key={key} label={key} value={data.customer.metadata[key]} />
               ))
             ))}
           {state.editing.metadata && (
             <MetadataEditor
-              data={data}
+              data={data.customer}
               loading={state.loading.metadata}
               onSave={onUpdateMetadata}
               onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
@@ -273,7 +290,7 @@ export default function CustomerDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.id} />
+          <EventList features={{ toolbar: false }} object_id={data.customer.id} />
         </Box>
       </Box>
     </Root>

package/src/pages/customer/index.tsx

@@ -1,36 +1,50 @@
+import DID from '@arcblock/ux/lib/Address';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, CustomerPaymentList, formatError } from '@blocklet/payment-react';
-import type { TCustomerExpanded } from '@blocklet/payment-types';
+import {
+  CustomerInvoiceList,
+  CustomerPaymentList,
+  PaymentProvider,
+  formatError,
+  getPrefix,
+} 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 } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
+import { isEmpty } from 'lodash';
+import { useEffect } from 'react';
 import { FlagEmoji } from 'react-international-phone';
 import { useNavigate } from 'react-router-dom';
+import { joinURL } from 'ufo';
 
+import BalanceList from '../../components/balance-list';
 import EditCustomer from '../../components/customer/edit';
+import InfoMetric from '../../components/info-metric';
 import InfoRow from '../../components/info-row';
 import SectionHeader from '../../components/section/header';
 import CurrentSubscriptions from '../../components/subscription/portal/list';
 import { useSessionContext } from '../../contexts/session';
 import api from '../../libs/api';
 
-const fetchData = (): Promise<TCustomerExpanded> => {
+const fetchData = (): Promise<TCustomerExpanded & { summary: { [key: string]: GroupedBN } }> => {
   return api.get('/api/customers/me').then((res) => res.data);
 };
 
 export default function CustomerHome() {
   const { t } = useLocaleContext();
-  const { events } = useSessionContext();
+  const { events, session, connectApi } = useSessionContext();
   const [state, setState] = useSetState({ editing: false, loading: false });
   const navigate = useNavigate();
 
   const { loading, error, data, runAsync } = useRequest(fetchData);
 
-  events.once('switch-did', () => {
-    runAsync().catch(console.error);
-  });
+  useEffect(() => {
+    events.once('switch-did', () => {
+      runAsync().catch(console.error);
+    });
+  }, []);
 
   if (error) {
     return <Alert severity="error">{formatError(error)}</Alert>;
@@ -82,7 +96,23 @@ export default function CustomerHome() {
             </Box>
           </Box>
           <Box className="section">
-            <SectionHeader title={t('payment.customer.invoices')} mb={0} />
+            <SectionHeader title={t('payment.customer.invoices')} mb={0}>
+              {isEmpty(data.summary.due) === false && (
+                <Tooltip title={t('payment.customer.pastDue.warning')}>
+                  <Button
+                    variant="contained"
+                    color="error"
+                    component="a"
+                    size="small"
+                    href={joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due')}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ textDecoration: 'none' }}>
+                    {t('payment.customer.pastDue.invoices')}
+                  </Button>
+                </Tooltip>
+              )}
+            </SectionHeader>
             <Box className="section-body">
               <CustomerInvoiceList customer_id={data.id} />
             </Box>
@@ -110,6 +140,7 @@ export default function CustomerHome() {
               </Button>
             </SectionHeader>
             <Stack>
+              <InfoRow sizes={[1, 2]} label={t('common.did')} value={<DID copyable>{data.did}</DID>} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.name')} value={data.name} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.phone')} value={data.phone} />
               <InfoRow sizes={[1, 2]} label={t('admin.customer.email')} value={data.email} />
@@ -143,6 +174,21 @@ export default function CustomerHome() {
               />
             )}
           </Box>
+          <Box className="section">
+            <SectionHeader title={t('payment.customer.summary')} />
+            <PaymentProvider session={session} connect={connectApi}>
+              <Stack
+                className="section-body"
+                direction="column"
+                spacing={2}
+                justifyContent="flex-start"
+                sx={{ width: '100%' }}>
+                <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} />
+                <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} />
+                <InfoMetric label={t('admin.customer.refund')} value={<BalanceList data={data.summary.refunded} />} />
+              </Stack>
+            </PaymentProvider>
+          </Box>
         </Root>
       </Grid>
     </Grid>

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

@@ -0,0 +1,77 @@
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { CustomerInvoiceList, formatError } from '@blocklet/payment-react';
+import type { TCustomerExpanded } from '@blocklet/payment-types';
+import { ArrowBackOutlined } from '@mui/icons-material';
+import { Alert, Box, CircularProgress, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
+import { useRequest } from 'ahooks';
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+import SectionHeader from '../../../components/section/header';
+import { useSessionContext } from '../../../contexts/session';
+import api from '../../../libs/api';
+
+const fetchData = (): Promise<TCustomerExpanded> => {
+  return api.get('/api/customers/me').then((res) => res.data);
+};
+
+export default function CustomerInvoicePastDue() {
+  const { t } = useLocaleContext();
+  const { events } = useSessionContext();
+
+  const { loading, error, data, runAsync } = useRequest(fetchData);
+
+  useEffect(() => {
+    events.once('switch-did', () => {
+      runAsync().catch(console.error);
+    });
+  }, []);
+
+  if (error) {
+    return <Alert severity="error">{formatError(error)}</Alert>;
+  }
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  if (!data) {
+    return (
+      <Alert sx={{ mt: 3 }} severity="info">
+        {t('payment.customer.empty')}
+      </Alert>
+    );
+  }
+
+  return (
+    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: '960px' }}>
+      <Link to="/customer">
+        <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal' }}>
+          <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+          <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+            {t('common.previous')}
+          </Typography>
+        </Stack>
+      </Link>
+      <Root direction="column" spacing={3}>
+        <Box className="section">
+          <SectionHeader title={t('payment.customer.pastDue.invoices')} mb={0}>
+            <Typography variant="body1" color="error">
+              {t('payment.customer.pastDue.warning')}
+            </Typography>
+          </SectionHeader>
+          <Box className="section-body">
+            <CustomerInvoiceList customer_id={data.id} pageSize={100} status="uncollectible" target="_blank" />
+          </Box>
+        </Box>
+      </Root>
+    </Stack>
+  );
+}
+
+const Root = styled(Stack)`
+  a {
+    text-decoration: underline;
+  }
+`;

package/src/pages/customer/invoice.tsx

@@ -1,15 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import {
-  PaymentProvider,
-  Status,
-  TxLink,
-  api,
-  formatError,
-  formatTime,
-  getInvoiceStatusColor,
-} from '@blocklet/payment-react';
+import { Status, TxLink, api, formatError, formatTime, getInvoiceStatusColor } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
@@ -29,10 +21,10 @@ const fetchData = (id: string): Promise<TInvoiceExpanded> => {
 };
 
 // TODO: download feature using: https://react-pdf.org/
-export default function CustomerHome() {
+export default function CustomerInvoiceDetail() {
   const { t } = useLocaleContext();
   const [searchParams] = useSearchParams();
-  const { session, connectApi } = useSessionContext();
+  const { connectApi } = useSessionContext();
   const params = useParams<{ id: string }>();
   const [state, setState] = useSetState({
     downloading: false,
@@ -98,8 +90,8 @@ export default function CustomerHome() {
   }
 
   return (
-    <Box sx={{ maxWidth: '1200px' }}>
-      <PaymentProvider session={session} connect={connectApi}>
+    <Stack direction="column" spacing={3} sx={{ my: 2, maxWidth: 'lg' }}>
+      <Stack direction="row" justifyContent="space-between">
         <Link to="/customer">
           <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', padding: '10px 0' }}>
             <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
@@ -108,42 +100,12 @@ export default function CustomerHome() {
             </Typography>
           </Stack>
         </Link>
-        <Box>
-          <SectionHeader title={t('payment.customer.invoice.summary')} mb={0} mt={1} />
-          <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
-            <InfoRow label={t('admin.invoice.number')} value={data.number} />
-            <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
-            <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
-            <InfoRow
-              label={t('common.status')}
-              value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
-            />
-            {data.period_start > 0 && data.period_end > 0 && (
-              <InfoRow
-                label={t('admin.subscription.currentPeriod')}
-                value={[formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')}
-              />
-            )}
-            {data.status_transitions?.paid_at && (
-              <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
-            )}
-            <InfoRow
-              label={t('admin.paymentCurrency.name')}
-              value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
-            />
-            <InfoRow
-              label={t('common.txHash')}
-              value={
-                data.paymentIntent?.payment_details ? (
-                  <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
-                ) : (
-                  ''
-                )
-              }
-            />
-          </Stack>
-        </Box>
-        <SectionHeader title={t('payment.customer.invoice.details')} mb={0} mt={1}>
+        <Stack direction="row" justifyContent="flex-end" alignItems="center">
+          {['open', 'uncollectible'].includes(data.status) && (
+            <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
+              {t('payment.customer.invoice.pay')}
+            </Button>
+          )}
           {['open', 'paid', 'uncollectible'].includes(data.status) && (
             <Button
               variant="contained"
@@ -154,22 +116,53 @@ export default function CustomerHome() {
               {t('payment.customer.invoice.download')}
             </Button>
           )}
-        </SectionHeader>
-        <InvoiceTable invoice={data} simple />
-        <Stack direction="row" justifyContent="flex-end" alignItems="center" mt={2}>
-          {['open', 'uncollectible'].includes(data.status) && (
-            <Button variant="contained" color="primary" disabled={state.paying} onClick={onPay}>
-              {t('payment.customer.invoice.pay')}
-            </Button>
+        </Stack>
+      </Stack>
+      <Box>
+        <SectionHeader title={t('payment.customer.invoice.summary')} />
+        <Stack sx={{ mt: 1, display: 'grid', gridTemplateColumns: '50% 50%' }}>
+          <InfoRow label={t('admin.invoice.number')} value={data.number} />
+          <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
+          <InfoRow label={t('admin.invoice.customer')} value={data.customer.name} />
+          <InfoRow
+            label={t('common.status')}
+            value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}
+          />
+          {data.period_start > 0 && data.period_end > 0 && (
+            <InfoRow
+              label={t('admin.subscription.currentPeriod')}
+              value={[formatTime(data.period_start * 1000), formatTime(data.period_end * 1000)].join(' ~ ')}
+            />
           )}
+          {data.status_transitions?.paid_at && (
+            <InfoRow label={t('admin.invoice.paidAt')} value={formatTime(data.status_transitions.paid_at * 1000)} />
+          )}
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          <InfoRow
+            label={t('common.txHash')}
+            value={
+              data.paymentIntent?.payment_details ? (
+                <TxLink details={data.paymentIntent.payment_details} method={data.paymentMethod} mode="customer" />
+              ) : (
+                ''
+              )
+            }
+          />
         </Stack>
-        <Box className="section">
-          <SectionHeader title={t('admin.refunds')} mb={0} mt={0} />
-          <Box className="section-body">
-            <CustomerRefundList invoice_id={data.id} />
-          </Box>
+      </Box>
+      <Box>
+        <SectionHeader title={t('payment.customer.invoice.details')} />
+        <InvoiceTable invoice={data} simple />
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} mt={0} />
+        <Box className="section-body">
+          <CustomerRefundList invoice_id={data.id} />
         </Box>
-      </PaymentProvider>
-    </Box>
+      </Box>
+    </Stack>
   );
 }