@blocklet/payment-react 1.13.198 → 1.13.200

package/es/components/blockchain/tx.js

@@ -2,39 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import { Link, Stack, Typography } from "@mui/material";
-import { joinURL } from "ufo";
-const getTxLink = (method, details) => {
-  if (method.type === "arcblock" && details.arcblock?.tx_hash) {
-    return {
-      link: joinURL(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
-      text: details.arcblock?.tx_hash
-    };
-  }
-  if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
-    return {
-      link: joinURL(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
-      text: details.bitcoin?.tx_hash
-    };
-  }
-  if (method.type === "ethereum" && details.ethereum?.tx_hash) {
-    return {
-      link: joinURL(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
-      text: details.ethereum?.tx_hash
-    };
-  }
-  if (method.type === "stripe") {
-    const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
-    return {
-      link: joinURL(
-        method.settings.stripe?.dashboard || dashboard,
-        "payments",
-        details.stripe?.payment_intent_id
-      ),
-      text: details.stripe?.payment_intent_id
-    };
-  }
-  return { text: "N/A", link: "" };
-};
+import { getTxLink } from "../../util.js";
 TxLink.defaultProps = {
   mode: "dashboard"
 };

package/es/history/invoice/list.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import { OpenInNewOutlined } from "@mui/icons-material";
 import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
 import { useInfiniteScroll } from "ahooks";
 import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
-import { formatBNStr, formatToDate, getInvoiceStatusColor, getPrefix } from "../../util.js";
+import { formatBNStr, formatToDate, formatToDatetime, getInvoiceStatusColor, getPrefix, getTxLink } from "../../util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -26,6 +27,22 @@ const fetchData = (params = {}) => {
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
+const getInvoiceLink = (invoice, action) => {
+  if (invoice.id.startsWith("in_")) {
+    return {
+      external: false,
+      url: joinURL(
+        window.location.origin,
+        getPrefix(),
+        `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`
+      )
+    };
+  }
+  return {
+    external: true,
+    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
+  };
+};
 export default function CustomerInvoiceList({
   customer_id,
   subscription_id,
@@ -43,59 +60,57 @@ export default function CustomerInvoiceList({
       return fetchData({ page, pageSize: size, status, customer_id, currency_id, subscription_id, ignoreZero: true });
     },
     {
-      reloadDeps: [customer_id]
+      reloadDeps: [customer_id, subscription_id, status]
     }
   );
   if (loading || !data) {
     return /* @__PURE__ */ jsx(CircularProgress, {});
   }
   if (data && data.list.length === 0) {
-    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") });
+    if (data.subscription && ["active", "trialing"].includes(data.subscription.status)) {
+      return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.next", { date: formatToDatetime(data.subscription.current_period_end * 1e3) }) });
+    }
+    return /* @__PURE__ */ jsx(Typography, { color: "text.secondary", sx: { my: 0.5 }, children: t("payment.customer.invoice.empty") });
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
   return /* @__PURE__ */ jsxs(Stack, { 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) => /* @__PURE__ */ jsxs(
-        Stack,
-        {
-          direction: {
-            xs: "column",
-            sm: "row"
-          },
-          sx: { my: 1 },
-          gap: {
-            xs: 0.5,
-            sm: 1.5,
-            md: 3
+      invoices.map((invoice) => {
+        const link = getInvoiceLink(invoice, action);
+        return /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: {
+              xs: "column",
+              sm: "row"
+            },
+            sx: { my: 1 },
+            gap: {
+              xs: 0.5,
+              sm: 1.5,
+              md: 3
+            },
+            flexWrap: "nowrap",
+            children: [
+              /* @__PURE__ */ jsx(Box, { flex: 3, 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(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } })
+              ] }) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
+                formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
+                "\xA0",
+                invoice.paymentCurrency.symbol
+              ] }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) })
+            ]
           },
-          flexWrap: "nowrap",
-          children: [
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: joinURL(
-                  window.location.origin,
-                  getPrefix(),
-                  `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`
-                ),
-                target,
-                children: /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsxs(Typography, { textAlign: "right", children: [
-              formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
-              "\xA0",
-              invoice.paymentCurrency.symbol
-            ] }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) })
-          ]
-        },
-        invoice.id
-      ))
+          invoice.id
+        );
+      })
     ] }, date)),
     /* @__PURE__ */ jsxs(Box, { children: [
       hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.invoices") }) : t("common.loadMore", { resource: t("payment.customer.invoices") }) }),

package/es/history/mini-invoice/list.js

@@ -19,10 +19,10 @@ import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
   formatBNStr,
+  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
-  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor
@@ -117,13 +117,14 @@ export default function MiniInvoiceList() {
             /* @__PURE__ */ jsx(ListSubheader, { disableGutters: true, sx: { padding: 0 }, children: /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", fontSize: "16px", children: t("payment.customer.invoices") }) }),
             invoices.length === 0 ? /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") }) : invoices.map((item) => {
               return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatToDate(item.created_at) }),
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: formatDateTime(item.created_at, locale) }),
                 /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
                   formatBNStr(item.total, item.paymentCurrency.decimal),
                   "\xA0",
                   item.paymentCurrency.symbol
                 ] }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status), sx: { flex: 2 } }) })
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) }),
+                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 3 }, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) })
               ] }, item.id);
             })
           ] }) }),
