feat: ✨ implement toast on contact form success, alerts for vacations, holidays and announcements

- Move address and contact methods to individual components.

panda.config.ts

@@ -18,6 +18,51 @@ export default defineConfig({
   // Files to exclude
   exclude: [],
 
+  patterns: {
+    extend: {
+      scrollable: {
+        description: "A container that allows for scrolling",
+        defaultValues: {
+          direction: "vertical",
+          hideScrollbar: false,
+        },
+        properties: {
+          // The direction of the scroll
+          direction: { type: "enum", value: ["horizontal", "vertical"] },
+          // Whether to hide the scrollbar
+          hideScrollbar: { type: "boolean" },
+        },
+        // disallow the `overflow` property (in TypeScript)
+        blocklist: ["overflow"],
+        transform(props) {
+          const { direction, hideScrollbar, ...rest } = props;
+          return {
+            overflow: "auto",
+            height: direction === "horizontal" ? "100%" : "auto",
+            width: direction === "vertical" ? "100%" : "auto",
+            scrollbarWidth: hideScrollbar ? "none" : "auto",
+            WebkitOverflowScrolling: "touch",
+            "&::-webkit-scrollbar": {
+              display: hideScrollbar ? "none" : "auto",
+              width: 2,
+            },
+            "&::-webkit-scrollbar-track": {
+              background: "{colors.gray.a8}",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              background: "{colors.accent.a10}",
+              borderRadius: "md",
+            },
+            "&::-webkit-scrollbar-thumb:hover": {
+              background: "{colors.accent.10}",
+            },
+            ...rest,
+          };
+        },
+      },
+    },
+  },
+
   // Useful for theme customization
   theme: {},
 

src/actions/contact.ts

@@ -0,0 +1,45 @@
+"use server";
+
+import { getI18n, getLocalizedI18n } from "@/i18n/server";
+
+import { contactSchema } from "@/types/contact";
+import { getPayload } from "@/utils/payload";
+import { getSettings } from "@/api";
+import { renderContactConfirmationEmail } from "@/emails/contact-confirmation";
+import { renderContactEmail } from "@/emails/contact";
+
+export const submitContactFormAction = async (_: any, formData: FormData) => {
+  const { success, error, data } = contactSchema.safeParse(Object.fromEntries(formData));
+
+  if (!success) {
+    return { success, error: error.flatten().fieldErrors };
+  }
+
+  const payload = await getPayload();
+  const { adminLanguage, contactEmailsTo } = await getSettings();
+  const [t, reset] = await getLocalizedI18n(adminLanguage);
+
+  try {
+    let res = await payload.sendEmail({
+      to: contactEmailsTo,
+      subject: t("email.contactSubject", { name: data.name }),
+      email: await renderContactEmail({
+        t,
+        ...data,
+      }),
+    });
+
+    res = await payload.sendEmail({
+      to: data.email,
+      subject: t("email.contactConfirmationSubject"),
+      email: await renderContactConfirmationEmail({
+        t,
+        ...data,
+      }),
+    });
+  } finally {
+    reset();
+  }
+
+  return { success: true };
+};

src/actions/contact.tsx

@@ -1,53 +0,0 @@
-"use server";
-
-import { getI18n } from "@/i18n/server";
-import { getPayload } from "@/utils/payload";
-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: 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,
-    }),
-  });
-};

src/api/announcements.ts

@@ -0,0 +1,23 @@
+import type { Options } from "node_modules/payload/dist/collections/operations/local/find";
+import { getPayload } from "@/utils/payload";
+
+export const getCurrentAnnouncements = async (
+  opts: Omit<Options<"announcement">, "collection" | "sort" | "pagination">,
+) => {
+  const payload = await getPayload();
+
+  const today = new Date();
+
+  return await payload.find({
+    collection: "announcement",
+    sort: "from",
+    where: {
+      or: [
+        { from: { equals: today } },
+        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+      ],
+    },
+    pagination: false,
+    ...opts,
+  });
+};

src/api/holidays.ts

@@ -0,0 +1,23 @@
+import type { Options } from "node_modules/payload/dist/collections/operations/local/find";
+import { getPayload } from "@/utils/payload";
+
+export const getCurrentHolidays = async (
+  opts: Omit<Options<"holiday">, "collection" | "sort" | "pagination">,
+) => {
+  const payload = await getPayload();
+
+  const today = new Date();
+
+  return await payload.find({
+    collection: "holiday",
+    sort: "from",
+    where: {
+      or: [
+        { from: { equals: today } },
+        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+      ],
+    },
+    pagination: false,
+    ...opts,
+  });
+};

src/api/index.ts

@@ -1,7 +1,9 @@
 export * from "./about";
+export * from "./announcements";
 export * from "./contact";
 export * from "./gallery";
+export * from "./holidays";
 export * from "./home";
 export * from "./menu";
 export * from "./settings";
