feat: ✨ implement contact and contact-confirmation emails with react-email

3 months ago · 92fd8d9dd1
parent ad22d47947
commit 92fd8d9dd1
8 changed files with 977 additions and 54 deletions
--- a/package.json
+++ b/package.json
@ -14,16 +14,20 @@
    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
-    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\""
+    "format": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "email": "email dev --dir src/emails --port 4000"
  },
  "dependencies": {
    "@ark-ui/react": "^3.9.0",
+    "@hookform/resolvers": "^3.9.0",
    "@icons-pack/react-simple-icons": "^10.0.0",
    "@payloadcms/db-mongodb": "beta",
    "@payloadcms/next": "beta",
    "@payloadcms/plugin-cloud": "beta",
    "@payloadcms/richtext-lexical": "beta",
    "@payloadcms/translations": "beta",
+    "@react-email/components": "0.0.23",
+    "@react-email/render": "1.0.0",
    "cross-env": "^7.0.3",
    "graphql": "^16.8.1",
    "lucide-react": "^0.436.0",
@ -32,7 +36,10 @@
    "payload": "beta",
    "react": "19.0.0-rc-06d0b89e-20240801",
    "react-dom": "19.0.0-rc-06d0b89e-20240801",
-    "sharp": "0.32.6"
+    "react-email": "3.0.1",
+    "react-hook-form": "^7.53.0",
+    "sharp": "0.32.6",
+    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@pandacss/dev": "^0.45.1",
--- a/src/actions/contact.ts
+++ b/src/actions/contact.ts
@ -1,12 +0,0 @@
-"use server";
-
-export const submitContactFormAction = (formData: FormData) => {
-  console.log(JSON.stringify(formData, null, 2));
-  console.log(formData.get("message"));
-  console.log(formData.get("subject"));
-  console.log(formData.get("date"));
-  console.log(formData.get("time"));
-  console.log(formData.get("name"));
-  console.log(formData.get("email"));
-  console.log(formData.get("phone"));
-};
--- a/src/actions/contact.tsx
+++ b/src/actions/contact.tsx
@ -0,0 +1,21 @@
+"use server";
+
+import ContactEmail from "@/emails/contact";
+import { getPayload } from "@/utils/payload";
+import { render } from "@react-email/render";
+
+export const submitContactFormAction = async (formData: FormData) => {
+  const payload = await getPayload();
+  await payload.sendEmail({
+    to: "moravrav@gmail.com",
+    subject: `Kontaktanfrage von ${formData.get("name")}`,
+    email: await render(
+      <ContactEmail
+        name={formData.get("name")}
+        email={formData.get("email")}
+        subject={formData.get("subject")}
+        message={formData.get("message")}
+      />,
+    ),
+  });
+};
--- a/src/actions/reservation.ts
+++ b/src/actions/reservation.ts
@ -1,12 +0,0 @@
-"use server";
-
-export const submitReservationFormAction = (formData: FormData) => {
-  console.log(JSON.stringify(formData, null, 2));
-  console.log(formData.get("message"));
-  console.log(formData.get("subject"));
-  console.log(formData.get("date"));
-  console.log(formData.get("time"));
-  console.log(formData.get("name"));
-  console.log(formData.get("email"));
-  console.log(formData.get("phone"));
-};
--- a/src/actions/reservation.tsx
+++ b/src/actions/reservation.tsx
@ -0,0 +1,22 @@
+"use server";
+
+import { getPayload } from "@/utils/payload";
+
+export const submitReservationFormAction = async (formData: FormData) => {
+  const payload = await getPayload();
+  await payload.sendEmail({
+    to: "moravrav@gmail.com",
+    subject: `Reservation von ${formData.get("name")}`,
+    text: `Sie haben eine Reservation von ${formData.get("name")} erhalten:
+
+    Datum / Uhrzeit: ${formData.get("date")} / ${formData.get("date")}
+    Gäste: ${formData.get("guests")}
+
+    Nachricht: ${formData.get("message")}
+
+    Kontaktdaten:
+      - E-Mail: ${formData.get("email")}
+      - Telefonnummer: ${formData.get("phone")}
+    `,
+  });
+};
--- a/src/emails/contact-confirmation.tsx
+++ b/src/emails/contact-confirmation.tsx
@ -0,0 +1,41 @@
+import {
+  Font,
+  Head,
+  Html,
+  Preview,
+  Tailwind,
+  Text
+} from "@react-email/components";
+
+type ContactEmailProps = { name: string; email: string; subject: string; message: string };
+
+export default function ContactEmail({
+  name = "[[Name]]",
+  subject = "[[Subject]]",
+  email = "[[Email]]",
+  message = "[[Message]]",
+}: ContactEmailProps) {
+  return (
+    <Html>
+      <Head>
+        <title>Vielen Dank für Ihre Kontaktanfrage</title>
+        <Font
+          fontFamily="Roboto"
+          fallbackFontFamily="Verdana"
+          webFont={{
+            url: "https://fonts.googleapis.com/css2?family=Moderustic:wght@300..800&display=swap",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>Vielen Dank für Ihre Kontaktanfrage</Preview>
+      <Tailwind>
+        <Text>
+          Wir haben Ihre Kontaktanfrage erhalten und melden uns innerhalb kurzer Zeit bei Ihnen.
+        </Text>
+      </Tailwind>
+    </Html>
+  );
+}
--- a/src/emails/contact.tsx
+++ b/src/emails/contact.tsx
@ -0,0 +1,57 @@
+import {
+  Column,
+  Font,
+  Head,
+  Html,
+  Preview,
+  Row,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+
+type ContactEmailProps = { name: string; email: string; subject: string; message: string };
+
+export default function ContactEmail({
+  name = "[[Name]]",
+  subject = "[[Subject]]",
+  email = "[[Email]]",
+  message = "[[Message]]",
+}: ContactEmailProps) {
+  return (
+    <Html>
+      <Head>
+        <title>
+          Kontaktanfrage von {name}: {subject}
+        </title>
+        <Font
+          fontFamily="Roboto"
+          fallbackFontFamily="Verdana"
+          webFont={{
+            url: "https://fonts.googleapis.com/css2?family=Moderustic:wght@300..800&display=swap",
+            format: "woff2",
+          }}
+          fontWeight={400}
+          fontStyle="normal"
+        />
+      </Head>
+      <Preview>Kontaktanfrage von {name}</Preview>
+      <Tailwind>
+        <Text>Sie haben eine Kontaktanfrage von {name} erhalten:</Text>
+        <Text>{subject}</Text>
+        <Section>
+          <Row>
+            <Column>Name</Column>
+            <Column>{name}</Column>
+          </Row>
+          <Row>
+            <Column>E-Mail</Column>
+            <Column>{email}</Column>
+          </Row>
+        </Section>
+        <Text>Nachricht</Text>
+        <Text>{message}</Text>
+      </Tailwind>
+    </Html>
+  );
+}
--- a/yarn.lock
+++ b/yarn.lock