@@ -148,7 +149,6 @@ export default function MiniInvoiceList() {
             /* @__PURE__ */ jsx(
               Button,
               {
-                target: "_blank",
                 variant: "contained",
                 sx: { color: "#fff!important", width: subscription.service_actions?.length ? "auto" : "100%" },
                 href: joinURL(

package/es/locales/en.js

@@ -231,7 +231,8 @@ export default flat({
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
-        empty: "There are no invoices"
+        empty: "There are no invoices",
+        next: "No invoices yet, next invoice will be generated on {date}"
       },
       payment: {
         empty: "There are no payments"

package/es/locales/zh.js

@@ -213,7 +213,7 @@ export default flat({
         review: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
         select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
         submit: "\u786E\u8BA4\u53D8\u66F4",
-        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8{payee}\u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8 {payee} \u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
         completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
       invoice: {
@@ -231,7 +231,8 @@ export default flat({
         renew: "\u6062\u590D\u8BA2\u9605",
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
-        empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
+        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
@@ -241,7 +242,7 @@ export default flat({
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
-        nextInvoice: "\u4E0B\u4E00\u5F20\u8D26\u5355",
+        nextInvoice: "\u4E0B\u6B21\u8D26\u5355",
         title: "\u8BA2\u9605\u7BA1\u7406",
         view: "\u7BA1\u7406\u8BA2\u9605",
         current: "\u5F53\u524D\u8BA2\u9605",

package/es/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -62,3 +62,7 @@ export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
 export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
     omit: never;
 }>[];
+export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails) => {
+    link: string;
+    text: string;
+};

package/es/util.js

@@ -2,6 +2,7 @@ import { BN, fromUnitToToken } from "@ocap/util";
 import trimEnd from "lodash/trimEnd";
 import numbro from "numbro";
 import { defaultCountries } from "react-international-phone";
+import { joinURL } from "ufo";
 import dayjs from "./dayjs.js";
 import { t } from "./locales/index.js";
 export const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
@@ -506,3 +507,35 @@ export const flattenPaymentMethods = (methods = []) => {
   });
   return out;
 };
+export const getTxLink = (method, details) => {
+  if (method.type === "arcblock" && details.arcblock?.tx_hash) {
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
+      text: details.arcblock?.tx_hash
+    };
+  }
+  if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
+      text: details.bitcoin?.tx_hash
+    };
+  }
+  if (method.type === "ethereum" && details.ethereum?.tx_hash) {
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
+      text: details.ethereum?.tx_hash
+    };
+  }
+  if (method.type === "stripe") {
+    const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        "payments",
+        details.stripe?.payment_intent_id
+      ),
+      text: details.stripe?.payment_intent_id
+    };
+  }
+  return { text: "N/A", link: "" };
+};

package/lib/components/blockchain/tx.js

@@ -8,38 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
-var _ufo = require("ufo");
-const getTxLink = (method, details) => {
-  if (method.type === "arcblock" && details.arcblock?.tx_hash) {
-    return {
-      link: (0, _ufo.joinURL)(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
-      text: details.arcblock?.tx_hash
-    };
-  }
-  if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
-    return {
-      link: (0, _ufo.joinURL)(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
-      text: details.bitcoin?.tx_hash
-    };
-  }
-  if (method.type === "ethereum" && details.ethereum?.tx_hash) {
-    return {
-      link: (0, _ufo.joinURL)(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
-      text: details.ethereum?.tx_hash
-    };
-  }
-  if (method.type === "stripe") {
-    const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
-    return {
-      link: (0, _ufo.joinURL)(method.settings.stripe?.dashboard || dashboard, "payments", details.stripe?.payment_intent_id),
-      text: details.stripe?.payment_intent_id
-    };
-  }
-  return {
-    text: "N/A",
-    link: ""
-  };
-};
+var _util = require("../../util");
 TxLink.defaultProps = {
   mode: "dashboard"
 };
@@ -57,7 +26,7 @@ function TxLink(props) {
   const {
     text,
     link
-  } = getTxLink(props.method, props.details);
+  } = (0, _util.getTxLink)(props.method, props.details);
   if (link) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
       href: link,

package/lib/history/invoice/list.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = CustomerInvoiceList;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _ahooks = require("ahooks");
 var _ufo = require("ufo");
@@ -33,6 +34,18 @@ const fetchData = (params = {}) => {
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
+const getInvoiceLink = (invoice, action) => {
+  if (invoice.id.startsWith("in_")) {
+    return {
+      external: false,
+      url: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`)
+    };
+  }
+  return {
+    external: true,
+    url: (0, _util.getTxLink)(invoice.paymentMethod, invoice.metadata?.payment_details).link
+  };
+};
 function CustomerInvoiceList({
   customer_id,
   subscription_id,
@@ -63,14 +76,28 @@ function CustomerInvoiceList({
       ignoreZero: true
     });
   }, {
-    reloadDeps: [customer_id]
+    reloadDeps: [customer_id, subscription_id, status]
   });
   if (loading || !data) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
   }
   if (data && data.list.length === 0) {
+    if (data.subscription && ["active", "trialing"].includes(data.subscription.status)) {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        color: "text.secondary",
+        sx: {
+          my: 0.5
+        },
+        children: t("payment.customer.invoice.next", {
+          date: (0, _util.formatToDatetime)(data.subscription.current_period_end * 1e3)
+        })
+      });
+    }
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       color: "text.secondary",
+      sx: {
+        my: 0.5
+      },
       children: t("payment.customer.invoice.empty")
     });
   }
@@ -91,54 +118,68 @@ function CustomerInvoiceList({
           mb: 1
         },
         children: date
-      }), invoices.map(invoice => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: {
-          xs: "column",
-          sm: "row"
-        },
-        sx: {
-          my: 1
-        },
-        gap: {
-          xs: 0.5,
-          sm: 1.5,
-          md: 3
-        },
-        flexWrap: "nowrap",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-            href: (0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`),
-            target,
+      }), invoices.map(invoice => {
+        const link = getInvoiceLink(invoice, action);
+        return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: {
+            xs: "column",
+            sm: "row"
+          },
+          sx: {
+            my: 1
+          },
+          gap: {
+            xs: 0.5,
+            sm: 1.5,
+            md: 3
+          },
+          flexWrap: "nowrap",
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 3,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+              href: link.url,
+              target: link.external ? "_blank" : target,
+              rel: "noreferrer",
+              children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 0.5,
+                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  component: "span",
+                  children: invoice.number
+                }), link.external && /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
+                  fontSize: "small",
+                  sx: {
+                    color: "text.secondary"
+                  }
+                })]
+              })
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 3,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: (0, _util.formatToDate)(invoice.created_at)
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 2,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+              textAlign: "right",
+              children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 2,
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
+              label: invoice.status,
+              color: (0, _util.getInvoiceStatusColor)(invoice.status)
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+            flex: 4,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "span",
-              children: invoice.number
+              children: invoice.description || invoice.id
             })
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 3,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: (0, _util.formatToDate)(invoice.created_at)
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 2,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-            textAlign: "right",
-            children: [(0, _util.formatBNStr)(invoice.total, invoice.paymentCurrency.decimal), "\xA0", invoice.paymentCurrency.symbol]
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 2,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-            label: invoice.status,
-            color: (0, _util.getInvoiceStatusColor)(invoice.status)
-          })
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 4,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            children: invoice.description || invoice.id
-          })
-        })]
-      }, invoice.id))]
+          })]
+        }, invoice.id);
+      })]
     }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
       children: [hasMore && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
         variant: "text",

package/lib/history/mini-invoice/list.js

@@ -175,7 +175,7 @@ function MiniInvoiceList() {
                 sx: {
                   flex: 3
                 },
-                children: (0, _util.formatToDate)(item.created_at)
+                children: (0, _util.formatDateTime)(item.created_at, locale)
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
                 sx: {
@@ -187,14 +187,19 @@ function MiniInvoiceList() {
                 component: "span",
                 sx: {
                   flex: 2,
-                  textAlign: "right"
+                  textAlign: "center"
                 },
                 children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
                   label: item.status,
-                  color: (0, _util.getInvoiceStatusColor)(item.status),
-                  sx: {
-                    flex: 2
-                  }
+                  color: (0, _util.getInvoiceStatusColor)(item.status)
+                })
+              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                component: "span",
+                sx: {
+                  flex: 3
+                },
+                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+                  children: item.description || item.id
                 })
               })]
             }, item.id);
