@blocklet/payment-react 1.18.15 → 1.18.16

package/es/locales/zh.js

@@ -237,12 +237,13 @@ export default flat({
       pastDue: {
         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\uFF0C\u8BF7\u9010\u4E2A\u6253\u5F00\u8D26\u5355\u8BE6\u60C5\u5E76\u5B8C\u6210\u652F\u4ED8",
+        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\u3002",
         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"
-        }
+        },
+        view: "\u67E5\u770B\u6B20\u8D39\u660E\u7EC6"
       },
       recover: {
         button: "\u6062\u590D\u8BA2\u9605",
@@ -291,7 +292,8 @@ export default flat({
         empty: "\u6CA1\u6709\u4EFB\u4F55\u8D26\u5355",
         next: "\u8FD8\u6CA1\u6709\u8D26\u5355\uFF0C\u4E0B\u6B21\u8D26\u5355\u5C06\u5728 {date} \u751F\u6210",
         invoiceNumber: "\u8D26\u5355\u7F16\u53F7",
-        emptyList: "\u6CA1\u6709\u8D26\u5355"
+        emptyList: "\u6CA1\u6709\u8D26\u5355",
+        noPaymentRequired: "\u65E0\u9700\u652F\u4ED8"
       },
       payment: {
         empty: "\u6CA1\u6709\u652F\u4ED8\u8BB0\u5F55",
@@ -312,6 +314,11 @@ export default flat({
         changePayment: "\u5207\u6362\u652F\u4ED8\u65B9\u5F0F",
         trialLeft: "\u5269\u4F59\u8BD5\u7528\u65F6\u957F",
         owner: "\u8BA2\u9605\u62E5\u6709\u8005"
+      },
+      overdue: {
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}\u3002\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002",
+        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002"
       }
     },
     invoice: {
@@ -351,7 +358,9 @@ export default flat({
         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"
+        empty: "\u60A8\u7684\u3010{name}\u3011\u8BA2\u9605\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355",
+        retry: "\u91CD\u65B0\u652F\u4ED8",
+        paid: "\u5DF2\u652F\u4ED8"
       }
     }
   },

package/es/payment/form/address.js

@@ -11,74 +11,72 @@ export default function AddressForm({ mode, stripe, sx = {} }) {
   const { t } = useLocaleContext();
   const { control } = useFormContext();
   if (mode === "required") {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
-      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
-        /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.postal_code",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.postal_code"),
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
-                Controller,
-                {
-                  name: "billing_address.country",
-                  control,
-                  render: ({ field }) => /* @__PURE__ */ jsx(
-                    CountrySelect,
-                    {
-                      ...field,
-                      sx: {
-                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent"
-                        }
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsx(Stack, { className: "cko-payment-address cko-payment-form", sx, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.line1",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.line1")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.city",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.city")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.state",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.state")
+        }
+      ),
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.postal_code") }),
+      /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.postal_code",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.postal_code"),
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
+              Controller,
+              {
+                name: "billing_address.country",
+                control,
+                render: ({ field }) => /* @__PURE__ */ jsx(
+                  CountrySelect,
+                  {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
                       }
                     }
-                  )
-                }
-              ) })
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.state",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.state")
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.line1",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.line1")
-          }
-        ),
-        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.city",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.city")
+                  }
+                )
+              }
+            ) })
           }
