payment-kit 1.15.17 → 1.15.18

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

@@ -2,9 +2,9 @@
 import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
-import { ConfirmDialog, api, formatError, usePaymentContext } from '@blocklet/payment-react';
+import { ConfirmDialog, api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
 import type { TUsageRecord } from '@blocklet/payment-types';
-import { Alert, Box, Button, CircularProgress, TextField } from '@mui/material';
+import { Alert, Box, Button, CircularProgress, TextField, Typography } from '@mui/material';
 import { useRequest } from 'ahooks';
 import { useState } from 'react';
 import { Bar, BarChart, Rectangle, Tooltip, XAxis, YAxis } from 'recharts';
@@ -47,17 +47,21 @@ function addUsageQuantity({
 }
 
 export function UsageRecordDialog({
+  title,
   subscriptionId,
   id,
   onConfirm,
   start = 0,
   end = 0,
+  disableAddUsageQuantity = false,
 }: {
+  title?: string;
   subscriptionId: string;
   id: string;
   onConfirm: any;
   start?: number;
   end?: number;
+  disableAddUsageQuantity?: boolean;
 }) {
   const { t } = useLocaleContext();
   const { loading, error, data } = useRequest(() => fetchData(subscriptionId, id, start, end), {
@@ -69,7 +73,7 @@ export function UsageRecordDialog({
   if (error) {
     return (
       <ConfirmDialog
-        title={t('admin.subscription.usage.current')}
+        title={title || t('admin.subscription.usage.current')}
         message={<Alert severity="error">{error.message}</Alert>}
         onConfirm={onConfirm}
         onCancel={onConfirm}
@@ -82,7 +86,7 @@ export function UsageRecordDialog({
   if (loading || !data) {
     return (
       <ConfirmDialog
-        title={t('admin.subscription.usage.current')}
+        title={title || t('admin.subscription.usage.current')}
         message={<CircularProgress />}
         onConfirm={onConfirm}
         onCancel={onConfirm}
@@ -109,12 +113,17 @@ export function UsageRecordDialog({
   };
   return (
     <ConfirmDialog
-      title={t('admin.subscription.usage.current')}
+      title={title || t('admin.subscription.usage.current')}
       message={
         <>
+          {start && end ? (
+            <Typography variant="h6" mb={2}>
+              {t('admin.subscription.usage.cycle')}: {formatTime(start * 1000)} - {formatTime(end * 1000)}
+            </Typography>
+          ) : null}
           {data.list.length > 0 ? (
             <BarChart
-              width={480}
+              width={540}
               height={240}
               data={data.list.map((item) => ({
                 ...item,
@@ -123,7 +132,7 @@ export function UsageRecordDialog({
               margin={{
                 top: 5,
                 right: 5,
-                left: 0,
+                left: 5,
                 bottom: 5,
               }}>
               <Tooltip />
@@ -138,8 +147,8 @@ export function UsageRecordDialog({
           ) : (
             <Empty>{t('admin.usageRecord.empty')}</Empty>
           )}
-          {!settings.livemode && window.location.pathname.includes('/admin/billing') && (
-            <Box sx={{ display: 'flex', justifyContent: 'center' }} pt={1} pb={1}>
+          {!settings.livemode && window.location.pathname.includes('/admin/billing') && !disableAddUsageQuantity && (
+            <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }} pt={1} pb={1} gap={1}>
               <TextField
                 id="add-usage-record"
                 label={t('admin.usageRecord.add.quantity')}
@@ -151,7 +160,9 @@ export function UsageRecordDialog({
                 value={usageQuantity}
                 onChange={(e) => setUsageQuantity(+e.target.value)}
               />
-              <Button onClick={handAddUsageQuantity}>{t('admin.usageRecord.add.label')}</Button>
+              <Button onClick={handAddUsageQuantity} sx={{ color: 'text.link' }}>
+                {t('admin.usageRecord.add.label')}
+              </Button>
             </Box>
           )}
         </>

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

@@ -167,20 +167,22 @@ export function SubscriptionActionsInner({ subscription, showExtra, onChange, ac
           {action?.text || t('admin.subscription.batchPay.button')}
         </Button>
       )}
-      {subscription.service_actions?.map((x) => (
-        // @ts-ignore
-        <Button
-          component={Link}
-          key={x.name}
-          variant={x.variant}
-          color={x.color}
-          href={x.link}
-          size="small"
-          target="_blank"
-          sx={{ textDecoration: 'none !important' }}>
-          {x.text[locale] || x.text.en || x.name}
-        </Button>
-      ))}
+      {subscription.service_actions
+        ?.filter((x: any) => x?.type !== 'notification')
+        .map((x) => (
+          // @ts-ignore
+          <Button
+            component={Link}
+            key={x.name}
+            variant={x?.variant || 'contained'}
+            color={x?.color || 'primary'}
+            href={x.link}
+            size="small"
+            target="_blank"
+            sx={{ textDecoration: 'none !important' }}>
+            {x.text[locale] || x.text.en || x.name}
+          </Button>
+        ))}
       {state.action === 'cancel' && state.subscription && (
         <ConfirmDialog
           onConfirm={handleCancel}

package/src/libs/util.ts

@@ -4,6 +4,8 @@
 import { formatCheckoutHeadlines, formatPrice, getPrefix, getPriceCurrencyOptions } from '@blocklet/payment-react';
 import type {
   LineItem,
+  PriceRecurring,
+  TInvoiceExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
@@ -271,3 +273,52 @@ export function isEmptyExceptNumber(value: any): boolean {
   }
   return isEmpty(value);
 }
+
+export function getRecurringPeriod(recurring: PriceRecurring) {
+  const { interval } = recurring;
+  const count = +recurring.interval_count || 1;
+  const dayInMs = 24 * 60 * 60 * 1000;
+
+  switch (interval) {
+    case 'hour':
+      return 60 * 60 * 1000;
+    case 'day':
+      return count * dayInMs;
+    case 'week':
+      return count * 7 * dayInMs;
+    case 'month':
+      return count * 30 * dayInMs;
+    case 'year':
+      return count * 365 * dayInMs;
+    default:
+      return 0;
+  }
+}
+
+export function getInvoiceUsageReportStartEnd(invoice: TInvoiceExpanded, showPreviousPeriod: boolean = false) {
+  const { subscription, paymentMethod } = invoice;
+  const usageReportRange = {
+    start: invoice.metadata?.usage_start || invoice.period_start,
+    end: invoice.metadata?.usage_end || invoice.period_end,
+  };
+  if (!subscription || !showPreviousPeriod) {
+    return usageReportRange;
+  }
+  if (invoice?.billing_reason === 'subscription_cancel') {
+    return usageReportRange;
+  }
+  const cycle = getRecurringPeriod(subscription.pending_invoice_item_interval);
+  let offset = 0;
+  if (['arcblock', 'ethereum'].includes(paymentMethod.type)) {
+    switch (invoice?.billing_reason) {
+      case 'subscription_cycle':
+        offset = cycle / 1000;
+        break;
+      default:
+        break;
+    }
+  }
+  usageReportRange.start = invoice.period_start - offset;
+  usageReportRange.end = invoice.period_end - offset;
+  return usageReportRange;
+}

package/src/locales/en.tsx

@@ -500,9 +500,11 @@ export default flat({
       usage: {
         title: 'Usage records',
         current: 'Usage records for current period',
+        range: 'Usage records for {start} - {end}',
         view: 'View usage',
         vary: 'Varies with usage',
         used: 'Unit used',
+        cycle: 'Usage cycle',
       },
       batchPay: {
         button: 'Pay due invoices',

package/src/locales/zh.tsx

@@ -489,9 +489,11 @@ export default flat({
       usage: {
         title: '使用记录',
         current: '当前周期的使用记录',
+        range: '周期使用记录（{start} - {end}）',
         view: '查看使用情况',
         vary: '随使用情况变化',
         used: '已使用单位',
+        cycle: '统计周期',
       },
       batchPay: {
         button: '批量付款',

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

@@ -315,7 +315,7 @@ export default function SubscriptionDetail(props: { id: string }) {
           <Box className="section">
             <SectionHeader title={t('admin.product.pricing')} />
             <Box className="section-body">
-              <SubscriptionItemList data={data.items} currency={data.paymentCurrency} />
+              <SubscriptionItemList data={data.items} currency={data.paymentCurrency} mode="admin" />
             </Box>
           </Box>
           <Divider />

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

@@ -228,20 +228,22 @@ export default function SubscriptionEmbed() {
           </List>
         </Box>
         <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
-          {subscription.service_actions?.map((x) => (
-            // @ts-ignore
-            <Button
-              component={Link}
-              key={x.name}
-              variant={x.variant}
-              color={x.color}
-              href={x.link}
-              size="small"
-              target="_blank"
-              sx={{ textDecoration: 'none !important' }}>
-              {x.text[locale] || x.text.en || x.name}
-            </Button>
-          ))}
+          {subscription.service_actions
+            ?.filter((x: any) => x?.type !== 'notification')
+            ?.map((x) => (
+              // @ts-ignore
+              <Button
+                component={Link}
+                key={x.name}
+                variant={x?.variant || 'contained'}
+                color={x.color || 'primary'}
+                href={x.link}
+                size="small"
+                target="_blank"
+                sx={{ textDecoration: 'none !important' }}>
+                {x.text[locale] || x.text.en || x.name}
+              </Button>
+            ))}
           <Button
             variant="contained"
             sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}