@blocklet/payment-react 1.13.150 → 1.13.152

package/es/checkout/form.js

@@ -1,9 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
+import { useEffect } from "react";
+import { joinURL } from "ufo";
 import api from "../api.js";
 import Payment from "../payment/index.js";
-import { mergeExtraParams } from "../util.js";
+import { getPrefix, mergeExtraParams } from "../util.js";
 const startFromPaymentLink = async (id, params) => {
   const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
   return data;
@@ -21,6 +23,11 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
   const { error: apiError, data } = useRequest(
     () => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
   );
+  useEffect(() => {
+    if (type === "paymentLink" && mode === "standalone" && data) {
+      window.history.replaceState(null, "", joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+    }
+  }, [type, mode, data]);
   const handlePaid = () => {
     setState({ completed: true });
     onPaid?.(data);

package/es/components/confirm.d.ts

@@ -1,14 +1,18 @@
 import type { EventHandler } from 'react';
-declare function ConfirmDialog({ onConfirm, onCancel, title, message, loading, }: {
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, cancel, loading, }: {
     onConfirm: EventHandler<any>;
     onCancel: EventHandler<any>;
     title: string | React.ReactNode;
     message: string | React.ReactNode;
+    confirm?: string | React.ReactNode;
+    cancel?: string | React.ReactNode;
     loading?: boolean;
 }): import("react").JSX.Element;
 declare namespace ConfirmDialog {
     var defaultProps: {
         loading: boolean;
+        confirm: string;
+        cancel: string;
     };
 }
 export default ConfirmDialog;

package/es/components/confirm.js

@@ -7,6 +7,8 @@ export default function ConfirmDialog({
   onCancel,
   title,
   message,
+  confirm,
+  cancel,
   loading
 }) {
   const { t } = useLocaleContext();
@@ -18,14 +20,16 @@ export default function ConfirmDialog({
       onConfirm,
       onCancel,
       confirmButton: {
-        text: t("common.confirm"),
+        text: confirm || t("common.confirm"),
         props: { color: "error", size: "small", variant: "contained", disabled: !!loading }
       },
-      cancelButton: { text: t("common.cancel"), props: { color: "inherit", size: "small" } },
+      cancelButton: { text: cancel || t("common.cancel"), props: { color: "inherit", size: "small" } },
       children: /* @__PURE__ */ jsx(Typography, { children: message })
     }
   );
 }
 ConfirmDialog.defaultProps = {
-  loading: false
+  loading: false,
+  confirm: "",
+  cancel: ""
 };

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

@@ -2,12 +2,18 @@
 type Props = {
     customer_id?: string;
     subscription_id?: string;
+    status?: string;
+    pageSize?: number;
+    target?: string;
 };
-declare function CustomerInvoiceList({ customer_id, subscription_id }: Props): import("react").JSX.Element;
+declare function CustomerInvoiceList({ customer_id, subscription_id, status, pageSize, target }: Props): import("react").JSX.Element;
 declare namespace CustomerInvoiceList {
     var defaultProps: {
         customer_id: string;
         subscription_id: string;
+        status: string;
+        pageSize: number;
+        target: string;
     };
 }
 export default CustomerInvoiceList;

package/es/history/invoice/list.js

@@ -27,13 +27,13 @@ const fetchData = (params = {}) => {
   });
   return api.get(`/api/invoices?${search.toString()}`).then((res) => res.data);
 };
-const pageSize = 10;
-export default function CustomerInvoiceList({ customer_id, subscription_id }) {
+export default function CustomerInvoiceList({ customer_id, subscription_id, status, pageSize, target }) {
   const { t } = useLocaleContext();
+  const size = pageSize || 10;
   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, subscription_id });
+      const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
+      return fetchData({ page, pageSize: size, status, customer_id, subscription_id });
     },
     {
       reloadDeps: [customer_id]
@@ -65,7 +65,14 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }) {
           },
           flexWrap: "nowrap",
           children: [
-            /* @__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(
+              "a",
+              {
+                href: joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`),
+                target,
+                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),
@@ -81,11 +88,14 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }) {
     ] }, date)),
     /* @__PURE__ */ jsxs(Box, { children: [
       hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.invoices") }) : t("common.loadMore", { resource: t("payment.customer.invoices") }) }),
-      !hasMore && data.count > pageSize && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
+      !hasMore && data.count > size && /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: t("common.noMore", { resource: t("payment.customer.invoices") }) })
     ] })
   ] });
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
-  subscription_id: ""
+  subscription_id: "",
+  status: "open,paid,uncollectible",
+  pageSize: 10,
+  target: "self"
 };

