@blocklet/payment-react 1.13.129 → 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.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    customer_id?: string;
+    subscription_id?: string;
+};
+declare function CustomerInvoiceList({ customer_id, subscription_id }: Props): import("react").JSX.Element;
+declare namespace CustomerInvoiceList {
+    var defaultProps: {
+        customer_id: string;
+        subscription_id: string;
+    };
+}
+export default CustomerInvoiceList;

package/es/{histroy → 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) => {
@@ -20,17 +21,19 @@ const groupByDate = (items) => {
 const fetchData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
 const pageSize = 10;
-export default function CustomerInvoiceList({ customer_id }) {
+export default function CustomerInvoiceList({ customer_id, subscription_id }) {
   const { t } = useLocaleContext();
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
     (d) => {
       const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: "open,paid,uncollectible", customer_id });
+      return fetchData({ page, pageSize, status: "open,paid,uncollectible", customer_id, subscription_id });
     },
     {
       reloadDeps: [customer_id]
@@ -62,7 +65,7 @@ export default function CustomerInvoiceList({ customer_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),
@@ -82,3 +85,7 @@ export default function CustomerInvoiceList({ customer_id }) {
     ] })
   ] });
 }
+CustomerInvoiceList.defaultProps = {
+  customer_id: "",
+  subscription_id: ""
+};

package/es/history/mini-invoice/list.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function MiniInvoiceList(): import("react").JSX.Element;

package/es/{histroy → history}/mini-invoice/list.js

@@ -2,7 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 { useInfiniteScroll } from "ahooks";
+import { useRequest } from "ahooks";
+import { joinURL } from "ufo";
 import api from "../../api.js";
 import Status from "../../components/status.js";
 import {
@@ -10,61 +11,62 @@ import {
   formatTime,
   formatToDate,
   getInvoiceStatusColor,
+  getPrefix,
   getSubscriptionStatusColor
 } from "../../util.js";
-const fetchData = (params = {}) => {
+const fetchInvoiceData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
-const pageSize = 10;
-export default function MiniInvoiceList({ subscription }) {
+const fetchSubscriptionData = (id) => {
+  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
+};
+export default function MiniInvoiceList() {
   const { t } = useLocaleContext();
-  const { data, loading } = useInfiniteScroll(
-    (d) => {
-      const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
-      return fetchData({ page, pageSize, status: "open,paid,uncollectible", subscription_id: subscription.id });
-    },
-    {
-      reloadDeps: [subscription.id]
-    }
+  const subscriptionId = new URL(window.location.href).searchParams.get("id");
+  const { data: subscription } = useRequest(() => fetchSubscriptionData(subscriptionId));
+  const { data } = useRequest(
+    () => fetchInvoiceData({ page: 1, pageSize: 10, status: "open,paid,uncollectible", subscription_id: subscriptionId })
   );
-  if (loading || !data) {
+  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"),
       value: /* @__PURE__ */ jsx(Typography, { fontWeight: 600, sx: { marginRight: "10px" }, children: formatSubscriptionProduct(subscription.items) })
     },
     {
-      name: t("payment.common.status"),
+      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,
         {
           sx: {
             color: "#34BE74",
-            fontWeight: "bold"
+            fontWeight: "bold",
+            marginRight: "10px"
           },
           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",
@@ -83,21 +85,30 @@ export default function MiniInvoiceList({ subscription }) {
             ] }, name);
           }) }) }),
           /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsxs(List, { sx: { overflow: "auto", maxHeight: { xs: "240px", md: "360px", padding: 0 } }, children: [
+          /* @__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") }) }),
-            (data.list || []).map((item) => {
+            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", children: formatToDate(item.created_at) }),
-                /* @__PURE__ */ jsxs(Typography, { component: "span", 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(Status, { label: item.status, color: getInvoiceStatusColor(item.status) })
+                /* @__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, { target: "_top", variant: "contained", sx: { marginTop: "auto", width: "100%" }, href: "", children: t("payment.customer.subscriptions.title") })
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              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")
+            }
+          )
         ]
       }
     )
@@ -109,15 +120,11 @@ function Position({ children }) {
     {
       className: "mini-invoice-box",
       sx: {
-        position: "absolute",
-        right: 0,
-        top: "30px",
-        justifyContent: "center",
         padding: "8px",
-        minWidth: "400px",
+        width: "100%",
+        maxWidth: "500px",
         background: "#fff",
-        zIndex: 9,
-        boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)"
+        margin: "0 auto"
       },
       children
     }

package/es/{histroy → 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';
@@ -8,9 +9,9 @@ import PricingTable from './components/pricing-table';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import dayjs from './dayjs';
-import CustomerInvoiceList from './histroy/invoice/list';
-import MiniInvoiceList from './histroy/mini-invoice/list';
-import CustomerPaymentList from './histroy/payment/list';
+import CustomerInvoiceList from './history/invoice/list';
+import MiniInvoiceList from './history/mini-invoice/list';
+import CustomerPaymentList from './history/payment/list';
 import Amount from './payment/amount';
 import PhoneInput from './payment/form/phone';
 import Payment from './payment/index';
@@ -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";
@@ -8,9 +9,9 @@ import PricingTable from "./components/pricing-table.js";
 import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
 import dayjs from "./dayjs.js";
-import CustomerInvoiceList from "./histroy/invoice/list.js";
-import MiniInvoiceList from "./histroy/mini-invoice/list.js";
-import CustomerPaymentList from "./histroy/payment/list.js";
+import CustomerInvoiceList from "./history/invoice/list.js";
+import MiniInvoiceList from "./history/mini-invoice/list.js";
+import CustomerPaymentList from "./history/payment/list.js";
 import Amount from "./payment/amount.js";
 import PhoneInput from "./payment/form/phone.js";
 import Payment from "./payment/index.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 subscriptions",
-        empty: "Seems you do not have any subscriptions here"
+        current: "Current subscription",
+        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.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type Props = {
+    customer_id?: string;
+    subscription_id?: string;
+};
+declare function CustomerInvoiceList({ customer_id, subscription_id }: Props): import("react").JSX.Element;
+declare namespace CustomerInvoiceList {
+    var defaultProps: {
+        customer_id: string;
+        subscription_id: string;
+    };
+}
+export default CustomerInvoiceList;

package/lib/{histroy → 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");
@@ -27,13 +28,16 @@ const groupByDate = items => {
 const fetchData = (params = {}) => {
   const search = new URLSearchParams();
   Object.keys(params).forEach(key => {
-    search.set(key, String(params[key]));
+    if (params[key]) {
+      search.set(key, String(params[key]));
+    }
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
 const pageSize = 10;
 function CustomerInvoiceList({
-  customer_id
+  customer_id,
+  subscription_id
 }) {
   const {
     t
@@ -49,7 +53,8 @@ function CustomerInvoiceList({
       page,
       pageSize,
       status: "open,paid,uncollectible",
-      customer_id
+      customer_id,
+      subscription_id
     });
   }, {
     reloadDeps: [customer_id]
@@ -97,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
@@ -147,4 +152,8 @@ function CustomerInvoiceList({
       })]
     })]
   });
-}
+}
+CustomerInvoiceList.defaultProps = {
+  customer_id: "",
+  subscription_id: ""
+};

package/lib/history/mini-invoice/list.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function MiniInvoiceList(): import("react").JSX.Element;