@blocklet/payment-react 1.13.129 → 1.13.130

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

@@ -20,17 +20,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]
@@ -82,3 +84,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,7 @@ 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 api from "../../api.js";
 import Status from "../../components/status.js";
 import {
@@ -12,26 +12,24 @@ import {
   getInvoiceStatusColor,
   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 (!data || !subscription) {
     return /* @__PURE__ */ jsx(Position, { children: /* @__PURE__ */ jsx(CircularProgress, {}) });
   }
   if (data && data.list.length === 0) {
@@ -43,7 +41,7 @@ export default function MiniInvoiceList({ subscription }) {
       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) })
     },
     {
@@ -53,7 +51,8 @@ export default function MiniInvoiceList({ subscription }) {
         {
           sx: {
             color: "#34BE74",
-            fontWeight: "bold"
+            fontWeight: "bold",
+            marginRight: "10px"
           },
           children: formatTime(subscription.current_period_end * 1e3)
         }
@@ -83,21 +82,28 @@ 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(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", children: formatToDate(item.created_at) }),
-                /* @__PURE__ */ jsxs(Typography, { component: "span", children: [
-                  fromUnitToToken(item.total, item.paymentCurrency.decimal),
-                  "\xA0",
-                  item.paymentCurrency.symbol
-                ] }),
-                /* @__PURE__ */ jsx(Status, { label: item.status, color: getInvoiceStatusColor(item.status) })
-              ] }, item.id);
-            })
-          ] }) }),
-          /* @__PURE__ */ jsx(Button, { target: "_top", variant: "contained", sx: { marginTop: "auto", width: "100%" }, href: "", children: t("payment.customer.subscriptions.title") })
+          /* @__PURE__ */ jsx(Box, { sx: { marginTop: "12px" }, children: /* @__PURE__ */ jsxs(
+            List,
+            {
+              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);
+                })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Button, { target: "_top", variant: "contained", sx: { marginTop: "10px 0", width: "100%" }, href: "", children: t("payment.customer.subscriptions.title") })
         ]
       }
     )
@@ -109,15 +115,12 @@ 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/index.d.ts

@@ -8,9 +8,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';

package/es/index.js

@@ -8,9 +8,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";

package/es/locales/en.js

@@ -211,7 +211,7 @@ export default flat({
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
-        current: "Current subscriptions",
+        current: "Current subscription",
         empty: "Seems you do not have any subscriptions here"
       }
     }

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

