payment-kit 1.18.14 → 1.18.16

package/api/src/routes/customers.ts

@@ -4,14 +4,26 @@ import Joi from 'joi';
 import pick from 'lodash/pick';
 import isEmail from 'validator/es/lib/isEmail';
 
-import { getStakeSummaryByDid, getTokenSummaryByDid } from '../integrations/arcblock/stake';
+import { Op } from 'sequelize';
+import { BN } from '@ocap/util';
+import { getStakeSummaryByDid, getTokenSummaryByDid, getTokenByAddress } from '../integrations/arcblock/stake';
 import { createListParamSchema, getWhereFromKvQuery, getWhereFromQuery, MetadataSchema } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { formatMetadata } from '../libs/util';
 import { Customer } from '../store/models/customer';
 import { blocklet } from '../libs/auth';
 import logger from '../libs/logger';
-import { Invoice } from '../store/models';
+import {
+  Invoice,
+  PaymentCurrency,
+  PaymentMethod,
+  Price,
+  Product,
+  Subscription,
+  SubscriptionItem,
+} from '../store/models';
+import { getSubscriptionPaymentAddress } from '../libs/subscription';
+import { expandLineItems } from '../libs/session';
 
 const router = Router();
 const auth = authenticate<Customer>({ component: true, roles: ['owner', 'admin'] });
