@solvapay/react 1.0.0-preview.5 → 1.0.0-preview.7

package/dist/index.cjs

@@ -22,21 +22,92 @@ var index_exports = {};
 __export(index_exports, {
   PaymentForm: () => PaymentForm,
   PlanBadge: () => PlanBadge,
+  PlanSelector: () => PlanSelector,
   SolvaPayProvider: () => SolvaPayProvider,
+  Spinner: () => Spinner,
+  StripePaymentFormWrapper: () => StripePaymentFormWrapper,
   SubscriptionGate: () => SubscriptionGate,
+  filterSubscriptions: () => filterSubscriptions,
+  getActiveSubscriptions: () => getActiveSubscriptions,
+  getCancelledSubscriptionsWithEndDate: () => getCancelledSubscriptionsWithEndDate,
+  getMostRecentSubscription: () => getMostRecentSubscription,
+  getPrimarySubscription: () => getPrimarySubscription,
+  hasActivePaidSubscription: () => hasActivePaidSubscription,
   useCheckout: () => useCheckout,
+  usePlans: () => usePlans,
   useSolvaPay: () => useSolvaPay,
-  useSubscription: () => useSubscription
+  useSubscription: () => useSubscription,
+  useSubscriptionHelpers: () => useSubscriptionHelpers
 });
 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;
