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

package/dist/index.cjs

@@ -21,184 +21,265 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PaymentForm: () => PaymentForm,
-  SolvaPayProvider: () => SolvaPayProvider
+  PlanBadge: () => PlanBadge,
+  SolvaPayProvider: () => SolvaPayProvider,
+  SubscriptionGate: () => SubscriptionGate,
+  useCheckout: () => useCheckout,
+  useSolvaPay: () => useSolvaPay,
+  useSubscription: () => useSubscription
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/SolvaPayProvider.tsx
 var import_react = require("react");
-var import_react_stripe_js = require("@stripe/react-stripe-js");
-var import_stripe_js = require("@stripe/stripe-js");
 var import_jsx_runtime = require("react/jsx-runtime");
+var SolvaPayContext = (0, import_react.createContext)(null);
 var SolvaPayProvider = ({
-  children,
-  amount = 999,
-  // Default $9.99
-  currency = "USD",
-  planRef,
-  agentRef,
-  apiBaseUrl = "/api/solvapay",
-  onPaymentReady
+  createPayment,
+  checkSubscription,
+  customerRef,
+  onCustomerRefUpdate,
+  children
 }) => {
-  const [stripePromise, setStripePromise] = (0, import_react.useState)(null);
-  const [clientSecret, setClientSecret] = (0, import_react.useState)("");
+  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 [loading, setLoading] = (0, import_react.useState)(false);
-  const [error, setError] = (0, import_react.useState)(null);
-  const createPayment = async (paymentAmount) => {
+  const [internalCustomerRef, setInternalCustomerRef] = (0, import_react.useState)(customerRef);
+  (0, import_react.useEffect)(() => {
+    if (customerRef && customerRef !== internalCustomerRef) {
+      setInternalCustomerRef(customerRef);
+    }
+  }, [customerRef, internalCustomerRef]);
+  const fetchSubscription = (0, import_react.useCallback)(async () => {
+    const currentCustomerRef = internalCustomerRef;
+    if (!currentCustomerRef) {
+      setSubscriptionData({ subscriptions: [] });
+      setLoading(false);
+      return;
+    }
     setLoading(true);
-    setError(null);
     try {
-      console.log("Creating SolvaPay payment intent for amount:", paymentAmount);
-      const response = await fetch(`${apiBaseUrl}/create-payment-intent`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          planRef,
-          agentRef,
-          amount: paymentAmount,
-          currency,
-          description: "SolvaPay - Plan Purchase"
-        })
+      const data = await checkSubscription(currentCustomerRef);
+      setSubscriptionData(data);
+    } catch (error) {
+      console.error("\u274C [SolvaPayProvider] Failed to fetch subscription:", error);
+      setSubscriptionData({
+        customerRef: currentCustomerRef,
+        subscriptions: []
       });
-      if (!response.ok) {
-        const errorText = await response.text();
-        throw new Error(`Payment intent creation failed: ${response.status} ${errorText}`);
-      }
-      const result = await response.json();
-      if (!result || !result.clientSecret || !result.publishableKey) {
-        throw new Error("Invalid response from server: missing required fields");
+    } finally {
+      setLoading(false);
+    }
+  }, [internalCustomerRef, checkSubscription]);
+  (0, import_react.useEffect)(() => {
+    fetchSubscription();
+  }, [fetchSubscription]);
+  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,
+    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"
+      );
+    }
+  }), [loading, subscriptionData]);
+  const contextValue = (0, import_react.useMemo)(() => ({
+    subscription,
+    refetchSubscription: fetchSubscription,
+    createPayment,
+    customerRef: internalCustomerRef,
+    updateCustomerRef
+  }), [subscription, fetchSubscription, createPayment, 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");
+
+// src/hooks/useCheckout.ts
+var import_react3 = require("react");
+var import_stripe_js = require("@stripe/stripe-js");
+
+// src/hooks/useSolvaPay.ts
+var import_react2 = require("react");
+function useSolvaPay() {
+  const context = (0, import_react2.useContext)(SolvaPayContext);
+  if (!context) {
+    throw new Error(
+      "useSolvaPay must be used within a SolvaPayProvider. Wrap your component tree with <SolvaPayProvider> to use this hook."
+    );
+  }
+  return context;
+}
+
+// src/hooks/useCheckout.ts
+function useCheckout(planRef) {
+  const { createPayment, customerRef, updateCustomerRef } = useSolvaPay();
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(
+    !planRef || typeof planRef !== "string" ? new Error("useCheckout: planRef parameter is required and must be a string") : null
+  );
+  const [stripePromise, setStripePromise] = (0, import_react3.useState)(null);
+  const [clientSecret, setClientSecret] = (0, import_react3.useState)(null);
+  const isStartingRef = (0, import_react3.useRef)(false);
+  const startCheckout = (0, import_react3.useCallback)(async () => {
+    if (isStartingRef.current || loading) {
+      return;
+    }
+    if (!planRef || typeof planRef !== "string") {
+      setError(new Error("useCheckout: planRef parameter is required and must be a string"));
+      return;
+    }
+    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 });
+      if (!result || typeof result !== "object") {
+        throw new Error("Invalid payment intent response from server");
       }
-      console.log("Payment intent received:", {
-        hasClientSecret: !!result.clientSecret,
-        hasPublishableKey: !!result.publishableKey,
-        hasAccountId: !!result.accountId,
-        clientSecretLength: result.clientSecret?.length || 0,
-        publishableKeyLength: result.publishableKey?.length || 0
-      });
-      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const stripe = await (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
-      if (!stripe) {
-        throw new Error("Failed to initialize Stripe. Please check your configuration.");
+      if (!result.clientSecret || typeof result.clientSecret !== "string") {
+        throw new Error("Invalid client secret in payment intent response");
       }
-      setStripePromise(stripe);
-      setClientSecret(result.clientSecret);
-      if (onPaymentReady) {
-        onPaymentReady(stripe, result.clientSecret);
+      if (!result.publishableKey || typeof result.publishableKey !== "string") {
+        throw new Error("Invalid publishable key in payment intent response");
       }
-    } catch (error2) {
-      console.error("Failed to create payment:", error2);
-      let errorMessage = "Payment creation failed";
-      if (error2 instanceof Error) {
-        if (error2.message.includes("publishable key")) {
-          errorMessage = "Server configuration error: Missing Stripe publishable key";
-        } else if (error2.message.includes("client secret")) {
-          errorMessage = "Server error: Payment intent creation failed";
-        } else if (error2.message.includes("Failed to initialize Stripe")) {
-          errorMessage = "Stripe initialization failed. Please check your configuration.";
+      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 {
-          errorMessage = error2.message;
+          console.warn("\u26A0\uFE0F  [useCheckout] No updateCustomerRef callback available!");
         }
+      } else if (result.customerRef === customerRef) {
+        console.log("\u2705 [useCheckout] Customer reference unchanged:", customerRef);
       }
-      setError(errorMessage);
+      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
+      const stripe = (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+      setStripePromise(stripe);
+      setClientSecret(result.clientSecret);
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Failed to start checkout");
+      setError(error2);
     } finally {
       setLoading(false);
+      isStartingRef.current = false;
     }
+  }, [planRef, customerRef, createPayment, updateCustomerRef, loading]);
+  const reset = (0, import_react3.useCallback)(() => {
+    isStartingRef.current = false;
+    setLoading(false);
+    setError(null);
+    setStripePromise(null);
+    setClientSecret(null);
+  }, []);
+  return {
+    loading,
+    error,
+    stripePromise,
+    clientSecret,
+    startCheckout,
+    reset
   };
-  (0, import_react.useEffect)(() => {
-    if (amount && !stripePromise && !loading && !error) {
-      createPayment(amount);
-    }
-  }, [amount]);
-  if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
-      padding: "1rem",
-      backgroundColor: "#fed7d7",
-      color: "#742a2a",
-      borderRadius: "0.375rem",
-      marginBottom: "1rem"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Payment Setup Error:" }),
-      " ",
-      error,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
-        {
-          onClick: () => createPayment(amount),
-          style: {
-            marginLeft: "1rem",
-            padding: "0.5rem 1rem",
-            backgroundColor: "#742a2a",
-            color: "white",
-            border: "none",
-            borderRadius: "0.25rem",
-            cursor: "pointer"
-          },
-          children: "Retry"
-        }
-      )
-    ] });
-  }
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-      padding: "1rem",
-      textAlign: "center",
-      color: "#4a5568"
-    }, children: "Setting up payment..." });
-  }
-  if (!stripePromise || !clientSecret) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
-      padding: "1rem",
-      textAlign: "center",
-      color: "#4a5568"
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        onClick: () => createPayment(amount),
-        style: {
-          padding: "0.75rem 1.5rem",
-          backgroundColor: "#3182ce",
-          color: "white",
-          border: "none",
-          borderRadius: "0.375rem",
-          cursor: "pointer",
-          fontSize: "1rem"
-        },
-        children: "Initialize Payment"
-      }
-    ) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_stripe_js.Elements, { stripe: stripePromise, options: { clientSecret }, children });
-};
+}
+
+// src/hooks/useSubscription.ts
+function useSubscription() {
+  const { subscription, refetchSubscription } = useSolvaPay();
+  return {
+    ...subscription,
+    refetch: refetchSubscription
+  };
+}
 
 // src/PaymentForm.tsx
