@blocklet/payment-react 1.18.14 → 1.18.16

package/es/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/es/components/over-due-invoice-payment.js

@@ -1,27 +1,41 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { Button, Typography, Stack, CircularProgress, Alert } from "@mui/material";
+import { Button, Typography, Stack, 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 { CheckCircle as CheckCircleIcon } from "@mui/icons-material";
+import debounce from "lodash/debounce";
 import { usePaymentContext } from "../contexts/payment.js";
 import { formatAmount, formatError, getPrefix } from "../libs/util.js";
 import { useSubscription } from "../hooks/subscription.js";
 import api from "../libs/api.js";
-const fetchOverdueInvoices = async (subscriptionId) => {
-  const res = await api.get(`/api/subscriptions/${subscriptionId}/overdue/invoices`);
+import LoadingButton from "./loading-button.js";
+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.get(url);
   return res.data;
 };
 function OverdueInvoicePayment({
   subscriptionId,
+  customerId,
   mode = "default",
   dialogProps = {},
   children,
   onPaid = () => {
   },
-  inSubscriptionDetail = false
+  detailLinkOptions = { enabled: true },
+  successToast = true
 }) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -29,42 +43,70 @@ function OverdueInvoicePayment({
   const [payLoading, setPayLoading] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = useState({});
+  const [paymentStatus, setPaymentStatus] = useState({});
+  const sourceType = subscriptionId ? "subscription" : "customer";
+  const sourceId = subscriptionId || customerId;
   const {
     data = {
-      subscription: {},
       summary: {},
       invoices: []
     },
     error,
     loading,
     runAsync: refresh
-  } = useRequest(() => fetchOverdueInvoices(subscriptionId));
-  const subscriptionUrl = joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+  } = useRequest(() => fetchOverdueInvoices({ subscriptionId, customerId }), {
+    ready: !!subscriptionId || !!customerId
+  });
+  const detailUrl = useMemo(() => {
+    if (subscriptionId) {
+      return joinURL(getPrefix(), `/customer/subscription/${subscriptionId}`);
+    }
+    if (customerId) {
+      return joinURL(getPrefix(), "/customer/invoice/past-due");
+    }
+    return "";
+  }, [subscriptionId, customerId]);
   const summaryList = useMemo(() => {
     if (!data?.summary) {
       return [];
     }
     return Object.values(data.summary);
   }, [data?.summary]);
+  const debouncedHandleInvoicePaid = debounce(
+    async (currencyId) => {
+      if (successToast) {
+        Toast.close();
+        Toast.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 = 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);
-            }
-          });
+        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, method } = item;
     if (method.type === "stripe") {
@@ -76,15 +118,30 @@ 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: joinURL(getPrefix(), "/api/did"),
-        extraParams: { currencyId: currency.id, subscriptionId },
+        extraParams,
         onSuccess: () => {
           connect.close();
+          setPayLoading(false);
+          setPaymentStatus((prev) => ({
+            ...prev,
+            [currency.id]: "success"
+          }));
         },
         onClose: () => {
           connect.close();
@@ -92,6 +149,10 @@ function OverdueInvoicePayment({
         },
         onError: (err) => {
           Toast.error(formatError(err));
+          setPaymentStatus((prev) => ({
+            ...prev,
+            [currency.id]: "error"
+          }));
           setPayLoading(false);
         }
       });
@@ -102,7 +163,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();
     }
@@ -110,22 +174,103 @@ 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__ */ jsx(
+        Button,
+        {
+          variant: props?.variant || "contained",
+          size: "small",
+          ...primaryButton ? {} : {
+            color: "success",
+            startIcon: /* @__PURE__ */ jsx(CheckCircleIcon, {})
+          },
+          children: t("payment.subscription.overdue.paid")
+        }
+      );
+    }
+    if (status === "error") {
+      return /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", onClick: () => handlePay(item), ...props, children: t("payment.subscription.overdue.retry") });
+    }
     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__ */ jsx(Button, { variant: "contained", color: "primary", onClick: () => window.open(detailUrl, "_blank"), ...props, children: t("payment.subscription.overdue.viewNow") });
