@solvapay/react 1.0.0-preview.1 → 1.0.0-preview.10

package/dist/index.cjs

@@ -21,201 +21,686 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PaymentForm: () => PaymentForm,
-  SolvaPayProvider: () => SolvaPayProvider
+  PlanBadge: () => PlanBadge,
+  PlanSelector: () => PlanSelector,
+  SolvaPayProvider: () => SolvaPayProvider,
+  Spinner: () => Spinner,
+  StripePaymentFormWrapper: () => StripePaymentFormWrapper,
+  SubscriptionGate: () => SubscriptionGate,
+  defaultAuthAdapter: () => defaultAuthAdapter,
+  filterSubscriptions: () => filterSubscriptions,
+  getActiveSubscriptions: () => getActiveSubscriptions,
+  getCancelledSubscriptionsWithEndDate: () => getCancelledSubscriptionsWithEndDate,
+  getMostRecentSubscription: () => getMostRecentSubscription,
+  getPrimarySubscription: () => getPrimarySubscription,
+  isPaidSubscription: () => isPaidSubscription,
+  useCheckout: () => useCheckout,
+  useCustomer: () => useCustomer,
+  usePlans: () => usePlans,
+  useSolvaPay: () => useSolvaPay,
+  useSubscription: () => useSubscription,
+  useSubscriptionStatus: () => useSubscriptionStatus
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/SolvaPayProvider.tsx
 var import_react = require("react");