@@ -27,13 +27,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 +52,8 @@ function CustomerInvoiceList({
       page,
       pageSize,
       status: "open,paid,uncollectible",
-      customer_id
+      customer_id,
+      subscription_id
     });
   }, {
     reloadDeps: [customer_id]
@@ -147,4 +151,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;

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

@@ -13,35 +13,33 @@ var _api = _interopRequireDefault(require("../../api"));
 var _status = _interopRequireDefault(require("../../components/status"));
 var _util2 = require("../../util");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const fetchData = (params = {}) => {
+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 pageSize = 10;
-function MiniInvoiceList({
-  subscription
-}) {
+const fetchSubscriptionData = id => {
+  return _api.default.get(`/api/subscriptions/${id}`).then(res => res.data);
+};
+function MiniInvoiceList() {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const subscriptionId = new URL(window.location.href).searchParams.get("id");
   const {
-    data,
-    loading
-  } = (0, _ahooks.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]
-  });
-  if (loading || !data) {
+    data: subscription
+  } = (0, _ahooks.useRequest)(() => fetchSubscriptionData(subscriptionId));
+  const {
+    data
+  } = (0, _ahooks.useRequest)(() => fetchInvoiceData({
+    page: 1,
+    pageSize: 10,
+    status: "open,paid,uncollectible",
+    subscription_id: subscriptionId
+  }));
+  if (!data || !subscription) {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(Position, {
       children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
     });
@@ -64,7 +62,7 @@ function MiniInvoiceList({
       children: (0, _util2.formatSubscriptionProduct)(subscription.items)
     })
   }, {
-    name: t("payment.common.status"),
+    name: t("common.status"),
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
       label: subscription.status,
       color: (0, _util2.getSubscriptionStatusColor)(subscription.status)
@@ -74,7 +72,8 @@ function MiniInvoiceList({
     value: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       sx: {
         color: "#34BE74",
-        fontWeight: "bold"
+        fontWeight: "bold",
+        marginRight: "10px"
       },
       children: (0, _util2.formatTime)(subscription.current_period_end * 1e3)
     })
@@ -138,6 +137,7 @@ function MiniInvoiceList({
               padding: 0
             }
           },
+          className: "mini-invoice-list",
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.ListSubheader, {
             disableGutters: true,
             sx: {
@@ -158,13 +158,29 @@ function MiniInvoiceList({
               },
               children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
                 component: "span",
+                sx: {
+                  flex: 3
+                },
                 children: (0, _util2.formatToDate)(item.created_at)
               }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
                 component: "span",
+                sx: {
+                  flex: 1
+                },
                 children: [(0, _util.fromUnitToToken)(item.total, item.paymentCurrency.decimal), "\xA0", item.paymentCurrency.symbol]
-              }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_status.default, {
-                label: item.status,
-                color: (0, _util2.getInvoiceStatusColor)(item.status)
+              }), /* @__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, _util2.getInvoiceStatusColor)(item.status),
+                  sx: {
+                    flex: 2
+                  }
+                })
               })]
             }, item.id);
           })]
@@ -173,7 +189,7 @@ function MiniInvoiceList({
         target: "_top",
         variant: "contained",
         sx: {
-          marginTop: "auto",
+          marginTop: "10px 0",
           width: "100%"
         },
         href: "",
@@ -188,15 +204,12 @@ function Position({
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
     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/lib/index.d.ts

@@ -8,9 +8,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';

package/lib/index.js

@@ -148,9 +148,9 @@ var _pricingTable = _interopRequireDefault(require("./components/pricing-table")
 var _status = _interopRequireDefault(require("./components/status"));
 var _switchButton = _interopRequireDefault(require("./components/switch-button"));
 var _dayjs = _interopRequireDefault(require("./dayjs"));
-var _list = _interopRequireDefault(require("./histroy/invoice/list"));
-var _list2 = _interopRequireDefault(require("./histroy/mini-invoice/list"));
-var _list3 = _interopRequireDefault(require("./histroy/payment/list"));
+var _list = _interopRequireDefault(require("./history/invoice/list"));
+var _list2 = _interopRequireDefault(require("./history/mini-invoice/list"));
+var _list3 = _interopRequireDefault(require("./history/payment/list"));
 var _amount = _interopRequireDefault(require("./payment/amount"));
 var _phone = _interopRequireDefault(require("./payment/form/phone"));
 var _index = _interopRequireDefault(require("./payment/index"));

package/lib/locales/en.js

@@ -218,7 +218,7 @@ module.exports = (0, _flat.default)({
         plan: "Plan",
         nextInvoice: "Next Invoice",
         title: "Manage subscriptions",
-        current: "Current subscriptions",
+        current: "Current subscription",
         empty: "Seems you do not have any subscriptions here"
       }
     }

package/package.json

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

package/src/{histroy → history}/invoice/list.tsx

@@ -24,24 +24,27 @@ const groupByDate = (items: TInvoiceExpanded[]) => {
 const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   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: any) => res.data);
 };
 
 type Props = {
-  customer_id: string;
+  customer_id?: string;
+  subscription_id?: string;
 };
 
 const pageSize = 10;
 
-export default function CustomerInvoiceList({ customer_id }: Props) {
+export default function CustomerInvoiceList({ customer_id, subscription_id }: Props) {
   const { t } = useLocaleContext();
 
   const { data, loadMore, loadingMore, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
     (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],
@@ -120,3 +123,8 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
     </Stack>
   );
 }
+
+CustomerInvoiceList.defaultProps = {
+  customer_id: '',
+  subscription_id: '',
+};

package/src/{histroy → history}/mini-invoice/list.tsx

@@ -3,7 +3,7 @@ import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import type { Paginated, TInvoiceExpanded, TSubscriptionExpanded } from '@blocklet/payment-types';
 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 api from '../../api';
 import Status from '../../components/status';
@@ -15,7 +15,7 @@ import {
   getSubscriptionStatusColor,
 } from '../../util';
 
-const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
+const fetchInvoiceData = (params: Record<string, any> = {}): Promise<Paginated<TInvoiceExpanded>> => {
   const search = new URLSearchParams();
   Object.keys(params).forEach((key) => {
     search.set(key, String(params[key]));
@@ -23,26 +23,21 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoice
   return api.get(`/api/invoices?${search.toString()}`).then((res: any) => res.data);
 };
 
-type Props = {
-  subscription: TSubscriptionExpanded;
+const fetchSubscriptionData = (id: string): Promise<TSubscriptionExpanded> => {
+  return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
 };
 
-const pageSize = 10;
-
-export default function MiniInvoiceList({ subscription }: Props) {
+export default function MiniInvoiceList() {
   const { t } = useLocaleContext();
 
-  const { data, loading } = useInfiniteScroll<Paginated<TInvoiceExpanded>>(
-    (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 as string));
+  const { data } = useRequest(() =>
+    fetchInvoiceData({ page: 1, pageSize: 10, status: 'open,paid,uncollectible', subscription_id: subscriptionId })
   );
 
-  if (loading || !data) {
+  if (!data || !subscription) {
     return (
       <Position>
         <CircularProgress />
@@ -68,7 +63,7 @@ export default function MiniInvoiceList({ subscription }: Props) {
       ),
     },
     {
-      name: t('payment.common.status'),
+      name: t('common.status'),
       value: <Status label={subscription.status} color={getSubscriptionStatusColor(subscription.status)} />,
     },
 
@@ -79,6 +74,7 @@ export default function MiniInvoiceList({ subscription }: Props) {
           sx={{
             color: '#34BE74',
             fontWeight: 'bold',
+            marginRight: '10px',
           }}>
           {formatTime(subscription.current_period_end * 1000)}
         </Typography>
@@ -116,7 +112,9 @@ export default function MiniInvoiceList({ subscription }: Props) {
         </Box>
         <Divider />
         <Box sx={{ marginTop: '12px' }}>
-          <List sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}>
+          <List
+            sx={{ overflow: 'auto', maxHeight: { xs: '240px', md: '360px', padding: 0 } }}
+            className="mini-invoice-list">
             <ListSubheader disableGutters sx={{ padding: 0 }}>
               <Typography component="h2" variant="h6" fontSize="16px">
                 {t('payment.customer.invoices')}
@@ -125,18 +123,22 @@ export default function MiniInvoiceList({ subscription }: Props) {
             {(data.list || []).map((item: any) => {
               return (
                 <ListItem key={item.id} disableGutters sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <Typography component="span">{formatToDate(item.created_at)}</Typography>
-                  <Typography component="span">
+                  <Typography component="span" sx={{ flex: 3 }}>
+                    {formatToDate(item.created_at)}
+                  </Typography>
+                  <Typography component="span" sx={{ flex: 1 }}>
                     {fromUnitToToken(item.total, item.paymentCurrency.decimal)}&nbsp;
                     {item.paymentCurrency.symbol}
                   </Typography>
-                  <Status label={item.status} color={getInvoiceStatusColor(item.status)} />
+                  <Typography component="span" sx={{ flex: 2, textAlign: 'right' }}>
+                    <Status label={item.status} color={getInvoiceStatusColor(item.status)} sx={{ flex: 2 }} />
+                  </Typography>
                 </ListItem>
               );
             })}
           </List>
         </Box>
-        <Button target="_top" variant="contained" sx={{ marginTop: 'auto', width: '100%' }} href="">
+        <Button target="_top" variant="contained" sx={{ marginTop: '10px 0', width: '100%' }} href="">
           {t('payment.customer.subscriptions.title')}
         </Button>
       </Box>
@@ -149,15 +151,12 @@ function Position({ children }: any) {
     <Box
       className="mini-invoice-box" // 预留 class 用于设置定位
       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}
     </Box>

package/src/index.ts

@@ -8,9 +8,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';

package/src/locales/en.tsx

@@ -216,7 +216,7 @@ export default flat({
         plan: 'Plan',
         nextInvoice: 'Next Invoice',
         title: 'Manage subscriptions',
-        current: 'Current subscriptions',
+        current: 'Current subscription',
         empty: 'Seems you do not have any subscriptions here',
       },
     },

package/es/histroy/invoice/list.d.ts

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

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-type Props = {
-    subscription: TSubscriptionExpanded;
-};
-export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
-export {};

package/lib/histroy/invoice/list.d.ts

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

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { TSubscriptionExpanded } from '@blocklet/payment-types';
-type Props = {
-    subscription: TSubscriptionExpanded;
-};
-export default function MiniInvoiceList({ subscription }: Props): import("react").JSX.Element;
-export {};