@blocklet/payment-react 1.13.130 → 1.13.131

package/es/components/blockchain/tx.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
+declare function TxLink(props: {
+    details: PaymentDetails;
+    method: TPaymentMethod;
+    mode?: 'customer' | 'dashboard';
+}): import("react").JSX.Element;
+declare namespace TxLink {
+    var defaultProps: {
+        mode: string;
+    };
+}
+export default TxLink;

package/es/components/blockchain/tx.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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: "" };
+};
+TxLink.defaultProps = {
+  mode: "dashboard"
+};
+export default function TxLink(props) {
+  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
+    return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: "None" });
+  }
+  const { text, link } = getTxLink(props.method, props.details);
+  if (link) {
+    return /* @__PURE__ */ jsx(Link, { href: link, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsxs(Stack, { component: "span", direction: "row", alignItems: "center", spacing: 1, children: [
+      /* @__PURE__ */ jsx(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text }),
+      /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: "None" });
+}

package/es/history/invoice/list.js

@@ -3,9 +3,10 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
 import { fromUnitToToken } from "@ocap/util";
 import { useInfiniteScroll } from "ahooks";
+import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
-import { formatToDate, getInvoiceStatusColor } from "../../util.js";
+import { formatToDate, getInvoiceStatusColor, getPrefix } from "../../util.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -64,7 +65,7 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }) {
           },
           flexWrap: "nowrap",
           children: [
-            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx("a", { href: `/customer/invoice/${invoice.id}`, children: /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }) }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx("a", { href: joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`), 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: [
               fromUnitToToken(invoice.total, invoice.paymentCurrency.decimal),

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

@@ -3,6 +3,7 @@ import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from "@mui/material";
 import { fromUnitToToken } from "@ocap/util";
 import { useRequest } from "ahooks";
+import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
@@ -10,6 +11,7 @@ import {
   formatTime,
   formatToDate,
   getInvoiceStatusColor,
+  getPrefix,
   getSubscriptionStatusColor
 } from "../../util.js";
 const fetchInvoiceData = (params = {}) => {
@@ -29,12 +31,10 @@ export default function MiniInvoiceList() {
   const { data } = useRequest(
     () => fetchInvoiceData({ page: 1, pageSize: 10, status: "open,paid,uncollectible", subscription_id: subscriptionId })
   );
-  if (!data || !subscription) {
+  if (!subscription || !data) {
     return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
-  if (data && data.list.length === 0) {
-    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("payment.customer.invoice.empty") }) });
-  }
+  const invoices = data.list || [];
   const infoList = [
     {
       name: t("payment.customer.subscriptions.plan"),
@@ -43,8 +43,10 @@ export default function MiniInvoiceList() {
     {
       name: t("common.status"),
       value: /* @__PURE__ */ jsx(Status, { label: subscription.status, color: getSubscriptionStatusColor(subscription.status) })
-    },
-    {
+    }
+  ];
+  if (subscription.status === "active" || subscription.status === "trailing") {
+    infoList.push({
       name: t("payment.customer.subscriptions.nextInvoice"),
       value: /* @__PURE__ */ jsx(
         Typography,
@@ -57,13 +59,14 @@ export default function MiniInvoiceList() {
           children: formatTime(subscription.current_period_end * 1e3)
         }
       )
-    }
-  ];
+    });
+  }
   return /* @__PURE__ */ jsxs(Position, { children: [
     /* @__PURE__ */ jsx(Typography, { title: t("payment.checkout.subscription") }),
     /* @__PURE__ */ jsxs(
       Box,
       {
+        className: "mini-invoice-wrap",
         sx: {
           display: "flex",
           flexDirection: "column",
@@ -82,28 +85,30 @@ export default function MiniInvoiceList() {
             ] }, name);
           }) }) }),
           /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsxs(
-            List,
+          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px", flex: 1 }, children: /* @__PURE__ */ jsxs(List, { sx: { overflow: "auto" }, className: "mini-invoice-list", children: [
+            /* @__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__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
+                  fromUnitToToken(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 } }) })
+              ] }, item.id);
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            Button,
             {
-              sx: { overflow: "auto", maxHeight: { xs: "240px", md: "360px", padding: 0 } },
-              className: "mini-invoice-list",
-              children: [
-                /* @__PURE__ */ jsx(ListSubheader, { disableGutters: true, sx: { padding: 0 }, children: /* @__PURE__ */ jsx(Typography, { component: "h2", variant: "h6", fontSize: "16px", children: t("payment.customer.invoices") }) }),
-                (data.list || []).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__ */ jsxs(Typography, { component: "span", sx: { flex: 1 }, children: [
-                      fromUnitToToken(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 } }) })
-                  ] }, item.id);
-                })
-              ]
+              target: "_blank",
+              variant: "contained",
+              sx: { marginTop: "10px 0", width: "100%", color: "#fff!important" },
+              href: joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`),
+              children: t("payment.customer.subscriptions.title")
             }
-          ) }),
-          /* @__PURE__ */ jsx(Button, { target: "_top", variant: "contained", sx: { marginTop: "10px 0", width: "100%" }, href: "", children: t("payment.customer.subscriptions.title") })
+          )
         ]
       }
     )
