payment-kit 1.13.240 → 1.13.242

package/api/src/index.ts

@@ -16,6 +16,7 @@ import { ensureWebhookRegistered } from './integrations/stripe/setup';
 import { handlers } from './libs/auth';
 import logger, { accessLogStream } from './libs/logger';
 import { ensureI18n } from './libs/middleware';
+import { initEventBroadcast } from './libs/ws';
 import { startCheckoutSessionQueue } from './queues/checkout-session';
 import { startEventQueue } from './queues/event';
 import { startInvoiceQueue } from './queues/invoice';
@@ -123,5 +124,7 @@ export const server = app.listen(port, (err?: any) => {
 
   crons.init();
 
+  initEventBroadcast();
+
   initResourceHandler();
 });

package/api/src/libs/ws.ts

@@ -0,0 +1,25 @@
+import { sendToRelay } from '@blocklet/sdk/service/notification';
+
+import type { CheckoutSession, Invoice, PaymentIntent } from '../store/models';
+import { events } from './event';
+
+export function broadcast(channel: string, eventName: string, data: any) {
+  sendToRelay(channel, eventName, data).catch((err: any) => {
+    console.error(`Failed to broadcast info: ${channel}.${eventName}`, err);
+  });
+}
+
+export function initEventBroadcast() {
+  events.on('payment_intent.succeeded', (data: PaymentIntent) => {
+    broadcast('events', 'payment_intent.succeeded', data);
+  });
+  events.on('checkout.session.completed', (data: CheckoutSession) => {
+    broadcast('events', 'checkout.session.completed', data);
+  });
+  events.on('checkout.session.nft_minted', (data: CheckoutSession) => {
+    broadcast('events', 'checkout.session.nft_minted', data);
+  });
+  events.on('invoice.paid', (data: Invoice) => {
+    broadcast('events', 'invoice.paid', data);
+  });
+}

package/api/src/queues/usage-record.ts

