@blocklet/payment-react 1.18.12 → 1.18.14

package/es/components/link.js

@@ -11,6 +11,7 @@ export default function Link({ to, children, onClick, replace, target, outLink =
       e.preventDefault();
       window.location.href = to;
     }
+    e.preventDefault();
     onClick?.(e);
   };
   return /* @__PURE__ */ jsx("a", { href: to, onClick: handleClick, target, rel: "noreferrer", ...props, children });

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

@@ -9,6 +9,7 @@ type Props = {
     mode?: 'default' | 'custom';
     onPaid?: (subscriptionId: string, currencyId: string) => void;
     dialogProps?: DialogProps;
+    inSubscriptionDetail?: boolean;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription: Subscription;
         summary: {
@@ -23,7 +24,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, inSubscriptionDetail, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -32,6 +33,7 @@ declare namespace OverdueInvoicePayment {
             open: boolean;
         };
         children: null;
+        inSubscriptionDetail: boolean;
     };
 }
 export default OverdueInvoicePayment;

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

@@ -20,7 +20,8 @@ function OverdueInvoicePayment({
   dialogProps = {},
   children,
   onPaid = () => {
-  }
+  },
+  inSubscriptionDetail = false
 }) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -100,8 +101,14 @@ function OverdueInvoicePayment({
     setDialogOpen(false);
     dialogProps.onClose?.();
   };
+  const handleViewDetailClick = (e) => {
+    if (inSubscriptionDetail) {
+      e.preventDefault();
+      handleClose();
+    }
+  };
   if (loading) {
-    return /* @__PURE__ */ jsx(CircularProgress, {});
+    return null;
   }
   const renderPayButton = (item, props) => {
     const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
@@ -130,6 +137,7 @@ function OverdueInvoicePayment({
       ...dialogProps || {},
       open: dialogOpen,
       title: dialogProps?.title || t("payment.subscription.overdue.pastDue"),
+      sx: { "& .MuiDialogContent-root": { pt: 0 } },
       onClose: handleClose,
       children: error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message }) : /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
         summaryList.length === 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -155,6 +163,7 @@ function OverdueInvoicePayment({
               {
                 href: subscriptionUrl,
                 target: "_blank",
+                onClick: handleViewDetailClick,
                 rel: "noreferrer",
                 style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
                 children: t("payment.subscription.overdue.view")
@@ -181,6 +190,7 @@ function OverdueInvoicePayment({
                 href: subscriptionUrl,
                 target: "_blank",
                 rel: "noreferrer",
+                onClick: handleViewDetailClick,
                 style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
                 children: t("payment.subscription.overdue.view")
               }
@@ -229,6 +239,7 @@ OverdueInvoicePayment.defaultProps = {
   dialogProps: {
     open: true
   },
-  children: null
+  children: null,
+  inSubscriptionDetail: false
 };
 export default OverdueInvoicePayment;

package/es/history/invoice/list.js

@@ -6,7 +6,7 @@ import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/m
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
-import { joinURL } from "ufo";
+import { useNavigate } from "react-router-dom";
 import debounce from "lodash/debounce";
 import Status from "../../components/status.js";
 import { usePaymentContext } from "../../contexts/payment.js";
@@ -19,10 +19,10 @@ import {
   formatToDatetime,
   getInvoiceDescriptionAndReason,
   getInvoiceStatusColor,
-  getPrefix,
   getTxLink
 } from "../../libs/util.js";
 import Table from "../../components/table.js";
+import { createLink, handleNavigation } from "../../libs/navigation.js";
 const groupByDate = (items) => {
   const grouped = {};
   items.forEach((item) => {
@@ -45,21 +45,20 @@ const fetchData = (params = {}) => {
 };
 const getInvoiceLink = (invoice, action) => {
   if (invoice.id.startsWith("in_")) {
+    const path = `/customer/invoice/${invoice.id}${invoice.status === "uncollectible" && action ? `?action=${action}` : ""}`;
     return {
-      external: false,
       connect: invoice.status === "uncollectible",
-      url: joinURL(
-        getPrefix(),
-        `/customer/invoice/${invoice.id}?action=${invoice.status === "uncollectible" ? action : ""}`
-      )
+      link: createLink(path)
     };
   }
   return {
-    external: true,
     connect: false,
-    url: getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link
+    link: createLink(getTxLink(invoice.paymentMethod, invoice.metadata?.payment_details).link, true)
   };
 };
+const linkStyle = {
+  cursor: "pointer"
+};
 const InvoiceTable = React.memo((props) => {
   const {
     pageSize,
@@ -77,6 +76,7 @@ const InvoiceTable = React.memo((props) => {
   } = props;
   const listKey = "invoice-table";
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
   const [search, setSearch] = useState({
     pageSize: pageSize || 10,
     page: 1
@@ -131,6 +131,10 @@ const InvoiceTable = React.memo((props) => {
       });
     }
   }, [subscription]);
+  const handleLinkClick = (e, invoice) => {
+    const { link } = getInvoiceLink(invoice, action);
+    handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
+  };
   const columns = [
     {
       label: t("common.amount"),
@@ -140,8 +144,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Typography, { children: [
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { children: [
             formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
             "\xA0",
             invoice.paymentCurrency.symbol
@@ -155,8 +158,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: getInvoiceDescriptionAndReason(invoice, locale)?.type }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: getInvoiceDescriptionAndReason(invoice, locale)?.type }) });
         }
       }
     },
@@ -166,8 +168,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: invoice?.number });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: invoice?.number });
         }
       }
     },
@@ -177,8 +178,7 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: formatToDate(invoice.created_at, locale, "YYYY-MM-DD HH:mm:ss") });
         }
       }
     },