+    }
+    return /* @__PURE__ */ jsx(
+      LoadingButton,
+      {
+        variant: "contained",
+        size: "small",
+        disabled: inProcess,
+        loading: inProcess,
+        onClick: () => handlePay(item),
+        ...props,
+        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: 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: 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 /* @__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")
-    ] });
+    return "";
   };
   if (mode === "custom" && children && typeof children === "function") {
     return /* @__PURE__ */ jsx(Stack, { children: children(handlePay, {
       subscription: data?.subscription,
-      subscriptionUrl,
       summary: data?.summary,
-      invoices: data?.invoices
+      invoices: data?.invoices,
+      subscriptionCount: data?.subscriptionCount,
+      detailUrl
     }) });
   }
   return /* @__PURE__ */ jsx(
@@ -141,34 +286,27 @@ function OverdueInvoicePayment({
       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: [
-          /* @__PURE__ */ jsx(Alert, { severity: "success", children: t("payment.subscription.overdue.empty", {
-            // @ts-ignore
-            name: data?.subscription?.description
-          }) }),
+          /* @__PURE__ */ jsx(Alert, { severity: "success", children: getEmptyStateMessage() }),
           /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-end", mt: 2, children: /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: handleClose, 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",
-                onClick: handleViewDetailClick,
-                rel: "noreferrer",
-                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
-                children: t("payment.subscription.overdue.view")
-              }
-            )
+            getOverdueTitle(),
+            detailLinkOptions.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("br", {}),
+              t("payment.subscription.overdue.description"),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: detailUrl,
+                  target: "_blank",
+                  onClick: handleViewDetailClick,
+                  rel: "noreferrer",
+                  style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                  children: getDetailLinkText()
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "flex-end", gap: 2, mt: 2, children: [
             /* @__PURE__ */ jsx(Button, { variant: "outlined", color: "primary", onClick: handleClose, children: t("common.cancel") }),
@@ -177,24 +315,22 @@ function OverdueInvoicePayment({
         ] }),
         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",
-                onClick: handleViewDetailClick,
-                style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
-                children: t("payment.subscription.overdue.view")
-              }
-            )
+            getOverdueTitle(),
+            detailLinkOptions.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("br", {}),
+              t("payment.subscription.overdue.description"),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: detailUrl,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  onClick: handleViewDetailClick,
+                  style: { color: "var(--foregrounds-fg-interactive, 0086FF)" },
+                  children: getDetailLinkText()
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsx(Typography, { color: "text.secondary", variant: "body1", children: t("payment.subscription.overdue.list") }),
           /* @__PURE__ */ jsx(Stack, { children: summaryList.map((item) => /* @__PURE__ */ jsxs(
@@ -217,7 +353,7 @@ function OverdueInvoicePayment({
                   total: formatAmount(item?.amount, item?.currency?.decimal),
                   currency: item?.currency?.symbol
                 }) }),
-                renderPayButton(item, {
+                renderPayButton(item, false, {
                   variant: "text",
                   sx: {
                     color: "text.link"
@@ -240,6 +376,9 @@ OverdueInvoicePayment.defaultProps = {
     open: true
   },
   children: null,
-  inSubscriptionDetail: false
+  detailLinkOptions: { enabled: true },
+  subscriptionId: void 0,
+  customerId: void 0,
+  successToast: true
 };
 export default OverdueInvoicePayment;

package/es/contexts/payment.js

@@ -5,6 +5,19 @@ import { createContext, useContext, useState } from "react";
 import api from "../libs/api.js";
 import { getPrefix } from "../libs/util.js";
 import { CachedRequest } from "../libs/cached-request.js";
+const formatData = (data) => {
+  if (!data) {
+    return {
+      paymentMethods: [],
+      baseCurrency: {}
+    };
+  }
+  return {
+    ...data,
+    paymentMethods: data.paymentMethods || [],
+    baseCurrency: data.baseCurrency || {}
+  };
+};
 const PaymentContext = createContext({ api });
 const { Provider, Consumer } = PaymentContext;
 const getSettings = (forceRefresh = false) => {
@@ -52,7 +65,7 @@ function PaymentProvider({ session, connect, children, baseUrl }) {
         connect,
         prefix,
         livemode: !!livemode,
-        settings: data,
+        settings: formatData(data),
         getCurrency: (currencyId) => getCurrency(currencyId, data?.paymentMethods || []),
         getMethod: (methodId) => getMethod(methodId, data?.paymentMethods || []),
         refresh: run,

package/es/history/invoice/list.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
 import Toast from "@arcblock/ux/lib/Toast";
 import { OpenInNewOutlined } from "@mui/icons-material";
-import { Box, Button, CircularProgress, Hidden, Stack, Typography } from "@mui/material";
+import { Box, Button, CircularProgress, Stack, Typography, Tooltip } from "@mui/material";
 import { styled } from "@mui/system";
 import { useInfiniteScroll, useRequest, useSetState } from "ahooks";
 import React, { useEffect, useRef, useState } from "react";
@@ -144,7 +144,8 @@ const InvoiceTable = React.memo((props) => {
       options: {
         customBodyRenderLite: (_, index) => {
           const invoice = data?.list[index];
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { children: [
+          const isVoid = invoice.status === "void";
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
             formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
             "\xA0",
             invoice.paymentCurrency.symbol
@@ -201,6 +202,7 @@ const InvoiceTable = React.memo((props) => {
           const invoice = data?.list[index];
           const hidePay = invoice.billing_reason === "overdraft-protection";
           const { connect } = getInvoiceLink(invoice, action);
+          const isVoid = invoice.status === "void";
           if (action && !hidePay) {
             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,
@@ -215,7 +217,7 @@ const InvoiceTable = React.memo((props) => {
               }
             );
           }
-          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
+          return /* @__PURE__ */ jsx(Box, { onClick: (e) => handleLinkClick(e, invoice), sx: linkStyle, children: isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) });
         }
       }
     }
@@ -349,6 +351,7 @@ const InvoiceList = React.memo((props) => {
       /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
       invoices.map((invoice) => {
         const { link, connect } = getInvoiceLink(invoice, action);
+        const isVoid = invoice.status === "void";
         return /* @__PURE__ */ jsxs(
           Stack,
           {
@@ -371,17 +374,35 @@ const InvoiceList = React.memo((props) => {
                   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" } }) })
+                    link.external && /* @__PURE__ */ jsx(
+                      OpenInNewOutlined,
+                      {
+                        fontSize: "small",
+                        sx: {
+                          color: "text.secondary",
+                          display: { xs: "none", md: "inline-flex" }
+                        }
+                      }
+                    )
                   ] })
                 }
               ) }),
-              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { children: [
+              /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: /* @__PURE__ */ jsxs(Typography, { sx: isVoid ? { textDecoration: "line-through" } : {}, children: [
                 formatBNStr(invoice.total, invoice.paymentCurrency.decimal),
                 "\xA0",
                 invoice.paymentCurrency.symbol
               ] }) }),
               /* @__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 }) }) }),
+              !action && /* @__PURE__ */ jsx(
+                Box,
+                {
+                  flex: 2,
+                  className: "invoice-description",
+                  textAlign: "right",
+                  sx: { display: { xs: "none", lg: "inline-flex" } },
+                  children: /* @__PURE__ */ jsx(Typography, { children: invoice.description || invoice.id })
+                }
+              ),
               /* @__PURE__ */ jsx(Box, { flex: 1, textAlign: "right", children: action ? connect ? /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -403,7 +424,7 @@ const InvoiceList = React.memo((props) => {
                   rel: "noreferrer",
                   children: t("payment.customer.invoice.pay")
                 }
-              ) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
+              ) : isVoid ? /* @__PURE__ */ jsx(Tooltip, { title: t("payment.customer.invoice.noPaymentRequired"), arrow: true, placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) }) }) : /* @__PURE__ */ jsx(Status, { label: invoice.status, color: getInvoiceStatusColor(invoice.status) }) })
             ]
           },
           invoice.id
@@ -472,9 +493,6 @@ CustomerInvoiceList.defaultProps = {
 };
 const Root = styled(Stack)`
   @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
-    .invoice-description {
-      display: none !important;
-    }
     svg.MuiSvgIcon-root {
       display: none !important;
     }

package/es/locales/en.js

@@ -237,12 +237,13 @@ export default flat({
       pastDue: {
         button: "Pay",
         invoices: "Past Due Invoices",
-        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore. Please pay these invoices one by one.",
+        warning: "Past due invoices need to be paid immediately, otherwise you can not make new purchases anymore.",
         alert: {
           title: "You have unpaid invoices",
           description: "Seems you have unpaid invoices from previous subscriptions, new purchases are not allowed unless you have paid all past due invoices.",
           confirm: "Pay Now"
-        }
+        },
+        view: "View Due Invoices"
       },
       recover: {
         button: "Resume Subscription",
@@ -291,7 +292,8 @@ export default flat({
         empty: "There are no invoices",
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
-        emptyList: "No Invoice"
+        emptyList: "No Invoice",
+        noPaymentRequired: "No Payment Required"
       },
       payment: {
         empty: "There are no payments",
@@ -312,6 +314,11 @@ export default flat({
         changePayment: "Change payment method",
         trialLeft: "Trail Left",
         owner: "Subscription Owner"
+      },
+      overdue: {
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}. Please pay immediately to avoid service disruption.",
+        simpleTitle: "You have {count} due invoices. Please pay now to ensure uninterrupted service.",
+        empty: "Great! You have no due invoices."
       }
     },
     invoice: {
@@ -351,7 +358,9 @@ export default flat({
         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}."
+        empty: "There are no overdue invoices for your subscription {name}.",
+        retry: "Retry",
+        paid: "Paid"
       }
     }
   },