@@ -1,6 +1,7 @@
 import { BN, fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 
 import dayjs from '../libs/dayjs';
+import { getLock } from '../libs/lock';
 import logger from '../libs/logger';
 import createQueue from '../libs/queue';
 import { getPriceUintAmountByCurrency } from '../libs/session';
@@ -22,9 +23,17 @@ type UsageRecordJob = {
   subscriptionItemId: string;
 };
 
-// FIXME: support subscription item level billing_thresholds
+// We need to use lock here to prevent race conditions
+export async function handleUsageRecord(job: UsageRecordJob) {
+  const lock = getLock(`${job.subscriptionId}-threshold`);
+  await lock.acquire();
+  const result = await doHandleUsageRecord(job);
+  lock.release();
+  return result;
+}
+
 // generate invoice for metered billing
-export const handleUsageRecord = async (job: UsageRecordJob) => {
+export const doHandleUsageRecord = async (job: UsageRecordJob) => {
   logger.info('handle usage record', job);
 
   const subscription = await Subscription.findByPk(job.subscriptionId);

package/api/src/routes/usage-records.ts

@@ -78,9 +78,13 @@ router.post('/', auth, async (req, res) => {
 // @link https://stripe.com/docs/api/usage_records/subscription_item_summary_list
 const schema = createListParamSchema<{
   subscription_item_id: string;
+  start?: number;
+  end?: number;
 }>(
   {
     subscription_item_id: Joi.string().required(),
+    start: Joi.number().optional(),
+    end: Joi.number().optional(),
   },
   100
 );
@@ -149,7 +153,10 @@ export function createUsageRecordQueryFn(doc?: Subscription) {
       const { rows: list, count } = await UsageRecord.findAndCountAll({
         where: {
           subscription_item_id: query.subscription_item_id,
-          timestamp: { [Op.gte]: subscription.current_period_start, [Op.lt]: subscription.current_period_end },
+          timestamp: {
+            [Op.gt]: query.start || subscription.current_period_start,
+            [Op.lte]: query.end || subscription.current_period_end,
+          },
         },
         order: [['created_at', 'ASC']],
         offset: (page - 1) * pageSize,

package/api/src/store/models/usage-record.ts

@@ -112,8 +112,8 @@ export class UsageRecord extends Model<InferAttributes<UsageRecord>, InferCreati
         subscription_item_id: id,
         billed: false,
         timestamp: {
-          [Op.gte]: start,
-          [Op.lt]: end,
+          [Op.gt]: start,
+          [Op.lte]: end,
         },
       },
       order: [['timestamp', 'DESC']],

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.240",
+  "version": "1.13.242",
   "scripts": {
     "dev": "cross-env COMPONENT_STORE_URL=https://test.store.blocklet.dev blocklet dev --open",
     "eject": "vite eject",
@@ -51,10 +51,10 @@
     "@arcblock/ux": "^2.9.77",
     "@arcblock/validator": "^1.18.116",
     "@blocklet/logger": "1.16.26",
-    "@blocklet/payment-react": "1.13.240",
+    "@blocklet/payment-react": "1.13.242",
     "@blocklet/sdk": "1.16.26",
     "@blocklet/ui-react": "^2.9.77",
-    "@blocklet/uploader": "^0.0.78",
+    "@blocklet/uploader": "^0.1.2",
     "@mui/icons-material": "^5.15.16",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.16",
@@ -116,7 +116,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.26",
     "@arcblock/eslint-config-ts": "^0.3.0",
-    "@blocklet/payment-types": "1.13.240",
+    "@blocklet/payment-types": "1.13.242",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
@@ -155,5 +155,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "02b0f1dc4e711c889dd88f7ace2b56062c5d2f0e"
+  "gitHead": "ec356f3a242ca99c4f86cc2707dc7057c3f2c38d"
 }

package/src/components/invoice/table.tsx

@@ -1,12 +1,14 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { formatAmount, formatToDate, getPriceUintAmountByCurrency } from '@blocklet/payment-react';
-import type { TInvoiceExpanded } from '@blocklet/payment-types';
+import type { TInvoiceExpanded, TInvoiceItem } from '@blocklet/payment-types';
 import { InfoOutlined } from '@mui/icons-material';
-import { Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
+import { Box, Stack, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 import { toBN } from '@ocap/util';
+import { useSetState } from 'ahooks';
 
 import LineItemActions from '../subscription/items/actions';
+import { UsageRecordDialog } from '../subscription/items/usage-records';
 
 type Props = {
   invoice: TInvoiceExpanded;
@@ -20,6 +22,7 @@ type InvoiceDetailItem = {
   rawQuantity: number;
   price: string;
   amount: string;
+  raw: TInvoiceItem;
 };
 
 type InvoiceSummaryItem = {
@@ -61,6 +64,7 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
       ? formatAmount(getPriceUintAmountByCurrency(line.price, invoice.paymentCurrency) || line.amount, invoice.paymentCurrency.decimal) // prettier-ignore
       : '',
     amount: formatAmount(line.amount, invoice.paymentCurrency.decimal),
+    raw: line,
   }));
 
   const summary: InvoiceSummaryItem[] = [
@@ -106,75 +110,112 @@ export function getInvoiceRows(invoice: TInvoiceExpanded) {
 export default function InvoiceTable({ invoice, simple }: Props) {
   const { t } = useLocaleContext();
   const { detail, summary } = getInvoiceRows(invoice);
+  const [state, setState] = useSetState({
+    subscriptionId: '',
+    subscriptionItemId: '',
+  });
+
+  const onOpenUsageRecords = (line: InvoiceDetailItem) => {
+    if (line.rawQuantity && line.raw.subscription_id && line.raw.subscription_item_id) {
+      setState({
+        subscriptionId: line.raw.subscription_id,
+        subscriptionItemId: line.raw.subscription_item_id,
+      });
+    }
+  };
+
+  const onCloseUsageRecords = () => {
+    setState({
+      subscriptionId: '',
+      subscriptionItemId: '',
+    });
+  };
 
   return (
-    <StyledTable>
-      <TableHead>
-        <TableRow sx={{ borderBottom: '1px solid #eee' }}>
-          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal' }}>Description</TableCell>
-          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 80 }} align="right">
-            {t('common.quantity')}
-          </TableCell>
-          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
-            {t('payment.customer.invoice.unitPrice')}
-          </TableCell>
-          <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 110 }} align="right">
-            {t('common.amount')}
-          </TableCell>
-          {!simple && (
-            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 50 }} align="right">
-              &nbsp;
-            </TableCell>
-          )}
-        </TableRow>
-        {invoice.period_end > 0 && invoice.period_start > 0 && (
+    <Box>
+      <StyledTable>
+        <TableHead>
           <TableRow sx={{ borderBottom: '1px solid #eee' }}>
-            <TableCell align="left" colSpan={simple ? 4 : 5}>
-              <Typography component="span" variant="body1" color="text.secondary">
-                {formatToDate(invoice.period_start * 1000)} - {formatToDate(invoice.period_end * 1000)}
-              </Typography>
+            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal' }}>Description</TableCell>
+            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 80 }} align="right">
+              {t('common.quantity')}
             </TableCell>
-          </TableRow>
-        )}
-      </TableHead>
-      <TableBody>
-        {detail.map((line) => (
-          <TableRow key={line.id} sx={{ borderBottom: '1px solid #eee' }}>
-            <TableCell sx={{ fontWeight: 600 }}>{line.product}</TableCell>
-            <TableCell align="right">
-              <Stack direction="row" spacing={0.5} alignItems="center" justifyContent="flex-end">
-                <Typography>{line.quantity}</Typography>
-                {!!line.rawQuantity && (
-                  <Tooltip
-                    title={t('payment.customer.invoice.rawQuantity', { quantity: line.rawQuantity })}
-                    placement="top">
-                    <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
-                  </Tooltip>
-                )}
-              </Stack>
+            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 120 }} align="right">
+              {t('payment.customer.invoice.unitPrice')}
+            </TableCell>
+            <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 110 }} align="right">
+              {t('common.amount')}
             </TableCell>
-            <TableCell align="right">{line.price}</TableCell>
-            <TableCell align="right">{line.amount}</TableCell>
             {!simple && (
-              <TableCell align="right">
-                <LineItemActions data={line as any} />
+              <TableCell sx={{ textTransform: 'none', fontWeight: 'normal', width: 50 }} align="right">
+                &nbsp;
               </TableCell>
             )}
           </TableRow>
-        ))}
-        {summary.map((line) => (
-          <TableRow key={line.key}>
-            <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: line.color }}>
-              {t(line.key)}
-            </TableCell>
-            <TableCell align="right" sx={{ fontWeight: 600 }}>
-              {line.value}
-            </TableCell>
-            <TableCell>&nbsp;</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </StyledTable>
+          {invoice.period_end > 0 && invoice.period_start > 0 && (
+            <TableRow sx={{ borderBottom: '1px solid #eee' }}>
+              <TableCell align="left" colSpan={simple ? 4 : 5}>
+                <Typography component="span" variant="body1" color="text.secondary">
+                  {formatToDate(invoice.period_start * 1000)} - {formatToDate(invoice.period_end * 1000)}
+                </Typography>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableHead>
+        <TableBody>
+          {detail.map((line) => (
+            <TableRow key={line.id} sx={{ borderBottom: '1px solid #eee' }}>
+              <TableCell sx={{ fontWeight: 600 }}>{line.product}</TableCell>
+              <TableCell align="right">
+                <Stack
+                  direction="row"
+                  spacing={0.5}
+                  alignItems="center"
+                  justifyContent="flex-end"
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() => onOpenUsageRecords(line)}>
+                  <Typography component="span">{line.quantity}</Typography>
+                  {!!line.rawQuantity && (
+                    <Tooltip
+                      title={t('payment.customer.invoice.rawQuantity', { quantity: line.rawQuantity })}
+                      placement="top">
+                      <InfoOutlined fontSize="small" sx={{ color: 'text.secondary', cursor: 'pointer' }} />
+                    </Tooltip>
+                  )}
+                </Stack>
+              </TableCell>
+              <TableCell align="right">{line.price}</TableCell>
+              <TableCell align="right">{line.amount}</TableCell>
+              {!simple && (
+                <TableCell align="right">
+                  <LineItemActions data={line as any} />
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+          {summary.map((line) => (
+            <TableRow key={line.key}>
+              <TableCell colSpan={3} align="right" sx={{ fontWeight: 600, color: line.color }}>
+                {t(line.key)}
+              </TableCell>
+              <TableCell align="right" sx={{ fontWeight: 600 }}>
+                {line.value}
+              </TableCell>
+              <TableCell>&nbsp;</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </StyledTable>
+      {state.subscriptionId && state.subscriptionItemId && (
+        <UsageRecordDialog
+          subscriptionId={state.subscriptionId}
+          id={state.subscriptionItemId}
+          onConfirm={onCloseUsageRecords}
+          start={invoice.metadata?.usage_start || invoice.period_start}
+          end={invoice.metadata?.usage_end || invoice.period_end}
+        />
+      )}
+    </Box>
   );
 }
 

package/src/components/subscription/items/usage-records.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/require-default-props */
+import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ConfirmDialog, api } from '@blocklet/payment-react';
 import type { TUsageRecord } from '@blocklet/payment-types';
@@ -5,12 +7,26 @@ import { Alert, Box, Button, CircularProgress } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 import { Bar, BarChart, Rectangle, Tooltip, XAxis, YAxis } from 'recharts';
+import { withQuery } from 'ufo';
 
 import { stringToColor } from '../../../libs/util';
 
-const fetchData = (subscriptionId: string, id: string): Promise<{ list: TUsageRecord[]; count: number }> => {
+// FIXME: pagination here
+const fetchData = (
+  subscriptionId: string,
+  id: string,
+  start: number = 0,
+  end: number = 0
+): Promise<{ list: TUsageRecord[]; count: number }> => {
   return api
-    .get(`/api/subscriptions/${subscriptionId}/usage-records?subscription_item_id=${id}&pageSize=100`)
+    .get(
+      withQuery(`/api/subscriptions/${subscriptionId}/usage-records`, {
+        subscription_item_id: id,
+        pageSize: 100,
+        start,
+        end,
+      })
+    )
     .then((res) => res.data);
 };
 
@@ -19,10 +35,22 @@ const colors = {
   active: stringToColor('active'),
 };
 
-export function UsageRecordDialog(props: { subscriptionId: string; id: string; onConfirm: any }) {
+export function UsageRecordDialog({
+  subscriptionId,
+  id,
+  onConfirm,
+  start = 0,
+  end = 0,
+}: {
+  subscriptionId: string;
+  id: string;
+  onConfirm: any;
+  start?: number;
+  end?: number;
+}) {
   const { t } = useLocaleContext();
-  const { loading, error, data } = useRequest(() => fetchData(props.subscriptionId, props.id), {
-    refreshDeps: [props.subscriptionId, props.id],
+  const { loading, error, data } = useRequest(() => fetchData(subscriptionId, id, start, end), {
+    refreshDeps: [subscriptionId, id, start, end],
   });
 
   if (error) {
@@ -30,8 +58,10 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       <ConfirmDialog
         title={t('admin.subscription.usage.current')}
         message={<Alert severity="error">{error.message}</Alert>}
-        onConfirm={props.onConfirm}
-        onCancel={props.onConfirm}
+        onConfirm={onConfirm}
+        onCancel={onConfirm}
+        color="primary"
+        cancel={false}
       />
     );
   }
@@ -41,8 +71,10 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       <ConfirmDialog
         title={t('admin.subscription.usage.current')}
         message={<CircularProgress />}
-        onConfirm={props.onConfirm}
-        onCancel={props.onConfirm}
+        onConfirm={onConfirm}
+        onCancel={onConfirm}
+        color="primary"
+        cancel={false}
       />
     );
   }
@@ -51,32 +83,52 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
     <ConfirmDialog
       title={t('admin.subscription.usage.current')}
       message={
-        <BarChart
-          width={480}
-          height={240}
-          data={data.list.map((item) => ({
-            ...item,
-            date: new Date(item.timestamp * 1000).toLocaleString(),
-          }))}
-          margin={{
-            top: 5,
-            right: 5,
-            left: 0,
-            bottom: 5,
-          }}>
-          <Tooltip />
-          <Bar dataKey="quantity" fill={colors.normal} activeBar={<Rectangle fill={colors.active} strokeWidth={0} />} />
-          <XAxis dataKey="date" />
-          <YAxis mirror />
-        </BarChart>
+        data.list.length > 0 ? (
+          <BarChart
+            width={480}
+            height={240}
+            data={data.list.map((item) => ({
+              ...item,
+              date: new Date(item.timestamp * 1000).toLocaleString(),
+            }))}
+            margin={{
+              top: 5,
+              right: 5,
+              left: 0,
+              bottom: 5,
+            }}>
+            <Tooltip />
+            <Bar
+              dataKey="quantity"
+              fill={colors.normal}
+              activeBar={<Rectangle fill={colors.active} strokeWidth={0} />}
+            />
+            <XAxis dataKey="date" />
+            <YAxis mirror />
+          </BarChart>
+        ) : (
+          <Empty>{t('admin.usageRecord.empty')}</Empty>
+        )
       }
-      onConfirm={props.onConfirm}
-      onCancel={props.onConfirm}
+      onConfirm={onConfirm}
+      onCancel={onConfirm}
+      color="primary"
+      cancel={false}
     />
   );
 }
 
-export default function UsageRecords({ subscriptionId, id }: { subscriptionId: string; id: string }) {
+export default function UsageRecords({
+  subscriptionId,
+  id,
+  start = 0,
+  end = 0,
+}: {
+  subscriptionId: string;
+  id: string;
+  start?: number;
+  end?: number;
+}) {
   const { t } = useLocaleContext();
   const [open, setOpen] = useState(false);
   return (
@@ -84,7 +136,15 @@ export default function UsageRecords({ subscriptionId, id }: { subscriptionId: s
       <Button size="small" variant="text" color="info" onClick={() => setOpen(true)}>
         {t('admin.subscription.usage.view')}
       </Button>
-      {open && <UsageRecordDialog subscriptionId={subscriptionId} id={id} onConfirm={() => setOpen(false)} />}
+      {open && (
+        <UsageRecordDialog
+          subscriptionId={subscriptionId}
+          id={id}
+          start={start}
+          end={end}
+          onConfirm={() => setOpen(false)}
+        />
+      )}
     </Box>
   );
 }

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

@@ -24,22 +24,23 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TSubscri
 
 type Props = {
   id: string;
+  status: string;
   onChange?: (action?: string) => any | Promise<any>;
   onClickSubscription: (subscription: TSubscriptionExpanded) => void | Promise<void>;
 } & Omit<StackProps, 'onChange'>;
 
 const pageSize = 4;
 
-export default function CurrentSubscriptions({ id, onChange, onClickSubscription, ...rest }: Props) {
+export default function CurrentSubscriptions({ id, status, onChange, onClickSubscription, ...rest }: Props) {
   const { t } = useLocaleContext();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TSubscriptionExpanded>>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: 'active,trialing,paused,past_due,canceled', customer_id: id });
+      return fetchData({ page, pageSize, status, customer_id: id });
     },
     {
-      reloadDeps: [id],
+      reloadDeps: [id, status],
     }
   );
 

package/src/locales/en.tsx

@@ -360,6 +360,7 @@ export default flat({
       from: 'Billed from',
       empty: 'No invoice',
       number: 'Invoice Number',
+      description: 'Billing Description',
       dueDate: 'Due',
       finalizedAt: 'Finalized At',
       paidAt: 'Payment Date',
@@ -501,5 +502,8 @@ export default flat({
       view: 'View refund detail',
       attention: 'Failed refunds',
     },
+    usageRecord: {
+      empty: 'No usage records',
+    },
   },
 });

package/src/locales/zh.tsx

@@ -351,6 +351,7 @@ export default flat({
       from: '账单来自',
       empty: '没有账单',
       number: '账单编号',
+      description: '账单说明',
       dueDate: '截止日期',
       finalizedAt: '已完成时间',
       paidAt: '支付日期',
@@ -491,5 +492,8 @@ export default flat({
       attention: '失败的退款',
       view: '查看退款详情',
     },
+    usageRecord: {
+      empty: '用量记录为空',
+    },
   },
 });

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

@@ -116,6 +116,7 @@ export default function InvoiceDetail(props: { id: string }) {
         <SectionHeader title={t('admin.details')} />
         <Stack>
           <InfoRow label={t('admin.invoice.number')} value={data.number} />
+          <InfoRow label={t('admin.invoice.description')} value={data.description} />
           <InfoRow label={t('admin.invoice.billTo')} value={<CustomerLink customer={data.customer} />} />
           <InfoRow
             label={t('admin.subscription.currentPeriod')}

package/src/pages/customer/index.tsx

@@ -1,7 +1,7 @@
 import DID from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { CustomerInvoiceList, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
+import { CustomerInvoiceList, Switch, formatError, getPrefix, usePaymentContext } from '@blocklet/payment-react';
 import type { GroupedBN, TCustomerExpanded } from '@blocklet/payment-types';
 import { Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Grid, Stack, Tooltip } from '@mui/material';
@@ -33,7 +33,7 @@ export default function CustomerHome() {
   const { t } = useLocaleContext();
   const { events } = useSessionContext();
   const { livemode, setLivemode } = usePaymentContext();
-  const [state, setState] = useSetState({ editing: false, loading: false });
+  const [state, setState] = useSetState({ editing: false, loading: false, onlyActive: true });
   const navigate = useNavigate();
   const { isPending, startTransition } = useTransitionContext();
 
@@ -84,6 +84,10 @@ export default function CustomerHome() {
     }
   };
 
+  const onToggleActive = () => {
+    setState({ onlyActive: !state.onlyActive });
+  };
+
   return (
     <>
       <ProgressBar pending={isPending} />
@@ -91,10 +95,27 @@ export default function CustomerHome() {
         <Grid item xs={12} md={8}>
           <Root direction="column" spacing={3} sx={{ my: 2 }}>
             <Box className="section">
-              <SectionHeader title={t('payment.customer.subscriptions.current')} mb={0} />
+              <SectionHeader title={t('payment.customer.subscriptions.current')} mb={0}>
+                <label
+                  htmlFor="only-active-switch"
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    cursor: 'pointer',
+                  }}>
+                  {t('payment.customer.subscriptions.viewAll')}
+                  <Switch
+                    id="only-active-switch"
+                    sx={{ ml: 0.5 }}
+                    checked={!state.onlyActive}
+                    onChange={onToggleActive}
+                  />
+                </label>
+              </SectionHeader>
               <Box className="section-body">
                 <CurrentSubscriptions
                   id={data.id}
+                  status={state.onlyActive ? 'active,trialing' : 'active,trialing,paused,past_due,canceled'}
                   style={{
                     cursor: 'pointer',
                   }}

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

@@ -45,36 +45,30 @@ export default function CustomerInvoiceDetail() {
   const action = searchParams.get('action');
 
   const onPay = () => {
-    try {
-      setState({ paying: true });
-      connectApi.open({
-        action: 'collect',
-        messages: {
-          scan: '',
-          title: t(`payment.customer.invoice.${action || 'pay'}`),
-          success: t(`payment.customer.invoice.${action || 'pay'}Success`),
-          error: t(`payment.customer.invoice.${action || 'pay'}Error`),
-          confirm: '',
-        } as any,
-        extraParams: { invoiceId: params.id, action },
-        onSuccess: async () => {
-          connectApi.close();
-          await runAsync();
-        },
-        onClose: () => {
-          connectApi.close();
-          setState({ paying: false });
-        },
-        onError: (err: any) => {
-          setState({ paying: false });
-          Toast.error(formatError(err));
-        },
-      });
-    } catch (err) {
-      Toast.error(formatError(err));
-    } finally {
-      setState({ paying: false });
-    }
+    setState({ paying: true });
+    connectApi.open({
+      action: 'collect',
+      messages: {
+        scan: '',
+        title: t(`payment.customer.invoice.${action || 'pay'}`),
+        success: t(`payment.customer.invoice.${action || 'pay'}Success`),
+        error: t(`payment.customer.invoice.${action || 'pay'}Error`),
+        confirm: '',
+      } as any,
+      extraParams: { invoiceId: params.id, action },
+      onSuccess: async () => {
+        connectApi.close();
+        await runAsync();
+      },
+      onClose: () => {
+        connectApi.close();
+        setState({ paying: false });
+      },
+      onError: (err: any) => {
+        setState({ paying: false });
+        Toast.error(formatError(err));
+      },
+    });
   };
 
   const closePay = () => {
@@ -86,7 +80,10 @@ export default function CustomerInvoiceDetail() {
     // @ts-expect-error
     if (error?.response?.status === 403) {
       closePay();
-    } else if (['pay', 'renew'].includes(action as string)) {
+    } else if (
+      ['pay', 'renew'].includes(action as string) &&
+      ['open', 'uncollectible'].includes(data?.status as string)
+    ) {
       onPay();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -127,6 +124,7 @@ export default function CustomerInvoiceDetail() {
         <Stack className="invoice-summary-wrapper">
           <InfoRow label={t('admin.invoice.from')} value={data.statement_descriptor || blocklet.appName} />
           <InfoRow label={t('admin.invoice.number')} value={data.number} />
+          <InfoRow label={t('admin.invoice.description')} value={data.description} />
           <InfoRow
             label={t('common.status')}
             value={<Status label={data.status} color={getInvoiceStatusColor(data.status)} />}