@@ -189,8 +189,7 @@ const InvoiceTable = React.memo((props) => {
         sort: false,
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: getInvoiceDescriptionAndReason(invoice, locale)?.description || invoice.id });
         }
       }
     },
@@ -200,24 +199,23 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (val, index) => {
           const invoice = data?.list[index];
-          const link = getInvoiceLink(invoice, action);
           const hidePay = invoice.billing_reason === "overdraft-protection";
+          const { connect } = getInvoiceLink(invoice, action);
           if (action && !hidePay) {
-            return link.connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
+            return connect ? /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: () => onPay(invoice.id), sx: { color: "text.link" }, children: t("payment.customer.invoice.pay") }) : /* @__PURE__ */ jsx(
               Button,
               {
                 component: "a",
                 variant: "text",
                 size: "small",
-                href: link.url,
-                target: link.external ? "_blank" : target,
+                onClick: (e) => handleLinkClick(e, invoice),
                 sx: { color: "var(--foregrounds-fg-interactive, #0086FF) !important" },
                 rel: "noreferrer",
                 children: t("payment.customer.invoice.pay")
               }
             );
           }
-          return /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
         }
       }
     }
@@ -283,6 +281,7 @@ const InvoiceList = React.memo((props) => {
   const size = pageSize || 10;
   const subscription = useSubscription("events");
   const { t, locale } = useLocaleContext();
+  const navigate = useNavigate();
   const { data, loadMore, loadingMore, loading, reloadAsync } = useInfiniteScroll(
     (d) => {
       const page = d ? Math.ceil(d.list.length / size) + 1 : 1;
@@ -342,11 +341,14 @@ const InvoiceList = React.memo((props) => {
   }
   const hasMore = data && data.list.length < data.count;
   const grouped = groupByDate(data.list);
+  const handleLinkClick = (e, link) => {
+    handleNavigation(e, link, navigate, { target: link.external ? "_blank" : target });
+  };
   return /* @__PURE__ */ jsxs(Root, { direction: "column", gap: 1, sx: { mt: 1 }, children: [
     Object.entries(grouped).map(([date, invoices]) => /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
       invoices.map((invoice) => {
-        const link = getInvoiceLink(invoice, action);
+        const { link, connect } = getInvoiceLink(invoice, action);
         return /* @__PURE__ */ jsxs(
           Stack,
           {
@@ -360,10 +362,19 @@ const InvoiceList = React.memo((props) => {
             alignItems: "center",
             flexWrap: "nowrap",
             children: [
-              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx("a", { href: link.url, target: link.external ? "_blank" : target, rel: "noreferrer", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-                /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
-                link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
-              ] }) }) }),
+              /* @__PURE__ */ jsx(Box, { flex: 2, children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: link.url,
+                  target: link.external ? "_blank" : target,
+                  rel: "noreferrer",
+                  onClick: (e) => handleLinkClick(e, link),
+                  children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+                    /* @__PURE__ */ jsx(Typography, { component: "span", children: invoice.number }),
+                    link.external && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(OpenInNewOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
+                  ] })
+                }
+              ) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
@@ -371,7 +382,7 @@ const InvoiceList = React.memo((props) => {
               ] }) }),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(invoice.created_at, locale, "HH:mm:ss") }) }),
               !action && /* @__PURE__ */ jsx(Hidden, { mdDown: true, children: /* @__PURE__ */ jsx(Box, { flex: 2, className: "invoice-description", textAlign: "right", children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id }) }) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? link.connect ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "contained",
@@ -387,8 +398,7 @@ const InvoiceList = React.memo((props) => {
                   component: "a",
                   variant: "contained",
                   size: "small",
-                  href: link.url,
-                  target: link.external ? "_blank" : target,
+                  onClick: (e) => handleLinkClick(e, link),
                   sx: { whiteSpace: "nowrap" },
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")

package/es/libs/navigation.d.ts

@@ -0,0 +1,33 @@
+import { NavigateFunction } from 'react-router-dom';
+export interface LinkInfo {
+    url: string;
+    external: boolean;
+    path: string;
+}
+/**
+ * Check if currently running inside Payment Kit
+ */
+export declare function isInPaymentKit(): boolean;
+/**
+ * Create link information object
+ * @param path Path or URL
+ * @param external Force external link behavior
+ */
+export declare function createLink(path: string, external?: boolean): LinkInfo;
+/**
+ * Get HTML attributes for a link
+ * @param link Link information
+ * @param target Link target (default: _self)
+ */
+export declare function getLinkProps(link: LinkInfo, target?: string): Record<string, any>;
+/**
+ * Handle link navigation
+ * @param e Click event
+ * @param link Link information
+ * @param navigate React Router navigate function
+ * @param options Navigation options
+ */
+export declare function handleNavigation(e: React.MouseEvent, link: LinkInfo, navigate?: NavigateFunction, options?: {
+    replace?: boolean;
+    target?: string;
+}): void;

package/es/libs/navigation.js

@@ -0,0 +1,45 @@
+import { joinURL } from "ufo";
+import { getPrefix, PAYMENT_KIT_DID } from "./util.js";
+export function isInPaymentKit() {
+  const componentId = (window.blocklet?.componentId || "").split("/").pop();
+  return componentId === PAYMENT_KIT_DID;
+}
+export function createLink(path, external = false) {
+  const isAbsoluteUrl = /^https?:\/\//.test(path);
+  const isExternal = external || isAbsoluteUrl;
+  const url = isExternal ? path : joinURL(getPrefix(), path);
+  return {
+    url,
+    external: isExternal,
+    path
+  };
+}
+export function getLinkProps(link, target = "_self") {
+  const props = {
+    href: link.url
+  };
+  if (link.external) {
+    props.target = target;
+    props.rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  }
+  return props;
+}
+export function handleNavigation(e, link, navigate, options = {}) {
+  if (e) {
+    e.preventDefault();
+  }
+  const { replace = false, target = "_self" } = options;
+  if (link.external || target === "_blank") {
+    window.open(link.url, target);
+    return;
+  }
+  if (isInPaymentKit() && navigate) {
+    navigate(link.path, { replace });
+    return;
+  }
+  if (replace) {
+    window.location.replace(link.url);
+  } else {
+    window.location.href = link.url;
+  }
+}

package/es/libs/util.d.ts

@@ -114,3 +114,7 @@ export declare function getInvoiceDescriptionAndReason(invoice: TInvoiceExpanded
 export declare function getPaymentKitComponent(): any;
 export declare function openDonationSettings(openInNewTab?: boolean): void;
 export declare function getUserProfileLink(userDid: string, locale?: string): string;
+export declare function parseMarkedText(text: string): Array<{
+    type: 'text' | 'marked';
+    content: string;
+}>;

package/es/libs/util.js

@@ -933,3 +933,23 @@ export function getUserProfileLink(userDid, locale = "en") {
     })
   );
 }
+export function parseMarkedText(text) {
+  if (!text)
+    return [];
+  const parts = text.split(/(#([^#]*)#)/);
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part)
+      continue;
+    if (i % 3 === 0) {
+      result.push({ type: "text", content: part });
+    } else if (i % 3 === 1 && part.startsWith("#") && part.endsWith("#")) {
+      const content = part.slice(1, -1);
+      if (content.length >= 0) {
+        result.push({ type: "marked", content });
+      }
+    }
+  }
+  return result.filter((p) => p.content !== "");
+}

package/es/locales/en.js

@@ -245,8 +245,8 @@ export default flat({
         }
       },
       recover: {
-        button: "Renew",
-        title: "Renew your subscription",
+        button: "Resume Subscription",
+        title: "Resume Your Subscription",
         description: "Your subscription will not be canceled and will be automatically renewed on {date}, please confirm to continue"
       },
       changePlan: {

package/es/locales/zh.js

@@ -245,8 +245,8 @@ export default flat({
         }
       },
       recover: {
-        button: "\u7EED\u8BA2",
-        title: "\u7EED\u8BA2\u60A8\u7684\u8BA2\u9605",
+        button: "\u6062\u590D\u8BA2\u9605",
+        title: "\u6062\u590D\u60A8\u7684\u8BA2\u9605",
         description: "\u60A8\u7684\u8BA2\u9605\u5C06\u4E0D\u4F1A\u88AB\u53D6\u6D88\uFF0C\u5E76\u5C06\u5728{date}\u81EA\u52A8\u7EED\u8BA2\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u7EE7\u7EED"
       },
       changePlan: {

package/es/payment/form/index.js

@@ -137,6 +137,11 @@ export default function PaymentForm({
         setValue("customer_phone", session.user.phone);
       }
     }
+    if (!session?.user) {
+      setValue("customer_name", "");
+      setValue("customer_email", "");
+      setValue("customer_phone", "");
+    }
   }, [session?.user, getValues, setValue]);
   useEffect(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);

package/es/payment/form/stripe/form.js

@@ -8,7 +8,7 @@ import { useSetState } from "ahooks";
 import { useEffect, useCallback } from "react";
 import { useMobile } from "../../../hooks/mobile.js";
 import LoadingButton from "../../../components/loading-button.js";
-const { Elements, PaymentElement, useElements, useStripe, loadStripe } = globalThis.__STRIPE_COMPONENTS__;
+const { Elements, PaymentElement, useElements, useStripe, loadStripe, LinkAuthenticationElement } = globalThis.__STRIPE_COMPONENTS__;
 function StripeCheckoutForm({
   clientSecret,
   intentType,
@@ -90,10 +90,30 @@ function StripeCheckoutForm({
     // eslint-disable-line
   );
   return /* @__PURE__ */ jsxs(Content, { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsx(
+      LinkAuthenticationElement,
+      {
+        options: {
+          defaultEmail: customer.email
+        }
+      }
+    ),
     /* @__PURE__ */ jsx(
       PaymentElement,
       {
-        options: { layout: "auto", fields: { billingDetails: "never" }, readOnly: state.confirming },
+        options: {
+          layout: "auto",
+          fields: { billingDetails: "never" },
+          readOnly: state.confirming,
+          defaultValues: {
+            billingDetails: {
+              name: customer.name,
+              phone: customer.phone,
+              email: customer.email,
+              address: customer.address
+            }
+          }
+        },
         onReady: () => setState({ loaded: true })
       }
     ),
@@ -170,17 +190,27 @@ export default function StripeCheckout({
           minWidth: isMobile ? "100%" : "500px"
         }
       },
-      children: /* @__PURE__ */ jsx(Elements, { options: { clientSecret, locale: locale === "zh" ? "zh-CN" : "en" }, stripe: stripePromise, children: /* @__PURE__ */ jsx(
-        StripeCheckoutForm,
+      children: /* @__PURE__ */ jsx(
+        Elements,
         {
-          clientSecret,
-          intentType,
-          mode,
-          customer,
-          onConfirm,
-          returnUrl
+          options: {
+            clientSecret,
+            locale: locale === "zh" ? "zh-CN" : "en"
+          },
+          stripe: stripePromise,
+          children: /* @__PURE__ */ jsx(
+            StripeCheckoutForm,
+            {
+              clientSecret,
+              intentType,
+              mode,
+              customer,
+              onConfirm,
+              returnUrl
+            }
+          )
         }
-      ) })
+      )
     }
   );
 }

package/es/payment/form/stripe/index.d.ts

@@ -4,6 +4,7 @@ declare global {
         __STRIPE_COMPONENTS__?: {
             Elements: any;
             PaymentElement: any;
+            LinkAuthenticationElement: any;
             useElements: () => any;
             useStripe: () => any;
             loadStripe: (key: string) => Promise<any>;

package/es/payment/form/stripe/index.js

@@ -6,7 +6,8 @@ export default createLazyComponent(async () => {
     PaymentElement: stripeReact.PaymentElement,
     useElements: stripeReact.useElements,
     useStripe: stripeReact.useStripe,
-    loadStripe: stripe.loadStripe
+    loadStripe: stripe.loadStripe,
+    LinkAuthenticationElement: stripeReact.LinkAuthenticationElement
   };
   const { default: Component } = await import("./form.js");
   return Component;

package/es/theme/index.js

@@ -139,6 +139,11 @@ export function PaymentThemeProvider({
             fontWeight: "500",
             lineHeight: "24px"
           },
+          ".base-dialog": {
+            ".MuiPaper-root>.MuiDialogContent-root": {
+              paddingTop: "0"
+            }
+          },
           a: {
             textDecoration: "none !important"
           }

package/lib/components/link.js

@@ -27,6 +27,7 @@ function Link({
       e.preventDefault();
       window.location.href = to;
     }
+    e.preventDefault();
     onClick?.(e);
   };
   return /* @__PURE__ */(0, _jsxRuntime.jsx)("a", {

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

@@ -9,6 +9,7 @@ type Props = {
     mode?: 'default' | 'custom';
     onPaid?: (subscriptionId: string, currencyId: string) => void;
     dialogProps?: DialogProps;
+    inSubscriptionDetail?: boolean;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription: Subscription;
         summary: {
@@ -23,7 +24,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, }: Props): import("react").JSX.Element;
+declare function OverdueInvoicePayment({ subscriptionId, mode, dialogProps, children, onPaid, inSubscriptionDetail, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -32,6 +33,7 @@ declare namespace OverdueInvoicePayment {
             open: boolean;
         };
         children: null;
+        inSubscriptionDetail: boolean;
     };
 }
 export default OverdueInvoicePayment;

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

@@ -26,7 +26,8 @@ function OverdueInvoicePayment({
   mode = "default",
   dialogProps = {},
   children,
-  onPaid = () => {}
+  onPaid = () => {},
+  inSubscriptionDetail = false
 }) {
   const {
     t
@@ -121,8 +122,14 @@ function OverdueInvoicePayment({
     setDialogOpen(false);
     dialogProps.onClose?.();
   };
+  const handleViewDetailClick = e => {
+    if (inSubscriptionDetail) {
+      e.preventDefault();
+      handleClose();
+    }
+  };
   if (loading) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {});
+    return null;
   }
   const renderPayButton = (item, props) => {
     const isPayLoading = payLoading && item.currency.id === selectCurrencyId;
@@ -169,6 +176,11 @@ function OverdueInvoicePayment({
     ...(dialogProps || {}),
     open: dialogOpen,
     title: dialogProps?.title || t("payment.subscription.overdue.pastDue"),
+    sx: {
+      "& .MuiDialogContent-root": {
+        pt: 0
+      }
+    },
     onClose: handleClose,
     children: error ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Alert, {
       severity: "error",
@@ -209,6 +221,7 @@ function OverdueInvoicePayment({
           }), /* @__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)"
@@ -239,6 +252,7 @@ function OverdueInvoicePayment({
             href: subscriptionUrl,
             target: "_blank",
             rel: "noreferrer",
+            onClick: handleViewDetailClick,
             style: {
               color: "var(--foregrounds-fg-interactive, 0086FF)"
             },
@@ -285,6 +299,7 @@ OverdueInvoicePayment.defaultProps = {
   dialogProps: {
     open: true
   },
-  children: null
+  children: null,
+  inSubscriptionDetail: false
 };
 module.exports = OverdueInvoicePayment;