@@ -166,16 +178,48 @@ router.get('/:id/overdue/invoices', auth, async (req, res) => {
     if (!doc) {
       return res.status(404).json({ error: 'Customer not found' });
     }
-    const [summary, detail, invoices] = await Invoice!.getUncollectibleAmount({
-      customerId: doc.id,
-      livemode: req.query.livemode ? !!req.query.livemode : doc.livemode,
+    const { rows: invoices, count } = await Invoice.findAndCountAll({
+      where: {
+        customer_id: doc.id,
+        status: ['uncollectible'],
+        amount_remaining: { [Op.gt]: '0' },
+      },
+      include: [
+        { model: PaymentCurrency, as: 'paymentCurrency' },
+        { model: PaymentMethod, as: 'paymentMethod' },
+      ],
+    });
+    if (count === 0) {
+      return res.json({
+        summary: null,
+        invoices: [],
+        subscriptionCount: 0,
+      });
+    }
+    const summary: Record<string, { amount: string; currency: PaymentCurrency; method: PaymentMethod }> = {};
+    invoices.forEach((invoice) => {
+      const key = invoice.currency_id;
+      if (!summary[key]) {
+        summary[key] = {
+          amount: '0',
+          // @ts-ignore
+          currency: invoice.paymentCurrency,
+          // @ts-ignore
+          method: invoice.paymentMethod,
+        };
+      }
+      if (invoice && summary[key]) {
+        // @ts-ignore
+        summary[key].amount = new BN(summary[key]?.amount || '0')
+          .add(new BN(invoice.amount_remaining || '0'))
+          .toString();
+      }
     });
     const subscriptionCount = new Set(invoices.map((x) => x.subscription_id)).size;
     return res.json({
       summary,
       invoices,
       subscriptionCount,
-      detail,
     });
   } catch (err) {
     logger.error(err);
@@ -183,6 +227,105 @@ router.get('/:id/overdue/invoices', auth, async (req, res) => {
   }
 });
 
+router.get('/recharge', sessionMiddleware(), async (req, res) => {
+  if (!req.user) {
+    return res.status(403).json({ error: 'Unauthorized' });
+  }
+  if (!req.query.currencyId) {
+    return res.status(400).json({ error: 'Currency ID is required' });
+  }
+  try {
+    const customer = await Customer.findByPkOrDid(req.user.did as string);
+    if (!customer) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+
+    const paymentCurrency = await PaymentCurrency.findByPk(req.query.currencyId as string);
+    if (!paymentCurrency) {
+      return res.status(404).json({ error: 'Currency not found' });
+    }
+
+    const paymentMethod = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+    if (!paymentMethod) {
+      return res.status(404).json({ error: 'Payment method not found' });
+    }
+
+    let subscriptions = await Subscription.findAll({
+      where: {
+        customer_id: customer.id,
+        currency_id: paymentCurrency.id,
+        status: {
+          [Op.in]: ['active', 'trialing', 'past_due'],
+        },
+      },
+      include: [{ model: SubscriptionItem, as: 'items' }],
+    });
+
+    const products = (await Product.findAll()).map((x) => x.toJSON());
+    const prices = (await Price.findAll()).map((x) => x.toJSON());
+    subscriptions = subscriptions.map((x) => x.toJSON());
+    // @ts-ignore
+    subscriptions.forEach((x) => expandLineItems(x.items, products, prices));
+
+    const relatedSubscriptions = subscriptions.filter((sub) => {
+      const payerAddress = getSubscriptionPaymentAddress(sub, paymentMethod.type);
+      return payerAddress === customer.did;
+    });
+
+    return res.json({
+      currency: {
+        ...paymentCurrency.toJSON(),
+        paymentMethod,
+      },
+      relatedSubscriptions,
+    });
+  } catch (err) {
+    logger.error('Error getting balance recharge info', err);
+    return res.status(500).json({ error: err.message });
+  }
+});
+
+// get address token
+router.get('/payer-token', sessionMiddleware(), async (req, res) => {
+  if (!req.user) {
+    return res.status(403).json({ error: 'Unauthorized' });
+  }
+  if (!req.query.currencyId) {
+    return res.status(400).json({ error: 'Currency ID is required' });
+  }
+  try {
+    const customer = await Customer.findByPkOrDid(req.user.did as string);
+    if (!customer) {
+      return res.status(404).json({ error: 'Customer not found' });
+    }
+
+    const paymentCurrency = await PaymentCurrency.findByPk(req.query.currencyId as string);
+    if (!paymentCurrency) {
+      return res.status(404).json({ error: 'Currency not found' });
+    }
+
+    const paymentMethod = await PaymentMethod.findByPk(paymentCurrency.payment_method_id);
+    if (!paymentMethod) {
+      return res.status(404).json({ error: 'Payment method not found' });
+    }
+
+    if (paymentMethod.type !== 'arcblock') {
+      return res.status(400).json({ error: `Payment method not supported: ${paymentMethod.type}` });
+    }
+
+    const paymentAddress = customer.did;
+    if (!paymentAddress) {
+      return res.status(400).json({ error: `Payment address not found for customer: ${customer.id}` });
+    }
+
+    const token = await getTokenByAddress(paymentAddress, paymentMethod, paymentCurrency);
+    return res.json({ token, paymentAddress });
+  } catch (err) {
+    logger.error('Error getting customer payer token', err);
+    return res.status(500).json({ error: err.message });
+  }
+});
+
 router.get('/:id', auth, async (req, res) => {
   try {
     const doc = await Customer.findByPkOrDid(req.params.id as string);

package/api/src/routes/invoices.ts

@@ -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/payment-currencies.ts

@@ -148,7 +148,10 @@ router.get('/', auth, async (req, res) => {
 router.get('/vault-config', auth, async (req, res) => {
   const vaultAddress = await getVaultAddress();
   if (!vaultAddress) {
-    return res.json([]);
+    return res.json({
+      list: [],
+      balances: {},
+    });
   }
   const chainTypes = resolveAddressChainTypes(vaultAddress);
   try {
@@ -189,7 +192,7 @@ router.get('/vault-config', auth, async (req, res) => {
     }
   } catch (err) {
     logger.error('get payment currency vault config failed', err);
-    return res.status(400).json({ error: err.message });
+    return res.status(400).json({ error: err.message, list: [], balances: {} });
   }
 });
 

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.18.14",
+  "version": "1.18.16",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -46,16 +46,16 @@
     "@abtnode/cron": "^1.16.39",
     "@arcblock/did": "^1.19.15",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.12.12",
+    "@arcblock/did-connect": "^2.12.17",
     "@arcblock/did-util": "^1.19.15",
     "@arcblock/jwt": "^1.19.15",
-    "@arcblock/ux": "^2.12.12",
+    "@arcblock/ux": "^2.12.17",
     "@arcblock/validator": "^1.19.15",
     "@blocklet/js-sdk": "^1.16.39",
     "@blocklet/logger": "^1.16.39",
-    "@blocklet/payment-react": "1.18.14",
+    "@blocklet/payment-react": "1.18.16",
     "@blocklet/sdk": "^1.16.39",
-    "@blocklet/ui-react": "^2.12.12",
+    "@blocklet/ui-react": "^2.12.17",
     "@blocklet/uploader": "^0.1.71",
     "@blocklet/xss": "^0.1.27",
     "@mui/icons-material": "^5.16.6",
@@ -121,7 +121,7 @@
   "devDependencies": {
     "@abtnode/types": "^1.16.39",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.18.14",
+    "@blocklet/payment-types": "1.18.16",
     "@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.24",
     "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": "84cf68d98fcf1df0655e90567b98d6bab38f300e"
+  "gitHead": "676b921c6fc399d3a031b848bfbe0fbffee430a1"
 }

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,13 +9,14 @@ type Props = {
   size?: number;
   variant?: LiteralUnion<'square' | 'rounded' | 'circular', string>;
   sx?: SxProps;
+  className?: 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} />
       ) : (
@@ -45,4 +46,5 @@ InfoCard.defaultProps = {
   size: 40,
   variant: 'rounded',
   sx: {},
+  className: '',
 };

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 }),