"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { FormEvent, FormHTMLAttributes } from "react"; type Status = "idle" | "submitting" | "success" | "error"; export type NewsletterInlineFormProps = Omit, "onSubmit"> & { /** Resolve when the address is stored. Reject with an Error to show its message. */ onSubscribe: (email: string) => Promise; label?: string; description?: string; placeholder?: string; buttonLabel?: string; /** Name of the email input for native submission. */ fieldName?: string; /** Name of the hidden honeypot field. Bots fill it; people never see it. */ honeypotName?: string; successMessage?: (email: string) => string; reducedMotion?: boolean; }; const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; function cx(...values: Array) { return values.filter(Boolean).join(" "); } export function NewsletterInlineForm({ onSubscribe, label = "Email address", description, placeholder = "ana@empresa.co", buttonLabel = "Subscribe", fieldName = "email", honeypotName = "website", successMessage = (email) => "You’re subscribed. The next issue goes to " + email + ".", reducedMotion = false, className, ...props }: NewsletterInlineFormProps) { const id = useId(); const inputId = id + "-email"; const descriptionId = id + "-description"; const messageId = id + "-message"; const [email, setEmail] = useState(""); const [honeypot, setHoneypot] = useState(""); const [status, setStatus] = useState("idle"); const [message, setMessage] = useState(""); const [invalid, setInvalid] = useState(false); const mounted = useRef(true); const inputRef = useRef(null); useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); const validate = (raw: string) => { const trimmed = raw.trim(); if (!trimmed) return "Enter your email address to subscribe."; if (!emailPattern.test(trimmed)) return "Check the address. It should look like ana@empresa.co."; return ""; }; const handleSubmit = async (event: FormEvent) => { event.preventDefault(); if (status === "submitting") return; const trimmed = email.trim(); if (honeypot) { // Pretend success so automated submissions learn nothing. setStatus("success"); setMessage(successMessage(trimmed)); return; } const problem = validate(trimmed); if (problem) { setInvalid(true); setStatus("error"); setMessage(problem); inputRef.current?.focus(); return; } setInvalid(false); setStatus("submitting"); setMessage(""); try { await onSubscribe(trimmed); if (!mounted.current) return; setStatus("success"); setMessage(successMessage(trimmed)); } catch (error) { if (!mounted.current) return; setStatus("error"); setMessage(error instanceof Error && error.message ? error.message : "We couldn’t subscribe you right now. Try again in a moment."); } }; const describedBy = cx(description && descriptionId, messageId) || undefined; return (

{label} {description ? (

{description}

) : null}

{ setEmail(event.target.value); if (invalid) { setInvalid(false); setStatus("idle"); setMessage(""); } }} onBlur={() => { if (email.trim() && validate(email)) { setInvalid(true); setStatus("error"); setMessage(validate(email)); } }} className={cx( "min-h-11 w-full flex-1 rounded-md border bg-[#FBFBF8] px-3 text-[15px] text-[#1D211F] outline-none transition-[border-color,box-shadow] placeholder:text-[#5E6764] focus-visible:border-[#1E6B64] focus-visible:ring-2 focus-visible:ring-[#1E6B64]/35 disabled:opacity-60 dark:bg-[#232A29] dark:text-[#E9EBE4] dark:placeholder:text-[#A6B0AD] dark:focus-visible:border-[#7FC4BA] dark:focus-visible:ring-[#7FC4BA]/40", reducedMotion ? "transition-none" : "motion-reduce:transition-none", invalid ? "border-[#A33228] dark:border-[#F0897D]" : "border-[#858B83] dark:border-[#6E7976]", )} />

{message}

); }