@m13v/seo-components 0.38.3 → 0.38.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.38.3",
+  "version": "0.38.4",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "lint:mobile-spans": "node scripts/lint-mobile-spans.mjs",

package/src/components/InstallEmailGate.tsx

@@ -82,6 +82,21 @@ export interface InstallEmailGateProps {
   sentTitle?: string;
   /** Stage 2 (sent) body copy when emailOnly is true. Receives the submitted email. */
   sentDescription?: (email: string) => React.ReactNode;
+  /**
+   * Redirect-after-submit mode. When true, the submit POST is expected to
+   * return JSON `{ url: string }` (e.g. a Stripe Checkout session URL). On
+   * success the browser is redirected to that URL instead of advancing the
+   * modal to "command" or "sent". Used by paid-checkout flows where the
+   * email gate hands off to an external billing page. When set, takes
+   * precedence over `emailOnly`.
+   */
+  redirectOnSuccess?: boolean;
+  /**
+   * Extra fields merged into the submit POST body alongside `{ email }`.
+   * Useful for passing `section`, UTMs, or product identifiers to the
+   * checkout endpoint.
+   */
+  submitExtras?: Record<string, unknown>;
 }
 
 type Stage = "closed" | "email" | "command" | "sent";
@@ -108,6 +123,8 @@ export function InstallEmailGate({
   emailOnly = false,
   sentTitle = "Check your inbox",
   sentDescription,
+  redirectOnSuccess = false,
+  submitExtras,
 }: InstallEmailGateProps) {
   const capture = useCapture();
   const [stage, setStage] = useState<Stage>("closed");
@@ -166,10 +183,12 @@ export function InstallEmailGate({
     setSubmitting(true);
     setError("");
     try {
+      const body: Record<string, unknown> = { email: trimmed };
+      if (submitExtras) Object.assign(body, submitExtras);
       const res = await fetch(newsletterPath, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: trimmed }),
+        body: JSON.stringify(body),
       });
       if (res.status >= 400 && res.status < 500) {
         const data = await res.json().catch(() => ({}));
@@ -178,9 +197,14 @@ export function InstallEmailGate({
         return;
       }
       if (!res.ok) {
-        console.warn("[InstallEmailGate] newsletter POST failed", res.status);
+        console.warn("[InstallEmailGate] submit POST failed", res.status);
       }
-      if (remember) markInstallEmailCaptured(trimmed, storageKey);
+      const delivery = redirectOnSuccess
+        ? "redirect"
+        : emailOnly
+          ? "email_only"
+          : "page_reveal";
+      if (remember && !redirectOnSuccess) markInstallEmailCaptured(trimmed, storageKey);
       capture("newsletter_subscribed", {
         component: "InstallEmailGate",
         email: trimmed,
@@ -188,25 +212,51 @@ export function InstallEmailGate({
         site,
         section,
         source: "install_gate",
-        delivery: emailOnly ? "email_only" : "page_reveal",
+        delivery,
       });
       trackGetStartedClick({
-        destination: emailOnly ? "email:install" : "modal:command",
+        destination: redirectOnSuccess
+          ? "redirect:checkout"
+          : emailOnly
+            ? "email:install"
+            : "modal:command",
         site,
         section,
         text: "email-submitted",
         component: "InstallEmailGate",
-        extra: { email: trimmed, delivery: emailOnly ? "email_only" : "page_reveal" },
+        extra: { email: trimmed, delivery },
       });
+
+      if (redirectOnSuccess) {
+        const data = (await res.json().catch(() => ({}))) as { url?: string };
+        if (data.url && typeof window !== "undefined") {
+          window.location.href = data.url;
+          // Keep the modal in the submitting state while the browser navigates
+          // away so the user does not see a flash of stale UI.
+          return;
+        }
+        setError("No checkout URL returned. Try again.");
+        setSubmitting(false);
+        return;
+      }
+
       setSubmittedEmail(trimmed);
       setStage(emailOnly ? "sent" : "command");
     } catch (err) {
-      console.warn("[InstallEmailGate] newsletter POST network error", err);
+      console.warn("[InstallEmailGate] submit POST network error", err);
+      if (redirectOnSuccess) {
+        setError("Network error. Try again.");
+        setSubmitting(false);
+        return;
+      }
       if (remember) markInstallEmailCaptured(trimmed, storageKey);
       setSubmittedEmail(trimmed);
       setStage(emailOnly ? "sent" : "command");
     } finally {
-      setSubmitting(false);
+      // For redirect mode we returned early above on success; the browser
+      // is navigating away so we intentionally do not flip submitting back
+      // to false. For other modes, the stage transition is enough.
+      if (!redirectOnSuccess) setSubmitting(false);
     }
   };