implement blog subscription feature with modal and email handling

2026-06-02 19:46:47 +02:00
parent 77f3c4ddbd
commit 3f985af13b
7 changed files with 108 additions and 85 deletions
@@ -1,17 +1,17 @@
 'use client';

-import { useRef, useEffect } from 'react';
-import Link from 'next/link';
+import { useRef, useEffect, useState } from 'react';
+import { BlogSubFormModal } from '@/components/ui/BlogSubFormModal';

 type Props = {
-    locale: string;
    title: string;
    text: string;
    cta: string;
 };

-export function BlogCTASection({ locale, title, text, cta }: Props) {
+export function BlogCTASection({ title, text, cta }: Props) {
    const sectionRef = useRef<HTMLDivElement>(null);
+    const [modalOpen, setModalOpen] = useState(false);

    useEffect(() => {
        const section = sectionRef.current;
@@ -36,9 +36,10 @@ export function BlogCTASection({ locale, title, text, cta }: Props) {
    }, []);

    return (
-        <div ref={sectionRef} className="w-full flex justify-center items-center pt-24 md:pt-36">
+        <>
+            <div ref={sectionRef} className="pt-24 md:pt-36 px-8 md:px-14 lg:px-20 max-w-275 mx-auto">
                <div
-                className="w-full max-w-2xl reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
+                    className="w-full reveal flex flex-col items-start gap-8 p-10 md:p-14 rounded-2xl border border-brand-brown/8 bg-white/40 transition-all duration-300 cursor-default"
                    style={{ transitionDelay: `120ms` }}
                >
                    <div>
@@ -51,7 +52,10 @@ export function BlogCTASection({ locale, title, text, cta }: Props) {
                    </div>

                    <div className="w-full flex flex-row justify-end">
-                    <Link href={`/${locale}/freelance`} className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200">
+                        <button
+                            onClick={() => setModalOpen(true)}
+                            className="group flex items-center gap-2 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown border-b border-brand-brown/30 pb-0.5 hover:border-brand-brown transition-colors duration-200 cursor-pointer"
+                        >
                            {cta}
                            <svg
                                className="w-3.5 h-3.5 group-hover:translate-x-1.5 transition-transform duration-200"
@@ -62,9 +66,12 @@ export function BlogCTASection({ locale, title, text, cta }: Props) {
                            >
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                            </svg>
-                    </Link>
+                        </button>
                    </div>
                </div>
            </div>
+
+            <BlogSubFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+        </>
    );
 }
@@ -3,7 +3,6 @@ import { BlogHero } from "@/app/[locale]/blog/_components/BlogHero";
 import { BlogCTASection } from "@/app/[locale]/blog/_components/BlogCTASection";
 import { ArticleList } from "@/app/[locale]/blog/[slug]/_components/ArticleList";
 import { getTranslations } from "next-intl/server";
-import { BlogSubFormController } from '@/components/ui/BlogSubFormController';

 type props = {
    params: Promise<{ locale: string }>;
@@ -16,12 +15,9 @@ export default async function BlogPage({ params }: props) {

    return (
        <main className="bg-brand-beige">
-            <BlogSubFormController />
-
            <BlogHero />

            <BlogCTASection
-                locale={locale}
                title={t("title")}
                text={t("text")}
                cta={t("cta")}
@@ -0,0 +1,26 @@
+'use server';
+
+import { addContact } from '@/lib/mail';
+
+export type SubscribeState = { success: true } | { success: false; error: string } | null;
+
+export async function subscribeNewsletter(
+    _: SubscribeState,
+    formData: FormData,
+): Promise<SubscribeState> {
+    const email = (formData.get('email') as string)?.trim();
+
+    if (!email) return { success: false, error: "L'adresse email est requise." };
+
+    const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRe.test(email)) {
+        return { success: false, error: 'Adresse email invalide.' };
+    }
+
+    try {
+        await addContact(email);
+        return { success: true };
+    } catch (err) {
+        return { success: false, error: 'Une erreur est survenue. Réessaie plus tard.' };
+    }
+}
@@ -2,65 +2,47 @@

 import { useEffect, useRef, useState, useActionState } from 'react';
 import { createPortal } from 'react-dom';
-import { sendContactMail, type ContactFormState } from '@/app/actions/sendContactMail';
+import { subscribeNewsletter, type SubscribeState } from '@/app/actions/subscribeNewsletter';

 type Props = {
    isOpen: boolean;
    onClose: () => void;
 };

-type FieldProps = {
-    label: string;
-    name: string;
-    type?: string;
-    required?: boolean;
-    textarea?: boolean;
-    inputRef?: React.RefObject<HTMLInputElement | null>;
-};
-
-function Field({ label, name, type = 'text', required, textarea, inputRef }: FieldProps) {
+function EmailField({ inputRef }: { inputRef: React.RefObject<HTMLInputElement | null> }) {
    const base =
        'w-full font-sans text-sm text-brand-brown bg-white/60 border border-brand-brown/12 rounded-lg px-4 py-3 placeholder:text-brand-brown/25 focus:outline-none focus:border-brand-brown/35 focus:bg-white/80 transition-colors duration-150';

    return (
        <div className="flex flex-col gap-1.5">
            <label className="font-sans text-[11px] uppercase tracking-[0.18em] text-brand-brown/45">
-                {label}
+                Email
            </label>
-            {textarea ? (
-                <textarea
-                    name={name}
-                    required={required}
-                    rows={5}
-                    className={`${base} resize-none`}
-                />
-            ) : (
            <input
-                    ref={inputRef as React.RefObject<HTMLInputElement>}
-                    name={name}
-                    type={type}
-                    required={required}
+                ref={inputRef}
+                name="email"
+                type="email"
+                required
                className={base}
            />
-            )}
        </div>
    );
 }

 export function BlogSubFormModal({ isOpen, onClose }: Props) {
    const [mounted, setMounted] = useState(false);
-    const [state, action, pending] = useActionState<ContactFormState, FormData>(
-        sendContactMail,
+    const [state, action, pending] = useActionState<SubscribeState, FormData>(
+        subscribeNewsletter,
        null,
    );
-    const firstInputRef = useRef<HTMLInputElement>(null);
+    const emailInputRef = useRef<HTMLInputElement>(null);
    const formRef = useRef<HTMLFormElement>(null);

    useEffect(() => setMounted(true), []);

    useEffect(() => {
        if (isOpen) {
-            setTimeout(() => firstInputRef.current?.focus(), 50);
+            setTimeout(() => emailInputRef.current?.focus(), 50);
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = '';
@@ -83,23 +65,20 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
    return createPortal(
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" role="dialog" aria-modal="true">

-            {/* Backdrop */}
            <div
                className="absolute inset-0 bg-brand-brown/40 backdrop-blur-sm"
                onClick={onClose}
            />

-            {/* Panel */}
            <div className="relative w-full max-w-lg bg-brand-beige rounded-2xl shadow-2xl flex flex-col gap-7 p-8 md:p-10">

-                {/* Header */}
                <div className="flex items-start justify-between gap-4">
                    <div>
                        <h2 className="font-serif text-brand-brown text-[clamp(1.3rem,2vw,1.65rem)] leading-tight">
-                            Abonnez-vous au blog
+                            Ne ratez aucun article
                        </h2>
                        <p className="font-sans text-sm text-brand-brown/45 mt-1.5">
-                            Recevez une alerte par mail quand un nouvel article est publie. C'est gratuit.
+                            Un mail à chaque nouvel article. Pas de spam, désabonnement en un clic.
                        </p>
                    </div>
                    <button
@@ -113,11 +92,12 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                    </button>
                </div>

-                {/* Success */}
                {state?.success ? (
                    <div className="flex flex-col items-center gap-3 py-10 text-center">
-                        <span className="font-serif text-brand-brown text-xl">C'est note !</span>
-                        <p className="font-sans text-sm text-brand-brown/45">Vous devriez recevoir un mail de confirmation d'ici peu.</p>
+                        <span className="font-serif text-brand-brown text-xl">C&apos;est noté !</span>
+                        <p className="font-sans text-sm text-brand-brown/45">
+                            Vous recevrez un email à chaque nouvel article.
+                        </p>
                        <button
                            onClick={onClose}
                            className="mt-4 font-sans text-xs uppercase tracking-[0.18em] text-brand-brown/40 hover:text-brand-brown border-b border-brand-brown/20 hover:border-brand-brown pb-0.5 transition-colors duration-150 cursor-pointer"
@@ -127,9 +107,7 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                    </div>
                ) : (
                    <form ref={formRef} action={action} className="flex flex-col gap-5">
-                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                            <Field label="Email" name="email" type="email" required />
-                        </div>
+                        <EmailField inputRef={emailInputRef} />

                        {state?.error && (
                            <p className="font-sans text-xs text-red-700/80">{state.error}</p>
@@ -141,7 +119,7 @@ export function BlogSubFormModal({ isOpen, onClose }: Props) {
                                disabled={pending}
                                className="inline-flex items-center gap-2.5 font-sans text-[13px] tracking-wide text-brand-beige bg-brand-brown rounded-lg px-7 py-3 hover:bg-brand-brown/85 disabled:opacity-50 transition-colors duration-200 cursor-pointer disabled:cursor-default"
                            >
-                                {pending ? 'Envoi…' : 'Envoyer'}
+                                {pending ? 'Inscription…' : "S'abonner"}
                                {!pending && (
                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
@@ -25,3 +25,19 @@ export async function sendMail({ subject, html, from }: SendMailOptions) {

    return data;
 }
+
+export async function addContact(email: string) {
+    const audienceId = process.env.RESEND_AUDIENCE_ID;
+
+    if (!audienceId) throw new Error('RESEND_AUDIENCE_ID is not set');
+
+    const { data, error } = await resend.contacts.create({
+        email,
+        audienceId,
+        unsubscribed: false,
+    });
+
+    if (error) throw error;
+
+    return data;
+}
@@ -72,9 +72,9 @@
            "subtitle": "Thoughts on architecture, web development, and the practices that make products last."
        },
        "blogSubscription": {
-            "title": "Working on something ambitious?",
-            "text": "I'm available for freelance projects — web apps, architecture, and product development.",
-            "cta": "See my services"
+            "title": "Never miss an article",
+            "text": "Get an email whenever a new article is published. No spam — unsubscribe anytime.",
+            "cta": "Subscribe"
        },
        "backToBlog": "Back to blog",
        "scrollPrompt": "Scroll",
@@ -72,9 +72,9 @@
            "subtitle": "Pensées sur l'architecture, le développement web et les pratiques qui font durer les produits."
        },
        "blogSubscription": {
-            "title": "Vous travaillez sur un projet ambitieux ?",
-            "text": "Je suis disponible pour des missions freelance — applications web, architecture et développement produit.",
-            "cta": "Voir mes services"
+            "title": "Ne ratez aucun article",
+            "text": "Un email à chaque nouvel article. Pas de spam, désabonnement en un clic.",
+            "cta": "S'abonner"
        },
        "backToBlog": "Retour au blog",
        "scrollPrompt": "Défiler",