@blocklet/payment-react 1.18.12 → 1.18.13

package/es/components/link.js

@@ -11,6 +11,7 @@ export default function Link({ to, children, onClick, replace, target, outLink =
       e.preventDefault();
       window.location.href = to;
     }
+    e.preventDefault();
     onClick?.(e);
   };
   return /* @__PURE__ */ jsx("a", { href: to, onClick: handleClick, target, rel: "noreferrer", ...props, children });

package/es/components/over-due-invoice-payment.d.ts

@@ -9,6 +9,7 @@ type Props = {
     mode?: 'default' | 'custom';
     onPaid?: (subscriptionId: string, currencyId: string) => void;
     dialogProps?: DialogProps;
+    inSubscriptionDetail?: boolean;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription: Subscription;
         summary: {
@@ -23,7 +24,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, inSubscriptionDetail, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -32,6 +33,7 @@ declare namespace OverdueInvoicePayment {
             open: boolean;
         };
         children: null;
+        inSubscriptionDetail: boolean;
     };
 }
 export default OverdueInvoicePayment;

package/es/components/over-due-invoice-payment.js

@@ -20,7 +20,8 @@ function OverdueInvoicePayment({
   dialogProps = {},
   children,
   onPaid = () => {
-  }
+  },
+  inSubscriptionDetail = false
 }) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -100,8 +101,14 @@ function OverdueInvoicePayment({
     setDialogOpen(false);
     dialogProps.onClose?.();
   };
+  const handleViewDetailClick = (e) => {
+    if (inSubscriptionDetail) {
+      e.preventDefault();
+      handleClose();
+    }
+  };
   if (loading) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   const renderPayButton = (item, props) => {
     const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
@@ -130,6 +137,7 @@ function OverdueInvoicePayment({
       ...dialogProps || {},
       open: dialogOpen,
       title: dialogProps?.title || t("payment.subscription.overdue.pastDue"),
+      sx: { "& .MuiDialogContent-root": { pt: 0 } },
       onClose: handleClose,
       children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
         summaryList.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -155,6 +163,7 @@ function OverdueInvoicePayment({
               {
                 href: subscriptionUrl,
                 target: "_blank",
+                onClick: handleViewDetailClick,
                 rel: "noreferrer",
                 style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
                 children: t("payment.subscription.overdue.view")
@@ -181,6 +190,7 @@ function OverdueInvoicePayment({
                 href: subscriptionUrl,
                 target: "_blank",
                 rel: "noreferrer",
+                onClick: handleViewDetailClick,
                 style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
                 children: t("payment.subscription.overdue.view")
               }
@@ -229,6 +239,7 @@ OverdueInvoicePayment.defaultProps = {
   dialogProps: {
     open: true
   },
-  children: null
+  children: null,
+  inSubscriptionDetail: false
 };
 export default OverdueInvoicePayment;

package/es/history/invoice/list.js

@@ -6,7 +6,7 @@ import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/m
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
-import { joinURL } from "ufo";
+import { useNavigate } from "react-router-dom";
 import debounce from "lodash/debounce";
 import Status from "../../components/status.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -19,10 +19,10 @@ import {
   formatToDatetime,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
-  getPrefix,
   getTxLink
 } from "../../libs/util.js";
 import Table from "../../components/table.js";
+import { createLink, handleNavigation } from "../../libs/navigation.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -45,21 +45,20 @@ const fetchData = (params = {}) => {
 };
 const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
+    const path = `/customer/invoice/${invoice.id}${invoice.status === "uncollectible" && action ? `?action=${action}` : ""}`;
     return {
-      external: false,
       connect: invoice.status === "uncollectible",
-      url: joinURL(
-        getPrefix(),
-        `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`
-      )
+      link: createLink(path)
     };
   }
   return {
-    external: true,
     connect: false,
-    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
+    link: createLink(getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link, true)
   };
 };
+const linkStyle = {
+  cursor: "pointer"
+};
 const InvoiceTable = React.memo((props) => {
   const {
     pageSize,
@@ -77,6 +76,7 @@ const InvoiceTable = React.memo((props) => {
   } = props;
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
   const [search, setSearch] = useState({
     pageSize: pageSize || 10,
     page: 1
@@ -131,6 +131,10 @@ const InvoiceTable = React.memo((props) => {
       });
     }
   }, [subscription]);
+  const handleLinkClick = (e, invoice) => {
+    const { link } = getInvoiceLink(invoice, action);
+    handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
+  };
   const columns = [
     {
       label: t("common.amount"),
@@ -140,8 +144,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { children: [
             formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
             "\xA0",
             invoice.paymentCurrency.symbol
@@ -155,8 +158,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: getInvoiceDescriptionAndReason(invoice, locale)?.type }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: getInvoiceDescriptionAndReason(invoice, locale)?.type }) });
         }
       }
     },
@@ -166,8 +168,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: invoice?.number });
         }
       }
     },
