108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Button } from "./ui/button";
|
|
|
|
export function Newsletter() {
|
|
const [email, setEmail] = useState("");
|
|
const [status, setStatus] = useState<
|
|
"idle" | "loading" | "success" | "error"
|
|
>("idle");
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setStatus("loading");
|
|
|
|
try {
|
|
// Get app_id from environment or URL
|
|
const appId =
|
|
process.env.NEXT_PUBLIC_APP_ID ||
|
|
new URLSearchParams(window.location.search).get("app_id") ||
|
|
"";
|
|
|
|
// Create form data
|
|
const formData = new FormData();
|
|
formData.append("app_id", appId);
|
|
formData.append("email", email);
|
|
formData.append("form_type", "newsletter"); // Help identify form type in Kleap
|
|
formData.append("_honeypot", ""); // Honeypot field
|
|
|
|
// Submit to Kleap's form API
|
|
const response = await fetch("https://form.kleap.co", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
setStatus("success");
|
|
setEmail("");
|
|
// Reset status after 3 seconds
|
|
setTimeout(() => setStatus("idle"), 3000);
|
|
} else {
|
|
throw new Error("Failed to submit");
|
|
}
|
|
} catch {
|
|
setStatus("error");
|
|
// Reset status after 3 seconds
|
|
setTimeout(() => setStatus("idle"), 3000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-md mx-auto">
|
|
<h3 className="text-lg font-semibold mb-2 text-black dark:text-white">
|
|
Subscribe to our newsletter
|
|
</h3>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
Get the latest updates and exclusive content delivered to your inbox.
|
|
</p>
|
|
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter your email"
|
|
required
|
|
className="flex-1 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-neutral-900 text-black dark:text-white placeholder:text-gray-400 focus:ring-2 focus:ring-neutral-400 focus:outline-none"
|
|
/>
|
|
|
|
{/* Honeypot field - hidden from users */}
|
|
<input
|
|
type="text"
|
|
name="_honeypot"
|
|
style={{ display: "none" }}
|
|
tabIndex={-1}
|
|
autoComplete="off"
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={status === "loading"}
|
|
className="whitespace-nowrap"
|
|
>
|
|
{status === "loading"
|
|
? "..."
|
|
: status === "success"
|
|
? "✓"
|
|
: status === "error"
|
|
? "Error"
|
|
: "Subscribe"}
|
|
</Button>
|
|
</form>
|
|
|
|
{status === "success" && (
|
|
<p className="mt-2 text-sm text-green-600 dark:text-green-400">
|
|
Thanks for subscribing!
|
|
</p>
|
|
)}
|
|
|
|
{status === "error" && (
|
|
<p className="mt-2 text-sm text-red-600 dark:text-red-400">
|
|
Something went wrong. Please try again.
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|