@blocklet/payment-react 1.13.130 → 1.13.132

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 || "-" }) }),
+            /* @__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/payment/index.js

@@ -250,7 +250,7 @@ export const Root = styled(Box)`
 
   .cko-container {
     width: 100%;
-    max-width: 1000px;
+    max-width: ${(props) => props.mode.endsWith("-minimal") ? "400px" : "1000px"};
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -259,9 +259,10 @@ export const Root = styled(Box)`
   }
 
   .cko-overview {
-    width: 400px;
+    width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     min-height: ${(props) => props.mode === "standalone" ? "540px" : "auto"};
     position: relative;
+    display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "block"};
   }
   .cko-header {
     left: 0;
@@ -278,7 +279,7 @@ export const Root = styled(Box)`
   }
 
   .cko-payment {
-    width: 400px;
+    width: ${(props) => props.mode.endsWith("-minimal") ? "100%" : "400px"};
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -367,6 +368,7 @@ export const Root = styled(Box)`
     bottom: 0;
     left: 12px;
     margin: 12px 0;
+    display: ${(props) => props.mode.endsWith("-minimal") ? "none" : "block"};
   }
 
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {

package/es/types/index.d.ts

@@ -11,7 +11,7 @@ export type CheckoutContext = {
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
     id: string;
     extraParams?: Record<string, any>;
-    mode?: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
+    mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
 };
 export type CheckoutCallbacks = {
     onPaid: (res: CheckoutContext) => void;

package/es/util.d.ts

@@ -22,6 +22,7 @@ export declare function formatLineItemPricing(item: TLineItemExpanded, currency:
 };
 export declare function getSubscriptionStatusColor(status: string): "success" | "primary" | "warning" | "error" | "default";
 export declare function getPaymentIntentStatusColor(status: string): "success" | "warning" | "default";
+export declare function getRefundStatusColor(status: string): "success" | "warning" | "default";
 export declare function getInvoiceStatusColor(status: string): "success" | "warning" | "default" | "secondary";
 export declare function getWebhookStatusColor(status: string): "success" | "default";
 export declare function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial?: boolean, upsell?: boolean): {

package/es/util.js

@@ -201,6 +201,18 @@ export function getPaymentIntentStatusColor(status) {
       return "default";
   }
 }
+export function getRefundStatusColor(status) {
+  switch (status) {
+    case "succeeded":
+      return "success";
+    case "requires_action":
+      return "warning";
+    case "canceled":
+    case "pending":
+    default:
+      return "default";
+  }
+}
 export function getInvoiceStatusColor(status) {
   switch (status) {
     case "paid":
@@ -226,9 +238,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;
+    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) {
         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",