payment-kit 1.18.12 → 1.18.13

package/api/src/libs/notification/template/one-time-payment-succeeded.ts

@@ -87,9 +87,6 @@ export class OneTimePaymentSucceededEmailTemplate
     const productName = await getMainProductNameByCheckoutSession(checkoutSession);
     const at: string = formatTime(checkoutSession.created_at);
 
-    const paymentInfo: string = `${fromUnitToToken(checkoutSession?.amount_total, paymentCurrency.decimal)} ${
-      paymentCurrency.symbol
-    }`;
     const hasNft: boolean = checkoutSession?.nft_mint_status === 'minted';
     const nftMintItem: NftMintItem | undefined = hasNft
       ? // @ts-expect-error
@@ -98,6 +95,11 @@ export class OneTimePaymentSucceededEmailTemplate
 
     const paymentIntent = await PaymentIntent.findByPk(checkoutSession!.payment_intent_id);
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(paymentIntent!.payment_method_id);
+
+    const paymentInfo: string = `${fromUnitToToken(checkoutSession?.amount_total, paymentCurrency.decimal)} ${
+      paymentCurrency.symbol
+    }${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     // @ts-expect-error
     const chainHost: string | undefined = paymentMethod?.settings?.[paymentMethod.type]?.api_host;
     const viewSubscriptionLink = '';

package/api/src/libs/notification/template/subscription-canceled.ts

@@ -76,9 +76,6 @@ export class SubscriptionCanceledEmailTemplate implements BaseEmailTemplate<Subs
     const locale = await getUserLocale(userDid);
     const productName = await getMainProductName(subscription.id);
     const at: string = formatTime(subscription.canceled_at * 1000);
-
-    // @ts-ignore
-    const paymentInfo: string = `${fromUnitToToken(invoice.total, invoice?.paymentCurrency?.decimal)} ${invoice?.paymentCurrency?.symbol}`;
     const currentPeriodStart: string = formatTime(invoice.period_start * 1000);
     const currentPeriodEnd: string = formatTime(invoice.period_end * 1000);
     const duration: string = prettyMsI18n(
@@ -89,6 +86,9 @@ export class SubscriptionCanceledEmailTemplate implements BaseEmailTemplate<Subs
     );
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(invoice.default_payment_method_id);
 
+    // @ts-ignore
+    const paymentInfo: string = `${fromUnitToToken(invoice.total, invoice?.paymentCurrency?.decimal)} ${invoice?.paymentCurrency?.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     const customerCancelRequest = subscription.cancelation_details?.reason === 'cancellation_requested';
     let cancellationReason = '';
     const { stakeEnough, stakeReturn, stakeSlash, hasStake } = await getSubscriptionStakeCancellation(

package/api/src/libs/notification/template/subscription-refund-succeeded.ts

@@ -75,9 +75,6 @@ export class SubscriptionRefundSucceededEmailTemplate
     const productName = await getMainProductName(refund.subscription_id!);
     const at: string = formatTime(refund.created_at);
 
-    const paymentInfo: string = `${fromUnitToToken(paymentIntent?.amount_received || '0', paymentCurrency.decimal)} ${paymentCurrency.symbol}`;
-    const refundInfo: string = `${fromUnitToToken(refund.amount, paymentCurrency.decimal)} ${paymentCurrency.symbol}`;
-
     let invoice = null;
     let currentPeriodStart;
     let currentPeriodEnd;
@@ -105,6 +102,10 @@ export class SubscriptionRefundSucceededEmailTemplate
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(
       refund.payment_method_id || invoice?.default_payment_method_id
     );
+
+    const paymentInfo: string = `${fromUnitToToken(paymentIntent?.amount_received || '0', paymentCurrency.decimal)} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+    const refundInfo: string = `${fromUnitToToken(refund.amount, paymentCurrency.decimal)} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     // @ts-expect-error
     const chainHost: string | undefined = paymentMethod?.settings?.[paymentMethod.type]?.api_host;
     const viewSubscriptionLink = getCustomerSubscriptionPageUrl({

package/api/src/libs/notification/template/subscription-renew-failed.ts

@@ -112,9 +112,6 @@ export class SubscriptionRenewFailedEmailTemplate
     const nftMintItem: NftMintItem | undefined = hasNft
       ? checkoutSession?.nft_mint_details?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]
       : undefined;
-    const paymentInfo: string = `${fromUnitToToken(invoice.amount_remaining, paymentCurrency.decimal)} ${
-      paymentCurrency.symbol
-    }`;
 
     const currentPeriodStart: string = formatTime(invoice.period_start * 1000);
     const currentPeriodEnd: string = formatTime(invoice.period_end * 1000);
@@ -124,8 +121,12 @@ export class SubscriptionRenewFailedEmailTemplate
         locale: getPrettyMsI18nLocale(locale),
       }
     );
-
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(invoice.default_payment_method_id);
+
+    const paymentInfo: string = `${fromUnitToToken(invoice.amount_remaining, paymentCurrency.decimal)} ${
+      paymentCurrency.symbol
+    }${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     const chainHost: string | undefined =
       paymentMethod?.settings?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]?.api_host;
     const viewSubscriptionLink = getCustomerSubscriptionPageUrl({

package/api/src/libs/notification/template/subscription-renewed.ts

@@ -102,7 +102,6 @@ export class SubscriptionRenewedEmailTemplate implements BaseEmailTemplate<Subsc
       ? checkoutSession?.nft_mint_details?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]
       : undefined;
     const amountPaid = +fromUnitToToken(invoice.total, paymentCurrency.decimal);
-    const paymentInfo: string = `${fromUnitToToken(invoice.total, paymentCurrency.decimal)} ${paymentCurrency.symbol}`;
     const currentPeriodStart: string = formatTime(invoice.period_start * 1000);
     const currentPeriodEnd: string = formatTime(invoice.period_end * 1000);
     const duration: string = prettyMsI18n(
@@ -113,6 +112,8 @@ export class SubscriptionRenewedEmailTemplate implements BaseEmailTemplate<Subsc
     );
 
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(invoice.default_payment_method_id);
+    const paymentInfo: string = `${fromUnitToToken(invoice.total, paymentCurrency.decimal)} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     const chainHost: string | undefined =
       paymentMethod?.settings?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]?.api_host;
     const viewSubscriptionLink = getCustomerSubscriptionPageUrl({

package/api/src/libs/notification/template/subscription-stake-slash-succeeded.ts

@@ -10,7 +10,6 @@ import { getCustomerSubscriptionPageUrl } from '../../subscription';
 import { formatTime } from '../../time';
 import { getExplorerLink, getSubscriptionNotificationCustomActions } from '../../util';
 import type { BaseEmailTemplate, BaseEmailTemplateType } from './base';
-import logger from '../../logger';
 
 export interface SubscriptionStakeSlashSucceededEmailTemplateOptions {
   paymentIntentId: string;
@@ -83,9 +82,10 @@ export class SubscriptionStakeSlashSucceededEmailTemplate
     const productName = await getMainProductName(this.options.subscriptionId);
     const at: string = formatTime(paymentIntent.created_at);
 
-    const slashInfo: string = `${fromUnitToToken(paymentIntent?.amount_received || '0', paymentCurrency.decimal)} ${paymentCurrency.symbol}`;
-
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(paymentIntent.payment_method_id);
+
+    const slashInfo: string = `${fromUnitToToken(paymentIntent?.amount_received || '0', paymentCurrency.decimal)} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     // @ts-expect-error
     const chainHost: string | undefined = paymentMethod?.settings?.[paymentMethod.type]?.api_host;
     const viewSubscriptionLink = getCustomerSubscriptionPageUrl({
@@ -140,7 +140,6 @@ export class SubscriptionStakeSlashSucceededEmailTemplate
       customActions,
     } = await this.getContext();
 
-    logger.info('SubscriptionStakeSlashSucceededEmailTemplate getTemplate', { productName, at, userDid, slashInfo, viewSubscriptionLink, viewTxHashLink });
     const template: BaseEmailTemplateType = {
       title: `${translate('notification.subscriptionStakeSlashSucceeded.title', locale, {
         productName,

package/api/src/libs/notification/template/subscription-succeeded.ts

@@ -120,7 +120,6 @@ export class SubscriptionSucceededEmailTemplate
     const oneTimeProductInfo = await getOneTimeProductInfo(subscription.latest_invoice_id as string, paymentCurrency);
     const paymentAmount = await getPaymentAmountForCycleSubscription(subscription, paymentCurrency);
 
-    const paymentInfo: string = `${paymentAmount} ${paymentCurrency.symbol}`;
     const hasNft: boolean = checkoutSession?.nft_mint_status === 'minted';
     const nftMintItem: NftMintItem | undefined = hasNft
       ? checkoutSession?.nft_mint_details?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]
@@ -135,6 +134,8 @@ export class SubscriptionSucceededEmailTemplate
     );
 
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(invoice.default_payment_method_id);
+    const paymentInfo: string = `${paymentAmount} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     // @FIXME: 获取 chainHost 困难的一批?
     const chainHost: string | undefined =
       paymentMethod?.settings?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]?.api_host;

package/api/src/libs/notification/template/subscription-upgraded.ts

@@ -88,10 +88,6 @@ export class SubscriptionUpgradedEmailTemplate implements BaseEmailTemplate<Subs
     const productName = await getMainProductName(subscription.id);
     const at: string = formatTime(subscription.created_at);
 
-    const paymentInfo: string = `${fromUnitToToken(
-      paymentIntent?.amount || invoice.amount_paid,
-      paymentCurrency.decimal
-    )} ${paymentCurrency.symbol}`;
     const hasNft: boolean = checkoutSession?.nft_mint_status === 'minted';
     const nftMintItem: NftMintItem | undefined = hasNft
       ? checkoutSession?.nft_mint_details?.[checkoutSession?.nft_mint_details?.type as NFTMintChainType]
@@ -110,6 +106,12 @@ export class SubscriptionUpgradedEmailTemplate implements BaseEmailTemplate<Subs
     );
 
     const paymentMethod: PaymentMethod | null = await PaymentMethod.findByPk(invoice.default_payment_method_id);
+
+    const paymentInfo: string = `${fromUnitToToken(
+      paymentIntent?.amount || invoice.amount_paid,
+      paymentCurrency.decimal
+    )} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
+
     // @ts-expect-error
     const chainHost: string | undefined = paymentMethod?.settings?.[paymentMethod.type]?.api_host;
     const viewSubscriptionLink = getCustomerSubscriptionPageUrl({

package/api/src/libs/notification/template/subscription-will-canceled.ts

@@ -6,7 +6,7 @@ import type { ManipulateType } from 'dayjs';
 import dayjs from '../../dayjs';
 import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
-import { Customer, Invoice, Subscription } from '../../../store/models';
+import { Customer, Invoice, PaymentMethod, Subscription } from '../../../store/models';
 import { PaymentCurrency } from '../../../store/models/payment-currency';
 import { getCustomerInvoicePageUrl } from '../../invoice';
 import logger from '../../logger';
@@ -82,7 +82,10 @@ export class SubscriptionWillCanceledEmailTemplate
       where: {
         id: subscription.latest_invoice_id,
       },
-      include: [{ model: PaymentCurrency, as: 'paymentCurrency' }],
+      include: [
+        { model: PaymentCurrency, as: 'paymentCurrency' },
+        { model: PaymentMethod, as: 'paymentMethod' },
+      ],
     });
     if (!invoice) {
       throw new Error(`Invoice(${subscription.latest_invoice_id}) not found`);
@@ -94,7 +97,7 @@ export class SubscriptionWillCanceledEmailTemplate
     const at: string = formatTime(cancelAt * 1000);
     const willCancelDuration: string = getSimplifyDuration((cancelAt - now) * 1000, locale);
     // @ts-ignore
-    const paymentInfo: string = `${fromUnitToToken(+invoice.total, invoice?.paymentCurrency?.decimal)} ${invoice?.paymentCurrency?.symbol}`;
+    const paymentInfo: string = `${fromUnitToToken(+invoice.total, invoice?.paymentCurrency?.decimal)} ${invoice?.paymentCurrency?.symbol}${invoice?.paymentMethod ? `(${invoice?.paymentMethod.name})` : ''}`;
 
     let body: string = translate('notification.subscriptWillCanceled.body', locale, {
       productName,

package/api/src/libs/notification/template/subscription-will-renew.ts

@@ -117,7 +117,7 @@ export class SubscriptionWillRenewEmailTemplate
     const paidType: string = isPrePaid
       ? translate('notification.common.prepaid', locale)
       : translate('notification.common.postpaid', locale);
-    const paymentInfo: string = `${paymentDetail?.price || '0'} ${paymentCurrency.symbol}`;
+    const paymentInfo: string = `${paymentDetail?.price || '0'} ${paymentCurrency.symbol}${paymentMethod ? ` (${paymentMethod.name})` : ''}`;
     const currentPeriodStart: string = isPrePaid
       ? formatTime(invoice.period_end * 1000)
       : formatTime(invoice.period_start * 1000);

package/api/src/routes/customers.ts

@@ -11,6 +11,7 @@ import { formatMetadata } from '../libs/util';
 import { Customer } from '../store/models/customer';
 import { blocklet } from '../libs/auth';
 import logger from '../libs/logger';
+import { Invoice } from '../store/models';
 
 const router = Router();
 const auth = authenticate<Customer>({ component: true, roles: ['owner', 'admin'] });
@@ -86,26 +87,99 @@ router.get('/me', sessionMiddleware(), async (req, res) => {
   }
 
   try {
-    const doc = await Customer.findByPkOrDid(req.user.did as string);
+    let doc = await Customer.findByPkOrDid(req.user.did as string);
     const livemode = req.query.livemode ? !!req?.livemode : !!doc?.livemode;
     if (!doc) {
       if (req.query.fallback) {
         const result = await blocklet.getUser(req.user.did);
-        res.json({ ...result.user, address: {}, livemode });
+        return res.json({ ...result.user, address: {}, livemode });
+      }
+      if (req.query.create) {
+        // create customer
+        const { user } = await blocklet.getUser(req.user.did);
+        const customer = await Customer.create({
+          livemode: true,
+          did: req.user.did,
+          name: user.fullName,
+          email: user.email,
+          phone: '',
+          address: {},
+          description: user.remark,
+          metadata: {},
+          balance: '0',
+          next_invoice_sequence: 1,
+          delinquent: false,
+          invoice_prefix: Customer.getInvoicePrefix(),
+        });
+        logger.info('customer created', {
+          customerId: customer.id,
+          did: customer.did,
+        });
+        doc = customer;
       } else {
-        res.json({ error: 'Customer not found' });
+        return res.json({ error: 'Customer not found' });
       }
-    } else {
+    }
+    try {
       const [summary, stake, token] = await Promise.all([
         doc.getSummary(livemode),
         getStakeSummaryByDid(doc.did, livemode),
         getTokenSummaryByDid(doc.did, livemode),
       ]);
       res.json({ ...doc.toJSON(), summary: { ...summary, stake, token }, livemode });
+    } catch (summaryErr) {
+      logger.error('get customer summary failed', summaryErr);
+      if (req.query.skipError) {
+        return res.json({
+          ...doc.toJSON(),
+          summary: { stake: {}, token: {} },
+          livemode,
+          summaryError: summaryErr.message,
+          error: `Failed to get customer: ${summaryErr.message}`,
+        });
+      }
+      throw summaryErr;
     }
   } catch (err) {
     logger.error('get customer failed', err);
-    res.status(500).json({ error: `Failed to get customer: ${err.message}` });
+    if (req.query.skipError) {
+      return res.json({
+        error: `Failed to get customer: ${err.message}`,
+        did: req.user?.did,
+        name: req.user?.fullName,
+        address: {},
+        livemode: !!req.query.livemode,
+        summary: { stake: {}, token: {} },
+      });
+    }
+    return res.status(500).json({ error: `Failed to get customer: ${err.message}` });
+  }
+});
+
+// get overdue invoices
+router.get('/:id/overdue/invoices', auth, async (req, res) => {
+  if (!req.user) {
+    return res.status(403).json({ error: 'Unauthorized' });
+  }
+  try {
+    const doc = await Customer.findByPkOrDid(req.params.id as string);
+    if (!doc) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+    const [summary, detail, invoices] = await Invoice!.getUncollectibleAmount({
+      customerId: doc.id,
+      livemode: req.query.livemode ? !!req.query.livemode : doc.livemode,
+    });
+    const subscriptionCount = new Set(invoices.map((x) => x.subscription_id)).size;
+    return res.json({
+      summary,
+      invoices,
+      subscriptionCount,
+      detail,
+    });
+  } catch (err) {
+    logger.error(err);
+    return res.status(500).json({ error: `Failed to get overdue invoices: ${err.message}` });
   }
 });
 

package/api/src/routes/subscriptions.ts

@@ -97,6 +97,7 @@ const schema = createListParamSchema<{
   activeFirst?: boolean;
   price_id?: string;
   order?: string | string[] | OrderItem | OrderItem[];
+  showTotalCount?: boolean;
 }>({
   status: Joi.string().empty(''),
   customer_id: Joi.string().empty(''),
@@ -110,6 +111,7 @@ const schema = createListParamSchema<{
       Joi.array().items(Joi.array().ordered(Joi.string(), Joi.string().valid('ASC', 'DESC').insensitive()))
     )
     .optional(),
+  showTotalCount: Joi.boolean().optional(),
 });
 
 const parseOrder = (orderStr: string): OrderItem => {
@@ -195,7 +197,17 @@ router.get('/', authMine, async (req, res) => {
     // @ts-ignore
     docs.forEach((x) => expandLineItems(x.items, products, prices));
 
-    res.json({ count, list: docs, paging: { page, pageSize } });
+    if (query.showTotalCount) {
+      const totalCount = await Subscription.count({
+        where: {
+          customer_id: where.customer_id,
+        },
+        distinct: true,
+      });
+      res.json({ count, list: docs, paging: { page, pageSize }, totalCount });
+    } else {
+      res.json({ count, list: docs, paging: { page, pageSize } });
+    }
   } catch (err) {
     logger.error(err);
     res.json({ count: 0, list: [], paging: { page, pageSize } });

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

@@ -530,7 +530,9 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
     return ['paid', 'void'].includes(this.status);
   }
 
-  private static async _getUncollectibleAmount(where: WhereOptions<Invoice>): Promise<[GroupedBN, GroupedStrList]> {
+  private static async _getUncollectibleAmount(
+    where: WhereOptions<Invoice>
+  ): Promise<[GroupedBN, GroupedStrList, Invoice[]]> {
     const invoices = await Invoice.findAll({ where });
     const summary: GroupedBN = {};
     const detail: GroupedStrList = {};
@@ -548,7 +550,7 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
       detail[key]!.push(invoice.id);
     });
 
-    return [summary, detail];
+    return [summary, detail, invoices];
   }
 
   public static getUncollectibleAmount({

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.18.12
+version: 1.18.13
 logo: logo.png
 files:
   - dist
@@ -113,7 +113,7 @@ navigation:
     icon: ion:receipt-outline
     link: /customer
     section:
-      - dashboard
+      - userCenter
       - sessionManager
     role:
       - owner

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.12",
+  "version": "1.18.13",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.19.14",
     "@blocklet/js-sdk": "^1.16.39",
     "@blocklet/logger": "^1.16.39",
-    "@blocklet/payment-react": "1.18.12",
+    "@blocklet/payment-react": "1.18.13",
     "@blocklet/sdk": "^1.16.39",
     "@blocklet/ui-react": "^2.11.48",
     "@blocklet/uploader": "^0.1.71",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.39",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.12",
+    "@blocklet/payment-types": "1.18.13",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "7efd2af5c272e4928da6864edfcbd3f9054c722b"
+  "gitHead": "b26aa859ba5961c7a8dedfc238a31476cf16036c"
 }

package/src/app.tsx

@@ -13,7 +13,7 @@ import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-d
 import { joinURL } from 'ufo';
 
 import ErrorFallback from './components/error-fallback';
-import Layout from './components/layout/admin';
+import UserLayout from './components/layout/user';
 import { TransitionProvider } from './components/progress-bar';
 import { SessionProvider } from './contexts/session';
 import { translations } from './locales';
@@ -68,45 +68,45 @@ function App() {
                   key="customer-home"
                   path="/customer"
                   element={
-                    <Layout padding="0">
+                    <UserLayout>
                       <CustomerHome />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription"
                   path="/customer/subscription/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription-change-plan"
                   path="/customer/subscription/:id/change-plan"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionChangePlan />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-subscription-change-payment"
                   path="/customer/subscription/:id/change-payment"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerSubscriptionChangePayment />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-recharge"
                   path="/customer/subscription/:id/recharge"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerRecharge />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
@@ -125,27 +125,27 @@ function App() {
                   key="customer-due"
                   path="/customer/invoice/past-due"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerInvoicePastDue />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-invoice"
                   path="/customer/invoice/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerInvoiceDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route
                   key="customer-payout"
                   path="/customer/payout/:id"
                   element={
-                    <Layout>
+                    <UserLayout>
                       <CustomerPayoutDetail />
-                    </Layout>
+                    </UserLayout>
                   }
                 />
                 <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,

package/src/components/actions.tsx

@@ -16,7 +16,7 @@ type ActionItem = {
 
 export type ActionsProps = {
   actions: ActionItem[];
-  variant?: LiteralUnion<'compact' | 'normal', string>;
+  variant?: LiteralUnion<'compact' | 'normal' | 'outlined', string>;
   sx?: any;
   onOpenCallback?: Function;
 };
@@ -58,17 +58,40 @@ export default function Actions(props: ActionsProps) {
     }
   };
 
-  return (
-    <>
-      {props.variant === 'compact' ? (
+  const renderButton = () => {
+    if (props.variant === 'outlined') {
+      return (
+        <Button
+          aria-label="actions"
+          sx={{
+            minWidth: 0,
+            padding: '5px',
+            ...props.sx,
+          }}
+          variant="outlined"
+          onClick={onOpen}
+          size="small">
+          <MoreHorizOutlined />
+        </Button>
+      );
+    }
+    if (props.variant === 'compact') {
+      return (
         <IconButton aria-label="actions" sx={props.sx} aria-haspopup="true" onClick={onOpen} size="small">
           <MoreHorizOutlined />
         </IconButton>
-      ) : (
-        <Button sx={props.sx} onClick={onOpen} size="small" variant="contained" color="primary">
-          {t('common.actions')} <ExpandMoreOutlined fontSize="small" />
-        </Button>
-      )}
+      );
+    }
+    return (
+      <Button sx={props.sx} onClick={onOpen} size="small" variant="contained" color="primary">
+        {t('common.actions')} <ExpandMoreOutlined fontSize="small" />
+      </Button>
+    );
+  };
+
+  return (
+    <>
+      {renderButton()}
       <Menu
         anchorEl={anchorEl}
         open={open}

package/src/components/copyable.tsx

@@ -1,7 +1,7 @@
 import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { getWordBreakStyle } from '@blocklet/payment-react';
-import { Box, Stack, Typography } from '@mui/material';
+import { Stack, Typography } from '@mui/material';
 import type { ReactNode } from 'react';
 
 interface CopyableProps {
@@ -35,7 +35,7 @@ export default function Copyable({ text, children, style }: CopyableProps) {
               {text}
             </Typography>
           )}
-          <Box sx={{ height: '1em', mt: '-0.4em' }}>{copyButton}</Box>
+          <Typography sx={{ display: 'inline-flex', '> span': { display: 'inline-flex' } }}>{copyButton}</Typography>
         </Stack>
       )}
     />

package/src/components/layout/user.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { PaymentProvider } from '@blocklet/payment-react';
+import { UserCenter } from '@blocklet/ui-react';
+import { useEffect } from 'react';
+
+import { useSessionContext } from '../../contexts/session';
+
+export default function UserLayout(props: any) {
+  const { session, connectApi, events } = useSessionContext();
+
+  useEffect(() => {
+    events.once('logout', () => {
+      window.location.href = `${window.location.origin}/.well-known/service/user`;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (session.initialized && !session.user) {
+      // @ts-ignore
+      session.login(() => {}, { openMode: 'redirect', redirect: window.location.href });
+    }
+  }, [session.initialized]);
+
+  if (session.user) {
+    return (
+      <PaymentProvider session={session} connect={connectApi}>
+        <UserCenter
+          currentTab={`${window.blocklet.prefix}customer`}
+          userDid={session.user.did}
+          notLoginContent="undefined">
+          {props.children}
+        </UserCenter>
+      </PaymentProvider>
+    );
+  }
+  return null;
+}