@blocklet/payment-react 1.13.255 → 1.13.257

package/es/checkout/donate.js

@@ -82,7 +82,7 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }) {
 }
 function SupporterTable({ supporters = [], total = 0, currency, method }) {
   const { t } = useLocaleContext();
-  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", sx: { width: "100%" }, gap: { xs: 0.5, sm: 1 }, children: [
+  return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: { xs: 0.5, sm: 1 }, children: [
     /* @__PURE__ */ jsx(Typography, { component: "p", color: "text.secondary", children: t("payment.checkout.donation.summary", { total }) }),
     /* @__PURE__ */ jsx(Table, { size: "small", sx: { width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsx(TableBody, { children: supporters.map((x) => /* @__PURE__ */ jsxs(
       TableRow,
@@ -92,6 +92,9 @@ function SupporterTable({ supporters = [], total = 0, currency, method }) {
             padding: "8px 16px 8px 0",
             borderTop: "1px solid #e0e0e0",
             borderBottom: "1px solid #e0e0e0"
+          },
+          "> td:last-of-type": {
+            paddingRight: "0"
           }
         },
         children: [

package/es/components/blockchain/tx.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import { OpenInNewOutlined } from "@mui/icons-material";
 import { Link, Stack, Typography } from "@mui/material";
+import { styled } from "@mui/system";
 import { getTxLink } from "../../libs/util.js";
 TxLink.defaultProps = {
   mode: "dashboard",
@@ -15,15 +16,14 @@ export default function TxLink(props) {
   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,
+      Root,
       {
-        component: "span",
         direction: "row",
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
         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(Typography, { component: "span", color: "primary", children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text }),
           /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small" })
         ]
       }
@@ -31,3 +31,10 @@ export default function TxLink(props) {
   }
   return /* @__PURE__ */ jsx(Typography, { component: "small", color: "text.secondary", children: t("common.none") });
 }
+const Root = styled(Stack)`
+  @media (max-width: 600px) {
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
+  }
+`;

package/es/history/invoice/list.js

@@ -209,6 +209,9 @@ const Root = styled(Stack)`
     .invoice-description {
       display: none !important;
     }
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
   }
 
   a.MuiButton-root {

package/es/hooks/subscription.js

@@ -39,7 +39,7 @@ export function useSubscription(channel) {
       } else {
         needSubscription = true;
       }
-      if (needSubscription) {
+      if (needSubscription && socket.current) {
         subscription.current = socket.current.subscribe(getRelayChannel(channel));
         subscription.current.channel = channel;
       }

package/es/index.d.ts

@@ -11,7 +11,6 @@ import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
-import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
@@ -24,7 +23,8 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 export * from './libs/util';
+export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, TxGas, SafeGuard, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, };

package/es/index.js

@@ -11,7 +11,6 @@ import SafeGuard from "./components/safe-guard.js";
 import Status from "./components/status.js";
 import Switch from "./components/switch-button.js";
 import CustomerInvoiceList from "./history/invoice/list.js";
-import MiniInvoiceList from "./history/mini-invoice/list.js";
 import CustomerPaymentList from "./history/payment/list.js";
 import api from "./libs/api.js";
 import dayjs from "./libs/dayjs.js";
@@ -24,6 +23,7 @@ import Payment from "./payment/index.js";
 import ProductSkeleton from "./payment/product-skeleton.js";
 import PaymentSummary from "./payment/summary.js";
 export * from "./libs/util.js";
+export * from "./libs/connect.js";
 export * from "./contexts/payment.js";
 export * from "./hooks/subscription.js";
 export { translations, createTranslator } from "./locales/index.js";
@@ -49,7 +49,6 @@ export {
   Amount,
   CustomerInvoiceList,
   CustomerPaymentList,
-  MiniInvoiceList,
   TxLink,
   TxGas,
   SafeGuard

package/lib/checkout/donate.js

@@ -102,9 +102,6 @@ function SupporterTable({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    sx: {
-      width: "100%"
-    },
     gap: {
       xs: 0.5,
       sm: 1
@@ -128,6 +125,9 @@ function SupporterTable({
               padding: "8px 16px 8px 0",
               borderTop: "1px solid #e0e0e0",
               borderBottom: "1px solid #e0e0e0"
+            },
+            "> td:last-of-type": {
+              paddingRight: "0"
             }
           },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TableCell, {

package/lib/components/blockchain/tx.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
+var _system = require("@mui/system");
 var _util = require("../../libs/util");
 TxLink.defaultProps = {
   mode: "dashboard",
@@ -33,8 +34,7 @@ function TxLink(props) {
       href: link,
       target: "_blank",
       rel: "noopener noreferrer",
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        component: "span",
+      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
         direction: "row",
         alignItems: "center",
         justifyContent: props.align === "left" ? "flex-start" : "flex-end",
@@ -42,7 +42,7 @@ function TxLink(props) {
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "span",
           color: "primary",
-          children: text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join("...") : text
+          children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
           fontSize: "small"
         })]
@@ -54,4 +54,11 @@ function TxLink(props) {
     color: "text.secondary",
     children: t("common.none")
   });
-}
+}
+const Root = (0, _system.styled)(_material.Stack)`
+  @media (max-width: 600px) {
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
+  }
+`;

package/lib/history/invoice/list.js

@@ -309,6 +309,9 @@ const Root = (0, _system.styled)(_material.Stack)`
     .invoice-description {
       display: none !important;
     }
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
   }
 
   a.MuiButton-root {

package/lib/hooks/subscription.js

@@ -46,7 +46,7 @@ function useSubscription(channel) {
       } else {
         needSubscription = true;
       }
-      if (needSubscription) {
+      if (needSubscription && socket.current) {
         subscription.current = socket.current.subscribe(getRelayChannel(channel));
         subscription.current.channel = channel;
       }

package/lib/index.d.ts

@@ -11,7 +11,6 @@ import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
-import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
@@ -24,7 +23,8 @@ import Payment from './payment/index';
 import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 export * from './libs/util';
+export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 export { translations, createTranslator } from './locales';
-export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, MiniInvoiceList, TxLink, TxGas, SafeGuard, };
+export { api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, };

package/lib/index.js

@@ -17,7 +17,6 @@ var _exportNames = {
   Status: true,
   Switch: true,
   CustomerInvoiceList: true,
-  MiniInvoiceList: true,
   CustomerPaymentList: true,
   api: true,
   dayjs: true,
@@ -83,7 +82,7 @@ Object.defineProperty(exports, "CustomerInvoiceList", {
 Object.defineProperty(exports, "CustomerPaymentList", {
   enumerable: true,
   get: function () {
-    return _list3.default;
+    return _list2.default;
   }
 });
 Object.defineProperty(exports, "FormInput", {
@@ -98,12 +97,6 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
-Object.defineProperty(exports, "MiniInvoiceList", {
-  enumerable: true,
-  get: function () {
-    return _list2.default;
-  }
-});
 Object.defineProperty(exports, "Payment", {
   enumerable: true,
   get: function () {
@@ -207,8 +200,7 @@ var _safeGuard = _interopRequireDefault(require("./components/safe-guard"));
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _list = _interopRequireDefault(require("./history/invoice/list"));
-var _list2 = _interopRequireDefault(require("./history/mini-invoice/list"));
-var _list3 = _interopRequireDefault(require("./history/payment/list"));
+var _list2 = _interopRequireDefault(require("./history/payment/list"));
 var _api = _interopRequireDefault(require("./libs/api"));
 var _dayjs = _interopRequireDefault(require("./libs/dayjs"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
@@ -231,6 +223,18 @@ Object.keys(_util).forEach(function (key) {
     }
   });
 });
+var _connect = require("./libs/connect");
+Object.keys(_connect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _connect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _connect[key];
+    }
+  });
+});
 var _payment = require("./contexts/payment");
 Object.keys(_payment).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.255",
+  "version": "1.13.257",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -91,7 +91,7 @@
     "@babel/core": "^7.24.5",
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
-    "@blocklet/payment-types": "1.13.255",
+    "@blocklet/payment-types": "1.13.257",
     "@storybook/addon-essentials": "^7.6.19",
     "@storybook/addon-interactions": "^7.6.19",
     "@storybook/addon-links": "^7.6.19",
@@ -120,5 +120,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "79416ada68496df6d233a59244a0cec245414813"
+  "gitHead": "29d4263d26ecb8a99805aaef35a89be0820dab92"
 }

package/src/checkout/donate.tsx

@@ -117,7 +117,7 @@ function SupporterAvatar({ supporters = [], total = 0, currency, method }: Donat
 function SupporterTable({ supporters = [], total = 0, currency, method }: DonateHistory) {
   const { t } = useLocaleContext();
   return (
-    <Box display="flex" flexDirection="column" alignItems="center" sx={{ width: '100%' }} gap={{ xs: 0.5, sm: 1 }}>
+    <Box display="flex" flexDirection="column" alignItems="center" gap={{ xs: 0.5, sm: 1 }}>
       <Typography component="p" color="text.secondary">
         {t('payment.checkout.donation.summary', { total })}
       </Typography>
@@ -132,6 +132,9 @@ function SupporterTable({ supporters = [], total = 0, currency, method }: Donate
                   borderTop: '1px solid #e0e0e0',
                   borderBottom: '1px solid #e0e0e0',
                 },
+                '> td:last-of-type': {
+                  paddingRight: '0',
+                },
               }}>
               <TableCell>
                 <Stack direction="row" alignItems="center" spacing={0.5}>

package/src/components/blockchain/tx.tsx

@@ -2,6 +2,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
 import { OpenInNewOutlined } from '@mui/icons-material';
 import { Link, Stack, Typography } from '@mui/material';
+import { styled } from '@mui/system';
 
 import { getTxLink } from '../../libs/util';
 
@@ -31,17 +32,16 @@ export default function TxLink(props: {
   if (link) {
     return (
       <Link href={link} target="_blank" rel="noopener noreferrer">
-        <Stack
-          component="span"
+        <Root
           direction="row"
           alignItems="center"
           justifyContent={props.align === 'left' ? 'flex-start' : 'flex-end'}
           spacing={1}>
           <Typography component="span" color="primary">
-            {text.length > 40 ? [text.slice(0, 8), text.slice(-8)].join('...') : text}
+            {text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join('...') : text}
           </Typography>
           <OpenInNewOutlined fontSize="small" />
-        </Stack>
+        </Root>
       </Link>
     );
   }
@@ -52,3 +52,11 @@ export default function TxLink(props: {
     </Typography>
   );
 }
+
+const Root = styled(Stack)`
+  @media (max-width: 600px) {
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
+  }
+`;

package/src/history/invoice/list.tsx

@@ -289,6 +289,9 @@ const Root = styled(Stack)`
     .invoice-description {
       display: none !important;
     }
+    svg.MuiSvgIcon-root {
+      display: none !important;
+    }
   }
 
   a.MuiButton-root {

package/src/hooks/subscription.ts

@@ -50,7 +50,7 @@ export function useSubscription(channel: string) {
         needSubscription = true;
       }
 
-      if (needSubscription) {
+      if (needSubscription && socket.current) {
         subscription.current = socket.current.subscribe(getRelayChannel(channel));
         subscription.current.channel = channel;
       }

package/src/index.ts

@@ -11,7 +11,6 @@ import SafeGuard from './components/safe-guard';
 import Status from './components/status';
 import Switch from './components/switch-button';
 import CustomerInvoiceList from './history/invoice/list';
-import MiniInvoiceList from './history/mini-invoice/list';
 import CustomerPaymentList from './history/payment/list';
 import api from './libs/api';
 import dayjs from './libs/dayjs';
@@ -25,6 +24,7 @@ import ProductSkeleton from './payment/product-skeleton';
 import PaymentSummary from './payment/summary';
 
 export * from './libs/util';
+export * from './libs/connect';
 export * from './contexts/payment';
 export * from './hooks/subscription';
 
@@ -52,7 +52,6 @@ export {
   Amount,
   CustomerInvoiceList,
   CustomerPaymentList,
-  MiniInvoiceList,
   TxLink,
   TxGas,
   SafeGuard,

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

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

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

@@ -1,192 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Divider,
-  Link,
-  List,
-  ListItem,
-  ListSubheader,
-  Stack,
-  Typography
-} from "@mui/material";
-import { useRequest } from "ahooks";
-import { useMemo } from "react";
-import { joinURL, withQuery } from "ufo";
-import Status from "../../components/status.js";
-import api from "../../libs/api.js";
-import { getDidConnectQueryParams } from "../../libs/did-connect.js";
-import {
-  formatBNStr,
-  formatError,
-  formatSubscriptionProduct,
-  formatTime,
-  formatToDate,
-  getInvoiceStatusColor,
-  getPrefix,
-  getSubscriptionStatusColor
-} from "../../libs/util.js";
-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 fetchSubscriptionData = (id, authToken) => {
-  if (!id) {
-    throw new Error("Subscription ID is missing");
-  }
-  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
-};
-export default function MiniInvoiceList() {
-  const { t, locale } = useLocaleContext();
-  const params = new URL(window.location.href).searchParams;
-  const subscriptionId = params.get("id") || "";
-  const authToken = params.get("authToken") || "";
-  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
-  const { data } = useRequest(
-    () => fetchInvoiceData({
-      page: 1,
-      pageSize: 20,
-      status: "open,paid,uncollectible",
-      subscription_id: subscriptionId,
-      authToken,
-      ignore_zero: true,
-      include_staking: true
-    })
-  );
-  const subscriptionPageUrl = useMemo(() => {
-    if (!subscription) {
-      return "#";
-    }
-    const pageUrl = joinURL(getPrefix(), `/customer/subscription/${subscription.id}`);
-    return withQuery(pageUrl, {
-      source: "embed",
-      ...getDidConnectQueryParams({ forceConnected: subscription.customer.did })
-    });
-  }, [subscription]);
-  if (error) {
-    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(Alert, { severity: "error", children: formatError(error) }) });
-  }
-  if (!subscription || loading) {
-    return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(CircularProgress, {}) });
-  }
-  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("common.status"),
-      value: /* @__PURE__ */ jsx(Status, { label: subscription.status, color: getSubscriptionStatusColor(subscription.status) })
-    }
-  ];
-  if (subscription.status === "active" || subscription.status === "trialing") {
-    infoList.push({
-      name: t("payment.customer.subscriptions.nextInvoice"),
-      value: /* @__PURE__ */ jsx(
-        Typography,
-        {
-          sx: {
-            color: "success.main",
-            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",
-          alignItem: "center",
-          justifyContent: "flex-start",
-          padding: "16px",
-          width: "100%",
-          height: "100%"
-        },
-        children: [
-          /* @__PURE__ */ jsx(Typography, { component: "h3", sx: { textAlign: "center" }, variant: "h5", gutterBottom: true, children: t("payment.customer.subscriptions.current") }),
-          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsx(List, { children: infoList.map(({ name, value }) => {
-            return /* @__PURE__ */ jsxs(ListItem, { disableGutters: true, sx: { display: "flex", justifyContent: "space-between" }, children: [
-              /* @__PURE__ */ jsx(Typography, { component: "span", children: name }),
-              /* @__PURE__ */ jsx(Typography, { component: "span", children: value })
-            ] }, name);
-          }) }) }),
-          /* @__PURE__ */ jsx(Divider, {}),
-          /* @__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, locale, "YYYY-MM-DD") }),
-                /* @__PURE__ */ jsxs(Typography, { component: "span", sx: { flex: 1, textAlign: "right" }, children: [
-                  formatBNStr(item.total, item.paymentCurrency.decimal),
-                  "\xA0",
-                  item.paymentCurrency.symbol
-                ] }),
-                /* @__PURE__ */ jsx(Typography, { component: "span", sx: { flex: 2, textAlign: "right" }, children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) }) })
-              ] }, item.id);
-            })
-          ] }) }),
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "center", spacing: 2, sx: { mt: 2 }, children: [
-            subscription.service_actions?.map((x) => (
-              // @ts-ignore
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  component: Link,
-                  variant: x.variant,
-                  color: x.color,
-                  href: x.link,
-                  size: "small",
-                  target: "_blank",
-                  sx: { textDecoration: "none !important" },
-                  children: x.text[locale] || x.text.en || x.name
-                },
-                x.name
-              )
-            )),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "contained",
-                sx: { color: "#fff!important", width: subscription.service_actions?.length ? "auto" : "100%" },
-                target: "_blank",
-                href: subscriptionPageUrl,
-                children: t("payment.customer.subscriptions.view")
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function Position({ children }) {
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      className: "mini-invoice-box",
-      sx: {
-        padding: "8px",
-        width: "100%",
-        maxWidth: "500px",
-        background: "#fff",
-        margin: "0 auto"
-      },
-      children
-    }
-  );
-}

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

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

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

@@ -1,264 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = MiniInvoiceList;
-var _jsxRuntime = require("react/jsx-runtime");
-var _context = require("@arcblock/ux/lib/Locale/context");
-var _material = require("@mui/material");
-var _ahooks = require("ahooks");
-var _react = require("react");
-var _ufo = require("ufo");
-var _status = _interopRequireDefault(require("../../components/status"));
-var _api = _interopRequireDefault(require("../../libs/api"));
-var _didConnect = require("../../libs/did-connect");
-var _util = require("../../libs/util");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const fetchInvoiceData = (params = {}) => {
-  const search = new URLSearchParams();
-  Object.keys(params).forEach(key => {
-    search.set(key, String(params[key]));
-  });
-  return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
-};
-const fetchSubscriptionData = (id, authToken) => {
-  if (!id) {
-    throw new Error("Subscription ID is missing");
-  }
-  return _api.default.get(`/api/subscriptions/${id}?authToken=${authToken}`).then(res => res.data);
-};
-function MiniInvoiceList() {
-  const {
-    t,
-    locale
-  } = (0, _context.useLocaleContext)();
-  const params = new URL(window.location.href).searchParams;
-  const subscriptionId = params.get("id") || "";
-  const authToken = params.get("authToken") || "";
-  const {
-    data: subscription,
-    error,
-    loading
-  } = (0, _ahooks.useRequest)(() => fetchSubscriptionData(subscriptionId, authToken));
-  const {
-    data
-  } = (0, _ahooks.useRequest)(() => fetchInvoiceData({
-    page: 1,
-    pageSize: 20,
-    status: "open,paid,uncollectible",
-    subscription_id: subscriptionId,
-    authToken,
-    ignore_zero: true,
-    include_staking: true
-  }));
-  const subscriptionPageUrl = (0, _react.useMemo)(() => {
-    if (!subscription) {
-      return "#";
-    }
-    const pageUrl = (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscription.id}`);
-    return (0, _ufo.withQuery)(pageUrl, {
-      source: "embed",
-      ...(0, _didConnect.getDidConnectQueryParams)({
-        forceConnected: subscription.customer.did
-      })
-    });
-  }, [subscription]);
-  if (error) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
-        severity: "error",
-        children: (0, _util.formatError)(error)
-      })
-    });
-  }
-  if (!subscription || loading) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
-      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
-    });
-  }
-  const invoices = data?.list || [];
-  const infoList = [{
-    name: t("payment.customer.subscriptions.plan"),
-    value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-      fontWeight: 600,
-      sx: {
-        marginRight: "10px"
-      },
-      children: (0, _util.formatSubscriptionProduct)(subscription.items)
-    })
-  }, {
-    name: t("common.status"),
-    value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-      label: subscription.status,
-      color: (0, _util.getSubscriptionStatusColor)(subscription.status)
-    })
-  }];
-  if (subscription.status === "active" || subscription.status === "trialing") {
-    infoList.push({
-      name: t("payment.customer.subscriptions.nextInvoice"),
-      value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        sx: {
-          color: "success.main",
-          fontWeight: "bold",
-          marginRight: "10px"
-        },
-        children: (0, _util.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",
-        alignItem: "center",
-        justifyContent: "flex-start",
-        padding: "16px",
-        width: "100%",
-        height: "100%"
-      },
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-        component: "h3",
-        sx: {
-          textAlign: "center"
-        },
-        variant: "h5",
-        gutterBottom: true,
-        children: t("payment.customer.subscriptions.current")
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          marginTop: "12px"
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.List, {
-          children: infoList.map(({
-            name,
-            value
-          }) => {
-            return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.ListItem, {
-              disableGutters: true,
-              sx: {
-                display: "flex",
-                justifyContent: "space-between"
-              },
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                children: name
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                children: value
-              })]
-            }, name);
-          })
-        })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-        sx: {
-          marginTop: "12px",
-          flex: 1
-        },
-        children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.List, {
-          sx: {
-            overflow: "auto"
-          },
-          className: "mini-invoice-list",
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListSubheader, {
-            disableGutters: true,
-            sx: {
-              padding: 0
-            },
-            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-              component: "h2",
-              variant: "h6",
-              fontSize: "16px",
-              children: t("payment.customer.invoices")
-            })
-          }), 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: {
-                display: "flex",
-                justifyContent: "space-between"
-              },
-              children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                sx: {
-                  flex: 3
-                },
-                children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD")
-              }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-                component: "span",
-                sx: {
-                  flex: 1,
-                  textAlign: "right"
-                },
-                children: [(0, _util.formatBNStr)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                component: "span",
-                sx: {
-                  flex: 2,
-                  textAlign: "right"
-                },
-                children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-                  label: item.status,
-                  color: (0, _util.getInvoiceStatusColor)(item.status)
-                })
-              })]
-            }, item.id);
-          })]
-        })
-      }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "row",
-        justifyContent: "center",
-        spacing: 2,
-        sx: {
-          mt: 2
-        },
-        children: [subscription.service_actions?.map(x =>
-        // @ts-ignore
-        /* @__PURE__ */
-        (0, _jsxRuntime.jsx)(_material.Button, {
-          component: _material.Link,
-          variant: x.variant,
-          color: x.color,
-          href: x.link,
-          size: "small",
-          target: "_blank",
-          sx: {
-            textDecoration: "none !important"
-          },
-          children: x.text[locale] || x.text.en || x.name
-        }, x.name)), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-          variant: "contained",
-          sx: {
-            color: "#fff!important",
-            width: subscription.service_actions?.length ? "auto" : "100%"
-          },
-          target: "_blank",
-          href: subscriptionPageUrl,
-          children: t("payment.customer.subscriptions.view")
-        })]
-      })]
-    })]
-  });
-}
-function Position({
-  children
-}) {
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
-    className: "mini-invoice-box",
-    sx: {
-      padding: "8px",
-      width: "100%",
-      maxWidth: "500px",
-      background: "#fff",
-      margin: "0 auto"
-    },
-    children
-  });
-}

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

