File size: 4,881 Bytes
a667b81 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | import React, { useState } from "react";
import { Mail, Send, Check, Loader2, Sparkles } from "lucide-react";
import { subscribeNewsletter } from "../lib/firebaseService";
interface NewsletterSignupProps {
darkMode: boolean;
}
export default function NewsletterSignup({ darkMode }: NewsletterSignupProps) {
const [email, setEmail] = useState("");
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
const [errorMessage, setErrorMessage] = useState("");
const handleSubscribe = async (e: React.FormEvent) => {
e.preventDefault();
if (!email.trim()) return;
setLoading(true);
setStatus("idle");
setErrorMessage("");
try {
await subscribeNewsletter(email);
setStatus("success");
setEmail("");
} catch (err: any) {
console.error("Subscription failed:", err);
setStatus("error");
// Extract a descriptive human error message
let msg = "Something went wrong. Please check your network or try again.";
if (err instanceof Error) {
try {
const parsed = JSON.parse(err.message);
if (parsed.error) {
msg = parsed.error;
}
} catch {
msg = err.message;
}
}
setErrorMessage(msg);
} finally {
setLoading(false);
}
};
return (
<div className="space-y-4" id="newsletter-signup-container">
<div className="space-y-1.5">
<h4 className={`font-display font-medium text-xs uppercase tracking-widest flex items-center gap-1.5 font-mono ${
darkMode ? "text-slate-200" : "text-slate-950"
}`}>
<Mail className="w-3.5 h-3.5 text-brand-orange" />
<span>Maintenance Newsletter</span>
</h4>
<p className="leading-relaxed text-[11px] text-slate-500">
Subscribe to receive seasonal tyre maintenance advice, road safety checks, and priority showroom discount vouchers in Lahore.
</p>
</div>
{status === "success" ? (
<div
className={`p-3 rounded-2xl border flex items-start space-x-2.5 transition-all animate-fadeIn ${
darkMode
? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400"
: "bg-emerald-50 border-emerald-200 text-emerald-800"
}`}
id="newsletter-success-alert"
>
<div className="p-1 rounded-full bg-emerald-500/20 text-emerald-400 mt-0.5 shrink-0">
<Check className="w-3.5 h-3.5" />
</div>
<div>
<p className="font-bold text-xs">Successfully Subscribed!</p>
<p className="text-[10px] mt-0.5 opacity-90">
You're registered to receive maintenance tips. Stay safe on the road!
</p>
</div>
</div>
) : (
<form onSubmit={handleSubscribe} className="space-y-2">
<div className="relative">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email address"
required
disabled={loading}
className={`w-full text-xs px-3.5 py-2.5 pr-10 rounded-xl border font-sans focus:outline-hidden focus:ring-1 focus:ring-brand-orange transition-all duration-200 ${
darkMode
? "bg-black/40 border-white/10 text-white placeholder-slate-500 focus:border-brand-orange/40"
: "bg-white border-slate-200 text-slate-900 placeholder-slate-400 focus:border-brand-orange"
}`}
id="newsletter-email-input"
/>
<button
type="submit"
disabled={loading || !email.trim()}
className="absolute right-1.5 top-1/2 -translate-y-1/2 p-1.5 rounded-lg bg-brand-orange hover:bg-brand-orange-dark text-white hover:scale-105 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none"
title="Subscribe"
id="newsletter-submit-btn"
>
{loading ? (
<Loader2 className="w-3.5 h-3.5 animate-spin" />
) : (
<Send className="w-3.5 h-3.5" />
)}
</button>
</div>
{status === "error" && (
<p className="text-[10px] text-rose-500 font-medium px-1 leading-snug" id="newsletter-error-message">
⚠️ {errorMessage}
</p>
)}
<div className="flex items-center space-x-1.5 text-[10px] text-slate-500 font-mono px-1">
<Sparkles className="w-3 h-3 text-brand-orange/60 shrink-0" />
<span>Updates twice a month • Opt-out anytime</span>
</div>
</form>
)}
</div>
);
}
|