package/es/locales/en.js

@@ -148,7 +148,8 @@ export default flat({
     customer: {
       payments: "Payment History",
       invoices: "Invoice History",
-      details: "Billing Details",
+      details: "Details",
+      summary: "Summary",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {
@@ -168,7 +169,14 @@ export default flat({
         }
       },
       pastDue: {
-        button: "Pay"
+        button: "Pay",
+        invoices: "Past Due Invoices",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
+        alert: {
+          title: "You have unpaid invoices",
+          description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",
+          confirm: "Pay Now"
+        }
       },
       recover: {
         button: "Renew",

package/es/locales/zh.js

@@ -148,7 +148,8 @@ export default flat({
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u53D1\u7968\u5386\u53F2",
-      details: "\u8BA1\u8D39\u8BE6\u60C5",
+      details: "\u8D26\u6237\u8BE6\u60C5",
+      summary: "\u8BA1\u8D39\u6458\u8981",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {
@@ -168,7 +169,14 @@ export default flat({
         }
       },
       pastDue: {
-        button: "\u7EED\u8D39"
+        button: "\u7EED\u8D39",
+        invoices: "\u6B20\u8D39\u5E10\u5355",
+        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1",
+        alert: {
+          title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
+          description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",
+          confirm: "\u53BB\u652F\u4ED8"
+        }
       },
       recover: {
         button: "\u7EED\u8BA2",

package/es/payment/form/index.js

@@ -14,6 +14,7 @@ import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
 import api from "../../api.js";
+import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { formatError, getPrefix, getStatementDescriptor } from "../../util.js";
@@ -71,6 +72,7 @@ export default function PaymentForm({
     paymentIntent,
     stripeContext: void 0,
     customer,
+    customerLimited: false,
     stripePaying: false
   });
   const currencies = flatPaymentMethods(paymentMethods);
@@ -196,10 +198,17 @@ export default function PaymentForm({
         }
       }
     } catch (err) {
+      let shouldToast = true;
       if (err.response?.data?.code) {
         dispatch(`error.${err.response?.data?.code}`);
+        if (err.response.data.code === "CUSTOMER_LIMITED") {
+          shouldToast = false;
+          setState({ customerLimited: true });
+        }
+      }
+      if (shouldToast) {
+        Toast.error(formatError(err));
       }
-      Toast.error(formatError(err));
     } finally {
       setState({ submitting: false });
     }
@@ -353,6 +362,16 @@ export default function PaymentForm({
           children: t("payment.checkout.confirm", { payee })
         }
       )
-    ] }) })
+    ] }) }),
+    state.customerLimited && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        onConfirm: () => window.open(joinURL(window.location.origin, getPrefix(), "/customer/invoice/past-due"), "_blank"),
+        onCancel: () => setState({ customerLimited: false }),
+        confirm: t("payment.customer.pastDue.alert.confirm"),
+        title: t("payment.customer.pastDue.alert.title"),
+        message: t("payment.customer.pastDue.alert.description")
+      }
+    )
   ] });
 }

package/lib/checkout/form.js

@@ -7,6 +7,8 @@ module.exports = CheckoutForm;
 var _jsxRuntime = require("react/jsx-runtime");
 var _ahooks = require("ahooks");
 var _noop = _interopRequireDefault(require("lodash/noop"));
+var _react = require("react");
+var _ufo = require("ufo");
 var _api = _interopRequireDefault(require("../api"));
 var _payment = _interopRequireDefault(require("../payment"));
 var _util = require("../util");
@@ -43,6 +45,11 @@ function CheckoutForm({
     error: apiError,
     data
   } = (0, _ahooks.useRequest)(() => type === "paymentLink" ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id));
