@blocklet/payment-react 1.16.3 → 1.16.4

package/README.md

@@ -394,6 +394,40 @@ We recommend using `showCheckoutSummary={false}` instead of `mode=inline-minimal
 />
 ```
 
+### v1.16.4
+
+- Add `OverdueInvoicePayment` component
+  - display all overdue invoices of a subscription, and support batch payment
+  - props:
+    - `subscriptionId`: [required] the id of the subscription
+    - `onPaid`: [optional] a callback function that will be called when the payment is successful
+    - `mode`: [optional] the mode of the component, `default` or `custom`, default is `default`
+    - `dialogProps`: [optional] the props of the dialog, default is `{ open: true }`
+    - `children`: [optional] a function that will be called with the payment data, if `mode` is `custom`, otherwise, the default dialog will be displayed
+  - custom mode:
+    - the `children` will receive two parameters:
+      - `handlePay`: a function that starts the payment process
+      - `data`: the payment data
+        - `subscription`: the subscription data
+        - `summary`: the summary of the payment, the key is the `currencyId`, the value includes `amount`, `currency`, `method`
+        - `invoices`: the list of invoices
+        - `subscriptionUrl`: the url of the subscription
+```tsx
+<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => { console.log('paid') }} />
+
+// custom mode
+<OverdueInvoicePayment subscriptionId={data.id} onPaid={() => { console.log('paid') }} mode="custom">
+  {(handlePay, { subscription, summary, invoices, subscriptionUrl }) => (
+    <div>custom content</div>
+    <p>Subscription: {subscription.name}</p>
+    <p>Current currency Total: {summary[currencyId].amount}</p>
+    <p>Invoices: {invoices.length}</p>
+    <p>Subscription URL: {subscriptionUrl}</p>
+    <button onClick={() => handlePay(summary[currencyId])}>Pay</button>
+  )}
+</OverdueInvoicePayment>
+```
+
 ### Status & Utility Components
 ```tsx
 import { 

package/es/components/over-due-invoice-payment.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { Invoice, PaymentCurrency, PaymentMethod, Subscription } from '@blocklet/payment-types';
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+};
+type Props = {
+    subscriptionId: string;
+    mode?: 'default' | 'custom';
+    onPaid?: (subscriptionId: string, currencyId: string) => void;
+    dialogProps?: DialogProps;
+    children?: (handlePay: (item: SummaryItem) => void, data: {
+        subscription: Subscription;
+        summary: {
+            [key: string]: SummaryItem;
+        };
+        invoices: Invoice[];
+        subscriptionUrl: string;
+    }) => React.ReactNode;
+};
+type SummaryItem = {
+    amount: string;
+    currency: PaymentCurrency;
+    method: PaymentMethod;
+};
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare namespace OverdueInvoicePayment {
+    var defaultProps: {
+        mode: string;
+        onPaid: () => void;
+        dialogProps: {
+            open: boolean;
+        };
+        children: null;
+    };
+}
+export default OverdueInvoicePayment;

package/es/components/over-due-invoice-payment.js

@@ -0,0 +1,237 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Button, Typography, Stack, CircularProgress, Alert } from "@mui/material";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Toast from "@arcblock/ux/lib/Toast";
+import { joinURL } from "ufo";
+import { useRequest } from "ahooks";
+import { Dialog } from "@arcblock/ux";
+import { usePaymentContext } from "../contexts/payment.js";
+import { formatAmount, formatError, getPrefix } from "../libs/util.js";
+import { useSubscription } from "../hooks/subscription.js";
+const fetchOverdueInvoices = async (subscriptionId) => {
+  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.json();
+};
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = "default",
+  dialogProps = {},
+  children,
+  onPaid = () => {
+  }
+}) {
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [selectCurrencyId, setSelectCurrencyId] = useState("");
+  const [payLoading, setPayLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = useState({});
+  const {
+    data = {
+      subscription: {},
+      summary: {},
+      invoices: []
+    },
+    error,
+    loading,
+    runAsync: refresh
+  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
+  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = useMemo(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+  const subscription = useSubscription("events");
+  useEffect(() => {
+    if (subscription) {
+      subscription.on("invoice.paid", ({ response }) => {
+        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
+        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
+          Toast.success(t("payment.customer.invoice.paySuccess"));
+          setPayLoading(false);
+          setProcessedCurrencies({ ...processedCurrencies, [uniqueKey]: 1 });
+          refresh().then((res) => {
+            if (res.invoices?.length === 0) {
+              setDialogOpen(false);
+              onPaid(subscriptionId, response.currency_id);
+            }
+          });
+        }
+      });
+    }
+  }, [subscription]);
+  const handlePay = (item) => {
+    const { currency, method } = item;
+    if (method.type === "stripe") {
+      Toast.error(t("payment.subscription.overdue.notSupport"));
+      return;
+    }
+    if (payLoading) {
+      return;
+    }
+    setSelectCurrencyId(currency.id);
+    setPayLoading(true);
+    if (method.type === "arcblock" || method.type === "ethereum") {
+      connect.open({
+        containerEl: void 0,
+        saveConnect: false,
+        action: "collect-batch",
+        prefix: joinURL("/api/did"),
+        extraParams: { currencyId: currency.id, subscriptionId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: (err) => {
+          Toast.error(formatError(err));
+          setPayLoading(false);
+        }
+      });
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(CircularProgress, {});
+  }
+  const renderPayButton = (item, props) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === "stripe") {
+      return /* @__PURE__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => window.open(subscriptionUrl, "_blank"), ...props, children: t("payment.subscription.overdue.viewNow") });
+    }
+    return /* @__PURE__ */ jsxs(Button, { variant: "contained", color: "primary", onClick: () => handlePay(item), ...props, disabled: isPayLoading, children: [
+      isPayLoading && /* @__PURE__ */ jsx(CircularProgress, { size: 14, sx: { mr: 1, color: "text.lighter" } }),
+      t("payment.subscription.overdue.payNow")
+    ] });
+  };
+  if (mode === "custom" && children && typeof children === "function") {
+    return /* @__PURE__ */ jsx(Stack, { children: children(handlePay, {
+      subscription: data?.subscription,
+      subscriptionUrl,
+      summary: data?.summary,
+      invoices: data?.invoices
+    }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: dialogOpen,
+      onClose: () => setDialogOpen(false),
+      title: dialogProps.title || t("payment.subscription.overdue.pastDue"),
+      PaperProps: {
+        style: { minHeight: "auto" }
+      },
+      children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
+        summaryList.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Alert, { severity: "success", children: t("payment.subscription.overdue.empty", {
+            // @ts-ignore
+            name: data?.subscription?.description
+          }) }),
+          /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-end", mt: 2, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              color: "primary",
+              onClick: () => setDialogOpen(false),
+              sx: { width: "fit-content" },
+              children: t("common.know")
+            }
+          ) })
+        ] }),
+        summaryList.length === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", variant: "body1", children: [
+            t("payment.subscription.overdue.title", {
+              // @ts-ignore
+              name: data?.subscription?.description,
+              count: data?.invoices?.length,
+              total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+              symbol: summaryList[0]?.currency?.symbol
+            }),
+            /* @__PURE__ */ jsx("br", {}),
+            t("payment.subscription.overdue.description"),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: subscriptionUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                children: t("payment.subscription.overdue.view")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", gap: 2, mt: 2, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: () => setDialogOpen(false), children: t("common.cancel") }),
+            renderPayButton(summaryList[0])
+          ] })
+        ] }),
+        summaryList.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(Typography, { color: "text.secondary", variant: "body1", children: [
+            t("payment.subscription.overdue.simpleTitle", {
+              // @ts-ignore
+              name: data?.subscription?.description,
+              count: data?.invoices?.length
+            }),
+            /* @__PURE__ */ jsx("br", {}),
+            t("payment.subscription.overdue.description"),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: subscriptionUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                children: t("payment.subscription.overdue.view")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { color: "text.secondary", variant: "body1", children: t("payment.subscription.overdue.list") }),
+          /* @__PURE__ */ jsx(Stack, { children: summaryList.map((item) => /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              sx: {
+                py: 1,
+                px: 0.5,
+                borderBottom: "1px solid var(--foregrounds-fg-border, #E0E0E0)",
+                "&:hover": {
+                  background: "var(--backgrounds-bg-highlight, #eff6ff)"
+                },
+                mt: 0
+              },
+              children: [
+                /* @__PURE__ */ jsx(Typography, { children: t("payment.subscription.overdue.total", {
+                  total: formatAmount(item?.amount, item?.currency?.decimal),
+                  currency: item?.currency?.symbol
+                }) }),
+                renderPayButton(item, {
+                  variant: "text",
+                  sx: {
+                    color: "text.link"
+                  }
+                })
+              ]
+            },
+            item?.currency?.id
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
+OverdueInvoicePayment.defaultProps = {
+  mode: "default",
+  onPaid: () => {
+  },
+  dialogProps: {
+    open: true
+  },
+  children: null
+};
+export default OverdueInvoicePayment;

package/es/index.d.ts

@@ -28,6 +28,7 @@ import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
+import OverdueInvoicePayment from './components/over-due-invoice-payment';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -38,4 +39,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, };

package/es/index.js

@@ -28,6 +28,7 @@ import CountrySelect from "./components/country-select.js";
 import TruncatedText from "./components/truncated-text.js";
 import Link from "./components/link.js";
 import { createLazyComponent } from "./components/lazy-loader.js";
+import OverdueInvoicePayment from "./components/over-due-invoice-payment.js";
 export { PaymentThemeProvider } from "./theme/index.js";
 export * from "./libs/util.js";
 export * from "./libs/connect.js";
@@ -68,5 +69,6 @@ export {
   CountrySelect,
   Table,
   TruncatedText,
-  Link
+  Link,
+  OverdueInvoicePayment
 };

package/es/locales/en.js

@@ -90,7 +90,8 @@ export default flat({
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
-    slashStakeAmount: "Slash Stake Amount"
+    slashStakeAmount: "Slash Stake Amount",
+    know: "I know"
   },
   payment: {
     checkout: {
@@ -316,6 +317,21 @@ export default flat({
         recharge: "Add funds",
         rechargeForSubscription: "Add funds for subscription"
       }
+    },
+    subscription: {
+      overdue: {
+        simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        payNow: "Pay Now",
+        notSupport: "This payment method is not supported",
+        total: "Total {total} {currency}",
+        view: "View Subscription Details",
+        viewNow: "View Now",
+        pastDue: "Past Due Invoices",
+        description: "If you have any questions, you can choose ",
+        list: "Past Due Invoices:",
+        empty: "There are no overdue invoices for your subscription {name}."
+      }
     }
   },
   refund: {

package/es/locales/zh.js

@@ -90,7 +90,8 @@ export default flat({
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
-    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D"
+    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
+    know: "\u6211\u77E5\u9053\u4E86"
   },
   payment: {
     checkout: {
@@ -316,6 +317,21 @@ export default flat({
         recharge: "\u5145\u503C",
         rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
       }
+    },
+    subscription: {
+      overdue: {
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        payNow: "\u7ACB\u5373\u652F\u4ED8",
+        notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
+        total: "\u603B\u8BA1 {total} {currency}",
+        view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
+        pastDue: "\u6B20\u8D39\u8D26\u5355",
+        viewNow: "\u7ACB\u5373\u67E5\u770B",
+        description: "\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u7591\u95EE\uFF0C\u53EF\u4EE5\u9009\u62E9 ",
+        list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355"
+      }
     }
   },
   refund: {

package/lib/components/over-due-invoice-payment.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { Invoice, PaymentCurrency, PaymentMethod, Subscription } from '@blocklet/payment-types';
+type DialogProps = {
+    open?: boolean;
+    onClose?: () => void;
+    title?: string;
+};
+type Props = {
+    subscriptionId: string;
+    mode?: 'default' | 'custom';
+    onPaid?: (subscriptionId: string, currencyId: string) => void;
+    dialogProps?: DialogProps;
+    children?: (handlePay: (item: SummaryItem) => void, data: {
+        subscription: Subscription;
+        summary: {
+            [key: string]: SummaryItem;
+        };
+        invoices: Invoice[];
+        subscriptionUrl: string;
+    }) => React.ReactNode;
+};
+type SummaryItem = {
+    amount: string;
+    currency: PaymentCurrency;
+    method: PaymentMethod;
+};
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare namespace OverdueInvoicePayment {
+    var defaultProps: {
+        mode: string;
+        onPaid: () => void;
+        dialogProps: {
+            open: boolean;
+        };
+        children: null;
+    };
+}
+export default OverdueInvoicePayment;

package/lib/components/over-due-invoice-payment.js

@@ -0,0 +1,284 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _ufo = require("ufo");
+var _ahooks = require("ahooks");
+var _ux = require("@arcblock/ux");
+var _payment = require("../contexts/payment");
+var _util = require("../libs/util");
+var _subscription = require("../hooks/subscription");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const fetchOverdueInvoices = async subscriptionId => {
+  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.json();
+};
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = "default",
+  dialogProps = {},
+  children,
+  onPaid = () => {}
+}) {
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    connect
+  } = (0, _payment.usePaymentContext)();
+  const [selectCurrencyId, setSelectCurrencyId] = (0, _react.useState)("");
+  const [payLoading, setPayLoading] = (0, _react.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, _react.useState)(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
+  const {
+    data = {
+      subscription: {},
+      summary: {},
+      invoices: []
+    },
+    error,
+    loading,
+    runAsync: refresh
+  } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices(subscriptionId));
+  const subscriptionUrl = (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = (0, _react.useMemo)(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+  const subscription = (0, _subscription.useSubscription)("events");
+  (0, _react.useEffect)(() => {
+    if (subscription) {
+      subscription.on("invoice.paid", ({
+        response
+      }) => {
+        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
+        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
+          _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+          setPayLoading(false);
+          setProcessedCurrencies({
+            ...processedCurrencies,
+            [uniqueKey]: 1
+          });
+          refresh().then(res => {
+            if (res.invoices?.length === 0) {
+              setDialogOpen(false);
+              onPaid(subscriptionId, response.currency_id);
+            }
+          });
+        }
+      });
+    }
+  }, [subscription]);
+  const handlePay = item => {
+    const {
+      currency,
+      method
+    } = item;
+    if (method.type === "stripe") {
+      _Toast.default.error(t("payment.subscription.overdue.notSupport"));
+      return;
+    }
+    if (payLoading) {
+      return;
+    }
+    setSelectCurrencyId(currency.id);
+    setPayLoading(true);
+    if (method.type === "arcblock" || method.type === "ethereum") {
+      connect.open({
+        containerEl: void 0,
+        saveConnect: false,
+        action: "collect-batch",
+        prefix: (0, _ufo.joinURL)("/api/did"),
+        extraParams: {
+          currencyId: currency.id,
+          subscriptionId
+        },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: err => {
+          _Toast.default.error((0, _util.formatError)(err));
+          setPayLoading(false);
+        }
+      });
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+  }
+  const renderPayButton = (item, props) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === "stripe") {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        color: "primary",
+        onClick: () => window.open(subscriptionUrl, "_blank"),
+        ...props,
+        children: t("payment.subscription.overdue.viewNow")
+      });
+    }
+    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+      variant: "contained",
+      color: "primary",
+      onClick: () => handlePay(item),
+      ...props,
+      disabled: isPayLoading,
+      children: [isPayLoading && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+        size: 14,
+        sx: {
+          mr: 1,
+          color: "text.lighter"
+        }
+      }), t("payment.subscription.overdue.payNow")]
+    });
+  };
+  if (mode === "custom" && children && typeof children === "function") {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+      children: children(handlePay, {
+        subscription: data?.subscription,
+        subscriptionUrl,
+        summary: data?.summary,
+        invoices: data?.invoices
+      })
+    });
+  }
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+    open: dialogOpen,
+    onClose: () => setDialogOpen(false),
+    title: dialogProps.title || t("payment.subscription.overdue.pastDue"),
+    PaperProps: {
+      style: {
+        minHeight: "auto"
+      }
+    },
+    children: error ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+      severity: "error",
+      children: error.message
+    }) : /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+      gap: 1,
+      children: [summaryList.length === 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
+          severity: "success",
+          children: t("payment.subscription.overdue.empty", {
+            // @ts-ignore
+            name: data?.subscription?.description
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          direction: "row",
+          justifyContent: "flex-end",
+          mt: 2,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            onClick: () => setDialogOpen(false),
+            sx: {
+              width: "fit-content"
+            },
+            children: t("common.know")
+          })
+        })]
+      }), summaryList.length === 1 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: [t("payment.subscription.overdue.title", {
+            // @ts-ignore
+            name: data?.subscription?.description,
+            count: data?.invoices?.length,
+            total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+            symbol: summaryList[0]?.currency?.symbol
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: subscriptionUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+              color: "var(--foregrounds-fg-interactive, 0086FF)"
+            },
+            children: t("payment.subscription.overdue.view")
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          direction: "row",
+          justifyContent: "flex-end",
+          gap: 2,
+          mt: 2,
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            variant: "outlined",
+            color: "primary",
+            onClick: () => setDialogOpen(false),
+            children: t("common.cancel")
+          }), renderPayButton(summaryList[0])]
+        })]
+      }), summaryList.length > 1 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: [t("payment.subscription.overdue.simpleTitle", {
+            // @ts-ignore
+            name: data?.subscription?.description,
+            count: data?.invoices?.length
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+            href: subscriptionUrl,
+            target: "_blank",
+            rel: "noreferrer",
+            style: {
+              color: "var(--foregrounds-fg-interactive, 0086FF)"
+            },
+            children: t("payment.subscription.overdue.view")
+          })]
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          color: "text.secondary",
+          variant: "body1",
+          children: t("payment.subscription.overdue.list")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+          children: summaryList.map(item => /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            sx: {
+              py: 1,
+              px: 0.5,
+              borderBottom: "1px solid var(--foregrounds-fg-border, #E0E0E0)",
+              "&:hover": {
+                background: "var(--backgrounds-bg-highlight, #eff6ff)"
+              },
+              mt: 0
+            },
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              children: t("payment.subscription.overdue.total", {
+                total: (0, _util.formatAmount)(item?.amount, item?.currency?.decimal),
+                currency: item?.currency?.symbol
+              })
+            }), renderPayButton(item, {
+              variant: "text",
+              sx: {
+                color: "text.link"
+              }
+            })]
+          }, item?.currency?.id))
+        })]
+      })]
+    })
+  });
+}
+OverdueInvoicePayment.defaultProps = {
+  mode: "default",
+  onPaid: () => {},
+  dialogProps: {
+    open: true
+  },
+  children: null
+};
+module.exports = OverdueInvoicePayment;

package/lib/index.d.ts

@@ -28,6 +28,7 @@ import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
+import OverdueInvoicePayment from './components/over-due-invoice-payment';
 export { PaymentThemeProvider } from './theme';
 export * from './libs/util';
 export * from './libs/connect';
@@ -38,4 +39,4 @@ export * from './hooks/mobile';
 export * from './hooks/table';
 export * from './hooks/scroll';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, };
+export { createLazyComponent, api, dayjs, FormInput, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, };

package/lib/index.js

@@ -34,6 +34,7 @@ var _exportNames = {
   TruncatedText: true,
   Link: true,
   createLazyComponent: true,
+  OverdueInvoicePayment: true,
   PaymentThemeProvider: true,
   translations: true,
   createTranslator: true
@@ -116,6 +117,12 @@ Object.defineProperty(exports, "Livemode", {
     return _livemode.default;
   }
 });
+Object.defineProperty(exports, "OverdueInvoicePayment", {
+  enumerable: true,
+  get: function () {
+    return _overDueInvoicePayment.default;
+  }
+});
 Object.defineProperty(exports, "Payment", {
   enumerable: true,
   get: function () {
@@ -266,6 +273,7 @@ var _countrySelect = _interopRequireDefault(require("./components/country-select
 var _truncatedText = _interopRequireDefault(require("./components/truncated-text"));
 var _link = _interopRequireDefault(require("./components/link"));
 var _lazyLoader = require("./components/lazy-loader");
+var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
 var _theme = require("./theme");
 var _util = require("./libs/util");
 Object.keys(_util).forEach(function (key) {

package/lib/locales/en.js

@@ -97,7 +97,8 @@ module.exports = (0, _flat.default)({
     amountPrecisionLimit: "Amount decimal places must be less than or equal to {precision}",
     saveAsDefaultPriceSuccess: "Set default price successfully",
     stakeAmount: "Stake Amount",
-    slashStakeAmount: "Slash Stake Amount"
+    slashStakeAmount: "Slash Stake Amount",
+    know: "I know"
   },
   payment: {
     checkout: {
@@ -323,6 +324,21 @@ module.exports = (0, _flat.default)({
         recharge: "Add funds",
         rechargeForSubscription: "Add funds for subscription"
       }
+    },
+    subscription: {
+      overdue: {
+        simpleTitle: "There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.",
+        title: "There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.",
+        payNow: "Pay Now",
+        notSupport: "This payment method is not supported",
+        total: "Total {total} {currency}",
+        view: "View Subscription Details",
+        viewNow: "View Now",
+        pastDue: "Past Due Invoices",
+        description: "If you have any questions, you can choose ",
+        list: "Past Due Invoices:",
+        empty: "There are no overdue invoices for your subscription {name}."
+      }
     }
   },
   refund: {

package/lib/locales/zh.js

@@ -97,7 +97,8 @@ module.exports = (0, _flat.default)({
     amountPrecisionLimit: "\u91D1\u989D\u5C0F\u6570\u4F4D\u6570\u5FC5\u987B\u5728 {precision} \u4F4D\u4EE5\u5185",
     saveAsDefaultPriceSuccess: "\u8BBE\u7F6E\u9ED8\u8BA4\u4EF7\u683C\u6210\u529F",
     stakeAmount: "\u8D28\u62BC\u91D1\u989D",
-    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D"
+    slashStakeAmount: "\u7F5A\u6CA1\u91D1\u989D",
+    know: "\u6211\u77E5\u9053\u4E86"
   },
   payment: {
     checkout: {
@@ -323,6 +324,21 @@ module.exports = (0, _flat.default)({
         recharge: "\u5145\u503C",
         rechargeForSubscription: "\u8BA2\u9605\u5145\u503C"
       }
+    },
+    subscription: {
+      overdue: {
+        title: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u603B\u8BA1 {total} {symbol}\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        simpleTitle: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5171\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u60A8\u9700\u8981\u652F\u4ED8\u8FD9\u4E9B\u8D26\u5355\u4EE5\u6FC0\u6D3B\u60A8\u7684\u8BA2\u9605\uFF0C\u6216\u5728\u8FDB\u884C\u65B0\u7684\u8D2D\u4E70\u4E4B\u524D\u5B8C\u6210\u652F\u4ED8\u3002",
+        payNow: "\u7ACB\u5373\u652F\u4ED8",
+        notSupport: "\u6682\u4E0D\u652F\u6301\u8BE5\u652F\u4ED8\u65B9\u5F0F",
+        total: "\u603B\u8BA1 {total} {currency}",
+        view: "\u67E5\u770B\u8BA2\u9605\u8BE6\u60C5",
+        pastDue: "\u6B20\u8D39\u8D26\u5355",
+        viewNow: "\u7ACB\u5373\u67E5\u770B",
+        description: "\u5982\u679C\u60A8\u6709\u4EFB\u4F55\u7591\u95EE\uFF0C\u53EF\u4EE5\u9009\u62E9 ",
+        list: "\u6B20\u8D39\u8D26\u5355\uFF1A",
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355"
+      }
     }
   },
   refund: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.16.3",
+  "version": "1.16.4",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.16.3",
+    "@blocklet/payment-types": "1.16.4",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -122,5 +122,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "6accc56a51e4ea0906e65f69dc5f41eaa82685fb"
+  "gitHead": "d2c53c8bec3a4a34d0ef3a011ec215b69bc9a5ab"
 }

package/src/components/over-due-invoice-payment.tsx

@@ -0,0 +1,305 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Typography, Stack, CircularProgress, Alert } from '@mui/material';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Toast from '@arcblock/ux/lib/Toast';
+import { joinURL } from 'ufo';
+import type { Invoice, PaymentCurrency, PaymentMethod, Subscription, TInvoiceExpanded } from '@blocklet/payment-types';
+import { useRequest } from 'ahooks';
+import { Dialog } from '@arcblock/ux';
+import { usePaymentContext } from '../contexts/payment';
+import { formatAmount, formatError, getPrefix } from '../libs/util';
+import { useSubscription } from '../hooks/subscription';
+
+type DialogProps = {
+  open?: boolean;
+  onClose?: () => void;
+  title?: string;
+};
+
+type Props = {
+  subscriptionId: string;
+  mode?: 'default' | 'custom';
+  onPaid?: (subscriptionId: string, currencyId: string) => void;
+  dialogProps?: DialogProps;
+  children?: (
+    handlePay: (item: SummaryItem) => void,
+    data: {
+      subscription: Subscription;
+      summary: { [key: string]: SummaryItem };
+      invoices: Invoice[];
+      subscriptionUrl: string;
+    }
+  ) => React.ReactNode;
+};
+
+type SummaryItem = {
+  amount: string;
+  currency: PaymentCurrency;
+  method: PaymentMethod;
+};
+
+const fetchOverdueInvoices = async (
+  subscriptionId: string
+): Promise<{
+  subscription: Subscription;
+  summary: { [key: string]: SummaryItem };
+  invoices: Invoice[];
+}> => {
+  const res = await fetch(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+  return res.json();
+};
+
+function OverdueInvoicePayment({
+  subscriptionId,
+  mode = 'default',
+  dialogProps = {},
+  children,
+  onPaid = () => {},
+}: Props) {
+  const { t } = useLocaleContext();
+  const { connect } = usePaymentContext();
+  const [selectCurrencyId, setSelectCurrencyId] = useState('');
+  const [payLoading, setPayLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
+  const [processedCurrencies, setProcessedCurrencies] = useState<{ [key: string]: number }>({});
+  const {
+    data = {
+      subscription: {} as Subscription,
+      summary: {},
+      invoices: [],
+    },
+    error,
+    loading,
+    runAsync: refresh,
+  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
+
+  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+  const summaryList = useMemo(() => {
+    if (!data?.summary) {
+      return [];
+    }
+    return Object.values(data.summary);
+  }, [data?.summary]);
+
+  const subscription = useSubscription('events');
+  useEffect(() => {
+    if (subscription) {
+      subscription.on('invoice.paid', ({ response }: { response: TInvoiceExpanded }) => {
+        const uniqueKey = `${response.subscription_id}-${response.currency_id}`;
+        if (response.subscription_id === subscriptionId && !processedCurrencies[uniqueKey]) {
+          Toast.success(t('payment.customer.invoice.paySuccess'));
+          setPayLoading(false);
+          setProcessedCurrencies({ ...processedCurrencies, [uniqueKey]: 1 });
+          refresh().then((res) => {
+            if (res.invoices?.length === 0) {
+              setDialogOpen(false);
+              onPaid(subscriptionId, response.currency_id);
+            }
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscription]);
+
+  const handlePay = (item: SummaryItem) => {
+    const { currency, method } = item;
+    if (method.type === 'stripe') {
+      Toast.error(t('payment.subscription.overdue.notSupport'));
+      return;
+    }
+    if (payLoading) {
+      return;
+    }
+    setSelectCurrencyId(currency.id);
+    setPayLoading(true);
+    if (method.type === 'arcblock' || method.type === 'ethereum') {
+      connect.open({
+        containerEl: undefined as unknown as Element,
+        saveConnect: false,
+        action: 'collect-batch',
+        prefix: joinURL('/api/did'),
+        extraParams: { currencyId: currency.id, subscriptionId },
+        onSuccess: () => {
+          connect.close();
+        },
+        onClose: () => {
+          connect.close();
+          setPayLoading(false);
+        },
+        onError: (err: any) => {
+          Toast.error(formatError(err));
+          setPayLoading(false);
+        },
+      });
+    }
+  };
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  const renderPayButton = (item: SummaryItem, props: any) => {
+    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+    if (item.method.type === 'stripe') {
+      return (
+        <Button variant="contained" color="primary" onClick={() => window.open(subscriptionUrl, '_blank')} {...props}>
+          {t('payment.subscription.overdue.viewNow')}
+        </Button>
+      );
+    }
+    return (
+      <Button variant="contained" color="primary" onClick={() => handlePay(item)} {...props} disabled={isPayLoading}>
+        {isPayLoading && <CircularProgress size={14} sx={{ mr: 1, color: 'text.lighter' }} />}
+        {t('payment.subscription.overdue.payNow')}
+      </Button>
+    );
+  };
+
+  if (mode === 'custom' && children && typeof children === 'function') {
+    return (
+      <Stack>
+        {children(handlePay, {
+          subscription: data?.subscription as Subscription,
+          subscriptionUrl,
+          summary: data?.summary as { [key: string]: SummaryItem },
+          invoices: data?.invoices as Invoice[],
+        })}
+      </Stack>
+    );
+  }
+
+  // Default mode
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={() => setDialogOpen(false)}
+      title={dialogProps.title || t('payment.subscription.overdue.pastDue')}
+      PaperProps={{
+        style: { minHeight: 'auto' },
+      }}>
+      {error ? (
+        <Alert severity="error">{error.message}</Alert>
+      ) : (
+        <Stack gap={1}>
+          {summaryList.length === 0 && (
+            <>
+              <Alert severity="success">
+                {t('payment.subscription.overdue.empty', {
+                  // @ts-ignore
+                  name: data?.subscription?.description,
+                })}
+              </Alert>
+              <Stack direction="row" justifyContent="flex-end" mt={2}>
+                <Button
+                  variant="outlined"
+                  color="primary"
+                  onClick={() => setDialogOpen(false)}
+                  sx={{ width: 'fit-content' }}>
+                  {/* @ts-ignore */}
+                  {t('common.know')}
+                </Button>
+              </Stack>
+            </>
+          )}
+          {summaryList.length === 1 && (
+            <>
+              <Typography color="text.secondary" variant="body1">
+                {t('payment.subscription.overdue.title', {
+                  // @ts-ignore
+                  name: data?.subscription?.description,
+                  count: data?.invoices?.length,
+                  total: formatAmount(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+                  symbol: summaryList[0]?.currency?.symbol,
+                })}
+                <br />
+                {t('payment.subscription.overdue.description')}
+                <a
+                  href={subscriptionUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                  {t('payment.subscription.overdue.view')}
+                </a>
+              </Typography>
+              <Stack direction="row" justifyContent="flex-end" gap={2} mt={2}>
+                <Button variant="outlined" color="primary" onClick={() => setDialogOpen(false)}>
+                  {/* @ts-ignore */}
+                  {t('common.cancel')}
+                </Button>
+                {/* @ts-ignore */}
+                {renderPayButton(summaryList[0])}
+              </Stack>
+            </>
+          )}
+          {summaryList.length > 1 && (
+            <>
+              <Typography color="text.secondary" variant="body1">
+                {/* @ts-ignore */}
+                {t('payment.subscription.overdue.simpleTitle', {
+                  // @ts-ignore
+                  name: data?.subscription?.description,
+                  count: data?.invoices?.length,
+                })}
+                <br />
+                {t('payment.subscription.overdue.description')}
+                <a
+                  href={subscriptionUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ color: 'var(--foregrounds-fg-interactive, 0086FF)' }}>
+                  {t('payment.subscription.overdue.view')}
+                </a>
+              </Typography>
+              <Typography color="text.secondary" variant="body1">
+                {t('payment.subscription.overdue.list')}
+              </Typography>
+              <Stack>
+                {summaryList.map((item: any) => (
+                  <Stack
+                    key={item?.currency?.id}
+                    direction="row"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    sx={{
+                      py: 1,
+                      px: 0.5,
+                      borderBottom: '1px solid var(--foregrounds-fg-border, #E0E0E0)',
+                      '&:hover': {
+                        background: 'var(--backgrounds-bg-highlight, #eff6ff)',
+                      },
+                      mt: 0,
+                    }}>
+                    <Typography>
+                      {t('payment.subscription.overdue.total', {
+                        total: formatAmount(item?.amount, item?.currency?.decimal),
+                        currency: item?.currency?.symbol,
+                      })}
+                    </Typography>
+                    {renderPayButton(item, {
+                      variant: 'text',
+                      sx: {
+                        color: 'text.link',
+                      },
+                    })}
+                  </Stack>
+                ))}
+              </Stack>
+            </>
+          )}
+        </Stack>
+      )}
+    </Dialog>
+  );
+}
+
+OverdueInvoicePayment.defaultProps = {
+  mode: 'default',
+  onPaid: () => {},
+  dialogProps: {
+    open: true,
+  },
+  children: null,
+};
+
+export default OverdueInvoicePayment;

package/src/index.ts

@@ -28,6 +28,7 @@ import CountrySelect from './components/country-select';
 import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
+import OverdueInvoicePayment from './components/over-due-invoice-payment';
 
 export { PaymentThemeProvider } from './theme';
 
@@ -73,4 +74,5 @@ export {
   Table,
   TruncatedText,
   Link,
+  OverdueInvoicePayment,
 };

package/src/locales/en.tsx

@@ -93,6 +93,7 @@ export default flat({
     saveAsDefaultPriceSuccess: 'Set default price successfully',
     stakeAmount: 'Stake Amount',
     slashStakeAmount: 'Slash Stake Amount',
+    know: 'I know',
   },
   payment: {
     checkout: {
@@ -330,6 +331,23 @@ export default flat({
         rechargeForSubscription: 'Add funds for subscription',
       },
     },
+    subscription: {
+      overdue: {
+        simpleTitle:
+          'There are {count} due invoices for your subscription {name}, you need to pay them to activate your subscription or before making new purchases.',
+        title:
+          'There are {count} due invoices for your subscription {name}, the total due amount is {total} {symbol}, you need to pay them to activate your subscription or before making new purchases.',
+        payNow: 'Pay Now',
+        notSupport: 'This payment method is not supported',
+        total: 'Total {total} {currency}',
+        view: 'View Subscription Details',
+        viewNow: 'View Now',
+        pastDue: 'Past Due Invoices',
+        description: 'If you have any questions, you can choose ',
+        list: 'Past Due Invoices:',
+        empty: 'There are no overdue invoices for your subscription {name}.',
+      },
+    },
   },
   refund: {
     type: {

package/src/locales/zh.tsx

@@ -93,6 +93,7 @@ export default flat({
     saveAsDefaultPriceSuccess: '设置默认价格成功',
     stakeAmount: '质押金额',
     slashStakeAmount: '罚没金额',
+    know: '我知道了',
   },
   payment: {
     checkout: {
@@ -320,6 +321,23 @@ export default flat({
         rechargeForSubscription: '订阅充值',
       },
     },
+    subscription: {
+      overdue: {
+        title:
+          '您的【{name}】订阅共有 {count} 张欠费账单，总计 {total} {symbol}，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+        simpleTitle:
+          '您的【{name}】订阅共有 {count} 张欠费账单，您需要支付这些账单以激活您的订阅，或在进行新的购买之前完成支付。',
+        payNow: '立即支付',
+        notSupport: '暂不支持该支付方式',
+        total: '总计 {total} {currency}',
+        view: '查看订阅详情',
+        pastDue: '欠费账单',
+        viewNow: '立即查看',
+        description: '如果您有任何疑问，可以选择 ',
+        list: '欠费账单：',
+        empty: '您的【{name}】订阅当前没有欠费账单',
+      },
+    },
   },
   refund: {
     type: {