@@ -1,233 +0,0 @@
-/* eslint-disable react/no-unstable-nested-components */
-import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Divider,
-  Link,
-  List,
-  ListItem,
-  ListSubheader,
-  Stack,
-  Typography,
-} from '@mui/material';
-import { useRequest } from 'ahooks';
-import { useMemo } from 'react';
-import { joinURL, withQuery } from 'ufo';
-
-import Status from '../../components/status';
-import api from '../../libs/api';
-import { getDidConnectQueryParams } from '../../libs/did-connect';
-import {
-  formatBNStr,
-  formatError,
-  formatSubscriptionProduct,
-  formatTime,
-  formatToDate,
-  getInvoiceStatusColor,
-  getPrefix,
-  getSubscriptionStatusColor,
-} from '../../libs/util';
-
-const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
-  const search = new URLSearchParams();
-  Object.keys(params).forEach((key) => {
-    search.set(key, String(params[key]));
-  });
-  return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
-};
-
-const fetchSubscriptionData = (id: string, authToken: string): Promise<TSubscriptionExpanded> => {
-  if (!id) {
-    throw new Error('Subscription ID is missing');
-  }
-
-  return api.get(`/api/subscriptions/${id}?authToken=${authToken}`).then((res) => res.data);
-};
-
-export default function MiniInvoiceList() {
-  const { t, locale } = useLocaleContext();
-  const params = new URL(window.location.href).searchParams;
-
-  const subscriptionId = params.get('id') || '';
-  const authToken = params.get('authToken') || '';
-
-  const { data: subscription, error, loading } = useRequest(() => fetchSubscriptionData(subscriptionId, authToken));
-  const { data } = useRequest(() =>
-    fetchInvoiceData({
-      page: 1,
-      pageSize: 20,
-      status: 'open,paid,uncollectible',
-      subscription_id: subscriptionId,
-      authToken,
-      ignore_zero: true,
-      include_staking: true,
-    })
-  );
-
-  const subscriptionPageUrl: string = useMemo(() => {
-    if (!subscription) {
-      return '#';
-    }
-
-    const pageUrl: string = joinURL(getPrefix(), `/customer/subscription/${subscription.id}`);
-
-    return withQuery(pageUrl, {
-      source: 'embed',
-      ...getDidConnectQueryParams({ forceConnected: subscription.customer.did }),
-    });
-  }, [subscription]);
-
-  if (error) {
-    return (
-      <Position>
-        <Alert severity="error">{formatError(error)}</Alert>
-      </Position>
-    );
-  }
-  if (!subscription || loading) {
-    return (
-      <Position>
-        <CircularProgress />
-      </Position>
-    );
-  }
-
-  const invoices = data?.list || [];
-
-  const infoList = [
-    {
-      name: t('payment.customer.subscriptions.plan'),
-      value: (
-        <Typography fontWeight={600} sx={{ marginRight: '10px' }}>
-          {formatSubscriptionProduct(subscription.items)}
-        </Typography>
-      ),
-    },
-    {
-      name: t('common.status'),
-      value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
-    },
-  ];
-
-  if (subscription.status === 'active' || subscription.status === 'trialing') {
-    infoList.push({
-      name: t('payment.customer.subscriptions.nextInvoice'),
-      value: (
-        <Typography
-          sx={{
-            color: 'success.main',
-            fontWeight: 'bold',
-            marginRight: '10px',
-          }}>
-          {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',
-          alignItem: 'center',
-          justifyContent: 'flex-start',
-          padding: '16px',
-          width: '100%',
-          height: '100%',
-        }}>
-        <Typography component="h3" sx={{ textAlign: 'center' }} variant="h5" gutterBottom>
-          {t('payment.customer.subscriptions.current')}
-        </Typography>
-        <Box sx={{ marginTop: '12px' }}>
-          <List>
-            {infoList.map(({ name, value }) => {
-              return (
-                <ListItem key={name} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span">{name}</Typography>
-                  <Typography component="span">{value}</Typography>
-                </ListItem>
-              );
-            })}
-          </List>
-        </Box>
-        <Divider />
-        <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>
-            {(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, locale, 'YYYY-MM-DD')}
-                    </Typography>
-                    <Typography component="span" sx={{ flex: 1, textAlign: 'right' }}>
-                      {formatBNStr(item.total, item.paymentCurrency.decimal)}&nbsp;
-                      {item.paymentCurrency.symbol}
-                    </Typography>
-                    <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
-                      <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
-                    </Typography>
-                  </ListItem>
-                );
-              })
-            )}
-          </List>
-        </Box>
-        <Stack direction="row" justifyContent="center" spacing={2} sx={{ mt: 2 }}>
-          {subscription.service_actions?.map((x) => (
-            // @ts-ignore
-            <Button
-              component={Link}
-              key={x.name}
-              variant={x.variant}
-              color={x.color}
-              href={x.link}
-              size="small"
-              target="_blank"
-              sx={{ textDecoration: 'none !important' }}>
-              {x.text[locale] || x.text.en || x.name}
-            </Button>
-          ))}
-          <Button
-            variant="contained"
-            sx={{ color: '#fff!important', width: subscription.service_actions?.length ? 'auto' : '100%' }}
-            target="_blank"
-            href={subscriptionPageUrl}>
-            {t('payment.customer.subscriptions.view')}
-          </Button>
-        </Stack>
-      </Box>
-    </Position>
-  );
-}
-
-function Position({ children }: any) {
-  return (
-    <Box
-      className="mini-invoice-box" // 预留 class 用于设置定位
-      sx={{
-        padding: '8px',
-        width: '100%',
-        maxWidth: '500px',
-        background: '#fff',
-        margin: '0 auto',
-      }}>
-      {children}
-    </Box>
-  );
-}