@burdenoff/website-sdk 0.0.0-dev

package/dist/components/waitlist.mjs

@@ -0,0 +1,841 @@
+import * as React from 'react';
+import { createContext, useState, useContext, useRef } from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Helmet } from 'react-helmet-async';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/client/security.ts
+var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "::1"]);
+var RESERVED_HEADERS = /* @__PURE__ */ new Set([
+  "authorization",
+  "cookie",
+  "x-actor-id",
+  "x-actor-type",
+  "x-consent-granted-by",
+  "x-consent-scope",
+  "x-consent-granted-at",
+  "x-consent-expires-at"
+]);
+function validateGatewayUrl(value) {
+  let url;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error("Gateway URL must be a valid absolute URL");
+  }
+  if (url.protocol === "https:") {
+    return url.toString();
+  }
+  if (url.protocol === "http:" && LOOPBACK_HOSTS.has(url.hostname.toLowerCase())) {
+    return url.toString();
+  }
+  throw new Error("Gateway URL must use HTTPS unless it targets localhost");
+}
+function sanitizeHeaders(headers) {
+  if (!headers) return void 0;
+  return Object.fromEntries(
+    Object.entries(headers).filter(
+      ([key]) => !RESERVED_HEADERS.has(key.toLowerCase())
+    )
+  );
+}
+
+// src/client/graphql-client.ts
+var _WebSDKClient = class _WebSDKClient {
+  constructor(config) {
+    __publicField(this, "config");
+    __publicField(this, "queryCache", /* @__PURE__ */ new Map());
+    __publicField(this, "inflight", /* @__PURE__ */ new Map());
+    this.config = {
+      ...config,
+      gatewayUrl: validateGatewayUrl(config.gatewayUrl),
+      headers: sanitizeHeaders(config.headers)
+    };
+  }
+  getConfig() {
+    return this.config;
+  }
+  /**
+   * Execute a GraphQL query (with deduplication and caching)
+   */
+  async query(query, variables) {
+    const cacheKey = JSON.stringify({ query, variables });
+    const cached = this.queryCache.get(cacheKey);
+    if (cached) {
+      if (Date.now() - cached.ts < _WebSDKClient.CACHE_TTL) {
+        return cached.data;
+      }
+      this.queryCache.delete(cacheKey);
+    }
+    const existing = this.inflight.get(cacheKey);
+    if (existing) {
+      return existing;
+    }
+    const promise = this.request(query, variables).then((result) => {
+      if (result.data && !result.errors?.length) {
+        if (this.queryCache.size >= _WebSDKClient.MAX_CACHE_ENTRIES) {
+          const oldestEntry = this.queryCache.keys().next().value;
+          if (oldestEntry) {
+            this.queryCache.delete(oldestEntry);
+          }
+        }
+        this.queryCache.set(cacheKey, { data: result, ts: Date.now() });
+      }
+      return result;
+    }).finally(() => {
+      this.inflight.delete(cacheKey);
+    });
+    this.inflight.set(cacheKey, promise);
+    return promise;
+  }
+  /**
+   * Execute a GraphQL mutation
+   */
+  async mutate(mutation, variables) {
+    return this.request(mutation, variables);
+  }
+  async request(query, variables) {
+    try {
+      const response = await fetch(this.config.gatewayUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-product-id": this.config.productId,
+          ...this.config.headers
+        },
+        body: JSON.stringify({ query, variables })
+      });
+      if (!response.ok) {
+        console.error(
+          "[WebSDK] GraphQL request failed",
+          response.status,
+          response.statusText
+        );
+        return {
+          errors: [
+            {
+              message: `HTTP ${response.status}: ${response.statusText}`,
+              extensions: { code: `HTTP_${response.status}` }
+            }
+          ]
+        };
+      }
+      return await response.json();
+    } catch (error) {
+      console.error(
+        "[WebSDK] Network error",
+        error instanceof Error ? error.message : "unknown error"
+      );
+      return {
+        errors: [
+          {
+            message: error instanceof Error ? error.message : "Network error",
+            extensions: { code: "NETWORK_ERROR" }
+          }
+        ]
+      };
+    }
+  }
+};
+__publicField(_WebSDKClient, "CACHE_TTL", 5 * 60 * 1e3);
+// 5 minutes
+__publicField(_WebSDKClient, "MAX_CACHE_ENTRIES", 100);
+var WebSDKContext = createContext(null);
+function useWebSDK() {
+  const client = useContext(WebSDKContext);
+  if (!client) {
+    throw new Error("useWebSDK must be used within a WebSDKProvider");
+  }
+  return client;
+}
+function useWebSDKConfig() {
+  const client = useWebSDK();
+  return client.getConfig();
+}
+var ProductContext = createContext({
+  product: null,
+  loading: true,
+  error: null,
+  hasProvider: false,
+  refetch: () => {
+  }
+});
+function useProduct() {
+  return useContext(ProductContext);
+}
+function PageHead({
+  title,
+  description,
+  productName,
+  keywords,
+  image,
+  url,
+  favicon,
+  robots = "index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",
+  locale = "en_US",
+  twitterHandle,
+  themeColor = "#000000",
+  structuredData,
+  additionalMeta
+}) {
+  const fullTitle = productName && !title.includes(productName) ? `${title} | ${productName}` : title;
+  const fullImageUrl = image && !image.startsWith("http") && url ? `${url.replace(/\/$/, "")}${image}` : image;
+  const structuredDataItems = structuredData ? Array.isArray(structuredData) ? structuredData : [structuredData] : [];
+  return /* @__PURE__ */ jsxs(Helmet, { children: [
+    /* @__PURE__ */ jsx("title", { children: fullTitle }),
+    /* @__PURE__ */ jsx("meta", { name: "title", content: fullTitle }),
+    description && /* @__PURE__ */ jsx("meta", { name: "description", content: description }),
+    keywords && /* @__PURE__ */ jsx("meta", { name: "keywords", content: keywords }),
+    /* @__PURE__ */ jsx("meta", { name: "author", content: "Burdenoff Consultancy Services Pvt Ltd" }),
+    /* @__PURE__ */ jsx("meta", { name: "robots", content: robots }),
+    url && /* @__PURE__ */ jsx("link", { rel: "canonical", href: url }),
+    favicon && /* @__PURE__ */ jsx("link", { rel: "icon", href: favicon }),
+    /* @__PURE__ */ jsx("meta", { property: "og:type", content: "website" }),
+    /* @__PURE__ */ jsx("meta", { property: "og:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsx("meta", { property: "og:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsx("meta", { property: "og:image", content: fullImageUrl }),
+    url && /* @__PURE__ */ jsx("meta", { property: "og:url", content: url }),
+    /* @__PURE__ */ jsx("meta", { property: "og:locale", content: locale }),
+    productName && /* @__PURE__ */ jsx("meta", { property: "og:site_name", content: productName }),
+    /* @__PURE__ */ jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
+    /* @__PURE__ */ jsx("meta", { name: "twitter:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsx("meta", { name: "twitter:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsx("meta", { name: "twitter:image", content: fullImageUrl }),
+    twitterHandle && /* @__PURE__ */ jsx("meta", { name: "twitter:creator", content: twitterHandle }),
+    /* @__PURE__ */ jsx("meta", { name: "theme-color", content: themeColor }),
+    structuredDataItems.map((data, index) => /* @__PURE__ */ jsx("script", { type: "application/ld+json", children: JSON.stringify(data) }, `ld-${index}`)),
+    additionalMeta?.map((meta, index) => /* @__PURE__ */ jsx(
+      "meta",
+      {
+        ...meta.name ? { name: meta.name } : {},
+        ...meta.property ? { property: meta.property } : {},
+        content: meta.content
+      },
+      `meta-${index}`
+    ))
+  ] });
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+var Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var waitlistPageSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  email: z.string().email("Please enter a valid email address"),
+  company: z.string().optional(),
+  reason: z.string().optional()
+});
+var JOIN_WAITLIST_MUTATION = (
+  /* GraphQL */
+  `
+  mutation JoinWaitlist($input: JoinWaitlistInput!) {
+    joinWaitlist(input: $input) {
+      id
+      email
+      name
+      status
+      createdAt
+    }
+  }
+`
+);
+async function joinWaitlist(client, data, productId) {
+  try {
+    const result = await client.mutate(JOIN_WAITLIST_MUTATION, {
+      input: {
+        email: data.email.trim().toLowerCase(),
+        platformProductId: productId,
+        name: data.name?.trim() || void 0,
+        company: data.company?.trim() || void 0,
+        reason: data.reason?.trim() || void 0,
+        context: {
+          source: "website",
+          referrer: typeof window !== "undefined" ? window.location.href : "",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        }
+      }
+    });
+    if (result.errors?.length) {
+      const errorMsg = result.errors[0]?.message ?? "Failed to join waitlist";
+      if (errorMsg.toLowerCase().includes("already")) {
+        return {
+          success: false,
+          message: "You are already on the waitlist!"
+        };
+      }
+      return { success: false, message: errorMsg };
+    }
+    return { success: true, message: "You have been added to the waitlist!" };
+  } catch (error) {
+    console.error("Waitlist signup error:", error);
+    return { success: false, message: "Network error. Please try again." };
+  }
+}
+function useRateLimit(maxAttempts, windowMinutes) {
+  const rateLimitRef = useRef(null);
+  const [isLimited, setIsLimited] = useState(false);
+  const [resetTime, setResetTime] = useState(null);
+  function recordAttempt() {
+    const now = Date.now();
+    const state = rateLimitRef.current;
+    if (state && now > state.resetTime) {
+      rateLimitRef.current = null;
+    }
+    const current = rateLimitRef.current;
+    if (!current) {
+      rateLimitRef.current = {
+        attempts: 1,
+        resetTime: now + windowMinutes * 60 * 1e3
+      };
+      return false;
+    }
+    current.attempts += 1;
+    if (current.attempts >= maxAttempts) {
+      setIsLimited(true);
+      setResetTime(new Date(current.resetTime));
+      return true;
+    }
+    return false;
+  }
+  function checkLimit() {
+    const state = rateLimitRef.current;
+    if (!state) return false;
+    if (Date.now() > state.resetTime) {
+      rateLimitRef.current = null;
+      setIsLimited(false);
+      setResetTime(null);
+      return false;
+    }
+    return state.attempts >= maxAttempts;
+  }
+  return { isLimited, resetTime, recordAttempt, checkLimit };
+}
+function WaitlistPage({
+  productName,
+  heroTitle = "Join the Waitlist",
+  heroSubtitle = "Be among the first to experience what's coming next",
+  heroDescription,
+  successMessage = "You have been added to the waitlist!",
+  errorMessage = "Failed to join waitlist. Please try again.",
+  className,
+  seo
+}) {
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const {
+    product,
+    loading: productLoading,
+    error: productError,
+    hasProvider
+  } = useProduct();
+  const displayName = productName ?? product?.name ?? config.productId;
+  const productStatus = product?.status;
+  const canCheckStatus = Boolean(config.productSlug);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { isLimited, resetTime, recordAttempt, checkLimit } = useRateLimit(
+    3,
+    15
+  );
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset
+  } = useForm({
+    resolver: zodResolver(waitlistPageSchema)
+  });
+  if (canCheckStatus && !hasProvider) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: "Waitlist Unavailable" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
+          "Product status checks require ",
+          /* @__PURE__ */ jsx("code", { children: "ProductProvider" }),
+          " to be mounted. Please update your integration configuration."
+        ] })
+      ] }) })
+    ] });
+  }
+  if (canCheckStatus && productLoading) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: "Loading\u2026" }),
+        /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: "Fetching product status." })
+      ] }) })
+    ] });
+  }
+  if (canCheckStatus && (productError || !productStatus)) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: "Waitlist Unavailable" }),
+        /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: "We can\u2019t confirm waitlist availability right now. Please try again later." })
+      ] }) })
+    ] });
+  }
+  if (canCheckStatus && (productStatus === "ACTIVE" || productStatus === "RELEASED")) {
+    const appUrl = product?.appUrl || product?.website || "#";
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8", children: [
+        /* @__PURE__ */ jsxs("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: [
+          displayName,
+          " is now available!"
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
+          "Great news \u2014 ",
+          displayName,
+          " is open to everyone. Sign up or log in to get started."
+        ] }),
+        /* @__PURE__ */ jsx(Button, { size: "lg", asChild: true, children: /* @__PURE__ */ jsx("a", { href: appUrl, target: "_blank", rel: "noopener noreferrer", children: "Get Started" }) })
+      ] }) })
+    ] });
+  }
+  if (canCheckStatus && (productStatus === "DRAFT" || productStatus === "COMING_SOON")) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-8", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: "Coming Soon" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
+          displayName,
+          " is not yet accepting waitlist signups. Check back soon!"
+        ] })
+      ] }) })
+    ] });
+  }
+  if (canCheckStatus && productStatus !== "WAITLIST") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      seo && /* @__PURE__ */ jsx(
+        PageHead,
+        {
+          title: seo.title ?? "",
+          description: seo.description ?? "",
+          keywords: seo.keywords,
+          image: seo.image,
+          url: seo.url
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "relative overflow-hidden py-24 lg:py-32", children: /* @__PURE__ */ jsxs("div", { className: "relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight sm:text-5xl text-foreground", children: "Waitlist Unavailable" }),
+        /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground", children: [
+          displayName,
+          " is not accepting waitlist signups right now."
+        ] })
+      ] }) })
+    ] });
+  }
+  const onSubmit = async (data) => {
+    if (canCheckStatus && productStatus !== "WAITLIST") {
+      toast.error("This product is not accepting waitlist signups right now.");
+      return;
+    }
+    if (checkLimit()) {
+      toast.error(
+        `Too many attempts. Please try again after ${resetTime?.toLocaleTimeString()}`
+      );
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const result = await joinWaitlist(
+        client,
+        data,
+        product?.id || config.productId
+      );
+      if (result.success) {
+        toast.success(result.message ?? successMessage);
+        reset();
+      } else {
+        toast.error(result.message ?? errorMessage);
+      }
+      recordAttempt();
+    } catch (_error) {
+      toast.error(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    seo && /* @__PURE__ */ jsx(
+      PageHead,
+      {
+        title: seo.title ?? `Join the Waitlist - ${displayName}`,
+        description: seo.description ?? heroDescription ?? heroSubtitle,
+        productName: displayName,
+        keywords: seo.keywords,
+        image: seo.image,
+        url: seo.url
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: "min-h-screen flex items-center justify-center px-4 py-12", children: /* @__PURE__ */ jsxs("div", { className: "max-w-lg w-full space-y-8", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold tracking-tight", children: heroTitle }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-muted-foreground", children: heroSubtitle }),
+        heroDescription && /* @__PURE__ */ jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: heroDescription })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "waitlist-name", children: "Name *" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "waitlist-name",
+              type: "text",
+              placeholder: "Your name",
+              disabled: isSubmitting || isLimited,
+              ...register("name")
+            }
+          ),
+          errors.name && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors.name.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "waitlist-email", children: "Email *" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "waitlist-email",
+              type: "email",
+              placeholder: "you@example.com",
+              disabled: isSubmitting || isLimited,
+              ...register("email")
+            }
+          ),
+          errors.email && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errors.email.message })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "waitlist-company", children: "Company" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "waitlist-company",
+              type: "text",
+              placeholder: "Your company (optional)",
+              disabled: isSubmitting || isLimited,
+              ...register("company")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "waitlist-reason", children: "Why are you interested?" }),
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: "waitlist-reason",
+              placeholder: "Tell us what excites you about the product (optional)",
+              rows: 3,
+              disabled: isSubmitting || isLimited,
+              className: "resize-y",
+              ...register("reason")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "submit",
+            className: "w-full",
+            disabled: isSubmitting || isLimited,
+            children: isSubmitting ? "Joining..." : "Join Waitlist"
+          }
+        ),
+        isLimited && resetTime && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground text-center", children: [
+          "Rate limit reached. Try again after",
+          " ",
+          resetTime.toLocaleTimeString()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-center", children: [
+        "By joining the waitlist, you agree to receive updates from",
+        " ",
+        displayName,
+        ". We respect your privacy and will never share your information."
+      ] })
+    ] }) }) })
+  ] });
+}
+function WaitlistForm({
+  variant = "inline",
+  showLabel = false,
+  showDescription = false,
+  showNameField = false,
+  description = "Join our waitlist to get early access",
+  buttonText = "Join Waitlist",
+  className = ""
+}) {
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const {
+    product,
+    loading: productLoading,
+    error: productError,
+    hasProvider
+  } = useProduct();
+  const productStatus = product?.status;
+  const canCheckStatus = Boolean(config.productSlug);
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (canCheckStatus && productStatus !== "WAITLIST") {
+      toast.error("This product is not accepting waitlist signups right now.");
+      return;
+    }
+    if (!email || !email.includes("@")) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const result = await joinWaitlist(
+        client,
+        { email, name: name || void 0 },
+        product?.id || config.productId
+      );
+      if (result.success) {
+        toast.success(result.message ?? "You have been added to the waitlist!");
+        setEmail("");
+        setName("");
+      } else {
+        toast.error(result.message ?? "Failed to join waitlist");
+      }
+    } catch (_error) {
+      toast.error("An error occurred. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const isInline = variant === "inline";
+  if (canCheckStatus && !hasProvider) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      showDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: description }),
+      /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Product status checks require ",
+        /* @__PURE__ */ jsx("code", { children: "ProductProvider" }),
+        " to be mounted."
+      ] })
+    ] });
+  }
+  if (canCheckStatus && productLoading) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      showDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: description }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading waitlist\u2026" })
+    ] });
+  }
+  if (canCheckStatus && (productError || productStatus !== "WAITLIST")) {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      showDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: description }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Waitlist signups are not available right now." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: isInline ? "flex gap-2" : "flex flex-col gap-2",
+        children: [
+          showNameField && /* @__PURE__ */ jsxs("div", { className: isInline ? "flex-1" : "w-full", children: [
+            showLabel && /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: "waitlist-inline-name",
+                className: "text-sm mb-1 block",
+                children: "Name"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "waitlist-inline-name",
+                type: "text",
+                placeholder: "Your name",
+                value: name,
+                onChange: (e) => setName(e.target.value),
+                disabled: isLoading,
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: isInline ? "flex-1" : "w-full", children: [
+            showLabel && /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: "waitlist-inline-email",
+                className: "text-sm mb-1 block",
+                children: "Email"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: "waitlist-inline-email",
+                type: "email",
+                placeholder: "Enter your email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                disabled: isLoading,
+                required: true,
+                className: "w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "submit",
+              disabled: isLoading,
+              className: isInline ? "whitespace-nowrap" : "w-full",
+              children: isLoading ? "Joining..." : buttonText
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+export { WaitlistForm, WaitlistPage };
+//# sourceMappingURL=waitlist.mjs.map
+//# sourceMappingURL=waitlist.mjs.map