+}
+function getActiveSubscriptions(subscriptions) {
+  return subscriptions.filter((sub) => {
+    const subAny = sub;
+    return sub.status === "active" && !subAny.cancelledAt;
+  });
+}
+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 getMostRecentSubscription(subscriptions) {
+  if (subscriptions.length === 0) return null;
+  return subscriptions.reduce((latest, current) => {
+    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
+  });
+}
+function getPrimarySubscription(subscriptions) {
+  const filtered = filterSubscriptions(subscriptions);
+  const activeSubs = getActiveSubscriptions(filtered);
+  if (activeSubs.length > 0) {
+    return getMostRecentSubscription(activeSubs);
+  }
+  const cancelledWithEndDate = getCancelledSubscriptionsWithEndDate(filtered);
+  if (cancelledWithEndDate.length > 0) {
+    return getMostRecentSubscription(cancelledWithEndDate);
+  }
+  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;
+}
+
+// src/SolvaPayProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var SolvaPayContext = (0, import_react.createContext)(null);
 var SolvaPayProvider = ({
   createPayment,
   checkSubscription,
+  processPayment,
   customerRef,
   onCustomerRefUpdate,
   children
@@ -52,43 +123,112 @@ var SolvaPayProvider = ({
   });
   const [loading, setLoading] = (0, import_react.useState)(false);
   const [internalCustomerRef, setInternalCustomerRef] = (0, import_react.useState)(customerRef);
+  const inFlightRef = (0, import_react.useRef)(null);
+  const lastFetchedRef = (0, import_react.useRef)(null);
+  const checkSubscriptionRef = (0, import_react.useRef)(checkSubscription);
   (0, import_react.useEffect)(() => {
-    if (customerRef && customerRef !== internalCustomerRef) {
-      setInternalCustomerRef(customerRef);
-    }
-  }, [customerRef, internalCustomerRef]);
-  const fetchSubscription = (0, import_react.useCallback)(async () => {
+    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;
+    }
+    if (!force && lastFetchedRef.current === currentCustomerRef && inFlightRef.current !== currentCustomerRef) {
       return;
     }
+    if (inFlightRef.current === currentCustomerRef) {
+      return;
+    }
+    inFlightRef.current = currentCustomerRef;
     setLoading(true);
     try {
-      const data = await checkSubscription(currentCustomerRef);
-      setSubscriptionData(data);
+      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("\u274C [SolvaPayProvider] Failed to fetch subscription:", error);
-      setSubscriptionData({
-        customerRef: currentCustomerRef,
-        subscriptions: []
-      });
+      console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
+      if (inFlightRef.current === currentCustomerRef) {
+        setSubscriptionData({
+          customerRef: currentCustomerRef,
+          subscriptions: []
+        });
+        lastFetchedRef.current = currentCustomerRef;
+      }
     } finally {
-      setLoading(false);
+      if (inFlightRef.current === currentCustomerRef) {
+        setLoading(false);
+        inFlightRef.current = null;
+      }
     }
-  }, [internalCustomerRef, checkSubscription]);
+  }, [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);
+    }
+  }, [customerRef, internalCustomerRef]);
   (0, import_react.useEffect)(() => {
-    fetchSubscription();
-  }, [fetchSubscription]);
+    if (!customerRef) {
+      setSubscriptionData({ subscriptions: [] });
+      setLoading(false);
+      return;
+    }
+    if (customerRef === lastFetchedRef.current || customerRef === inFlightRef.current) {
+      return;
+    }
+    const doFetch = async () => {
+      inFlightRef.current = customerRef;
+      setLoading(true);
+      try {
+        const data = await checkSubscriptionRef.current(customerRef);
+        if (inFlightRef.current === customerRef) {
+          const filteredData = {
+            ...data,
+            subscriptions: filterSubscriptions(data.subscriptions || [])
+          };
+          setSubscriptionData(filteredData);
+          lastFetchedRef.current = customerRef;
+        }
+      } catch (error) {
+        console.error("[SolvaPayProvider] Failed to fetch subscription:", error);
+        if (inFlightRef.current === customerRef) {
+          setSubscriptionData({
+            customerRef,
+            subscriptions: []
+          });
+          lastFetchedRef.current = customerRef;
+        }
+      } finally {
+        if (inFlightRef.current === customerRef) {
+          setLoading(false);
+          inFlightRef.current = null;
+        }
+      }
+    };
+    doFetch();
+  }, [customerRef]);
   const updateCustomerRef = (0, import_react.useCallback)((newCustomerRef) => {
     const previousRef = internalCustomerRef;
     setInternalCustomerRef(newCustomerRef);
     if (onCustomerRefUpdate) {
       onCustomerRefUpdate(newCustomerRef);
     }
-    if (previousRef !== newCustomerRef) {
-    }
   }, [onCustomerRefUpdate, internalCustomerRef]);
   const subscription = (0, import_react.useMemo)(() => ({
     loading,
@@ -107,17 +247,18 @@ var SolvaPayProvider = ({
   }), [loading, subscriptionData]);
   const contextValue = (0, import_react.useMemo)(() => ({
     subscription,
-    refetchSubscription: fetchSubscription,
+    refetchSubscription,
     createPayment,
+    processPayment,
     customerRef: internalCustomerRef,
     updateCustomerRef
-  }), [subscription, fetchSubscription, createPayment, internalCustomerRef, updateCustomerRef]);
+  }), [subscription, refetchSubscription, createPayment, processPayment, internalCustomerRef, updateCustomerRef]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SolvaPayContext.Provider, { value: contextValue, children });
 };
 
 // src/PaymentForm.tsx
-var import_react4 = require("react");
-var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_react5 = require("react");
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 
 // src/hooks/useCheckout.ts
 var import_react3 = require("react");
@@ -136,6 +277,10 @@ function useSolvaPay() {
 }
 
 // src/hooks/useCheckout.ts