-var import_react2 = require("react");
-var import_react_stripe_js2 = require("@stripe/react-stripe-js");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PaymentForm = ({
+var Spinner = ({
+  className = "",
+  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"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: `inline-block border-gray-300 border-t-gray-600 rounded-full animate-spin ${sizeClasses[size]} ${className}`,
+      role: "status",
+      "aria-busy": "true"
+    }
+  );
+};
+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 = ({
   onSuccess,
   onError,
   returnUrl,
   submitButtonText = "Pay Now",
-  className
+  buttonClassName
 }) => {
-  const stripe = (0, import_react_stripe_js2.useStripe)();
-  const elements = (0, import_react_stripe_js2.useElements)();
-  const [isProcessing, setIsProcessing] = (0, import_react2.useState)(false);
-  const [message, setMessage] = (0, import_react2.useState)(null);
+  const stripe = (0, import_react_stripe_js.useStripe)();
+  const elements = (0, import_react_stripe_js.useElements)();
+  const [isProcessing, setIsProcessing] = (0, import_react4.useState)(false);
+  const [message, setMessage] = (0, import_react4.useState)(null);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
+      const errorMessage = "Stripe is not available. Please refresh the page.";
+      setMessage(errorMessage);
+      if (onError) {
+        onError(new Error(errorMessage));
+      }
       return;
     }
     setIsProcessing(true);
     setMessage(null);
     try {
+      const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
       const { error, paymentIntent } = await stripe.confirmPayment({
         elements,
         confirmParams: {
-          return_url: returnUrl || `${window.location.origin}/checkout/complete`
+          return_url: finalReturnUrl
         },
         redirect: "if_required"
         // Only redirect if required by payment method
@@ -214,8 +295,8 @@ var PaymentForm = ({
         if (onSuccess) {
           onSuccess(paymentIntent);
         }
-      } else {
-        setMessage(`Payment status: ${paymentIntent?.status || "processing"}`);
+      } else if (paymentIntent) {
+        setMessage(`Payment status: ${paymentIntent.status || "processing"}`);
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error occurred");
@@ -227,46 +308,226 @@ var PaymentForm = ({
       setIsProcessing(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_stripe_js2.PaymentElement, {}),
-    message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "div",
-      {
-        style: {
-          marginTop: "1rem",
-          padding: "0.75rem",
-          borderRadius: "0.375rem",
-          backgroundColor: message.includes("successful") ? "#d1fae5" : "#fee2e2",
-          color: message.includes("successful") ? "#065f46" : "#7f1d1d"
+  const isSuccess = message?.includes("successful") ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.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)(
+          "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_runtime2.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: !stripe || 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
+          }
+        )
+      ]
+    }
+  );
+};
+var PaymentForm = ({
+  planRef,
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Pay Now",
+  className,
+  buttonClassName,
+  initialButtonText,
+  cancelButtonText = "Cancel"
+}) => {
+  const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
+  const { loading, error, stripePromise, clientSecret, startCheckout, reset } = 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;
+    }
+    setShowPaymentForm(false);
+    setHasStartedCheckout(false);
+    reset();
+    initializationKey.current = key;
+    if (!initialButtonText && planRef && !loading && !error) {
+      requestAnimationFrame(() => {
+        setHasStartedCheckout(true);
+        startCheckout().then(() => {
+          setShowPaymentForm(true);
+        }).catch(() => {
+        });
+      });
+    }
+  }, [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) => {
+    if (onError) {
+      onError(err);
+    }
+  };
+  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
+            }
+          )
         },