-var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_stripe_js = require("@stripe/stripe-js");
+
+// src/utils/subscriptions.ts
+function filterSubscriptions(subscriptions) {
+  return subscriptions.filter((sub) => sub.status === "active");
+}
+function getActiveSubscriptions(subscriptions) {
+  return subscriptions.filter((sub) => sub.status === "active");
+}
+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;
+  });
+}
+function getMostRecentSubscription(subscriptions) {
+  if (subscriptions.length === 0) return null;
+  return subscriptions.reduce((latest, current) => {
+    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
+  });
+}
+function getPrimarySubscription(subscriptions) {
+  const filtered = filterSubscriptions(subscriptions);
+  if (filtered.length > 0) {
+    return getMostRecentSubscription(filtered);
+  }
+  return null;
+}
+function isPaidSubscription(sub) {
+  return (sub.amount ?? 0) > 0;
+}
+
+// src/adapters/auth.ts
+var defaultAuthAdapter = {
+  async getToken() {
+    if (typeof window === "undefined") return null;
+    const token = localStorage.getItem("auth_token");
+    return token || null;
+  },
+  async getUserId() {
+    const token = await this.getToken();
+    if (!token) return null;
+    try {
+      const parts = token.split(".");
+      if (parts.length === 3) {
+        const payload = JSON.parse(atob(parts[1]));
+        return payload.sub || payload.user_id || null;
+      }
+    } catch {
+    }
+    return null;
+  }
+};
+
+// src/SolvaPayProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var SolvaPayContext = (0, import_react.createContext)(null);
+var CUSTOMER_REF_KEY = "solvapay_customerRef";
+var CUSTOMER_REF_EXPIRY = "solvapay_customerRef_expiry";
+var CUSTOMER_REF_USER_ID_KEY = "solvapay_customerRef_userId";
+var CACHE_DURATION = 24 * 60 * 60 * 1e3;
+function getCachedCustomerRef(userId) {
+  if (typeof window === "undefined") return null;
+  const cached = localStorage.getItem(CUSTOMER_REF_KEY);
+  const expiry = localStorage.getItem(CUSTOMER_REF_EXPIRY);
+  const cachedUserId = localStorage.getItem(CUSTOMER_REF_USER_ID_KEY);
+  if (!cached || !expiry) return null;
+  if (Date.now() > parseInt(expiry)) {
+    localStorage.removeItem(CUSTOMER_REF_KEY);
+    localStorage.removeItem(CUSTOMER_REF_EXPIRY);
+    localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
+    return null;
+  }
+  if (userId !== void 0 && userId !== null) {
+    if (cachedUserId !== userId) {
+      clearCachedCustomerRef();
+      return null;
+    }
+  }
+  return cached;
+}
+function setCachedCustomerRef(customerRef, userId) {
+  if (typeof window === "undefined") return;
+  if (userId === void 0 || userId === null) {
+    return;
+  }
+  localStorage.setItem(CUSTOMER_REF_KEY, customerRef);
+  localStorage.setItem(CUSTOMER_REF_EXPIRY, String(Date.now() + CACHE_DURATION));
+  localStorage.setItem(CUSTOMER_REF_USER_ID_KEY, userId);
+}
+function clearCachedCustomerRef() {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(CUSTOMER_REF_KEY);
+  localStorage.removeItem(CUSTOMER_REF_EXPIRY);
+  localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
+}
+function getAuthAdapter(config) {
+  if (config?.auth?.adapter) {
+    return config.auth.adapter;
+  }
+  if (config?.auth?.getToken || config?.auth?.getUserId) {
+    return {
+      async getToken() {
+        return config?.auth?.getToken?.() || null;
+      },
+      async getUserId() {
+        return config?.auth?.getUserId?.() || null;
+      }
+    };
+  }
+  return defaultAuthAdapter;
+}
 var SolvaPayProvider = ({
-  children,
-  amount = 999,
-  // Default $9.99
-  currency = "USD",
-  planRef,
-  agentRef,
-  apiBaseUrl = "/api/solvapay",
-  onPaymentReady
+  config,
+  createPayment: customCreatePayment,
+  checkSubscription: customCheckSubscription,
+  processPayment: customProcessPayment,
+  children
 }) => {
-  const [stripePromise, setStripePromise] = (0, import_react.useState)(null);
-  const [clientSecret, setClientSecret] = (0, import_react.useState)("");
+  const [subscriptionData, setSubscriptionData] = (0, import_react.useState)({
+    subscriptions: []
+  });
   const [loading, setLoading] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
-  const createPayment = async (paymentAmount) => {
+  const [internalCustomerRef, setInternalCustomerRef] = (0, import_react.useState)(void 0);
+  const [userId, setUserId] = (0, import_react.useState)(null);
+  const [isAuthenticated, setIsAuthenticated] = (0, import_react.useState)(false);
+  const inFlightRef = (0, import_react.useRef)(null);
+  const lastFetchedRef = (0, import_react.useRef)(null);
+  const checkSubscriptionRef = (0, import_react.useRef)(null);
+  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);
+  (0, import_react.useEffect)(() => {
+    configRef.current = config;
+  }, [config]);
+  (0, import_react.useEffect)(() => {
+    checkSubscriptionRef.current = customCheckSubscription || null;
+  }, [customCheckSubscription]);
+  (0, import_react.useEffect)(() => {
+    createPaymentRef.current = customCreatePayment || null;
+  }, [customCreatePayment]);
+  (0, import_react.useEffect)(() => {
+    processPaymentRef.current = customProcessPayment || null;
+  }, [customProcessPayment]);
+  const buildDefaultCheckSubscription = (0, import_react.useCallback)(async () => {
+    const currentConfig = configRef.current;
+    const adapter = getAuthAdapter(currentConfig);
+    const token = await adapter.getToken();
+    const detectedUserId = await adapter.getUserId();
+    const route = currentConfig?.api?.checkSubscription || "/api/check-subscription";
+    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: "GET",
+      headers
+    });
+    if (!res.ok) {
+      const error = new Error(`Failed to check subscription: ${res.statusText}`);
+      currentConfig?.onError?.(error, "checkSubscription");
+      throw error;
+    }
+    return res.json();
+  }, []);
+  (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 () => {
+    if (checkSubscriptionRef.current) {
+      return checkSubscriptionRef.current();
+    }
+    if (buildDefaultCheckSubscriptionRef.current) {
+      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]);
+  (0, import_react.useEffect)(() => {
+    const detectAuth = async () => {
+      const currentConfig = configRef.current;
+      const adapter = getAuthAdapter(currentConfig);
+      const token = await adapter.getToken();
+      const detectedUserId = await adapter.getUserId();
+      const prevUserId = userId;
+      setIsAuthenticated(!!token);
+      setUserId(detectedUserId);
+      if (prevUserId !== null && detectedUserId !== prevUserId) {
+        clearCachedCustomerRef();
+        setInternalCustomerRef(void 0);
+        return;
+      }
+      const cachedRef = getCachedCustomerRef(detectedUserId);
+      if (cachedRef && token) {
+        setInternalCustomerRef(cachedRef);
+      } else if (!token) {
+        clearCachedCustomerRef();
+        setInternalCustomerRef(void 0);
+      } else if (token && !cachedRef) {
+        setInternalCustomerRef(void 0);
+      }
+    };
+    detectAuth();
+    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);
+      }
+      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]);
+  const fetchSubscriptionRef = (0, import_react.useRef)(fetchSubscription);
+  (0, import_react.useEffect)(() => {
+    fetchSubscriptionRef.current = fetchSubscription;
+  }, [fetchSubscription]);
+  const refetchSubscription = (0, import_react.useCallback)(async () => {
+    lastFetchedRef.current = null;
+    inFlightRef.current = null;
+    setSubscriptionData({ subscriptions: [] });
+    await fetchSubscriptionRef.current(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    lastFetchedRef.current = null;
+    inFlightRef.current = null;
+    if (isAuthenticated || internalCustomerRef) {
+      fetchSubscription();
+    } else {
+      setSubscriptionData({ subscriptions: [] });
+      setLoading(false);
+    }
+  }, [isAuthenticated, internalCustomerRef, 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;
+    return {
+      loading,
+      customerRef: subscriptionData.customerRef || internalCustomerRef,
+      email: subscriptionData.email,
+      name: subscriptionData.name,
+      subscriptions: subscriptionData.subscriptions,
+      hasPlan: (planName) => {
+        return subscriptionData.subscriptions.some(
+          (sub) => sub.planName.toLowerCase() === planName.toLowerCase() && sub.status === "active"
+        );
+      },
+      activeSubscription,
+      hasPaidSubscription: activePaidSubscriptions.length > 0,
+      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]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SolvaPayContext.Provider, { value: contextValue, children });
+};
+
+// src/PaymentForm.tsx
+var import_react5 = require("react");
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+
+// src/hooks/useCheckout.ts
+var import_react3 = require("react");
+var import_stripe_js = require("@stripe/stripe-js");
+
+// src/hooks/useSolvaPay.ts
+var import_react2 = require("react");
+function useSolvaPay() {
+  const context = (0, import_react2.useContext)(SolvaPayContext);
+  if (!context) {
+    throw new Error(
+      "useSolvaPay must be used within a SolvaPayProvider. Wrap your component tree with <SolvaPayProvider> to use this hook."
+    );
+  }
+  return context;
+}
+
+// src/hooks/useCheckout.ts
+var stripePromiseCache = /* @__PURE__ */ new Map();
+function getStripeCacheKey(publishableKey, accountId) {
+  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
+}
+function useCheckout(planRef, agentRef) {
+  const { createPayment, customerRef, updateCustomerRef } = useSolvaPay();
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(
+    !planRef || typeof planRef !== "string" ? new Error("useCheckout: planRef parameter is required and must be a string") : null
+  );
+  const [stripePromise, setStripePromise] = (0, import_react3.useState)(null);
+  const [clientSecret, setClientSecret] = (0, import_react3.useState)(null);
+  const isStartingRef = (0, import_react3.useRef)(false);
+  const startCheckout = (0, import_react3.useCallback)(async () => {
+    if (isStartingRef.current || loading) {
+      return;
+    }
+    if (!planRef || typeof planRef !== "string") {
+      setError(new Error("useCheckout: planRef parameter is required and must be a string"));
+      return;
+    }
+    isStartingRef.current = true;
     setLoading(true);
     setError(null);
     try {
-      console.log("Creating SolvaPay payment intent for amount:", paymentAmount);
-      const response = await fetch(`${apiBaseUrl}/create-payment-intent`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          planRef,
-          agentRef,
-          amount: paymentAmount,
-          currency,
-          description: "SolvaPay - Plan Purchase"
-        })
-      });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Payment intent creation failed: ${response.status} ${errorText}`);
+      const result = await createPayment({ planRef, agentRef });
+      if (!result || typeof result !== "object") {
+        throw new Error("Invalid payment intent response from server");
       }
-      const result = await response.json();
-      if (!result || !result.clientSecret || !result.publishableKey) {
-        throw new Error("Invalid response from server: missing required fields");
+      if (!result.clientSecret || typeof result.clientSecret !== "string") {
+        throw new Error("Invalid client secret in payment intent response");
+      }
+      if (!result.publishableKey || typeof result.publishableKey !== "string") {
+        throw new Error("Invalid publishable key in payment intent response");
+      }
+      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
+        updateCustomerRef(result.customerRef);
       }
-      console.log("Payment intent received:", {
-        hasClientSecret: !!result.clientSecret,
-        hasPublishableKey: !!result.publishableKey,
-        hasAccountId: !!result.accountId,
-        clientSecretLength: result.clientSecret?.length || 0,
-        publishableKeyLength: result.publishableKey?.length || 0
-      });
       const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const stripe = await (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+      const cacheKey = getStripeCacheKey(result.publishableKey, result.accountId);
+      let stripe = stripePromiseCache.get(cacheKey);
       if (!stripe) {
-        throw new Error("Failed to initialize Stripe. Please check your configuration.");
+        stripe = (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+        stripePromiseCache.set(cacheKey, stripe);
       }
       setStripePromise(stripe);
       setClientSecret(result.clientSecret);
-      if (onPaymentReady) {
-        onPaymentReady(stripe, result.clientSecret);
-      }
-    } catch (error2) {
-      console.error("Failed to create payment:", error2);
-      let errorMessage = "Payment creation failed";
-      if (error2 instanceof Error) {
-        if (error2.message.includes("publishable key")) {
-          errorMessage = "Server configuration error: Missing Stripe publishable key";
-        } else if (error2.message.includes("client secret")) {
-          errorMessage = "Server error: Payment intent creation failed";
-        } else if (error2.message.includes("Failed to initialize Stripe")) {
-          errorMessage = "Stripe initialization failed. Please check your configuration.";
-        } else {
-          errorMessage = error2.message;
-        }
-      }
-      setError(errorMessage);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to start checkout");
+      setError(error2);
     } finally {
       setLoading(false);
+      isStartingRef.current = false;
     }
+  }, [planRef, agentRef, createPayment, updateCustomerRef, loading]);
+  const reset = (0, import_react3.useCallback)(() => {
+    isStartingRef.current = false;
+    setLoading(false);
+    setError(null);
+    setStripePromise(null);
+    setClientSecret(null);
+  }, []);
+  return {
+    loading,
+    error,
+    stripePromise,
+    clientSecret,
+    startCheckout,
+    reset
   };
-  (0, import_react.useEffect)(() => {
-    if (amount && !stripePromise && !loading && !error) {
-      createPayment(amount);
-    }
-  }, [amount]);
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
-      padding: "1rem",
-      backgroundColor: "#fed7d7",
-      color: "#742a2a",
-      borderRadius: "0.375rem",
-      marginBottom: "1rem"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Payment Setup Error:" }),
-      " ",
-      error,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          onClick: () => createPayment(amount),
-          style: {
-            marginLeft: "1rem",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#742a2a",
-            color: "white",
-            border: "none",
-            borderRadius: "0.25rem",
-            cursor: "pointer"
-          },
-          children: "Retry"
-        }
-      )
-    ] });
-  }
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-      padding: "1rem",
-      textAlign: "center",
-      color: "#4a5568"
-    }, children: "Setting up payment..." });
-  }
-  if (!stripePromise || !clientSecret) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-      padding: "1rem",
-      textAlign: "center",
-      color: "#4a5568"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        onClick: () => createPayment(amount),
-        style: {
-          padding: "0.75rem 1.5rem",
-          backgroundColor: "#3182ce",
-          color: "white",
-          border: "none",
-          borderRadius: "0.375rem",
-          cursor: "pointer",
-          fontSize: "1rem"
-        },
-        children: "Initialize Payment"
-      }
-    ) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_stripe_js.Elements, { stripe: stripePromise, options: { clientSecret }, children });
-};
+}
 
-// src/PaymentForm.tsx
-var import_react2 = require("react");
-var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+// src/hooks/useSubscription.ts
+function useSubscription() {
+  const { subscription, refetchSubscription } = useSolvaPay();
+  return {
+    ...subscription,
+    refetch: refetchSubscription
+  };
+}
+
+// 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 PaymentForm = ({
+var Spinner = ({
+  className = "",
+  size = "md"
+}) => {
+  const sizeClasses = {
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      className: `animate-spin ${sizeClasses[size]} ${className}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      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)(
+          "path",
+          {
+            className: "opacity-75",
+            fill: "currentColor",
+            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/StripePaymentFormWrapper.tsx
+var import_react4 = require("react");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
   returnUrl,
   submitButtonText = "Pay Now",
-  className
+  buttonClassName,
+  clientSecret
 }) => {
-  const stripe = (0, import_react_stripe_js2.useStripe)();
-  const elements = (0, import_react_stripe_js2.useElements)();
-  const [isProcessing, setIsProcessing] = (0, import_react2.useState)(false);
-  const [message, setMessage] = (0, import_react2.useState)(null);
+  const stripe = (0, import_react_stripe_js.useStripe)();
+  const elements = (0, import_react_stripe_js.useElements)();
+  const customer = useCustomer();
+  const [isProcessing, setIsProcessing] = (0, import_react4.useState)(false);
+  const [message, setMessage] = (0, import_react4.useState)(null);
+  const [cardComplete, setCardComplete] = (0, import_react4.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
+      const errorMessage = "Stripe is not available. Please refresh the page.";
+      setMessage(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
+      return;
+    }
+    if (!clientSecret) {
+      const errorMessage = "Payment intent not available. Please refresh the page.";
+      setMessage(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
       return;
     }
     setIsProcessing(true);
     setMessage(null);
     try {
-      const { error, paymentIntent } = await stripe.confirmPayment({
-        elements,
-        confirmParams: {
-          return_url: returnUrl || `${window.location.origin}/checkout/complete`
-        },
-        redirect: "if_required"
-        // Only redirect if required by payment method
+      const cardElement = elements.getElement(import_react_stripe_js.CardElement);
+      if (!cardElement) {
+        const errorMessage = "Card element not found";
+        setMessage(errorMessage);
+        setIsProcessing(false);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+        return;
+      }
+      const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
+        payment_method: {
+          card: cardElement,
+          billing_details: {
+            email: customer.email,
+            name: customer.name
+          }
+        }
       });
       if (error) {
         const errorMessage = error.message || "An unexpected error occurred.";
         setMessage(errorMessage);
+        setIsProcessing(false);
         if (onError) {
           onError(new Error(errorMessage));
         }
       } else if (paymentIntent && paymentIntent.status === "succeeded") {
-        setMessage("Payment successful!");
+        setMessage(null);
         if (onSuccess) {
-          onSuccess(paymentIntent);
+          try {
+            await onSuccess(paymentIntent);
+            setMessage("Payment successful!");
+          } catch (err) {
+            const error2 = err instanceof Error ? err : new Error("Payment processing failed");
+            setMessage("Payment processing failed. Please try again or contact support.");
+            setIsProcessing(false);
+            if (onError) {
+              onError(error2);
+            }
+            return;
+          }
+        } else {
+          setMessage("Payment successful!");
         }
-      } else {
-        setMessage(`Payment status: ${paymentIntent?.status || "processing"}`);
+      } else if (paymentIntent && paymentIntent.status === "requires_action") {
+        setMessage("Payment requires additional authentication. Please complete the verification.");
+        setIsProcessing(false);
+      } else if (paymentIntent) {
+        setMessage(`Payment status: ${paymentIntent.status || "processing"}`);
+        setIsProcessing(false);
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error occurred");
@@ -227,46 +712,538 @@ var PaymentForm = ({
       setIsProcessing(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_stripe_js2.PaymentElement, {}),
-    message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const isSuccess = message?.includes("successful") ?? false;
+  const isReady = !!(stripe && elements);
+  const cardElementOptions = {
+    style: {
+      base: {
+        fontSize: "16px",
+        color: "#424770",
+        "::placeholder": {
+          color: "#aab7c4"
+        }
+      },
+      invalid: {
+        color: "#9e2146"
+      }
+    },
+    hidePostalCode: true
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    isReady ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_stripe_js.CardElement,
+      {
+        options: cardElementOptions,
+        onChange: (e) => {
+          if (e.error) {
+            setMessage(e.error.message);
+            setCardComplete(false);
+          } else {
+            setMessage(null);
+            setCardComplete(e.complete);
+          }
+        }
+      }
+    ) : /* @__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)(
       "div",
       {
-        style: {
-          marginTop: "1rem",
-          padding: "0.75rem",
-          borderRadius: "0.375rem",
-          backgroundColor: message.includes("successful") ? "#d1fae5" : "#fee2e2",
-          color: message.includes("successful") ? "#065f46" : "#7f1d1d"
-        },
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
         children: message
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "submit",
-        disabled: !stripe || isProcessing,
-        style: {
-          marginTop: "1.5rem",
-          width: "100%",
-          padding: "0.75rem 1.5rem",
-          backgroundColor: isProcessing || !stripe ? "#9ca3af" : "#3b82f6",
-          color: "white",
-          border: "none",
-          borderRadius: "0.375rem",
-          fontSize: "1rem",
-          fontWeight: "500",
-          cursor: isProcessing || !stripe ? "not-allowed" : "pointer",
-          transition: "background-color 0.2s"
-        },
-        children: isProcessing ? "Processing..." : submitButtonText
+        disabled: !isReady || !cardComplete || isProcessing || !clientSecret,
+        className: buttonClassName,
+        "aria-busy": isProcessing,
+        "aria-disabled": !isReady || !cardComplete || isProcessing || !clientSecret,
+        onClick: handleSubmit,
+        children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Processing..." })
+        ] }) : submitButtonText
       }
     )
   ] });
 };
+
+// src/PaymentForm.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PaymentForm = ({
+  planRef,
+  agentRef,
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Pay Now",
+  className,
+  buttonClassName
+}) => {
+  const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
+  const checkout = useCheckout(validPlanRef, agentRef);
+  const { refetch } = useSubscription();
+  const { processPayment, customerRef } = useSolvaPay();
+  const customer = useCustomer();
+  const hasInitializedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (!hasInitializedRef.current && validPlanRef && !checkout.loading && !checkout.error && !checkout.clientSecret) {
+      hasInitializedRef.current = true;
+      checkout.startCheckout().catch(() => {
+        hasInitializedRef.current = false;
+      });
+    }
+    if (validPlanRef && checkout.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));
+            await refetch();
+          }
+          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) {
+          }
+        }
+        throw error;
+      }
+    } 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]);
+  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 elementsOptions = (0, import_react5.useMemo)(() => {
+    if (!checkout.clientSecret) return void 0;
+    return { clientSecret: checkout.clientSecret };
+  }, [checkout.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;
+  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 ? (
+    // 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,
+        options: elementsOptions,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          StripePaymentFormWrapper,
+          {
+            onSuccess: handleSuccess,
+            onError: handleError,
+            returnUrl: finalReturnUrl,
+            submitButtonText,
+            buttonClassName,
+            clientSecret: checkout.clientSecret
+          }
+        )
+      },
+      checkout.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)(
+        "button",
+        {
+          type: "submit",
+          disabled: true,
+          className: buttonClassName,
+          "aria-busy": "false",
+          "aria-disabled": "true",
+          children: submitButtonText
+        }
+      )
+    ] })
+  ) });
+};
+
+// src/components/PlanBadge.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PlanBadge = ({
+  children,
+  as: Component = "div",
+  className
+}) => {
+  const { subscriptions, loading, hasPaidSubscription, activeSubscription } = useSubscription();
+  const [displayPlan, setDisplayPlan] = (0, import_react6.useState)(null);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react6.useState)(false);
+  const lastPlanRef = (0, import_react6.useRef)(null);
+  const lastLoadingRef = (0, import_react6.useRef)(true);
+  const previousSubscriptionsRef = (0, import_react6.useRef)(subscriptions);
+  const currentPlanName = activeSubscription?.planName || null;
+  const effectivePlanName = currentPlanName;
+  (0, import_react6.useEffect)(() => {
+    if (!loading && !hasLoadedOnce) {
+      setHasLoadedOnce(true);
+    }
+    lastLoadingRef.current = loading;
+  }, [loading, hasLoadedOnce]);
+  (0, import_react6.useEffect)(() => {
+    const previousSubs = previousSubscriptionsRef.current;
+    if (previousSubs !== subscriptions) {
+      if (loading) {
+        setHasLoadedOnce(false);
+      }
+      setDisplayPlan(null);
+      lastPlanRef.current = null;
+      previousSubscriptionsRef.current = subscriptions;
+    }
+  }, [subscriptions, loading]);
+  (0, import_react6.useEffect)(() => {
+    const currentPlan = effectivePlanName;
+    const previousPlan = lastPlanRef.current;
+    if (currentPlan !== previousPlan) {
+      if (currentPlan !== null) {
+        lastPlanRef.current = currentPlan;
+        setDisplayPlan(currentPlan);
+      } else {
+        lastPlanRef.current = null;
+        setDisplayPlan(null);
+      }
+    } else if (currentPlan !== null && displayPlan === null) {
+      setDisplayPlan(currentPlan);
+    }
+  }, [effectivePlanName, displayPlan]);
+  const shouldShow = effectivePlanName !== null && hasLoadedOnce;
+  const planToDisplay = displayPlan ?? effectivePlanName;
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ subscriptions, loading, displayPlan: planToDisplay, shouldShow }) });
+  }
+  if (!shouldShow) {
+    return null;
+  }
+  const computedClassName = typeof className === "function" ? className({ subscriptions }) : className;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Component,
+    {
+      className: computedClassName,
+      "data-loading": loading,
+      "data-has-subscription": !!activeSubscription,
+      "data-has-paid-subscription": hasPaidSubscription,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": loading,
+      "aria-label": `Current plan: ${planToDisplay}`,
+      children: planToDisplay
+    }
+  );
+};
+
+// src/components/SubscriptionGate.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+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({
+    hasAccess,
+    subscriptions,
+    loading
+  }) });
+};
+
+// src/components/PlanSelector.tsx
+var import_react8 = require("react");
+
+// src/hooks/usePlans.ts
+var import_react7 = require("react");
+var plansCache = /* @__PURE__ */ new Map();
+var CACHE_DURATION2 = 5 * 60 * 1e3;
+function usePlans(options) {
+  const { fetcher, agentRef, filter, sortBy, autoSelectFirstPaid = false } = options;
+  const [plans, setPlans] = (0, import_react7.useState)([]);
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [selectedPlanIndex, setSelectedPlanIndex] = (0, import_react7.useState)(0);
+  const fetcherRef = (0, import_react7.useRef)(fetcher);
+  const filterRef = (0, import_react7.useRef)(filter);
+  const sortByRef = (0, import_react7.useRef)(sortBy);
+  const autoSelectFirstPaidRef = (0, import_react7.useRef)(autoSelectFirstPaid);
+  (0, import_react7.useEffect)(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
+  (0, import_react7.useEffect)(() => {
+    filterRef.current = filter;
+  }, [filter]);
+  (0, import_react7.useEffect)(() => {
+    sortByRef.current = sortBy;
+  }, [sortBy]);
+  (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);
+      }
+      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;
+    }
+    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]);
+  (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]);
+  return {
+    plans,
+    loading,
+    error,
+    selectedPlanIndex,
+    selectedPlan,
+    setSelectedPlanIndex,
+    selectPlan,
+    refetch: () => fetchPlans(true)
+    // Force refetch
+  };
+}
+
+// src/components/PlanSelector.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PlanSelector = ({
+  agentRef,
+  fetcher,
+  filter,
+  sortBy,
+  autoSelectFirstPaid,
+  children
+}) => {
+  const { subscriptions } = useSubscription();
+  const plansHook = usePlans({
+    agentRef,
+    fetcher,
+    filter,
+    sortBy,
+    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 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]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
+    ...plansHook,
+    subscriptions,
+    isPaidPlan,
+    isCurrentPlan
+  }) });
+};
+
+// src/hooks/useSubscriptionStatus.ts
+var import_react9 = require("react");
+function useSubscriptionStatus() {
+  const { subscriptions } = useSubscription();
+  const isPaidSubscription2 = (0, import_react9.useCallback)((sub) => {
+    return (sub.amount ?? 0) > 0;
+  }, []);
+  const subscriptionData = (0, import_react9.useMemo)(() => {
+    const cancelledPaidSubscriptions = subscriptions.filter((sub) => {
+      const subAny = sub;
+      return sub.status === "active" && subAny.cancelledAt && isPaidSubscription2(sub);
+    });
+    const cancelledSubscription = cancelledPaidSubscriptions.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0] || null;
+    const shouldShowCancelledNotice = !!cancelledSubscription;
+    return {
+      cancelledSubscription,
+      shouldShowCancelledNotice
+    };
+  }, [subscriptions, isPaidSubscription2]);
+  const formatDate = (0, import_react9.useCallback)((dateString) => {
+    if (!dateString) return null;
+    return new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+  }, []);
+  const getDaysUntilExpiration = (0, import_react9.useCallback)((endDate) => {
+    if (!endDate) return null;
+    const now = /* @__PURE__ */ new Date();
+    const expiration = new Date(endDate);
+    const diffTime = expiration.getTime() - now.getTime();
+    const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
+    return diffDays > 0 ? diffDays : 0;
+  }, []);
+  return {
+    cancelledSubscription: subscriptionData.cancelledSubscription,
+    shouldShowCancelledNotice: subscriptionData.shouldShowCancelledNotice,
+    formatDate,
+    getDaysUntilExpiration
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PaymentForm,
-  SolvaPayProvider
+  PlanBadge,
+  PlanSelector,
+  SolvaPayProvider,
+  Spinner,
+  StripePaymentFormWrapper,
+  SubscriptionGate,
+  defaultAuthAdapter,
+  filterSubscriptions,
+  getActiveSubscriptions,
+  getCancelledSubscriptionsWithEndDate,
+  getMostRecentSubscription,
+  getPrimarySubscription,
+  isPaidSubscription,
+  useCheckout,
+  useCustomer,
+  usePlans,
+  useSolvaPay,
+  useSubscription,
+  useSubscriptionStatus
 });