-        )
-      ] })
-    ] }) });
+        }
+      )
+    ] }) }) });
   }
   if (stripe) {
     return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [

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

@@ -4,19 +4,27 @@ type DialogProps = {
     onClose?: () => void;
     title?: string;
 };
+type DetailLinkOptions = {
+    enabled?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    title?: string;
+};
 type Props = {
-    subscriptionId: string;
+    subscriptionId?: string;
+    customerId?: string;
     mode?: 'default' | 'custom';
-    onPaid?: (subscriptionId: string, currencyId: string) => void;
+    onPaid?: (id: string, currencyId: string, type: 'subscription' | 'customer') => void;
     dialogProps?: DialogProps;
-    inSubscriptionDetail?: boolean;
+    detailLinkOptions?: DetailLinkOptions;
+    successToast?: boolean;
     children?: (handlePay: (item: SummaryItem) => void, data: {
-        subscription: Subscription;
+        subscription?: Subscription;
         summary: {
             [key: string]: SummaryItem;
         };
         invoices: Invoice[];
-        subscriptionUrl: string;
+        subscriptionCount?: number;
+        detailUrl: string;
     }) => React.ReactNode;
 };
 type SummaryItem = {
@@ -24,7 +32,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, inSubscriptionDetail, }: Props): import("react").JSX.Element | null;
+declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -33,7 +41,12 @@ declare namespace OverdueInvoicePayment {
             open: boolean;
         };
         children: null;
-        inSubscriptionDetail: boolean;
+        detailLinkOptions: {
+            enabled: boolean;
+        };
+        subscriptionId: undefined;
+        customerId: undefined;
+        successToast: boolean;
     };
 }
 export default OverdueInvoicePayment;

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

@@ -12,22 +12,38 @@ var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _ufo = require("ufo");
 var _ahooks = require("ahooks");
 var _ux = require("@arcblock/ux");
+var _iconsMaterial = require("@mui/icons-material");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _payment = require("../contexts/payment");
 var _util = require("../libs/util");
 var _subscription = require("../hooks/subscription");
 var _api = _interopRequireDefault(require("../libs/api"));