-        children: message
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        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)(
+        "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" }) })
+        }
+      )
+    ] }),
+    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",
       {
-        type: "submit",
-        disabled: !stripe || isProcessing,
-        style: {
-          marginTop: "1.5rem",
-          width: "100%",
-          padding: "0.75rem 1.5rem",
-          backgroundColor: isProcessing || !stripe ? "#9ca3af" : "#3b82f6",
-          color: "white",
-          border: "none",
-          borderRadius: "0.375rem",
-          fontSize: "1rem",
-          fontWeight: "500",
-          cursor: isProcessing || !stripe ? "not-allowed" : "pointer",
-          transition: "background-color 0.2s"
-        },
-        children: isProcessing ? "Processing..." : submitButtonText
+        onClick: handleStartCheckout,
+        className: buttonClassName,
+        children: initialButtonText
       }
     )
   ] });
 };
+
+// src/components/PlanBadge.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PlanBadge = ({
+  children,
+  as: Component = "div",
+  className
+}) => {
+  const { subscriptions, loading } = useSubscription();
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children({ subscriptions, loading }) });
+  }
+  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)(
+    Component,
+    {
+      className: computedClassName,
+      "data-loading": loading,
+      "data-has-subscription": activeSubs.length > 0,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": loading,
+      "aria-label": loading ? "Loading subscription status" : `Current plan: ${displayText}`,
+      children: displayText
+    }
+  );
+};
+
+// src/components/SubscriptionGate.tsx
+var import_jsx_runtime4 = 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({
+    hasAccess,
+    subscriptions,
+    loading
+  }) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PaymentForm,
-  SolvaPayProvider
+  PlanBadge,
+  SolvaPayProvider,
+  SubscriptionGate,
+  useCheckout,
+  useSolvaPay,
+  useSubscription
 });