payment-kit 1.13.239 → 1.13.241

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.period_start}
+          end={invoice.period_end}
+        />
+      )}
+    </Box>
   );
 }
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { ConfirmDialog, api } from '@blocklet/payment-react';
 import type { TUsageRecord } from '@blocklet/payment-types';
@@ -5,12 +6,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 +34,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 +57,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 +70,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}
       />
     );
   }
@@ -70,13 +101,25 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
           <YAxis mirror />
         </BarChart>
       }
-      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 +127,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/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