@@ -115,7 +120,6 @@ function Position({ children }) {
     {
       className: "mini-invoice-box",
       sx: {
-        justifyContent: "center",
         padding: "8px",
         width: "100%",
         maxWidth: "500px",

package/es/history/payment/list.js

@@ -4,6 +4,7 @@ import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material"
 import { fromUnitToToken } from "@ocap/util";
 import { useInfiniteScroll } from "ahooks";
 import api from "../../api.js";
+import TxLink from "../../components/blockchain/tx.js";
 import Status from "../../components/status.js";
 import { formatToDate, getPaymentIntentStatusColor } from "../../util.js";
 const groupByDate = (items) => {
@@ -69,7 +70,15 @@ export default function CustomerPaymentList({ customer_id }) {
               item.paymentCurrency.symbol
             ] }) }),
             /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) }) }),
-            /* @__PURE__ */ jsx(Box, { flex: 4, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) })
+            /* @__PURE__ */ jsx(Box, { flex: 3, children: /* @__PURE__ */ jsx(Typography, { children: item.description || item.id }) }),
+            /* @__PURE__ */ jsx(Box, { flex: 3, sx: { minWidth: "220px" }, children: item.payment_details?.arcblock?.tx_hash && /* @__PURE__ */ jsx(
+              TxLink,
+              {
+                details: item.payment_details,
+                method: item.paymentMethod,
+                mode: "customer"
+              }
+            ) })
           ]
         },
         item.id

package/es/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -18,4 +19,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/es/index.js

@@ -1,6 +1,7 @@
 import api from "./api.js";
 import CheckoutForm from "./checkout/form.js";
 import CheckoutTable from "./checkout/table.js";
+import TxLink from "./components/blockchain/tx.js";
 import ConfirmDialog from "./components/confirm.js";
 import FormInput from "./components/input.js";
 import Livemode from "./components/livemode.js";
@@ -35,5 +36,6 @@ export {
   Amount,
   CustomerInvoiceList,
   CustomerPaymentList,
-  MiniInvoiceList
+  MiniInvoiceList,
+  TxLink
 };

package/es/locales/en.js

@@ -202,17 +202,17 @@ export default flat({
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
         payError: "Failed to paid the invoice",
-        empty: "Seems you do not have any invoice here"
+        empty: "There are no invoices here"
       },
       payment: {
-        empty: "Seems you do not have any payment here"
+        empty: "There are no payments here"
       },
       subscriptions: {
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscription",
-        empty: "Seems you do not have any subscriptions here"
+        empty: "There are no subscriptions here"
       }
     }
   }

package/es/locales/zh.js

