latosa-escrima/frontend/components/contact.tsx

"use client";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import useApiMutation from "@/hooks/use-api";
import { useToast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
import { useState } from "react";

interface FormData {
	firstname: string;
	lastname: string;
	email: string;
	subject: string;
	message: string;
}

const Contact = () => {
	const { toast } = useToast();
	const [formData, setFormData] = useState<FormData>({
		firstname: "",
		lastname: "",
		subject: "",
		email: "",
		message: "",
	});

	const {
		trigger: sendEmail,
		isMutating: isLoading,
		isSuccess,
		error,
	} = useApiMutation<unknown, FormData>(`/contact`, {}, "POST", false, true);

	const handleChange = (
		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
	) => {
		console.log(e.currentTarget);
		setFormData({
			...formData,
			[e.currentTarget.name]: e.currentTarget.value,
		});
	};

	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		const res = await sendEmail(formData);
		if (res?.status === "Success") {
			toast({
				title: "Mail envoyé.",
				description:
					"On reviendra vers vous le plus rapidement possible.",
			});
		} else {
			toast({
				title: "Échec de l'envoie du mail.",
				description: res?.message,
			});
		}
	};

	return (
		<section className="py-32">
			<div className="p-4">
				<div className="mx-auto flex max-w-screen-xl flex-col justify-between gap-10 lg:flex-row lg:gap-20">
					<div className="self-center max-w-lg flex flex-col justify-between gap-10">
						<div className="text-center lg:text-left">
							<h1 className="mb-2 text-5xl font-semibold lg:mb-1 lg:text-6xl">
								Contactez-nous !
							</h1>
							<p className="text-muted-foreground">
								Nous nous rendons disponible pour répondre à
								toutes vos questions.
							</p>
						</div>
						<div className="mx-auto w-fit lg:mx-0">
							<h3 className="mb-6 text-center text-2xl font-semibold lg:text-left">
								Informations de contact
							</h3>
							<ul className="ml-4 list-disc">
								<li>
									<span className="font-bold">
										Téléphone:{" "}
									</span>
									(123) 34567890
								</li>
								<li>
									<span className="font-bold">Email: </span>
									<a href="" className="underline">
										nicolas.goruk@orange.fr
									</a>
								</li>
							</ul>
						</div>
					</div>
					<form
						onSubmit={handleSubmit}
						className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10"
					>
						<div className="flex gap-4">
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="firstname">Prénom</Label>
								<Input
									value={formData.firstname}
									onChange={handleChange}
									type="text"
									id="firstname"
									name="firstname"
									placeholder="Prénom"
									required
								/>
							</div>
							<div className="grid w-full items-center gap-1.5">
								<Label htmlFor="lastname">Nom de famille</Label>
								<Input
									value={formData.lastname}
									onChange={handleChange}
									type="text"
									id="lastname"
									name="lastname"
									placeholder="Nom de famille"
									required
								/>
							</div>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="email">Email</Label>
							<Input
								value={formData.email}
								onChange={handleChange}
								type="email"
								id="email"
								name="email"
								placeholder="Email"
								required
							/>
						</div>
						<div className="grid w-full items-center gap-1.5">
							<Label htmlFor="subject">Objet</Label>
							<Input
								value={formData.subject}
								onChange={handleChange}
								type="text"
								id="subject"
								name="subject"
								placeholder="Objet"
								required
							/>
						</div>
						<div className="grid w-full gap-1.5">
							<Label htmlFor="message">Message</Label>
							<Textarea
								value={formData.message}
								onChange={handleChange}
								placeholder="Écrivez votre message ici."
								id="message"
								name="message"
								required
							/>
						</div>
						<Button
							disabled={
								isLoading || isSuccess || error !== undefined
							}
							type="submit"
							className={`w-full transition-all ease-in-out ${isSuccess ? "bg-green-800" : error ? "bg-red-800" : ""}`}
						>
							{isSuccess ? (
								<>Message envoyé</>
							) : error ? (
								<>Échec de l'envoie du mail.</>
							) : (
								<>
									{isLoading && (
										<Loader2 className="animate-spin" />
									)}
									Envoyer
								</>
							)}
						</Button>
					</form>
				</div>
			</div>
		</section>
	);
};

export default Contact;