@@ -177,8 +178,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
         }
       }
     },
@@ -189,8 +189,7 @@ const InvoiceTable = React.memo((props) => {
         sort: false,
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
         }
       }
     },
@@ -200,24 +199,23 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
           const hidePay = invoice.billing_reason === "overdraft-protection";
+          const { connect } = getInvoiceLink(invoice, action);
           if (action && !hidePay) {
-            return link.connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+            return connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
               Button,
               {
                 component: "a",
                 variant: "text",
                 size: "small",
-                href: link.url,
-                target: link.external ? "_blank" : target,
+                onClick: (e) => handleLinkClick(e, invoice),
                 sx: { color: "var(--foregrounds-fg-interactive, #0086FF) !important" },
                 rel: "noreferrer",
                 children: t("payment.customer.invoice.pay")
               }
             );
           }
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
         }
       }
     }
@@ -283,6 +281,7 @@ const InvoiceList = React.memo((props) => {
   const size = pageSize || 10;
   const subscription = useSubscription("events");
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
@@ -342,11 +341,14 @@ const InvoiceList = React.memo((props) => {
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
+  const handleLinkClick = (e, link) => {
+    handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
+  };
   return /* @__PURE__ */ jsxs(Root, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
     Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
       invoices.map((invoice) => {
-        const link = getInvoiceLink(invoice, action);
+        const { link, connect } = getInvoiceLink(invoice, action);
         return /* @__PURE__ */ jsxs(
           Stack,
           {
@@ -360,10 +362,19 @@ const InvoiceList = React.memo((props) => {
             alignItems: "center",
             flexWrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
-              ] }) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: link.url,
+                  target: link.external ? "_blank" : target,
+                  rel: "noreferrer",
+                  onClick: (e) => handleLinkClick(e, link),
+                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                    /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
+                    link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
+                  ] })
+                }
+              ) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
@@ -371,7 +382,7 @@ const InvoiceList = React.memo((props) => {
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
               !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "contained",
@@ -387,8 +398,7 @@ const InvoiceList = React.memo((props) => {
                   component: "a",
                   variant: "contained",
                   size: "small",
-                  href: link.url,
-                  target: link.external ? "_blank" : target,
+                  onClick: (e) => handleLinkClick(e, link),
                   sx: { whiteSpace: "nowrap" },
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")

package/es/libs/navigation.d.ts

@@ -0,0 +1,33 @@
+import { NavigateFunction } from 'react-router-dom';
+export interface LinkInfo {
+    url: string;
+    external: boolean;
+    path: string;
+}
+/**
+ * Check if currently running inside Payment Kit
+ */
+export declare function isInPaymentKit(): boolean;
+/**
+ * Create link information object
+ * @param path Path or URL
+ * @param external Force external link behavior
+ */
+export declare function createLink(path: string, external?: boolean): LinkInfo;
+/**
+ * Get HTML attributes for a link
+ * @param link Link information
+ * @param target Link target (default: _self)
+ */
+export declare function getLinkProps(link: LinkInfo, target?: string): Record<string, any>;
+/**
+ * Handle link navigation
+ * @param e Click event
+ * @param link Link information
+ * @param navigate React Router navigate function
+ * @param options Navigation options
+ */
+export declare function handleNavigation(e: React.MouseEvent, link: LinkInfo, navigate?: NavigateFunction, options?: {
+    replace?: boolean;
+    target?: string;
+}): void;

package/es/libs/navigation.js

@@ -0,0 +1,45 @@
+import { joinURL } from "ufo";
+import { getPrefix, PAYMENT_KIT_DID } from "./util.js";
+export function isInPaymentKit() {
+  const componentId = (window.blocklet?.componentId || "").split("/").pop();
+  return componentId === PAYMENT_KIT_DID;
+}
+export function createLink(path, external = false) {
+  const isAbsoluteUrl = /^https?:\/\//.test(path);
+  const isExternal = external || isAbsoluteUrl;
+  const url = isExternal ? path : joinURL(getPrefix(), path);
+  return {
+    url,
+    external: isExternal,
+    path
+  };
+}
+export function getLinkProps(link, target = "_self") {
+  const props = {
+    href: link.url
+  };
+  if (link.external) {
+    props.target = target;
+    props.rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  }
+  return props;
+}
+export function handleNavigation(e, link, navigate, options = {}) {
+  if (e) {
+    e.preventDefault();
+  }
+  const { replace = false, target = "_self" } = options;
+  if (link.external || target === "_blank") {
+    window.open(link.url, target);
+    return;
+  }
+  if (isInPaymentKit() && navigate) {
+    navigate(link.path, { replace });
+    return;
+  }
+  if (replace) {
+    window.location.replace(link.url);
+  } else {
+    window.location.href = link.url;
+  }
+}

package/es/locales/en.js

@@ -245,8 +245,8 @@ export default flat({
         }
       },
       recover: {
-        button: "Renew",
-        title: "Renew your subscription",
+        button: "Resume Subscription",
+        title: "Resume Your Subscription",
         description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
       },
       changePlan: {

package/es/locales/zh.js

@@ -245,8 +245,8 @@ export default flat({
         }
       },
       recover: {
-        button: "\u7EED\u8BA2",
-        title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
+        button: "\u6062\u590D\u8BA2\u9605",
+        title: "\u6062\u590D\u60A8\u7684\u8BA2\u9605",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
       },
       changePlan: {

package/lib/components/link.js

@@ -27,6 +27,7 @@ function Link({
       e.preventDefault();
       window.location.href = to;
     }
+    e.preventDefault();
     onClick?.(e);
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {

package/lib/components/over-due-invoice-payment.d.ts

@@ -9,6 +9,7 @@ type Props = {
     mode?: 'default' | 'custom';
     onPaid?: (subscriptionId: string, currencyId: string) => void;
     dialogProps?: DialogProps;
+    inSubscriptionDetail?: boolean;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription: Subscription;
         summary: {
@@ -23,7 +24,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, inSubscriptionDetail, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -32,6 +33,7 @@ declare namespace OverdueInvoicePayment {
             open: boolean;
         };
         children: null;
+        inSubscriptionDetail: boolean;
     };
 }
 export default OverdueInvoicePayment;

package/lib/components/over-due-invoice-payment.js

@@ -26,7 +26,8 @@ function OverdueInvoicePayment({
   mode = "default",
   dialogProps = {},
   children,
-  onPaid = () => {}
+  onPaid = () => {},
+  inSubscriptionDetail = false
 }) {
   const {
     t
@@ -121,8 +122,14 @@ function OverdueInvoicePayment({
     setDialogOpen(false);
     dialogProps.onClose?.();
   };
+  const handleViewDetailClick = e => {
+    if (inSubscriptionDetail) {
+      e.preventDefault();
+      handleClose();
+    }
+  };
   if (loading) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   const renderPayButton = (item, props) => {
     const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
@@ -169,6 +176,11 @@ function OverdueInvoicePayment({
     ...(dialogProps || {}),
     open: dialogOpen,
     title: dialogProps?.title || t("payment.subscription.overdue.pastDue"),
+    sx: {
+      "& .MuiDialogContent-root": {
+        pt: 0
+      }
+    },
     onClose: handleClose,
     children: error ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
       severity: "error",
@@ -209,6 +221,7 @@ function OverdueInvoicePayment({
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
             href: subscriptionUrl,
             target: "_blank",
+            onClick: handleViewDetailClick,
             rel: "noreferrer",
             style: {
               color: "var(--foregrounds-fg-interactive, 0086FF)"
@@ -239,6 +252,7 @@ function OverdueInvoicePayment({
             href: subscriptionUrl,
             target: "_blank",
             rel: "noreferrer",
+            onClick: handleViewDetailClick,
             style: {
               color: "var(--foregrounds-fg-interactive, 0086FF)"
             },
@@ -285,6 +299,7 @@ OverdueInvoicePayment.defaultProps = {
   dialogProps: {
     open: true
   },
-  children: null
+  children: null,
+  inSubscriptionDetail: false
 };
 module.exports = OverdueInvoicePayment;

package/lib/history/invoice/list.js

@@ -12,7 +12,7 @@ var _material = require("@mui/material");
 var _system = require("@mui/system");
 var _ahooks = require("ahooks");
 var _react = _interopRequireWildcard(require("react"));
-var _ufo = require("ufo");
+var _reactRouterDom = require("react-router-dom");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _payment = require("../../contexts/payment");
@@ -20,6 +20,7 @@ var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _util = require("../../libs/util");
 var _table = _interopRequireDefault(require("../../components/table"));
+var _navigation = require("../../libs/navigation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -45,18 +46,20 @@ const fetchData = (params = {}) => {
 };
 const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
+    const path = `/customer/invoice/${invoice.id}${invoice.status === "uncollectible" && action ? `?action=${action}` : ""}`;
     return {
-      external: false,
       connect: invoice.status === "uncollectible",
-      url: (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`)
+      link: (0, _navigation.createLink)(path)
     };
   }
   return {
-    external: true,
     connect: false,
-    url: (0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link
+    link: (0, _navigation.createLink)((0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link, true)
   };
 };
+const linkStyle = {
+  cursor: "pointer"
+};
 const InvoiceTable = _react.default.memo(props => {
   const {
     pageSize,
@@ -77,6 +80,7 @@ const InvoiceTable = _react.default.memo(props => {
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const [search, setSearch] = (0, _react.useState)({
     pageSize: pageSize || 10,
     page: 1
@@ -129,6 +133,14 @@ const InvoiceTable = _react.default.memo(props => {
       });
     }
   }, [subscription]);
+  const handleLinkClick = (e, invoice) => {
+    const {
+      link
+    } = getInvoiceLink(invoice, action);
+    (0, _navigation.handleNavigation)(e, link, navigate, {
+      target: link.external ? "_blank" : target
+    });
+  };
   const columns = [{
     label: t("common.amount"),
     name: "total",
@@ -137,11 +149,9 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
-        const link = getInvoiceLink(invoice, action);
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
             children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
           })
@@ -154,11 +164,9 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data.list[index];
-        const link = getInvoiceLink(invoice, action);
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.type
           })
@@ -171,11 +179,9 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (_, index) => {
         const invoice = data?.list[index];
-        const link = getInvoiceLink(invoice, action);
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: invoice?.number
         });
       }
@@ -186,11 +192,9 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
-        const link = getInvoiceLink(invoice, action);
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: (0, _util.formatToDate)(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss")
         });
       }
@@ -202,11 +206,9 @@ const InvoiceTable = _react.default.memo(props => {
       sort: false,
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
-        const link = getInvoiceLink(invoice, action);
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: (0, _util.getInvoiceDescriptionAndReason)(invoice, locale)?.description || invoice.id
         });
       }
@@ -217,10 +219,12 @@ const InvoiceTable = _react.default.memo(props => {
     options: {
       customBodyRenderLite: (val, index) => {
         const invoice = data?.list[index];
-        const link = getInvoiceLink(invoice, action);
         const hidePay = invoice.billing_reason === "overdraft-protection";
+        const {
+          connect
+        } = getInvoiceLink(invoice, action);
         if (action && !hidePay) {
-          return link.connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          return connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             variant: "text",
             size: "small",
             onClick: () => onPay(invoice.id),
@@ -232,8 +236,7 @@ const InvoiceTable = _react.default.memo(props => {
             component: "a",
             variant: "text",
             size: "small",
-            href: link.url,
-            target: link.external ? "_blank" : target,
+            onClick: e => handleLinkClick(e, invoice),
             sx: {
               color: "var(--foregrounds-fg-interactive, #0086FF) !important"
             },
@@ -241,10 +244,9 @@ const InvoiceTable = _react.default.memo(props => {
             children: t("payment.customer.invoice.pay")
           });
         }
-        return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-          href: link.url,
-          target: link.external ? "_blank" : target,
-          rel: "noreferrer",
+        return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          onClick: e => handleLinkClick(e, invoice),
+          sx: linkStyle,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
             label: invoice.status,
             color: (0, _util.getInvoiceStatusColor)(invoice.status)
@@ -330,6 +332,7 @@ const InvoiceList = _react.default.memo(props => {
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const navigate = (0, _reactRouterDom.useNavigate)();
   const {
     data,
     loadMore,
@@ -404,6 +407,11 @@ const InvoiceList = _react.default.memo(props => {
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
+  const handleLinkClick = (e, link) => {
+    (0, _navigation.handleNavigation)(e, link, navigate, {
+      target: link.external ? "_blank" : target
+    });
+  };
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
     direction: "column",
     gap: 1,
@@ -420,7 +428,10 @@ const InvoiceList = _react.default.memo(props => {
         },
         children: date
       }), invoices.map(invoice => {
-        const link = getInvoiceLink(invoice, action);
+        const {
+          link,
+          connect
+        } = getInvoiceLink(invoice, action);
         return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           sx: {
@@ -439,6 +450,7 @@ const InvoiceList = _react.default.memo(props => {
               href: link.url,
               target: link.external ? "_blank" : target,
               rel: "noreferrer",
+              onClick: e => handleLinkClick(e, link),
               children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
                 direction: "row",
                 alignItems: "center",
@@ -482,7 +494,7 @@ const InvoiceList = _react.default.memo(props => {
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
             flex: 1,
             textAlign: "right",
-            children: action ? link.connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            children: action ? connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               variant: "contained",
               color: "primary",
               size: "small",
@@ -495,8 +507,7 @@ const InvoiceList = _react.default.memo(props => {
               component: "a",
               variant: "contained",
               size: "small",
-              href: link.url,
-              target: link.external ? "_blank" : target,
+              onClick: e => handleLinkClick(e, link),
               sx: {
                 whiteSpace: "nowrap"
               },

package/lib/libs/navigation.d.ts

@@ -0,0 +1,33 @@
+import { NavigateFunction } from 'react-router-dom';
+export interface LinkInfo {
+    url: string;
+    external: boolean;
+    path: string;
+}
+/**
+ * Check if currently running inside Payment Kit
+ */
+export declare function isInPaymentKit(): boolean;
+/**
+ * Create link information object
+ * @param path Path or URL
+ * @param external Force external link behavior
+ */
+export declare function createLink(path: string, external?: boolean): LinkInfo;
+/**
+ * Get HTML attributes for a link
+ * @param link Link information
+ * @param target Link target (default: _self)
+ */
+export declare function getLinkProps(link: LinkInfo, target?: string): Record<string, any>;
+/**
+ * Handle link navigation
+ * @param e Click event
+ * @param link Link information
+ * @param navigate React Router navigate function
+ * @param options Navigation options
+ */
+export declare function handleNavigation(e: React.MouseEvent, link: LinkInfo, navigate?: NavigateFunction, options?: {
+    replace?: boolean;
+    target?: string;
+}): void;

package/lib/libs/navigation.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createLink = createLink;
+exports.getLinkProps = getLinkProps;
+exports.handleNavigation = handleNavigation;
+exports.isInPaymentKit = isInPaymentKit;
+var _ufo = require("ufo");
+var _util = require("./util");
+function isInPaymentKit() {
+  const componentId = (window.blocklet?.componentId || "").split("/").pop();
+  return componentId === _util.PAYMENT_KIT_DID;
+}
+function createLink(path, external = false) {
+  const isAbsoluteUrl = /^https?:\/\//.test(path);
+  const isExternal = external || isAbsoluteUrl;
+  const url = isExternal ? path : (0, _ufo.joinURL)((0, _util.getPrefix)(), path);
+  return {
+    url,
+    external: isExternal,
+    path
+  };
+}
+function getLinkProps(link, target = "_self") {
+  const props = {
+    href: link.url
+  };
+  if (link.external) {
+    props.target = target;
+    props.rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  }
+  return props;
+}
+function handleNavigation(e, link, navigate, options = {}) {
+  if (e) {
+    e.preventDefault();
+  }
+  const {
+    replace = false,
+    target = "_self"
+  } = options;
+  if (link.external || target === "_blank") {
+    window.open(link.url, target);
+    return;
+  }
+  if (isInPaymentKit() && navigate) {
+    navigate(link.path, {
+      replace
+    });
+    return;
+  }
+  if (replace) {
+    window.location.replace(link.url);
+  } else {
+    window.location.href = link.url;
+  }
+}

package/lib/locales/en.js

@@ -252,8 +252,8 @@ module.exports = (0, _flat.default)({
         }
       },
       recover: {
-        button: "Renew",
-        title: "Renew your subscription",
+        button: "Resume Subscription",
+        title: "Resume Your Subscription",
         description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
       },
       changePlan: {

package/lib/locales/zh.js

@@ -252,8 +252,8 @@ module.exports = (0, _flat.default)({
         }
       },
       recover: {
-        button: "\u7EED\u8BA2",
-        title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
+        button: "\u6062\u590D\u8BA2\u9605",
+        title: "\u6062\u590D\u60A8\u7684\u8BA2\u9605",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
       },
       changePlan: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.12",
+  "version": "1.18.13",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.12",
+    "@blocklet/payment-types": "1.18.13",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -123,5 +123,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "7efd2af5c272e4928da6864edfcbd3f9054c722b"
+  "gitHead": "b26aa859ba5961c7a8dedfc238a31476cf16036c"
 }

package/src/components/link.tsx

@@ -22,6 +22,7 @@ export default function Link({ to, children, onClick, replace, target, outLink =
       e.preventDefault();
       window.location.href = to;
     }
+    e.preventDefault();
     onClick?.(e);
   };
 

package/src/components/over-due-invoice-payment.tsx

@@ -22,6 +22,7 @@ type Props = {
   mode?: 'default' | 'custom';
   onPaid?: (subscriptionId: string, currencyId: string) => void;
   dialogProps?: DialogProps;
+  inSubscriptionDetail?: boolean;
   children?: (
     handlePay: (item: SummaryItem) => void,
     data: {
@@ -56,6 +57,7 @@ function OverdueInvoicePayment({
   dialogProps = {},
   children,
   onPaid = () => {},
+  inSubscriptionDetail = false,
 }: Props) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -141,8 +143,15 @@ function OverdueInvoicePayment({
     dialogProps.onClose?.();
   };
 
+  const handleViewDetailClick = (e: React.MouseEvent) => {
+    if (inSubscriptionDetail) {
+      e.preventDefault();
+      handleClose();
+    }
+  };
+
   if (loading) {
-    return <CircularProgress />;
+    return null;
   }
 
   const renderPayButton = (item: SummaryItem, props: any) => {
@@ -184,6 +193,7 @@ function OverdueInvoicePayment({
       {...(dialogProps || {})}
       open={dialogOpen}
       title={dialogProps?.title || t('payment.subscription.overdue.pastDue')}
+      sx={{ '& .MuiDialogContent-root': { pt: 0 } }}
       onClose={handleClose}>
       {error ? (
         <Alert severity="error">{error.message}</Alert>
@@ -220,6 +230,7 @@ function OverdueInvoicePayment({
                 <a
                   href={subscriptionUrl}
                   target="_blank"
+                  onClick={handleViewDetailClick}
                   rel="noreferrer"
                   style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
                   {t('payment.subscription.overdue.view')}
@@ -250,6 +261,7 @@ function OverdueInvoicePayment({
                   href={subscriptionUrl}
                   target="_blank"
                   rel="noreferrer"
+                  onClick={handleViewDetailClick}
                   style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
                   {t('payment.subscription.overdue.view')}
                 </a>
@@ -303,6 +315,7 @@ OverdueInvoicePayment.defaultProps = {
     open: true,
   },
   children: null,
+  inSubscriptionDetail: false,
 };
 
 export default OverdueInvoicePayment;

package/src/history/invoice/list.tsx

@@ -12,7 +12,8 @@ import { Box, Button, CircularProgress, Hidden, Stack, Typography } from '@mui/m
 import { styled } from '@mui/system';
 import { useInfiniteScroll, useRequest, useSetState } from 'ahooks';
 import React, { useEffect, useRef, useState } from 'react';
-import { joinURL } from 'ufo';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useNavigate } from 'react-router-dom';
 
 import debounce from 'lodash/debounce';
 import Status from '../../components/status';
@@ -26,10 +27,10 @@ import {
   formatToDatetime,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
-  getPrefix,
   getTxLink,
 } from '../../libs/util';
 import Table from '../../components/table';
+import { createLink, handleNavigation, LinkInfo } from '../../libs/navigation';
 
 type Result = Paginated<TInvoiceExpanded> & { subscription: TSubscription };
 
@@ -72,23 +73,23 @@ type Props = {
 
 const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
   if (invoice.id.startsWith('in_')) {
+    const path = `/customer/invoice/${invoice.id}${invoice.status === 'uncollectible' && action ? `?action=${action}` : ''}`;
     return {
-      external: false,
       connect: invoice.status === 'uncollectible',
-      url: joinURL(
-        getPrefix(),
-        `/customer/invoice/${invoice.id}?action=${invoice.status === 'uncollectible' ? action : ''}`
-      ),
+      link: createLink(path),
     };
   }
 
   return {
-    external: true,
     connect: false,
-    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link,
+    link: createLink(getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link, true),
   };
 };
 
+const linkStyle = {
+  cursor: 'pointer',
+};
+
 const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) => void }) => {
   const {
     pageSize,
@@ -106,6 +107,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
   } = props;
   const listKey = 'invoice-table';
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
 
   const [search, setSearch] = useState<{ pageSize: number; page: number }>({
     pageSize: pageSize || 10,
@@ -170,6 +172,11 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [subscription]);
 
+  const handleLinkClick = (e: React.MouseEvent, invoice: TInvoiceExpanded) => {
+    const { link } = getInvoiceLink(invoice, action);
+    handleNavigation(e, link, navigate, { target: link.external ? '_blank' : target });
+  };
+
   const columns = [
     {
       label: t('common.amount'),
@@ -179,14 +186,13 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               <Typography>
                 {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
                 {invoice.paymentCurrency.symbol}
               </Typography>
-            </a>
+            </Box>
           );
         },
       },
@@ -197,11 +203,10 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               <Status label={getInvoiceDescriptionAndReason(invoice, locale)?.type} />
-            </a>
+            </Box>
           );
         },
       },
@@ -212,11 +217,10 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (_: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               {invoice?.number}
-            </a>
+            </Box>
           );
         },
       },
@@ -227,11 +231,11 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
+
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               {formatToDate(invoice.created_at, locale, 'YYYY-MM-DD HH:mm:ss')}
-            </a>
+            </Box>
           );
         },
       },
@@ -243,11 +247,11 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
         sort: false,
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
+
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               {getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id}
-            </a>
+            </Box>
           );
         },
       },
@@ -258,10 +262,10 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
       options: {
         customBodyRenderLite: (val: string, index: number) => {
           const invoice = data?.list[index] as TInvoiceExpanded;
-          const link = getInvoiceLink(invoice, action);
           const hidePay = invoice.billing_reason === 'overdraft-protection';
+          const { connect } = getInvoiceLink(invoice, action);
           if (action && !hidePay) {
-            return link.connect ? (
+            return connect ? (
               <Button variant="text" size="small" onClick={() => onPay(invoice.id)} sx={{ color: 'text.link' }}>
                 {t('payment.customer.invoice.pay')}
               </Button>
@@ -270,8 +274,7 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
                 component="a"
                 variant="text"
                 size="small"
-                href={link.url}
-                target={link.external ? '_blank' : target}
+                onClick={(e) => handleLinkClick(e, invoice)}
                 sx={{ color: 'var(--foregrounds-fg-interactive, #0086FF) !important' }}
                 rel="noreferrer">
                 {t('payment.customer.invoice.pay')}
@@ -279,9 +282,9 @@ const InvoiceTable = React.memo((props: Props & { onPay: (invoiceId: string) =>
             );
           }
           return (
-            <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+            <Box onClick={(e) => handleLinkClick(e, invoice)} sx={linkStyle}>
               <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
-            </a>
+            </Box>
           );
         },
       },
@@ -354,6 +357,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
 
   const subscription = useSubscription('events');
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
 
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll<Result>(
     (d) => {
@@ -433,13 +437,17 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
 
   const grouped = groupByDate(data.list as any);
 
+  const handleLinkClick = (e: React.MouseEvent, link: LinkInfo) => {
+    handleNavigation(e, link, navigate, { target: link.external ? '_blank' : target });
+  };
+
   return (
     <Root direction="column" gap={1} sx={{ mt: 1 }}>
       {Object.entries(grouped).map(([date, invoices]) => (
         <Box key={date}>
           <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
           {invoices.map((invoice) => {
-            const link = getInvoiceLink(invoice, action);
+            const { link, connect } = getInvoiceLink(invoice, action);
             return (
               <Stack
                 key={invoice.id}
@@ -453,7 +461,11 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                 alignItems="center"
                 flexWrap="nowrap">
                 <Box flex={2}>
-                  <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+                  <a
+                    href={link.url}
+                    target={link.external ? '_blank' : target}
+                    rel="noreferrer"
+                    onClick={(e) => handleLinkClick(e, link)}>
                     <Stack direction="row" alignItems="center" spacing={0.5}>
                       <Typography component="span">{invoice.number}</Typography>
                       {link.external && (
@@ -482,7 +494,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                 )}
                 <Box flex={1} textAlign="right">
                   {action ? (
-                    link.connect ? (
+                    connect ? (
                       <Button
                         variant="contained"
                         color="primary"
@@ -496,8 +508,7 @@ const InvoiceList = React.memo((props: Props & { onPay: (invoiceId: string) => v
                         component="a"
                         variant="contained"
                         size="small"
-                        href={link.url}
-                        target={link.external ? '_blank' : target}
+                        onClick={(e) => handleLinkClick(e, link)}
                         sx={{ whiteSpace: 'nowrap' }}
                         rel="noreferrer">
                         {t('payment.customer.invoice.pay')}

package/src/libs/navigation.ts

@@ -0,0 +1,89 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { NavigateFunction } from 'react-router-dom';
+import { joinURL } from 'ufo';
+import { getPrefix, PAYMENT_KIT_DID } from './util';
+
+export interface LinkInfo {
+  // Full URL for href attribute
+  url: string;
+  // Whether this is an external link
+  external: boolean;
+  // Original path (used for React Router)
+  path: string;
+}
+
+/**
+ * Check if currently running inside Payment Kit
+ */
+export function isInPaymentKit(): boolean {
+  const componentId = (window.blocklet?.componentId || '').split('/').pop();
+  return componentId === PAYMENT_KIT_DID;
+}
+
+/**
+ * Create link information object
+ * @param path Path or URL
+ * @param external Force external link behavior
+ */
+export function createLink(path: string, external = false): LinkInfo {
+  const isAbsoluteUrl = /^https?:\/\//.test(path);
+  const isExternal = external || isAbsoluteUrl;
+  const url = isExternal ? path : joinURL(getPrefix(), path);
+  return {
+    url,
+    external: isExternal,
+    path,
+  };
+}
+
+/**
+ * Get HTML attributes for a link
+ * @param link Link information
+ * @param target Link target (default: _self)
+ */
+export function getLinkProps(link: LinkInfo, target = '_self'): Record<string, any> {
+  const props: Record<string, any> = {
+    href: link.url,
+  };
+
+  if (link.external) {
+    props.target = target;
+    props.rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+  }
+
+  return props;
+}
+
+/**
+ * Handle link navigation
+ * @param e Click event
+ * @param link Link information
+ * @param navigate React Router navigate function
+ * @param options Navigation options
+ */
+export function handleNavigation(
+  e: React.MouseEvent,
+  link: LinkInfo,
+  navigate?: NavigateFunction,
+  options: { replace?: boolean; target?: string } = {}
+): void {
+  if (e) {
+    e.preventDefault();
+  }
+  const { replace = false, target = '_self' } = options;
+  if (link.external || target === '_blank') {
+    window.open(link.url, target);
+    return;
+  }
+
+  if (isInPaymentKit() && navigate) {
+    navigate(link.path, { replace });
+    return;
+  }
+
+  if (replace) {
+    window.location.replace(link.url);
+  } else {
+    window.location.href = link.url;
+  }
+}

package/src/locales/en.tsx

@@ -254,8 +254,8 @@ export default flat({
         },
       },
       recover: {
-        button: 'Renew',
-        title: 'Renew your subscription',
+        button: 'Resume Subscription',
+        title: 'Resume Your Subscription',
         description:
           'Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue',
       },

package/src/locales/zh.tsx

@@ -247,8 +247,8 @@ export default flat({
         },
       },
       recover: {
-        button: '续订',
-        title: '续订您的订阅',
+        button: '恢复订阅',
+        title: '恢复您的订阅',
         description: '您的订阅将不会被取消，并将在{date}自动续订，请确认是否继续',
       },
       changePlan: {