@blocklet/payment-react 1.18.11 → 1.18.13

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.11",
+  "version": "1.18.13",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -55,13 +55,13 @@
   "dependencies": {
     "@arcblock/did-connect": "^2.11.48",
     "@arcblock/ux": "^2.11.48",
-    "@arcblock/ws": "^1.19.10",
+    "@arcblock/ws": "^1.19.14",
     "@blocklet/ui-react": "^2.11.48",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.19.10",
+    "@ocap/util": "^1.19.14",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -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.11",
+    "@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": "370cb327400359ab5972ef60316ccd7fc86c174e"
+  "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;