payment-kit 1.13.150 → 1.13.152

package/src/components/refund/list.tsx

@@ -27,6 +27,7 @@ type SearchProps = {
   page: number;
   customer_id?: string;
   invoice_id?: string;
+  subscription_id?: string;
 };
 
 type ListProps = {
@@ -37,6 +38,7 @@ type ListProps = {
   };
   customer_id?: string;
   invoice_id?: string;
+  subscription_id?: string;
 };
 
 const getListKey = (props: ListProps) => {
@@ -50,16 +52,17 @@ const getListKey = (props: ListProps) => {
   return 'refunds';
 };
 
-PaymentList.defaultProps = {
+RefundList.defaultProps = {
   features: {
     customer: true,
     filter: true,
   },
   customer_id: '',
   invoice_id: '',
+  subscription_id: '',
 };
 
-export default function PaymentList({ customer_id, invoice_id, features }: ListProps) {
+export default function RefundList({ customer_id, invoice_id, subscription_id, features }: ListProps) {
   const { t } = useLocaleContext();
   const navigate = useNavigate();
 
@@ -70,6 +73,7 @@ export default function PaymentList({ customer_id, invoice_id, features }: ListP
     status: '',
     customer_id,
     invoice_id,
+    subscription_id,
     pageSize: persisted.rowsPerPage || 20,
     page: persisted.page ? persisted.page + 1 : 1,
   });

package/src/components/section/header.tsx

@@ -5,6 +5,7 @@ type Props = {
   title: string;
   children?: ReactNode;
   mb?: number;
+  mt?: number;
 };
 
 export default function SectionHeader(props: Props) {
@@ -16,7 +17,7 @@ export default function SectionHeader(props: Props) {
       alignItems="center"
       flexWrap="wrap"
       gap={1}
-      sx={{ mb: props.mb, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
+      sx={{ mb: props.mb, mt: props.mt, pb: 1, width: 1, borderBottom: '1px solid #eee' }}>
       <Typography variant="h6" sx={{ fontWeight: 600 }}>
         {props.title}
       </Typography>
@@ -28,4 +29,5 @@ export default function SectionHeader(props: Props) {
 SectionHeader.defaultProps = {
   children: null,
   mb: 1,
+  mt: 1,
 };

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

@@ -48,7 +48,7 @@ export function UsageRecordDialog(props: { subscriptionId: string; id: string; o
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TUsageRecord;
-          return formatToDatetime(item.timestamp);
+          return formatToDatetime(item.timestamp * 1000);
         },
       },
     },

package/src/global.css

@@ -10,7 +10,6 @@ a {
   color: rgba(0, 0, 0, 0.87);
 }
 a:hover {
-  color: rgba(0, 0, 0, 0.87);
   text-decoration: underline;
 }
 

package/src/locales/en.tsx

@@ -2,78 +2,7 @@ import flat from 'flat';
 
 export default flat({
   common: {
-    id: 'ID',
-    url: 'URL',
-    createdAt: 'Created At',
-    updatedAt: 'Updated At',
-    resumesAt: 'Resume At',
-    actions: 'Actions',
-    options: 'Options',
-    advanced: 'Advanced options',
-    login: 'Login to access this page',
-    settings: 'Settings',
-    preview: 'Preview',
-    required: 'Required',
-    setup: 'Setup',
-    name: 'Name',
-    amount: 'Amount',
-    total: 'Total',
-    subtotal: 'Subtotal',
-    status: 'Status',
-    livemode: 'Test mode',
-    afterTime: 'After {time}',
-    timeAgo: '{time} ago',
-    save: 'Save',
-    saved: 'Changes saved',
-    remove: 'Remove',
-    removed: 'Resource removed',
-    confirm: 'Confirm',
-    cancel: 'Cancel',
-    every: 'every',
-    per: 'per {interval}',
-    slash: '/ {interval}',
-    unit: 'units',
-    edit: 'Edit',
-    quantity: 'Quantity',
-    yes: 'Yes',
-    no: 'No',
-    email: 'Email',
-    did: 'DID',
-    txHash: 'Transaction',
-    customer: 'Customer',
-    custom: 'Custom',
-    description: 'Description',
-    statementDescriptor: 'Statement descriptor',
-    loadMore: 'View more {resource}',
-    loadingMore: 'Loading more {resource}...',
-    noMore: 'No more {resource}',
-    copied: 'Copied',
-    previous: 'Back',
-    continue: 'Continue',
-    qty: 'Qty {count}',
-    each: '{unit} each',
-    trial: 'Free for {count} days',
-    billed: 'billed {rule}',
-    metered: 'based on usage',
-    hour: 'hour',
-    day: 'day',
-    week: 'week',
-    month: 'month',
-    year: 'year',
-    hourly: 'hourly',
-    daily: 'daily',
-    weekly: 'weekly',
-    monthly: 'monthly',
-    yearly: 'yearly',
-    month3: 'every 3 months',
-    month6: 'every 6 months',
-    recurring: 'every {count} {interval}',
     redirecting: 'Redirecting...',
-    hours: 'hours',
-    days: 'days',
-    weeks: 'weeks',
-    months: 'months',
-    years: 'years',
     metadata: {
       label: 'Metadata',
       add: 'Add more metadata',
@@ -306,6 +235,7 @@ export default flat({
       view: 'View payment detail',
       empty: 'No payment intent',
       refund: 'Refund payment',
+      received: 'Received',
     },
     paymentMethod: {
       _name: 'Payment Method',
@@ -462,6 +392,7 @@ export default flat({
       spent: 'Spent Amount',
       refund: 'Refund Amount',
       dispute: 'Dispute Amount',
+      due: 'Due Amount',
       name: 'Name',
       email: 'Email',
       phone: 'Phone',

package/src/locales/zh.tsx

@@ -2,78 +2,7 @@ import flat from 'flat';
 
 export default flat({
   common: {
-    id: 'ID',
-    url: 'URL',
-    createdAt: '创建时间',
-    updatedAt: '更新时间',
-    resumesAt: '恢复时间',
-    actions: '操作',
-    options: '选项',
-    advanced: '高级选项',
-    settings: '设置',
-    preview: '预览',
-    required: '必填',
-    setup: '设置',
-    name: '姓名',
-    login: '登录以访问此页面',
-    amount: '金额',
-    total: '总计',
-    subtotal: '小计',
-    status: '状态',
-    livemode: '测试模式',
-    afterTime: '在{time}后',
-    timeAgo: '{time}前',
-    save: '保存',
-    saved: '更改已保存',
-    remove: '删除',
-    removed: '资源已删除',
-    confirm: '确认',
-    cancel: '取消',
-    every: '每',
-    per: '每{interval}',
-    slash: '每{interval}',
-    unit: '件',
-    edit: '编辑',
-    quantity: '数量',
-    yes: '是',
-    no: '否',
-    email: '邮箱',
-    did: 'DID',
-    txHash: '交易哈希',
-    customer: '客户',
-    custom: '自定义',
-    description: '描述',
-    statementDescriptor: '声明描述',
-    loadMore: '查看更多{resource}',
-    loadingMore: '正在加载更多{resource}...',
-    noMore: '没有更多{resource}',
-    copied: '已复制',
-    previous: '返回',
-    continue: '继续',
-    qty: '{count} 件',
-    each: '每件 {unit}',
-    trial: '免费试用 {count} 天',
-    billed: '{rule}收费',
-    metered: '按用量',
-    hour: '小时',
-    day: '天',
-    week: '周',
-    month: '月',
-    year: '年',
-    hourly: '按小时',
-    daily: '按天',
-    weekly: '按周',
-    monthly: '按月',
-    yearly: '按年',
-    month3: '按季度',
-    month6: '按半年',
-    recurring: '每{count}{interval}',
     redirecting: '跳转中...',
-    hours: '小时',
-    days: '天',
-    weeks: '周',
-    months: '月',
-    years: '年',
     metadata: {
       label: '元数据',
       add: '添加更多元数据',
@@ -298,6 +227,7 @@ export default flat({
       view: '查看支付详情',
       empty: '没有支付意向',
       refund: '退款支付',
+      received: '实收金额',
     },
     paymentMethod: {
       _name: '支付方式',
@@ -453,6 +383,7 @@ export default flat({
       spent: '花费金额',
       refund: '退款金额',
       dispute: '争议金额',
+      due: '欠款金额',
       name: '名称',
       email: '电子邮件',
       phone: '电话',

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

@@ -20,6 +20,7 @@ import InvoiceActions from '../../../../components/invoice/action';
 import InvoiceTable from '../../../../components/invoice/table';
 import MetadataEditor from '../../../../components/metadata/editor';
 import PaymentList from '../../../../components/payment-intent/list';
+import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 
 const fetchData = (id: string): Promise<TInvoiceExpanded> => {
@@ -145,6 +146,12 @@ export default function InvoiceDetail(props: { id: string }) {
           <PaymentList features={{ customer: false, toolbar: false }} invoice_id={data.id} />
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} />
+        <Box className="section-body">
+          <RefundList features={{ customer: false, toolbar: false }} invoice_id={data.id} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.connections')} />
         <Stack>

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

@@ -16,6 +16,7 @@ import EventList from '../../../../components/event/list';
 import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
+import RefundList from '../../../../components/refund/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
@@ -205,6 +206,12 @@ export default function SubscriptionDetail(props: { id: string }) {
           <InvoiceList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
         </Box>
       </Box>
+      <Box className="section">
+        <SectionHeader title={t('admin.refunds')} mb={0} />
+        <Box className="section-body">
+          <RefundList features={{ customer: true, toolbar: false }} subscription_id={data.id} />
+        </Box>
+      </Box>
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">

package/src/pages/admin/customers/customers/detail.tsx

@@ -3,7 +3,7 @@ import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import { api, formatError, formatTime, usePaymentContext } from '@blocklet/payment-react';
-import type { TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
+import type { GroupedBN, TCustomerExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { ArrowBackOutlined, Edit } from '@mui/icons-material';
 import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/system';
@@ -13,6 +13,7 @@ import { isEmpty } from 'lodash';
 import { FlagEmoji } from 'react-international-phone';
 import { Link, useNavigate } from 'react-router-dom';
 
+import BalanceList from '../../../../components/balance-list';
 import Copyable from '../../../../components/copyable';
 import CustomerActions from '../../../../components/customer/actions';
 import EditCustomer from '../../../../components/customer/edit';
@@ -25,8 +26,18 @@ import PaymentList from '../../../../components/payment-intent/list';
 import SectionHeader from '../../../../components/section/header';
 import SubscriptionList from '../../../../components/subscription/list';
 
-const fetchData = (id: string): Promise<TCustomerExpanded> => {
-  return api.get(`/api/customers/${id}`).then((res) => res.data);
+const fetchData = async (
+  id: string
+): Promise<{ customer: TCustomerExpanded; summary: { [key: string]: GroupedBN } }> => {
+  const results = await Promise.all([
+    api.get(`/api/customers/${id}`).then((res) => res.data),
+    api.get(`/api/customers/${id}/summary`).then((res) => res.data),
+  ]);
+
+  return {
+    customer: results[0],
+    summary: results[1],
+  };
 };
 
 function getTokenBalances(customer: TCustomerExpanded, paymentMethods: TPaymentMethodExpanded[]) {
@@ -123,7 +134,7 @@ export default function CustomerDetail(props: { id: string }) {
     }
   };
 
-  const tokenBalances = getTokenBalances(data, settings.paymentMethods);
+  const tokenBalances = getTokenBalances(data.customer, settings.paymentMethods);
 
   return (
     <Root direction="column" spacing={4} sx={{ mb: 4 }}>
@@ -142,9 +153,9 @@ export default function CustomerDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Typography variant="h5" sx={{ fontWeight: 600 }}>
-              {data.name}
+              {data.customer.name}
             </Typography>
-            <CustomerActions data={data} onChange={onChange} variant="normal" />
+            <CustomerActions data={data.customer} onChange={onChange} variant="normal" />
           </Stack>
           <Stack
             className="section-body"
@@ -153,9 +164,15 @@ export default function CustomerDetail(props: { id: string }) {
             justifyContent="flex-start"
             flexWrap="wrap"
             sx={{ pt: 2, mt: 2, borderTop: '1px solid #eee' }}>
-            <InfoMetric label={t('common.createdAt')} value={formatTime(data.created_at)} divider />
-            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.updated_at)} divider />
-            <InfoMetric label={t('admin.customer.spent')} value={0} divider />
+            <InfoMetric label={t('common.createdAt')} value={formatTime(data.customer.created_at)} divider />
+            <InfoMetric label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} divider />
+            <InfoMetric label={t('admin.customer.spent')} value={<BalanceList data={data.summary.paid} />} divider />
+            <InfoMetric
+              label={t('admin.customer.refund')}
+              value={<BalanceList data={data.summary.refunded} />}
+              divider
+            />
+            <InfoMetric label={t('admin.customer.due')} value={<BalanceList data={data.summary.due} />} divider />
             {tokenBalances.map((x) => (
               <InfoMetric
                 key={x.currency}
@@ -181,13 +198,13 @@ export default function CustomerDetail(props: { id: string }) {
           </Button>
         </SectionHeader>
         <Stack>
-          <InfoRow label={t('common.did')} value={<DidAddress did={data.did} />} />
-          <InfoRow label={t('admin.customer.name')} value={data.name} />
-          <InfoRow label={t('admin.customer.phone')} value={data.phone} />
-          <InfoRow label={t('admin.customer.email')} value={data.email} />
-          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.invoice_prefix} />
-          <InfoRow label={t('common.createdAt')} value={formatTime(data.created_at)} />
-          <InfoRow label={t('common.updatedAt')} value={formatTime(data.updated_at)} />
+          <InfoRow label={t('common.did')} value={<DidAddress did={data.customer.did} />} />
+          <InfoRow label={t('admin.customer.name')} value={data.customer.name} />
+          <InfoRow label={t('admin.customer.phone')} value={data.customer.phone} />
+          <InfoRow label={t('admin.customer.email')} value={data.customer.email} />
+          <InfoRow label={t('admin.customer.invoicePrefix')} value={data.customer.invoice_prefix} />
+          <InfoRow label={t('common.createdAt')} value={formatTime(data.customer.created_at)} />
+          <InfoRow label={t('common.updatedAt')} value={formatTime(data.customer.updated_at)} />
           <InfoRow
             alignItems="flex-start"
             label={t('admin.customer.address.label')}
@@ -196,24 +213,24 @@ export default function CustomerDetail(props: { id: string }) {
                 <InfoRow
                   label={t('admin.customer.address.country')}
                   value={
-                    data.address?.country ? (
-                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                    data.customer.address?.country ? (
+                      <FlagEmoji iso2={data.customer.address?.country} style={{ display: 'flex', width: 24 }} />
                     ) : (
                       ''
                     )
                   }
                 />
-                <InfoRow label={t('admin.customer.address.state')} value={data.address?.state} />
-                <InfoRow label={t('admin.customer.address.city')} value={data.address?.city} />
-                <InfoRow label={t('admin.customer.address.line1')} value={data.address?.line1} />
-                <InfoRow label={t('admin.customer.address.line2')} value={data.address?.line2} />
-                <InfoRow label={t('admin.customer.address.postal_code')} value={data.address?.postal_code} />
+                <InfoRow label={t('admin.customer.address.state')} value={data.customer.address?.state} />
+                <InfoRow label={t('admin.customer.address.city')} value={data.customer.address?.city} />
+                <InfoRow label={t('admin.customer.address.line1')} value={data.customer.address?.line1} />
+                <InfoRow label={t('admin.customer.address.line2')} value={data.customer.address?.line2} />
+                <InfoRow label={t('admin.customer.address.postal_code')} value={data.customer.address?.postal_code} />
               </Stack>
             }
           />
           {state.editing.customer && (
             <EditCustomer
-              data={data}
+              data={data.customer}
               loading={state.loading.customer}
               onSave={onUpdateInfo}
               onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
@@ -224,19 +241,19 @@ export default function CustomerDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.subscriptions')} mb={0} />
         <Box className="section-body">
-          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <SubscriptionList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
         <SectionHeader title={t('admin.payments')} mb={0} />
         <Box className="section-body">
-          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <PaymentList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
         <SectionHeader title={t('admin.invoices')} mb={0} />
         <Box className="section-body">
-          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.id} />
+          <InvoiceList features={{ customer: false, toolbar: false }} customer_id={data.customer.id} />
         </Box>
       </Box>
       <Box className="section">
@@ -253,16 +270,16 @@ export default function CustomerDetail(props: { id: string }) {
         </SectionHeader>
         <Box className="section-body">
           {!state.editing.metadata &&
-            (isEmpty(data.metadata) ? (
+            (isEmpty(data.customer.metadata) ? (
               <Typography color="text.secondary">{t('common.metadata.empty')}</Typography>
             ) : (
-              Object.keys(data.metadata || {}).map((key) => (
-                <InfoRow key={key} label={key} value={data.metadata[key]} />
+              Object.keys(data.customer.metadata || {}).map((key) => (
+                <InfoRow key={key} label={key} value={data.customer.metadata[key]} />
               ))
             ))}
           {state.editing.metadata && (
             <MetadataEditor
-              data={data}
+              data={data.customer}
               loading={state.loading.metadata}
               onSave={onUpdateMetadata}
               onCancel={() => setState((prev) => ({ editing: { ...prev.editing, metadata: false } }))}
@@ -273,7 +290,7 @@ export default function CustomerDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.id} />
+          <EventList features={{ toolbar: false }} object_id={data.customer.id} />
         </Box>
       </Box>
     </Root>

package/src/pages/admin/index.tsx

@@ -1,7 +1,7 @@
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import { PaymentProvider, Switch, usePaymentContext } from '@blocklet/payment-react';
 import { Box, Chip, Stack } from '@mui/material';
-import React, { isValidElement, startTransition } from 'react';
+import React, { Suspense, isValidElement, startTransition } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import Layout from '../../components/layout/admin';
@@ -99,7 +99,9 @@ function Admin() {
           </label>
         </Stack>
       </Stack>
-      <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
+      <Suspense fallback={<div />}>
+        <div className="page-content">{isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
+      </Suspense>
     </Layout>
   );
 }

package/src/pages/admin/payments/intents/detail.tsx

@@ -77,7 +77,8 @@ export default function PaymentIntentDetail(props: { id: string }) {
   const onUpdateMetadata = createUpdater('metadata');
 
   const currency = data.paymentCurrency;
-  const amount = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
+  const received = [fromUnitToToken(data?.amount_received, currency.decimal), currency.symbol].join(' ');
+  const total = [fromUnitToToken(data?.amount, currency.decimal), currency.symbol].join(' ');
 
   return (
     <Root direction="column" spacing={4} mb={4}>
@@ -96,7 +97,7 @@ export default function PaymentIntentDetail(props: { id: string }) {
         <Box mt={2}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack direction="row" alignItems="center">
-              <Amount amount={amount} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
+              <Amount amount={received} sx={{ my: 0, fontSize: '2rem', lineHeight: '1rem' }} />
               <Status label={data.status} color={getPaymentIntentStatusColor(data.status)} sx={{ ml: 2 }} />
             </Stack>
             <PaymentIntentActions data={data} variant="normal" />
@@ -117,7 +118,8 @@ export default function PaymentIntentDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.details')} />
         <Stack>
-          <InfoRow label={t('common.amount')} value={amount} />
+          <InfoRow label={t('common.amount')} value={total} />
+          <InfoRow label={t('admin.paymentIntent.received')} value={received} />
           <InfoRow
             label={t('common.status')}
             value={
@@ -191,16 +193,18 @@ export default function PaymentIntentDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.connections')} />
         <Stack>
-          <InfoRow
-            label={t('admin.subscription.name')}
-            value={
-              data.subscription ? <Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link> : ''
-            }
-          />
-          <InfoRow
-            label={t('admin.invoice.name')}
-            value={data.invoice_id ? <Link to={`/admin/billing/${data.invoice_id}`}>{data.invoice_id}</Link> : ''}
-          />
+          {data.subscription && (
+            <InfoRow
+              label={t('admin.subscription.name')}
+              value={<Link to={`/admin/billing/${data.subscription.id}`}>{data.subscription.id}</Link>}
+            />
+          )}
+          {data.invoice_id && (
+            <InfoRow
+              label={t('admin.invoice.name')}
+              value={<Link to={`/admin/billing/${data.invoice_id}`}>{data.invoice_id}</Link>}
+            />
+          )}
         </Stack>
       </Box>
       <Box className="section">

package/src/pages/admin/payments/links/create.tsx

@@ -52,7 +52,7 @@ export default function CreatePaymentLink() {
         terms_of_service: 'none',
       },
       invoice_creation: {
-        enabled: false,
+        enabled: true,
       },
       phone_number_collection: {
         enabled: false,