@solvapay/react 1.0.0-preview.8 → 1.0.1-preview.1

package/dist/index.cjs

@@ -23,236 +23,473 @@ __export(index_exports, {
   PaymentForm: () => PaymentForm,
   PlanBadge: () => PlanBadge,
   PlanSelector: () => PlanSelector,
+  PricingSelector: () => PricingSelector,
+  ProductBadge: () => ProductBadge,
+  PurchaseGate: () => PurchaseGate,
   SolvaPayProvider: () => SolvaPayProvider,
   Spinner: () => Spinner,
   StripePaymentFormWrapper: () => StripePaymentFormWrapper,
-  SubscriptionGate: () => SubscriptionGate,
-  filterSubscriptions: () => filterSubscriptions,
-  getActiveSubscriptions: () => getActiveSubscriptions,
-  getCancelledSubscriptionsWithEndDate: () => getCancelledSubscriptionsWithEndDate,
-  getMostRecentSubscription: () => getMostRecentSubscription,
-  getPrimarySubscription: () => getPrimarySubscription,
-  hasActivePaidSubscription: () => hasActivePaidSubscription,
+  defaultAuthAdapter: () => defaultAuthAdapter,
+  filterPurchases: () => filterPurchases,
+  getActivePurchases: () => getActivePurchases,
+  getCancelledPurchasesWithEndDate: () => getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase: () => getMostRecentPurchase,
+  getPrimaryPurchase: () => getPrimaryPurchase,
+  isPaidPurchase: () => isPaidPurchase,
   useCheckout: () => useCheckout,
+  useCustomer: () => useCustomer,
   usePlans: () => usePlans,
-  useSolvaPay: () => useSolvaPay,
-  useSubscription: () => useSubscription,
-  useSubscriptionHelpers: () => useSubscriptionHelpers
+  usePurchase: () => usePurchase,
+  usePurchaseStatus: () => usePurchaseStatus,
+  useSolvaPay: () => useSolvaPay
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/SolvaPayProvider.tsx
 var import_react = require("react");
 
-// src/utils/subscriptions.ts
-function filterSubscriptions(subscriptions) {
-  const now = /* @__PURE__ */ new Date();
-  const filtered = subscriptions.filter((sub) => {
-    const subAny = sub;
-    const isCancelled = sub.status === "cancelled" || subAny.cancelledAt;
-    if (!isCancelled) {
-      return true;
-    }
-    if (isCancelled && subAny.endDate) {
-      const endDate = new Date(subAny.endDate);
-      const isFuture = endDate > now;
-      return isFuture;
-    }
-    return false;
-  });
-  return filtered;
+// src/utils/purchases.ts
+function filterPurchases(purchases) {
+  return purchases.filter((purchase) => purchase.status === "active");
 }
-function getActiveSubscriptions(subscriptions) {
-  return subscriptions.filter((sub) => {
-    const subAny = sub;
-    return sub.status === "active" && !subAny.cancelledAt;
-  });
+function getActivePurchases(purchases) {
+  return purchases.filter((purchase) => purchase.status === "active");
 }
-function getCancelledSubscriptionsWithEndDate(subscriptions) {
-  return subscriptions.filter((sub) => {
-    const subAny = sub;
-    const isCancelled = sub.status === "cancelled" || subAny.cancelledAt;
-    return isCancelled && subAny.endDate && new Date(subAny.endDate) > /* @__PURE__ */ new Date();
+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 getMostRecentSubscription(subscriptions) {
-  if (subscriptions.length === 0) return null;
-  return subscriptions.reduce((latest, current) => {
+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 getPrimarySubscription(subscriptions) {
-  const filtered = filterSubscriptions(subscriptions);
-  const activeSubs = getActiveSubscriptions(filtered);
-  if (activeSubs.length > 0) {
-    return getMostRecentSubscription(activeSubs);
-  }
-  const cancelledWithEndDate = getCancelledSubscriptionsWithEndDate(filtered);
-  if (cancelledWithEndDate.length > 0) {
-    return getMostRecentSubscription(cancelledWithEndDate);
+function getPrimaryPurchase(purchases) {
+  const filtered = filterPurchases(purchases);
+  if (filtered.length > 0) {
+    return getMostRecentPurchase(filtered);
   }
   return null;
 }
-function hasActivePaidSubscription(subscriptions, isPaidPlan) {
-  const filtered = filterSubscriptions(subscriptions);
-  const activePaid = getActiveSubscriptions(filtered).some((sub) => isPaidPlan(sub.planName));
-  if (activePaid) return true;
-  const cancelledPaid = getCancelledSubscriptionsWithEndDate(filtered).some((sub) => isPaidPlan(sub.planName));
-  return cancelledPaid;
+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 = ({
-  createPayment,
-  checkSubscription,
-  processPayment,
-  customerRef,
-  onCustomerRefUpdate,
+  config,
+  createPayment: customCreatePayment,
+  checkPurchase: customCheckPurchase,
+  processPayment: customProcessPayment,
   children
 }) => {
-  if (!createPayment || typeof createPayment !== "function") {
-    throw new Error("SolvaPayProvider: createPayment prop is required and must be a function");
-  }
-  if (!checkSubscription || typeof checkSubscription !== "function") {
-    throw new Error("SolvaPayProvider: checkSubscription prop is required and must be a function");
-  }
-  const [subscriptionData, setSubscriptionData] = (0, import_react.useState)({
-    subscriptions: []
+  const [purchaseData, setPurchaseData] = (0, import_react.useState)({
+    purchases: []
   });
   const [loading, setLoading] = (0, import_react.useState)(false);
-  const [internalCustomerRef, setInternalCustomerRef] = (0, import_react.useState)(customerRef);
+  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)(checkSubscription);
+  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)(() => {
-    checkSubscriptionRef.current = checkSubscription;
-  }, [checkSubscription]);
-  const fetchSubscription = (0, import_react.useCallback)(async (force = false) => {
-    const currentCustomerRef = internalCustomerRef;
-    if (!currentCustomerRef) {
-      setSubscriptionData({ subscriptions: [] });
-      setLoading(false);
-      inFlightRef.current = null;
-      lastFetchedRef.current = null;
-      return;
+    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 (!force && lastFetchedRef.current === currentCustomerRef && inFlightRef.current !== currentCustomerRef) {
-      return;
+    if (cachedRef) {
+      headers["x-solvapay-customer-ref"] = cachedRef;
     }
-    if (inFlightRef.current === currentCustomerRef) {
-      return;
+    if (currentConfig?.headers) {
+      const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
+      Object.assign(headers, customHeaders);
     }
-    inFlightRef.current = currentCustomerRef;
-    setLoading(true);
-    try {
-      const data = await checkSubscriptionRef.current(currentCustomerRef);
-      if (inFlightRef.current === currentCustomerRef) {
-        const filteredData = {
-          ...data,
-          subscriptions: filterSubscriptions(data.subscriptions || [])
-        };
-        setSubscriptionData(filteredData);
-        lastFetchedRef.current = currentCustomerRef;
-      }
-    } catch (error) {
-      console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
-      if (inFlightRef.current === currentCustomerRef) {
-        setSubscriptionData({
-          customerRef: currentCustomerRef,
-          subscriptions: []
-        });
-        lastFetchedRef.current = currentCustomerRef;
+    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}`;
       }
-    } finally {
-      if (inFlightRef.current === currentCustomerRef) {
-        setLoading(false);
-        inFlightRef.current = null;
+      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,
+        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 _checkPurchase = (0, import_react.useCallback)(async () => {
+    if (checkPurchaseRef.current) {
+      return checkPurchaseRef.current();
     }
-  }, [internalCustomerRef]);
-  const refetchSubscription = (0, import_react.useCallback)(async () => {
-    const currentCustomerRef = internalCustomerRef;
-    lastFetchedRef.current = null;
-    inFlightRef.current = null;
-    await fetchSubscription(true);
-  }, [fetchSubscription, internalCustomerRef]);
-  (0, import_react.useEffect)(() => {
-    if (customerRef !== internalCustomerRef) {
-      setInternalCustomerRef(customerRef);
+    if (buildDefaultCheckPurchaseRef.current) {
+      return buildDefaultCheckPurchaseRef.current();
     }
-  }, [customerRef, internalCustomerRef]);
+    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)(() => {
-    if (!customerRef) {
-      setSubscriptionData({ subscriptions: [] });
-      setLoading(false);
-      return;
-    }
-    if (customerRef === lastFetchedRef.current || customerRef === inFlightRef.current) {
-      return;
-    }
-    const doFetch = async () => {
-      inFlightRef.current = customerRef;
+    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 data = await checkSubscriptionRef.current(customerRef);
-        if (inFlightRef.current === customerRef) {
+        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,
-            subscriptions: filterSubscriptions(data.subscriptions || [])
+            purchases: filterPurchases(data.purchases || [])
           };
-          setSubscriptionData(filteredData);
-          lastFetchedRef.current = customerRef;
+          setPurchaseData(filteredData);
+          lastFetchedRef.current = cacheKey;
         }
       } catch (error) {
-        console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
-        if (inFlightRef.current === customerRef) {
-          setSubscriptionData({
-            customerRef,
-            subscriptions: []
+        console.error("[SolvaPayProvider] Failed to fetch purchase:", error);
+        if (inFlightRef.current === cacheKey) {
+          setPurchaseData({
+            purchases: []
           });
-          lastFetchedRef.current = customerRef;
+          lastFetchedRef.current = cacheKey;
         }
       } finally {
-        if (inFlightRef.current === customerRef) {
+        if (inFlightRef.current === cacheKey) {
           setLoading(false);
           inFlightRef.current = null;
         }
       }
-    };
-    doFetch();
-  }, [customerRef]);
-  const updateCustomerRef = (0, import_react.useCallback)((newCustomerRef) => {
-    const previousRef = internalCustomerRef;
-    setInternalCustomerRef(newCustomerRef);
-    if (onCustomerRefUpdate) {
-      onCustomerRefUpdate(newCustomerRef);
-    }
-  }, [onCustomerRefUpdate, internalCustomerRef]);
-  const subscription = (0, import_react.useMemo)(() => ({
-    loading,
-    customerRef: subscriptionData.customerRef,
-    email: subscriptionData.email,
-    name: subscriptionData.name,
-    subscriptions: subscriptionData.subscriptions,
-    hasActiveSubscription: subscriptionData.subscriptions.some(
-      (sub) => sub.status === "active"
-    ),
-    hasPlan: (planName) => {
-      return subscriptionData.subscriptions.some(
-        (sub) => sub.planName.toLowerCase() === planName.toLowerCase() && sub.status === "active"
-      );
+    },
+    [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);
     }
-  }), [loading, subscriptionData]);
-  const contextValue = (0, import_react.useMemo)(() => ({
-    subscription,
-    refetchSubscription,
-    createPayment,
-    processPayment,
-    customerRef: internalCustomerRef,
-    updateCustomerRef
-  }), [subscription, refetchSubscription, createPayment, processPayment, internalCustomerRef, updateCustomerRef]);
+  }, [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 });
 };
 
@@ -281,7 +518,8 @@ var stripePromiseCache = /* @__PURE__ */ new Map();
 function getStripeCacheKey(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
 }
-function useCheckout(planRef) {
+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)(
@@ -298,15 +536,11 @@ function useCheckout(planRef) {
       setError(new Error("useCheckout: planRef parameter is required and must be a string"));
       return;
     }
-    if (!customerRef) {
-      setError(new Error("No customer reference available. Please ensure you are logged in."));
-      return;
-    }
     isStartingRef.current = true;
     setLoading(true);
     setError(null);
     try {
-      const result = await createPayment({ planRef, customerRef });
+      const result = await createPayment({ planRef, productRef });
       if (!result || typeof result !== "object") {
         throw new Error("Invalid payment intent response from server");
       }
@@ -335,7 +569,7 @@ function useCheckout(planRef) {
       setLoading(false);
       isStartingRef.current = false;
     }
-  }, [planRef, customerRef, createPayment, updateCustomerRef, loading]);
+  }, [planRef, productRef, createPayment, updateCustomerRef, loading]);
   const reset = (0, import_react3.useCallback)(() => {
     isStartingRef.current = false;
     setLoading(false);
@@ -353,12 +587,12 @@ function useCheckout(planRef) {
   };
 }
 
-// src/hooks/useSubscription.ts
-function useSubscription() {
-  const { subscription, refetchSubscription } = useSolvaPay();
+// src/hooks/usePurchase.ts
+function usePurchase() {
+  const { purchase, refetchPurchase } = useSolvaPay();
   return {
-    ...subscription,
-    refetch: refetchSubscription
+    ...purchase,
+    refetch: refetchPurchase
   };
 }
 
@@ -369,16 +603,30 @@ var Spinner = ({
   size = "md"
 }) => {
   const sizeClasses = {
-    sm: "w-4 h-4 border-2",
-    md: "w-6 h-6 border-2",
-    lg: "w-8 h-8 border-2"
+    sm: "h-4 w-4",
+    md: "h-5 w-5",
+    lg: "h-6 w-6"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
     {
-      className: `inline-block border-gray-300 border-t-gray-600 rounded-full animate-spin ${sizeClasses[size]} ${className}`,
+      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"
+      "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"
+          }
+        )
+      ]
     }
   );
 };
@@ -386,19 +634,34 @@ var Spinner = ({
 // src/components/StripePaymentFormWrapper.tsx
 var import_react4 = require("react");
 var import_react_stripe_js = require("@stripe/react-stripe-js");
+
+// src/hooks/useCustomer.ts
+function useCustomer() {
+  const { 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",
-  buttonClassName
+  buttonClassName,
+  clientSecret
 }) => {
   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 [isPaymentElementReady, setIsPaymentElementReady] = (0, import_react4.useState)(false);
+  const [cardComplete, setCardComplete] = (0, import_react4.useState)(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -409,31 +672,67 @@ var StripePaymentFormWrapper = ({
       }
       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 finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-      const { error, paymentIntent } = await stripe.confirmPayment({
-        elements,
-        confirmParams: {
-          return_url: finalReturnUrl
-        },
-        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 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");
@@ -447,53 +746,76 @@ var StripePaymentFormWrapper = ({
   };
   const isSuccess = message?.includes("successful") ?? false;
   const isReady = !!(stripe && elements);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "form",
-    {
-      onSubmit: handleSubmit,
-      className: "space-y-6",
-      noValidate: true,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", children: [
-          (!isPaymentElementReady || !isReady) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-0 z-10 p-4 bg-white border border-gray-300 rounded-lg min-h-[200px] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "md" }) }),
-          isReady && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: isPaymentElementReady ? "block" : "opacity-0 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react_stripe_js.PaymentElement,
-            {
-              onReady: () => setIsPaymentElementReady(true)
-            }
-          ) })
-        ] }),
-        message && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
-          {
-            className: `mt-6 p-4 rounded-lg ${isSuccess ? "bg-green-50 border border-green-400 text-green-700" : "bg-red-50 border border-red-400 text-red-700"}`,
-            role: isSuccess ? "status" : "alert",
-            "aria-live": isSuccess ? "polite" : "assertive",
-            "aria-atomic": "true",
-            children: message
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "button",
-          {
-            type: "submit",
-            disabled: !isReady || !isPaymentElementReady || isProcessing,
-            className: buttonClassName,
-            "aria-busy": isProcessing || !isPaymentElementReady || !isReady,
-            "aria-disabled": !isReady || !isPaymentElementReady || isProcessing,
-            children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" }) }) : !isReady || !isPaymentElementReady ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { size: "sm" }) }) : submitButtonText
+  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", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        type: "submit",
+        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,
+  productRef,
   onSuccess,
   onError,
   returnUrl,
@@ -502,72 +824,121 @@ var PaymentForm = ({
   buttonClassName
 }) => {
   const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
-  const checkout = useCheckout(validPlanRef);
-  const { refetch } = useSubscription();
-  const { processPayment, customerRef } = useSolvaPay();
+  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 && !checkout.loading && !checkout.error && !checkout.clientSecret) {
+    if (!hasInitializedRef.current && validPlanRef && !checkoutLoading && !checkoutError && !clientSecret) {
       hasInitializedRef.current = true;
-      checkout.startCheckout().catch(() => {
+      startCheckout().catch(() => {
         hasInitializedRef.current = false;
       });
     }
-    if (validPlanRef && checkout.clientSecret) {
+    if (validPlanRef && clientSecret) {
       hasInitializedRef.current = true;
     }
-  }, [validPlanRef, checkout.loading, checkout.error, checkout.clientSecret, checkout.startCheckout]);
-  const handleSuccess = (0, import_react5.useCallback)(async (paymentIntent) => {
-    if (processPayment && customerRef && agentRef) {
-      try {
-        await processPayment({
-          paymentIntentId: paymentIntent.id,
-          agentRef,
-          customerRef,
-          planRef
-        });
-        await refetch();
-      } catch (error) {
-        console.error("[PaymentForm] Failed to process payment:", error);
+  }, [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();
       }
-    } else {
-      await refetch();
-    }
-    if (onSuccess) {
-      onSuccess(paymentIntent);
-    }
-  }, [processPayment, customerRef, agentRef, planRef, refetch, onSuccess]);
-  const handleError = (0, import_react5.useCallback)((err) => {
-    if (onError) {
-      onError(err);
-    }
-  }, [onError]);
+      if (onSuccess && !processingTimeout) {
+        await onSuccess({
+          ...paymentIntentAny,
+          _processingTimeout: processingTimeout,
+          _processingResult: processingResult
+          // 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 = !!checkout.error;
-  const hasStripeData = !!(checkout.stripePromise && checkout.clientSecret);
+  const hasError = !!checkoutError;
+  const hasStripeData = !!(stripePromise && clientSecret);
   const elementsOptions = (0, import_react5.useMemo)(() => {
-    if (!checkout.clientSecret) return void 0;
-    return { clientSecret: checkout.clientSecret };
-  }, [checkout.clientSecret]);
+    if (!clientSecret) return void 0;
+    return { clientSecret };
+  }, [clientSecret]);
   const [hasMountedElements, setHasMountedElements] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
     if (hasStripeData) {
       setHasMountedElements(true);
     }
   }, [hasStripeData]);
-  const shouldRenderElements = hasStripeData || hasMountedElements && checkout.stripePromise && checkout.clientSecret;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: !isValidPlanRef ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 bg-red-50 border border-red-400 rounded-lg text-red-700", children: "PaymentForm: planRef is required and must be a string" }) : hasError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-4 bg-red-50 border border-red-400 rounded-lg text-red-700", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "font-medium mb-1", children: "Payment initialization failed" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm", children: checkout.error?.message || "Unknown error" })
-  ] }) : shouldRenderElements && checkout.stripePromise && elementsOptions ? (
+  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: checkout.stripePromise,
+        stripe: stripePromise,
         options: elementsOptions,
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           StripePaymentFormWrapper,
@@ -576,168 +947,212 @@ var PaymentForm = ({
             onError: handleError,
             returnUrl: finalReturnUrl,
             submitButtonText,
-            buttonClassName
+            buttonClassName,
+            clientSecret
           }
         )
       },
-      checkout.clientSecret
+      clientSecret
     )
   ) : (
     // Loading state before Stripe data is available
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center min-h-[200px]", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "md" }) }),
+    /* @__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": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "sm" }) })
+          "aria-busy": "false",
+          "aria-disabled": "true",
+          children: submitButtonText
         }
       )
     ] })
   ) });
 };
 
-// src/components/PlanBadge.tsx
-var import_react6 = require("react");
+// src/components/ProductBadge.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var PlanBadge = ({
+var ProductBadge = ({
   children,
   as: Component = "div",
   className
 }) => {
-  const { subscriptions, loading } = 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 primarySubscription = getPrimarySubscription(subscriptions);
-  const currentPlanName = primarySubscription?.planName || null;
-  const fallbackPlanName = subscriptions.length > 0 && !currentPlanName ? subscriptions[0]?.planName || null : null;
-  const effectivePlanName = currentPlanName || fallbackPlanName;
-  (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;
+  const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
+  const planToDisplay = activePurchase?.productName || null;
+  const shouldShow = !loading && planToDisplay !== null;
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ subscriptions, loading, displayPlan: planToDisplay, shouldShow }) });
+    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({ subscriptions }) : className;
+  const computedClassName = typeof className === "function" ? className({ purchases }) : className;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
       className: computedClassName,
       "data-loading": loading,
-      "data-has-subscription": !!primarySubscription,
+      "data-has-purchase": !!activePurchase,
+      "data-has-paid-purchase": hasPaidPurchase,
       role: "status",
       "aria-live": "polite",
       "aria-busy": loading,
-      "aria-label": `Current plan: ${planToDisplay}`,
+      "aria-label": `Current product: ${planToDisplay}`,
       children: planToDisplay
     }
   );
 };
+var PlanBadge = ProductBadge;
 
-// src/components/SubscriptionGate.tsx
+// src/components/PurchaseGate.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");
+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,
-    subscriptions,
+    purchases,
     loading
   }) });
 };
 
-// src/components/PlanSelector.tsx
-var import_react8 = require("react");
+// src/components/PricingSelector.tsx
+var import_react7 = require("react");
 
 // src/hooks/usePlans.ts
-var import_react7 = require("react");
+var import_react6 = 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 fetchPlans = (0, import_react7.useCallback)(async () => {
-    if (!agentRef) {
-      setError(new Error("Agent reference not configured"));
-      setLoading(false);
-      return;
-    }
-    try {
-      setLoading(true);
-      setError(null);
-      const fetchedPlans = await fetcher(agentRef);
-      let processedPlans = filter ? fetchedPlans.filter(filter) : fetchedPlans;
-      if (sortBy) {
-        processedPlans = [...processedPlans].sort(sortBy);
-      }
-      setPlans(processedPlans);
-      if (autoSelectFirstPaid && processedPlans.length > 0) {
-        const firstPaidIndex = processedPlans.findIndex(
-          (plan) => plan.price && plan.price > 0
-        );
-        setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
+  const { fetcher, productRef, filter, sortBy, autoSelectFirstPaid = false } = options;
+  const [plans, setPlans] = (0, import_react6.useState)([]);
+  const [loading, setLoading] = (0, import_react6.useState)(true);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const [selectedPlanIndex, setSelectedPlanIndex] = (0, import_react6.useState)(0);
+  const fetcherRef = (0, import_react6.useRef)(fetcher);
+  const filterRef = (0, import_react6.useRef)(filter);
+  const sortByRef = (0, import_react6.useRef)(sortBy);
+  const autoSelectFirstPaidRef = (0, import_react6.useRef)(autoSelectFirstPaid);
+  (0, import_react6.useEffect)(() => {
+    fetcherRef.current = fetcher;
+  }, [fetcher]);
+  (0, import_react6.useEffect)(() => {
+    filterRef.current = filter;
+  }, [filter]);
+  (0, import_react6.useEffect)(() => {
+    sortByRef.current = sortBy;
+  }, [sortBy]);
+  (0, import_react6.useEffect)(() => {
+    autoSelectFirstPaidRef.current = autoSelectFirstPaid;
+  }, [autoSelectFirstPaid]);
+  const fetchPlans = (0, import_react6.useCallback)(
+    async (force = false) => {
+      if (!productRef) {
+        setError(new Error("Product reference not configured"));
+        setLoading(false);
+        return;
       }
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error("Failed to load plans"));
-    } finally {
-      setLoading(false);
-    }
-  }, [agentRef, fetcher, filter, sortBy, autoSelectFirstPaid]);
-  (0, import_react7.useEffect)(() => {
+      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_react6.useEffect)(() => {
     fetchPlans();
   }, [fetchPlans]);
-  const selectedPlan = (0, import_react7.useMemo)(() => {
+  const selectedPlan = (0, import_react6.useMemo)(() => {
     return plans[selectedPlanIndex] || null;
   }, [plans, selectedPlanIndex]);
-  const selectPlan = (0, import_react7.useCallback)((planRef) => {
-    const index = plans.findIndex((p) => p.reference === planRef);
-    if (index >= 0) {
-      setSelectedPlanIndex(index);
-    }
-  }, [plans]);
+  const selectPlan = (0, import_react6.useCallback)(
+    (planRef) => {
+      const index = plans.findIndex((p) => p.reference === planRef);
+      if (index >= 0) {
+        setSelectedPlanIndex(index);
+      }
+    },
+    [plans]
+  );
   return {
     plans,
     loading,
@@ -746,78 +1161,79 @@ function usePlans(options) {
     selectedPlan,
     setSelectedPlanIndex,
     selectPlan,
-    refetch: fetchPlans
+    refetch: () => fetchPlans(true)
+    // Force refetch
   };
 }
 
-// src/components/PlanSelector.tsx
+// src/components/PricingSelector.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var PlanSelector = ({
-  agentRef,
+var PricingSelector = ({
+  productRef,
   fetcher,
   filter,
   sortBy,
   autoSelectFirstPaid,
   children
 }) => {
-  const { subscriptions } = useSubscription();
+  const { purchases } = usePurchase();
   const plansHook = usePlans({
-    agentRef,
+    productRef,
     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(
+  const isPaidPlan = (0, import_react7.useCallback)(
+    (planRef) => {
+      const plan = plans.find((p) => p.reference === planRef);
+      return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
+    },
+    [plans]
+  );
+  const activePurchase = (0, import_react7.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;
-  }, [subscriptions]);
-  const isCurrentPlan = (0, import_react8.useCallback)((planName) => {
-    return activeSubscription?.planName === planName;
-  }, [activeSubscription]);
+  }, [purchases]);
+  const isCurrentPlan = (0, import_react7.useCallback)(
+    (planRef) => {
+      return activePurchase?.planSnapshot?.reference === planRef;
+    },
+    [activePurchase]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
     ...plansHook,
-    subscriptions,
+    purchases,
     isPaidPlan,
     isCurrentPlan
   }) });
 };
+var PlanSelector = PricingSelector;
 
-// src/hooks/useSubscriptionHelpers.ts
-var import_react9 = require("react");
-function useSubscriptionHelpers(plans) {
-  const { subscriptions } = useSubscription();
-  const isPaidPlan = (0, import_react9.useCallback)((planName) => {
-    const plan = plans.find((p) => p.name === planName);
-    return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
-  }, [plans]);
-  const subscriptionData = (0, import_react9.useMemo)(() => {
-    const activePaidSubscriptions = subscriptions.filter(
-      (sub) => sub.status === "active" && isPaidPlan(sub.planName)
-    );
-    const activePaidSubscription = activePaidSubscriptions.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0] || null;
-    const cancelledPaidSubscriptions = subscriptions.filter(
-      (sub) => sub.status === "cancelled" && isPaidPlan(sub.planName)
-    );
-    const cancelledSubscription = cancelledPaidSubscriptions.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime())[0] || null;
-    const hasActiveSubscription = subscriptions.some((sub) => sub.status === "active");
-    const shouldShowCancelledNotice = !!(cancelledSubscription && (!hasActiveSubscription || cancelledSubscription.endDate));
+// src/hooks/usePurchaseStatus.ts
+var import_react8 = require("react");
+function usePurchaseStatus() {
+  const { purchases } = usePurchase();
+  const isPaidPurchase2 = (0, import_react8.useCallback)((p) => {
+    return (p.amount ?? 0) > 0;
+  }, []);
+  const purchaseData = (0, import_react8.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 {
-      activePaidSubscription,
-      activePlanName: activePaidSubscription?.planName || null,
-      cancelledSubscription,
-      hasPaidSubscription: activePaidSubscriptions.length > 0,
+      cancelledPurchase,
       shouldShowCancelledNotice
     };
-  }, [subscriptions, isPaidPlan]);
-  const formatDate = (0, import_react9.useCallback)((dateString) => {
+  }, [purchases, isPaidPurchase2]);
+  const formatDate = (0, import_react8.useCallback)((dateString) => {
     if (!dateString) return null;
     return new Date(dateString).toLocaleDateString("en-US", {
       year: "numeric",
@@ -825,7 +1241,7 @@ function useSubscriptionHelpers(plans) {
       day: "numeric"
     });
   }, []);
-  const getDaysUntilExpiration = (0, import_react9.useCallback)((endDate) => {
+  const getDaysUntilExpiration = (0, import_react8.useCallback)((endDate) => {
     if (!endDate) return null;
     const now = /* @__PURE__ */ new Date();
     const expiration = new Date(endDate);
@@ -834,12 +1250,8 @@ function useSubscriptionHelpers(plans) {
     return diffDays > 0 ? diffDays : 0;
   }, []);
   return {
-    isPaidPlan,
-    activePaidSubscription: subscriptionData.activePaidSubscription,
-    cancelledSubscription: subscriptionData.cancelledSubscription,
-    hasPaidSubscription: subscriptionData.hasPaidSubscription,
-    shouldShowCancelledNotice: subscriptionData.shouldShowCancelledNotice,
-    activePlanName: subscriptionData.activePlanName,
+    cancelledPurchase: purchaseData.cancelledPurchase,
+    shouldShowCancelledNotice: purchaseData.shouldShowCancelledNotice,
     formatDate,
     getDaysUntilExpiration
   };
@@ -849,19 +1261,23 @@ function useSubscriptionHelpers(plans) {
   PaymentForm,
   PlanBadge,
   PlanSelector,
+  PricingSelector,
+  ProductBadge,
+  PurchaseGate,
   SolvaPayProvider,
   Spinner,
   StripePaymentFormWrapper,
-  SubscriptionGate,
-  filterSubscriptions,
-  getActiveSubscriptions,
-  getCancelledSubscriptionsWithEndDate,
-  getMostRecentSubscription,
-  getPrimarySubscription,
-  hasActivePaidSubscription,
+  defaultAuthAdapter,
+  filterPurchases,
+  getActivePurchases,
+  getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase,
+  getPrimaryPurchase,
+  isPaidPurchase,
   useCheckout,
+  useCustomer,
   usePlans,
-  useSolvaPay,
-  useSubscription,
-  useSubscriptionHelpers
+  usePurchase,
+  usePurchaseStatus,
+  useSolvaPay
 });