@@ -202,17 +202,17 @@ export default flat({
         pay: "\u652F\u4ED8\u6B64\u53D1\u7968",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
         payError: "\u652F\u4ED8\u5931\u8D25",
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
       },
       payment: {
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u4F60\u8FD8\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
       }
     }
   }

package/es/util.js

@@ -226,9 +226,12 @@ export function getWebhookStatusColor(status) {
 }
 export function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new BN(0);
-  const total = items.reduce((acc, x) => {
+  const total = items.filter((x) => {
     const price = upsell ? x.upsell_price || x.price : x.price;
-    if (price.type === "recurring") {
+    return price != null;
+  }).reduce((acc, x) => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    if (price?.type === "recurring") {
       renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
       if (includeFreeTrial) {
         return acc;

package/lib/components/blockchain/tx.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
+declare function TxLink(props: {
+    details: PaymentDetails;
+    method: TPaymentMethod;
+    mode?: 'customer' | 'dashboard';
+}): import("react").JSX.Element;
+declare namespace TxLink {
+    var defaultProps: {
+        mode: string;
+    };
+}
+export default TxLink;

package/lib/components/blockchain/tx.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = TxLink;
+var _jsxRuntime = require("react/jsx-runtime");
+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: ""
+  };
+};
+TxLink.defaultProps = {
+  mode: "dashboard"
+};
+function TxLink(props) {
+  if (!props.details || props.mode === "customer" && props.method.type === "stripe") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      component: "small",
+      color: "text.secondary",
+      children: "None"
+    });
+  }
+  const {
+    text,
+    link
+  } = getTxLink(props.method, props.details);
+  if (link) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
+      href: link,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        component: "span",
+        direction: "row",
+        alignItems: "center",
+        spacing: 1,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          component: "span",
+          color: "primary",
+          children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
+          fontSize: "small"
+        })]
+      })
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+    component: "small",
+    color: "text.secondary",
+    children: "None"
+  });
+}

package/lib/history/invoice/list.js

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
@@ -101,7 +102,7 @@ function CustomerInvoiceList({
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
-            href: `/customer/invoice/${invoice.id}`,
+            href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/invoice/${invoice.id}`),
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "span",
               children: invoice.number

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

@@ -9,6 +9,7 @@ var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
@@ -39,19 +40,12 @@ function MiniInvoiceList() {
     status: "open,paid,uncollectible",
     subscription_id: subscriptionId
   }));
-  if (!data || !subscription) {
+  if (!subscription || !data) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
   }
-  if (data && data.list.length === 0) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        color: "text.secondary",
-        children: t("payment.customer.invoice.empty")
-      })
-    });
-  }
+  const invoices = data.list || [];
   const infoList = [{
     name: t("payment.customer.subscriptions.plan"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -67,21 +61,25 @@ function MiniInvoiceList() {
       label: subscription.status,
       color: (0, _util2.getSubscriptionStatusColor)(subscription.status)
     })
-  }, {
-    name: t("payment.customer.subscriptions.nextInvoice"),
-    value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      sx: {
-        color: "#34BE74",
-        fontWeight: "bold",
-        marginRight: "10px"
-      },
-      children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
-    })
   }];
+  if (subscription.status === "active" || subscription.status === "trailing") {
+    infoList.push({
+      name: t("payment.customer.subscriptions.nextInvoice"),
+      value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        sx: {
+          color: "#34BE74",
+          fontWeight: "bold",
+          marginRight: "10px"
+        },
+        children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
+      })
+    });
+  }
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(Position, {
     children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       title: t("payment.checkout.subscription")
     }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "mini-invoice-wrap",
       sx: {
         display: "flex",
         flexDirection: "column",
@@ -126,16 +124,12 @@ function MiniInvoiceList() {
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
-          marginTop: "12px"
+          marginTop: "12px",
+          flex: 1
         },
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.List, {
           sx: {
-            overflow: "auto",
-            maxHeight: {
-              xs: "240px",
-              md: "360px",
-              padding: 0
-            }
+            overflow: "auto"
           },
           className: "mini-invoice-list",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListSubheader, {
@@ -149,7 +143,10 @@ function MiniInvoiceList() {
               fontSize: "16px",
               children: t("payment.customer.invoices")
             })
-          }), (data.list || []).map(item => {
+          }), invoices.length === 0 ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+            color: "text.secondary",
+            children: t("payment.customer.invoice.empty")
+          }) : invoices.map(item => {
             return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
               disableGutters: true,
               sx: {
@@ -165,7 +162,8 @@ function MiniInvoiceList() {
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
                 sx: {
-                  flex: 1
+                  flex: 1,
+                  textAlign: "right"
                 },
                 children: [(0, _util.fromUnitToToken)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
               }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -186,13 +184,14 @@ function MiniInvoiceList() {
           })]
         })
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        target: "_top",
+        target: "_blank",
         variant: "contained",
         sx: {
           marginTop: "10px 0",
-          width: "100%"
+          width: "100%",
+          color: "#fff!important"
         },
-        href: "",
+        href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/subscription/${subscription.id}`),
         children: t("payment.customer.subscriptions.title")
       })]
     })]
