@blocklet/payment-react 1.18.11 → 1.18.13

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: {