payment-kit 1.18.15 → 1.18.17

package/api/src/routes/donations.ts

@@ -145,7 +145,7 @@ router.get('/', async (req, res) => {
       ],
       order: [['created_at', 'DESC']],
       offset: (page - 1) * pageSize,
-      include: [{ model: Customer, as: 'customer', attributes: ['id', 'did', 'name'] }],
+      include: [{ model: Customer, as: 'customer', attributes: ['id', 'did', 'name', 'metadata'] }],
       limit: pageSize,
     });
 

package/api/src/routes/invoices.ts

@@ -143,7 +143,7 @@ router.get('/', authMine, async (req, res) => {
         { model: PaymentCurrency, as: 'paymentCurrency' },
         { model: PaymentMethod, as: 'paymentMethod' },
         // { model: PaymentIntent, as: 'paymentIntent' },
-        // { model: Subscription, as: 'subscription' },
+        { model: Subscription, as: 'subscription', attributes: ['id', 'description'] },
         { model: Customer, as: 'customer' },
       ],
     });
@@ -180,6 +180,52 @@ router.get('/', authMine, async (req, res) => {
   }
 });
 
+const rechargeSchema = createListParamSchema<{
+  status?: string;
+  customer_id?: string;
+  currency_id?: string;
+}>({
+  status: Joi.string().empty(''),
+  customer_id: Joi.string().empty(''),
+  currency_id: Joi.string().empty(''),
+});
+
+router.get('/recharge', authMine, async (req, res) => {
+  const { page, pageSize, ...query } = await rechargeSchema.validateAsync(req.query, {
+    stripUnknown: false,
+    allowUnknown: true,
+  });
+  const where = getWhereFromKvQuery(query.q);
+  if (query.customer_id) {
+    where.customer_id = query.customer_id;
+  }
+  if (query.currency_id) {
+    where.currency_id = query.currency_id;
+  }
+
+  try {
+    const { rows: invoices, count } = await Invoice.findAndCountAll({
+      where: {
+        billing_reason: 'recharge',
+        paid: true,
+        ...where,
+      },
+      offset: (page - 1) * pageSize,
+      limit: pageSize,
+      order: [['created_at', 'DESC']],
+      include: [
+        { model: PaymentCurrency, as: 'paymentCurrency' },
+        { model: PaymentMethod, as: 'paymentMethod' },
+      ],
+    });
+
+    return res.json({ count, list: invoices, paging: { page, pageSize } });
+  } catch (err) {
+    logger.error(err);
+    return res.status(400).json({ error: err.message });
+  }
+});
+
 const searchSchema = createListParamSchema<{}>({});
 router.get('/search', authMine, async (req, res) => {
   const { page, pageSize, livemode, q, o } = await searchSchema.validateAsync(req.query, {

package/api/src/routes/subscriptions.ts

@@ -1972,9 +1972,6 @@ router.get('/:id/overdue/invoices', authPortal, async (req, res) => {
 });
 
 router.get('/:id/delegation', authPortal, async (req, res) => {
-  if (!req.user) {
-    return res.status(403).json({ error: 'Unauthorized' });
-  }
   try {
     const subscription = (await Subscription.findByPk(req.params.id, {
       include: [

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.18.15
+version: 1.18.17
 logo: logo.png
 files:
   - dist
@@ -48,6 +48,7 @@ interfaces:
             - /methods/**
             - /currencies/**
           blockUnauthorized: false
+    proxyBehavior: service
 community: ''
 documentation: ''
 homepage: ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.15",
+  "version": "1.18.17",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -43,21 +43,21 @@
     ]
   },
   "dependencies": {
-    "@abtnode/cron": "^1.16.39",
+    "@abtnode/cron": "^1.16.40",
     "@arcblock/did": "^1.19.15",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.12.12",
+    "@arcblock/did-connect": "^2.12.25",
     "@arcblock/did-util": "^1.19.15",
     "@arcblock/jwt": "^1.19.15",
-    "@arcblock/ux": "^2.12.12",
+    "@arcblock/ux": "^2.12.25",
     "@arcblock/validator": "^1.19.15",
-    "@blocklet/js-sdk": "^1.16.39",
-    "@blocklet/logger": "^1.16.39",
-    "@blocklet/payment-react": "1.18.15",
-    "@blocklet/sdk": "^1.16.39",
-    "@blocklet/ui-react": "^2.12.12",
-    "@blocklet/uploader": "^0.1.71",
-    "@blocklet/xss": "^0.1.27",
+    "@blocklet/js-sdk": "^1.16.40",
+    "@blocklet/logger": "^1.16.40",
+    "@blocklet/payment-react": "1.18.17",
+    "@blocklet/sdk": "^1.16.40",
+    "@blocklet/ui-react": "^2.12.25",
+    "@blocklet/uploader": "^0.1.76",
+    "@blocklet/xss": "^0.1.28",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
@@ -89,7 +89,7 @@
     "google-libphonenumber": "^3.2.38",
     "html2canvas": "^1.4.1",
     "iframe-resizer-react": "^1.1.1",
-    "joi": "^17.13.3",
+    "joi": "^17.12.2",
     "json-stable-stringify": "^1.1.1",
     "jspdf": "^2.5.2",
     "lodash": "^4.17.21",
@@ -119,9 +119,9 @@
     "web3": "^4.16.0"
   },
   "devDependencies": {
-    "@abtnode/types": "^1.16.39",
+    "@abtnode/types": "^1.16.40",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.15",
+    "@blocklet/payment-types": "1.18.17",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -151,7 +151,7 @@
     "vite": "^5.3.5",
     "vite-node": "^2.0.4",
     "vite-plugin-babel-import": "^2.0.5",
-    "vite-plugin-blocklet": "^0.9.23",
+    "vite-plugin-blocklet": "^0.9.25",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",
@@ -167,5 +167,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "fd58f00bb5d9c625439c03577d9b5f33676823e2"
+  "gitHead": "9d43381dd3744506455547260f5e621c6ad88e8f"
 }

package/src/app.tsx

@@ -28,9 +28,10 @@ const CustomerSubscriptionDetail = React.lazy(() => import('./pages/customer/sub
 const CustomerSubscriptionEmbed = React.lazy(() => import('./pages/customer/subscription/embed'));
 const CustomerSubscriptionChangePlan = React.lazy(() => import('./pages/customer/subscription/change-plan'));
 const CustomerSubscriptionChangePayment = React.lazy(() => import('./pages/customer/subscription/change-payment'));
-const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge'));
+const CustomerRecharge = React.lazy(() => import('./pages/customer/recharge/subscription'));
 const CustomerPayoutDetail = React.lazy(() => import('./pages/customer/payout/detail'));
 const IntegrationsPage = React.lazy(() => import('./pages/integrations'));
+const CustomerBalanceRecharge = React.lazy(() => import('./pages/customer/recharge/account'));
 
 // const theme = createTheme({
 //   typography: {
@@ -108,14 +109,21 @@ function App() {
                   </UserLayout>
                 }
               />
+              <Route
+                key="customer-balance-recharge"
+                path="/customer/recharge/:currencyId"
+                element={
+                  <UserLayout>
+                    <CustomerBalanceRecharge />
+                  </UserLayout>
+                }
+              />
               <Route key="customer-embed" path="/customer/embed/subscription" element={<CustomerSubscriptionEmbed />} />
-              ,
               <Route
                 key="subscription-embed"
                 path="/embed/customer/subscription"
                 element={<CustomerSubscriptionEmbed />}
               />
-              ,
               <Route
                 key="customer-due"
                 path="/customer/invoice/past-due"

package/src/components/info-card.tsx

@@ -9,15 +9,17 @@ type Props = {
   size?: number;
   variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
   sx?: SxProps;
+  className?: string;
+  logoName?: string;
 };
 
 export default function InfoCard(props: Props) {
   const dimensions = { width: props.size, height: props.size, ...props.sx };
   const avatarName = typeof props.name === 'string' ? props.name : props.logo;
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Stack direction="row" alignItems="center" spacing={1} className={`info-card-wrapper ${props.className}`}>
       {props.logo ? (
-        <Avatar src={props.logo} alt={avatarName} variant={props.variant as any} sx={dimensions} />
+        <Avatar src={props.logo} alt={props.logoName ?? avatarName} variant={props.variant as any} sx={dimensions} />
       ) : (
         <Avatar variant={props.variant as any} sx={dimensions}>
           {avatarName?.slice(0, 1)}
@@ -45,4 +47,6 @@ InfoCard.defaultProps = {
   size: 40,
   variant: 'rounded',
   sx: {},
+  className: '',
+  logoName: '',
 };

package/src/components/info-row.tsx

@@ -45,6 +45,7 @@ export default function InfoRow(props: Props) {
       {props.showLabel && (
         <Box
           flex={sizes[0]}
+          className="info-row-label"
           color="text.primary"
           fontWeight={500}
           fontSize={14}

package/src/components/invoice/recharge.tsx

@@ -7,7 +7,6 @@ import {
   getInvoiceStatusColor,
   Table,
   useDefaultPageSize,
-  getInvoiceDescriptionAndReason,
   getTxLink,
   formatToDate,
 } from '@blocklet/payment-react';
@@ -19,9 +18,12 @@ import { styled } from '@mui/system';
 
 const fetchData = (
   subscriptionId: string,
+  currencyId: string,
   params: Record<string, any> = {}
 ): Promise<{ list: TInvoiceExpanded[]; count: number }> => {
   const search = new URLSearchParams();
+
+  // 处理通用查询参数
   Object.keys(params).forEach((key) => {
     let v = params[key];
     if (key === 'q') {
@@ -32,7 +34,16 @@ const fetchData = (
     search.set(key, String(v));
   });
 
-  return api.get(`/api/subscriptions/${subscriptionId}/recharge?${search.toString()}`).then((res) => res.data);
+  if (subscriptionId) {
+    return api.get(`/api/subscriptions/${subscriptionId}/recharge?${search.toString()}`).then((res) => res.data);
+  }
+
+  if (currencyId) {
+    search.set('currency_id', currencyId);
+    return api.get(`/api/invoices/recharge?${search.toString()}`).then((res) => res.data);
+  }
+
+  return Promise.resolve({ list: [], count: 0 });
 };
 
 type SearchProps = {
@@ -60,6 +71,9 @@ const getListKey = (props: ListProps) => {
   if (props.subscription_id) {
     return `subscription-recharge-${props.subscription_id}`;
   }
+  if (props.currency_id) {
+    return `currency-recharge-${props.currency_id}`;
+  }
   return 'invoices';
 };
 
@@ -80,27 +94,32 @@ export default function RechargeList({ currency_id, subscription_id, features }:
   const [search, setSearch] = useLocalStorageState<SearchProps>(listKey, {
     defaultValue: {
       currency_id,
+      subscription_id,
       pageSize: defaultPageSize,
       page: 1,
     },
   });
 
-  const [data, setData] = useState({}) as any;
+  const [data, setData] = useState<{ list?: TInvoiceExpanded[]; count?: number }>({});
+  const [loading, setLoading] = useState(true);
 
-  const refresh = () =>
-    fetchData(subscription_id!, {
-      ...search,
-    }).then((res: any) => {
+  const refresh = async () => {
+    setLoading(true);
+    try {
+      const res = await fetchData(subscription_id || '', currency_id || '', {
+        ...search,
+      });
       setData(res);
-    });
+    } catch (error) {
+      console.error('Failed to fetch recharge records:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
     refresh();
-  }, [search]);
-
-  if (!data.list) {
-    return <CircularProgress />;
-  }
+  }, [search, currency_id, subscription_id]);
 
   const getInvoiceLink = (invoice: TInvoiceExpanded) => {
     return {
@@ -118,7 +137,9 @@ export default function RechargeList({ currency_id, subscription_id, features }:
       align: 'right',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
+          const invoice = data?.list?.[index] as TInvoiceExpanded;
+          if (!invoice) return null;
+
           const link = getInvoiceLink(invoice);
           return (
             <a href={link.url} target="_blank" rel="noreferrer">
@@ -136,7 +157,9 @@ export default function RechargeList({ currency_id, subscription_id, features }:
       name: 'number',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
+          const invoice = data?.list?.[index] as TInvoiceExpanded;
+          if (!invoice) return null;
+
           const link = getInvoiceLink(invoice);
           return (
             <a href={link.url} target="_blank" rel="noreferrer">
@@ -148,10 +171,12 @@ export default function RechargeList({ currency_id, subscription_id, features }:
     },
     {
       label: t('common.rechargeTime'),
-      name: 'name',
+      name: 'created_at',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
+          const invoice = data?.list?.[index] as TInvoiceExpanded;
+          if (!invoice) return null;
+
           const link = getInvoiceLink(invoice);
           return (
             <a href={link.url} target="_blank" rel="noreferrer">
@@ -161,28 +186,14 @@ export default function RechargeList({ currency_id, subscription_id, features }:
         },
       },
     },
-    {
-      label: t('common.description'),
-      name: '',
-      options: {
-        sort: false,
-        customBodyRenderLite: (_: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice);
-          return (
-            <a href={link.url} target="_blank" rel="noreferrer">
-              {getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id}
-            </a>
-          );
-        },
-      },
-    },
     {
       label: t('common.status'),
       name: 'status',
       options: {
         customBodyRenderLite: (_: string, index: number) => {
-          const invoice = data?.list[index] as TInvoiceExpanded;
+          const invoice = data?.list?.[index] as TInvoiceExpanded;
+          if (!invoice) return null;
+
           const link = getInvoiceLink(invoice);
           return (
             <a href={link.url} target="_blank" rel="noreferrer">
@@ -196,34 +207,52 @@ export default function RechargeList({ currency_id, subscription_id, features }:
 
   const onTableChange = ({ page, rowsPerPage }: any) => {
     if (search!.pageSize !== rowsPerPage) {
-      setSearch((x) => ({ ...x, pageSize: rowsPerPage, page: 1 }));
+      setSearch((x) => {
+        const newState = { ...x };
+        if (newState) {
+          newState.pageSize = rowsPerPage;
+          newState.page = 1;
+        }
+        return newState as SearchProps;
+      });
     } else if (search!.page !== page + 1) {
-      // @ts-ignore
-      setSearch((x) => ({ ...x, page: page + 1 }));
+      setSearch((x) => {
+        const newState = { ...x };
+        if (newState) {
+          newState.page = page + 1;
+        }
+        return newState as SearchProps;
+      });
     }
   };
 
   return (
     <InvoiceTableRoot>
-      <Table
-        hasRowLink
-        data={data.list}
-        durable={`__${listKey}__`}
-        durableKeys={['searchText']}
-        columns={columns}
-        loading={!data.list}
-        onChange={onTableChange}
-        mobileTDFlexDirection="row"
-        options={{
-          count: data.count,
-          page: search!.page - 1,
-          rowsPerPage: search!.pageSize,
-        }}
-        toolbar={false}
-        showMobile={false}
-        footer={features?.footer}
-        emptyNodeText={`${t('empty.invoices')}`}
-      />
+      {loading ? (
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
+          <CircularProgress />
+        </Box>
+      ) : (
+        <Table
+          hasRowLink
+          data={data.list || []}
+          durable={`__${listKey}__`}
+          durableKeys={['searchText']}
+          columns={columns}
+          loading={loading}
+          onChange={onTableChange}
+          mobileTDFlexDirection="row"
+          options={{
+            count: data.count || 0,
+            page: search!.page - 1,
+            rowsPerPage: search!.pageSize,
+          }}
+          toolbar={false}
+          showMobile={false}
+          footer={features?.footer}
+          emptyNodeText={`${t('empty.invoices')}`}
+        />
+      )}
     </InvoiceTableRoot>
   );
 }

package/src/components/invoice/table.tsx

@@ -196,6 +196,12 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
       name: 'amount',
       width: 200,
       align: 'right',
+      options: {
+        customBodyRenderLite: (_: string, index: number) => {
+          const item = detail[index] as InvoiceDetailItem;
+          return <Typography component="span">{invoice.status === 'void' ? '0' : item.amount}</Typography>;
+        },
+      },
     },
     ...(simple
       ? []
@@ -237,7 +243,7 @@ export default function InvoiceTable({ invoice, simple, emptyNodeText }: Props)
         mobileTDFlexDirection="row"
         emptyNodeText={emptyNodeText || t('payment.customer.invoice.emptyList')}
       />
-      {!isEmpty(detail) && (
+      {!isEmpty(detail) && invoice.status !== 'void' && (
         <Stack
           className="invoice-summary"
           sx={{

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

@@ -521,7 +521,7 @@ export function SubscriptionActionsInner({
             setState({ batchPay: false });
             onChange?.('batch-pay');
           }}
-          inSubscriptionDetail
+          detailLinkOptions={{ enabled: false }}
           dialogProps={{
             open: state.batchPay,
             onClose: () => setState({ batchPay: false }),

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

@@ -36,6 +36,7 @@ type Props = {
   onlyActive?: boolean;
   changeActive?: (active: boolean) => void;
   setStatusState?: (state: boolean) => void;
+  setHasSubscriptions?: (state: boolean) => void;
 } & Omit<StackProps, 'onChange'>;
 
 const pageSize = 5;
@@ -48,6 +49,7 @@ export default function CurrentSubscriptions({
   onlyActive,
   changeActive = () => {},
   setStatusState = () => {},
+  setHasSubscriptions = () => {},
   ...rest
 }: Props) {
   const { t } = useLocaleContext();
@@ -64,6 +66,9 @@ export default function CurrentSubscriptions({
       onSuccess(res) {
         if (res.totalCount > 0 || res.count > 0) {
           setStatusState(true);
+          setHasSubscriptions(true);
+        } else {
+          setHasSubscriptions(false);
         }
       },
       ...(isMobile
@@ -279,4 +284,5 @@ CurrentSubscriptions.defaultProps = {
   onlyActive: false,
   changeActive: null,
   setStatusState: null,
+  setHasSubscriptions: null,
 };

package/src/locales/en.tsx

@@ -796,6 +796,8 @@ export default flat({
       estimatedDuration: '{duration} {unit} est.',
       intervals: 'intervals',
       history: 'Fund History',
+      relatedSubscriptions: 'Related Subscriptions',
+      rechargeTooltip: 'Click to add funds',
     },
     delegation: {
       title:
@@ -855,6 +857,13 @@ export default flat({
       viewReference: 'View Reference',
       title: 'Revenue',
     },
+    pastDue: {
+      warning: 'You have due invoices, please pay them to keep your services active',
+      invoices: 'Due Invoices',
+      payNow: 'Pay Now',
+      alert: 'You have due invoices. Please pay them promptly to avoid service interruption.',
+      title: 'Settle Due Invoices',
+    },
   },
   integrations: {
     basicFeatures: 'Basic Features',

package/src/locales/zh.tsx

@@ -774,6 +774,8 @@ export default flat({
       custom: '自定义',
       intervals: '个周期',
       history: '充值记录',
+      relatedSubscriptions: '关联订阅',
+      rechargeTooltip: '点击充值余额',
     },
     delegation: {
       title: '检测到你未完成账户的授权,为了不影响订阅的扣费，请尽快完成授权',
@@ -828,6 +830,13 @@ export default flat({
       viewReference: '查看打赏原文',
       title: '收款记录',
     },
+    pastDue: {
+      warning: '您有欠费账单，请及时付款以保持服务正常运行',
+      invoices: '欠费账单',
+      payNow: '立即付款',
+      alert: '您有欠费账单需要处理，请及时付款以避免服务中断',
+      title: '结清欠费账单',
+    },
   },
   integrations: {
     basicFeatures: '基础功能',

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

@@ -112,6 +112,8 @@ export default function PayoutDetail(props: { id: string }) {
     return data.destination;
   };
 
+  const isAnonymousPayer = paymentIntent?.customer?.metadata?.anonymous;
+
   return (
     <Root direction="column" spacing={2.5} mb={4}>
       <Box>
@@ -206,23 +208,32 @@ export default function PayoutDetail(props: { id: string }) {
                         : '',
                       48
                     )}
+                    logoName={paymentIntent?.customer?.metadata?.anonymous ? '' : paymentIntent?.customer?.name}
                     name={
                       <Typography
                         variant="subtitle2"
                         sx={{
-                          cursor: 'pointer',
-                          '&:hover': {
-                            color: 'text.link',
-                          },
+                          ...(isAnonymousPayer
+                            ? {}
+                            : {
+                                cursor: 'pointer',
+                                '&:hover': {
+                                  color: 'text.link',
+                                },
+                              }),
                         }}
                         onClick={() => {
+                          if (isAnonymousPayer) {
+                            return;
+                          }
                           const url = getCustomerProfileUrl({
                             userDid: paymentIntent?.customer?.did,
                             locale: 'zh',
                           });
                           window.open(url, '_blank');
                         }}>
-                        {paymentIntent?.customer?.name} ({paymentIntent?.customer?.email})
+                        {paymentIntent?.customer?.name}
+                        {paymentIntent?.customer?.email ? ` (${paymentIntent?.customer?.email})` : ''}
                       </Typography>
                     }
                     description={