@blocklet/payment-react 1.21.16 → 1.21.17

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

@@ -23,7 +23,8 @@ function StripeCheckoutForm({
   customer,
   mode,
   onConfirm,
-  returnUrl = ""
+  returnUrl = "",
+  submitButtonText = ""
 }) {
   const stripe = useStripe();
   const elements = useElements();
@@ -201,7 +202,7 @@ function StripeCheckoutForm({
         variant: "contained",
         color: "primary",
         size: "large",
-        children: t("payment.checkout.continue", { action: t(`payment.checkout.${mode}`) })
+        children: submitButtonText || t("payment.checkout.continue", { action: t(`payment.checkout.${mode}`) })
       }
     ),
     state.message && /* @__PURE__ */ jsx(Typography, { sx: { mt: 1, color: "error.main" }, children: state.message })
@@ -224,7 +225,9 @@ export default function StripeCheckout({
   customer,
   onConfirm,
   onCancel,
-  returnUrl = ""
+  returnUrl = "",
+  title = "",
+  submitButtonText = ""
 }) {
   const stripePromise = loadStripe(publicKey);
   const { isMobile } = useMobile();
@@ -244,7 +247,7 @@ export default function StripeCheckout({
   return /* @__PURE__ */ jsx(
     Dialog,
     {
-      title: t("payment.checkout.cardPay", { action: t(`payment.checkout.${mode}`) }),
+      title: title || t("payment.checkout.cardPay", { action: t(`payment.checkout.${mode}`) }),
       showCloseButton: state.closable,
       open: state.open,
       onClose: handleClose,
@@ -297,7 +300,8 @@ export default function StripeCheckout({
               mode,
               customer,
               onConfirm,
-              returnUrl
+              returnUrl,
+              submitButtonText
             }
           )
         }

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

@@ -20,6 +20,7 @@ var _util = require("../libs/util");
 var _subscription = require("../hooks/subscription");
 var _api = _interopRequireDefault(require("../libs/api"));
 var _loadingButton = _interopRequireDefault(require("./loading-button"));
+var _stripePaymentAction = _interopRequireDefault(require("./stripe-payment-action"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const fetchOverdueInvoices = async params => {
   if (!params.subscriptionId && !params.customerId) {
@@ -64,10 +65,15 @@ function OverdueInvoicePayment({
   const [dialogOpen, setDialogOpen] = (0, _react.useState)(dialogProps.open || false);
   const [processedCurrencies, setProcessedCurrencies] = (0, _react.useState)({});
   const [paymentStatus, setPaymentStatus] = (0, _react.useState)({});
+  const [stripePaymentInProgress, setStripePaymentInProgress] = (0, _react.useState)({});
+  const stripePaymentInProgressRef = (0, _react.useRef)(stripePaymentInProgress);
   const sourceType = subscriptionId ? "subscription" : "customer";
   const effectiveCustomerId = customerId || session?.user?.did;
   const sourceId = subscriptionId || effectiveCustomerId;
   const customerIdRef = (0, _react.useRef)(effectiveCustomerId);
+  (0, _react.useEffect)(() => {
+    stripePaymentInProgressRef.current = stripePaymentInProgress;
+  }, [stripePaymentInProgress]);
   const {
     data = {
       summary: {},
@@ -104,6 +110,33 @@ function OverdueInvoicePayment({
     return Object.values(data.summary);
   }, [data?.summary]);
   const debouncedHandleInvoicePaid = (0, _debounce.default)(async currencyId => {
+    if (stripePaymentInProgressRef.current[currencyId]) {
+      try {
+        const checkData = await fetchOverdueInvoices({
+          subscriptionId,
+          customerId: effectiveCustomerId,
+          authToken
+        });
+        const hasRemainingInvoices = checkData.invoices?.some(inv => inv.currency_id === currencyId);
+        if (hasRemainingInvoices) {
+          return;
+        }
+        setStripePaymentInProgress(prev => {
+          const newState = {
+            ...prev
+          };
+          delete newState[currencyId];
+          return newState;
+        });
+        setPaymentStatus(prev => ({
+          ...prev,
+          [currencyId]: "success"
+        }));
+      } catch (err) {
+        console.error("Error checking Stripe payment completion:", err);
+        return;
+      }
+    }
     if (successToast) {
       _Toast.default.close();
       _Toast.default.success(t("payment.customer.invoice.paySuccess"));
@@ -133,7 +166,7 @@ function OverdueInvoicePayment({
     });
     return isPaid;
   };
-  const handleConnected = async () => {
+  const handleConnected = async (currencyId, isStripe = false) => {
     if (isCrossOriginRequest) {
       try {
         const paid = await waitForInvoiceAllPaid();
@@ -143,31 +176,45 @@ function OverdueInvoicePayment({
         }
         if (paid) {
           setDialogOpen(false);
-          onPaid(sourceId, selectCurrencyId, sourceType);
+          onPaid(sourceId, currencyId, sourceType);
         }
       } catch (err) {
         console.error("Check payment status failed:", err);
       }
+    } else if (isStripe) {
+      setStripePaymentInProgress(prev => ({
+        ...prev,
+        [currencyId]: true
+      }));
+      setPaymentStatus(prev => ({
+        ...prev,
+        [currencyId]: "processing"
+      }));
     }
   };
   (0, _react.useEffect)(() => {
-    if (subscription && !isCrossOriginRequest) {
-      subscription.on("invoice.paid", ({
-        response
-      }) => {
-        const relevantId = subscriptionId || response.customer_id;
-        const uniqueKey = `${relevantId}-${response.currency_id}`;
-        if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && effectiveCustomerId === response.customer_id || customerIdRef.current && customerIdRef.current === response.customer_id) {
-          if (!processedCurrencies[uniqueKey]) {
-            setProcessedCurrencies(prev => ({
-              ...prev,
-              [uniqueKey]: 1
-            }));
-            debouncedHandleInvoicePaid(response.currency_id);
-          }
-        }
-      });
+    if (!subscription || isCrossOriginRequest) {
+      return void 0;
     }
+    const handleInvoicePaid = ({
+      response
+    }) => {
+      const relevantId = subscriptionId || response.customer_id;
+      const uniqueKey = `${relevantId}-${response.currency_id}`;
+      if (subscriptionId && response.subscription_id === subscriptionId || effectiveCustomerId && effectiveCustomerId === response.customer_id || customerIdRef.current && customerIdRef.current === response.customer_id) {
+        if (!processedCurrencies[uniqueKey]) {
+          setProcessedCurrencies(prev => ({
+            ...prev,
+            [uniqueKey]: 1
+          }));
+          debouncedHandleInvoicePaid(response.currency_id);
+        }
+      }
+    };
+    subscription.on("invoice.paid", handleInvoicePaid);
+    return () => {
+      subscription.off("invoice.paid", handleInvoicePaid);
+    };
   }, [subscription, subscriptionId, effectiveCustomerId]);
   const handlePay = item => {
     const {
@@ -211,7 +258,7 @@ function OverdueInvoicePayment({
         },
         onSuccess: () => {
           connect.close();
-          handleConnected();
+          handleConnected(currency.id);
           setPayLoading(false);
           setPaymentStatus(prev => ({
             ...prev,
@@ -258,7 +305,7 @@ function OverdueInvoicePayment({
     }
     return t("payment.customer.pastDue.view");
   };
-  const renderPayButton = (item, primaryButton = true, props = {
+  const renderPayButton = (item, primaryButton = true, options = {
     variant: "contained"
   }) => {
     const {
@@ -268,7 +315,7 @@ function OverdueInvoicePayment({
     const status = paymentStatus[currency.id] || "idle";
     if (status === "success") {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        variant: props?.variant || "contained",
+        variant: options?.variant || "contained",
         size: "small",
         ...(primaryButton ? {} : {
           color: "success",
@@ -279,29 +326,50 @@ function OverdueInvoicePayment({
     }
     if (status === "error") {
       return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-        variant: "contained",
+        variant: options?.variant || "contained",
         size: "small",
         onClick: () => handlePay(item),
-        ...props,
+        sx: options?.sx,
         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(detailUrl, "_blank"),
-        ...props,
-        children: t("payment.subscription.overdue.viewNow")
+      return /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripePaymentAction.default, {
+        subscriptionId,
+        customerId: !subscriptionId ? effectiveCustomerId : void 0,
+        currencyId: currency.id,
+        paymentMethod: item.method,
+        onSuccess: () => {
+          handleConnected(currency.id, true);
+        },
+        onError: () => {
+          setPaymentStatus(prev => ({
+            ...prev,
+            [currency.id]: "error"
+          }));
+          setStripePaymentInProgress(prev => ({
+            ...prev,
+            [currency.id]: false
+          }));
+        },
+        children: (onPay, paying) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
+          variant: options?.variant || "contained",
+          size: "small",
+          disabled: paying || status === "processing",
+          loading: paying || status === "processing",
+          onClick: onPay,
+          sx: options?.sx,
+          children: status === "processing" ? t("payment.subscription.overdue.processing") : t("payment.subscription.overdue.payNow")
+        })
       });
     }
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_loadingButton.default, {
-      variant: "contained",
+      variant: options?.variant || "contained",
       size: "small",
       disabled: inProcess,
       loading: inProcess,
       onClick: () => handlePay(item),
-      ...props,
+      sx: options?.sx,
       children: t("payment.subscription.overdue.payNow")
     });
   };

package/lib/components/payment-beneficiaries.js

@@ -17,7 +17,8 @@ function PaymentBeneficiaries({
   totalAmount = "0"
 }) {
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
     spacing: 2,
@@ -66,7 +67,7 @@ function PaymentBeneficiaries({
               variant: "subtitle2",
               onClick: () => {
                 if (item.url) {
-                  window.open(item.url, "_blank");
+                  window.open((0, _util2.formatLinkWithLocale)(item.url, locale), "_blank");
                 }
               },
               sx: {

package/lib/components/stripe-payment-action.d.ts

@@ -0,0 +1,16 @@
+import type { TPaymentMethod, TInvoiceExpanded } from '@blocklet/payment-types';
+export interface StripePaymentActionProps {
+    invoice?: TInvoiceExpanded;
+    invoiceIds?: string[];
+    subscriptionId?: string;
+    customerId?: string;
+    currencyId?: string;
+    paymentMethod?: TPaymentMethod;
+    autoTrigger?: boolean;
+    onExternalPayment?: (invoiceId?: string) => void;
+    onSuccess?: () => void;
+    onError?: (error: Error) => void;
+    onClose?: () => void;
+    children?: (onPay: () => void, loading: boolean) => React.ReactNode;
+}
+export default function StripePaymentAction(props: StripePaymentActionProps): import("react").JSX.Element;

package/lib/components/stripe-payment-action.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = StripePaymentAction;
+var _jsxRuntime = require("react/jsx-runtime");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
+var _ux = require("@arcblock/ux");
+var _material = require("@mui/material");
+var _ahooks = require("ahooks");
+var _react = require("react");
+var _stripe = _interopRequireDefault(require("../payment/form/stripe"));
+var _api = _interopRequireDefault(require("../libs/api"));
+var _util = require("../libs/util");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function StripePaymentAction(props) {
+  const {
+    invoice,
+    invoiceIds,
+    subscriptionId,
+    customerId,
+    currencyId,
+    paymentMethod,
+    autoTrigger = false,
+    onExternalPayment,
+    onSuccess,
+    onError,
+    onClose,
+    children
+  } = props;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const [state, setState] = (0, _ahooks.useSetState)({
+    paying: false,
+    confirmDialog: false,
+    stripeDialog: false,
+    clientSecret: null,
+    publishableKey: null,
+    customer: null
+  });
+  const autoTriggerRef = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    if (autoTrigger && !autoTriggerRef.current) {
+      autoTriggerRef.current = true;
+      handlePay();
+    }
+  }, [autoTrigger]);
+  const handlePay = async () => {
+    if (state.paying) {
+      return;
+    }
+    const hasSubscription = !!(subscriptionId || invoice?.subscription_id);
+    const method = paymentMethod || invoice?.paymentMethod;
+    const shouldShowConfirm = hasSubscription && method?.type === "stripe";
+    if (shouldShowConfirm) {
+      setState({
+        confirmDialog: true
+      });
+      return;
+    }
+    await proceedWithPayment();
+  };
+  const proceedWithPayment = async () => {
+    setState({
+      paying: true,
+      confirmDialog: false
+    });
+    const derivedCurrencyId = currencyId || invoice?.currency_id || invoice?.paymentCurrency?.id;
+    const derivedPaymentMethod = paymentMethod || invoice?.paymentMethod;
+    const isStripePayment = derivedPaymentMethod?.type === "stripe";
+    if (isStripePayment && derivedCurrencyId) {
+      const stripePayload = {};
+      if (invoiceIds && invoiceIds.length > 0) {
+        stripePayload.invoice_ids = invoiceIds;
+      } else if (invoice) {
+        stripePayload.invoice_ids = [invoice.id];
+      } else if (subscriptionId) {
+        stripePayload.subscription_id = subscriptionId;
+      } else if (customerId) {
+        stripePayload.customer_id = customerId;
+      }
+      if (derivedCurrencyId) {
+        stripePayload.currency_id = derivedCurrencyId;
+      }
+      try {
+        const {
+          data: paymentData
+        } = await _api.default.post("/api/invoices/pay-stripe", stripePayload);
+        setState({
+          paying: false,
+          stripeDialog: true,
+          clientSecret: paymentData.client_secret,
+          publishableKey: paymentData.publishable_key,
+          customer: paymentData.customer || null
+        });
+        return;
+      } catch (err) {
+        const error = (0, _util.formatError)(err);
+        _Toast.default.error(error);
+        setState({
+          paying: false
+        });
+        onError?.(error);
+        return;
+      }
+    }
+    setState({
+      paying: false
+    });
+    if (onExternalPayment) {
+      onExternalPayment(invoice?.id);
+      return;
+    }
+    _Toast.default.error(t("payment.customer.invoice.payError"));
+    onError?.(new Error("EXTERNAL_PAYMENT_HANDLER_NOT_PROVIDED"));
+  };
+  const handleConfirmCancel = () => {
+    setState({
+      confirmDialog: false,
+      paying: false
+    });
+    onClose?.();
+  };
+  const handleStripeConfirm = () => {
+    _Toast.default.success(t("payment.customer.invoice.payProcessing"));
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null
+    });
+    setTimeout(() => {
+      onSuccess?.();
+    }, 2e3);
+  };
+  const handleStripeCancel = () => {
+    setState({
+      paying: false,
+      stripeDialog: false,
+      clientSecret: null,
+      publishableKey: null,
+      customer: null
+    });
+    onClose?.();
+  };
+  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [children?.(handlePay, state.paying), state.confirmDialog && /* @__PURE__ */(0, _jsxRuntime.jsx)(_ux.Dialog, {
+      open: state.confirmDialog,
+      title: t("payment.customer.invoice.paymentConfirmTitle"),
+      onClose: handleConfirmCancel,
+      maxWidth: "sm",
+      PaperProps: {
+        style: {
+          minHeight: 0
+        }
+      },
+      actions: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "outlined",
+        onClick: handleConfirmCancel,
+        children: t("common.cancel")
+      }, "cancel"), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+        variant: "contained",
+        onClick: proceedWithPayment,
+        children: t("payment.customer.invoice.continue")
+      }, "continue")],
+      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+        variant: "body1",
+        sx: {
+          color: "text.secondary",
+          mt: -2
+        },
+        children: t("payment.customer.invoice.paymentConfirmDescription")
+      })
+    }), state.stripeDialog && state.clientSecret && state.publishableKey && state.customer && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
+      clientSecret: state.clientSecret,
+      intentType: "setup_intent",
+      publicKey: state.publishableKey,
+      customer: state.customer,
+      mode: "setup",
+      title: t("payment.customer.invoice.pay"),
+      submitButtonText: t("common.submit"),
+      onConfirm: handleStripeConfirm,
+      onCancel: handleStripeCancel,
+      returnUrl: window.location.href
+    })]
+  });
+}

package/lib/history/invoice/list.js

@@ -18,6 +18,7 @@ var _status = _interopRequireDefault(require("../../components/status"));
 var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
+var _stripePaymentAction = _interopRequireDefault(require("../../components/stripe-payment-action"));
 var _util = require("../../libs/util");
 var _table = _interopRequireDefault(require("../../components/table"));
 var _navigation = require("../../libs/navigation");
@@ -282,15 +283,41 @@ const InvoiceTable = _react.default.memo(props => {
         } = getInvoiceLink(invoice, action);
         const isVoid = invoice.status === "void";
         if (action && !hidePay) {
-          return connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
-            variant: "text",
-            size: "small",
-            onClick: () => onPay(invoice.id),
-            sx: {
-              color: "text.link"
-            },
-            children: t("payment.customer.invoice.pay")
-          }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+          if (connect) {
+            if (invoice.paymentMethod?.type === "stripe") {
+              return /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripePaymentAction.default, {
+                invoice,
+                paymentMethod: invoice.paymentMethod,
+                onSuccess: () => {
+                  refresh();
+                },
+                children: (handlePay, paying) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                  variant: "text",
+                  size: "small",
+                  sx: {
+                    color: "text.link"
+                  },
+                  disabled: paying,
+                  onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handlePay();
+                  },
+                  children: paying ? t("payment.checkout.processing") : t("payment.customer.invoice.pay")
+                })
+              });
+            }
+            return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+              variant: "text",
+              size: "small",
+              onClick: () => onPay(invoice.id),
+              sx: {
+                color: "text.link"
+              },
+              children: t("payment.customer.invoice.pay")
+            });
+          }
+          return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
             component: "a",
             variant: "text",
             size: "small",
@@ -580,7 +607,28 @@ const InvoiceList = _react.default.memo(props => {
               flex: 1,
               textAlign: "right"
             },
-            children: action ? connect ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+            children: action ? connect ? invoice.paymentMethod?.type === "stripe" ? /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripePaymentAction.default, {
+              invoice,
+              paymentMethod: invoice.paymentMethod,
+              onSuccess: async () => {
+                await reloadAsync();
+              },
+              children: (handlePay, paying) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
+                variant: "contained",
+                color: "primary",
+                size: "small",
+                sx: {
+                  whiteSpace: "nowrap"
+                },
+                disabled: paying,
+                onClick: e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handlePay();
+                },
+                children: paying ? t("payment.checkout.processing") : t("payment.customer.invoice.pay")
+              })
+            }) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
               variant: "contained",
               color: "primary",
               size: "small",

package/lib/index.d.ts

@@ -32,6 +32,7 @@ import TruncatedText from './components/truncated-text';
 import Link from './components/link';
 import { createLazyComponent } from './components/lazy-loader';
 import OverdueInvoicePayment from './components/over-due-invoice-payment';
+import StripePaymentAction from './components/stripe-payment-action';
 import PaymentBeneficiaries from './components/payment-beneficiaries';
 import LoadingButton from './components/loading-button';
 import ResumeSubscription from './components/resume-subscription';
@@ -55,5 +56,6 @@ export * from './hooks/scroll';
 export * from './hooks/keyboard';
 export * from './libs/validator';
 export { translations, createTranslator } from './locales';
-export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };
+export { createLazyComponent, api, dayjs, FormInput, FormLabel, PhoneInput, AddressForm, StripeForm, Status, Livemode, Switch, ConfirmDialog, CheckoutForm, CheckoutTable, CheckoutDonate, CurrencySelector, Payment, PaymentSummary, PricingTable, ProductSkeleton, Amount, CustomerInvoiceList, CustomerPaymentList, TxLink, TxGas, SafeGuard, PricingItem, CountrySelect, Table, TruncatedText, Link, OverdueInvoicePayment, StripePaymentAction, PaymentBeneficiaries, LoadingButton, DonateDetails, ResumeSubscription, CreditGrantsList, CreditTransactionsList, DateRangePicker, CreditStatusChip, AutoTopupModal, AutoTopup, Collapse, PromotionCode, SourceDataViewer, };
 export type { CountrySelectProps } from './components/country-select';
+export type { StripePaymentActionProps } from './components/stripe-payment-action';

package/lib/index.js

@@ -40,6 +40,7 @@ var _exportNames = {
   Link: true,
   createLazyComponent: true,
   OverdueInvoicePayment: true,
+  StripePaymentAction: true,
   PaymentBeneficiaries: true,
   LoadingButton: true,
   ResumeSubscription: true,
@@ -281,6 +282,12 @@ Object.defineProperty(exports, "StripeForm", {
     return _stripe.default;
   }
 });
+Object.defineProperty(exports, "StripePaymentAction", {
+  enumerable: true,
+  get: function () {
+    return _stripePaymentAction.default;
+  }
+});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () {
@@ -375,6 +382,7 @@ var _truncatedText = _interopRequireDefault(require("./components/truncated-text
 var _link = _interopRequireDefault(require("./components/link"));
 var _lazyLoader = require("./components/lazy-loader");
 var _overDueInvoicePayment = _interopRequireDefault(require("./components/over-due-invoice-payment"));
+var _stripePaymentAction = _interopRequireDefault(require("./components/stripe-payment-action"));
 var _paymentBeneficiaries = _interopRequireDefault(require("./components/payment-beneficiaries"));
 var _loadingButton = _interopRequireDefault(require("./components/loading-button"));
 var _resumeSubscription = _interopRequireDefault(require("./components/resume-subscription"));

package/lib/libs/util.d.ts

@@ -135,3 +135,4 @@ export declare function parseMarkedText(text: string): Array<{
 export declare function getTokenBalanceLink(method: TPaymentMethod, address: string): string;
 export declare function isCreditMetered(price: TPrice): boolean;
 export declare function showStaking(method: TPaymentMethod, currency: TPaymentCurrency, noStake: boolean): boolean;
+export declare function formatLinkWithLocale(url: string, locale?: string): string;

package/lib/libs/util.js

@@ -14,6 +14,7 @@ exports.formatCouponTerms = void 0;
 exports.formatDateTime = formatDateTime;
 exports.formatError = void 0;
 exports.formatLineItemPricing = formatLineItemPricing;
+exports.formatLinkWithLocale = formatLinkWithLocale;
 exports.formatLocale = void 0;
 exports.formatMeteredThen = formatMeteredThen;
 exports.formatNumber = formatNumber;
@@ -1278,4 +1279,20 @@ function showStaking(method, currency, noStake) {
     return currency.type !== "credit";
   }
   return false;
+}
+function formatLinkWithLocale(url, locale) {
+  if (!locale || !url) {
+    return url;
+  }
+  try {
+    const urlObj = new URL(url);
+    urlObj.searchParams.set("locale", locale);
+    return urlObj.toString();
+  } catch (error) {
+    if (/[?&]locale=[^&]*/.test(url)) {
+      return url.replace(/([?&])locale=[^&]*/, `$1locale=${locale}`);
+    }
+    const separator = url.includes("?") ? "&" : "?";
+    return `${url}${separator}locale=${locale}`;
+  }
 }