@solvapay/react 1.0.0-preview.2 → 1.0.0-preview.21

package/dist/index.cjs

@@ -21,201 +21,718 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PaymentForm: () => PaymentForm,
-  SolvaPayProvider: () => SolvaPayProvider
+  PlanBadge: () => PlanBadge,
+  PlanSelector: () => PlanSelector,
+  PricingSelector: () => PricingSelector,
+  ProductBadge: () => ProductBadge,
+  PurchaseGate: () => PurchaseGate,
+  SolvaPayProvider: () => SolvaPayProvider,
+  Spinner: () => Spinner,
+  StripePaymentFormWrapper: () => StripePaymentFormWrapper,
+  defaultAuthAdapter: () => defaultAuthAdapter,
+  filterPurchases: () => filterPurchases,
+  getActivePurchases: () => getActivePurchases,
+  getCancelledPurchasesWithEndDate: () => getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase: () => getMostRecentPurchase,
+  getPrimaryPurchase: () => getPrimaryPurchase,
+  isPaidPurchase: () => isPaidPurchase,
+  useCheckout: () => useCheckout,
+  useCustomer: () => useCustomer,
+  usePlans: () => usePlans,
+  usePurchase: () => usePurchase,
+  usePurchaseStatus: () => usePurchaseStatus,
+  useSolvaPay: () => useSolvaPay
 });
 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/purchases.ts