+var _loadingButton = _interopRequireDefault(require("./loading-button"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const fetchOverdueInvoices = async subscriptionId => {
-  const res = await _api.default.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+const fetchOverdueInvoices = async params => {
+  if (!params.subscriptionId && !params.customerId) {
+    throw new Error("Either subscriptionId or customerId must be provided");
+  }
+  let url;
+  if (params.subscriptionId) {
+    url = `/api/subscriptions/${params.subscriptionId}/overdue/invoices`;
+  } else {
+    url = `/api/customers/${params.customerId}/overdue/invoices`;
+  }
+  const res = await _api.default.get(url);
   return res.data;
 };
 function OverdueInvoicePayment({
   subscriptionId,
+  customerId,
   mode = "default",
   dialogProps = {},
   children,
   onPaid = () => {},
-  inSubscriptionDetail = false
+  detailLinkOptions = {
+    enabled: true
+  },
+  successToast = true
 }) {
   const {
     t
@@ -39,47 +55,74 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = (0, _react.useState)(false);
   const [dialogOpen, setDialogOpen] = (0, _react.useState)(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
+  const [paymentStatus, setPaymentStatus] = (0, _react.useState)({});
+  const sourceType = subscriptionId ? "subscription" : "customer";
+  const sourceId = subscriptionId || customerId;
   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}`);
+  } = (0, _ahooks.useRequest)(() => fetchOverdueInvoices({
+    subscriptionId,
+    customerId
+  }), {
+    ready: !!subscriptionId || !!customerId
+  });
+  const detailUrl = (0, _react.useMemo)(() => {
+    if (subscriptionId) {
+      return (0, _ufo.joinURL)((0, _util.getPrefix)(), `/customer/subscription/${subscriptionId}`);
+    }
+    if (customerId) {
+      return (0, _ufo.joinURL)((0, _util.getPrefix)(), "/customer/invoice/past-due");
+    }
+    return "";
+  }, [subscriptionId, customerId]);
   const summaryList = (0, _react.useMemo)(() => {
     if (!data?.summary) {
       return [];
     }
     return Object.values(data.summary);
   }, [data?.summary]);
+  const debouncedHandleInvoicePaid = (0, _debounce.default)(async currencyId => {
+    if (successToast) {
+      _Toast.default.close();
+      _Toast.default.success(t("payment.customer.invoice.paySuccess"));
+    }
+    setPayLoading(false);
+    const res = await refresh();
+    if (res.invoices?.length === 0) {
+      setDialogOpen(false);
+      onPaid(sourceId, currencyId, sourceType);
+    }
+  }, 1e3, {
+    leading: false,
+    trailing: true,
+    maxWait: 5e3
+  });
   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);
-            }
-          });
+        const relevantId = subscriptionId || response.customer_id;
+        const uniqueKey = `${relevantId}-${response.currency_id}`;
+        if (subscriptionId && response.subscription_id === subscriptionId || customerId && response.customer_id === customerId) {
+          if (!processedCurrencies[uniqueKey]) {
+            setProcessedCurrencies(prev => ({
+              ...prev,
+              [uniqueKey]: 1
+            }));
+            debouncedHandleInvoicePaid(response.currency_id);
+          }
         }
       });
     }
-  }, [subscription]);
+  }, [subscription, subscriptionId, customerId]);
   const handlePay = item => {
     const {
       currency,
@@ -94,18 +137,32 @@ function OverdueInvoicePayment({
     }
     setSelectCurrencyId(currency.id);
     setPayLoading(true);
+    setPaymentStatus(prev => ({
+      ...prev,
+      [currency.id]: "idle"
+    }));
     if (["arcblock", "ethereum", "base"].includes(method.type)) {
+      const extraParams = {
+        currencyId: currency.id
+      };
+      if (subscriptionId) {
+        extraParams.subscriptionId = subscriptionId;
+      } else if (customerId) {
+        extraParams.customerId = customerId;
+      }
       connect.open({
         containerEl: void 0,
         saveConnect: false,
         action: "collect-batch",
         prefix: (0, _ufo.joinURL)((0, _util.getPrefix)(), "/api/did"),
-        extraParams: {
-          currencyId: currency.id,
-          subscriptionId
-        },
+        extraParams,
         onSuccess: () => {
           connect.close();
+          setPayLoading(false);
+          setPaymentStatus(prev => ({
+            ...prev,
+            [currency.id]: "success"
+          }));
         },
         onClose: () => {
           connect.close();
@@ -113,6 +170,10 @@ function OverdueInvoicePayment({
         },
         onError: err => {
           _Toast.default.error((0, _util.formatError)(err));
+          setPaymentStatus(prev => ({
+            ...prev,
+            [currency.id]: "error"
+          }));
           setPayLoading(false);
         }
       });
@@ -123,7 +184,10 @@ function OverdueInvoicePayment({
     dialogProps.onClose?.();
   };
   const handleViewDetailClick = e => {
-    if (inSubscriptionDetail) {
+    if (detailLinkOptions.onClick) {
+      e.preventDefault();
+      detailLinkOptions.onClick(e);
+    } else if (!detailLinkOptions.enabled) {
       e.preventDefault();
       handleClose();
     }
@@ -131,39 +195,112 @@ function OverdueInvoicePayment({
   if (loading) {
     return null;
   }
-  const renderPayButton = (item, props) => {
-    const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
+  const getDetailLinkText = () => {
+    if (detailLinkOptions.title) {
+      return detailLinkOptions.title;
+    }
+    if (subscriptionId) {
+      return t("payment.subscription.overdue.view");
+    }
+    return t("payment.customer.pastDue.view");
+  };
+  const renderPayButton = (item, primaryButton = true, props = {
+    variant: "contained"
+  }) => {
+    const {
+      currency
+    } = item;
+    const inProcess = payLoading && selectCurrencyId === currency.id;
+    const status = paymentStatus[currency.id] || "idle";
+    if (status === "success") {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: props?.variant || "contained",
+        size: "small",
+        ...(primaryButton ? {} : {
+          color: "success",
+          startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.CheckCircle, {})
+        }),
+        children: t("payment.subscription.overdue.paid")
+      });
+    }
+    if (status === "error") {
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        size: "small",
+        onClick: () => handlePay(item),
+        ...props,
+        children: t("payment.subscription.overdue.retry")
+      });
+    }
     if (item.method.type === "stripe") {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
         variant: "contained",
         color: "primary",
-        onClick: () => window.open(subscriptionUrl, "_blank"),
+        onClick: () => window.open(detailUrl, "_blank"),
         ...props,
         children: t("payment.subscription.overdue.viewNow")
       });
     }
-    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Button, {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
       variant: "contained",
-      color: "primary",
+      size: "small",
+      disabled: inProcess,
+      loading: inProcess,
       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")]
+      children: t("payment.subscription.overdue.payNow")
     });
   };
+  const getOverdueTitle = () => {
+    if (subscriptionId && data.subscription) {
+      if (summaryList.length === 1) {
+        return t("payment.subscription.overdue.title", {
+          name: data.subscription?.description,
+          count: data.invoices?.length,
+          total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+          symbol: summaryList[0]?.currency?.symbol
+        });
+      }
+      return t("payment.subscription.overdue.simpleTitle", {
+        name: data.subscription?.description,
+        count: data.invoices?.length
+      });
+    }
+    if (customerId) {
+      if (summaryList.length === 1) {
+        return t("payment.customer.overdue.title", {
+          subscriptionCount: data.subscriptionCount || 0,
+          count: data.invoices?.length,
+          total: (0, _util.formatAmount)(summaryList[0]?.amount, summaryList[0]?.currency?.decimal),
+          symbol: summaryList[0]?.currency?.symbol
+        });
+      }
+      return t("payment.customer.overdue.simpleTitle", {
+        subscriptionCount: data.subscriptionCount || 0,
+        count: data.invoices?.length
+      });
+    }
+    return "";
+  };
+  const getEmptyStateMessage = () => {
+    if (subscriptionId && data.subscription) {
+      return t("payment.subscription.overdue.empty", {
+        name: data.subscription?.description
+      });
+    }
+    if (customerId) {
+      return t("payment.customer.overdue.empty");
+    }
+    return "";
+  };
   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
+        invoices: data?.invoices,
+        subscriptionCount: data?.subscriptionCount,
+        detailUrl
       })
     });
   }
@@ -190,10 +327,7 @@ function OverdueInvoicePayment({
       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
-          })
+          children: getEmptyStateMessage()
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
           justifyContent: "flex-end",
@@ -212,21 +346,17 @@ function OverdueInvoicePayment({
         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",
-            onClick: handleViewDetailClick,
-            rel: "noreferrer",
-            style: {
-              color: "var(--foregrounds-fg-interactive, 0086FF)"
-            },
-            children: t("payment.subscription.overdue.view")
+          children: [getOverdueTitle(), detailLinkOptions.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+              href: detailUrl,
+              target: "_blank",
+              onClick: handleViewDetailClick,
+              rel: "noreferrer",
+              style: {
+                color: "var(--foregrounds-fg-interactive, 0086FF)"
+              },
+              children: getDetailLinkText()
+            })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
@@ -244,19 +374,17 @@ function OverdueInvoicePayment({
         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",
-            onClick: handleViewDetailClick,
-            style: {
-              color: "var(--foregrounds-fg-interactive, 0086FF)"
-            },
-            children: t("payment.subscription.overdue.view")
+          children: [getOverdueTitle(), detailLinkOptions.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)("br", {}), t("payment.subscription.overdue.description"), /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {
+              href: detailUrl,
+              target: "_blank",
+              rel: "noreferrer",
+              onClick: handleViewDetailClick,
+              style: {
+                color: "var(--foregrounds-fg-interactive, 0086FF)"
+              },
+              children: getDetailLinkText()
+            })]
           })]
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           color: "text.secondary",
@@ -281,7 +409,7 @@ function OverdueInvoicePayment({
                 total: (0, _util.formatAmount)(item?.amount, item?.currency?.decimal),
                 currency: item?.currency?.symbol
               })
-            }), renderPayButton(item, {
+            }), renderPayButton(item, false, {
               variant: "text",
               sx: {
                 color: "text.link"
@@ -300,6 +428,11 @@ OverdueInvoicePayment.defaultProps = {
     open: true
   },
   children: null,
-  inSubscriptionDetail: false
+  detailLinkOptions: {
+    enabled: true
+  },
+  subscriptionId: void 0,
+  customerId: void 0,
+  successToast: true
 };
 module.exports = OverdueInvoicePayment;