payment-kit 1.15.34 → 1.15.36

package/api/src/libs/notification/template/subscription-canceled.ts

@@ -3,6 +3,7 @@
 import { fromUnitToToken } from '@ocap/util';
 import prettyMsI18n from 'pretty-ms-i18n';
 
+import { Op } from 'sequelize';
 import { getUserLocale } from '../../../integrations/blocklet/notification';
 import { translate } from '../../../locales';
 import { Customer, PaymentMethod, Refund, Subscription } from '../../../store/models';
@@ -107,6 +108,9 @@ export class SubscriptionCanceledEmailTemplate implements BaseEmailTemplate<Subs
         where: {
           subscription_id: subscription.id,
           type: 'refund',
+          status: {
+            [Op.not]: 'canceled',
+          },
         },
       });
       const conditions = [

package/api/src/libs/refund.ts

@@ -1,6 +1,7 @@
 import { BN } from '@ocap/util';
 import { Op, type WhereOptions } from 'sequelize';
 import { PaymentIntent, Refund } from '../store/models';
+import logger from './logger';
 
 export async function getRefundAmountSetup({
   currencyId,
@@ -45,6 +46,9 @@ export async function getRefundAmountSetup({
     include: [],
   });
   if (count === 0) {
+    logger.info('No refund found for payment intent', {
+      paymentIntentId,
+    });
     return {
       amount: paymentIntent.amount_received,
       totalAmount: paymentIntent.amount_received,

package/api/src/libs/subscription.ts

@@ -313,6 +313,8 @@ export async function createProration(
       prorations: [],
       newCredit: '0',
       appliedCredit: '0',
+      remaining: '0',
+      remainingUnused: '0',
     };
   }
 
@@ -363,6 +365,25 @@ export async function createProration(
 
   // 5. adjust invoice total && update customer token balance
   const total = setup.amount.setup;
+
+  // 6. calculate remaining amount
+  const refunds = await Refund.findAll({
+    where: {
+      status: { [Op.not]: 'canceled' },
+      subscription_id: subscription.id,
+      currency_id: lastInvoice?.currency_id,
+      invoice_id: lastInvoice?.id,
+    },
+  });
+  const refundAmount = refunds.reduce((acc, x) => acc.add(new BN(x.amount || '0')), new BN(0));
+
+  // 7. calculate remaining amount, default refund recurring amount
+  const calcRemaining = (amount: BN, subtract: BN) =>
+    amount.sub(subtract).lt(new BN(0)) ? '0' : amount.sub(subtract).toString();
+
+  const remaining = calcRemaining(new BN(total), refundAmount);
+  const remainingUnused = calcRemaining(unused, refundAmount);
+
   let due = setup.amount.setup;
   let newCredit = '0';
   let appliedCredit = '0';
@@ -384,6 +405,8 @@ export async function createProration(
     prorationEnd,
     prorationRate,
     unused: unused.toString(),
+    remaining,
+    remainingUnused,
     total,
     due,
     newCredit,
@@ -394,6 +417,8 @@ export async function createProration(
     lastInvoice,
     total,
     due,
+    remaining,
+    remainingUnused,
     used: new BN(lastInvoice.amount_due).sub(unused).toString(),
     unused: unused.toString(),
     prorations,

package/api/src/queues/subscription.ts

@@ -702,7 +702,7 @@ const ensureRefundOnCancel = async (subscription: Subscription) => {
   }
 
   const result = await getSubscriptionRefundSetup(subscription, subscription.cancel_at, lastInvoice.currency_id);
-  if (result.unused === '0') {
+  if (result.remainingUnused === '0') {
     logger.warn('Refund skipped because unused amount is 0', {
       subscription: subscription.id,
       unused: result.unused,
@@ -713,7 +713,7 @@ const ensureRefundOnCancel = async (subscription: Subscription) => {
   const item = await Refund.create({
     type: 'refund',
     livemode: subscription.livemode,
-    amount: refund === 'last' ? result.total : result.unused,
+    amount: refund === 'last' ? result.remaining : result.remainingUnused,
     description: 'refund_transfer_on_subscription_cancel',
     status: 'pending',
     reason: 'requested_by_admin',

package/api/src/routes/checkout-sessions.ts

@@ -1,7 +1,7 @@
 /* eslint-disable consistent-return */
 import { isValid } from '@arcblock/did';
 import { getUrl } from '@blocklet/sdk/lib/component';
-import userMiddleware from '@blocklet/sdk/lib/middlewares/user';
+import sessionMiddleware from '@blocklet/sdk/lib/middlewares/session';
 import { BN, fromUnitToToken } from '@ocap/util';
 import { NextFunction, Request, Response, Router } from 'express';
 import Joi from 'joi';
@@ -73,7 +73,7 @@ import { ensureInvoiceForCheckout } from './connect/shared';
 
 const router = Router();
 
-const user = userMiddleware();
+const user = sessionMiddleware();
 const auth = authenticate<CheckoutSession>({ component: true, roles: ['owner', 'admin'] });
 
 const getPaymentMethods = async (doc: CheckoutSession) => {

package/api/src/routes/connect/recharge.ts

@@ -6,7 +6,7 @@ import { executeEvmTransaction, waitForEvmTxConfirm } from 'api/src/integrations
 import type { CallbackArgs } from '../../libs/auth';
 import { getGasPayerExtra } from '../../libs/payment';
 import { getTxMetadata } from '../../libs/util';
-import { ensureSubscriptionRecharge, getAuthPrincipalClaim } from './shared';
+import { ensureRechargeInvoice, ensureSubscriptionRecharge, getAuthPrincipalClaim } from './shared';
 import logger from '../../libs/logger';
 
 export default {
@@ -74,10 +74,29 @@ export default {
   },
   onAuth: async ({ request, userDid, claims, extraParams }: CallbackArgs) => {
     const { subscriptionId } = extraParams;
-    const { paymentMethod, paymentCurrency, receiverAddress } = await ensureSubscriptionRecharge(subscriptionId);
+    const { paymentMethod, paymentCurrency, receiverAddress, subscription, customer } =
+      await ensureSubscriptionRecharge(subscriptionId);
     let { amount } = extraParams;
     amount = fromTokenToUnit(amount, paymentCurrency.decimal).toString();
 
+    const afterTxExecution = async (paymentDetails: any) => {
+      await ensureRechargeInvoice(
+        {
+          total: amount,
+          description: 'Subscription recharge',
+          currency_id: paymentCurrency.id,
+          metadata: {
+            payment_details: {
+              [paymentMethod.type]: paymentDetails,
+              receiverAddress,
+            },
+          },
+        },
+        subscription!,
+        paymentMethod,
+        customer!
+      );
+    };
     if (paymentMethod.type === 'arcblock') {
       try {
         const client = paymentMethod.getOcapClient();
@@ -104,6 +123,11 @@ export default {
           paymentMethod: paymentMethod.type,
         });
 
+        await afterTxExecution({
+          tx_hash: txHash,
+          payer: userDid,
+          type: 'transfer',
+        });
         return { hash: txHash };
       } catch (err) {
         console.error(err);
@@ -120,13 +144,14 @@ export default {
           Number(paymentDetails.block_height),
           paymentMethod.confirmation.block
         )
-          .then(() => {
+          .then(async () => {
             logger.info('Recharge successful', {
               receiverAddress,
               amount,
               subscriptionId,
               paymentMethod: paymentMethod.type,
             });
+            await afterTxExecution(paymentDetails);
           })
           .catch(console.error);
 

package/api/src/routes/connect/shared.ts

@@ -624,10 +624,17 @@ export async function ensureSubscriptionRecharge(subscriptionId: string) {
   if (!receiverAddress) {
     throw new Error(`Receiver address not found for subscription ${subscriptionId}`);
   }
+
+  const customer = await Customer.findByPk(subscription.customer_id);
+  if (!customer) {
+    throw new Error(`Customer ${subscription.customer_id} not found`);
+  }
   return {
     paymentCurrency: paymentCurrency as PaymentCurrency,
     paymentMethod: paymentMethod as PaymentMethod,
     receiverAddress,
+    subscription,
+    customer
   };
 }
 
@@ -1200,4 +1207,85 @@ export async function updateStripeSubscriptionAfterChangePayment(setupIntent: Se
       }
     }
   }
+}
+
+export async function ensureRechargeInvoice(
+  invoiceProps: { total: string; description?: string; checkout_session_id?: string; currency_id: string; metadata?: any; payment_settings?: any },
+  subscription: Subscription,
+  paymentMethod: PaymentMethod,
+  customer: Customer
+) {
+  try {
+    const rechargeInvoice = await Invoice.create({
+      livemode: subscription.livemode,
+      number: await customer.getInvoiceNumber(),
+      description: invoiceProps?.description || 'Subscription recharge',
+      statement_descriptor: '',
+      period_start: dayjs().unix(),
+      period_end: dayjs().unix(),
+
+      auto_advance: false,
+      paid: true,
+      paid_out_of_band: false,
+
+      status: 'paid',
+      collection_method: 'charge_automatically',
+      billing_reason: 'recharge',
+
+      currency_id: invoiceProps.currency_id,
+      customer_id: customer.id,
+      payment_intent_id: '',
+      subscription_id: subscription?.id,
+      checkout_session_id: invoiceProps?.checkout_session_id || '',
+
+      total: invoiceProps.total || '0',
+      subtotal: invoiceProps.total || '0',
+      tax: '0',
+      subtotal_excluding_tax: invoiceProps.total || '0',
+
+      amount_due: '0',
+      amount_paid: invoiceProps.total || '0',
+      amount_remaining: '0',
+      amount_shipping: '0',
+
+      starting_balance: '0',
+      ending_balance: '0',
+      starting_token_balance: {},
+      ending_token_balance: {},
+
+      attempt_count: 0,
+      attempted: false,
+      // next_payment_attempt: undefined,
+
+      custom_fields: [],
+      customer_address: customer.address,
+      customer_email: customer.email,
+      customer_name: customer.name,
+      customer_phone: customer.phone,
+
+      discounts: [],
+      total_discount_amounts: [],
+
+      due_date: undefined,
+      effective_at: dayjs().unix(), 
+      status_transitions: {
+        finalized_at: dayjs().unix(),
+      },
+
+      payment_settings: invoiceProps?.payment_settings || subscription?.payment_settings,
+      default_payment_method_id: paymentMethod.id,
+
+      account_country: '',
+      account_name: '',
+      metadata: invoiceProps.metadata || {},
+    });
+    logger.info('create recharge invoice success', {
+      rechargeInvoice,
+      subscriptionId: subscription?.id,
+      paymentMethod: paymentMethod.id,
+      customerId: customer.id,
+    });
+  } catch (error) {
+    logger.error('ensureRechargeInvoice: create invoice failed', { error, subscriptionId: subscription?.id, paymentMethod: paymentMethod.id, customerId: customer.id });
+  }
 }

package/api/src/routes/customers.ts

@@ -1,4 +1,4 @@
-import { user } from '@blocklet/sdk/lib/middlewares';
+import sessionMiddleware from '@blocklet/sdk/lib/middlewares/session';
 import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
@@ -79,7 +79,7 @@ router.get('/search', auth, async (req, res) => {
 });
 
 // eslint-disable-next-line consistent-return
-router.get('/me', user(), async (req, res) => {
+router.get('/me', sessionMiddleware(), async (req, res) => {
   if (!req.user) {
     return res.status(403).json({ error: 'Unauthorized' });
   }

package/api/src/routes/invoices.ts

@@ -107,8 +107,12 @@ router.get('/', authMine, async (req, res) => {
       // @ts-ignore
       where[key] = query[key];
     });
+  const excludeBillingReasons = ['recharge'];
   if (!!(include_staking && query.subscription_id) || !include_staking) {
-    where.billing_reason = { [Op.ne]: 'stake' };
+    excludeBillingReasons.push('stake');
+  }
+  if (excludeBillingReasons.length > 0) {
+    where.billing_reason = { [Op.notIn]: excludeBillingReasons };
   }
   try {
     const { rows: list, count } = await Invoice.findAndCountAll({

package/api/src/routes/payment-links.ts

@@ -93,6 +93,9 @@ const formatBeforeSave = (payload: any) => {
 
   raw.line_items?.forEach((x) => {
     if (x.adjustable_quantity?.enabled) {
+      if (Number(x.adjustable_quantity?.minimum) >= Number(x.adjustable_quantity?.maximum)) {
+        throw new Error('adjustable_quantity.minimum must be less than adjustable_quantity.maximum');
+      }
       x.adjustable_quantity.minimum = Number(x.adjustable_quantity?.minimum);
       x.adjustable_quantity.maximum = Number(x.adjustable_quantity?.maximum);
     }

package/api/src/routes/refunds.ts

@@ -261,7 +261,28 @@ router.put('/:id', authAdmin, async (req, res) => {
       requestBody: req.body,
       requestedBy: req.user?.did,
     });
-    res.status(500).json({ error: 'Internal server error' });
+    return res.status(400).json({ error: err.message });
+  }
+});
+
+router.post('/:id/cancel', authAdmin, async (req, res) => {
+  const doc = await Refund.findByPk(req.params.id as string);
+  if (!doc) {
+    return res.status(404).json({ error: 'Refund not found' });
+  }
+  if (doc.status === 'succeeded') {
+    return res.status(400).json({ error: 'Refund is already succeeded' });
+  }
+  try {
+    await doc.update({ status: 'canceled' });
+    return res.json(doc);
+  } catch (err) {
+    logger.error('Cancel refund failed', {
+      refundId: req.params.id,
+      error: err.message,
+      requestedBy: req.user?.did,
+    });
+    return res.status(400).json({ error: err.message });
   }
 });
 

package/api/src/routes/subscriptions.ts

@@ -389,7 +389,7 @@ router.put('/:id/cancel', authPortal, async (req, res) => {
       return res.status(403).json({ error: 'Not authorized to refund' });
     }
     const result = await getSubscriptionRefundSetup(subscription, updates.cancel_at);
-    if (result.unused !== '0') {
+    if (result.remainingUnused !== '0') {
       // @ts-ignore
       updates.cancelation_details = {
         ...(updates.cancelation_details || {}),
@@ -1279,7 +1279,7 @@ router.get('/:id/proration', authPortal, async (req, res) => {
 
     const anchor = req.query.time ? dayjs(req.query.time as any).unix() : dayjs().unix();
     const result = await getSubscriptionRefundSetup(subscription, anchor, invoice?.currency_id);
-    if (result.total === '0') {
+    if (result.remaining === '0') {
       return res.json(null);
     }
     const paymentCurrency = await PaymentCurrency.findByPk(result.lastInvoice?.currency_id);
@@ -1289,9 +1289,9 @@ router.get('/:id/proration', authPortal, async (req, res) => {
     }
 
     return res.json({
-      total: result.total,
+      total: result.remaining,
       latest: invoice?.total,
-      unused: result.unused,
+      unused: result.remainingUnused,
       used: result.used,
       prorations: result.prorations,
       paymentCurrency,
@@ -1815,5 +1815,47 @@ router.get('/:id/payer-token', authMine, async (req, res) => {
   return res.json({ token, paymentAddress });
 });
 
-router.get('/:id/change-plan');
+const rechargeSchema = createListParamSchema<{
+  customer_id?: string;
+  customer_did?: string;
+  currency_id?: string;
+}>({
+  customer_id: Joi.string().empty(''),
+  customer_did: Joi.string().empty(''),
+  currency_id: Joi.string().empty(''),
+});
+router.get('/:id/recharge', authMine, async (req, res) => {
+  const subscription = await Subscription.findByPk(req.params.id);
+  if (!subscription) {
+    return res.status(404).json({ error: `Subscription(${req.params.id}) not found` });
+  }
+  const { page, pageSize, ...query } = await rechargeSchema.validateAsync(req.query, {
+    stripUnknown: false,
+    allowUnknown: true,
+  });
+  const where = getWhereFromKvQuery(query.q);
+
+  try {
+    const { rows: invoices, count } = await Invoice.findAndCountAll({
+      where: {
+        subscription_id: subscription.id,
+        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, subscription, paging: { page, pageSize } });
+  } catch (err) {
+    console.error(err);
+    return res.status(400).json({ error: err.message });
+  }
+});
 export default router;

package/api/src/routes/webhook-attempts.ts

@@ -5,6 +5,7 @@ import type { WhereOptions } from 'sequelize';
 import { createListParamSchema } from '../libs/api';
 import { authenticate } from '../libs/security';
 import { Event, WebhookAttempt, WebhookEndpoint } from '../store/models';
+import { blocklet } from '../libs/auth';
 
 const router = Router();
 const auth = authenticate<WebhookAttempt>({ component: true, roles: ['owner', 'admin'] });
@@ -42,7 +43,19 @@ router.get('/', auth, async (req, res) => {
       ],
     });
 
-    res.json({ count, list, paging: { page, pageSize } });
+    const updatedList = await Promise.all(
+      list.map(async (attempt: any) => {
+        const updated = attempt.toJSON();
+        if (updated.event?.request?.requested_by) {
+          const { user } = await blocklet.getUser(updated.event.request.requested_by);
+          if (user) {
+            updated.event.requestInfo = user;
+          }
+        }
+        return updated;
+      })
+    );
+    res.json({ count, list: updatedList, paging: { page, pageSize } });
   } catch (err) {
     console.error(err);
     res.json({ count: 0, list: [], paging: { page, pageSize } });

package/api/src/store/models/invoice.ts

@@ -60,7 +60,8 @@ export class Invoice extends Model<InferAttributes<Invoice>, InferCreationAttrib
     | 'manual'
     | 'upcoming'
     | 'slash_stake'
-    | 'stake',
+    | 'stake'
+    | 'recharge',
     string
   >;
 

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.15.34",
+  "version": "1.15.36",
   "scripts": {
     "dev": "blocklet dev --open",
     "eject": "vite eject",
@@ -53,7 +53,7 @@
     "@arcblock/validator": "^1.18.139",
     "@blocklet/js-sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/logger": "1.16.33-beta-20241031-073543-49b1ff9b",
-    "@blocklet/payment-react": "1.15.34",
+    "@blocklet/payment-react": "1.15.36",
     "@blocklet/sdk": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@blocklet/ui-react": "^2.10.65",
     "@blocklet/uploader": "^0.1.51",
@@ -120,7 +120,7 @@
   "devDependencies": {
     "@abtnode/types": "1.16.33-beta-20241031-073543-49b1ff9b",
     "@arcblock/eslint-config-ts": "^0.3.3",
-    "@blocklet/payment-types": "1.15.34",
+    "@blocklet/payment-types": "1.15.36",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
@@ -165,5 +165,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "95c0d3ddd12382f694014c05015ca46c19424e3e"
+  "gitHead": "0139cb00a67b6ebd845d932fa6f240cf95b1cc16"
 }

package/src/app.tsx

@@ -8,7 +8,7 @@ import { ToastProvider } from '@arcblock/ux/lib/Toast';
 import { CircularProgress } from '@mui/material';
 import React, { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { PaymentThemeProvider } from '@blocklet/payment-react';
+import { PaymentThemeProvider, usePreventWheel } from '@blocklet/payment-react';
 import { Navigate, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { joinURL } from 'ufo';
 
@@ -150,6 +150,8 @@ export default function WrappedApp() {
   // While the blocklet is deploy to a sub path, this will be work properly.
   const prefix = window?.blocklet?.prefix || '/';
 
+  usePreventWheel();
+
   return (
     <ToastProvider>
       <SessionProvider

package/src/components/invoice/list.tsx

@@ -9,6 +9,7 @@ import {
   Table,
   useDefaultPageSize,
   getInvoiceDescriptionAndReason,
+  getTxLink,
 } from '@blocklet/payment-react';
 import type { TInvoiceExpanded } from '@blocklet/payment-types';
 import { CircularProgress, Typography } from '@mui/material';
@@ -87,6 +88,33 @@ InvoiceList.defaultProps = {
   mode: 'admin',
 };
 
+const getInvoiceLink = (invoice: TInvoiceExpanded) => {
+  if (invoice.id.startsWith('in_')) {
+    return {
+      external: false,
+      url: `/admin/billing/${invoice.id}`,
+    };
+  }
+
+  return {
+    external: true,
+    connect: false,
+    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link,
+  };
+};
+
+function InvoiceLink({ invoice, children }: { invoice: TInvoiceExpanded; children: React.ReactNode }) {
+  const link = getInvoiceLink(invoice);
+  if (link.external) {
+    return (
+      <a href={link.url} target="_blank" rel="noreferrer">
+        {children}
+      </a>
+    );
+  }
+  return <Link to={link.url}>{children}</Link>;
+}
+
 export default function InvoiceList({
   customer_id,
   subscription_id,
@@ -145,12 +173,12 @@ export default function InvoiceList({
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return (
-            <Link to={`/admin/billing/${item.id}`}>
+            <InvoiceLink invoice={item}>
               <Typography component="strong" fontWeight={600}>
                 {formatBNStr(item?.total, item?.paymentCurrency.decimal)}&nbsp;
                 {item?.paymentCurrency.symbol}
               </Typography>
-            </Link>
+            </InvoiceLink>
           );
         },
       },
@@ -163,9 +191,9 @@ export default function InvoiceList({
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return (
-            <Link to={`/admin/billing/${item.id}`}>
+            <InvoiceLink invoice={item}>
               <Status label={item?.status} color={getInvoiceStatusColor(item?.status)} />
-            </Link>
+            </InvoiceLink>
           );
         },
       },
@@ -177,9 +205,9 @@ export default function InvoiceList({
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return (
-            <Link to={`/admin/billing/${item.id}`}>
+            <InvoiceLink invoice={item}>
               <Status label={getInvoiceDescriptionAndReason(item, locale)?.type} />
-            </Link>
+            </InvoiceLink>
           );
         },
       },
@@ -190,20 +218,21 @@ export default function InvoiceList({
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <Link to={`/admin/billing/${item.id}`}>{item.number}</Link>;
+          return <InvoiceLink invoice={item}>{item.number}</InvoiceLink>;
         },
       },
     },
     {
       label: t('common.description'),
       name: 'description',
+      minWidth: 120,
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
           return (
-            <Link to={`/admin/billing/${item.id}`}>
+            <InvoiceLink invoice={item}>
               {getInvoiceDescriptionAndReason(item, locale)?.description || item?.id}
-            </Link>
+            </InvoiceLink>
           );
         },
       },
@@ -215,7 +244,7 @@ export default function InvoiceList({
         sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.created_at)}</Link>;
+          return <InvoiceLink invoice={item}>{formatTime(item.created_at)}</InvoiceLink>;
         },
       },
     },
@@ -226,7 +255,7 @@ export default function InvoiceList({
         sort: true,
         customBodyRenderLite: (_: string, index: number) => {
           const item = data.list[index] as TInvoiceExpanded;
-          return <Link to={`/admin/billing/${item.id}`}>{formatTime(item.updated_at)}</Link>;
+          return <InvoiceLink invoice={item}>{formatTime(item.updated_at)}</InvoiceLink>;
         },
       },
     },