@burdenoff/website-sdk 0.0.0-dev

package/dist/components/newsletter.js

@@ -0,0 +1,880 @@
+'use strict';
+
+var React = require('react');
+var zod$1 = require('@hookform/resolvers/zod');
+var ReCAPTCHA = require('react-google-recaptcha');
+var reactHookForm = require('react-hook-form');
+var sonner = require('sonner');
+var zod = require('zod');
+var jsxRuntime = require('react/jsx-runtime');
+var reactHelmetAsync = require('react-helmet-async');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var LabelPrimitive = require('@radix-ui/react-label');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReCAPTCHA__default = /*#__PURE__*/_interopDefault(ReCAPTCHA);
+var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+
+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 = React.createContext(null);
+function useWebSDK() {
+  const client = React.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 = React.createContext({
+  product: null,
+  loading: true,
+  error: null,
+  hasProvider: false,
+  refetch: () => {
+  }
+});
+function useProduct() {
+  return React.useContext(ProductContext);
+}
+function useProductConfig() {
+  const { product } = useProduct();
+  const config = useWebSDKConfig();
+  return {
+    // Prefer product-level config, fall back to SDK config
+    recaptchaSiteKey: product?.recaptchaSiteKey ?? config.recaptchaSiteKey ?? null,
+    rybbitSiteId: product?.rybbitSiteId ?? config.rybbitSiteId ?? null,
+    contactEmail: product?.contactEmail ?? null,
+    supportEmail: product?.supportEmail ?? null,
+    notificationEmail: product?.notificationEmail ?? product?.contactEmail ?? null,
+    productName: product?.name ?? null,
+    logoUrl: product?.logoUrl ?? null
+  };
+}
+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__ */ jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: fullTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "description", content: description }),
+    keywords && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "keywords", content: keywords }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "author", content: "Burdenoff Consultancy Services Pvt Ltd" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "robots", content: robots }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "canonical", href: url }),
+    favicon && /* @__PURE__ */ jsxRuntime.jsx("link", { rel: "icon", href: favicon }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:type", content: "website" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:image", content: fullImageUrl }),
+    url && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:url", content: url }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:locale", content: locale }),
+    productName && /* @__PURE__ */ jsxRuntime.jsx("meta", { property: "og:site_name", content: productName }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:card", content: "summary_large_image" }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:title", content: fullTitle }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:description", content: description }),
+    fullImageUrl && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:image", content: fullImageUrl }),
+    twitterHandle && /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "twitter:creator", content: twitterHandle }),
+    /* @__PURE__ */ jsxRuntime.jsx("meta", { name: "theme-color", content: themeColor }),
+    structuredDataItems.map((data, index) => /* @__PURE__ */ jsxRuntime.jsx("script", { type: "application/ld+json", children: JSON.stringify(data) }, `ld-${index}`)),
+    additionalMeta?.map((meta, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "meta",
+      {
+        ...meta.name ? { name: meta.name } : {},
+        ...meta.property ? { property: meta.property } : {},
+        content: meta.content
+      },
+      `meta-${index}`
+    ))
+  ] });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  LabelPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive__namespace.Root.displayName;
+var newsletterSchema = zod.z.object({
+  email: zod.z.string().email("Please enter a valid email address")
+});
+var SUBSCRIBE_MUTATION = (
+  /* GraphQL */
+  `
+  mutation Subscribe($input: SubscribeInput!) {
+    subscribe(input: $input) {
+      id
+      email
+      alreadySubscribed
+      status
+      subscribedAt
+    }
+  }
+`
+);
+async function subscribeNewsletter(client, email, productId, recaptchaToken) {
+  try {
+    const result = await client.mutate(SUBSCRIBE_MUTATION, {
+      input: {
+        email: email.trim().toLowerCase(),
+        platformProductId: productId,
+        metadata: {
+          source: "website",
+          referrer: typeof window !== "undefined" ? window.location.href : "",
+          timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+          ...recaptchaToken ? { recaptchaToken } : {}
+        }
+      }
+    });
+    if (result.errors?.length) {
+      const errorMsg = result.errors[0]?.message ?? "Subscription failed";
+      const code = result.errors[0]?.extensions?.code;
+      if (code === "DUPLICATE_SUBSCRIBER" || errorMsg.toLowerCase().includes("already subscribed")) {
+        return {
+          success: true,
+          message: "You are already part of this newsletter."
+        };
+      }
+      return { success: false, message: errorMsg };
+    }
+    if (result.data?.subscribe?.alreadySubscribed) {
+      return {
+        success: true,
+        message: "You are already part of this newsletter."
+      };
+    }
+    return { success: true };
+  } catch (error) {
+    console.error("Newsletter subscription error:", error);
+    return { success: false, message: "Network error. Please try again." };
+  }
+}
+function useRateLimit(maxAttempts, windowMinutes) {
+  const rateLimitRef = React.useRef(null);
+  const [isLimited, setIsLimited] = React.useState(false);
+  const [resetTime, setResetTime] = React.useState(null);
+  React.useEffect(() => {
+    const state = rateLimitRef.current;
+    if (state && Date.now() > state.resetTime) {
+      rateLimitRef.current = null;
+      setIsLimited(false);
+      setResetTime(null);
+    } else if (state && state.attempts >= maxAttempts) {
+      setIsLimited(true);
+      setResetTime(new Date(state.resetTime));
+    }
+  }, [maxAttempts]);
+  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 NewsletterPage({
+  productName,
+  layout = "centered",
+  rateLimitAttempts = 3,
+  rateLimitWindowMinutes = 15,
+  heroHeading = "Stay Updated",
+  heroSubtitle = "Subscribe to our newsletter",
+  heroDescription,
+  features,
+  successMessage = "Successfully subscribed to newsletter!",
+  errorMessage = "Failed to subscribe. Please try again.",
+  rateLimitMessage,
+  className,
+  seoTitle,
+  seoDescription,
+  seoKeywords,
+  seoImage,
+  seoUrl,
+  recaptchaSiteKey
+}) {
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const { product } = useProduct();
+  const productConfig = useProductConfig();
+  const effectiveProductId = product?.id || config.productId;
+  const displayName = productName ?? product?.name ?? config.productId;
+  const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? productConfig.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
+  const recaptchaRef = React.useRef(null);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const { isLimited, resetTime, recordAttempt, checkLimit } = useRateLimit(
+    rateLimitAttempts,
+    rateLimitWindowMinutes
+  );
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset
+  } = reactHookForm.useForm({
+    resolver: zod$1.zodResolver(newsletterSchema)
+  });
+  const onSubmit = async (data) => {
+    const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
+    if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      sonner.toast.error("Please complete the reCAPTCHA verification");
+      return;
+    }
+    if (checkLimit()) {
+      sonner.toast.error(
+        rateLimitMessage ?? `Too many attempts. Please try again after ${resetTime?.toLocaleTimeString()}`
+      );
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const result = await subscribeNewsletter(
+        client,
+        data.email,
+        effectiveProductId,
+        recaptchaToken || void 0
+      );
+      if (result.success) {
+        if (result.message) {
+          sonner.toast.info(result.message);
+        } else {
+          sonner.toast.success(successMessage);
+        }
+        reset();
+      } else {
+        sonner.toast.error(result.message ?? errorMessage);
+      }
+      recordAttempt();
+      recaptchaRef.current?.reset();
+    } catch (_error) {
+      sonner.toast.error(errorMessage);
+      recaptchaRef.current?.reset();
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const defaultFeatures = [
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-6 w-6",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M13 10V3L4 14h7v7l9-11h-7z"
+            }
+          )
+        }
+      ),
+      title: "Latest Updates",
+      description: "Get the latest news and updates delivered to your inbox"
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-6 w-6",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+            }
+          )
+        }
+      ),
+      title: "Exclusive Content",
+      description: "Access exclusive content and insights not available elsewhere"
+    },
+    {
+      icon: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-6 w-6",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
+            }
+          )
+        }
+      ),
+      title: "Early Access",
+      description: "Be the first to know about new features and product launches"
+    }
+  ];
+  const displayFeatures = features ?? defaultFeatures;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    seoTitle && /* @__PURE__ */ jsxRuntime.jsx(
+      PageHead,
+      {
+        title: seoTitle,
+        description: seoDescription ?? heroDescription ?? heroSubtitle,
+        productName: displayName,
+        keywords: seoKeywords,
+        image: seoImage,
+        url: seoUrl
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: layout === "centered" ? (
+      // Centered Layout
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen flex items-center justify-center px-4 py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full space-y-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-bold tracking-tight", children: heroHeading }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-lg text-muted-foreground", children: heroSubtitle }),
+          heroDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: heroDescription })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email address" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                id: "email",
+                type: "email",
+                placeholder: "you@example.com",
+                disabled: isSubmitting || isLimited,
+                ...register("email")
+              }
+            ),
+            errors.email && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: errors.email.message })
+          ] }),
+          effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            ReCAPTCHA__default.default,
+            {
+              ref: recaptchaRef,
+              sitekey: effectiveRecaptchaSiteKey
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "submit",
+              className: "w-full",
+              disabled: isSubmitting || isLimited,
+              children: isSubmitting ? "Subscribing..." : "Subscribe"
+            }
+          ),
+          isLimited && resetTime && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground text-center", children: [
+            "Rate limit reached. Try again after",
+            " ",
+            resetTime.toLocaleTimeString()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground text-center", children: [
+          "By subscribing, you agree to receive emails from ",
+          displayName,
+          ". You can unsubscribe at any time."
+        ] })
+      ] }) })
+    ) : (
+      // Split Layout
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen grid lg:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md w-full space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-bold tracking-tight", children: heroHeading }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-lg text-muted-foreground", children: heroSubtitle }),
+            heroDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: heroDescription })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email address" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: "email",
+                  type: "email",
+                  placeholder: "you@example.com",
+                  disabled: isSubmitting || isLimited,
+                  ...register("email")
+                }
+              ),
+              errors.email && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: errors.email.message })
+            ] }),
+            effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center sm:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ReCAPTCHA__default.default,
+              {
+                ref: recaptchaRef,
+                sitekey: effectiveRecaptchaSiteKey
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "submit",
+                className: "w-full",
+                disabled: isSubmitting || isLimited,
+                children: isSubmitting ? "Subscribing..." : "Subscribe"
+              }
+            ),
+            isLimited && resetTime && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground text-center", children: [
+              "Rate limit reached. Try again after",
+              " ",
+              resetTime.toLocaleTimeString()
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "By subscribing, you agree to receive emails from ",
+            displayName,
+            ". You can unsubscribe at any time."
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:flex items-center justify-center bg-muted px-4 py-12 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md space-y-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold", children: "Why Subscribe?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: displayFeatures.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 text-primary", children: feature.icon }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+            ] })
+          ] }, index)) })
+        ] }) })
+      ] })
+    ) })
+  ] });
+}
+function NewsletterForm({
+  variant = "inline",
+  showLabel = false,
+  showDescription = false,
+  description = "Subscribe to our newsletter for updates",
+  buttonText = "Subscribe",
+  className = "",
+  recaptchaSiteKey
+}) {
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const { product } = useProduct();
+  const productConfig = useProductConfig();
+  const effectiveProductId = product?.id || config.productId;
+  const effectiveRecaptchaSiteKey = recaptchaSiteKey ?? productConfig.recaptchaSiteKey ?? config.recaptchaSiteKey ?? "";
+  const recaptchaRef = React.useRef(null);
+  const [email, setEmail] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!email || !email.includes("@")) {
+      sonner.toast.error("Please enter a valid email address");
+      return;
+    }
+    const recaptchaToken = recaptchaRef.current?.getValue() ?? "";
+    if (effectiveRecaptchaSiteKey && !recaptchaToken) {
+      sonner.toast.error("Please complete the reCAPTCHA verification");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const result = await subscribeNewsletter(
+        client,
+        email,
+        effectiveProductId,
+        recaptchaToken || void 0
+      );
+      if (result.success) {
+        if (result.message) {
+          sonner.toast.info(result.message);
+        } else {
+          sonner.toast.success("Successfully subscribed!");
+        }
+        setEmail("");
+      } else {
+        sonner.toast.error(result.message ?? "Subscription failed");
+      }
+      recaptchaRef.current?.reset();
+    } catch (_error) {
+      sonner.toast.error("An error occurred. Please try again.");
+      recaptchaRef.current?.reset();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const isInline = variant === "inline";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { overflow: "visible" }, children: [
+    showDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-3", children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        className: isInline ? "flex flex-col gap-2" : "flex flex-col gap-2",
+        style: { overflow: "visible" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: isInline && !effectiveRecaptchaSiteKey ? "flex gap-2" : "flex flex-col gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: isInline && !effectiveRecaptchaSiteKey ? "flex-1" : "w-full",
+                    children: [
+                      showLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "newsletter-email", className: "text-sm mb-1 block", children: "Email" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Input,
+                        {
+                          id: "newsletter-email",
+                          type: "email",
+                          placeholder: "Enter your email",
+                          value: email,
+                          onChange: (e) => setEmail(e.target.value),
+                          disabled: isLoading,
+                          required: true,
+                          className: "w-full"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                !effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    disabled: isLoading,
+                    className: isInline ? "whitespace-nowrap" : "w-full",
+                    children: isLoading ? "Subscribing..." : buttonText
+                  }
+                )
+              ]
+            }
+          ),
+          effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+              body > div[style*="position: absolute"] > div > iframe[title*="recaptcha challenge"],
+              body > div:not([class]):not([id]) > div > iframe[title*="recaptcha"] {
+                position: fixed !important;
+                top: 50% !important;
+                left: 50% !important;
+                transform: translate(-50%, -50%) !important;
+                z-index: 99999 !important;
+              }
+              body > div[style*="position: absolute"]:has(iframe[title*="recaptcha challenge"]) {
+                position: fixed !important;
+                top: 0 !important;
+                left: 0 !important;
+                width: 100vw !important;
+                height: 100vh !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                z-index: 99999 !important;
+                background: rgba(0,0,0,0.3) !important;
+              }
+            ` }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  position: "relative",
+                  zIndex: 50,
+                  display: "flex",
+                  justifyContent: "flex-start"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ReCAPTCHA__default.default,
+                  {
+                    ref: recaptchaRef,
+                    sitekey: effectiveRecaptchaSiteKey,
+                    size: "normal"
+                  }
+                )
+              }
+            )
+          ] }),
+          effectiveRecaptchaSiteKey && /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", disabled: isLoading, className: "w-full", children: isLoading ? "Subscribing..." : buttonText })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.NewsletterForm = NewsletterForm;
+exports.NewsletterPage = NewsletterPage;
+//# sourceMappingURL=newsletter.js.map
+//# sourceMappingURL=newsletter.js.map