+var stripePromiseCache = /* @__PURE__ */ new Map();
+function getStripeCacheKey(publishableKey, accountId) {
+  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
+}
 function useCheckout(planRef) {
   const { createPayment, customerRef, updateCustomerRef } = useSolvaPay();
   const [loading, setLoading] = (0, import_react3.useState)(false);
@@ -171,22 +316,16 @@ function useCheckout(planRef) {
       if (!result.publishableKey || typeof result.publishableKey !== "string") {
         throw new Error("Invalid publishable key in payment intent response");
       }
-      if (result.customerRef && result.customerRef !== customerRef) {
-        console.log(`\u{1F504} [useCheckout] Backend returned different customerRef:`, {
-          sent: customerRef,
-          received: result.customerRef
-        });
-        if (updateCustomerRef) {
-          updateCustomerRef(result.customerRef);
-          console.log("\u2705 [useCheckout] Customer reference updated via callback");
-        } else {
-          console.warn("\u26A0\uFE0F  [useCheckout] No updateCustomerRef callback available!");
-        }
-      } else if (result.customerRef === customerRef) {
-        console.log("\u2705 [useCheckout] Customer reference unchanged:", customerRef);
+      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
+        updateCustomerRef(result.customerRef);
       }
       const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const stripe = (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+      const cacheKey = getStripeCacheKey(result.publishableKey, result.accountId);
+      let stripe = stripePromiseCache.get(cacheKey);
+      if (!stripe) {
+        stripe = (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+        stripePromiseCache.set(cacheKey, stripe);
+      }
       setStripePromise(stripe);
       setClientSecret(result.clientSecret);
     } catch (err) {
@@ -223,7 +362,7 @@ function useSubscription() {
   };
 }
 
-// src/PaymentForm.tsx
+// src/components/Spinner.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Spinner = ({
   className = "",
@@ -243,15 +382,12 @@ var Spinner = ({
     }
   );
 };
-var StripePaymentFormWrapper = (props) => {
-  const stripe = (0, import_react_stripe_js.useStripe)();
-  const elements = (0, import_react_stripe_js.useElements)();
-  if (!stripe || !elements) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "md" }) }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StripePaymentForm, { ...props });
-};
-var StripePaymentForm = ({
+
+// src/components/StripePaymentFormWrapper.tsx
+var import_react4 = require("react");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
   returnUrl,
@@ -262,6 +398,7 @@ var StripePaymentForm = ({
   const elements = (0, import_react_stripe_js.useElements)();
   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 handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
@@ -309,15 +446,24 @@ var StripePaymentForm = ({
     }
   };
   const isSuccess = message?.includes("successful") ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  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_runtime2.jsx)(import_react_stripe_js.PaymentElement, {}),
-        message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__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"}`,
@@ -327,207 +473,395 @@ var StripePaymentForm = ({
             children: message
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             type: "submit",
-            disabled: !stripe || isProcessing,
+            disabled: !isReady || !isPaymentElementReady || isProcessing,
             className: buttonClassName,
-            "aria-busy": isProcessing,
-            "aria-disabled": !stripe || isProcessing,
-            children: isProcessing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm" }) }) : submitButtonText
+            "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
           }
         )
       ]
     }
   );
 };
+
+// src/PaymentForm.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PaymentForm = ({
   planRef,
+  agentRef,
   onSuccess,
   onError,
   returnUrl,
   submitButtonText = "Pay Now",
   className,