-
+export * from "./vacations";

src/api/vacations.ts

@@ -0,0 +1,23 @@
+import type { Options } from "node_modules/payload/dist/collections/operations/local/find";
+import { getPayload } from "@/utils/payload";
+
+export const getCurrentVacations = async (
+  opts: Omit<Options<"vacation">, "collection" | "sort" | "pagination">,
+) => {
+  const payload = await getPayload();
+
+  const today = new Date();
+
+  return await payload.find({
+    collection: "vacation",
+    sort: "from",
+    where: {
+      or: [
+        { from: { equals: today } },
+        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+      ],
+    },
+    pagination: false,
+    ...opts,
+  });
+};

src/app/(frontend)/[locale]/contact/contact-form.tsx

@@ -1,37 +1,64 @@
-import { HStack, styled } from "@styled-system/jsx";
+"use client";
+
+import { HStack, Stack, styled } from "@styled-system/jsx";
+import { useActionState, useEffect } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Field } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
-import { getI18n } from "@/i18n/server";
+import { Text } from "@/components/ui/text";
 import { stack } from "@styled-system/patterns";
 import { submitContactFormAction } from "@/actions/contact";
+import { useI18n } from "@/i18n/client";
+import { useToast } from "@/hooks/toast";
+
+const hasError = (error: string[] | undefined) => error !== undefined && error.length > 0;
 
