From 520dd137d8cd611e4fb930df64992534f727d9f8 Mon Sep 17 00:00:00 2001 From: RaviAnand Mohabir Date: Tue, 27 Aug 2024 15:43:18 +0200 Subject: [PATCH] feat: :sparkles: use settings and translations in contact server action and emails --- src/actions/contact.tsx | 54 ++++++++++++++++++++------ src/emails/contact-confirmation.tsx | 59 +++++++++++++++++++---------- src/emails/contact.tsx | 40 +++++++++++++------ 3 files changed, 111 insertions(+), 42 deletions(-) diff --git a/src/actions/contact.tsx b/src/actions/contact.tsx index 187acbc..a5f65db 100644 --- a/src/actions/contact.tsx +++ b/src/actions/contact.tsx @@ -1,21 +1,53 @@ "use server"; -import ContactEmail from "@/emails/contact"; +import { getI18n } from "@/i18n/server"; import { getPayload } from "@/utils/payload"; -import { render } from "@react-email/render"; +import { getSettings } from "@/api"; +import { renderContactConfirmationEmail } from "@/emails/contact-confirmation"; +import { renderContactEmail } from "@/emails/contact"; export const submitContactFormAction = async (formData: FormData) => { const payload = await getPayload(); + const { adminLanguage, contactEmailsTo } = await getSettings(); + const t = await getI18n(); + + console.log( + await renderContactEmail( + { + name: formData.get("name"), + email: formData.get("email"), + subject: formData.get("subject"), + message: formData.get("message"), + locale: adminLanguage, + }, + { plainText: true }, + ), + ); + await payload.sendEmail({ - to: "moravrav@gmail.com", - subject: `Kontaktanfrage von ${formData.get("name")}`, - email: await render( - , + to: contactEmailsTo, + subject: t("email.contactSubject", { name: formData.get("name") }), + email: await renderContactEmail( + { + name: formData.get("name"), + email: formData.get("email"), + subject: formData.get("subject"), + message: formData.get("message"), + locale: adminLanguage, + }, + { plainText: true }, ), }); + + await payload.sendEmail({ + to: formData.get("email"), + subject: `Bestätigung Ihrer Kontaktanfrage ${formData.get("name")}`, + email: await renderContactConfirmationEmail({ + name: formData.get("name"), + email: formData.get("email"), + subject: formData.get("subject"), + message: formData.get("message"), + locale: adminLanguage, + }), + }); }; diff --git a/src/emails/contact-confirmation.tsx b/src/emails/contact-confirmation.tsx index 8dd1628..4f50168 100644 --- a/src/emails/contact-confirmation.tsx +++ b/src/emails/contact-confirmation.tsx @@ -1,24 +1,23 @@ -import { - Font, - Head, - Html, - Preview, - Tailwind, - Text -} from "@react-email/components"; +import { Font, Head, Html, Preview, Tailwind, Text } from "@react-email/components"; +import { I18nProviderClient, useI18n } from "@/i18n/client"; +import { Options, render } from "@react-email/render"; -type ContactEmailProps = { name: string; email: string; subject: string; message: string }; +import { defaultLocale } from "@/i18n/settings"; + +type ContactConfirmationEmailContentProps = { + name: string; + email: string; + subject: string; + message: string; +}; + +function ContactConfirmationEmailContent(_props: ContactConfirmationEmailContentProps) { + const t = useI18n(); -export default function ContactEmail({ - name = "[[Name]]", - subject = "[[Subject]]", - email = "[[Email]]", - message = "[[Message]]", -}: ContactEmailProps) { return ( - Vielen Dank für Ihre Kontaktanfrage + {t("email.contactConfirmationSubject")} - Vielen Dank für Ihre Kontaktanfrage + {t("email.contactConfirmationSubject")} - - Wir haben Ihre Kontaktanfrage erhalten und melden uns innerhalb kurzer Zeit bei Ihnen. - + {t("email.contactConfirmationText")} ); } + +type ContactConfirmationEmailProps = { + locale: string; +} & ContactConfirmationEmailContentProps; + +export default function ContactConfirmationEmail({ + locale = defaultLocale, + ...props +}: ContactConfirmationEmailProps) { + return ( + + + + ); +} + +export async function renderContactConfirmationEmail( + props: ContactConfirmationEmailProps, + opts?: Options, +) { + return await render(, opts); +} diff --git a/src/emails/contact.tsx b/src/emails/contact.tsx index 9e64e8a..225c428 100644 --- a/src/emails/contact.tsx +++ b/src/emails/contact.tsx @@ -9,21 +9,25 @@ import { Tailwind, Text, } from "@react-email/components"; +import { I18nProviderClient, useI18n } from "@/i18n/client"; +import { Options, render } from "@react-email/render"; -type ContactEmailProps = { name: string; email: string; subject: string; message: string }; +import { defaultLocale } from "@/i18n/settings"; -export default function ContactEmail({ +type ContactEmailContentProps = { name: string; email: string; subject: string; message: string }; + +function ContactEmailContent({ name = "[[Name]]", subject = "[[Subject]]", email = "[[Email]]", message = "[[Message]]", -}: ContactEmailProps) { +}: ContactEmailContentProps) { + const t = useI18n(); + return ( - - Kontaktanfrage von {name}: {subject} - + {t("email.contactSubject", { name })} - Kontaktanfrage von {name} + {t("email.contactSubject", { name })} - Sie haben eine Kontaktanfrage von {name} erhalten: + {t("email.contactTitle", { name })} {subject}
- Name + {t("contact.name")} {name} - E-Mail + {t("general.email")} {email}
- Nachricht + {t("contact.message")} {message} ); } + +type ContactEmailProps = { locale: string } & ContactEmailContentProps; + +export default function ContactEmail({ locale = defaultLocale, ...props }: ContactEmailProps) { + return ( + + + + ); +} + +export async function renderContactEmail(props: ContactEmailProps, opts?: Options) { + return await render(, opts); +}