@@ -222,7 +227,6 @@ function MiniInvoiceList() {
           },
           children: x.text[locale] || x.text.en || x.name
         }, x.name)), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-          target: "_blank",
           variant: "contained",
           sx: {
             color: "#fff!important",

package/lib/locales/en.js

@@ -238,7 +238,8 @@ module.exports = (0, _flat.default)({
         renew: "Renew the subscription",
         renewSuccess: "You have successfully renewed the subscription",
         renewError: "Failed to renew the subscription",
-        empty: "There are no invoices"
+        empty: "There are no invoices",
+        next: "No invoices yet, next invoice will be generated on {date}"
       },
       payment: {
         empty: "There are no payments"

package/lib/locales/zh.js

@@ -220,7 +220,7 @@ module.exports = (0, _flat.default)({
         review: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
         select: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
         submit: "\u786E\u8BA4\u53D8\u66F4",
-        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8{payee}\u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
+        confirm: "\u786E\u8BA4\u53D8\u66F4\u65B9\u5F0F\u610F\u5473\u7740\u4F60\u5141\u8BB8 {payee} \u4F7F\u7528\u65B0\u7684\u652F\u4ED8\u65B9\u5F0F\u652F\u4ED8\u4F60\u7684\u672A\u6765\u8D26\u5355\u3002\u4F60\u53EF\u4EE5\u968F\u65F6\u518D\u6B21\u53D8\u66F4\u652F\u4ED8\u65B9\u5F0F\u3002",
         completed: "\u4F60\u7684\u652F\u4ED8\u65B9\u5F0F \u5DF2\u7ECF\u66F4\u65B0\u6210\u529F\u3002\u4F60\u53EF\u4EE5\u5728\u4F60\u7684\u8D26\u6237\u4E2D\u67E5\u770B\u6B64\u652F\u4ED8\u65B9\u5F0F\u7684\u8BE6\u7EC6\u4FE1\u606F\u3002"
       },
       invoice: {
@@ -238,7 +238,8 @@ module.exports = (0, _flat.default)({
         renew: "\u6062\u590D\u8BA2\u9605",
         renewSuccess: "\u8BA2\u9605\u6062\u590D\u6210\u529F",
         renewError: "\u8BA2\u9605\u6062\u590D\u5931\u8D25",
-        empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
+        next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55"
@@ -248,7 +249,7 @@ module.exports = (0, _flat.default)({
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
-        nextInvoice: "\u4E0B\u4E00\u5F20\u8D26\u5355",
+        nextInvoice: "\u4E0B\u6B21\u8D26\u5355",
         title: "\u8BA2\u9605\u7BA1\u7406",
         view: "\u7BA1\u7406\u8BA2\u9605",
         current: "\u5F53\u524D\u8BA2\u9605",

package/lib/util.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
+import type { PaymentDetails, PriceCurrency, PriceRecurring, TLineItemExpanded, TPaymentCurrency, TPaymentMethod, TPaymentMethodExpanded, TPrice, TSubscriptionExpanded, TSubscriptionItemExpanded } from '@blocklet/payment-types';
 export declare const PAYMENT_KIT_DID = "z2qaCNvKMv5GjouKdcDWexv6WqtHbpNPQDnAk";
 export declare const getPrefix: () => any;
 export declare function formatToDate(date: Date | string | number, locale?: string): any;
@@ -62,3 +62,7 @@ export declare const mergeExtraParams: (extra?: Record<string, any>) => string;
 export declare const flattenPaymentMethods: (methods?: TPaymentMethodExpanded[]) => import("sequelize").InferAttributes<import("@blocklet/payment-types").PaymentCurrency, {
     omit: never;
 }>[];
+export declare const getTxLink: (method: TPaymentMethod, details: PaymentDetails) => {
+    link: string;
+    text: string;
+};

package/lib/util.js

@@ -32,7 +32,7 @@ exports.getRefundStatusColor = getRefundStatusColor;
 exports.getStatementDescriptor = getStatementDescriptor;
 exports.getSubscriptionAction = void 0;
 exports.getSubscriptionStatusColor = getSubscriptionStatusColor;
-exports.getSubscriptionTimeSummary = void 0;
+exports.getTxLink = exports.getSubscriptionTimeSummary = void 0;
 exports.getWebhookStatusColor = getWebhookStatusColor;
 exports.isValidCountry = isValidCountry;
 exports.mergeExtraParams = void 0;
@@ -42,6 +42,7 @@ var _util = require("@ocap/util");
 var _trimEnd = _interopRequireDefault(require("lodash/trimEnd"));
 var _numbro = _interopRequireDefault(require("numbro"));
 var _reactInternationalPhone = require("react-international-phone");
+var _ufo = require("ufo");
 var _dayjs = _interopRequireDefault(require("./dayjs"));
 var _locales = require("./locales");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -620,4 +621,36 @@ const flattenPaymentMethods = (methods = []) => {
   });
   return out;
 };
-exports.flattenPaymentMethods = flattenPaymentMethods;
+exports.flattenPaymentMethods = flattenPaymentMethods;
+const getTxLink = (method, details) => {
+  if (method.type === "arcblock" && details.arcblock?.tx_hash) {
+    return {
+      link: (0, _ufo.joinURL)(method.settings.arcblock?.explorer_host, "/txs", details.arcblock?.tx_hash),
+      text: details.arcblock?.tx_hash
+    };
+  }
+  if (method.type === "bitcoin" && details.bitcoin?.tx_hash) {
+    return {
+      link: (0, _ufo.joinURL)(method.settings.bitcoin?.explorer_host, "/tx", details.bitcoin?.tx_hash),
+      text: details.bitcoin?.tx_hash
+    };
+  }
+  if (method.type === "ethereum" && details.ethereum?.tx_hash) {
+    return {
+      link: (0, _ufo.joinURL)(method.settings.ethereum?.explorer_host, "/tx", details.ethereum?.tx_hash),
+      text: details.ethereum?.tx_hash
+    };
+  }
+  if (method.type === "stripe") {
+    const dashboard = method.livemode ? "https://dashboard.stripe.com" : "https://dashboard.stripe.com/test";
+    return {
+      link: (0, _ufo.joinURL)(method.settings.stripe?.dashboard || dashboard, "payments", details.stripe?.payment_intent_id),
+      text: details.stripe?.payment_intent_id
+    };
+  }
+  return {
+    text: "N/A",
+    link: ""
+  };
+};
+exports.getTxLink = getTxLink;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.198",
+  "version": "1.13.200",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -90,7 +90,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.198",
+    "@blocklet/payment-types": "1.13.200",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -119,5 +119,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "903ca3e8cab9871dd600d8b1669f9c96234d137c"
+  "gitHead": "c57f8e82c4c319183c371393f1bb9891366a36f6"
 }

package/src/components/blockchain/tx.tsx

@@ -2,41 +2,8 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
-import { joinURL } from 'ufo';
 
-const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
-  if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
-    return {
-      link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
-      text: details.arcblock?.tx_hash as string,
-    };
-  }
-  if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
-    return {
-      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
-      text: details.bitcoin?.tx_hash as string,
-    };
-  }
-  if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
-    return {
-      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
-      text: details.ethereum?.tx_hash as string,
-    };
-  }
-  if (method.type === 'stripe') {
-    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
-    return {
-      link: joinURL(
-        method.settings.stripe?.dashboard || dashboard,
-        'payments',
-        details.stripe?.payment_intent_id as string
-      ),
-      text: details.stripe?.payment_intent_id as string,
-    };
-  }
-
-  return { text: 'N/A', link: '' };
-};
+import { getTxLink } from '../../util';
 
 TxLink.defaultProps = {
   mode: 'dashboard',

package/src/history/invoice/list.tsx

@@ -1,13 +1,16 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
+import type { Paginated, TInvoiceExpanded, TSubscription } from '@blocklet/payment-types';
+import { OpenInNewOutlined } from '@mui/icons-material';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { useInfiniteScroll } from 'ahooks';
 import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
-import { formatBNStr, formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
+import { formatBNStr, formatToDate, formatToDatetime, getInvoiceStatusColor, getPrefix, getTxLink } from '../../util';
+
+type Result = Paginated<TInvoiceExpanded> & { subscription: TSubscription };
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -21,7 +24,7 @@ const groupByDate = (items: TInvoiceExpanded[]) => {
   return grouped;
 };
 
-const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+const fetchData = (params: Record<string, any> = {}): Promise<Result> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     if (params[key]) {
@@ -41,6 +44,24 @@ type Props = {
   action?: string;
 };
 
+const getInvoiceLink = (invoice: TInvoiceExpanded, action?: string) => {
+  if (invoice.id.startsWith('in_')) {
+    return {
+      external: false,
+      url: joinURL(
+        window.location.origin,
+        getPrefix(),
+        `/customer/invoice/${invoice.id}?action=${invoice.status === 'uncollectible' ? action : ''}`
+      ),
+    };
+  }
+
+  return {
+    external: true,
+    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link,
+  };
+};
+
 export default function CustomerInvoiceList({
   customer_id,
   subscription_id,
@@ -53,13 +74,13 @@ export default function CustomerInvoiceList({
   const { t } = useLocaleContext();
   const size = pageSize || 10;
 
-  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
+  const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Result>(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
       return fetchData({ page, pageSize: size, status, customer_id, currency_id, subscription_id, ignoreZero: true });
     },
     {
-      reloadDeps: [customer_id],
+      reloadDeps: [customer_id, subscription_id, status],
     }
   );
 
@@ -68,7 +89,19 @@ export default function CustomerInvoiceList({
   }
 
   if (data && data.list.length === 0) {
-    return <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>;
+    if (data.subscription && ['active', 'trialing'].includes(data.subscription.status)) {
+      return (
+        <Typography color="text.secondary" sx={{ my: 0.5 }}>
+          {t('payment.customer.invoice.next', { date: formatToDatetime(data.subscription.current_period_end * 1000) })}
+        </Typography>
+      );
+    }
+
+    return (
+      <Typography color="text.secondary" sx={{ my: 0.5 }}>
+        {t('payment.customer.invoice.empty')}
+      </Typography>
+    );
   }
 
   const hasMore = data && data.list.length < data.count;
@@ -80,48 +113,48 @@ export default function CustomerInvoiceList({
       {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) => (
-            <Stack
-              key={invoice.id}
-              direction={{
-                xs: 'column',
-                sm: 'row',
-              }}
-              sx={{ my: 1 }}
-              gap={{
-                xs: 0.5,
-                sm: 1.5,
-                md: 3,
-              }}
-              flexWrap="nowrap">
-              <Box flex={3}>
-                <a
-                  href={joinURL(
-                    window.location.origin,
-                    getPrefix(),
-                    `/customer/invoice/${invoice.id}?action=${invoice.status === 'uncollectible' ? action : ''}`
-                  )}
-                  target={target}>
-                  <Typography component="span">{invoice.number}</Typography>
-                </a>
-              </Box>
-              <Box flex={3}>
-                <Typography>{formatToDate(invoice.created_at)}</Typography>
-              </Box>
-              <Box flex={2}>
-                <Typography textAlign="right">
-                  {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
-                  {invoice.paymentCurrency.symbol}
-                </Typography>
-              </Box>
-              <Box flex={2}>
-                <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
-              </Box>
-              <Box flex={4}>
-                <Typography>{invoice.description || invoice.id}</Typography>
-              </Box>
-            </Stack>
-          ))}
+          {invoices.map((invoice) => {
+            const link = getInvoiceLink(invoice, action);
+            return (
+              <Stack
+                key={invoice.id}
+                direction={{
+                  xs: 'column',
+                  sm: 'row',
+                }}
+                sx={{ my: 1 }}
+                gap={{
+                  xs: 0.5,
+                  sm: 1.5,
+                  md: 3,
+                }}
+                flexWrap="nowrap">
+                <Box flex={3}>
+                  <a href={link.url} target={link.external ? '_blank' : target} rel="noreferrer">
+                    <Stack direction="row" alignItems="center" spacing={0.5}>
+                      <Typography component="span">{invoice.number}</Typography>
+                      {link.external && <OpenInNewOutlined fontSize="small" sx={{ color: 'text.secondary' }} />}
+                    </Stack>
+                  </a>
+                </Box>
+                <Box flex={3}>
+                  <Typography>{formatToDate(invoice.created_at)}</Typography>
+                </Box>
+                <Box flex={2}>
+                  <Typography textAlign="right">
+                    {formatBNStr(invoice.total, invoice.paymentCurrency.decimal)}&nbsp;
+                    {invoice.paymentCurrency.symbol}
+                  </Typography>
+                </Box>
+                <Box flex={2}>
+                  <Status label={invoice.status} color={getInvoiceStatusColor(invoice.status)} />
+                </Box>
+                <Box flex={4}>
+                  <Typography>{invoice.description || invoice.id}</Typography>
+                </Box>
+              </Stack>
+            );
+          })}
         </Box>
       ))}
       <Box>

package/src/history/mini-invoice/list.tsx

@@ -21,10 +21,10 @@ import api from '../../api';
 import Status from '../../components/status';
 import {
   formatBNStr,
+  formatDateTime,
   formatError,
   formatSubscriptionProduct,
   formatTime,
-  formatToDate,
   getInvoiceStatusColor,
   getPrefix,
   getSubscriptionStatusColor,
@@ -157,14 +157,17 @@ export default function MiniInvoiceList() {
                 return (
                   <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
                     <Typography component="span" sx={{ flex: 3 }}>
-                      {formatToDate(item.created_at)}
+                      {formatDateTime(item.created_at, locale)}
                     </Typography>
                     <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
                       {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
                       {item.paymentCurrency.symbol}
                     </Typography>
-                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
-                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} sx={{ flex: 2 }} />
+                    <Typography component="span" sx={{ flex: 2, textAlign: 'center' }}>
+                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 3 }}>
+                      <Typography>{item.description || item.id}</Typography>
                     </Typography>
                   </ListItem>
                 );
@@ -188,7 +191,6 @@ export default function MiniInvoiceList() {
             </Button>
           ))}
           <Button
-            target="_blank"
             variant="contained"
             sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
             href={joinURL(

package/src/locales/en.tsx

@@ -241,6 +241,7 @@ export default flat({
         renewSuccess: 'You have successfully renewed the subscription',
         renewError: 'Failed to renew the subscription',
         empty: 'There are no invoices',
+        next: 'No invoices yet, next invoice will be generated on {date}',
       },
       payment: {
         empty: 'There are no payments',

package/src/locales/zh.tsx

@@ -215,7 +215,7 @@ export default flat({
         review: '查看订阅详情',
         select: '选择支付方式',
         submit: '确认变更',
-        confirm: '确认变更方式意味着你允许{payee}使用新的支付方式支付你的未来账单。你可以随时再次变更支付方式。',
+        confirm: '确认变更方式意味着你允许 {payee} 使用新的支付方式支付你的未来账单。你可以随时再次变更支付方式。',
         completed: '你的支付方式 已经更新成功。你可以在你的账户中查看此支付方式的详细信息。',
       },
       invoice: {
@@ -234,6 +234,7 @@ export default flat({
         renewSuccess: '订阅恢复成功',
         renewError: '订阅恢复失败',
         empty: '没有任何账单',
+        next: '还没有账单，下次账单将在 {date} 生成',
       },
       payment: {
         empty: '没有支付记录',
@@ -243,7 +244,7 @@ export default flat({
       },
       subscriptions: {
         plan: '订阅',
-        nextInvoice: '下一张账单',
+        nextInvoice: '下次账单',
         title: '订阅管理',
         view: '管理订阅',
         current: '当前订阅',

package/src/util.ts

@@ -1,10 +1,12 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable @typescript-eslint/indent */
 import type {
+  PaymentDetails,
   PriceCurrency,
   PriceRecurring,
   TLineItemExpanded,
   TPaymentCurrency,
+  TPaymentMethod,
   TPaymentMethodExpanded,
   TPrice,
   TSubscriptionExpanded,
@@ -14,6 +16,7 @@ import { BN, fromUnitToToken } from '@ocap/util';
 import trimEnd from 'lodash/trimEnd';
 import numbro from 'numbro';
 import { defaultCountries } from 'react-international-phone';
+import { joinURL } from 'ufo';
 
 import dayjs from './dayjs';
 import { t } from './locales';
@@ -676,3 +679,37 @@ export const flattenPaymentMethods = (methods: TPaymentMethodExpanded[] = []) =>
 
   return out;
 };
+
+export const getTxLink = (method: TPaymentMethod, details: PaymentDetails) => {
+  if (method.type === 'arcblock' && details.arcblock?.tx_hash) {
+    return {
+      link: joinURL(method.settings.arcblock?.explorer_host as string, '/txs', details.arcblock?.tx_hash as string),
+      text: details.arcblock?.tx_hash as string,
+    };
+  }
+  if (method.type === 'bitcoin' && details.bitcoin?.tx_hash) {
+    return {
+      link: joinURL(method.settings.bitcoin?.explorer_host as string, '/tx', details.bitcoin?.tx_hash as string),
+      text: details.bitcoin?.tx_hash as string,
+    };
+  }
+  if (method.type === 'ethereum' && details.ethereum?.tx_hash) {
+    return {
+      link: joinURL(method.settings.ethereum?.explorer_host as string, '/tx', details.ethereum?.tx_hash as string),
+      text: details.ethereum?.tx_hash as string,
+    };
+  }
+  if (method.type === 'stripe') {
+    const dashboard = method.livemode ? 'https://dashboard.stripe.com' : 'https://dashboard.stripe.com/test';
+    return {
+      link: joinURL(
+        method.settings.stripe?.dashboard || dashboard,
+        'payments',
+        details.stripe?.payment_intent_id as string
+      ),
+      text: details.stripe?.payment_intent_id as string,
+    };
+  }
+
+  return { text: 'N/A', link: '' };
+};