payment-kit 1.13.70 → 1.13.72

package/api/src/jobs/payment.ts

@@ -6,7 +6,7 @@ import { events } from '../libs/event';
 import logger from '../libs/logger';
 import { getGasPayerExtra, isDelegationSufficientForPayment } from '../libs/payment';
 import createQueue from '../libs/queue';
-import { MAX_RETRY_COUNT, getNextRetry } from '../libs/util';
+import { MAX_RETRY_COUNT, MIN_RETRY_MAIL, getNextRetry } from '../libs/util';
 import { CheckoutSession } from '../store/models/checkout-session';
 import { Invoice } from '../store/models/invoice';
 import { PaymentCurrency } from '../store/models/payment-currency';
@@ -66,13 +66,7 @@ export const handlePaymentSucceed = async (paymentIntent: PaymentIntent) => {
       }
     }
 
-    const count: number = await Invoice.count({
-      where: {
-        subscription_id: invoice.subscription_id,
-        status: 'paid',
-      },
-    });
-    if (count >= 2) {
+    if (invoice.billing_reason === 'subscription_cycle') {
       events.emit('customer.subscription.renewed', subscription, invoice);
     }
   }
@@ -131,6 +125,7 @@ export const handlePayment = async (job: PaymentJob) => {
 
   // try payment capture and reschedule on error
   logger.info(`PaymentIntent capture attempt: ${paymentIntent.id}`);
+  let result;
   try {
     await paymentIntent.update({ status: 'processing', last_payment_error: null });
 
@@ -138,7 +133,7 @@ export const handlePayment = async (job: PaymentJob) => {
     const payer = paymentSettings?.payment_method_options.arcblock?.payer;
 
     // check balance before capture
-    const result = await isDelegationSufficientForPayment({
+    result = await isDelegationSufficientForPayment({
       paymentMethod,
       paymentCurrency,
       userDid: payer as string,
@@ -146,11 +141,6 @@ export const handlePayment = async (job: PaymentJob) => {
     });
     if (result.sufficient === false) {
       logger.error('PaymentIntent capture aborted on preCheck', { id: paymentIntent.id, result });
-      events.emit('customer.subscription.renew_failed', {
-        invoice,
-        result,
-      });
-      // FIXME: send email to customer, pause subscription
       throw new CustomError(result.reason, 'payer balance or delegation not sufficient for this payment');
     }
 
@@ -218,11 +208,19 @@ export const handlePayment = async (job: PaymentJob) => {
         });
       }
     } else if (invoice) {
+      const attemptCount = invoice.attempt_count + 1;
+      if (attemptCount >= MIN_RETRY_MAIL && invoice.billing_reason === 'subscription_cycle') {
+        events.emit('customer.subscription.renew_failed', {
+          invoice,
+          result: result || { sufficient: false, reason: 'TX_SEND_FAILED' },
+        });
+      }
+
       if (invoice.attempt_count > MAX_RETRY_COUNT) {
         await paymentIntent.update({ status: 'requires_action', last_payment_error: error });
         await invoice.update({
           status: 'uncollectible',
-          attempt_count: invoice.attempt_count + 1,
+          attempt_count: attemptCount,
           attempted: true,
           status_transitions: { ...invoice.status_transitions, marked_uncollectible_at: dayjs().unix() },
         });
@@ -230,11 +228,11 @@ export const handlePayment = async (job: PaymentJob) => {
         // FIXME: send email to customer, pause subscription
         logger.error('PaymentIntent capture failed after max retry', { id: paymentIntent.id });
       } else {
-        const retryAt = getNextRetry(invoice.attempt_count + 1);
+        const retryAt = getNextRetry(attemptCount);
 
         await paymentIntent.update({ status: 'requires_capture', last_payment_error: error });
         await invoice.update({
-          attempt_count: invoice.attempt_count + 1,
+          attempt_count: attemptCount,
           attempted: true,
           next_payment_attempt: retryAt,
         });

package/api/src/libs/util.ts

@@ -10,6 +10,7 @@ import dayjs from './dayjs';
 export const OCAP_PAYMENT_TX_TYPE = 'fg:t:transfer_v2';
 
 export const MAX_RETRY_COUNT = 18; // 2^18 seconds ~~ 3 days, total retry time: 6 days
+export const MIN_RETRY_MAIL = 13; // total retry time before sending first mail: 6 hours
 export const STRIPE_API_VERSION = '2023-08-16';
 export const STRIPE_ENDPOINT: string = getUrl('/api/integrations/stripe/webhook');
 export const STRIPE_EVENTS: any[] = [

package/api/src/locales/en.ts

@@ -77,6 +77,7 @@ export default flat({
         noEnoughToken:
           'Your account token balance is {balance}, not enough for {price}, please replenish your tokens and renew your account',
         noSupported: 'Token renewal is not supported, please check your subscription',
+        txSendFailed: 'Failed to send transaction when try to collect payment.',
       },
     },
   },

package/api/src/locales/zh.ts

@@ -72,6 +72,7 @@ export default flat({
         noToken: '您的账户没有任何代币，请充值代币后重新续费',
         noEnoughToken: '您的账户代币余额为 {balance}，不足 {price}，请充值代币后重新续费',
         noSupported: '不支持使用代币续费，请检查您的套餐',
+        txSendFailed: '扣款交易发送失败',
       },
     },
   },

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.70",
+  "version": "1.13.72",
   "scripts": {
     "dev": "COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev",
     "eject": "vite eject",
@@ -106,7 +106,7 @@
     "@abtnode/types": "^1.16.19",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.70",
+    "@did-pay/types": "1.13.72",
     "@types/cookie-parser": "^1.4.6",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -143,5 +143,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "f5fbe3d9d64d7ccdcdcc9dc2df791ab7665e64a3"
+  "gitHead": "bbd67e67e0e6154506b12d7ce30b314e895382c0"
 }

package/src/app.tsx

@@ -11,6 +11,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 { SessionProvider } from './contexts/session';
 import { translations } from './locales';
 
@@ -48,9 +49,35 @@ function App() {
               <Route key="admin-tabs" path="/admin/:group" element={<AdminPage />} />,
               <Route key="admin-sub" path="/admin/:group/:page" element={<AdminPage />} />,
               <Route key="admin-fallback" path="/admin/*" element={<AdminPage />} />,
-              <Route key="customer-home" path="/customer" element={<CustomerHome />} />,
-              <Route key="customer-subscription" path="/customer/subscription/:id" element={<CustomerSubscription />} />
-              <Route key="customer-invoice" path="/customer/invoice/:id" element={<CustomerInvoice />} />,
+              <Route
+                key="customer-home"
+                path="/customer"
+                element={
+                  <Layout>
+                    <CustomerHome />
+                  </Layout>
+                }
+              />
+              ,
+              <Route
+                key="customer-subscription"
+                path="/customer/subscription/:id"
+                element={
+                  <Layout>
+                    <CustomerSubscription />
+                  </Layout>
+                }
+              />
+              <Route
+                key="customer-invoice"
+                path="/customer/invoice/:id"
+                element={
+                  <Layout>
+                    <CustomerInvoice />
+                  </Layout>
+                }
+              />
+              ,
               <Route key="customer-fallback" path="/customer/*" element={<Navigate to="/customer" />} />,
               <Route path="*" element={<Navigate to="/" />} />
             </Routes>

package/src/components/{layout.tsx → layout/admin.tsx}

@@ -1,9 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import Center from '@arcblock/ux/lib/Center';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Dashboard from '@blocklet/ui-react/lib/Dashboard';
+import { Avatar, Button, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
-import { useEffect, useState } from 'react';
 
-import { useSessionContext } from '../contexts/session';
+import { useSessionContext } from '../../contexts/session';
 
 const Root = styled(Dashboard)`
   width: 100%;
@@ -50,17 +52,28 @@ const Root = styled(Dashboard)`
 `;
 
 export default function Layout(props: any) {
+  const { t } = useLocaleContext();
   const { session } = useSessionContext();
-  const [loggingIn, setLoggingIn] = useState(false);
 
-  useEffect(() => {
-    if (!session.user && !loggingIn) {
-      setLoggingIn(true);
-      session.login(() => {
-        setLoggingIn(false);
-      });
-    }
-  }, [session.user]);
+  const handleLogin = () => {
+    session.login();
+  };
+
+  if (!session.user) {
+    return (
+      <Center>
+        <Stack maxWidth="sm" direction="column" alignItems="center" spacing={3}>
+          <Avatar src={window.blocklet.appLogo} sx={{ width: 80, height: 80 }} />
+          <Stack direction="column" alignItems="center" spacing={3}>
+            <Typography variant="h4">{window.blocklet.appName}</Typography>
+            <Button size="large" variant="contained" color="secondary" onClick={handleLogin}>
+              {t('common.login')}
+            </Button>
+          </Stack>
+        </Stack>
+      </Center>
+    );
+  }
 
   if (session.user) {
     return <Root {...props} footerProps={{ className: 'dashboard-footer' }} />;

package/src/locales/en.tsx

@@ -10,6 +10,7 @@ export default flat({
     actions: 'Actions',
     options: 'Options',
     advanced: 'Advanced options',
+    login: 'Login to access this page',
     settings: 'Settings',
     preview: 'Preview',
     required: 'Required',

package/src/locales/zh.tsx

@@ -15,6 +15,7 @@ export default flat({
     required: '必填',
     setup: '设置',
     name: '姓名',
+    login: '登录以访问此页面',
     amount: '金额',
     total: '总计',
     status: '状态',

package/src/pages/admin/index.tsx

@@ -3,7 +3,7 @@ import { Box, Chip, Stack } from '@mui/material';
 import React, { isValidElement } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import Layout from '../../components/layout';
+import Layout from '../../components/layout/admin';
 import Switch from '../../components/switch';
 import { SettingsProvider, useSettingsContext } from '../../contexts/settings';
 

package/src/pages/customer/index.tsx

@@ -10,7 +10,6 @@ import { useNavigate } from 'react-router-dom';
 
 import EditCustomer from '../../components/customer/edit';
 import InfoRow from '../../components/info-row';
-import Layout from '../../components/layout';
 import CustomerInvoiceList from '../../components/portal/invoice/list';
 import CurrentSubscriptions from '../../components/portal/subscription/list';
 import SectionHeader from '../../components/section/header';
@@ -41,11 +40,9 @@ export default function CustomerHome() {
 
   if (!data) {
     return (
-      <Layout>
-        <Alert sx={{ mt: 3 }} severity="info">
-          {t('customer.empty')}
-        </Alert>
-      </Layout>
+      <Alert sx={{ mt: 3 }} severity="info">
+        {t('customer.empty')}
+      </Alert>
     );
   }
 
@@ -64,85 +61,83 @@ export default function CustomerHome() {
   };
 
   return (
-    <Layout>
-      <Grid container spacing={5}>
-        <Grid item xs={12} md={8}>
-          <Root direction="column" spacing={3} sx={{ my: 2 }}>
-            <Box className="section">
-              <SectionHeader title={t('customer.subscriptions.current')} mb={0} />
-              <Box className="section-body">
-                <CurrentSubscriptions
-                  id={data.id}
-                  onChange={runAsync}
-                  style={{
-                    cursor: 'pointer',
-                  }}
-                  onClickSubscription={(subscription) => {
-                    navigate(`/customer/subscription/${subscription.id}`);
-                  }}
-                />
-              </Box>
+    <Grid container spacing={5}>
+      <Grid item xs={12} md={8}>
+        <Root direction="column" spacing={3} sx={{ my: 2 }}>
+          <Box className="section">
+            <SectionHeader title={t('customer.subscriptions.current')} mb={0} />
+            <Box className="section-body">
+              <CurrentSubscriptions
+                id={data.id}
+                onChange={runAsync}
+                style={{
+                  cursor: 'pointer',
+                }}
+                onClickSubscription={(subscription) => {
+                  navigate(`/customer/subscription/${subscription.id}`);
+                }}
+              />
             </Box>
-            <Box className="section">
-              <SectionHeader title={t('customer.invoices')} mb={0} />
-              <Box className="section-body">
-                <CustomerInvoiceList customer_id={data.id} />
-              </Box>
+          </Box>
+          <Box className="section">
+            <SectionHeader title={t('customer.invoices')} mb={0} />
+            <Box className="section-body">
+              <CustomerInvoiceList customer_id={data.id} />
             </Box>
-          </Root>
-        </Grid>
-        <Grid item xs={12} md={4}>
-          <Root direction="column" spacing={4} sx={{ my: 2 }}>
-            <Box className="section">
-              <SectionHeader title={t('customer.details')}>
-                <Button
-                  variant="outlined"
-                  color="inherit"
-                  size="small"
-                  disabled={state.editing || state.loading}
-                  onClick={() => setState({ editing: true })}>
-                  <Edit fontSize="small" sx={{ mr: 0.5 }} />
-                  {t('customer.update')}
-                </Button>
-              </SectionHeader>
-              <Stack>
-                <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} />
-                <InfoRow
-                  sizes={[1, 2]}
-                  label={t('admin.customer.address.country')}
-                  value={
-                    data.address?.country ? (
-                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
-                    ) : (
-                      ''
-                    )
-                  }
-                />
-                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
-                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
-                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
-                <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line2')} value={data.address?.line2} />
-                <InfoRow
-                  sizes={[1, 2]}
-                  label={t('admin.customer.address.postal_code')}
-                  value={data.address?.postal_code}
-                />
-              </Stack>
-              {state.editing && (
-                <EditCustomer
-                  data={data}
-                  loading={state.loading}
-                  onSave={onUpdateInfo}
-                  onCancel={() => setState({ editing: false })}
-                />
-              )}
-            </Box>
-          </Root>
-        </Grid>
+          </Box>
+        </Root>
+      </Grid>
+      <Grid item xs={12} md={4}>
+        <Root direction="column" spacing={4} sx={{ my: 2 }}>
+          <Box className="section">
+            <SectionHeader title={t('customer.details')}>
+              <Button
+                variant="outlined"
+                color="inherit"
+                size="small"
+                disabled={state.editing || state.loading}
+                onClick={() => setState({ editing: true })}>
+                <Edit fontSize="small" sx={{ mr: 0.5 }} />
+                {t('customer.update')}
+              </Button>
+            </SectionHeader>
+            <Stack>
+              <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} />
+              <InfoRow
+                sizes={[1, 2]}
+                label={t('admin.customer.address.country')}
+                value={
+                  data.address?.country ? (
+                    <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                  ) : (
+                    ''
+                  )
+                }
+              />
+              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.state')} value={data.address?.state} />
+              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.city')} value={data.address?.city} />
+              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line1')} value={data.address?.line1} />
+              <InfoRow sizes={[1, 2]} label={t('admin.customer.address.line2')} value={data.address?.line2} />
+              <InfoRow
+                sizes={[1, 2]}
+                label={t('admin.customer.address.postal_code')}
+                value={data.address?.postal_code}
+              />
+            </Stack>
+            {state.editing && (
+              <EditCustomer
+                data={data}
+                loading={state.loading}
+                onSave={onUpdateInfo}
+                onCancel={() => setState({ editing: false })}
+              />
+            )}
+          </Box>
+        </Root>
       </Grid>
-    </Layout>
+    </Grid>
   );
 }
 

package/src/pages/customer/invoice.tsx

@@ -11,7 +11,6 @@ import TxLink from '../../components/blockchain/tx';
 import Currency from '../../components/currency';
 import InfoRow from '../../components/info-row';
 import InvoiceTable from '../../components/invoice/table';
-import Layout from '../../components/layout';
 import SectionHeader from '../../components/section/header';
 import Status from '../../components/status';
 import { useSessionContext } from '../../contexts/session';
@@ -70,80 +69,78 @@ export default function CustomerHome() {
   }
 
   return (
-    <Layout>
-      <Grid container spacing={3} sx={{ mt: 1 }}>
-        <Grid item xs={12} md={12}>
-          <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>
-        </Grid>
-        <Grid item xs={12} md={5}>
-          <Box>
-            <SectionHeader title={t('customer.invoice.summary')} mb={0} />
-            <Stack sx={{ mt: 1 }}>
-              <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)} />}
-              />
-              <InfoRow
-                label={t('admin.subscription.currentPeriod')}
-                value={
-                  data.period_start && data.period_end
-                    ? [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>
-        </Grid>
-        <Grid item xs={12} md={7}>
-          <SectionHeader title={t('customer.invoice.details')} mb={0}>
-            {['open'].includes(data.status) && (
-              <Button
-                variant="contained"
-                color="primary"
-                size="small"
-                disabled={state.downloading}
-                onClick={() => setState({ downloading: true })}>
-                {t('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('customer.invoice.pay')}
-              </Button>
+    <Grid container spacing={3} sx={{ mt: 1 }}>
+      <Grid item xs={12} md={12}>
+        <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>
+      </Grid>
+      <Grid item xs={12} md={5}>
+        <Box>
+          <SectionHeader title={t('customer.invoice.summary')} mb={0} />
+          <Stack sx={{ mt: 1 }}>
+            <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)} />}
+            />
+            <InfoRow
+              label={t('admin.subscription.currentPeriod')}
+              value={
+                data.period_start && data.period_end
+                  ? [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>
-        </Grid>
+        </Box>
+      </Grid>
+      <Grid item xs={12} md={7}>
+        <SectionHeader title={t('customer.invoice.details')} mb={0}>
+          {['open'].includes(data.status) && (
+            <Button
+              variant="contained"
+              color="primary"
+              size="small"
+              disabled={state.downloading}
+              onClick={() => setState({ downloading: true })}>
+              {t('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('customer.invoice.pay')}
+            </Button>
+          )}
+        </Stack>
       </Grid>
-    </Layout>
+    </Grid>
   );
 }

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

@@ -12,7 +12,6 @@ import Currency from '../../../components/currency';
 import InfoMetric from '../../../components/info-metric';
 import InfoRow from '../../../components/info-row';
 import InvoiceList from '../../../components/invoice/list';
-import Layout from '../../../components/layout';
 import SectionHeader from '../../../components/section/header';
 import SubscriptionItemList from '../../../components/subscription/items';
 import SubscriptionStatus from '../../../components/subscription/status';
@@ -38,125 +37,123 @@ export default function CustomerSubscription() {
   }
 
   return (
-    <Layout>
-      <Root direction="column" spacing={4} sx={{ mb: 4 }}>
-        <Box>
-          <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
-            <Link to="/customer">
-              <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', mt: '16px' }}>
-                <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
-                <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
-                  {t('customer.subscriptions.title')}
-                </Typography>
-              </Stack>
-            </Link>
-          </Stack>
-          <Box mt={2}>
-            <Stack direction="row" justifyContent="space-between" alignItems="center">
-              <Stack direction="row" alignItems="center">
-                <Typography variant="h5" sx={{ fontWeight: 600 }}>
-                  {formatSubscriptionProduct(data.items)}
-                </Typography>
-                <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
-              </Stack>
+    <Root direction="column" spacing={4} sx={{ mb: 4 }}>
+      <Box>
+        <Stack className="page-header" direction="row" justifyContent="space-between" alignItems="center">
+          <Link to="/customer">
+            <Stack direction="row" alignItems="center" sx={{ fontWeight: 'normal', mt: '16px' }}>
+              <ArrowBackOutlined fontSize="small" sx={{ mr: 0.5, color: 'text.secondary' }} />
+              <Typography variant="h6" sx={{ color: 'text.secondary', fontWeight: 'normal' }}>
+                {t('customer.subscriptions.title')}
+              </Typography>
+            </Stack>
+          </Link>
+        </Stack>
+        <Box mt={2}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack direction="row" alignItems="center">
+              <Typography variant="h5" sx={{ fontWeight: 600 }}>
+                {formatSubscriptionProduct(data.items)}
+              </Typography>
+              <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
             </Stack>
-            <Stack
-              className="section-body"
-              direction="row"
-              spacing={3}
-              justifyContent="flex-start"
-              flexWrap="wrap"
-              sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+          </Stack>
+          <Stack
+            className="section-body"
+            direction="row"
+            spacing={3}
+            justifyContent="flex-start"
+            flexWrap="wrap"
+            sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
+            <InfoMetric
+              label={t('admin.subscription.startedAt')}
+              value={formatTime(data.start_date ? data.start_date * 1000 : data.created_at)}
+              divider
+            />
+            {!data.cancel_at && (
               <InfoMetric
-                label={t('admin.subscription.startedAt')}
-                value={formatTime(data.start_date ? data.start_date * 1000 : data.created_at)}
+                label={t('admin.subscription.nextInvoice')}
+                value={formatTime(data.current_period_end * 1000)}
                 divider
               />
-              {!data.cancel_at && (
-                <InfoMetric
-                  label={t('admin.subscription.nextInvoice')}
-                  value={formatTime(data.current_period_end * 1000)}
-                  divider
-                />
-              )}
-              {data.cancel_at && (
-                <InfoMetric
-                  label={t('admin.subscription.cancel.schedule')}
-                  value={formatTime(data.cancel_at * 1000)}
-                  divider
-                />
-              )}
-            </Stack>
-          </Box>
-        </Box>
-
-        <Box className="section">
-          <SectionHeader title={t('admin.details')} />
-          <Stack>
-            <InfoRow
-              label={t('common.customer')}
-              value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
-            />
-            <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-            {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
-              <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
             )}
-            <InfoRow
-              label={t('admin.subscription.currentPeriod')}
-              value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
-                ' ~ '
-              )}
-            />
-            <InfoRow
-              label={t('admin.subscription.trialingPeriod')}
-              value={
-                data.trail_end && data.trail_start
-                  ? [formatTime(data.trail_start * 1000), formatTime(data.trail_end * 1000)].join(' ~ ')
-                  : ''
-              }
-            />
-            <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
-            <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
-            <InfoRow
-              label={t('admin.paymentMethod._name')}
-              value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
-            />
-            <InfoRow
-              label={t('admin.paymentCurrency.name')}
-              value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
-            />
-            {data.payment_details?.arcblock?.tx_hash && (
-              <InfoRow
-                label={t('common.txHash')}
-                value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
+            {data.cancel_at && (
+              <InfoMetric
+                label={t('admin.subscription.cancel.schedule')}
+                value={formatTime(data.cancel_at * 1000)}
+                divider
               />
             )}
           </Stack>
         </Box>
+      </Box>
 
-        <Box className="section">
-          <SectionHeader title={t('admin.product.pricing')} mb={0} />
-          <Box className="section-body">
-            <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="customer" />
-          </Box>
-        </Box>
-        <Box className="section">
-          <SectionHeader title={t('admin.invoices')} mb={0} />
-          <Box className="section-body">
-            <InvoiceList
-              features={{ customer: false, toolbar: false }}
-              subscription_id={data.id}
-              invoiceProps={{
-                onClick: (invoice) => {
-                  navigate(`/customer/invoice/${invoice.id}`);
-                },
-              }}
-              mode="customer"
+      <Box className="section">
+        <SectionHeader title={t('admin.details')} />
+        <Stack>
+          <InfoRow
+            label={t('common.customer')}
+            value={<Link to={`/admin/customers/${data.customer.id}`}>{data.customer.name}</Link>}
+          />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
+          {data.status === 'paused' && !!data.pause_collection?.resumes_at && (
+            <InfoRow label={t('common.resumesAt')} value={formatTime(data.pause_collection.resumes_at * 1000)} />
+          )}
+          <InfoRow
+            label={t('admin.subscription.currentPeriod')}
+            value={[formatTime(data.current_period_start * 1000), formatTime(data.current_period_end * 1000)].join(
+              ' ~ '
+            )}
+          />
+          <InfoRow
+            label={t('admin.subscription.trialingPeriod')}
+            value={
+              data.trail_end && data.trail_start
+                ? [formatTime(data.trail_start * 1000), formatTime(data.trail_end * 1000)].join(' ~ ')
+                : ''
+            }
+          />
+          <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
+          <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
+          <InfoRow
+            label={t('admin.paymentMethod._name')}
+            value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
+          />
+          <InfoRow
+            label={t('admin.paymentCurrency.name')}
+            value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
+          />
+          {data.payment_details?.arcblock?.tx_hash && (
+            <InfoRow
+              label={t('common.txHash')}
+              value={<TxLink details={data.payment_details} method={data.paymentMethod} />}
             />
-          </Box>
+          )}
+        </Stack>
+      </Box>
+
+      <Box className="section">
+        <SectionHeader title={t('admin.product.pricing')} mb={0} />
+        <Box className="section-body">
+          <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="customer" />
+        </Box>
+      </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.invoices')} mb={0} />
+        <Box className="section-body">
+          <InvoiceList
+            features={{ customer: false, toolbar: false }}
+            subscription_id={data.id}
+            invoiceProps={{
+              onClick: (invoice) => {
+                navigate(`/customer/invoice/${invoice.id}`);
+              },
+            }}
+            mode="customer"
+          />
         </Box>
-      </Root>
-    </Layout>
+      </Box>
+    </Root>
   );
 }