Dan6erbond
/
localbites
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ use settings and translations in contact server action and emails

Browse Source
main
RaviAnand Mohabir 3 months ago
parent f573a4ac2e
commit 520dd137d8
3 changed files with 111 additions and 42 deletions
Show Stats Download Patch File Download Diff File

54
src/actions/contact.tsx
Unescape Escape View File

@ -1,21 +1,53 @@
"use server"; "use server";
import ContactEmail from "@/emails/contact"; import { getI18n } from "@/i18n/server";
import { getPayload } from "@/utils/payload"; 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) => { export const submitContactFormAction = async (formData: FormData) => {
const payload = await getPayload(); 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({ await payload.sendEmail({
to: "moravrav@gmail.com", to: contactEmailsTo,
subject: `Kontaktanfrage von ${formData.get("name")}`, subject: t("email.contactSubject", { name: formData.get("name") }),
email: await render( email: await renderContactEmail(
<ContactEmail {
name={formData.get("name")} name: formData.get("name"),
email={formData.get("email")} email: formData.get("email"),
subject={formData.get("subject")} subject: formData.get("subject"),
message={formData.get("message")} 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,
}),
});
}; };

59
src/emails/contact-confirmation.tsx
Unescape Escape View File

@ -1,24 +1,23 @@
import { import { Font, Head, Html, Preview, Tailwind, Text } from "@react-email/components";
Font, import { I18nProviderClient, useI18n } from "@/i18n/client";
Head, import { Options, render } from "@react-email/render";
Html,
Preview,
Tailwind,
Text
} from "@react-email/components";
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 ( return (
<Html> <Html>
<Head> <Head>
<title>Vielen Dank für Ihre Kontaktanfrage</title> <title>{t("email.contactConfirmationSubject")}</title>
<Font <Font
fontFamily="Roboto" fontFamily="Roboto"
fallbackFontFamily="Verdana" fallbackFontFamily="Verdana"
@ -30,12 +29,32 @@ export default function ContactEmail({
fontStyle="normal" fontStyle="normal"
/> />
</Head> </Head>
<Preview>Vielen Dank für Ihre Kontaktanfrage</Preview> <Preview>{t("email.contactConfirmationSubject")}</Preview>
<Tailwind> <Tailwind>
<Text> <Text>{t("email.contactConfirmationText")}</Text>
Wir haben Ihre Kontaktanfrage erhalten und melden uns innerhalb kurzer Zeit bei Ihnen.
</Text>
</Tailwind> </Tailwind>
</Html> </Html>
); );
} }
type ContactConfirmationEmailProps = {
locale: string;
} & ContactConfirmationEmailContentProps;
export default function ContactConfirmationEmail({
locale = defaultLocale,
...props
}: ContactConfirmationEmailProps) {
return (
<I18nProviderClient locale={locale}>
<ContactConfirmationEmailContent {...props} />
</I18nProviderClient>
);
}
export async function renderContactConfirmationEmail(
props: ContactConfirmationEmailProps,
opts?: Options,
) {
return await render(<ContactConfirmationEmail {...props} />, opts);
}

40
src/emails/contact.tsx
Unescape Escape View File

@ -9,21 +9,25 @@ import {
Tailwind, Tailwind,
Text, Text,
} from "@react-email/components"; } 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]]", name = "[[Name]]",
subject = "[[Subject]]", subject = "[[Subject]]",
email = "[[Email]]", email = "[[Email]]",
message = "[[Message]]", message = "[[Message]]",
}: ContactEmailProps) { }: ContactEmailContentProps) {
const t = useI18n();
return ( return (
<Html> <Html>
<Head> <Head>
<title> <title>{t("email.contactSubject", { name })}</title>
Kontaktanfrage von {name}: {subject}
</title>
<Font <Font
fontFamily="Roboto" fontFamily="Roboto"
fallbackFontFamily="Verdana" fallbackFontFamily="Verdana"
@ -35,23 +39,37 @@ export default function ContactEmail({
fontStyle="normal" fontStyle="normal"
/> />
</Head> </Head>
<Preview>Kontaktanfrage von {name}</Preview> <Preview>{t("email.contactSubject", { name })}</Preview>
<Tailwind> <Tailwind>
<Text>Sie haben eine Kontaktanfrage von {name} erhalten:</Text> <Text>{t("email.contactTitle", { name })}</Text>
<Text>{subject}</Text> <Text>{subject}</Text>
<Section> <Section>
<Row> <Row>
<Column>Name</Column> <Column>{t("contact.name")}</Column>
<Column>{name}</Column> <Column>{name}</Column>
</Row> </Row>
<Row> <Row>
<Column>E-Mail</Column> <Column>{t("general.email")}</Column>
<Column>{email}</Column> <Column>{email}</Column>
</Row> </Row>
</Section> </Section>
<Text>Nachricht</Text> <Text>{t("contact.message")}</Text>
<Text>{message}</Text> <Text>{message}</Text>
</Tailwind> </Tailwind>
</Html> </Html>
); );
} }
type ContactEmailProps = { locale: string } & ContactEmailContentProps;
export default function ContactEmail({ locale = defaultLocale, ...props }: ContactEmailProps) {
return (
<I18nProviderClient locale={locale}>
<ContactEmailContent {...props} />
</I18nProviderClient>
);
}
export async function renderContactEmail(props: ContactEmailProps, opts?: Options) {
return await render(<ContactEmail {...props} />, opts);
}

Write Preview
Loading…
Cancel
Save