-  buttonClassName,
-  initialButtonText,
-  cancelButtonText = "Cancel"
+  buttonClassName
 }) => {
   const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
-  const { loading, error, stripePromise, clientSecret, startCheckout, reset } = useCheckout(validPlanRef);
+  const checkout = useCheckout(validPlanRef);
   const { refetch } = useSubscription();
-  const [showPaymentForm, setShowPaymentForm] = (0, import_react4.useState)(false);
-  const [hasStartedCheckout, setHasStartedCheckout] = (0, import_react4.useState)(false);
-  const initializationKey = (0, import_react4.useRef)("");
-  const planRefError = !planRef || typeof planRef !== "string" ? new Error("PaymentForm: planRef is required") : null;
-  if (planRefError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 p-4 bg-red-50 border border-red-400 rounded-lg text-red-700", children: planRefError.message }) });
-  }
-  (0, import_react4.useEffect)(() => {
-    const key = `${planRef}-${initialButtonText}`;
-    if (initializationKey.current === key) {
-      return;
+  const { processPayment, customerRef } = useSolvaPay();
+  const hasInitializedRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
+    if (!hasInitializedRef.current && validPlanRef && !checkout.loading && !checkout.error && !checkout.clientSecret) {
+      hasInitializedRef.current = true;
+      checkout.startCheckout().catch(() => {
+        hasInitializedRef.current = false;
+      });
     }
-    setShowPaymentForm(false);
-    setHasStartedCheckout(false);
-    reset();
-    initializationKey.current = key;
-    if (!initialButtonText && planRef && !loading && !error) {
-      requestAnimationFrame(() => {
-        setHasStartedCheckout(true);
-        startCheckout().then(() => {
-          setShowPaymentForm(true);
-        }).catch(() => {
+    if (validPlanRef && checkout.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);
+        await refetch();
+      }
+    } else {
+      await refetch();
     }
-  }, [planRef, initialButtonText, loading, error, reset]);
-  const handleStartCheckout = async () => {
-    setHasStartedCheckout(true);
-    await startCheckout();
-    setShowPaymentForm(true);
-  };
-  const handleSuccess = async (paymentIntent) => {
-    setShowPaymentForm(false);
-    reset();
-    await refetch();
     if (onSuccess) {
       onSuccess(paymentIntent);
     }
-  };
-  const handleCancel = () => {
-    setShowPaymentForm(false);
-    reset();
-  };
-  const handleError = (err) => {
+  }, [processPayment, customerRef, agentRef, planRef, refetch, onSuccess]);
+  const handleError = (0, import_react5.useCallback)((err) => {
     if (onError) {
       onError(err);
     }
-  };
+  }, [onError]);
   const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const shouldShowForm = (!initialButtonText || showPaymentForm) && stripePromise && clientSecret;
-  if (shouldShowForm) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react4.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "md" }) }) }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_react_stripe_js.Elements,
-        {
-          stripe: stripePromise,
-          options: { clientSecret },
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            StripePaymentFormWrapper,
-            {
-              onSuccess: handleSuccess,
-              onError: handleError,
-              returnUrl: finalReturnUrl,
-              submitButtonText,
-              buttonClassName
-            }
-          )
-        },
-        clientSecret
-      ) }),
-      cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          onClick: handleCancel,
-          type: "button",
-          className: "mt-6 w-full px-4 py-2 text-xs text-slate-600 bg-transparent rounded-full hover:text-slate-900 hover:bg-slate-50 font-medium transition-all duration-200",
-          children: cancelButtonText
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
-    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-4 bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "md" }) }),
-      initialButtonText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const isValidPlanRef = planRef && typeof planRef === "string";
+  const hasError = !!checkout.error;
+  const hasStripeData = !!(checkout.stripePromise && checkout.clientSecret);
+  const elementsOptions = (0, import_react5.useMemo)(() => {
+    if (!checkout.clientSecret) return void 0;
+    return { clientSecret: checkout.clientSecret };
+  }, [checkout.clientSecret]);
+  const [hasMountedElements, setHasMountedElements] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    if (hasStripeData) {
+      setHasMountedElements(true);
+    }
+  }, [hasStripeData]);
+  const shouldRenderElements = hasStripeData || hasMountedElements && checkout.stripePromise && checkout.clientSecret;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, children: !isValidPlanRef ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { 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 ? (
+    // Once we have Stripe data, always render Elements to maintain hook consistency
+    // This prevents hook count mismatches when transitioning between states
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_stripe_js2.Elements,
+      {
+        stripe: checkout.stripePromise,
+        options: elementsOptions,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          StripePaymentFormWrapper,
+          {
+            onSuccess: handleSuccess,
+            onError: handleError,
+            returnUrl: finalReturnUrl,
+            submitButtonText,
+            buttonClassName
+          }
+        )
+      },
+      checkout.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.jsx)(
         "button",
         {
           disabled: true,
           className: buttonClassName,
           "aria-busy": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex items-center justify-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Spinner, { size: "sm" }) })
         }
       )
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      initialButtonText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          onClick: () => {
-            reset();
-            handleStartCheckout();
-          },
-          className: buttonClassName,
-          children: initialButtonText
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-4 p-4 bg-red-50 border border-red-400 rounded-lg text-red-700", children: error.message })
-    ] }),
-    !loading && !error && initialButtonText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "button",
-      {
-        onClick: handleStartCheckout,
-        className: buttonClassName,
-        children: initialButtonText
-      }
-    )
-  ] });
+    ] })
+  ) });
 };
 
 // src/components/PlanBadge.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PlanBadge = ({
   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;
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ subscriptions, loading }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children({ subscriptions, loading, displayPlan: planToDisplay, shouldShow }) });
+  }
+  if (!shouldShow) {
+    return null;
   }
   const computedClassName = typeof className === "function" ? className({ subscriptions }) : className;