+  (0, _react.useEffect)(() => {
+    if (type === "paymentLink" && mode === "standalone" && data) {
+      window.history.replaceState(null, "", (0, _ufo.joinURL)((0, _util.getPrefix)(), `/checkout/pay/${data.checkoutSession.id}`));
+    }
+  }, [type, mode, data]);
   const handlePaid = () => {
     setState({
       completed: true

package/lib/components/confirm.d.ts

@@ -1,14 +1,18 @@
 import type { EventHandler } from 'react';
-declare function ConfirmDialog({ onConfirm, onCancel, title, message, loading, }: {
+declare function ConfirmDialog({ onConfirm, onCancel, title, message, confirm, cancel, loading, }: {
     onConfirm: EventHandler<any>;
     onCancel: EventHandler<any>;
     title: string | React.ReactNode;
     message: string | React.ReactNode;
+    confirm?: string | React.ReactNode;
+    cancel?: string | React.ReactNode;
     loading?: boolean;
 }): import("react").JSX.Element;
 declare namespace ConfirmDialog {
     var defaultProps: {
         loading: boolean;
+        confirm: string;
+        cancel: string;
     };
 }
 export default ConfirmDialog;

package/lib/components/confirm.js

@@ -13,6 +13,8 @@ function ConfirmDialog({
   onCancel,
   title,
   message,
+  confirm,
+  cancel,
   loading
 }) {
   const {
@@ -24,7 +26,7 @@ function ConfirmDialog({
     onConfirm,
     onCancel,
     confirmButton: {
-      text: t("common.confirm"),
+      text: confirm || t("common.confirm"),
       props: {
         color: "error",
         size: "small",
@@ -33,7 +35,7 @@ function ConfirmDialog({
       }
     },
     cancelButton: {
-      text: t("common.cancel"),
+      text: cancel || t("common.cancel"),
       props: {
         color: "inherit",
         size: "small"
@@ -45,5 +47,7 @@ function ConfirmDialog({
   });
 }
 ConfirmDialog.defaultProps = {
-  loading: false
+  loading: false,
+  confirm: "",
+  cancel: ""
 };

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

@@ -2,12 +2,18 @@
 type Props = {
     customer_id?: string;
     subscription_id?: string;
+    status?: string;
+    pageSize?: number;
+    target?: string;
 };
-declare function CustomerInvoiceList({ customer_id, subscription_id }: Props): import("react").JSX.Element;
+declare function CustomerInvoiceList({ customer_id, subscription_id, status, pageSize, target }: Props): import("react").JSX.Element;
 declare namespace CustomerInvoiceList {
     var defaultProps: {
         customer_id: string;
         subscription_id: string;
+        status: string;
+        pageSize: number;
+        target: string;
     };
 }
 export default CustomerInvoiceList;

package/lib/history/invoice/list.js

@@ -34,25 +34,28 @@ const fetchData = (params = {}) => {
   });
   return _api.default.get(`/api/invoices?${search.toString()}`).then(res => res.data);
 };
-const pageSize = 10;
 function CustomerInvoiceList({
   customer_id,
-  subscription_id
+  subscription_id,
+  status,
+  pageSize,
+  target
 }) {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const size = pageSize || 10;
   const {
     data,
     loadMore,
     loadingMore,
     loading
   } = (0, _ahooks.useInfiniteScroll)(d => {
-    const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
+    const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
     return fetchData({
       page,
-      pageSize,
-      status: "open,paid,uncollectible",
+      pageSize: size,
+      status,
       customer_id,
       subscription_id
     });
@@ -103,6 +106,7 @@ function CustomerInvoiceList({
           flex: 3,
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
             href: (0, _ufo.joinURL)(window.location.origin, (0, _util2.getPrefix)(), `/customer/invoice/${invoice.id}`),
+            target,
             children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               component: "span",
               children: invoice.number
@@ -144,7 +148,7 @@ function CustomerInvoiceList({
         }) : t("common.loadMore", {
           resource: t("payment.customer.invoices")
         })
-      }), !hasMore && data.count > pageSize && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+      }), !hasMore && data.count > size && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
         color: "text.secondary",
         children: t("common.noMore", {
           resource: t("payment.customer.invoices")
@@ -155,5 +159,8 @@ function CustomerInvoiceList({
 }
 CustomerInvoiceList.defaultProps = {
   customer_id: "",
-  subscription_id: ""
+  subscription_id: "",
+  status: "open,paid,uncollectible",
+  pageSize: 10,
+  target: "self"
 };

package/lib/locales/en.js

@@ -155,7 +155,8 @@ module.exports = (0, _flat.default)({
     customer: {
       payments: "Payment History",
       invoices: "Invoice History",
-      details: "Billing Details",
+      details: "Details",
+      summary: "Summary",
       update: "Update Information",
       empty: "Seems you do not have any subscriptions or payments here",
       cancel: {
@@ -175,7 +176,14 @@ module.exports = (0, _flat.default)({
         }
       },
       pastDue: {
-        button: "Pay"
+        button: "Pay",
+        invoices: "Past Due Invoices",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
+        alert: {
+          title: "You have unpaid invoices",
+          description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",
+          confirm: "Pay Now"
+        }
       },
       recover: {
         button: "Renew",

package/lib/locales/zh.js

@@ -155,7 +155,8 @@ module.exports = (0, _flat.default)({
     customer: {
       payments: "\u652F\u4ED8\u5386\u53F2",
       invoices: "\u53D1\u7968\u5386\u53F2",
-      details: "\u8BA1\u8D39\u8BE6\u60C5",
+      details: "\u8D26\u6237\u8BE6\u60C5",
+      summary: "\u8BA1\u8D39\u6458\u8981",
       update: "\u66F4\u65B0\u5BA2\u6237\u4FE1\u606F",
       empty: "\u770B\u8D77\u6765\u60A8\u5728\u8FD9\u91CC\u6CA1\u6709\u4EFB\u4F55\u8BA2\u9605\u6216\u652F\u4ED8",
       cancel: {
@@ -175,7 +176,14 @@ module.exports = (0, _flat.default)({
         }
       },
       pastDue: {
-        button: "\u7EED\u8D39"
+        button: "\u7EED\u8D39",
+        invoices: "\u6B20\u8D39\u5E10\u5355",
+        warning: "\u8BF7\u5C3D\u5FEB\u652F\u4ED8\u6B20\u8D39\u8D26\u5355\uFF0C\u5426\u5219\u4F60\u5C06\u65E0\u6CD5\u7EE7\u7EED\u4F7F\u7528\u670D\u52A1\u6216\u8D2D\u4E70\u65B0\u670D\u52A1",
+        alert: {
+          title: "\u4F60\u6709\u6B20\u8D39\u8D26\u5355",
+          description: "\u770B\u8D77\u6765\u4F60\u6709\u6B20\u8D39\u7684\u8D26\u5355\uFF0C\u5728\u4F60\u652F\u4ED8\u6240\u6709\u6B20\u8D39\u8D26\u5355\u4E4B\u524D\uFF0C\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\uFF0C\u8BF7\u4E0D\u8981\u8C03\u76AE\u3002",
+          confirm: "\u53BB\u652F\u4ED8"
+        }
       },
       recover: {
         button: "\u7EED\u8BA2",

package/lib/payment/form/index.js

@@ -20,6 +20,7 @@ var _ufo = require("ufo");
 var _useBus = require("use-bus");
 var _isEmail = _interopRequireDefault(require("validator/es/lib/isEmail"));
 var _api = _interopRequireDefault(require("../../api"));
+var _confirm = _interopRequireDefault(require("../../components/confirm"));
 var _input = _interopRequireDefault(require("../../components/input"));
 var _payment = require("../../contexts/payment");
 var _util = require("../../util");
@@ -90,6 +91,7 @@ function PaymentForm({
     paymentIntent,
     stripeContext: void 0,
     customer,
+    customerLimited: false,
     stripePaying: false
   });
   const currencies = flatPaymentMethods(paymentMethods);
@@ -243,10 +245,19 @@ function PaymentForm({
         }
       }
     } catch (err) {
+      let shouldToast = true;
       if (err.response?.data?.code) {
         (0, _useBus.dispatch)(`error.${err.response?.data?.code}`);
+        if (err.response.data.code === "CUSTOMER_LIMITED") {
+          shouldToast = false;
+          setState({
+            customerLimited: true
+          });
+        }
+      }
+      if (shouldToast) {
+        _Toast.default.error((0, _util.formatError)(err));
       }
-      _Toast.default.error((0, _util.formatError)(err));
     } finally {
       setState({
         submitting: false
@@ -450,6 +461,14 @@ function PaymentForm({
           })
         })]
       })
+    }), state.customerLimited && /* @__PURE__ */(0, _jsxRuntime.jsx)(_confirm.default, {
+      onConfirm: () => window.open((0, _ufo.joinURL)(window.location.origin, (0, _util.getPrefix)(), "/customer/invoice/past-due"), "_blank"),
+      onCancel: () => setState({
+        customerLimited: false
+      }),
+      confirm: t("payment.customer.pastDue.alert.confirm"),
+      title: t("payment.customer.pastDue.alert.title"),
+      message: t("payment.customer.pastDue.alert.description")
     })]
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.13.150",
+  "version": "1.13.152",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -89,7 +89,7 @@
     "@babel/core": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
-    "@blocklet/payment-types": "1.13.150",
+    "@blocklet/payment-types": "1.13.152",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
     "@storybook/addon-links": "^7.6.13",
@@ -118,5 +118,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.19.0"
   },
-  "gitHead": "b65548baa2ab6bd40aec35b2a6594bfe6dbb7ee9"
+  "gitHead": "5d6d2b6a8c0422e1055ddcec4e3179fd734cdbc5"
 }

package/src/checkout/form.tsx

@@ -2,11 +2,13 @@
 import { TCheckoutSessionExpanded, TPaymentMethodExpanded } from '@blocklet/payment-types';
 import { useRequest, useSetState } from 'ahooks';
 import noop from 'lodash/noop';
+import { useEffect } from 'react';
+import { joinURL } from 'ufo';
 
 import api from '../api';
 import Payment from '../payment';
 import { CheckoutContext, CheckoutProps } from '../types';
-import { mergeExtraParams } from '../util';
+import { getPrefix, mergeExtraParams } from '../util';
 
 const startFromPaymentLink = async (id: string, params?: Record<string, any>): Promise<CheckoutContext> => {
   const { data } = await api.post(`/api/checkout-sessions/start/${id}?${mergeExtraParams(params)}`);
@@ -32,6 +34,12 @@ export default function CheckoutForm({ id, onPaid, onError, mode, goBack, extraP
     type === 'paymentLink' ? startFromPaymentLink(id, extraParams) : fetchCheckoutSession(id)
   );
 
+  useEffect(() => {
+    if (type === 'paymentLink' && mode === 'standalone' && data) {
+      window.history.replaceState(null, '', joinURL(getPrefix(), `/checkout/pay/${data.checkoutSession.id}`));
+    }
+  }, [type, mode, data]);
+
   const handlePaid = () => {
     setState({ completed: true });
     onPaid?.(data as CheckoutContext);

package/src/components/confirm.tsx

@@ -8,12 +8,16 @@ export default function ConfirmDialog({
   onCancel,
   title,
   message,
+  confirm,
+  cancel,
   loading,
 }: {
   onConfirm: EventHandler<any>;
   onCancel: EventHandler<any>;
   title: string | React.ReactNode;
   message: string | React.ReactNode;
+  confirm?: string | React.ReactNode;
+  cancel?: string | React.ReactNode;
   loading?: boolean;
 }) {
   const { t } = useLocaleContext();
@@ -25,10 +29,10 @@ export default function ConfirmDialog({
       onConfirm={onConfirm}
       onCancel={onCancel}
       confirmButton={{
-        text: t('common.confirm'),
+        text: confirm || t('common.confirm'),
         props: { color: 'error', size: 'small', variant: 'contained', disabled: !!loading },
       }}
-      cancelButton={{ text: t('common.cancel'), props: { color: 'inherit', size: 'small' } }}>
+      cancelButton={{ text: cancel || t('common.cancel'), props: { color: 'inherit', size: 'small' } }}>
       <Typography>{message}</Typography>
     </Confirm>
   );
@@ -36,4 +40,6 @@ export default function ConfirmDialog({
 
 ConfirmDialog.defaultProps = {
   loading: false,
+  confirm: '',
+  cancel: '',
 };

package/src/history/invoice/list.tsx

@@ -35,17 +35,19 @@ const fetchData = (params: Record<string, any> = {}): Promise<Paginated<TInvoice
 type Props = {
   customer_id?: string;
   subscription_id?: string;
+  status?: string;
+  pageSize?: number;
+  target?: string;
 };
 
-const pageSize = 10;
-
-export default function CustomerInvoiceList({ customer_id, subscription_id }: Props) {
+export default function CustomerInvoiceList({ customer_id, subscription_id, status, pageSize, target }: Props) {
   const { t } = useLocaleContext();
+  const size = pageSize || 10;
 
   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, subscription_id });
+      const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
+      return fetchData({ page, pageSize: size, status, customer_id, subscription_id });
     },
     {
       reloadDeps: [customer_id],
@@ -84,7 +86,9 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }: Pr
               }}
               flexWrap="nowrap">
               <Box flex={3}>
-                <a href={joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`)}>
+                <a
+                  href={joinURL(window.location.origin, getPrefix(), `/customer/invoice/${invoice.id}`)}
+                  target={target}>
                   <Typography component="span">{invoice.number}</Typography>
                 </a>
               </Box>
@@ -115,7 +119,7 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }: Pr
               : t('common.loadMore', { resource: t('payment.customer.invoices') })}
           </Button>
         )}
-        {!hasMore && data.count > pageSize && (
+        {!hasMore && data.count > size && (
           <Typography color="text.secondary">
             {t('common.noMore', { resource: t('payment.customer.invoices') })}
           </Typography>
@@ -128,4 +132,7 @@ export default function CustomerInvoiceList({ customer_id, subscription_id }: Pr
 CustomerInvoiceList.defaultProps = {
   customer_id: '',
   subscription_id: '',
+  status: 'open,paid,uncollectible',
+  pageSize: 10,
+  target: 'self',
 };

package/src/locales/en.tsx

@@ -152,7 +152,8 @@ export default flat({
     customer: {
       payments: 'Payment History',
       invoices: 'Invoice History',
-      details: 'Billing Details',
+      details: 'Details',
+      summary: 'Summary',
       update: 'Update Information',
       empty: 'Seems you do not have any subscriptions or payments here',
       cancel: {
@@ -174,6 +175,14 @@ export default flat({
       },
       pastDue: {
         button: 'Pay',
+        invoices: 'Past Due Invoices',
+        warning: 'Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.',
+        alert: {
+          title: 'You have unpaid invoices',
+          description:
+            'Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.',
+          confirm: 'Pay Now',
+        },
       },
       recover: {
         button: 'Renew',

package/src/locales/zh.tsx

@@ -149,7 +149,8 @@ export default flat({
     customer: {
       payments: '支付历史',
       invoices: '发票历史',
-      details: '计费详情',
+      details: '账户详情',
+      summary: '计费摘要',
       update: '更新客户信息',
       empty: '看起来您在这里没有任何订阅或支付',
       cancel: {
@@ -170,6 +171,13 @@ export default flat({
       },
       pastDue: {
         button: '续费',
+        invoices: '欠费帐单',
+        warning: '请尽快支付欠费账单，否则你将无法继续使用服务或购买新服务',
+        alert: {
+          title: '你有欠费账单',
+          description: '看起来你有欠费的账单，在你支付所有欠费账单之前，新的购买或者订阅将被禁止，请不要调皮。',
+          confirm: '去支付',
+        },
       },
       recover: {
         button: '续订',

package/src/payment/form/index.tsx

@@ -16,6 +16,7 @@ import { dispatch } from 'use-bus';
 import isEmail from 'validator/es/lib/isEmail';
 
 import api from '../../api';
+import ConfirmDialog from '../../components/confirm';
 import FormInput from '../../components/input';
 import { usePaymentContext } from '../../contexts/payment';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
@@ -104,6 +105,7 @@ export default function PaymentForm({
       status: string;
     };
     customer?: TCustomer;
+    customerLimited?: boolean;
     stripePaying: boolean;
   }>({
     submitting: false,
@@ -112,6 +114,7 @@ export default function PaymentForm({
     paymentIntent,
     stripeContext: undefined,
     customer,
+    customerLimited: false,
     stripePaying: false,
   });
 
@@ -254,10 +257,17 @@ export default function PaymentForm({
         }
       }
     } catch (err: any) {
+      let shouldToast = true;
       if (err.response?.data?.code) {
         dispatch(`error.${err.response?.data?.code}`);
+        if (err.response.data.code === 'CUSTOMER_LIMITED') {
+          shouldToast = false;
+          setState({ customerLimited: true });
+        }
+      }
+      if (shouldToast) {
+        Toast.error(formatError(err));
       }
-      Toast.error(formatError(err));
     } finally {
       setState({ submitting: false });
     }
@@ -415,6 +425,17 @@ export default function PaymentForm({
           )}
         </Stack>
       </Fade>
+      {state.customerLimited && (
+        <ConfirmDialog
+          onConfirm={() =>
+            window.open(joinURL(window.location.origin, getPrefix(), '/customer/invoice/past-due'), '_blank')
+          }
+          onCancel={() => setState({ customerLimited: false })}
+          confirm={t('payment.customer.pastDue.alert.confirm')}
+          title={t('payment.customer.pastDue.alert.title')}
+          message={t('payment.customer.pastDue.alert.description')}
+        />
+      )}
     </>
   );
 }