@@ -204,7 +203,6 @@ function Position({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     className: "mini-invoice-box",
     sx: {
-      justifyContent: "center",
       padding: "8px",
       width: "100%",
       maxWidth: "500px",

package/lib/history/payment/list.js

@@ -10,6 +10,7 @@ var _material = require("@mui/material");
 var _util = require("@ocap/util");
 var _ahooks = require("ahooks");
 var _api = _interopRequireDefault(require("../../api"));
+var _tx = _interopRequireDefault(require("../../components/blockchain/tx"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -111,10 +112,20 @@ function CustomerPaymentList({
             color: (0, _util2.getPaymentIntentStatusColor)(item.status)
           })
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-          flex: 4,
+          flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
             children: item.description || item.id
           })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
+          flex: 3,
+          sx: {
+            minWidth: "220px"
+          },
+          children: item.payment_details?.arcblock?.tx_hash && /* @__PURE__ */(0, _jsxRuntime.jsx)(_tx.default, {
+            details: item.payment_details,
+            method: item.paymentMethod,
+            mode: "customer"
+          })
         })]
       }, item.id))]
     }, date)), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {

package/lib/index.d.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -18,4 +19,4 @@ import ProductSkeleton from './payment/product-skeleton';
 export * from './util';
 export * from './contexts/payment';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, };
+export { api, dayjs, FormInput, PhoneInput, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, Payment, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, };

package/lib/index.js

@@ -7,6 +7,7 @@ var _exportNames = {
   api: true,
   CheckoutForm: true,
   CheckoutTable: true,
+  TxLink: true,
   ConfirmDialog: true,
   FormInput: true,
   Livemode: true,
@@ -114,6 +115,12 @@ Object.defineProperty(exports, "Switch", {
     return _switchButton.default;
   }
 });
