@solvapay/react 1.0.0-preview.18 → 1.0.0-preview.19

package/dist/index.cjs

@@ -56,8 +56,7 @@ function getActiveSubscriptions(subscriptions) {
 function getCancelledSubscriptionsWithEndDate(subscriptions) {
   const now = /* @__PURE__ */ new Date();
   return subscriptions.filter((sub) => {
-    const subAny = sub;
-    return sub.status === "active" && subAny.cancelledAt && subAny.endDate && new Date(subAny.endDate) > now;
+    return sub.status === "active" && sub.cancelledAt && sub.endDate && new Date(sub.endDate) > now;
   });
 }
 function getMostRecentSubscription(subscriptions) {
@@ -177,7 +176,9 @@ var SolvaPayProvider = ({
   const createPaymentRef = (0, import_react.useRef)(null);
   const processPaymentRef = (0, import_react.useRef)(null);
   const configRef = (0, import_react.useRef)(config);
-  const buildDefaultCheckSubscriptionRef = (0, import_react.useRef)(null);
+  const buildDefaultCheckSubscriptionRef = (0, import_react.useRef)(
+    null
+  );
   (0, import_react.useEffect)(() => {
     configRef.current = config;
   }, [config]);
@@ -225,77 +226,83 @@ var SolvaPayProvider = ({
   (0, import_react.useEffect)(() => {
     buildDefaultCheckSubscriptionRef.current = buildDefaultCheckSubscription;
   }, [buildDefaultCheckSubscription]);
-  const buildDefaultCreatePayment = (0, import_react.useCallback)(async (params) => {
-    const currentConfig = configRef.current;
-    const adapter = getAuthAdapter(currentConfig);
-    const token = await adapter.getToken();
-    const detectedUserId = await adapter.getUserId();
-    const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const cachedRef = getCachedCustomerRef(detectedUserId);
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (token) {
-      headers["Authorization"] = `Bearer ${token}`;
-    }
-    if (cachedRef) {
-      headers["x-solvapay-customer-ref"] = cachedRef;
-    }
-    if (currentConfig?.headers) {
-      const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-      Object.assign(headers, customHeaders);
-    }
-    const body = { planRef: params.planRef };
-    if (params.agentRef) {
-      body.agentRef = params.agentRef;
-    }
-    const res = await fetchFn(route, {
-      method: "POST",
-      headers,
-      body: JSON.stringify(body)
-    });
-    if (!res.ok) {
-      const error = new Error(`Failed to create payment: ${res.statusText}`);
-      currentConfig?.onError?.(error, "createPayment");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  const buildDefaultProcessPayment = (0, import_react.useCallback)(async (params) => {
-    const currentConfig = configRef.current;
-    const adapter = getAuthAdapter(currentConfig);
-    const token = await adapter.getToken();
-    const detectedUserId = await adapter.getUserId();
-    const route = currentConfig?.api?.processPayment || "/api/process-payment";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const cachedRef = getCachedCustomerRef(detectedUserId);
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (token) {
-      headers["Authorization"] = `Bearer ${token}`;
-    }
-    if (cachedRef) {
-      headers["x-solvapay-customer-ref"] = cachedRef;
-    }
-    if (currentConfig?.headers) {
-      const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-      Object.assign(headers, customHeaders);
-    }
-    const res = await fetchFn(route, {
-      method: "POST",
-      headers,
-      body: JSON.stringify(params)
-    });
-    if (!res.ok) {
-      const error = new Error(`Failed to process payment: ${res.statusText}`);
-      currentConfig?.onError?.(error, "processPayment");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  const checkSubscription = (0, import_react.useCallback)(async () => {
+  const buildDefaultCreatePayment = (0, import_react.useCallback)(
+    async (params) => {
+      const currentConfig = configRef.current;
+      const adapter = getAuthAdapter(currentConfig);
+      const token = await adapter.getToken();
+      const detectedUserId = await adapter.getUserId();
+      const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
+      const fetchFn = currentConfig?.fetch || fetch;
+      const cachedRef = getCachedCustomerRef(detectedUserId);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+      if (cachedRef) {
+        headers["x-solvapay-customer-ref"] = cachedRef;
+      }
+      if (currentConfig?.headers) {
+        const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
+        Object.assign(headers, customHeaders);
+      }
+      const body = { planRef: params.planRef };
+      if (params.agentRef) {
+        body.agentRef = params.agentRef;
+      }
+      const res = await fetchFn(route, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const error = new Error(`Failed to create payment: ${res.statusText}`);
+        currentConfig?.onError?.(error, "createPayment");
+        throw error;
+      }
+      return res.json();
+    },
+    []
+  );
+  const buildDefaultProcessPayment = (0, import_react.useCallback)(
+    async (params) => {
+      const currentConfig = configRef.current;
+      const adapter = getAuthAdapter(currentConfig);
+      const token = await adapter.getToken();
+      const detectedUserId = await adapter.getUserId();
+      const route = currentConfig?.api?.processPayment || "/api/process-payment";
+      const fetchFn = currentConfig?.fetch || fetch;
+      const cachedRef = getCachedCustomerRef(detectedUserId);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
+      if (cachedRef) {
+        headers["x-solvapay-customer-ref"] = cachedRef;
+      }
+      if (currentConfig?.headers) {
+        const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
+        Object.assign(headers, customHeaders);
+      }
+      const res = await fetchFn(route, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(params)
+      });
+      if (!res.ok) {
+        const error = new Error(`Failed to process payment: ${res.statusText}`);
+        currentConfig?.onError?.(error, "processPayment");
+        throw error;
+      }
+      return res.json();
+    },
+    []
+  );
+  const _checkSubscription = (0, import_react.useCallback)(async () => {
     if (checkSubscriptionRef.current) {
       return checkSubscriptionRef.current();
     }
@@ -303,19 +310,25 @@ var SolvaPayProvider = ({
       return buildDefaultCheckSubscriptionRef.current();
     }
     return buildDefaultCheckSubscription();
-  }, []);
-  const createPayment = (0, import_react.useCallback)(async (params) => {
-    if (createPaymentRef.current) {
-      return createPaymentRef.current(params);
-    }
-    return buildDefaultCreatePayment(params);
-  }, [buildDefaultCreatePayment]);
-  const processPayment = (0, import_react.useCallback)(async (params) => {
-    if (processPaymentRef.current) {
-      return processPaymentRef.current(params);
-    }
-    return buildDefaultProcessPayment(params);
-  }, [buildDefaultProcessPayment]);
+  }, [buildDefaultCheckSubscription]);
+  const createPayment = (0, import_react.useCallback)(
+    async (params) => {
+      if (createPaymentRef.current) {
+        return createPaymentRef.current(params);
+      }
+      return buildDefaultCreatePayment(params);
+    },
+    [buildDefaultCreatePayment]
+  );
+  const processPayment = (0, import_react.useCallback)(
+    async (params) => {
+      if (processPaymentRef.current) {
+        return processPaymentRef.current(params);
+      }
+      return buildDefaultProcessPayment(params);
+    },
+    [buildDefaultProcessPayment]
+  );
   (0, import_react.useEffect)(() => {
     const detectAuth = async () => {
       const currentConfig = configRef.current;
@@ -344,58 +357,61 @@ var SolvaPayProvider = ({
     const interval = setInterval(detectAuth, 5e3);
     return () => clearInterval(interval);
   }, [userId]);
-  const fetchSubscription = (0, import_react.useCallback)(async (force = false) => {
-    if (!isAuthenticated && !internalCustomerRef) {
-      setSubscriptionData({ subscriptions: [] });
-      setLoading(false);
-      inFlightRef.current = null;
-      lastFetchedRef.current = null;
-      return;
-    }
-    const cacheKey = internalCustomerRef || userId || "anonymous";
-    if (!force && lastFetchedRef.current === cacheKey && inFlightRef.current !== cacheKey) {
-      return;
-    }
-    if (inFlightRef.current === cacheKey) {
-      return;
-    }
-    inFlightRef.current = cacheKey;
-    setLoading(true);
-    try {
-      const checkFn = checkSubscriptionRef.current || buildDefaultCheckSubscriptionRef.current;
-      if (!checkFn) {
-        throw new Error("checkSubscription function not available");
-      }
-      const data = await checkFn();
-      if (data.customerRef) {
-        setInternalCustomerRef(data.customerRef);
-        const currentAdapter = getAuthAdapter(configRef.current);
-        const currentUserId = await currentAdapter.getUserId();
-        setCachedCustomerRef(data.customerRef, currentUserId);
+  const fetchSubscription = (0, import_react.useCallback)(
+    async (force = false) => {
+      if (!isAuthenticated && !internalCustomerRef) {
+        setSubscriptionData({ subscriptions: [] });
+        setLoading(false);
+        inFlightRef.current = null;
+        lastFetchedRef.current = null;
+        return;
       }
-      if (inFlightRef.current === cacheKey) {
-        const filteredData = {
-          ...data,
-          subscriptions: filterSubscriptions(data.subscriptions || [])
-        };
-        setSubscriptionData(filteredData);
-        lastFetchedRef.current = cacheKey;
+      const cacheKey = internalCustomerRef || userId || "anonymous";
+      if (!force && lastFetchedRef.current === cacheKey && inFlightRef.current !== cacheKey) {
+        return;
       }
-    } catch (error) {
-      console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
       if (inFlightRef.current === cacheKey) {
-        setSubscriptionData({
-          subscriptions: []
-        });
-        lastFetchedRef.current = cacheKey;
+        return;
       }
-    } finally {
-      if (inFlightRef.current === cacheKey) {
-        setLoading(false);
-        inFlightRef.current = null;
+      inFlightRef.current = cacheKey;
+      setLoading(true);
+      try {
+        const checkFn = checkSubscriptionRef.current || buildDefaultCheckSubscriptionRef.current;
+        if (!checkFn) {
+          throw new Error("checkSubscription function not available");
+        }
+        const data = await checkFn();
+        if (data.customerRef) {
+          setInternalCustomerRef(data.customerRef);
+          const currentAdapter = getAuthAdapter(configRef.current);
+          const currentUserId = await currentAdapter.getUserId();
+          setCachedCustomerRef(data.customerRef, currentUserId);
+        }
+        if (inFlightRef.current === cacheKey) {
+          const filteredData = {
+            ...data,
+            subscriptions: filterSubscriptions(data.subscriptions || [])
+          };
+          setSubscriptionData(filteredData);
+          lastFetchedRef.current = cacheKey;
+        }
+      } catch (error) {
+        console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
+        if (inFlightRef.current === cacheKey) {
+          setSubscriptionData({
+            subscriptions: []
+          });
+          lastFetchedRef.current = cacheKey;
+        }
+      } finally {
+        if (inFlightRef.current === cacheKey) {
+          setLoading(false);
+          inFlightRef.current = null;
+        }
       }
-    }
-  }, [isAuthenticated, internalCustomerRef, userId]);
+    },
+    [isAuthenticated, internalCustomerRef, userId]
+  );
   const fetchSubscriptionRef = (0, import_react.useRef)(fetchSubscription);
   (0, import_react.useEffect)(() => {
     fetchSubscriptionRef.current = fetchSubscription;
@@ -416,17 +432,22 @@ var SolvaPayProvider = ({
       setLoading(false);
     }
   }, [isAuthenticated, internalCustomerRef, userId]);
-  const updateCustomerRef = (0, import_react.useCallback)((newCustomerRef) => {
-    setInternalCustomerRef(newCustomerRef);
-    setCachedCustomerRef(newCustomerRef, userId);
-    fetchSubscription(true);
-  }, [fetchSubscription, userId]);
+  const updateCustomerRef = (0, import_react.useCallback)(
+    (newCustomerRef) => {
+      setInternalCustomerRef(newCustomerRef);
+      setCachedCustomerRef(newCustomerRef, userId);
+      fetchSubscription(true);
+    },
+    [fetchSubscription, userId]
+  );
   const subscription = (0, import_react.useMemo)(() => {
     const activeSubscription = getPrimarySubscription(subscriptionData.subscriptions);
     const activePaidSubscriptions = subscriptionData.subscriptions.filter(
       (sub) => sub.status === "active" && isPaidSubscription(sub)
     );
-    const activePaidSubscription = activePaidSubscriptions.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0] || null;
+    const activePaidSubscription = activePaidSubscriptions.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
     return {
       loading,
       customerRef: subscriptionData.customerRef || internalCustomerRef,
@@ -443,14 +464,25 @@ var SolvaPayProvider = ({
       activePaidSubscription
     };
   }, [loading, subscriptionData, internalCustomerRef]);
-  const contextValue = (0, import_react.useMemo)(() => ({
-    subscription,
-    refetchSubscription,
-    createPayment,
-    processPayment,
-    customerRef: subscriptionData.customerRef || internalCustomerRef,
-    updateCustomerRef
-  }), [subscription, refetchSubscription, createPayment, processPayment, subscriptionData.customerRef, internalCustomerRef, updateCustomerRef]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      subscription,
+      refetchSubscription,
+      createPayment,
+      processPayment,
+      customerRef: subscriptionData.customerRef || internalCustomerRef,
+      updateCustomerRef
+    }),
+    [
+      subscription,
+      refetchSubscription,
+      createPayment,
+      processPayment,
+      subscriptionData.customerRef,
+      internalCustomerRef,
+      updateCustomerRef
+    ]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SolvaPayContext.Provider, { value: contextValue, children });
 };
 
@@ -556,17 +588,6 @@ function useSubscription() {
   };
 }
 
-// src/hooks/useCustomer.ts
-function useCustomer() {
-  const { subscription, customerRef } = useSolvaPay();
-  return {
-    customerRef: subscription.customerRef || customerRef,
-    email: subscription.email,
-    name: subscription.name,
-    loading: subscription.loading
-  };
-}
-
 // src/components/Spinner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Spinner = ({
@@ -588,17 +609,7 @@ var Spinner = ({
       role: "status",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "circle",
-          {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "path",
           {
@@ -615,11 +626,24 @@ var Spinner = ({
 // src/components/StripePaymentFormWrapper.tsx
 var import_react4 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
+
+// src/hooks/useCustomer.ts
+function useCustomer() {
+  const { subscription, customerRef } = useSolvaPay();
+  return {
+    customerRef: subscription.customerRef || customerRef,
+    email: subscription.email,
+    name: subscription.name,
+    loading: subscription.loading
+  };
+}
+
+// src/components/StripePaymentFormWrapper.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
-  returnUrl,
+  returnUrl: _returnUrl,
   submitButtonText = "Pay Now",
   buttonClassName,
   clientSecret
@@ -744,16 +768,23 @@ var StripePaymentFormWrapper = ({
           }
         }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: "12px", border: "1px solid #cbd5e1", borderRadius: "0.375rem", backgroundColor: "white", display: "flex", alignItems: "center", justifyContent: "center", minHeight: "40px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" }) }),
-    message && !isSuccess && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
-        role: "alert",
-        "aria-live": "assertive",
-        "aria-atomic": "true",
-        children: message
+        style: {
+          padding: "12px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "0.375rem",
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "40px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" })
       }
     ),
+    message && !isSuccess && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
@@ -785,106 +816,118 @@ var PaymentForm = ({
   buttonClassName
 }) => {
   const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
-  const checkout = useCheckout(validPlanRef, agentRef);
+  const {
+    loading: checkoutLoading,
+    error: checkoutError,
+    clientSecret,
+    startCheckout,
+    stripePromise
+  } = useCheckout(validPlanRef, agentRef);
   const { refetch } = useSubscription();
-  const { processPayment, customerRef } = useSolvaPay();
-  const customer = useCustomer();
+  const { processPayment } = useSolvaPay();
   const hasInitializedRef = (0, import_react5.useRef)(false);
   (0, import_react5.useEffect)(() => {
-    if (!hasInitializedRef.current && validPlanRef && !checkout.loading && !checkout.error && !checkout.clientSecret) {
+    if (!hasInitializedRef.current && validPlanRef && !checkoutLoading && !checkoutError && !clientSecret) {
       hasInitializedRef.current = true;
-      checkout.startCheckout().catch(() => {
+      startCheckout().catch(() => {
         hasInitializedRef.current = false;
       });
     }
-    if (validPlanRef && checkout.clientSecret) {
+    if (validPlanRef && clientSecret) {
       hasInitializedRef.current = true;
     }
-  }, [validPlanRef, checkout.loading, checkout.error, checkout.clientSecret, checkout.startCheckout]);
-  const handleSuccess = (0, import_react5.useCallback)(async (paymentIntent) => {
-    let processingTimeout = false;
-    let processingResult = null;
-    if (processPayment && agentRef) {
-      try {
-        const result = await processPayment({
-          paymentIntentId: paymentIntent.id,
-          agentRef,
-          planRef
-        });
-        processingResult = result;
-        const isTimeout = result?.status === "timeout";
-        processingTimeout = isTimeout;
-        if (isTimeout) {
-          for (let attempt = 1; attempt <= 5; attempt++) {
-            const delay = attempt * 1e3;
-            await new Promise((resolve) => setTimeout(resolve, delay));
+  }, [validPlanRef, checkoutLoading, checkoutError, clientSecret, startCheckout]);
+  const handleSuccess = (0, import_react5.useCallback)(
+    async (paymentIntent) => {
+      let processingTimeout = false;
+      let processingResult = null;
+      const paymentIntentAny = paymentIntent;
+      if (processPayment && agentRef) {
+        try {
+          const result = await processPayment({
+            paymentIntentId: paymentIntentAny.id,
+            agentRef,
+            planRef
+          });
+          processingResult = result;
+          const isTimeout = result?.status === "timeout";
+          processingTimeout = isTimeout;
+          if (isTimeout) {
+            for (let attempt = 1; attempt <= 5; attempt++) {
+              const delay = attempt * 1e3;
+              await new Promise((resolve) => setTimeout(resolve, delay));
+              await refetch();
+            }
+            if (onSuccess) {
+              await onSuccess({
+                ...paymentIntentAny,
+                _processingTimeout: processingTimeout,
+                _processingResult: processingResult
+              });
+            }
+            throw new Error("Payment processing timed out");
+          } else {
             await refetch();
           }
+        } catch (error) {
+          console.error("[PaymentForm] Failed to process payment:", error);
           if (onSuccess) {
-            await onSuccess({
-              ...paymentIntent,
-              _processingTimeout: processingTimeout,
-              _processingResult: processingResult
-            });
-          }
-          throw new Error("Payment processing timed out");
-        } else {
-          await refetch();
-        }
-      } catch (error) {
-        console.error("[PaymentForm] Failed to process payment:", error);
-        if (onSuccess) {
-          try {
-            await onSuccess({
-              ...paymentIntent,
-              _processingError: error
-            });
-          } catch (callbackError) {
+            try {
+              await onSuccess({
+                ...paymentIntentAny,
+                _processingError: error
+              });
+            } catch {
+            }
           }
+          throw error;
         }
-        throw error;
+      } else {
+        await refetch();
       }
-    } else {
-      await refetch();
-    }
-    if (onSuccess && !processingTimeout) {
-      await onSuccess({
-        ...paymentIntent,
-        _processingTimeout: processingTimeout,
-        _processingResult: processingResult
-      });
-    }
-  }, [processPayment, agentRef, planRef, refetch, onSuccess]);
-  const handleError = (0, import_react5.useCallback)((err) => {
-    if (onError) {
-      onError(err);
-    }
-  }, [onError]);
+      if (onSuccess && !processingTimeout) {
+        await onSuccess({
+          ...paymentIntentAny,
+          _processingTimeout: processingTimeout,
+          _processingResult: processingResult
+        });
+      }
+    },
+    [processPayment, agentRef, planRef, refetch, onSuccess]
+  );
+  const handleError = (0, import_react5.useCallback)(
+    (err) => {
+      if (onError) {
+        onError(err);
+      }
+    },
+    [onError]
+  );
   const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
   const isValidPlanRef = planRef && typeof planRef === "string";
-  const hasError = !!checkout.error;
-  const hasStripeData = !!(checkout.stripePromise && checkout.clientSecret);
+  const hasError = !!checkoutError;
+  const hasStripeData = !!(stripePromise && clientSecret);
   const elementsOptions = (0, import_react5.useMemo)(() => {
-    if (!checkout.clientSecret) return void 0;
-    return { clientSecret: checkout.clientSecret };
-  }, [checkout.clientSecret]);
+    if (!clientSecret) return void 0;
+    return { clientSecret };
+  }, [clientSecret]);
   const [hasMountedElements, setHasMountedElements] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
     if (hasStripeData) {
       setHasMountedElements(true);
     }
   }, [hasStripeData]);
-  const shouldRenderElements = hasStripeData || hasMountedElements && checkout.stripePromise && checkout.clientSecret;
+  const shouldRenderElements = hasStripeData || hasMountedElements && stripePromise && clientSecret;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: !isValidPlanRef ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "PaymentForm: planRef is required and must be a string" }) : hasError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: "Payment initialization failed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: checkout.error?.message || "Unknown error" })
-  ] }) : shouldRenderElements && checkout.stripePromise && elementsOptions ? (
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { children: checkoutError?.message || "Unknown error" })
+  ] }) : shouldRenderElements && elementsOptions ? (
     // Once we have Stripe data, always render Elements to maintain hook consistency
     // This prevents hook count mismatches when transitioning between states
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_stripe_js2.Elements,
       {
-        stripe: checkout.stripePromise,
+        stripe: stripePromise,
         options: elementsOptions,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           StripePaymentFormWrapper,
@@ -894,16 +937,27 @@ var PaymentForm = ({
             returnUrl: finalReturnUrl,
             submitButtonText,
             buttonClassName,
-            clientSecret: checkout.clientSecret
+            clientSecret
           }
         )
       },
-      checkout.clientSecret
+      clientSecret
     )
   ) : (
     // Loading state before Stripe data is available
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { minHeight: "40px", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "md" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          style: {
+            minHeight: "40px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "md" })
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
@@ -994,10 +1048,7 @@ var PlanBadge = ({
 
 // src/components/SubscriptionGate.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var SubscriptionGate = ({
-  requirePlan,
-  children
-}) => {
+var SubscriptionGate = ({ requirePlan, children }) => {
   const { subscriptions, loading, hasPlan } = useSubscription();
   const hasAccess = requirePlan ? hasPlan(requirePlan) : subscriptions.some((sub) => sub.status === "active");
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
@@ -1036,99 +1087,99 @@ function usePlans(options) {
   (0, import_react7.useEffect)(() => {
     autoSelectFirstPaidRef.current = autoSelectFirstPaid;
   }, [autoSelectFirstPaid]);
-  const fetchPlans = (0, import_react7.useCallback)(async (force = false) => {
-    if (!agentRef) {
-      setError(new Error("Agent reference not configured"));
-      setLoading(false);
-      return;
-    }
-    const cached = plansCache.get(agentRef);
-    const now = Date.now();
-    if (!force && cached && now - cached.timestamp < CACHE_DURATION2) {
-      const cachedPlans = cached.plans;
-      let processedPlans = filterRef.current ? cachedPlans.filter(filterRef.current) : cachedPlans;
-      if (sortByRef.current) {
-        processedPlans = [...processedPlans].sort(sortByRef.current);
+  const fetchPlans = (0, import_react7.useCallback)(
+    async (force = false) => {
+      if (!agentRef) {
+        setError(new Error("Agent reference not configured"));
+        setLoading(false);
+        return;
       }
-      setPlans(processedPlans);
-      setLoading(false);
-      setError(null);
-      if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-        const firstPaidIndex = processedPlans.findIndex(
-          (plan) => plan.price && plan.price > 0
-        );
-        setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
+      const cached = plansCache.get(agentRef);
+      const now = Date.now();
+      if (!force && cached && now - cached.timestamp < CACHE_DURATION2) {
+        const cachedPlans = cached.plans;
+        let processedPlans = filterRef.current ? cachedPlans.filter(filterRef.current) : cachedPlans;
+        if (sortByRef.current) {
+          processedPlans = [...processedPlans].sort(sortByRef.current);
+        }
+        setPlans(processedPlans);
+        setLoading(false);
+        setError(null);
+        if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
+          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
+          setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
+        }
+        return;
+      }
+      if (cached?.promise) {
+        try {
+          setLoading(true);
+          const fetchedPlans = await cached.promise;
+          let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
+          if (sortByRef.current) {
+            processedPlans = [...processedPlans].sort(sortByRef.current);
+          }
+          setPlans(processedPlans);
+          setError(null);
+          if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
+            const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
+            setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
+          }
+        } catch (err) {
+          setError(err instanceof Error ? err : new Error("Failed to load plans"));
+        } finally {
+          setLoading(false);
+        }
+        return;
       }
-      return;
-    }
-    if (cached?.promise) {
       try {
         setLoading(true);
-        const fetchedPlans = await cached.promise;
+        setError(null);
+        const fetchPromise = fetcherRef.current(agentRef);
+        plansCache.set(agentRef, {
+          plans: [],
+          timestamp: now,
+          promise: fetchPromise
+        });
+        const fetchedPlans = await fetchPromise;
+        plansCache.set(agentRef, {
+          plans: fetchedPlans,
+          timestamp: now,
+          promise: null
+        });
         let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
         if (sortByRef.current) {
           processedPlans = [...processedPlans].sort(sortByRef.current);
         }
         setPlans(processedPlans);
-        setError(null);
         if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-          const firstPaidIndex = processedPlans.findIndex(
-            (plan) => plan.price && plan.price > 0
-          );
+          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
           setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
         }
       } catch (err) {
+        plansCache.delete(agentRef);
         setError(err instanceof Error ? err : new Error("Failed to load plans"));
       } finally {
         setLoading(false);
       }
-      return;
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      const fetchPromise = fetcherRef.current(agentRef);
-      plansCache.set(agentRef, {
-        plans: [],
-        timestamp: now,
-        promise: fetchPromise
-      });
-      const fetchedPlans = await fetchPromise;
-      plansCache.set(agentRef, {
-        plans: fetchedPlans,
-        timestamp: now,
-        promise: null
-      });
-      let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
-      if (sortByRef.current) {
-        processedPlans = [...processedPlans].sort(sortByRef.current);
-      }
-      setPlans(processedPlans);
-      if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-        const firstPaidIndex = processedPlans.findIndex(
-          (plan) => plan.price && plan.price > 0
-        );
-        setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-      }
-    } catch (err) {
-      plansCache.delete(agentRef);
-      setError(err instanceof Error ? err : new Error("Failed to load plans"));
-    } finally {
-      setLoading(false);
-    }
-  }, [agentRef]);
+    },
+    [agentRef]
+  );
   (0, import_react7.useEffect)(() => {
     fetchPlans();
   }, [fetchPlans]);
   const selectedPlan = (0, import_react7.useMemo)(() => {
     return plans[selectedPlanIndex] || null;
   }, [plans, selectedPlanIndex]);
-  const selectPlan = (0, import_react7.useCallback)((planRef) => {
-    const index = plans.findIndex((p) => p.reference === planRef);
-    if (index >= 0) {
-      setSelectedPlanIndex(index);
-    }
-  }, [plans]);
+  const selectPlan = (0, import_react7.useCallback)(
+    (planRef) => {
+      const index = plans.findIndex((p) => p.reference === planRef);
+      if (index >= 0) {
+        setSelectedPlanIndex(index);
+      }
+    },
+    [plans]
+  );
   return {
     plans,
     loading,
@@ -1161,19 +1212,25 @@ var PlanSelector = ({
     autoSelectFirstPaid
   });
   const { plans } = plansHook;
-  const isPaidPlan = (0, import_react8.useCallback)((planName) => {
-    const plan = plans.find((p) => p.name === planName);
-    return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
-  }, [plans]);
+  const isPaidPlan = (0, import_react8.useCallback)(
+    (planName) => {
+      const plan = plans.find((p) => p.name === planName);
+      return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
+    },
+    [plans]
+  );
   const activeSubscription = (0, import_react8.useMemo)(() => {
     const activeSubs = subscriptions.filter((sub) => sub.status === "active");
     return activeSubs.sort(
       (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
     )[0] || null;
   }, [subscriptions]);
-  const isCurrentPlan = (0, import_react8.useCallback)((planName) => {
-    return activeSubscription?.planName === planName;
-  }, [activeSubscription]);
+  const isCurrentPlan = (0, import_react8.useCallback)(
+    (planName) => {
+      return activeSubscription?.planName === planName;
+    },
+    [activeSubscription]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
     ...plansHook,
     subscriptions,
@@ -1191,10 +1248,11 @@ function useSubscriptionStatus() {
   }, []);
   const subscriptionData = (0, import_react9.useMemo)(() => {
     const cancelledPaidSubscriptions = subscriptions.filter((sub) => {
-      const subAny = sub;
-      return sub.status === "active" && subAny.cancelledAt && isPaidSubscription2(sub);
+      return sub.status === "active" && sub.cancelledAt && isPaidSubscription2(sub);
     });
-    const cancelledSubscription = cancelledPaidSubscriptions.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0] || null;
+    const cancelledSubscription = cancelledPaidSubscriptions.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
     const shouldShowCancelledNotice = !!cancelledSubscription;
     return {
       cancelledSubscription,