Add SMTP admin settings and contact form delivery

app/[locale]/(site)/contact/page.tsx

@@ -1,24 +1,27 @@
 import type { Metadata } from "next";
 import { Mail, MapPin, Phone } from "lucide-react";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
 import { MotionFade } from "@/components/motion-fade";
+import { FlashMessage } from "@/components/root/flash-message";
+import { ContactForm } from "@/components/site/contact-form";
 import { buildLocalizedMetadata } from "@/lib/metadata";
+import { getPublicContactProtectionSettings } from "@/lib/app-config";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
 import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+
+import { submitContactFormAction } from "./actions";
 
 type ContactPageProps = {
   params: {
     locale: string;
   };
+  searchParams?: {
+    error?: string;
+  };
 };
 
 export async function generateMetadata({
@@ -35,9 +38,15 @@ export async function generateMetadata({
   });
 }
 
-export default async function ContactPage({ params: { locale } }: ContactPageProps) {
+export default async function ContactPage({
+  params: { locale },
+  searchParams,
+}: ContactPageProps) {
   const localeKey = resolveLocale(locale);
-  const t = await getTranslations({ locale: localeKey, namespace: "contactPage" });
+  const [t, protection] = await Promise.all([
+    getTranslations({ locale: localeKey, namespace: "contactPage" }),
+    getPublicContactProtectionSettings(),
+  ]);
 
   return (
     <>
@@ -72,29 +81,27 @@ export default async function ContactPage({ params: { locale } }: ContactPagePro
         <MotionFade delay={0.05}>
         <AppCard>
           <CardContent className="pt-6">
-            <form className="grid gap-4">
-              <Label className="grid gap-2">
-                {t("name")}
-                <Input type="text" placeholder={t("name")} />
-              </Label>
-
-              <Label className="grid gap-2">
-                {t("email")}
-                <Input type="email" placeholder={t("email")} />
-              </Label>
-
-              <Label className="grid gap-2">
-                {t("message")}
-                <Textarea rows={5} placeholder={t("message")} />
-              </Label>
-
-              <div className="flex flex-wrap gap-3">
-                <Button type="button">{t("submit")}</Button>
-                <Button asChild variant="outline">
-                  <Link href={getLocalizedPath(localeKey, "/success")}>{t("preview")}</Link>
-                </Button>
+            {searchParams?.error ? (
+              <div className="mb-4">
+                <FlashMessage type="error" message={searchParams.error} />
               </div>
-            </form>
+            ) : null}
+            <ContactForm
+              action={submitContactFormAction}
+              locale={localeKey}
+              previewHref={getLocalizedPath(localeKey, "/success")}
+              protection={protection}
+              copy={{
+                name: t("name"),
+                email: t("email"),
+                phone: t("phone"),
+                company: t("company"),
+                message: t("message"),
+                note: t("note"),
+                submit: t("submit"),
+                preview: t("preview"),
+              }}
+            />
           </CardContent>
         </AppCard>
         </MotionFade>