+function filterPurchases(purchases) {
+  return purchases.filter((purchase) => purchase.status === "active");
+}
+function getActivePurchases(purchases) {
+  return purchases.filter((purchase) => purchase.status === "active");
+}
+function getCancelledPurchasesWithEndDate(purchases) {
+  const now = /* @__PURE__ */ new Date();
+  return purchases.filter((purchase) => {
+    return purchase.status === "active" && purchase.cancelledAt && purchase.endDate && new Date(purchase.endDate) > now;
+  });
+}
+function getMostRecentPurchase(purchases) {
+  if (purchases.length === 0) return null;
+  return purchases.reduce((latest, current) => {
+    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
+  });
+}
+function getPrimaryPurchase(purchases) {
+  const filtered = filterPurchases(purchases);
+  if (filtered.length > 0) {
+    return getMostRecentPurchase(filtered);
+  }
+  return null;
+}
+function isPaidPurchase(purchase) {
+  return (purchase.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,
+  checkPurchase: customCheckPurchase,
+  processPayment: customProcessPayment,
+  children
 }) => {
-  const [stripePromise, setStripePromise] = (0, import_react.useState)(null);
-  const [clientSecret, setClientSecret] = (0, import_react.useState)("");
+  const [purchaseData, setPurchaseData] = (0, import_react.useState)({
+    purchases: []
+  });
   const [loading, setLoading] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
-  const createPayment = async (paymentAmount) => {
-    setLoading(true);
-    setError(null);
-    try {
-      console.log("Creating SolvaPay payment intent for amount:", paymentAmount);
-      const response = await fetch(`${apiBaseUrl}/create-payment-intent`, {
+  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 checkPurchaseRef = (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 buildDefaultCheckPurchaseRef = (0, import_react.useRef)(
+    null
+  );
+  (0, import_react.useEffect)(() => {
+    configRef.current = config;
+  }, [config]);
+  (0, import_react.useEffect)(() => {
+    checkPurchaseRef.current = customCheckPurchase || null;
+  }, [customCheckPurchase]);
+  (0, import_react.useEffect)(() => {
+    createPaymentRef.current = customCreatePayment || null;
+  }, [customCreatePayment]);
+  (0, import_react.useEffect)(() => {
+    processPaymentRef.current = customProcessPayment || null;
+  }, [customProcessPayment]);
+  const buildDefaultCheckPurchase = (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?.checkPurchase || "/api/check-purchase";
+    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 purchase: ${res.statusText}`);
+      currentConfig?.onError?.(error, "checkPurchase");
+      throw error;
+    }
+    return res.json();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    buildDefaultCheckPurchaseRef.current = buildDefaultCheckPurchase;
+  }, [buildDefaultCheckPurchase]);
+  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.productRef) {
+        body.productRef = params.productRef;
+      }
+      const res = await fetchFn(route, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          planRef,
-          agentRef,
-          amount: paymentAmount,
-          currency,
-          description: "SolvaPay - Plan Purchase"
-        })
+        headers,
+        body: JSON.stringify(body)
       });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Payment intent creation failed: ${response.status} ${errorText}`);
-      }
-      const result = await response.json();
-      if (!result || !result.clientSecret || !result.publishableKey) {
-        throw new Error("Invalid response from server: missing required fields");
-      }
-      console.log("Payment intent received:", {
-        hasClientSecret: !!result.clientSecret,
-        hasPublishableKey: !!result.publishableKey,
-        hasAccountId: !!result.accountId,
-        clientSecretLength: result.clientSecret?.length || 0,
-        publishableKeyLength: result.publishableKey?.length || 0
+      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 _checkPurchase = (0, import_react.useCallback)(async () => {
+    if (checkPurchaseRef.current) {
+      return checkPurchaseRef.current();
+    }
+    if (buildDefaultCheckPurchaseRef.current) {
+      return buildDefaultCheckPurchaseRef.current();
+    }
+    return buildDefaultCheckPurchase();
+  }, [buildDefaultCheckPurchase]);
+  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 fetchPurchase = (0, import_react.useCallback)(
+    async (force = false) => {
+      if (!isAuthenticated && !internalCustomerRef) {
+        setPurchaseData({ purchases: [] });
+        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 = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
+        if (!checkFn) {
+          throw new Error("checkPurchase 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,
+            purchases: filterPurchases(data.purchases || [])
+          };
+          setPurchaseData(filteredData);
+          lastFetchedRef.current = cacheKey;
+        }
+      } catch (error) {
+        console.error("[SolvaPayProvider] Failed to fetch purchase:", error);
+        if (inFlightRef.current === cacheKey) {
+          setPurchaseData({
+            purchases: []
+          });
+          lastFetchedRef.current = cacheKey;
+        }
+      } finally {
+        if (inFlightRef.current === cacheKey) {
+          setLoading(false);
+          inFlightRef.current = null;
+        }
+      }
+    },
+    [isAuthenticated, internalCustomerRef, userId]
+  );
+  const fetchPurchaseRef = (0, import_react.useRef)(fetchPurchase);
+  (0, import_react.useEffect)(() => {
+    fetchPurchaseRef.current = fetchPurchase;
+  }, [fetchPurchase]);
+  const refetchPurchase = (0, import_react.useCallback)(async () => {
+    lastFetchedRef.current = null;
+    inFlightRef.current = null;
+    setPurchaseData({ purchases: [] });
+    await fetchPurchaseRef.current(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    lastFetchedRef.current = null;
+    inFlightRef.current = null;
+    if (isAuthenticated || internalCustomerRef) {
+      fetchPurchase();
+    } else {
+      setPurchaseData({ purchases: [] });
+      setLoading(false);
+    }
+  }, [isAuthenticated, internalCustomerRef, userId]);
+  const updateCustomerRef = (0, import_react.useCallback)(
+    (newCustomerRef) => {
+      setInternalCustomerRef(newCustomerRef);
+      setCachedCustomerRef(newCustomerRef, userId);
+      fetchPurchase(true);
+    },
+    [fetchPurchase, userId]
+  );
+  const purchase = (0, import_react.useMemo)(() => {
+    const activePurchase = getPrimaryPurchase(purchaseData.purchases);
+    const activePaidPurchases = purchaseData.purchases.filter(
+      (p) => p.status === "active" && isPaidPurchase(p)
+    );
+    const activePaidPurchase = activePaidPurchases.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
+    return {
+      loading,
+      customerRef: purchaseData.customerRef || internalCustomerRef,
+      email: purchaseData.email,
+      name: purchaseData.name,
+      purchases: purchaseData.purchases,
+      hasProduct: (productName) => {
+        return purchaseData.purchases.some(
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+        );
+      },
+      hasPlan: (productName) => {
+        return purchaseData.purchases.some(
+          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
+        );
+      },
+      activePurchase,
+      hasPaidPurchase: activePaidPurchases.length > 0,
+      activePaidPurchase
+    };
+  }, [loading, purchaseData, internalCustomerRef]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      purchase,
+      refetchPurchase,
+      createPayment,
+      processPayment,
+      customerRef: purchaseData.customerRef || internalCustomerRef,
+      updateCustomerRef
+    }),
+    [
+      purchase,
+      refetchPurchase,
+      createPayment,
+      processPayment,
+      purchaseData.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(options) {
+  const { planRef, productRef } = options;
+  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 {
+      const result = await createPayment({ planRef, productRef });
+      if (!result || typeof result !== "object") {
+        throw new Error("Invalid payment intent response from server");
+      }
+      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);
+      }
       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, productRef, 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);
+}
+
+// src/hooks/usePurchase.ts
+function usePurchase() {
+  const { purchase, refetchPurchase } = useSolvaPay();
+  return {
+    ...purchase,
+    refetch: refetchPurchase
+  };
+}
+
+// src/components/Spinner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+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"
+          }
+        )
+      ]
     }
-  }, [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");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var PaymentForm = ({
+// 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 { purchase, customerRef } = useSolvaPay();
+  return {
+    customerRef: purchase.customerRef || customerRef,
+    email: purchase.email,
+    name: purchase.name,
+    loading: purchase.loading
+  };
+}
+
+// src/components/StripePaymentFormWrapper.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
-  returnUrl,
+  returnUrl: _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 +744,580 @@ 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: {
-          marginTop: "1rem",
-          padding: "0.75rem",
+          padding: "12px",
+          border: "1px solid #cbd5e1",
           borderRadius: "0.375rem",
-          backgroundColor: message.includes("successful") ? "#d1fae5" : "#fee2e2",
-          color: message.includes("successful") ? "#065f46" : "#7f1d1d"
+          backgroundColor: "white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "40px"
         },
-        children: message
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    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",
       {
         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,
+  productRef,
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Pay Now",
+  className,
+  buttonClassName
+}) => {
+  const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
+  const {
+    loading: checkoutLoading,
+    error: checkoutError,
+    clientSecret,
+    startCheckout,
+    stripePromise
+  } = useCheckout({ planRef: validPlanRef, productRef });
+  const { refetch } = usePurchase();
+  const { processPayment } = useSolvaPay();
+  const hasInitializedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (!hasInitializedRef.current && validPlanRef && !checkoutLoading && !checkoutError && !clientSecret) {
+      hasInitializedRef.current = true;
+      startCheckout().catch(() => {
+        hasInitializedRef.current = false;
+      });
+    }
+    if (validPlanRef && clientSecret) {
+      hasInitializedRef.current = true;
+    }
+  }, [validPlanRef, checkoutLoading, checkoutError, clientSecret, startCheckout]);
+  const handleSuccess = (0, import_react5.useCallback)(
+    async (paymentIntent) => {
+      let processingTimeout = false;
+      let processingResult = null;
+      const paymentIntentAny = paymentIntent;
+      if (processPayment && productRef) {
+        try {
+          const result = await processPayment({
+            paymentIntentId: paymentIntentAny.id,
+            productRef,
+            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
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              });
+            }
+            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({
+                ...paymentIntentAny,
+                _processingError: error
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              });
+            } catch {
+            }
+          }
+          throw error;
+        }
+      } else {
+        await refetch();
+      }
+      if (onSuccess && !processingTimeout) {
+        await onSuccess({
+          ...paymentIntentAny,
+          _processingTimeout: processingTimeout,
+          _processingResult: processingResult
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        });
+      }
+    },
+    [processPayment, productRef, 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 = !!checkoutError;
+  const hasStripeData = !!(stripePromise && clientSecret);
+  const elementsOptions = (0, import_react5.useMemo)(() => {
+    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 && 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: 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: stripePromise,
+        options: elementsOptions,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          StripePaymentFormWrapper,
+          {
+            onSuccess: handleSuccess,
+            onError: handleError,
+            returnUrl: finalReturnUrl,
+            submitButtonText,
+            buttonClassName,
+            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)(
+        "button",
+        {
+          type: "submit",
+          disabled: true,
+          className: buttonClassName,
+          "aria-busy": "false",
+          "aria-disabled": "true",
+          children: submitButtonText
+        }
+      )
+    ] })
+  ) });
+};
+
+// src/components/ProductBadge.tsx
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ProductBadge = ({
+  children,
+  as: Component = "div",
+  className
+}) => {
+  const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
+  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 previousPurchasesRef = (0, import_react6.useRef)(purchases);
+  const currentPlanName = activePurchase?.productName || null;
+  const effectivePlanName = currentPlanName;
+  (0, import_react6.useEffect)(() => {
+    if (!loading && !hasLoadedOnce) {
+      setHasLoadedOnce(true);
+    }
+    lastLoadingRef.current = loading;
+  }, [loading, hasLoadedOnce]);
+  (0, import_react6.useEffect)(() => {
+    const previousPurchases = previousPurchasesRef.current;
+    if (previousPurchases !== purchases) {
+      if (loading) {
+        setHasLoadedOnce(false);
+      }
+      setDisplayPlan(null);
+      lastPlanRef.current = null;
+      previousPurchasesRef.current = purchases;
+    }
+  }, [purchases, 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({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
+  }
+  if (!shouldShow) {
+    return null;
+  }
+  const computedClassName = typeof className === "function" ? className({ purchases }) : className;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Component,
+    {
+      className: computedClassName,
+      "data-loading": loading,
+      "data-has-purchase": !!activePurchase,
+      "data-has-paid-purchase": hasPaidPurchase,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": loading,
+      "aria-label": `Current product: ${planToDisplay}`,
+      children: planToDisplay
+    }
+  );
+};
+var PlanBadge = ProductBadge;
+
+// src/components/PurchaseGate.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
+  const { purchases, loading, hasProduct } = usePurchase();
+  const productToCheck = requireProduct || requirePlan;
+  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
+    hasAccess,
+    purchases,
+    loading
+  }) });
+};
+
+// src/components/PricingSelector.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, productRef, 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 (!productRef) {
+        setError(new Error("Product reference not configured"));
+        setLoading(false);
+        return;
+      }
+      const cached = plansCache.get(productRef);
+      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(productRef);
+        plansCache.set(productRef, {
+          plans: [],
+          timestamp: now,
+          promise: fetchPromise
+        });
+        const fetchedPlans = await fetchPromise;
+        plansCache.set(productRef, {
+          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(productRef);
+        setError(err instanceof Error ? err : new Error("Failed to load plans"));
+      } finally {
+        setLoading(false);
+      }
+    },
+    [productRef]
+  );
+  (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/PricingSelector.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PricingSelector = ({
+  productRef,
+  fetcher,
+  filter,
+  sortBy,
+  autoSelectFirstPaid,
+  children
+}) => {
+  const { purchases } = usePurchase();
+  const plansHook = usePlans({
+    productRef,
+    fetcher,
+    filter,
+    sortBy,
+    autoSelectFirstPaid
+  });
+  const { plans } = plansHook;
+  const isPaidPlan = (0, import_react8.useCallback)(
+    (planRef) => {
+      const plan = plans.find((p) => p.reference === planRef);
+      return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
+    },
+    [plans]
+  );
+  const activePurchase = (0, import_react8.useMemo)(() => {
+    const activePurchases = purchases.filter((p) => p.status === "active");
+    return activePurchases.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
+  }, [purchases]);
+  const isCurrentPlan = (0, import_react8.useCallback)(
+    (planRef) => {
+      return activePurchase?.planSnapshot?.reference === planRef;
+    },
+    [activePurchase]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
+    ...plansHook,
+    purchases,
+    isPaidPlan,
+    isCurrentPlan
+  }) });
+};
+var PlanSelector = PricingSelector;
+
+// src/hooks/usePurchaseStatus.ts
+var import_react9 = require("react");
+function usePurchaseStatus() {
+  const { purchases } = usePurchase();
+  const isPaidPurchase2 = (0, import_react9.useCallback)((p) => {
+    return (p.amount ?? 0) > 0;
+  }, []);
+  const purchaseData = (0, import_react9.useMemo)(() => {
+    const cancelledPaidPurchases = purchases.filter((p) => {
+      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
+    });
+    const cancelledPurchase = cancelledPaidPurchases.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
+    const shouldShowCancelledNotice = !!cancelledPurchase;
+    return {
+      cancelledPurchase,
+      shouldShowCancelledNotice
+    };
+  }, [purchases, isPaidPurchase2]);
+  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 {
+    cancelledPurchase: purchaseData.cancelledPurchase,
+    shouldShowCancelledNotice: purchaseData.shouldShowCancelledNotice,
+    formatDate,
+    getDaysUntilExpiration
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PaymentForm,
-  SolvaPayProvider
+  PlanBadge,
+  PlanSelector,
+  PricingSelector,
+  ProductBadge,
+  PurchaseGate,
+  SolvaPayProvider,
+  Spinner,
+  StripePaymentFormWrapper,
+  defaultAuthAdapter,
+  filterPurchases,
+  getActivePurchases,
+  getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase,
+  getPrimaryPurchase,
+  isPaidPurchase,
+  useCheckout,
+  useCustomer,
+  usePlans,
+  usePurchase,
+  usePurchaseStatus,
+  useSolvaPay
 });