@solvapay/react 1.0.6 → 1.0.8-preview.1

package/dist/index.js

@@ -1,606 +1,127 @@
+import {
+  ActivationFlow,
+  AmountPicker,
+  BalanceBadge,
+  CancelPlanButton,
+  CancelledPlanNotice,
+  CheckoutSummary2 as CheckoutSummary,
+  CopyContext,
+  CopyProvider,
+  CreditGate,
+  MandateText,
+  PaymentForm,
+  PaymentFormCardElement,
+  PaymentFormContext,
+  PaymentFormCustomerFields,
+  PaymentFormError,
+  PaymentFormLoading,
+  PaymentFormMandateText,
+  PaymentFormPaymentElement,
+  PaymentFormProvider,
+  PaymentFormSubmitButton,
+  PaymentFormSummary,
+  PaymentFormTermsCheckbox,
+  PlanBadge,
+  PlanSelector,
+  ProductBadge,
+  PurchaseGate,
+  SolvaPayContext,
+  SolvaPayProvider,
+  Spinner,
+  TopupForm2 as TopupForm,
+  buildRequestHeaders,
+  confirmPayment,
+  deriveVariant,
+  enCopy,
+  filterPurchases,
+  formatPrice,
+  getActivePurchases,
+  getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase,
+  getPrimaryPurchase,
+  interpolate,
+  isPaidPurchase,
+  mergeCopy,
+  resolveCta,
+  useActivation,
+  useActivationFlow,
+  useAmountPicker,
+  useAmountPickerCopy,
+  useBalance,
+  useCheckout,
+  useCopy,
+  useCreditGate,
+  useCustomer,
+  useLocale,
+  useMerchant,
+  usePaymentForm,
+  usePlan,
+  usePlans,
+  useProduct,
+  usePurchase,
+  usePurchaseActions,
+  usePurchaseStatus,
+  useSolvaPay,
+  useTopup,
+  useTopupAmountSelector
+} from "./chunk-MOP3ZBGC.js";
 import {
   defaultAuthAdapter
 } from "./chunk-OUSEQRCT.js";
 
