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 weeks 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";
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(
<ContactEmail
name={formData.get("name")}
email={formData.get("email")}
subject={formData.get("subject")}
message={formData.get("message")}
/>,
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,
}),
});
};

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

@ -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 (
<Html>
<Head>
<title>Vielen Dank für Ihre Kontaktanfrage</title>
<title>{t("email.contactConfirmationSubject")}</title>
<Font
fontFamily="Roboto"
fallbackFontFamily="Verdana"
@ -30,12 +29,32 @@ export default function ContactEmail({
fontStyle="normal"
/>
</Head>
<Preview>Vielen Dank für Ihre Kontaktanfrage</Preview>
<Preview>{t("email.contactConfirmationSubject")}</Preview>
<Tailwind>
<Text>
Wir haben Ihre Kontaktanfrage erhalten und melden uns innerhalb kurzer Zeit bei Ihnen.
</Text>
<Text>{t("email.contactConfirmationText")}</Text>
</Tailwind>
</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,
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 (
<Html>
<Head>
<title>
Kontaktanfrage von {name}: {subject}
</title>
<title>{t("email.contactSubject", { name })}</title>
<Font
fontFamily="Roboto"
fallbackFontFamily="Verdana"
@ -35,23 +39,37 @@ export default function ContactEmail({
fontStyle="normal"
/>
</Head>
<Preview>Kontaktanfrage von {name}</Preview>
<Preview>{t("email.contactSubject", { name })}</Preview>
<Tailwind>
<Text>Sie haben eine Kontaktanfrage von {name} erhalten:</Text>
<Text>{t("email.contactTitle", { name })}</Text>
<Text>{subject}</Text>
<Section>
<Row>
<Column>Name</Column>
<Column>{t("contact.name")}</Column>
<Column>{name}</Column>
</Row>
<Row>
<Column>E-Mail</Column>
<Column>{t("general.email")}</Column>
<Column>{email}</Column>
</Row>
</Section>
<Text>Nachricht</Text>
<Text>{t("contact.message")}</Text>
<Text>{message}</Text>
</Tailwind>
</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