+Object.defineProperty(exports, "TxLink", {
+  enumerable: true,
+  get: function () {
+    return _tx.default;
+  }
+});
 Object.defineProperty(exports, "api", {
   enumerable: true,
   get: function () {
@@ -141,6 +148,7 @@ Object.defineProperty(exports, "translations", {
 var _api = _interopRequireDefault(require("./api"));
 var _form = _interopRequireDefault(require("./checkout/form"));
 var _table = _interopRequireDefault(require("./checkout/table"));
+var _tx = _interopRequireDefault(require("./components/blockchain/tx"));
 var _confirm = _interopRequireDefault(require("./components/confirm"));
 var _input = _interopRequireDefault(require("./components/input"));
 var _livemode = _interopRequireDefault(require("./components/livemode"));

package/lib/locales/en.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "Pay this invoice",
         paySuccess: "You have successfully paid the invoice",
         payError: "Failed to paid the invoice",
-        empty: "Seems you do not have any invoice here"
+        empty: "There are no invoices here"
       },
       payment: {
-        empty: "Seems you do not have any payment here"
+        empty: "There are no payments here"
       },
       subscriptions: {
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
         current: "Current subscription",
-        empty: "Seems you do not have any subscriptions here"
+        empty: "There are no subscriptions here"
       }
     }
   }

package/lib/locales/zh.js

@@ -209,17 +209,17 @@ module.exports = (0, _flat.default)({
         pay: "\u652F\u4ED8\u6B64\u53D1\u7968",
         paySuccess: "\u652F\u4ED8\u6210\u529F",
         payError: "\u652F\u4ED8\u5931\u8D25",
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u53D1\u7968"
       },
       payment: {
-        empty: "\u4F60\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u652F\u4ED8"
       },
       subscriptions: {
         plan: "\u8BA2\u9605",
         nextInvoice: "\u4E0B\u4E00\u5F20\u53D1\u7968",
         title: "\u8BA2\u9605\u7BA1\u7406",
         current: "\u5F53\u524D\u8BA2\u9605",
-        empty: "\u4F60\u8FD8\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
+        empty: "\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605"
       }
     }
   }

package/lib/util.js

@@ -282,9 +282,12 @@ function getWebhookStatusColor(status) {
 }
 function getCheckoutAmount(items, currency, includeFreeTrial = false, upsell = true) {
   let renew = new _util.BN(0);
-  const total = items.reduce((acc, x) => {
+  const total = items.filter(x => {
     const price = upsell ? x.upsell_price || x.price : x.price;
-    if (price.type === "recurring") {
+    return price != null;
+  }).reduce((acc, x) => {
+    const price = upsell ? x.upsell_price || x.price : x.price;
+    if (price?.type === "recurring") {
       renew = renew.add(new _util.BN(getPriceUintAmountByCurrency(price, currency)).mul(new _util.BN(x.quantity)));
       if (includeFreeTrial) {
         return acc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.130",
+  "version": "1.13.131",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.19.3",
     "@babel/preset-env": "^7.19.3",
     "@babel/preset-react": "^7.18.6",
-    "@blocklet/payment-types": "1.13.130",
+    "@blocklet/payment-types": "1.13.131",
     "@storybook/addon-essentials": "^7.6.10",
     "@storybook/addon-interactions": "^7.6.10",
     "@storybook/addon-links": "^7.6.10",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "95aaa56f16ce303e514aa7dde9e542628d7acd2c"
+  "gitHead": "a1a5072b1a0c564cce5ba4aee5fc4801cfef4a46"
 }

package/src/components/blockchain/tx.tsx

@@ -0,0 +1,77 @@
+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: '' };
+};
+
+TxLink.defaultProps = {
+  mode: 'dashboard',
+};
+
+export default function TxLink(props: {
+  details: PaymentDetails;
+  method: TPaymentMethod;
+  mode?: 'customer' | 'dashboard';
+}) {
+  if (!props.details || (props.mode === 'customer' && props.method.type === 'stripe')) {
+    return (
+      <Typography component="small" color="text.secondary">
+        None
+      </Typography>
+    );
+  }
+
+  const { text, link } = getTxLink(props.method, props.details);
+
+  if (link) {
+    return (
+      <Link href={link} target="_blank" rel="noopener noreferrer">
+        <Stack component="span" direction="row" alignItems="center" spacing={1}>
+          <Typography component="span" color="primary">
+            {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+          </Typography>
+          <OpenInNewOutlined fontSize="small" />
+        </Stack>
+      </Link>
+    );
+  }
+
+  return (
+    <Typography component="small" color="text.secondary">
+      None
+    </Typography>
+  );
+}

package/src/history/invoice/list.tsx

@@ -4,10 +4,11 @@ import type { Paginated, TInvoiceExpanded } from '@blocklet/payment-types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
-import { formatToDate, getInvoiceStatusColor } from '../../util';
+import { formatToDate, getInvoiceStatusColor, getPrefix } from '../../util';
 
 const groupByDate = (items: TInvoiceExpanded[]) => {
   const grouped: { [key: string]: TInvoiceExpanded[] } = {};
@@ -83,7 +84,7 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }: Pr
               }}
               flexWrap="nowrap">
               <Box flex={3}>
-                <a href={`/customer/invoice/${invoice.id}`}>
+                <a href={joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`)}>
                   <Typography component="span">{invoice.number}</Typography>
                 </a>
               </Box>

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

@@ -4,6 +4,7 @@ import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blockl
 import { Box, Button, CircularProgress, Divider, List, ListItem, ListSubheader, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useRequest } from 'ahooks';
+import { joinURL } from 'ufo';
 
 import api from '../../api';
 import Status from '../../components/status';
@@ -12,6 +13,7 @@ import {
   formatTime,
   formatToDate,
   getInvoiceStatusColor,
+  getPrefix,
   getSubscriptionStatusColor,
 } from '../../util';
 
@@ -37,7 +39,7 @@ export default function MiniInvoiceList() {
     fetchInvoiceData({ page: 1, pageSize: 10, status: 'open,paid,uncollectible', subscription_id: subscriptionId })
   );
 
-  if (!data || !subscription) {
+  if (!subscription || !data) {
     return (
       <Position>
         <CircularProgress />
@@ -45,13 +47,7 @@ export default function MiniInvoiceList() {
     );
   }
 
-  if (data && data.list.length === 0) {
-    return (
-      <Position>
-        <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
-      </Position>
-    );
-  }
+  const invoices = data.list || [];
 
   const infoList = [
     {
@@ -66,8 +62,10 @@ export default function MiniInvoiceList() {
       name: t('common.status'),
       value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
     },
+  ];
 
-    {
+  if (subscription.status === 'active' || subscription.status === 'trailing') {
+    infoList.push({
       name: t('payment.customer.subscriptions.nextInvoice'),
       value: (
         <Typography
@@ -79,13 +77,14 @@ export default function MiniInvoiceList() {
           {formatTime(subscription.current_period_end * 1000)}
         </Typography>
       ),
-    },
-  ];
+    });
+  }
 
   return (
     <Position>
       <Typography title={t('payment.checkout.subscription')} />
       <Box
+        className="mini-invoice-wrap"
         sx={{
           display: 'flex',
           flexDirection: 'column',
@@ -111,34 +110,40 @@ export default function MiniInvoiceList() {
           </List>
         </Box>
         <Divider />
-        <Box sx={{ marginTop: '12px' }}>
-          <List
-            sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}
-            className="mini-invoice-list">
+        <Box sx={{ marginTop: '12px', flex: 1 }}>
+          <List sx={{ overflow: 'auto' }} className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
                 {t('payment.customer.invoices')}
               </Typography>
             </ListSubheader>
-            {(data.list || []).map((item: any) => {
-              return (
-                <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span" sx={{ flex: 3 }}>
-                    {formatToDate(item.created_at)}
-                  </Typography>
-                  <Typography component="span" sx={{ flex: 1 }}>
-                    {fromUnitToToken(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>
-                </ListItem>
-              );
-            })}
+            {(invoices as any).length === 0 ? (
+              <Typography color="text.secondary">{t('payment.customer.invoice.empty')}</Typography>
+            ) : (
+              (invoices as any).map((item: any) => {
+                return (
+                  <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Typography component="span" sx={{ flex: 3 }}>
+                      {formatToDate(item.created_at)}
+                    </Typography>
+                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
+                      {fromUnitToToken(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>
+                  </ListItem>
+                );
+              })
+            )}
           </List>
         </Box>
-        <Button target="_top" variant="contained" sx={{ marginTop: '10px 0', width: '100%' }} href="">
+        <Button
+          target="_blank"
+          variant="contained"
+          sx={{ marginTop: '10px 0', width: '100%', color: '#fff!important' }}
+          href={joinURL(window.location.origin, getPrefix(), `/customer/subscription/${subscription.id}`)}>
           {t('payment.customer.subscriptions.title')}
         </Button>
       </Box>
@@ -151,7 +156,6 @@ function Position({ children }: any) {
     <Box
       className="mini-invoice-box" // 预留 class 用于设置定位
       sx={{
-        justifyContent: 'center',
         padding: '8px',
         width: '100%',
         maxWidth: '500px',

package/src/history/payment/list.tsx

@@ -6,6 +6,7 @@ import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
 
 import api from '../../api';
+import TxLink from '../../components/blockchain/tx';
 import Status from '../../components/status';
 import { formatToDate, getPaymentIntentStatusColor } from '../../util';
 
@@ -91,9 +92,18 @@ export default function CustomerPaymentList({ customer_id }: Props) {
               <Box flex={3}>
                 <Status label={item.status} color={getPaymentIntentStatusColor(item.status)} />
               </Box>
-              <Box flex={4}>
+              <Box flex={3}>
                 <Typography>{item.description || item.id}</Typography>
               </Box>
+              <Box flex={3} sx={{ minWidth: '220px' }}>
+                {(item as any).payment_details?.arcblock?.tx_hash && (
+                  <TxLink
+                    details={(item as any).payment_details}
+                    method={(item as any).paymentMethod}
+                    mode="customer"
+                  />
+                )}
+              </Box>
             </Stack>
           ))}
         </Box>

package/src/index.ts

@@ -1,6 +1,7 @@
 import api from './api';
 import CheckoutForm from './checkout/form';
 import CheckoutTable from './checkout/table';
+import TxLink from './components/blockchain/tx';
 import ConfirmDialog from './components/confirm';
 import FormInput from './components/input';
 import Livemode from './components/livemode';
@@ -39,4 +40,5 @@ export {
   CustomerInvoiceList,
   CustomerPaymentList,
   MiniInvoiceList,
+  TxLink,
 };

package/src/locales/en.tsx

@@ -207,17 +207,17 @@ export default flat({
         pay: 'Pay this invoice',
         paySuccess: 'You have successfully paid the invoice',
         payError: 'Failed to paid the invoice',
-        empty: 'Seems you do not have any invoice here',
+        empty: 'There are no invoices here',
       },
       payment: {
-        empty: 'Seems you do not have any payment here',
+        empty: 'There are no payments here',
       },
       subscriptions: {
         plan: 'Plan',
         nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
         current: 'Current subscription',
-        empty: 'Seems you do not have any subscriptions here',
+        empty: 'There are no subscriptions here',
       },
     },
   },

package/src/locales/zh.tsx

@@ -203,17 +203,17 @@ export default flat({
         pay: '支付此发票',
         paySuccess: '支付成功',
         payError: '支付失败',
-        empty: '你没有任何发票',
+        empty: '没有任何发票',
       },
       payment: {
-        empty: '你没有任何支付',
+        empty: '没有任何支付',
       },
       subscriptions: {
         plan: '订阅',
         nextInvoice: '下一张发票',
         title: '订阅管理',
         current: '当前订阅',
-        empty: '你还没有任何订阅',
+        empty: '没有任何订阅',
       },
     },
   },

package/src/util.ts

@@ -324,11 +324,14 @@ export function getCheckoutAmount(
   upsell = true
 ) {
   let renew = new BN(0);
-
   const total = items
+    .filter((x) => {
+      const price = upsell ? x.upsell_price || x.price : x.price;
+      return price != null;
+    })
     .reduce((acc, x) => {
       const price = upsell ? x.upsell_price || x.price : x.price;
-      if (price.type === 'recurring') {
+      if (price?.type === 'recurring') {
         renew = renew.add(new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(x.quantity)));
 
         if (includeFreeTrial) {