-// src/SolvaPayProvider.tsx
-import { createContext, useState, useEffect, useCallback, useMemo, useRef } from "react";
-
-// src/utils/purchases.ts
-function filterPurchases(purchases) {
-  return purchases.filter((purchase) => purchase.status === "active");
-}
-function getActivePurchases(purchases) {
-  return purchases.filter((purchase) => purchase.status === "active");
-}
-function getCancelledPurchasesWithEndDate(purchases) {
-  const now = /* @__PURE__ */ new Date();
-  return purchases.filter((purchase) => {
-    return purchase.status === "active" && purchase.cancelledAt && purchase.endDate && new Date(purchase.endDate) > now;
-  });
-}
-function getMostRecentPurchase(purchases) {
-  if (purchases.length === 0) return null;
-  return purchases.reduce((latest, current) => {
-    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
-  });
-}
-function getPrimaryPurchase(purchases) {
-  const filtered = filterPurchases(purchases);
-  if (filtered.length > 0) {
-    return getMostRecentPurchase(filtered);
-  }
-  return null;
-}
-function isPaidPurchase(purchase) {
-  return (purchase.amount ?? 0) > 0;
-}
-
-// src/SolvaPayProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var SolvaPayContext = 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 = ({
-  config,
-  createPayment: customCreatePayment,
-  checkPurchase: customCheckPurchase,
-  processPayment: customProcessPayment,
-  children
-}) => {
-  const [purchaseData, setPurchaseData] = useState({
-    purchases: []
-  });
-  const [loading, setLoading] = useState(false);
-  const [internalCustomerRef, setInternalCustomerRef] = useState(void 0);
-  const [userId, setUserId] = useState(null);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const inFlightRef = useRef(null);
-  const lastFetchedRef = useRef(null);
-  const checkPurchaseRef = useRef(null);
-  const createPaymentRef = useRef(null);
-  const processPaymentRef = useRef(null);
-  const configRef = useRef(config);
-  const buildDefaultCheckPurchaseRef = useRef(
-    null
-  );
-  useEffect(() => {
-    configRef.current = config;
-  }, [config]);
-  useEffect(() => {
-    checkPurchaseRef.current = customCheckPurchase || null;
-  }, [customCheckPurchase]);
-  useEffect(() => {
-    createPaymentRef.current = customCreatePayment || null;
-  }, [customCreatePayment]);
-  useEffect(() => {
-    processPaymentRef.current = customProcessPayment || null;
-  }, [customProcessPayment]);
-  const buildDefaultCheckPurchase = useCallback(async () => {
-    const currentConfig = configRef.current;
-    const adapter = getAuthAdapter(currentConfig);
-    const token = await adapter.getToken();
-    const detectedUserId = await adapter.getUserId();
-    const route = currentConfig?.api?.checkPurchase || "/api/check-purchase";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const cachedRef = getCachedCustomerRef(detectedUserId);
-    const headers = {
-      "Content-Type": "application/json"
-    };
-    if (token) {
-      headers["Authorization"] = `Bearer ${token}`;
-    }
-    if (cachedRef) {
-      headers["x-solvapay-customer-ref"] = cachedRef;
-    }
-    if (currentConfig?.headers) {
-      const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-      Object.assign(headers, customHeaders);
-    }
-    const res = await fetchFn(route, {
-      method: "GET",
-      headers
-    });
-    if (!res.ok) {
-      const error = new Error(`Failed to check purchase: ${res.statusText}`);
-      currentConfig?.onError?.(error, "checkPurchase");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  useEffect(() => {
-    buildDefaultCheckPurchaseRef.current = buildDefaultCheckPurchase;
-  }, [buildDefaultCheckPurchase]);
-  const buildDefaultCreatePayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
-      const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const cachedRef = getCachedCustomerRef(detectedUserId);
-      const headers = {
-        "Content-Type": "application/json"
-      };
-      if (token) {
-        headers["Authorization"] = `Bearer ${token}`;
-      }
-      if (cachedRef) {
-        headers["x-solvapay-customer-ref"] = cachedRef;
-      }
-      if (currentConfig?.headers) {
-        const customHeaders = typeof currentConfig.headers === "function" ? await currentConfig.headers() : currentConfig.headers;
-        Object.assign(headers, customHeaders);
-      }
-      const body = { planRef: params.planRef };
-      if (params.productRef) {
-        body.productRef = params.productRef;
-      }
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        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 = 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 = useCallback(async () => {
-    if (checkPurchaseRef.current) {
-      return checkPurchaseRef.current();
-    }
-    if (buildDefaultCheckPurchaseRef.current) {
-      return buildDefaultCheckPurchaseRef.current();
-    }
-    return buildDefaultCheckPurchase();
-  }, [buildDefaultCheckPurchase]);
-  const createPayment = useCallback(
-    async (params) => {
-      if (createPaymentRef.current) {
-        return createPaymentRef.current(params);
-      }
-      return buildDefaultCreatePayment(params);
-    },
-    [buildDefaultCreatePayment]
-  );
-  const processPayment = useCallback(
-    async (params) => {
-      if (processPaymentRef.current) {
-        return processPaymentRef.current(params);
-      }
-      return buildDefaultProcessPayment(params);
-    },
-    [buildDefaultProcessPayment]
-  );
-  useEffect(() => {
-    const detectAuth = async () => {
-      const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
-      const prevUserId = userId;
-      setIsAuthenticated(!!token);
-      setUserId(detectedUserId);
-      if (prevUserId !== null && detectedUserId !== prevUserId) {
-        clearCachedCustomerRef();
-        setInternalCustomerRef(void 0);
-        return;
-      }
-      const cachedRef = getCachedCustomerRef(detectedUserId);
-      if (cachedRef && token) {
-        setInternalCustomerRef(cachedRef);
-      } else if (!token) {
-        clearCachedCustomerRef();
-        setInternalCustomerRef(void 0);
-      } else if (token && !cachedRef) {
-        setInternalCustomerRef(void 0);
-      }
-    };
-    detectAuth();
-    const interval = setInterval(detectAuth, 5e3);
-    return () => clearInterval(interval);
-  }, [userId]);
-  const fetchPurchase = useCallback(
-    async (force = false) => {
-      if (!isAuthenticated && !internalCustomerRef) {
-        setPurchaseData({ purchases: [] });
-        setLoading(false);
-        inFlightRef.current = null;
-        lastFetchedRef.current = null;
-        return;
-      }
-      const cacheKey = internalCustomerRef || userId || "anonymous";
-      if (!force && lastFetchedRef.current === cacheKey && inFlightRef.current !== cacheKey) {
-        return;
-      }
-      if (inFlightRef.current === cacheKey) {
-        return;
-      }
-      inFlightRef.current = cacheKey;
-      setLoading(true);
-      try {
-        const checkFn = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
-        if (!checkFn) {
-          throw new Error("checkPurchase function not available");
-        }
-        const data = await checkFn();
-        if (data.customerRef) {
-          setInternalCustomerRef(data.customerRef);
-          const currentAdapter = getAuthAdapter(configRef.current);
-          const currentUserId = await currentAdapter.getUserId();
-          setCachedCustomerRef(data.customerRef, currentUserId);
-        }
-        if (inFlightRef.current === cacheKey) {
-          const filteredData = {
-            ...data,
-            purchases: filterPurchases(data.purchases || [])
-          };
-          setPurchaseData(filteredData);
-          lastFetchedRef.current = cacheKey;
-        }
-      } catch (error) {
-        console.error("[SolvaPayProvider] Failed to fetch purchase:", error);
-        if (inFlightRef.current === cacheKey) {
-          setPurchaseData({
-            purchases: []
-          });
-          lastFetchedRef.current = cacheKey;
-        }
-      } finally {
-        if (inFlightRef.current === cacheKey) {
-          setLoading(false);
-          inFlightRef.current = null;
-        }
-      }
-    },
-    [isAuthenticated, internalCustomerRef, userId]
-  );
-  const fetchPurchaseRef = useRef(fetchPurchase);
-  useEffect(() => {
-    fetchPurchaseRef.current = fetchPurchase;
-  }, [fetchPurchase]);
-  const refetchPurchase = useCallback(async () => {
-    lastFetchedRef.current = null;
-    inFlightRef.current = null;
-    setPurchaseData({ purchases: [] });
-    await fetchPurchaseRef.current(true);
-  }, []);
-  useEffect(() => {
-    lastFetchedRef.current = null;
-    inFlightRef.current = null;
-    if (isAuthenticated || internalCustomerRef) {
-      fetchPurchase();
-    } else {
-      setPurchaseData({ purchases: [] });
-      setLoading(false);
-    }
-  }, [isAuthenticated, internalCustomerRef, userId]);
-  const updateCustomerRef = useCallback(
-    (newCustomerRef) => {
-      setInternalCustomerRef(newCustomerRef);
-      setCachedCustomerRef(newCustomerRef, userId);
-      fetchPurchase(true);
-    },
-    [fetchPurchase, userId]
-  );
-  const purchase = 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 = useMemo(
-    () => ({
-      purchase,
-      refetchPurchase,
-      createPayment,
-      processPayment,
-      customerRef: purchaseData.customerRef || internalCustomerRef,
-      updateCustomerRef
-    }),
-    [
-      purchase,
-      refetchPurchase,
-      createPayment,
-      processPayment,
-      purchaseData.customerRef,
-      internalCustomerRef,
-      updateCustomerRef
-    ]
-  );
-  return /* @__PURE__ */ jsx(SolvaPayContext.Provider, { value: contextValue, children });
-};
-
 // src/PaymentForm.tsx
-import { useEffect as useEffect2, useCallback as useCallback3, useRef as useRef3, useMemo as useMemo2, useState as useState4 } from "react";
-import { Elements } from "@stripe/react-stripe-js";
-
-// src/hooks/useCheckout.ts
-import { useState as useState2, useCallback as useCallback2, useRef as useRef2 } from "react";
-import { loadStripe } from "@stripe/stripe-js";
-
-// src/hooks/useSolvaPay.ts
-import { useContext } from "react";
-function useSolvaPay() {
-  const context = useContext(SolvaPayContext);
-  if (!context) {
-    throw new Error(
-      "useSolvaPay must be used within a SolvaPayProvider. Wrap your component tree with <SolvaPayProvider> to use this hook."
-    );
-  }
-  return context;
-}
-
-// src/hooks/useCheckout.ts
-var stripePromiseCache = /* @__PURE__ */ new Map();
-function getStripeCacheKey(publishableKey, accountId) {
-  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
-}
-function useCheckout(options) {
-  const { planRef, productRef } = options;
-  const { createPayment, customerRef, updateCustomerRef } = useSolvaPay();
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(
-    !planRef || typeof planRef !== "string" ? new Error("useCheckout: planRef parameter is required and must be a string") : null
-  );
-  const [stripePromise, setStripePromise] = useState2(null);
-  const [clientSecret, setClientSecret] = useState2(null);
-  const isStartingRef = useRef2(false);
-  const startCheckout = useCallback2(async () => {
-    if (isStartingRef.current || loading) {
-      return;
-    }
-    if (!planRef || typeof planRef !== "string") {
-      setError(new Error("useCheckout: planRef parameter is required and must be a string"));
-      return;
-    }
-    isStartingRef.current = true;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await createPayment({ planRef, productRef });
-      if (!result || typeof result !== "object") {
-        throw new Error("Invalid payment intent response from server");
-      }
-      if (!result.clientSecret || typeof result.clientSecret !== "string") {
-        throw new Error("Invalid client secret in payment intent response");
-      }
-      if (!result.publishableKey || typeof result.publishableKey !== "string") {
-        throw new Error("Invalid publishable key in payment intent response");
-      }
-      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
-        updateCustomerRef(result.customerRef);
-      }
-      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const cacheKey = getStripeCacheKey(result.publishableKey, result.accountId);
-      let stripe = stripePromiseCache.get(cacheKey);
-      if (!stripe) {
-        stripe = loadStripe(result.publishableKey, stripeOptions);
-        stripePromiseCache.set(cacheKey, stripe);
-      }
-      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, productRef, createPayment, updateCustomerRef, loading]);
-  const reset = useCallback2(() => {
-    isStartingRef.current = false;
-    setLoading(false);
-    setError(null);
-    setStripePromise(null);
-    setClientSecret(null);
-  }, []);
-  return {
-    loading,
-    error,
-    stripePromise,
-    clientSecret,
-    startCheckout,
-    reset
-  };
-}
-
-// src/hooks/usePurchase.ts
-function usePurchase() {
-  const { purchase, refetchPurchase } = useSolvaPay();
-  return {
-    ...purchase,
-    refetch: refetchPurchase
-  };
-}
-
-// src/components/Spinner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Spinner = ({
-  className = "",
-  size = "md"
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  };
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `animate-spin ${sizeClasses[size]} ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      role: "status",
-      "aria-busy": "true",
-      children: [
-        /* @__PURE__ */ jsx2("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx2(
-          "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"
-          }
-        )
-      ]
-    }
-  );
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultTree = ({
+  requireTermsAcceptance
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(PaymentForm.Summary, {}),
+  /* @__PURE__ */ jsx(PaymentForm.CustomerFields, {}),
+  /* @__PURE__ */ jsx(PaymentForm.PaymentElement, {}),
+  /* @__PURE__ */ jsx(PaymentForm.Error, {}),
+  /* @__PURE__ */ jsx(PaymentForm.MandateText, {}),
+  requireTermsAcceptance && /* @__PURE__ */ jsx(PaymentForm.TermsCheckbox, {}),
+  /* @__PURE__ */ jsx(PaymentForm.SubmitButton, {})
+] });
+var PaymentFormBase = (props) => {
+  const { children, requireTermsAcceptance = false } = props;
+  return /* @__PURE__ */ jsx(PaymentForm.Root, { ...props, children: children ?? /* @__PURE__ */ jsx(DefaultTree, { requireTermsAcceptance }) });
 };
+var PaymentForm2 = Object.assign(PaymentFormBase, {
+  Summary: PaymentFormSummary,
+  CustomerFields: PaymentFormCustomerFields,
+  PaymentElement: PaymentFormPaymentElement,
+  CardElement: PaymentFormCardElement,
+  MandateText: PaymentFormMandateText,
+  TermsCheckbox: PaymentFormTermsCheckbox,
+  SubmitButton: PaymentFormSubmitButton,
+  Loading: PaymentFormLoading,
+  Error: PaymentFormError
+});
 
 // src/components/StripePaymentFormWrapper.tsx
-import { useState as useState3 } from "react";
+import { useState } from "react";
 import { useStripe, useElements, CardElement } from "@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
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
   returnUrl: _returnUrl,
-  submitButtonText = "Pay Now",
+  submitButtonText,
   buttonClassName,
   clientSecret
 }) => {
   const stripe = useStripe();
   const elements = useElements();
   const customer = useCustomer();
-  const [isProcessing, setIsProcessing] = useState3(false);
-  const [message, setMessage] = useState3(null);
-  const [cardComplete, setCardComplete] = useState3(false);
+  const copy = useCopy();
+  const effectiveSubmitText = submitButtonText ?? copy.cta.payNow;
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [cardComplete, setCardComplete] = useState(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
-      const errorMessage = "Stripe is not available. Please refresh the page.";
+      const errorMessage = copy.errors.stripeUnavailable;
       setMessage(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -608,7 +129,7 @@ var StripePaymentFormWrapper = ({
       return;
     }
     if (!clientSecret) {
-      const errorMessage = "Payment intent not available. Please refresh the page.";
+      const errorMessage = copy.errors.paymentIntentUnavailable;
       setMessage(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -620,7 +141,7 @@ var StripePaymentFormWrapper = ({
     try {
       const cardElement = elements.getElement(CardElement);
       if (!cardElement) {
-        const errorMessage = "Card element not found";
+        const errorMessage = copy.errors.cardElementMissing;
         setMessage(errorMessage);
         setIsProcessing(false);
         if (onError) {
@@ -638,7 +159,7 @@ var StripePaymentFormWrapper = ({
         }
       });
       if (error) {
-        const errorMessage = error.message || "An unexpected error occurred.";
+        const errorMessage = error.message || copy.errors.paymentUnexpected;
         setMessage(errorMessage);
         setIsProcessing(false);
         if (onError) {
@@ -651,8 +172,8 @@ var StripePaymentFormWrapper = ({
             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.");
+            const error2 = err instanceof Error ? err : new Error(copy.errors.paymentProcessingFailed);
+            setMessage(copy.errors.paymentProcessingFailed);
             setIsProcessing(false);
             if (onError) {
               onError(error2);
@@ -663,14 +184,18 @@ var StripePaymentFormWrapper = ({
           setMessage("Payment successful!");
         }
       } else if (paymentIntent && paymentIntent.status === "requires_action") {
-        setMessage("Payment requires additional authentication. Please complete the verification.");
+        setMessage(copy.errors.paymentRequires3ds);
         setIsProcessing(false);
       } else if (paymentIntent) {
-        setMessage(`Payment status: ${paymentIntent.status || "processing"}`);
+        setMessage(
+          interpolate(copy.errors.paymentStatusPrefix, {
+            status: paymentIntent.status || "processing"
+          })
+        );
         setIsProcessing(false);
       }
     } catch (err) {
-      const error = err instanceof Error ? err : new Error("Unknown error occurred");
+      const error = err instanceof Error ? err : new Error(copy.errors.unknownError);
       setMessage(error.message);
       if (onError) {
         onError(error);
@@ -684,20 +209,22 @@ var StripePaymentFormWrapper = ({
   const cardElementOptions = {
     style: {
       base: {
-        fontSize: "16px",
-        color: "#424770",
+        fontSize: "17px",
+        lineHeight: "24px",
+        color: "#1e293b",
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
         "::placeholder": {
-          color: "#aab7c4"
+          color: "#94a3b8"
         }
       },
       invalid: {
-        color: "#9e2146"
+        color: "#dc2626"
       }
     },
     hidePostalCode: true
   };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    isReady ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    isReady ? /* @__PURE__ */ jsx2(
       CardElement,
       {
         options: cardElementOptions,
@@ -711,24 +238,9 @@ var StripePaymentFormWrapper = ({
           }
         }
       }
-    ) : /* @__PURE__ */ jsx3(
-      "div",
-      {
-        style: {
-          padding: "12px",
-          border: "1px solid #cbd5e1",
-          borderRadius: "0.375rem",
-          backgroundColor: "white",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          minHeight: "40px"
-        },
-        children: /* @__PURE__ */ jsx3(Spinner, { size: "sm" })
-      }
-    ),
-    message && !isSuccess && /* @__PURE__ */ jsx3("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
-    /* @__PURE__ */ jsx3(
+    ) : /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "52px" }, children: /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) }),
+    message && !isSuccess && /* @__PURE__ */ jsx2("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
+    /* @__PURE__ */ jsx2(
       "button",
       {
         type: "submit",
@@ -737,488 +249,538 @@ var StripePaymentFormWrapper = ({
         "aria-busy": isProcessing,
         "aria-disabled": !isReady || !cardComplete || isProcessing || !clientSecret,
         onClick: handleSubmit,
-        children: isProcessing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Spinner, { size: "sm" }),
-          /* @__PURE__ */ jsx3("span", { children: "Processing..." })
-        ] }) : submitButtonText
+        children: isProcessing ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Spinner, { size: "sm" }),
+          /* @__PURE__ */ jsx2("span", { children: copy.cta.processing })
+        ] }) : effectiveSubmitText
       }
     )
   ] });
 };
 
-// src/PaymentForm.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var PaymentForm = ({
+// src/components/CheckoutLayout.tsx
+import { useCallback, useContext, useEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// src/components/PlanSelector.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DefaultTree2 = () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  /* @__PURE__ */ jsx3(PlanSelector.Heading, { className: "solvapay-plan-selector-heading" }),
+  /* @__PURE__ */ jsx3(PlanSelector.Grid, { className: "solvapay-plan-selector-grid", children: /* @__PURE__ */ jsxs3(PlanSelector.Card, { className: "solvapay-plan-selector-card", children: [
+    /* @__PURE__ */ jsx3(PlanSelector.CardBadge, { className: "solvapay-plan-selector-card-badge" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardName, { className: "solvapay-plan-selector-card-name" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardPrice, { className: "solvapay-plan-selector-card-price" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardInterval, { className: "solvapay-plan-selector-card-interval" })
+  ] }) }),
+  /* @__PURE__ */ jsx3(PlanSelector.Loading, { className: "solvapay-plan-selector-loading" }),
+  /* @__PURE__ */ jsx3(PlanSelector.Error, { className: "solvapay-plan-selector-error" })
+] });
+var PlanSelector2 = (props) => {
+  const { children, className, ...rootProps } = props;
+  const rootClass = ["solvapay-plan-selector", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3(PlanSelector.Root, { ...rootProps, className: rootClass, children: children ?? /* @__PURE__ */ jsx3(DefaultTree2, {}) });
+};
+
+// src/components/ActivationFlow.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ActivationFlow2 = (props) => {
+  const { className, onBack, ...rootProps } = props;
+  const rootClass = ["solvapay-activation-flow", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Root, { ...rootProps, className: rootClass, children: [
+    /* @__PURE__ */ jsx4(SummaryStep, {}),
+    /* @__PURE__ */ jsx4(AmountStep, {}),
+    /* @__PURE__ */ jsx4(TopupPaymentStep, {}),
+    /* @__PURE__ */ jsx4(RetryingStep, {}),
+    /* @__PURE__ */ jsx4(ActivatedStep, {}),
+    /* @__PURE__ */ jsx4(ErrorStep, {}),
+    onBack && /* @__PURE__ */ jsx4(BackButton, { onBack })
+  ] });
+};
+var SummaryStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Summary, { className: "solvapay-activation-flow-summary", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-heading", children: copy.activationFlow.heading }),
+    /* @__PURE__ */ jsx4(CheckoutSummary, {}),
+    /* @__PURE__ */ jsx4(ActivationFlow.ActivateButton, { className: "solvapay-activation-flow-activate" })
+  ] });
+};
+var AmountStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.AmountPicker, { children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-topup-heading", children: copy.activationFlow.topupHeading }),
+    /* @__PURE__ */ jsx4("p", { className: "solvapay-activation-flow-topup-subheading", children: copy.activationFlow.topupSubheading }),
+    /* @__PURE__ */ jsx4(AmountPickerBody, {}),
+    /* @__PURE__ */ jsx4(ActivationFlow.ContinueButton, { className: "solvapay-activation-flow-continue" })
+  ] });
+};
+var AmountPickerBody = () => {
+  const ctx = useAmountPicker();
+  const { selectAmountLabel, customAmountLabel } = useAmountPickerCopy();
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx4("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
+    /* @__PURE__ */ jsx4("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ jsx4(
+      AmountPicker.Option,
+      {
+        amount,
+        className: "solvapay-amount-picker-pill"
+      },
+      amount
+    )) }),
+    /* @__PURE__ */ jsxs4("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
+      /* @__PURE__ */ jsx4("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
+      /* @__PURE__ */ jsx4(AmountPicker.Custom, { className: "solvapay-amount-picker-custom-input" })
+    ] })
+  ] });
+};
+var TopupPaymentStep = () => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "topupPayment") return null;
+  return /* @__PURE__ */ jsxs4("div", { "data-solvapay-activation-flow-topup-payment": "", children: [
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: ctx.backToSelectAmount,
+        className: "solvapay-activation-flow-change-amount",
+        children: copy.activationFlow.changeAmountButton
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      TopupForm,
+      {
+        amount: ctx.amountCents,
+        currency: ctx.currency,
+        onSuccess: ctx.onTopupSuccess,
+        onError: (err) => ctx.onError?.(err instanceof Error ? err : new Error(String(err)))
+      }
+    )
+  ] });
+};
+var RetryingStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Retrying, { className: "solvapay-activation-flow-retrying", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-heading", children: copy.activationFlow.retryingHeading }),
+    /* @__PURE__ */ jsx4("p", { children: copy.activationFlow.retryingSubheading })
+  ] });
+};
+var ActivatedStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Activated, { className: "solvapay-activation-flow-activated", children: [
+    /* @__PURE__ */ jsx4("h3", { children: copy.activationFlow.activatedHeading }),
+    /* @__PURE__ */ jsx4("p", { children: copy.activationFlow.activatedSubheading })
+  ] });
+};
+var ErrorStep = () => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "error") return null;
+  return /* @__PURE__ */ jsxs4("div", { className: "solvapay-activation-flow-error", role: "alert", children: [
+    /* @__PURE__ */ jsx4("p", { children: ctx.error }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: ctx.reset,
+        className: "solvapay-activation-flow-try-again",
+        children: copy.activationFlow.tryAgainButton
+      }
+    )
+  ] });
+};
+var BackButton = ({ onBack }) => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "summary") return null;
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      onClick: onBack,
+      className: "solvapay-activation-flow-back",
+      children: copy.activationFlow.backButton
+    }
+  );
+};
+
+// src/components/CheckoutLayout.tsx
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var BREAKPOINTS = {
+  chat: 480,
+  desktop: 768
+};
+function widthToSize(width) {
+  if (width < BREAKPOINTS.chat) return "chat";
+  if (width < BREAKPOINTS.desktop) return "mobile";
+  return "desktop";
+}
+var CheckoutLayout = ({
   planRef,
   productRef,
+  prefillCustomer,
+  size = "auto",
+  requireTermsAcceptance,
   onSuccess,
+  onResult,
+  onFreePlan,
   onError,
-  returnUrl,
-  submitButtonText = "Pay Now",
-  className,
-  buttonClassName
+  initialPlanRef,
+  onPlanSelect,
+  planSelector,
+  showBackButton = true,
+  submitButtonText,
+  returnUrl
 }) => {
-  const validPlanRef = planRef && typeof planRef === "string" ? planRef : "";
-  const {
-    loading: checkoutLoading,
-    error: checkoutError,
-    clientSecret,
-    startCheckout,
-    stripePromise
-  } = useCheckout({ planRef: validPlanRef, productRef });
-  const { refetch } = usePurchase();
-  const { processPayment } = useSolvaPay();
-  const hasInitializedRef = useRef3(false);
-  useEffect2(() => {
-    if (!hasInitializedRef.current && validPlanRef && !checkoutLoading && !checkoutError && !clientSecret) {
-      hasInitializedRef.current = true;
-      startCheckout().catch(() => {
-        hasInitializedRef.current = false;
-      });
-    }
-    if (validPlanRef && clientSecret) {
-      hasInitializedRef.current = true;
-    }
-  }, [validPlanRef, checkoutLoading, checkoutError, clientSecret, startCheckout]);
-  const handleSuccess = useCallback3(
-    async (paymentIntent) => {
-      let processingTimeout = false;
-      let processingResult = null;
-      const paymentIntentAny = paymentIntent;
-      if (processPayment && productRef) {
-        try {
-          const result = await processPayment({
-            paymentIntentId: paymentIntentAny.id,
-            productRef,
-            planRef
-          });
-          processingResult = result;
-          const isTimeout = result?.status === "timeout";
-          processingTimeout = isTimeout;
-          if (isTimeout) {
-            for (let attempt = 1; attempt <= 5; attempt++) {
-              const delay = attempt * 1e3;
-              await new Promise((resolve) => setTimeout(resolve, delay));
-              await refetch();
-            }
-            if (onSuccess) {
-              await onSuccess({
-                ...paymentIntentAny,
-                _processingTimeout: processingTimeout,
-                _processingResult: processingResult
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              });
-            }
-            throw new Error("Payment processing timed out");
-          } else {
-            await refetch();
-          }
-        } catch (error) {
-          console.error("[PaymentForm] Failed to process payment:", error);
-          if (onSuccess) {
-            try {
-              await onSuccess({
-                ...paymentIntentAny,
-                _processingError: error
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              });
-            } catch {
-            }
-          }
-          throw error;
-        }
-      } else {
-        await refetch();
-      }
-      if (onSuccess && !processingTimeout) {
-        await onSuccess({
-          ...paymentIntentAny,
-          _processingTimeout: processingTimeout,
-          _processingResult: processingResult
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        });
+  const rootRef = useRef(null);
+  const [autoSize, setAutoSize] = useState2("desktop");
+  const copy = useCopy();
+  useEffect(() => {
+    if (size !== "auto") return;
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setAutoSize(widthToSize(entry.contentRect.width));
       }
-    },
-    [processPayment, productRef, planRef, refetch, onSuccess]
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [size]);
+  const resolvedSize = size === "auto" ? autoSize : size;
+  const [selectedPlanRef, setSelectedPlanRef] = useState2(
+    planRef ?? initialPlanRef ?? null
   );
-  const handleError = useCallback3(
-    (err) => {
-      if (onError) {
-        onError(err);
-      }
+  const [userStep, setUserStep] = useState2(
+    planRef ? "pay" : selectedPlanRef ? "pay" : "select"
+  );
+  const effectivePlanRef = planRef ?? selectedPlanRef ?? void 0;
+  const { plan: resolvedPlan } = usePlan({
+    planRef: effectivePlanRef,
+    productRef
+  });
+  const isUsageBased = resolvedPlan?.type === "usage-based";
+  const step = useMemo(() => {
+    if (userStep === "pay" && isUsageBased) return "activate";
+    if (userStep === "activate" && resolvedPlan && !isUsageBased) return "pay";
+    return userStep;
+  }, [userStep, isUsageBased, resolvedPlan]);
+  const handlePlanSelect = useCallback(
+    (ref, plan) => {
+      setSelectedPlanRef(ref);
+      onPlanSelect?.(ref, plan);
+      setUserStep(plan.type === "usage-based" ? "activate" : "pay");
     },
-    [onError]
+    [onPlanSelect]
   );
-  const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const isValidPlanRef = planRef && typeof planRef === "string";
-  const hasError = !!checkoutError;
-  const hasStripeData = !!(stripePromise && clientSecret);
-  const elementsOptions = useMemo2(() => {
-    if (!clientSecret) return void 0;
-    return { clientSecret };
-  }, [clientSecret]);
-  const [hasMountedElements, setHasMountedElements] = useState4(false);
-  useEffect2(() => {
-    if (hasStripeData) {
-      setHasMountedElements(true);
-    }
-  }, [hasStripeData]);
-  const shouldRenderElements = hasStripeData || hasMountedElements && stripePromise && clientSecret;
-  return /* @__PURE__ */ jsx4("div", { className, children: !isValidPlanRef ? /* @__PURE__ */ jsx4("div", { children: "PaymentForm: planRef is required and must be a string" }) : hasError ? /* @__PURE__ */ jsxs3("div", { children: [
-    /* @__PURE__ */ jsx4("div", { children: "Payment initialization failed" }),
-    /* @__PURE__ */ jsx4("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__ */ jsx4(
-      Elements,
-      {
-        stripe: stripePromise,
-        options: elementsOptions,
-        children: /* @__PURE__ */ jsx4(
-          StripePaymentFormWrapper,
+  const handleBack = useCallback(() => {
+    if (planRef) return;
+    setUserStep("select");
+  }, [planRef]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: rootRef,
+      "data-solvapay-checkout-layout": resolvedSize,
+      "data-solvapay-step": step,
+      className: "solvapay-checkout-layout",
+      children: [
+        !planRef && showBackButton && step !== "select" && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: handleBack,
+            "data-solvapay-checkout-back": "",
+            className: "solvapay-back",
+            children: copy.planSelector.backButton
+          }
+        ),
+        step === "select" && /* @__PURE__ */ jsx5(
+          SelectStep,
+          {
+            productRef: productRef ?? "",
+            initialPlanRef: initialPlanRef ?? selectedPlanRef ?? void 0,
+            filter: planSelector?.filter,
+            sortBy: planSelector?.sortBy,
+            popularPlanRef: planSelector?.popularPlanRef,
+            onContinue: handlePlanSelect
+          }
+        ),
+        step === "activate" && resolvedPlan && productRef && /* @__PURE__ */ jsx5(
+          ActivationFlow2,
+          {
+            productRef,
+            planRef: effectivePlanRef,
+            onBack: planRef ? void 0 : handleBack,
+            onSuccess: (result) => onResult?.(result),
+            onError
+          }
+        ),
+        step === "pay" && /* @__PURE__ */ jsx5(
+          PaymentForm2,
           {
-            onSuccess: handleSuccess,
-            onError: handleError,
-            returnUrl: finalReturnUrl,
+            planRef: effectivePlanRef,
+            productRef,
+            prefillCustomer,
+            requireTermsAcceptance,
+            onSuccess,
+            onResult,
+            onFreePlan,
+            onError,
             submitButtonText,
-            buttonClassName,
-            clientSecret
+            returnUrl
           }
         )
-      },
-      clientSecret
+      ]
+    }
+  );
+};
+async function defaultListPlans(productRef, config) {
+  const base = config?.api?.listPlans || "/api/list-plans";
+  const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+  const fetchFn = config?.fetch || fetch;
+  const { headers } = await buildRequestHeaders(config);
+  const res = await fetchFn(url, { method: "GET", headers });
+  if (!res.ok) {
+    const error = new Error(`Failed to fetch plans: ${res.statusText || res.status}`);
+    config?.onError?.(error, "listPlans");
+    throw error;
+  }
+  const data = await res.json();
+  return data.plans ?? [];
+}
+var SelectStep = ({ productRef, initialPlanRef, filter, sortBy, popularPlanRef, onContinue }) => {
+  const copy = useCopy();
+  const solva = useContext(SolvaPayContext);
+  const config = solva?._config;
+  const fetcher = useCallback(
+    (ref) => defaultListPlans(ref, config),
+    [config]
+  );
+  const { plans, selectedPlan } = usePlans({
+    productRef,
+    fetcher,
+    filter,
+    sortBy,
+    autoSelectFirstPaid: true,
+    initialPlanRef
+  });
+  const [userSelected, setUserSelected] = useState2(null);
+  const selected = userSelected ?? (selectedPlan && selectedPlan.requiresPayment !== false ? { ref: selectedPlan.reference, plan: selectedPlan } : null);
+  const autoSkipRef = useRef(false);
+  useEffect(() => {
+    if (autoSkipRef.current) return;
+    const selectable = plans.filter((p) => p.requiresPayment !== false);
+    if (plans.length === 1 && selectable.length === 1) {
+      autoSkipRef.current = true;
+      onContinue(selectable[0].reference, selectable[0]);
+    }
+  }, [plans, onContinue]);
+  const handleSelect = useCallback((ref, plan) => {
+    setUserSelected({ ref, plan });
+  }, []);
+  const continueLabel = useMemo(() => copy.planSelector.continueButton, [copy]);
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsx5(
+      PlanSelector2,
+      {
+        productRef,
+        initialPlanRef,
+        filter,
+        sortBy,
+        popularPlanRef,
+        autoSelectFirstPaid: true,
+        onSelect: handleSelect
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        className: "solvapay-continue",
+        "data-solvapay-checkout-continue": "",
+        "data-state": selected ? "idle" : "disabled",
+        disabled: !selected,
+        onClick: () => {
+          if (selected) onContinue(selected.ref, selected.plan);
+        },
+        children: continueLabel
+      }
     )
-  ) : (
-    // Loading state before Stripe data is available
-    /* @__PURE__ */ jsxs3("div", { children: [
-      /* @__PURE__ */ jsx4(
-        "div",
-        {
-          style: {
-            minHeight: "40px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ jsx4(Spinner, { size: "md" })
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "submit",
-          disabled: true,
-          className: buttonClassName,
-          "aria-busy": "false",
-          "aria-disabled": "true",
-          children: submitButtonText
-        }
-      )
-    ] })
-  ) });
+  ] });
 };
 
-// src/components/ProductBadge.tsx
-import React4 from "react";
-import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
-var ProductBadge = ({
-  children,
-  as: Component = "div",
+// src/components/AmountPicker.tsx
+import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var AmountPicker2 = ({
+  currency,
+  minAmount,
+  maxAmount,
+  showCreditEstimate = true,
+  onChange,
   className
 }) => {
-  const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
-  const [hasLoadedOnce, setHasLoadedOnce] = React4.useState(false);
-  React4.useEffect(() => {
-    if (!loading) {
-      setHasLoadedOnce(true);
-    }
-  }, [loading]);
-  const planToDisplay = activePurchase?.productName || null;
-  const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
-  if (children) {
-    return /* @__PURE__ */ jsx5(Fragment2, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
-  }
-  if (!shouldShow) {
-    return null;
-  }
-  const computedClassName = typeof className === "function" ? className({ purchases }) : className;
-  return /* @__PURE__ */ jsx5(
-    Component,
+  const rootClass = ["solvapay-amount-picker", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6(
+    AmountPicker.Root,
     {
-      className: computedClassName,
-      "data-loading": loading,
-      "data-has-purchase": !!activePurchase,
-      "data-has-paid-purchase": hasPaidPurchase,
-      role: "status",
-      "aria-live": "polite",
-      "aria-busy": loading,
-      "aria-label": `Current product: ${planToDisplay}`,
-      children: planToDisplay
+      currency,
+      minAmount,
+      maxAmount,
+      onChange,
+      className: rootClass,
+      children: /* @__PURE__ */ jsx6(DefaultTree3, { showCreditEstimate })
     }
   );
 };
-var PlanBadge = ProductBadge;
-
-// src/components/PurchaseGate.tsx
-import { Fragment as Fragment3, jsx as jsx6 } from "react/jsx-runtime";
-var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
-  const { purchases, loading, hasProduct } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
-  return /* @__PURE__ */ jsx6(Fragment3, { children: children({
-    hasAccess,
-    purchases,
-    loading
-  }) });
+var DefaultTree3 = ({ showCreditEstimate }) => {
+  const ctx = useAmountPicker();
+  const { selectAmountLabel, customAmountLabel, creditEstimate } = useAmountPickerCopy();
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
+    /* @__PURE__ */ jsx6("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ jsx6(
+      AmountPicker.Option,
+      {
+        amount,
+        className: "solvapay-amount-picker-pill"
+      },
+      amount
+    )) }),
+    /* @__PURE__ */ jsxs6("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
+      /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
+      /* @__PURE__ */ jsxs6("div", { className: "solvapay-amount-picker-custom-row", children: [
+        /* @__PURE__ */ jsx6("span", { className: "solvapay-amount-picker-currency-symbol", children: ctx.currencySymbol }),
+        /* @__PURE__ */ jsx6(AmountPicker.Custom, { className: "solvapay-amount-picker-custom-input" })
+      ] })
+    ] }),
+    showCreditEstimate && ctx.estimatedCredits != null && /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-credit-estimate", children: creditEstimate(ctx.estimatedCredits) }),
+    ctx.error && /* @__PURE__ */ jsx6("p", { role: "alert", className: "solvapay-amount-picker-error", children: ctx.error })
+  ] });
 };
 
-// src/components/PricingSelector.tsx
-import { useCallback as useCallback5, useMemo as useMemo4 } from "react";
-
-// src/hooks/usePlans.ts
-import { useState as useState5, useEffect as useEffect3, useCallback as useCallback4, useMemo as useMemo3, useRef as useRef4 } from "react";
-var plansCache = /* @__PURE__ */ new Map();
-var CACHE_DURATION2 = 5 * 60 * 1e3;
-function usePlans(options) {
-  const { fetcher, productRef, filter, sortBy, autoSelectFirstPaid = false } = options;
-  const [plans, setPlans] = useState5([]);
-  const [loading, setLoading] = useState5(true);
-  const [error, setError] = useState5(null);
-  const [selectedPlanIndex, setSelectedPlanIndex] = useState5(0);
-  const fetcherRef = useRef4(fetcher);
-  const filterRef = useRef4(filter);
-  const sortByRef = useRef4(sortBy);
-  const autoSelectFirstPaidRef = useRef4(autoSelectFirstPaid);
-  useEffect3(() => {
-    fetcherRef.current = fetcher;
-  }, [fetcher]);
-  useEffect3(() => {
-    filterRef.current = filter;
-  }, [filter]);
-  useEffect3(() => {
-    sortByRef.current = sortBy;
-  }, [sortBy]);
-  useEffect3(() => {
-    autoSelectFirstPaidRef.current = autoSelectFirstPaid;
-  }, [autoSelectFirstPaid]);
-  const fetchPlans = useCallback4(
-    async (force = false) => {
-      if (!productRef) {
-        setError(new Error("Product reference not configured"));
-        setLoading(false);
-        return;
-      }
-      const cached = plansCache.get(productRef);
-      const now = Date.now();
-      if (!force && cached && now - cached.timestamp < CACHE_DURATION2) {
-        const cachedPlans = cached.plans;
-        let processedPlans = filterRef.current ? cachedPlans.filter(filterRef.current) : cachedPlans;
-        if (sortByRef.current) {
-          processedPlans = [...processedPlans].sort(sortByRef.current);
-        }
-        setPlans(processedPlans);
-        setLoading(false);
-        setError(null);
-        if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-          setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-        }
-        return;
-      }
-      if (cached?.promise) {
-        try {
-          setLoading(true);
-          const fetchedPlans = await cached.promise;
-          let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
-          if (sortByRef.current) {
-            processedPlans = [...processedPlans].sort(sortByRef.current);
-          }
-          setPlans(processedPlans);
-          setError(null);
-          if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-            const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-            setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-          }
-        } catch (err) {
-          setError(err instanceof Error ? err : new Error("Failed to load plans"));
-        } finally {
-          setLoading(false);
-        }
-        return;
-      }
-      try {
-        setLoading(true);
-        setError(null);
-        const fetchPromise = fetcherRef.current(productRef);
-        plansCache.set(productRef, {
-          plans: [],
-          timestamp: now,
-          promise: fetchPromise
-        });
-        const fetchedPlans = await fetchPromise;
-        plansCache.set(productRef, {
-          plans: fetchedPlans,
-          timestamp: now,
-          promise: null
-        });
-        let processedPlans = filterRef.current ? fetchedPlans.filter(filterRef.current) : fetchedPlans;
-        if (sortByRef.current) {
-          processedPlans = [...processedPlans].sort(sortByRef.current);
-        }
-        setPlans(processedPlans);
-        if (autoSelectFirstPaidRef.current && processedPlans.length > 0) {
-          const firstPaidIndex = processedPlans.findIndex((plan) => plan.price && plan.price > 0);
-          setSelectedPlanIndex(firstPaidIndex >= 0 ? firstPaidIndex : 0);
-        }
-      } catch (err) {
-        plansCache.delete(productRef);
-        setError(err instanceof Error ? err : new Error("Failed to load plans"));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [productRef]
-  );
-  useEffect3(() => {
-    fetchPlans();
-  }, [fetchPlans]);
-  const selectedPlan = useMemo3(() => {
-    return plans[selectedPlanIndex] || null;
-  }, [plans, selectedPlanIndex]);
-  const selectPlan = useCallback4(
-    (planRef) => {
-      const index = plans.findIndex((p) => p.reference === planRef);
-      if (index >= 0) {
-        setSelectedPlanIndex(index);
-      }
-    },
-    [plans]
+// src/components/CancelledPlanNotice.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var CancelledPlanNotice2 = ({
+  onReactivated,
+  onError,
+  className
+}) => {
+  const rootClass = ["solvapay-cancelled-notice", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7(
+    CancelledPlanNotice.Root,
+    {
+      onReactivated,
+      onError,
+      className: rootClass,
+      children: [
+        /* @__PURE__ */ jsx7(CancelledPlanNotice.Heading, { className: "solvapay-cancelled-notice-heading" }),
+        /* @__PURE__ */ jsxs7("div", { className: "solvapay-cancelled-notice-details", children: [
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.Expires, { className: "solvapay-cancelled-notice-expires" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.DaysRemaining, { className: "solvapay-cancelled-notice-days-remaining" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.AccessUntil, { className: "solvapay-cancelled-notice-access-until" })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "solvapay-cancelled-notice-footer", children: [
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.CancelledOn, { className: "solvapay-cancelled-notice-cancelled-on" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.Reason, { className: "solvapay-cancelled-notice-reason" })
+        ] }),
+        /* @__PURE__ */ jsx7(CancelledPlanNotice.ReactivateButton, { className: "solvapay-cancelled-notice-reactivate" })
+      ]
+    }
   );
-  return {
-    plans,
-    loading,
-    error,
-    selectedPlanIndex,
-    selectedPlan,
-    setSelectedPlanIndex,
-    selectPlan,
-    refetch: () => fetchPlans(true)
-    // Force refetch
-  };
-}
+};
 
-// src/components/PricingSelector.tsx
-import { Fragment as Fragment4, jsx as jsx7 } from "react/jsx-runtime";
-var PricingSelector = ({
+// src/components/CreditGate.tsx
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var AllowedContent = ({ children }) => {
+  const ctx = useCreditGate();
+  if (ctx.state !== "allowed") return null;
+  return /* @__PURE__ */ jsx8(Fragment7, { children });
+};
+var DefaultBlockedTree = ({ fallback }) => {
+  const ctx = useCreditGate();
+  if (ctx.state !== "blocked") return null;
+  if (fallback) return /* @__PURE__ */ jsx8(Fragment7, { children: fallback });
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(CreditGate.Heading, { className: "solvapay-credit-gate-heading" }),
+    /* @__PURE__ */ jsx8(CreditGate.Subheading, { className: "solvapay-credit-gate-subheading" }),
+    /* @__PURE__ */ jsx8(CreditGate.Topup, {})
+  ] });
+};
+var CreditGate2 = ({
+  minCredits,
   productRef,
-  fetcher,
-  filter,
-  sortBy,
-  autoSelectFirstPaid,
+  topupAmount,
+  topupCurrency,
+  fallback,
+  className,
   children
 }) => {
-  const { purchases } = usePurchase();
-  const plansHook = usePlans({
-    productRef,
-    fetcher,
-    filter,
-    sortBy,
-    autoSelectFirstPaid
-  });
-  const { plans } = plansHook;
-  const isPaidPlan = useCallback5(
-    (planRef) => {
-      const plan = plans.find((p) => p.reference === planRef);
-      return plan ? (plan.price ?? 0) > 0 && !plan.isFreeTier : true;
-    },
-    [plans]
-  );
-  const activePurchase = useMemo4(() => {
-    const activePurchases = purchases.filter((p) => p.status === "active");
-    return activePurchases.sort(
-      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
-    )[0] || null;
-  }, [purchases]);
-  const isCurrentPlan = useCallback5(
-    (planRef) => {
-      return activePurchase?.planSnapshot?.reference === planRef;
-    },
-    [activePurchase]
+  const rootClass = ["solvapay-credit-gate", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs8(
+    CreditGate.Root,
+    {
+      minCredits,
+      productRef,
+      topupAmount,
+      topupCurrency,
+      className: rootClass,
+      children: [
+        /* @__PURE__ */ jsx8(AllowedContent, { children }),
+        /* @__PURE__ */ jsx8(DefaultBlockedTree, { fallback })
+      ]
+    }
   );
-  return /* @__PURE__ */ jsx7(Fragment4, { children: children({
-    ...plansHook,
-    purchases,
-    isPaidPlan,
-    isCurrentPlan
-  }) });
 };
-var PlanSelector = PricingSelector;
-
-// src/hooks/usePurchaseStatus.ts
-import { useMemo as useMemo5, useCallback as useCallback6 } from "react";
-function usePurchaseStatus() {
-  const { purchases } = usePurchase();
-  const isPaidPurchase2 = useCallback6((p) => {
-    return (p.amount ?? 0) > 0;
-  }, []);
-  const purchaseData = useMemo5(() => {
-    const cancelledPaidPurchases = purchases.filter((p) => {
-      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
-    });
-    const cancelledPurchase = cancelledPaidPurchases.sort(
-      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
-    )[0] || null;
-    const shouldShowCancelledNotice = !!cancelledPurchase;
-    return {
-      cancelledPurchase,
-      shouldShowCancelledNotice
-    };
-  }, [purchases, isPaidPurchase2]);
-  const formatDate = useCallback6((dateString) => {
-    if (!dateString) return null;
-    return new Date(dateString).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric"
-    });
-  }, []);
-  const getDaysUntilExpiration = useCallback6((endDate) => {
-    if (!endDate) return null;
-    const now = /* @__PURE__ */ new Date();
-    const expiration = new Date(endDate);
-    const diffTime = expiration.getTime() - now.getTime();
-    const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
-    return diffDays > 0 ? diffDays : 0;
-  }, []);
-  return {
-    cancelledPurchase: purchaseData.cancelledPurchase,
-    shouldShowCancelledNotice: purchaseData.shouldShowCancelledNotice,
-    formatDate,
-    getDaysUntilExpiration
-  };
-}
 export {
-  PaymentForm,
+  ActivationFlow2 as ActivationFlow,
+  AmountPicker2 as AmountPicker,
+  BalanceBadge,
+  CancelPlanButton,
+  CancelledPlanNotice2 as CancelledPlanNotice,
+  CheckoutLayout,
+  CheckoutSummary,
+  CopyContext,
+  CopyProvider,
+  CreditGate2 as CreditGate,
+  MandateText,
+  PaymentForm2 as PaymentForm,
+  PaymentFormContext,
+  PaymentFormProvider,
   PlanBadge,
-  PlanSelector,
-  PricingSelector,
+  PlanSelector2 as PlanSelector,
   ProductBadge,
   PurchaseGate,
   SolvaPayProvider,
   Spinner,
   StripePaymentFormWrapper,
+  TopupForm,
+  confirmPayment,
   defaultAuthAdapter,
+  deriveVariant,
+  enCopy,
   filterPurchases,
+  formatPrice,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
   getMostRecentPurchase,
   getPrimaryPurchase,
+  interpolate,
   isPaidPurchase,
+  mergeCopy,
+  resolveCta,
+  useActivation,
+  useBalance,
   useCheckout,
+  useCopy,
   useCustomer,
+  useLocale,
+  useMerchant,
+  usePaymentForm,
+  usePlan,
   usePlans,
+  useProduct,
   usePurchase,
+  usePurchaseActions,
   usePurchaseStatus,
-  useSolvaPay
+  useSolvaPay,
+  useTopup,
+  useTopupAmountSelector
 };