-  const activeSubs = subscriptions.filter((sub) => sub.status === "active");
-  const latestSub = activeSubs.length > 0 ? activeSubs.reduce((latest, current) => {
-    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
-  }) : null;
-  const displayText = loading ? "Loading..." : latestSub ? latestSub.planName : "Free";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Component,
     {
       className: computedClassName,
       "data-loading": loading,
-      "data-has-subscription": activeSubs.length > 0,
+      "data-has-subscription": !!primarySubscription,
       role: "status",
       "aria-live": "polite",
       "aria-busy": loading,
-      "aria-label": loading ? "Loading subscription status" : `Current plan: ${displayText}`,
-      children: displayText
+      "aria-label": `Current plan: ${planToDisplay}`,
+      children: planToDisplay
     }
   );
 };
 
 // src/components/SubscriptionGate.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SubscriptionGate = ({
   requirePlan,
   children
 }) => {
   const { subscriptions, loading, hasPlan } = useSubscription();
   const hasAccess = requirePlan ? hasPlan(requirePlan) : subscriptions.some((sub) => sub.status === "active");
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children({
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children({
     hasAccess,
     subscriptions,
     loading
   }) });
 };
+
+// src/components/PlanSelector.tsx
+var import_react8 = require("react");
+
+// src/hooks/usePlans.ts
+var import_react7 = require("react");
+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);
+      }
+    } 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)(() => {
+    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
+  };
+}
+
+// src/components/PlanSelector.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PlanSelector = ({
+  agentRef,
+  fetcher,
+  filter,
+  sortBy,
+  autoSelectFirstPaid,
+  children
+}) => {
+  const { subscriptions } = useSubscription();
+  const plansHook = usePlans({
+    agentRef,
+    fetcher,
+    filter,
+    sortBy,
+    autoSelectFirstPaid
+  });
+  const { plans } = plansHook;
+  const isPaidPlan = (0, import_react8.useCallback)((planName) => {
+    const plan = plans.find((p) => p.name === planName);
+    return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
+  }, [plans]);
+  const activeSubscription = (0, import_react8.useMemo)(() => {
+    const activeSubs = subscriptions.filter((sub) => sub.status === "active");
+    return activeSubs.sort(
+      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
+    )[0] || null;
+  }, [subscriptions]);
+  const isCurrentPlan = (0, import_react8.useCallback)((planName) => {
+    return activeSubscription?.planName === planName;
+  }, [activeSubscription]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children({
+    ...plansHook,
+    subscriptions,
+    isPaidPlan,
+    isCurrentPlan
+  }) });
+};
+
+// src/hooks/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));
+    return {
+      activePaidSubscription,
+      activePlanName: activePaidSubscription?.planName || null,
+      cancelledSubscription,
+      hasPaidSubscription: activePaidSubscriptions.length > 0,
+      shouldShowCancelledNotice
+    };
+  }, [subscriptions, isPaidPlan]);
+  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 {
+    isPaidPlan,
+    activePaidSubscription: subscriptionData.activePaidSubscription,
+    cancelledSubscription: subscriptionData.cancelledSubscription,
+    hasPaidSubscription: subscriptionData.hasPaidSubscription,
+    shouldShowCancelledNotice: subscriptionData.shouldShowCancelledNotice,
+    activePlanName: subscriptionData.activePlanName,
+    formatDate,
+    getDaysUntilExpiration
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PaymentForm,
   PlanBadge,
+  PlanSelector,
   SolvaPayProvider,
+  Spinner,
+  StripePaymentFormWrapper,
   SubscriptionGate,
+  filterSubscriptions,
+  getActiveSubscriptions,
+  getCancelledSubscriptionsWithEndDate,
+  getMostRecentSubscription,
+  getPrimarySubscription,
+  hasActivePaidSubscription,
   useCheckout,
+  usePlans,
   useSolvaPay,
-  useSubscription
+  useSubscription,
+  useSubscriptionHelpers
 });