@blocklet/payment-react 1.18.19 → 1.18.21

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

@@ -17,6 +17,7 @@ type Props = {
     dialogProps?: DialogProps;
     detailLinkOptions?: DetailLinkOptions;
     successToast?: boolean;
+    alertMessage?: string;
     children?: (handlePay: (item: SummaryItem) => void, data: {
         subscription?: Subscription;
         summary: {
@@ -32,7 +33,7 @@ type SummaryItem = {
     currency: PaymentCurrency;
     method: PaymentMethod;
 };
-declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, }: Props): import("react").JSX.Element | null;
+declare function OverdueInvoicePayment({ subscriptionId, customerId, mode, dialogProps, children, onPaid, detailLinkOptions, successToast, alertMessage, }: Props): import("react").JSX.Element | null;
 declare namespace OverdueInvoicePayment {
     var defaultProps: {
         mode: string;
@@ -47,6 +48,7 @@ declare namespace OverdueInvoicePayment {
         subscriptionId: undefined;
         customerId: undefined;
         successToast: boolean;
+        alertMessage: string;
     };
 }
 export default OverdueInvoicePayment;

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

@@ -35,7 +35,8 @@ function OverdueInvoicePayment({
   onPaid = () => {
   },
   detailLinkOptions = { enabled: true },
-  successToast = true
+  successToast = true,
+  alertMessage = ""
 }) {
   const { t } = useLocaleContext();
   const { connect } = usePaymentContext();
@@ -245,19 +246,25 @@ function OverdueInvoicePayment({
       });
     }
     if (customerId) {
+      let title = "";
       if (summaryList.length === 1) {
-        return t("payment.customer.overdue.title", {
+        title = 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,
           method: getMethodText(summaryList[0]?.method)
         });
+      } else {
+        title = t("payment.customer.overdue.simpleTitle", {
+          subscriptionCount: data.subscriptionCount || 0,
+          count: data.invoices?.length
+        });
       }
-      return t("payment.customer.overdue.simpleTitle", {
-        subscriptionCount: data.subscriptionCount || 0,
-        count: data.invoices?.length
-      });
+      if (alertMessage) {
+        return `${title}${alertMessage}`;
+      }
+      return `${title}${t("payment.customer.overdue.defaultAlert")}`;
     }
     return "";
   };
@@ -388,6 +395,7 @@ OverdueInvoicePayment.defaultProps = {
   detailLinkOptions: { enabled: true },
   subscriptionId: void 0,
   customerId: void 0,
-  successToast: true
+  successToast: true,
+  alertMessage: ""
 };
 export default OverdueInvoicePayment;

package/es/libs/phone-validator.d.ts

@@ -1,2 +1,9 @@
 export declare const getPhoneUtil: () => Promise<any>;
 export declare const validatePhoneNumber: (phoneNumber: string) => Promise<any>;
+/**
+ * Format a phone number to international format
+ * @param phoneNumber The original phone number
+ * @param defaultCountry Default country code (ISO 3166-1 alpha-2)
+ * @returns Formatted phone number
+ */
+export declare const formatPhone: (phoneNumber: string | undefined, defaultCountry?: string) => string;

package/es/libs/phone-validator.js

@@ -1,17 +1,27 @@
 let phoneUtil = null;
 export const getPhoneUtil = async () => {
   if (!phoneUtil) {
-    const { PhoneNumberUtil } = await import(
+    const result = await import(
       /* webpackChunkName: "phone-util" */
       "google-libphonenumber"
     );
+    const PhoneNumberUtil = (result.default || result)?.PhoneNumberUtil;
+    if (!PhoneNumberUtil) {
+      throw new Error("PhoneNumberUtil not found");
+    }
     phoneUtil = PhoneNumberUtil.getInstance();
   }
   return phoneUtil;
 };
 export const validatePhoneNumber = async (phoneNumber) => {
   try {
-    const util = await getPhoneUtil();
+    let util = null;
+    try {
+      util = await getPhoneUtil();
+    } catch (err) {
+      const pattern = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/im;
+      return pattern.test(phoneNumber);
+    }
     const parsed = util.parseAndKeepRawInput(phoneNumber);
     return util.isValidNumber(parsed);
   } catch (err) {
@@ -19,3 +29,84 @@ export const validatePhoneNumber = async (phoneNumber) => {
     return false;
   }
 };
+export const formatPhone = (phoneNumber, defaultCountry = "US") => {
+  if (!phoneNumber || phoneNumber.trim() === "") {
+    return "";
+  }
+  const cleanedNumber = phoneNumber.replace(/[^\d+]/g, "");
+  if (cleanedNumber.startsWith("+")) {
+    return cleanedNumber;
+  }
+  const COUNTRY_CODES = {
+    US: "1",
+    // United States
+    CA: "1",
+    // Canada
+    CN: "86",
+    // China
+    HK: "852",
+    // Hong Kong
+    IN: "91",
+    // India
+    UK: "44",
+    // United Kingdom
+    GB: "44",
+    // United Kingdom
+    JP: "81",
+    // Japan
+    KR: "82",
+    // South Korea
+    AU: "61",
+    // Australia
+    DE: "49",
+    // Germany
+    FR: "33",
+    // France
+    IT: "39",
+    // Italy
+    ES: "34",
+    // Spain
+    BR: "55",
+    // Brazil
+    RU: "7",
+    // Russia
+    MX: "52",
+    // Mexico
+    SG: "65",
+    // Singapore
+    AE: "971"
+    // UAE
+  };
+  const COUNTRY_PATTERNS = [
+    [/^1[3-9]\d{9}$/, "86"],
+    // China mobile: 11 digits, starts with 1
+    [/^\d{10}$/, "1"],
+    // US/Canada: 10 digits
+    [/^[6-9]\d{9}$/, "91"],
+    // India: 10 digits, starts with 6-9
+    [/^0[1-9]\d{8,9}$/, "81"],
+    // Japan: 10-11 digits, starts with 0
+    [/^07\d{9}$/, "44"],
+    // UK mobile: 11 digits, starts with 07
+    [/^04\d{8}$/, "61"],
+    // Australia mobile: 10 digits, starts with 04
+    [/^01[0-9]\d{7,8}$/, "82"],
+    // Korea mobile: 10-11 digits, starts with 01
+    [/^[0-9]\d{8}$/, "86"]
+    // China landline: 9 digits
+  ];
+  let numberToFormat = cleanedNumber;
+  if (numberToFormat.startsWith("0")) {
+    numberToFormat = numberToFormat.substring(1);
+  }
+  for (const [pattern, countryCode2] of COUNTRY_PATTERNS) {
+    if (pattern.test(cleanedNumber)) {
+      if (cleanedNumber.startsWith("0") && !["1", "86"].includes(countryCode2)) {
+        return `+${countryCode2}${cleanedNumber.substring(1)}`;
+      }
+      return `+${countryCode2}${cleanedNumber}`;
+    }
+  }
+  const countryCode = COUNTRY_CODES[defaultCountry.toUpperCase()] || defaultCountry;
+  return `+${countryCode}${numberToFormat}`;
+};

package/es/locales/en.js

@@ -131,6 +131,7 @@ export default flat({
         empty: "No supporters yet",
         gaveTips: "{count} people gave tips",
         tipAmount: "Tip Amount",
+        tabHint: "to switch amount",
         benefits: {
           one: "{name} will receive all tips",
           multiple: "Tips will be distributed to {count} beneficiaries",
@@ -144,7 +145,7 @@ export default flat({
         later: "Configure Later",
         configTip: "Configure donation settings in Payment Kit"
       },
-      cardPay: "{action} with card",
+      cardPay: "{action} with bank card",
       empty: "No thing to pay",
       per: "per",
       pay: "Pay {payee}",
@@ -241,7 +242,7 @@ export default flat({
         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.",
+          customMessage: "Please pay immediately, otherwise new purchases or subscriptions will be prohibited.",
           confirm: "Pay Now"
         },
         view: "View Due Invoices"
@@ -317,9 +318,10 @@ export default flat({
         owner: "Subscription Owner"
       },
       overdue: {
-        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. 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."
+        title: "You have {count} due invoices for {subscriptionCount} subscriptions, totaling {total} {symbol}{method}. ",
+        simpleTitle: "You have {count} due invoices. ",
+        empty: "Great! You have no due invoices.",
+        defaultAlert: "Please pay immediately to avoid service disruption."
       }
     },
     invoice: {

package/es/locales/zh.js

@@ -131,6 +131,7 @@ export default flat({
         empty: "\u2764\uFE0F \u652F\u6301\u4E00\u4E0B",
         gaveTips: "\u5DF2\u6709 {count} \u4EBA\u6253\u8D4F",
         tipAmount: "\u6253\u8D4F\u91D1\u989D",
+        tabHint: "\u5FEB\u901F\u5207\u6362\u91D1\u989D",
         benefits: {
           one: "{name} \u5C06\u83B7\u5F97\u5168\u90E8\u6253\u8D4F",
           multiple: "\u6253\u8D4F\u5C06\u6309\u6BD4\u4F8B\u5206\u914D\u7ED9 {count} \u4F4D\u53D7\u76CA\u4EBA",
@@ -144,7 +145,7 @@ export default flat({
         later: "\u7A0D\u540E\u914D\u7F6E",
         configTip: "\u524D\u5F80 Payment Kit \u914D\u7F6E\u6253\u8D4F\u9009\u9879"
       },
-      cardPay: "\u4F7F\u7528\u5361\u7247{action}",
+      cardPay: "\u4F7F\u7528\u94F6\u884C\u5361{action}",
       empty: "\u6CA1\u6709\u53EF\u652F\u4ED8\u7684\u9879\u76EE",
       per: "\u6BCF",
       pay: "\u4ED8\u6B3E\u7ED9 {payee}",
@@ -242,6 +243,7 @@ export default flat({
         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",
+          customMessage: "\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u5426\u5219\u65B0\u7684\u8D2D\u4E70\u6216\u8005\u8BA2\u9605\u5C06\u88AB\u7981\u6B62\u3002",
           confirm: "\u53BB\u652F\u4ED8"
         },
         view: "\u67E5\u770B\u6B20\u8D39\u660E\u7EC6"
@@ -317,9 +319,10 @@ export default flat({
         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}{method}\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"
+        title: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355\uFF0C\u6D89\u53CA {subscriptionCount} \u4E2A\u8BA2\u9605\uFF0C\u603B\u91D1\u989D {total} {symbol}{method}\u3002",
+        simpleTitle: "\u60A8\u6709 {count} \u5F20\u6B20\u8D39\u8D26\u5355,",
+        empty: "\u606D\u559C\uFF01\u60A8\u5F53\u524D\u6CA1\u6709\u6B20\u8D39\u8D26\u5355\u3002",
+        defaultAlert: "\u8BF7\u7ACB\u5373\u652F\u4ED8\uFF0C\u4EE5\u514D\u5F71\u54CD\u60A8\u7684\u4F7F\u7528\u3002"
       }
     },
     invoice: {

package/es/payment/donation-form.js

@@ -29,6 +29,7 @@ import ProductDonation from "./product-donation.js";
 import ConfirmDialog from "../components/confirm.js";
 import PaymentBeneficiaries from "../components/payment-beneficiaries.js";
 import DonationSkeleton from "./skeleton/donation.js";
+import { formatPhone } from "../libs/phone-validator.js";
 const getBenefits = async (id, url) => {
   const { data } = await api.get(`/api/payment-links/${id}/benefits?${url ? `url=${url}` : ""}`);
   return data;
@@ -55,6 +56,7 @@ function PaymentInner({
 }) {
   const { t } = useLocaleContext();
   const { settings, session } = usePaymentContext();
+  const { isMobile } = useMobile();
   const [state, setState] = useSetState({
     checkoutSession,
     submitting: false,
@@ -79,20 +81,22 @@ function PaymentInner({
     defaultValues: {
       customer_name: customer?.name || session?.user?.fullName || "",
       customer_email: customer?.email || session?.user?.email || "",
-      customer_phone: customer?.phone || session?.user?.phone || "",
+      customer_phone: formatPhone(customer?.phone || session?.user?.phone || ""),
       payment_method: defaultMethodId,
       payment_currency: defaultCurrencyId,
       billing_address: Object.assign(
         {
-          country: "",
-          state: "",
-          city: "",
-          line1: "",
-          line2: "",
-          postal_code: ""
+          country: session?.user?.address?.country || "",
+          state: session?.user?.address?.province || "",
+          city: session?.user?.address?.city || "",
+          line1: session?.user?.address?.line1 || "",
+          line2: session?.user?.address?.line2 || "",
+          postal_code: session?.user?.address?.postalCode || ""
         },
         customer?.address || {},
-        { country: isValidCountry(customer?.address?.country || "") ? customer?.address?.country : "us" }
+        {
+          country: isValidCountry(customer?.address?.country || session?.user?.address?.country || "") ? customer?.address?.country : "us"
+        }
       )
     }
   });
@@ -202,20 +206,56 @@ function PaymentInner({
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       benefitsState.open && /* @__PURE__ */ jsx(PaymentBeneficiaries, { data: benefits, currency, totalAmount: benefitsState.amount }),
       /* @__PURE__ */ jsxs(Stack, { sx: { display: benefitsState.open ? "none" : "block" }, children: [
-        /* @__PURE__ */ jsx(
-          Typography,
-          {
-            title: t("payment.checkout.orderSummary"),
-            sx: {
-              color: "text.primary",
-              fontSize: "18px",
-              fontWeight: "500",
-              lineHeight: "24px",
-              mb: 2
-            },
-            children: t("payment.checkout.donation.tipAmount")
-          }
-        ),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              title: t("payment.checkout.orderSummary"),
+              sx: {
+                color: "text.primary",
+                fontSize: "18px",
+                fontWeight: "500",
+                lineHeight: "24px"
+              },
+              children: t("payment.checkout.donation.tipAmount")
+            }
+          ),
+          !isMobile && donationSettings?.amount?.presets && donationSettings.amount.presets.length > 0 && /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              sx: {
+                color: "text.secondary",
+                fontSize: "13px",
+                display: "flex",
+                alignItems: "center",
+                gap: 0.5,
+                opacity: 0.8
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "span",
+                    sx: {
+                      border: "1px solid",
+                      borderColor: "divider",
+                      borderRadius: 0.75,
+                      px: 0.75,
+                      py: 0.25,
+                      fontSize: "12px",
+                      lineHeight: 1,
+                      color: "text.secondary",
+                      fontWeight: "400",
+                      bgcolor: "transparent"
+                    },
+                    children: "Tab"
+                  }
+                ),
+                t("payment.checkout.donation.tabHint")
+              ]
+            }
+          )
+        ] }),
         items.map((x) => /* @__PURE__ */ jsx(
           ProductDonation,
           {

package/es/payment/form/index.js

@@ -11,7 +11,6 @@ import { joinURL } from "ufo";
 import { dispatch } from "use-bus";
 import isEmail from "validator/es/lib/isEmail";
 import isEmpty from "lodash/isEmpty";
-import ConfirmDialog from "../../components/confirm.js";
 import FormInput from "../../components/input.js";
 import { usePaymentContext } from "../../contexts/payment.js";
 import { useSubscription } from "../../hooks/subscription.js";
@@ -29,8 +28,9 @@ import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
 import StripeCheckout from "./stripe/index.js";
 import { useMobile } from "../../hooks/mobile.js";
-import { validatePhoneNumber } from "../../libs/phone-validator.js";
+import { formatPhone, validatePhoneNumber } from "../../libs/phone-validator.js";
 import LoadingButton from "../../components/loading-button.js";
+import OverdueInvoicePayment from "../../components/over-due-invoice-payment.js";
 export const waitForCheckoutComplete = async (sessionId) => {
   let result;
   await pWaitFor(
@@ -53,6 +53,31 @@ export const hasDidWallet = (user) => {
   const connected = user?.connectedAccounts || user?.extraConfigs?.connectedAccounts || [];
   return connected.some((x) => x.provider === "wallet");
 };
+const setUserFormValues = (userInfo, currentValues, setValue, options = {}) => {
+  const { preferExisting = true } = options;
+  const basicFields = {
+    customer_name: userInfo.name || userInfo.fullName,
+    customer_email: userInfo.email,
+    customer_phone: formatPhone(userInfo.phone)
+  };
+  const addressFields = {
+    "billing_address.state": userInfo.address?.state || userInfo.address?.province,
+    "billing_address.line1": userInfo.address?.line1,
+    "billing_address.line2": userInfo.address?.line2,
+    "billing_address.city": userInfo.address?.city,
+    "billing_address.postal_code": userInfo.address?.postal_code || userInfo.address?.postalCode,
+    "billing_address.country": userInfo.address?.country
+  };
+  if (options.showPhone) {
+    addressFields["billing_address.country"] = userInfo.metadata?.phone?.country || userInfo.address?.country;
+  }
+  const allFields = { ...addressFields, ...basicFields };
+  Object.entries(allFields).forEach(([field, value]) => {
+    if (!preferExisting || !currentValues[field.split(".")[0]]) {
+      setValue(field, value);
+    }
+  });
+};
 PaymentForm.defaultProps = {
   onlyShowBtn: false,
   isDonation: false
@@ -129,22 +154,30 @@ export default function PaymentForm({
   useEffect(() => {
     if (session?.user) {
       const values = getValues();
-      if (!values.customer_name) {
-        setValue("customer_name", session.user.fullName);
-      }
-      if (!values.customer_email) {
-        setValue("customer_email", session.user.email);
-      }
-      if (!values.customer_phone) {
-        setValue("customer_phone", session.user.phone);
-      }
-    }
-    if (!session?.user) {
-      setValue("customer_name", "");
-      setValue("customer_email", "");
-      setValue("customer_phone", "");
+      setUserFormValues(session.user, values, setValue, {
+        preferExisting: false,
+        showPhone: checkoutSession.phone_number_collection?.enabled
+      });
+    } else {
+      setUserFormValues(
+        {
+          name: "",
+          email: "",
+          phone: "",
+          address: {
+            state: "",
+            line1: "",
+            line2: "",
+            city: "",
+            postal_code: ""
+          }
+        },
+        {},
+        setValue,
+        { preferExisting: false, showPhone: checkoutSession.phone_number_collection?.enabled }
+      );
     }
-  }, [session?.user, getValues, setValue]);
+  }, [session?.user, getValues, setValue, checkoutSession.phone_number_collection?.enabled]);
   useEffect(() => {
     setValue("payment_method", currencies[paymentCurrencyIndex]?.method?.id);
     setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
@@ -175,7 +208,7 @@ export default function PaymentForm({
   buttonText = session?.user || isDonation ? buttonText : t("payment.checkout.connect", { action: buttonText });
   const method = paymentMethods.find((x) => x.id === paymentMethod);
   const isDonationMode = checkoutSession?.submit_type === "donate" && isDonation;
-  const showForm = session?.user;
+  const showForm = !!session?.user;
   const skipBindWallet = method.type === "stripe";
   const handleConnected = async () => {
     try {
@@ -199,33 +232,9 @@ export default function PaymentForm({
     const { data: profile } = await api.get("/api/customers/me?fallback=1");
     if (profile) {
       const values = getValues();
-      if (!values.customer_name) {
-        setValue("customer_name", profile.name);
-      }
-      if (!values.customer_email) {
-        setValue("customer_email", profile.email);
-      }
-      if (!values.customer_phone) {
-        setValue("customer_phone", profile.phone);
-      }
-      if (profile.address?.country) {
-        setValue("billing_address.country", profile.address.country);
-      }
-      if (profile.address?.state) {
-        setValue("billing_address.state", profile.address.state);
-      }
-      if (profile.address?.line1) {
-        setValue("billing_address.line1", profile.address.line1);
-      }
-      if (profile.address?.line2) {
-        setValue("billing_address.line2", profile.address.line2);
-      }
-      if (profile.address?.city) {
-        setValue("billing_address.city", profile.address.city);
-      }
-      if (profile.address?.postal_code) {
-        setValue("billing_address.postal_code", profile.address.postal_code);
-      }
+      setUserFormValues(profile, values, setValue, {
+        showPhone: checkoutSession.phone_number_collection?.enabled
+      });
     }
   };
   const onFormSubmit = async (data) => {
@@ -377,17 +386,32 @@ export default function PaymentForm({
         }
       ) }),
       state.customerLimited && /* @__PURE__ */ jsx(
-        ConfirmDialog,
+        OverdueInvoicePayment,
         {
-          onConfirm: () => window.open(
-            joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
-            "_self"
-          ),
-          onCancel: () => setState({ customerLimited: false }),
-          confirm: t("payment.customer.pastDue.alert.confirm"),
-          title: t("payment.customer.pastDue.alert.title"),
-          message: t("payment.customer.pastDue.alert.description"),
-          color: "primary"
+          customerId: customer?.id || session?.user?.did,
+          onPaid: () => {
+            setState({ customerLimited: false });
+            onAction();
+          },
+          alertMessage: t("payment.customer.pastDue.alert.customMessage"),
+          detailLinkOptions: {
+            enabled: true,
+            onClick: () => {
+              setState({ customerLimited: false });
+              window.open(
+                joinURL(
+                  getPrefix(),
+                  `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`
+                ),
+                "_self"
+              );
+            }
+          },
+          dialogProps: {
+            open: state.customerLimited,
+            onClose: () => setState({ customerLimited: false }),
+            title: t("payment.customer.pastDue.alert.title")
+          }
         }
       )
     ] });
@@ -528,17 +552,29 @@ export default function PaymentForm({
       ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.7875rem", lineHeight: "0.9625rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(
-      ConfirmDialog,
+      OverdueInvoicePayment,
       {
-        onConfirm: () => window.open(
-          joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
-          "_self"
-        ),
-        onCancel: () => setState({ customerLimited: false }),
-        confirm: t("payment.customer.pastDue.alert.confirm"),
-        title: t("payment.customer.pastDue.alert.title"),
-        message: t("payment.customer.pastDue.alert.description"),
-        color: "primary"
+        customerId: customer?.id || session?.user?.didssion?.user?.did,
+        onPaid: () => {
+          setState({ customerLimited: false });
+          onAction();
+        },
+        alertMessage: t("payment.customer.pastDue.alert.customMessage"),
+        detailLinkOptions: {
+          enabled: true,
+          onClick: () => {
+            setState({ customerLimited: false });
+            window.open(
+              joinURL(getPrefix(), `/customer/invoice/past-due?referer=${encodeURIComponent(window.location.href)}`),
+              "_self"
+            );
+          }
+        },
+        dialogProps: {
+          open: state.customerLimited,
+          onClose: () => setState({ customerLimited: false }),
+          title: t("payment.customer.pastDue.alert.title")
+        }
       }
     )
   ] });