-export default async function ContactForm() {
+export default function ContactForm() {
-  const t = await getI18n();
+  const [state, formAction, pending] = useActionState(submitContactFormAction, null);
+  const t = useI18n();
+  const toaster = useToast();
+
+  useEffect(() => {
+    if (state?.success) {
+      toaster.create({
+        title: t("contact.messageSent"),
+        description: t("contact.messageSentDescription"),
+      });
+    }
+  }, [state, toaster]);
 
   return (
-    <styled.form action={submitContactFormAction} className={stack()}>
+    <styled.form action={formAction} className={stack()}>
-      <Field.Root id="name">
+      <Field.Root id="name" invalid={hasError(state?.error?.name)}>
         <Field.Label>{t("contact.name")}</Field.Label>
         <Field.Input name="name" placeholder={t("contact.name")} />
+        <Field.ErrorText>{state?.error?.name?.[0]}</Field.ErrorText>
       </Field.Root>
-      <Field.Root id="email">
+      <Field.Root id="email" invalid={hasError(state?.error?.email)}>
         <Field.Label>{t("general.email")}</Field.Label>
         <Field.Input name="email" placeholder={t("general.email")} asChild>
           <Input type="email" />
         </Field.Input>
+        <Field.ErrorText>{state?.error?.email?.[0]}</Field.ErrorText>
       </Field.Root>
-      <Field.Root id="subject">
+      <Field.Root id="subject" invalid={hasError(state?.error?.subject)}>
         <Field.Label>{t("contact.subject")}</Field.Label>
         <Field.Input name="subject" placeholder={t("contact.subject")} />
+        <Field.ErrorText>{state?.error?.subject?.[0]}</Field.ErrorText>
       </Field.Root>
-      <Field.Root id="message">
+      <Field.Root id="message" invalid={hasError(state?.error?.message)}>
         <Field.Label>{t("contact.message")}</Field.Label>
         <Field.Textarea name="message" placeholder={t("contact.message")} />
+        <Field.ErrorText>{state?.error?.message?.[0]}</Field.ErrorText>
       </Field.Root>
       <HStack justify="end">
-        <Button type="submit">{t("general.submit")}</Button>
+        <Stack>
+          <Button type="submit" loading={pending}>
+            {t("general.submit")}
+          </Button>
+          {state?.success && <Text color="green">Nachricht gesendet</Text>}
+        </Stack>
       </HStack>
     </styled.form>
   );

src/app/(frontend)/[locale]/contact/page.tsx

@@ -1,21 +1,30 @@
-import { Box, HStack, Stack } from "@styled-system/jsx";
+import { Box, Grid, HStack, Stack } from "@styled-system/jsx";
 import { getAbout, getContact } from "@/api";
 
+import Address from "@/components/general/address";
 import ContactForm from "./contact-form";
+import ContactMethods from "@/components/general/contact-methods";
 import { Heading } from "@/components/ui/heading";
+import { Link } from "@/components/ui/link";
+import OpeningTimes from "@/components/general/opening-times";
 import { Params } from "../shared";
 import ReservationForm from "./reservation-form";
 import { Tabs } from "@/components/ui/tabs";
 import { Text } from "@/components/ui/text";
 import { getI18n } from "@/i18n/server";
-import { getOpeningTimes } from "@/api/openingTimes";
 import { styled } from "@styled-system/jsx";
 
-export default async function Contact({ params: { locale } }: { params: Params }) {
+export default async function Contact({
+  params: { locale },
+  searchParams: { tab = "contact" },
+}: {
+  params: Params;
+  searchParams: { tab?: "reservation" | "contact" };
+}) {
+  console.log(tab);
   const t = await getI18n();
   const about = await getAbout({ locale });
   const contact = await getContact({ locale });
-  const openingTimes = await getOpeningTimes({ locale });
 
   return (
     <Stack p={6} gap={6}>
@@ -24,80 +33,42 @@ export default async function Contact({ params: { locale } }: { params: Params }
       </Heading>
 
       <HStack gap={10} flexWrap="wrap" justifyContent="space-between" alignItems="start">
-        <Tabs.Root
+        <Tabs.Root defaultValue={tab} orientation="horizontal" minW={350} flex={1} flexGrow={1}>
-          defaultValue="reservation"
-          orientation="horizontal"
-          minW={350}
-          flex={1}
-          flexGrow={1}
-        >
           <Tabs.List>
-            <Tabs.Trigger value="reservation">{t("contact.reservation")}</Tabs.Trigger>
             <Tabs.Trigger value="contact">{t("general.contact")}</Tabs.Trigger>
+            <Tabs.Trigger value="reservation">{t("contact.reservation")}</Tabs.Trigger>
             <Tabs.Indicator />
           </Tabs.List>
-          <Tabs.Content value="reservation">
-            <ReservationForm />
-          </Tabs.Content>
           <Tabs.Content value="contact">
             <ContactForm />
           </Tabs.Content>
+          <Tabs.Content value="reservation">
+            <ReservationForm />
+          </Tabs.Content>
         </Tabs.Root>
 
-        <Stack gap={6}>
+        <Stack gap={6} flex={1} flexGrow={1}>
           <Stack>
             <Heading as="h3" size="xl">
               {t("general.openingTimes")}
             </Heading>
-            {openingTimes.docs.map((ot) => (
+            <OpeningTimes locale={locale} />
-              <HStack key={ot.id}>
-                <Text w={250}>
-                  {t(`days.${ot.from}`)}
-                  {ot.to ? `- ${t(`days.${ot.to}`)}` : ""}
-                </Text>
-                <Text>
-                  {new Date(ot.timeOpen).toLocaleTimeString("de-CH", { timeStyle: "short" })} -{" "}
-                  {new Date(ot.timeClose).toLocaleTimeString("de-CH", { timeStyle: "short" })}
-                </Text>
-              </HStack>
-            ))}
           </Stack>
 
           <Stack>
             <Heading as="h3" size="xl">
               {t("general.address")}
             </Heading>
-            <HStack gap={20} flexWrap="wrap">
+            <HStack gap={12} alignItems="start">
+              <Address locale={locale} />
+              <ContactMethods locale={locale} />
+            </HStack>
             {contact.address.embeddedMaps && (
               <styled.div
                 dangerouslySetInnerHTML={{ __html: contact.address.embeddedMaps }}
                 width={600}
               />
             )}
-              <Stack>
-                <Box>
-                  <Text fontWeight="bold">{about.name}</Text>
-                  <Text>
-                    {contact.address.street} {contact.address.number}
-                  </Text>
-                  <Text>
-                    {contact.address.zip} {contact.address.area}
-                  </Text>
-                </Box>
-                {contact.phone && (
-                  <HStack>
-                    <Text fontWeight="bold">{t("general.phoneNumber")}</Text>
-                    <styled.a href={`tel:${contact.phone}`}>{contact.phone}</styled.a>
-                  </HStack>
-                )}
-                {contact.email && (
-                  <HStack>
-                    <Text fontWeight="bold">{t("general.email")}</Text>
-                    <styled.a href={`mailto:${contact.email}`}>{contact.email}</styled.a>
-                  </HStack>
-                )}
-              </Stack>
-            </HStack>
           </Stack>
         </Stack>
       </HStack>

src/app/(frontend)/[locale]/layout.tsx

@@ -7,6 +7,7 @@ import { I18nProviderClient } from "@/i18n/client";
 import { Metadata } from "next";
 import Navbar from "@/components/layout/navbar";
 import { Params } from "./shared";
+import { ToastContextProvider } from "@/contexts/toast";
 import { getAbout } from "@/api";
 import localFont from "next/font/local";
 import { styled } from "@styled-system/jsx";
@@ -26,6 +27,7 @@ export default async function RootLayout({
   return (
     <html lang={locale}>
       <I18nProviderClient locale={locale}>
+        <ToastContextProvider>
           <styled.body className={moderustic.className}>
             <Navbar locale={locale} />
             <styled.main mt={20} pb={20}>
@@ -33,6 +35,7 @@ export default async function RootLayout({
             </styled.main>
             <Footer locale={locale} />
           </styled.body>
+        </ToastContextProvider>
       </I18nProviderClient>
     </html>
   );

src/app/(frontend)/[locale]/page.tsx

@@ -1,17 +1,33 @@
-import { Box, Container, Stack } from "@styled-system/jsx";
+import { Box, Container, Stack, styled } from "@styled-system/jsx";
-import { getAbout, getHome } from "@/api";
+import { Info, Palmtree, PartyPopper } from "lucide-react";
+import {
+  getAbout,
+  getCurrentAnnouncements,
+  getCurrentHolidays,
+  getCurrentVacations,
+  getHome,
+} from "@/api";
 
+import { Alert } from "@/components/ui/alert";
 import Gallery from "./gallery";
+import { Heading } from "@/components/ui/heading";
 import Image from "next/image";
 import { Media } from "@/payload-types";
 import { Params } from "./shared";
 import RichText from "@/components/rich-text";
+import { Text } from "@/components/ui/text";
 import { css } from "@styled-system/css";
-import { styled } from "@styled-system/jsx";
+import { getI18n } from "@/i18n/server";
+import { scrollable } from "@styled-system/patterns";
 
 export default async function Home({ params: { locale } }: { params: Params }) {
+  const t = await getI18n();
+
   const home = await getHome({ locale });
   const about = await getAbout({ locale });
+  const vacations = await getCurrentVacations({ locale });
+  const holidays = await getCurrentHolidays({ locale });
+  const announcements = await getCurrentAnnouncements({ locale });
 
   return (
     <Stack gap={10} align="center">
@@ -22,16 +38,65 @@ export default async function Home({ params: { locale } }: { params: Params }) {
           className={css({ objectFit: "cover" })}
           fill
         />
-        <styled.div
+        <Stack
           position="absolute"
+          top="10%"
+          width="100%"
+          maxH="80%"
+          align="center"
+          px={30}
+          gap={24}
           color="white"
-          top="60%"
+        >
+          <Stack
+            maxW={550}
             width="100%"
-          textAlign="center"
+            className={scrollable({ hideScrollbar: false, px: 2 })}
-          fontSize={36}
           >
+            {announcements.docs.length > 0 && (
+              <Heading size="xl" color="white">
+                {t("general.announcements")}
+              </Heading>
+            )}
+            {announcements.docs.map((v) => (
+              <Alert.Root bg="white.a10">
+                <Alert.Icon asChild>
+                  <Info />
+                </Alert.Icon>
+                <Alert.Title>{v.title}</Alert.Title>
+              </Alert.Root>
+            ))}
+            {holidays.docs.length > 0 && (
+              <Heading size="xl" mt={4} color="white">
+                {t("general.holidays")}
+              </Heading>
+            )}
+            {holidays.docs.map((v) => (
+              <Alert.Root bg="white.a10">
+                <Alert.Icon asChild>
+                  <PartyPopper />
+                </Alert.Icon>
+                <Alert.Title>{v.title}</Alert.Title>
+              </Alert.Root>
+            ))}
+            {vacations.docs.length > 0 && (
+              <Heading size="xl" mt={4} color="white">
+                {t("general.vacations")}
+              </Heading>
+            )}
+            {vacations.docs.map((v) => (
+              <Alert.Root bg="white.a10">
+                <Alert.Icon asChild>
+                  <Palmtree />
+                </Alert.Icon>
+                <Alert.Title>{v.title}</Alert.Title>
+              </Alert.Root>
+            ))}
+          </Stack>
+          <Text color="white" maxW={550} width="100%" textAlign="center" fontSize={36}>
             {home.tagline}
-        </styled.div>
+          </Text>
+        </Stack>
       </Box>
       <Container>
         <RichText content={home.aboutText} />

src/collections/Announcement.ts

@@ -13,6 +13,7 @@ export const Announcement: CollectionConfig = {
       name: "title",
       type: "text",
       localized: true,
+      required: true,
     },
     {
       name: "description",
@@ -28,6 +29,7 @@ export const Announcement: CollectionConfig = {
           displayFormat: "d MMM yyy",
         },
       },
+      required: true,
     },
     {
       name: "to",

src/collections/Holiday.ts

@@ -13,6 +13,7 @@ export const Holiday: CollectionConfig = {
       name: "title",
       type: "text",
       localized: true,
+      required: true,
     },
     {
       name: "from",
@@ -23,6 +24,7 @@ export const Holiday: CollectionConfig = {
           displayFormat: "d MMM yyy",
         },
       },
+      required: true,
     },
     {
       name: "to",

src/collections/Vacation.ts

@@ -13,6 +13,7 @@ export const Vacation: CollectionConfig = {
       name: "title",
       type: "text",
       localized: true,
+      required: true,
     },
     {
       name: "from",
@@ -23,6 +24,7 @@ export const Vacation: CollectionConfig = {
           displayFormat: "d MMM yyy",
         },
       },
+      required: true,
     },
     {
       name: "to",

src/components/general/address.tsx

@@ -0,0 +1,22 @@
+import { getAbout, getContact } from "@/api";
+
+import { Box } from "@styled-system/jsx";
+import { Locale } from "@/i18n/settings";
+import { Text } from "@/components/ui/text";
+
+export default async function Address({ locale }: { locale: Locale }) {
+  const about = await getAbout({ locale });
+  const contact = await getContact({ locale });
+
+  return (
+    <Box>
+      <Text fontWeight="bold">{about.name}</Text>
+      <Text>
+        {contact.address.street} {contact.address.number}
+      </Text>
+      <Text>
+        {contact.address.zip} {contact.address.area}
+      </Text>
+    </Box>
+  );
+}

src/components/general/contact-methods.tsx

@@ -0,0 +1,28 @@
+import { Grid } from "@styled-system/jsx";
+import { Link } from "@/components/ui/link";
+import { Locale } from "@/i18n/settings";
+import { Text } from "@/components/ui/text";
+import { getContact } from "@/api";
+import { getI18n } from "@/i18n/server";
+
+export default async function ContactMethods({ locale }: { locale: Locale }) {
+  const t = await getI18n();
+  const contact = await getContact({ locale });
+
+  return (
+    <Grid gridTemplateColumns="min-content 1fr" columnGap={2} rowGap={0.5}>
+      {contact.phone && (
+        <>
+          <Text fontWeight="bold">{t("general.phoneNumber")}</Text>
+          <Link href={`tel:${contact.phone}`}>{contact.phone}</Link>
+        </>
+      )}
+      {contact.email && (
+        <>
+          <Text fontWeight="bold">{t("general.email")}</Text>
+          <Link href={`mailto:${contact.email}`}>{contact.email}</Link>
+        </>
+      )}
+    </Grid>
+  );
+}

src/components/general/opening-times.tsx

@@ -0,0 +1,28 @@
+import { Box, HStack } from "@styled-system/jsx";
+
+import { Locale } from "@/i18n/settings";
+import { Text } from "@/components/ui/text";
+import { getI18n } from "@/i18n/server";
+import { getOpeningTimes } from "@/api/openingTimes";
+
+export default async function OpeningTimes({ locale }: { locale: Locale }) {
+  const t = await getI18n();
+  const openingTimes = await getOpeningTimes({ locale });
+
+  return (
+    <Box>
+      {openingTimes.docs.map((ot) => (
+        <HStack key={ot.id}>
+          <Text w={250}>
+            {t(`days.${ot.from}`)}
+            {ot.to ? ` - ${t(`days.${ot.to}`)}` : ""}
+          </Text>
+          <Text>
+            {new Date(ot.timeOpen).toLocaleTimeString("de-CH", { timeStyle: "short" })} -{" "}
+            {new Date(ot.timeClose).toLocaleTimeString("de-CH", { timeStyle: "short" })}
+          </Text>
+        </HStack>
+      ))}
+    </Box>
+  );
+}

src/components/layout/footer.tsx

@@ -1,28 +1,25 @@
-import { Box, HStack, Stack, styled } from "@styled-system/jsx";
+import { HStack, Stack, styled } from "@styled-system/jsx";
-import { getAbout, getContact } from "@/api";
 
+import Address from "@/components/general/address";
+import ContactMethods from "@/components/general/contact-methods";
+import { Heading } from "@/components/ui/heading";
 import { IconButton } from "@/components/ui/icon-button";
 import { Locale } from "@/i18n/settings";
+import OpeningTimes from "@/components/general/opening-times";
 import { SiFacebook } from "@icons-pack/react-simple-icons";
 import { Text } from "@/components/ui/text";
+import { getContact } from "@/api";
+import { getI18n } from "@/i18n/server";
 import { stack } from "@styled-system/patterns";
 
 export default async function Footer({ locale }: { locale: Locale }) {
-  const about = await getAbout({ locale });
   const contact = await getContact({ locale });
+  const t = await getI18n();
 
   return (
-    <styled.footer h={60} p={8} className={stack({ gap: 4, justify: "end" })}>
+    <styled.footer minH={60} p={8} className={stack({ gap: 4, justify: "end" })}>
-      <HStack justify="space-between" alignItems="start">
+      <HStack justify="space-between" alignItems="start" flexWrap="wrap">
-        <Box>
+        <Address locale={locale} />
-          <Text fontWeight="bold">{about.name}</Text>
-          <Text>
-            {contact.address.street} {contact.address.number}
-          </Text>
-          <Text>
-            {contact.address.zip} {contact.address.area}
-          </Text>
-        </Box>
         <HStack>
           {(contact.socialLinks ?? []).map((sl) => (
             <IconButton key={sl.id} asChild variant="link">
@@ -32,11 +29,12 @@ export default async function Footer({ locale }: { locale: Locale }) {
             </IconButton>
           ))}
         </HStack>
-        <Stack gap={2}>
+        <ContactMethods locale={locale} />
-          {contact.phone && <styled.a href={`tel:${contact.phone}`}>{contact.phone}</styled.a>}
-          {contact.email && <styled.a href={`mailto:${contact.email}`}>{contact.email}</styled.a>}
-        </Stack>
       </HStack>
+      <Stack alignSelf="center" gap={1}>
+        <Heading size="lg">{t("general.openingTimes")}</Heading>
+        <OpeningTimes locale={locale} />
+      </Stack>
       <Text textAlign="center">Powered by Jenyus</Text>
     </styled.footer>
   );

src/components/layout/mobile-nav.tsx

@@ -62,13 +62,14 @@ export default function MobileNav({ about }: { about: About }) {
         <NavLink href="/">{t("general.home")}</NavLink>
         <NavLink href="/about">{t("general.about")}</NavLink>
         <NavLink href="/menu">{t("general.menu")}</NavLink>
+        <NavLink href="/contact">{t("general.contact")}</NavLink>
 
         <NavLink
-          href="/contact"
+          href="/contact?tab=reservation"
           type="button"
           className={css({ alignSelf: "stretch", textAlign: "center", marginTop: "auto" })}
         >
-          {t("general.contact")}
+          {t("contact.reservation")}
         </NavLink>
       </styled.div>
     </styled.div>

src/components/layout/navbar.tsx

@@ -52,13 +52,16 @@ export default async function Navbar({ locale }: { locale: Locale }) {
       <NavLink href="/menu" className={css({ display: "none", sm: { display: "block" } })}>
         {t("general.menu")}
       </NavLink>
+      <NavLink href="/contact" className={css({ display: "none", sm: { display: "block" } })}>
+        {t("general.contact")}
+      </NavLink>
 
       <NavLink
-        href="/contact"
+        href="/contact?tab=reservation"
         type="button"
         className={css({ display: "none", sm: { display: "block" } })}
       >
-        {t("general.contact")}
+        {t("contact.reservation")}
       </NavLink>
 
       <LanguagePicker />

src/components/ui/alert.tsx

@@ -0,0 +1 @@
+export * as Alert from './styled/alert'

src/components/ui/link.tsx

@@ -0,0 +1 @@
+export { Link, type LinkProps } from './styled/link'

src/components/ui/styled/alert.tsx

@@ -0,0 +1,34 @@
+'use client'
+import type { Assign, PolymorphicProps } from '@ark-ui/react'
+import { ark } from '@ark-ui/react/factory'
+import { alert } from 'styled-system/recipes'
+import type { ComponentProps, HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(alert)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<HTMLDivElement, Assign<HTMLStyledProps<'div'>, PolymorphicProps>>(
+  ark.div,
+  'root',
+)
+
+export const Content = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, PolymorphicProps>
+>(ark.div, 'content')
+
+export const Description = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, PolymorphicProps>
+>(ark.div, 'description')
+
+export const Icon = withContext<HTMLOrSVGElement, Assign<HTMLStyledProps<'svg'>, PolymorphicProps>>(
+  ark.svg,
+  'icon',
+)
+
+export const Title = withContext<
+  HTMLHeadingElement,
+  Assign<HTMLStyledProps<'h5'>, PolymorphicProps>
+>(ark.h5, 'title')

src/components/ui/styled/link.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import { styled } from 'styled-system/jsx'
+import { link } from 'styled-system/recipes'
+import type { ComponentProps } from 'styled-system/types'
+
+export type LinkProps = ComponentProps<typeof Link>
+export const Link = styled(ark.a, link)

src/components/ui/styled/toast.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { Assign } from '@ark-ui/react'
+import { Toast } from '@ark-ui/react/toast'
+import { toast } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(toast)
+
+export const Root = withProvider<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Toast.ActionTriggerProps>
+>(Toast.Root, 'root')
+
+export const ActionTrigger = withContext<
+  HTMLButtonElement,
+  Assign<HTMLStyledProps<'button'>, Toast.ActionTriggerProps>
+>(Toast.ActionTrigger, 'actionTrigger')
+
+export const CloseTrigger = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Toast.CloseTriggerProps>
+>(Toast.CloseTrigger, 'closeTrigger')
+
+export const Description = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<'div'>, Toast.DescriptionProps>
+>(Toast.Description, 'description')
+
+export const Title = withContext<HTMLDivElement, Assign<HTMLStyledProps<'div'>, Toast.TitleProps>>(
+  Toast.Title,
+  'title',
+)
+
+export {
+  ToastContext as Context,
+  Toaster,
+  createToaster,
+  type ToastContextProps as ContextProps,
+  type ToasterProps,
+} from '@ark-ui/react/toast'

src/components/ui/toast.tsx

@@ -0,0 +1 @@
+export * as Toast from './styled/toast'

src/contexts/toast.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import React, { ReactNode, useContext } from "react";
+
+import { IconButton } from "@/components/ui/icon-button";
+import { Toast } from "@/components/ui/toast";
+import { XIcon } from "lucide-react";
+
+const toaster = Toast.createToaster({
+  placement: "bottom-end",
+  overlap: true,
+  gap: 16,
+});
+
+export const ToastContext = React.createContext({ toaster });
+
+export function ToastContextProvider({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ToastContext.Provider value={{ toaster }}>
+        <Toast.Toaster toaster={toaster}>
+          {(toast) => (
+            <Toast.Root key={toast.id}>
+              <Toast.Title>{toast.title}</Toast.Title>
+              <Toast.Description>{toast.description}</Toast.Description>
+              <Toast.CloseTrigger asChild>
+                <IconButton size="sm" variant="link">
+                  <XIcon />
+                </IconButton>
+              </Toast.CloseTrigger>
+            </Toast.Root>
+          )}
+        </Toast.Toaster>
+      </ToastContext.Provider>
+    </>
+  );
+}

src/emails/contact-confirmation.tsx

@@ -1,19 +1,19 @@
 import { Font, Head, Html, Preview, Tailwind, Text } from "@react-email/components";
-import { I18nProviderClient, useI18n } from "@/i18n/client";
+import { i18nProviderWrapper, renderEmail } from "@/utils/email";
-import { Options, render } from "@react-email/render";
 
-import { defaultLocale } from "@/i18n/settings";
+import { getI18n } from "@/i18n/server";
 
-type ContactConfirmationEmailContentProps = {
+type T = Awaited<ReturnType<typeof getI18n>>;
+
+export type ContactConfirmationEmailProps = {
   name: string;
   email: string;
   subject: string;
   message: string;
+  t: T;
 };
 
-function ContactConfirmationEmailContent(_props: ContactConfirmationEmailContentProps) {
+export function ContactConfirmationEmail({ t }: ContactConfirmationEmailProps) {
-  const t = useI18n();
-
   return (
     <Html>
       <Head>
@@ -37,24 +37,6 @@ function ContactConfirmationEmailContent(_props: ContactConfirmationEmailContent
   );
 }
 
-type ContactConfirmationEmailProps = {
+export const renderContactConfirmationEmail = renderEmail(ContactConfirmationEmail);
-  locale: string;
-} & ContactConfirmationEmailContentProps;
 
-export default function ContactConfirmationEmail({
+export default i18nProviderWrapper(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);
-}

src/emails/contact.tsx

@@ -9,21 +9,27 @@ import {
   Tailwind,
   Text,
 } from "@react-email/components";
-import { I18nProviderClient, useI18n } from "@/i18n/client";
+import { i18nProviderWrapper, renderEmail } from "@/utils/email";
-import { Options, render } from "@react-email/render";
 
-import { defaultLocale } from "@/i18n/settings";
+import { getI18n } from "@/i18n/server";
 
-type ContactEmailContentProps = { name: string; email: string; subject: string; message: string };
+type T = Awaited<ReturnType<typeof getI18n>>;
 
-function ContactEmailContent({
+export type ContactEmailProps = {
+  name: string;
+  email: string;
+  subject: string;
+  message: string;
+  t: T;
+};
+
+export function ContactEmail({
   name = "[[Name]]",
   subject = "[[Subject]]",
   email = "[[Email]]",
   message = "[[Message]]",
-}: ContactEmailContentProps) {
+  t,
-  const t = useI18n();
+}: ContactEmailProps) {
-
   return (
     <Html>
       <Head>
@@ -60,16 +66,6 @@ function ContactEmailContent({
   );
 }
 
-type ContactEmailProps = { locale: string } & ContactEmailContentProps;
+export const renderContactEmail = renderEmail(ContactEmail);
 
-export default function ContactEmail({ locale = defaultLocale, ...props }: ContactEmailProps) {
+export default i18nProviderWrapper(ContactEmail);
-  return (
-    <I18nProviderClient locale={locale}>
-      <ContactEmailContent {...props} />
-    </I18nProviderClient>
-  );
-}
-
-export async function renderContactEmail(props: ContactEmailProps, opts?: Options) {
-  return await render(<ContactEmail {...props} />, opts);
-}

src/globals/Settings.ts

@@ -13,10 +13,12 @@ export const Settings: GlobalConfig = {
         value: l.code,
         label: l.label[l.code] ?? l.label[defaultLocale],
       })),
+      required: true,
     },
     {
       name: "contactEmailsTo",
       type: "email",
+      required: true,
     },
   ],
 };

src/hooks/toast.ts

@@ -0,0 +1,6 @@
+import { ToastContext } from "@/contexts/toast";
+import { useContext } from "react";
+
+export function useToast() {
+  return useContext(ToastContext).toaster;
+}

src/i18n/de.ts

@@ -15,6 +15,9 @@ export default {
     de: "Deutsch",
     fr: "Französisch",
     it: "Italienisch",
+    announcements: "Ankündigungen",
+    holidays: "Feiertage",
+    vacations: "Ferien",
   },
   days: {
     "0": "Montag",

src/i18n/en.ts

@@ -15,6 +15,9 @@ export default {
     de: "German",
     fr: "French",
     it: "Italian",
+    announcements: "Announcements",
+    holidays: "Holidays",
+    vacations: "Vacations",
   },
   days: {
     "0": "Monday",

src/i18n/server.ts

@@ -1,5 +1,13 @@
-import { createI18nServer } from "next-international/server";
+import { Locale, importedLocales } from "./settings";
-import { importedLocales } from "./settings";
+import { createI18nServer, setStaticParamsLocale } from "next-international/server";
 
 export const { getI18n, getScopedI18n, getStaticParams, getCurrentLocale } =
   createI18nServer(importedLocales);
+
+export const getLocalizedI18n = async (locale: Locale) => {
+  const prevLocale = getCurrentLocale();
+
+  setStaticParamsLocale(locale);
+
+  return [await getI18n(), () => setStaticParamsLocale(prevLocale)] as const;
+};

src/payload-types.ts

@@ -18,6 +18,7 @@ export interface Config {
     'menu-category': MenuCategory;
     'menu-item-tag': MenuItemTag;
     'food-declaration': FoodDeclaration;
+    announcement: Announcement;
     vacation: Vacation;
     holiday: Holiday;
     'payload-preferences': PayloadPreference;
@@ -199,14 +200,41 @@ export interface FoodDeclaration {
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "announcement".
+ */
+export interface Announcement {
+  id: string;
+  title: string;
+  description?: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  from: string;
+  to?: string | null;
+  updatedAt: string;
+  createdAt: string;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "vacation".
  */
 export interface Vacation {
   id: string;
-  title?: string | null;
+  title: string;
-  from?: string | null;
+  from: string;
   to?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -217,8 +245,8 @@ export interface Vacation {
  */
 export interface Holiday {
   id: string;
-  title?: string | null;
+  title: string;
-  from?: string | null;
+  from: string;
   to?: string | null;
   updatedAt: string;
   createdAt: string;
@@ -366,8 +394,8 @@ export interface Menu {
  */
 export interface Setting {
   id: string;
-  adminLanguage?: ('de' | 'fr' | 'it' | 'en') | null;
+  adminLanguage: 'de' | 'fr' | 'it' | 'en';
-  contactEmailsTo?: string | null;
+  contactEmailsTo: string;
   updatedAt?: string | null;
   createdAt?: string | null;
 }

src/payload.config.ts

@@ -3,6 +3,7 @@ import { Locale, buildConfig } from "payload";
 import { defaultLocale, locales } from "@/i18n/settings";
 
 import { About } from "@/globals/About";
+import { Announcement } from "@/collections/Announcement";
 import { Contact } from "@/globals/Contact";
 import { FoodDeclaration } from "@/collections/FoodDeclaration";
 import { Gallery } from "@/globals/Gallery";
@@ -46,6 +47,7 @@ export default buildConfig({
     MenuCategory,
     MenuItemTag,
     FoodDeclaration,
+    Announcement,
     Vacation,
     Holiday,
   ],

src/types/contact.ts

@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+export const contactSchema = z.object({
+  name: z.string().min(4),
+  email: z.string().email(),
+  subject: z.string().min(4),
+  message: z.string().min(10),
+});

src/utils/email.tsx

@@ -0,0 +1,36 @@
+import { I18nProviderClient, useI18n } from "@/i18n/client";
+import { Options, render } from "@react-email/render";
+
+import React from "react";
+import { defaultLocale } from "@/i18n/settings";
+import { getI18n } from "@/i18n/server";
+
+type T = Awaited<ReturnType<typeof getI18n>>;
+
+function I18nWrapper<P extends { t: T }>({
+  component: Component,
+  props,
+}: {
+  component: React.ComponentType<P>;
+  props: P;
+}) {
+  const t = useI18n();
+
+  return <Component {...props} t={t} />;
+}
+
+export function i18nProviderWrapper<P extends { t: T }>(Component: React.ComponentType<P>) {
+  return function I18nProviderWrapper(props: P & { locale?: string }) {
+    return (
+      <I18nProviderClient locale={props.locale ?? defaultLocale}>
+        <I18nWrapper component={Component} props={props} />
+      </I18nProviderClient>
+    );
+  };
+}
+
+export function renderEmail<P extends { t: T }>(Component: React.ComponentType<P>) {
+  return async function (props: P, opts?: Options) {
+    return await render(<Component {...props} />, opts);
+  };
+}