feat: ✨ implement contact and contact-confirmation emails with react-email
parent
ad22d47947
commit
92fd8d9dd1
@ -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"));
|
|
||||||
};
|
|
||||||
@ -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")}
|
||||||
|
/>,
|
||||||
|
),
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -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"));
|
|
||||||
};
|
|
||||||
@ -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")}
|
||||||
|
`,
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue