feat: ✨ add ContactEmbedNotice component

src/api/announcements.ts

@@ -7,14 +7,17 @@ export const getCurrentAnnouncements = async (
   const payload = await getPayload();
 
   const today = new Date();
+  const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDay());
 
   return await payload.find({
     collection: "announcement",
     sort: "from",
     where: {
       or: [
-        { from: { equals: today } },
+        { from: { equals: todayDay } },
-        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+        {
+          and: [{ from: { less_than_equal: todayDay } }, { to: { greater_than_equal: todayDay } }],
+        },
       ],
     },
     pagination: false,

src/api/foodDeclarations.ts

@@ -0,0 +1,14 @@
+import type { Options } from "node_modules/payload/dist/collections/operations/local/find";
+import { getPayload } from "@/utils/payload";
+
+export const getFoodDeclarations = async (
+  opts: Omit<Options<"food-declaration">, "collection" | "pagination">,
+) => {
+  const payload = await getPayload();
+
+  return await payload.find({
+    collection: "food-declaration",
+    pagination: false,
+    ...opts,
+  });
+};

src/api/holidays.ts

@@ -7,14 +7,17 @@ export const getCurrentHolidays = async (
   const payload = await getPayload();
 
   const today = new Date();
+  const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDay());
 
   return await payload.find({
     collection: "holiday",
     sort: "from",
     where: {
       or: [
-        { from: { equals: today } },
+        { from: { equals: todayDay } },
-        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+        {
+          and: [{ from: { less_than_equal: todayDay } }, { to: { greater_than_equal: todayDay } }],
+        },
       ],
     },
     pagination: false,

src/api/index.ts

@@ -7,3 +7,4 @@ export * from "./home";
 export * from "./menu";
 export * from "./settings";
 export * from "./vacations";
+export * from "./foodDeclarations";

src/api/vacations.ts

@@ -7,14 +7,17 @@ export const getCurrentVacations = async (
   const payload = await getPayload();
 
   const today = new Date();
+  const todayDay = new Date(today.getFullYear(), today.getMonth(), today.getDay());
 
   return await payload.find({
     collection: "vacation",
     sort: "from",
     where: {
       or: [
-        { from: { equals: today } },
+        { from: { equals: todayDay } },
-        { and: [{ from: { less_than_equal: today } }, { to: { greater_than_equal: today } }] },
+        {
+          and: [{ from: { less_than_equal: todayDay } }, { to: { greater_than_equal: todayDay } }],
+        },
       ],
     },
     pagination: false,

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

@@ -1,4 +1,4 @@
-import "../../globals.css";
+import "../globals.css";
 
 import { Locale, locales } from "@/i18n/settings";
 

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

@@ -1,16 +1,18 @@
 import { Box, Stack } from "@styled-system/jsx";
+import { getFoodDeclarations, getMenuCategories } from "@/api";
 
 import { Heading } from "@/components/ui/heading";
 import { MenuCategory } from "@/payload-types";
 import MenuCategoryTabContent from "./menu-category-tab-content";
 import { Params } from "../shared";
+import RichText from "@/components/rich-text";
 import { Tabs } from "@/components/ui/tabs";
 import { getI18n } from "@/i18n/server";
-import { getMenuCategories } from "@/api";
 
 export default async function Menu({ params: { locale } }: { params: Params }) {
   const t = await getI18n();
   const menuCategories = await getMenuCategories({ locale });
+  const foodDeclarations = await getFoodDeclarations({ locale });
 
   return (
     <Stack p={6} align="center">
@@ -40,6 +42,21 @@ export default async function Menu({ params: { locale } }: { params: Params }) {
           ))}
         </Tabs.Root>
       </Box>
+      {foodDeclarations.docs.length > 0 && (
+        <>
+          <Heading as="h2" size="xl" maxW="3xl" w="100%">
+            {t("menu.foodDeclarations")}
+          </Heading>
+          <Stack maxW="3xl" w="100%">
+            {foodDeclarations.docs.map((fd) => (
+              <Stack key={fd.id}>
+                <Heading size="lg">{fd.title}</Heading>
+                {fd.description && <RichText content={fd.description} />}
+              </Stack>
+            ))}
+          </Stack>
+        </>
+      )}
     </Stack>
   );
 }

src/app/(payload)/admin/importMap.js

@@ -21,6 +21,7 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_19 } from '@pa
 import { UnderlineFeatureClient as UnderlineFeatureClient_20 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_21 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_22 } from '@payloadcms/richtext-lexical/client'
+import { ContactEmbedNotice as ContactEmbedNotice_23 } from 'src/globals/ContactEmbedNotice.tsx'
 
 export const importMap = {
   "@payloadcms/richtext-lexical/client#RichTextCell": RichTextCell_0,
@@ -45,5 +46,6 @@ export const importMap = {
   "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_19,
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_20,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_21,
-  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_22
+  "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_22,
+  "/globals/ContactEmbedNotice.tsx#ContactEmbedNotice": ContactEmbedNotice_23
 }

src/app/(payload)/admin/layout.tsx

@@ -1,5 +1,6 @@
 import "@payloadcms/next/css";
 import "./custom.scss";
+import "../globals.css";
 
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
 import React from "react";

src/app/(payload)/globals.css

@@ -0,0 +1 @@
+@layer base, tokens, recipes, utilities;

src/collections/MenuItem.ts

@@ -42,6 +42,7 @@ export const MenuItem: CollectionConfig = {
         {
           name: "title",
           type: "text",
+          localized: true,
         },
         {
           name: "price",

src/globals/Contact.tsx

@@ -52,6 +52,15 @@ export const Contact: GlobalConfig = {
           name: "embeddedMaps",
           type: "code",
         },
+        {
+          name: "embeddedMapsNotice",
+          type: "ui",
+          admin: {
+            components: {
+              Field: "/globals/ContactEmbedNotice.tsx#ContactEmbedNotice",
+            },
+          },
+        },
       ],
     },
     {

src/globals/ContactEmbedNotice.tsx

@@ -1,6 +1,8 @@
+import { Text } from "@/components/ui/text";
+
 export const ContactEmbedNotice = () => (
-  <p>
+  <Text mt={2}>
     Use a generator like <a href="https://www.maps.ie/create-google-map/">maps.ie</a> to create a
     Google Maps embed.
-  </p>
+  </Text>
 );

src/i18n/de.ts

@@ -50,4 +50,5 @@ export default {
     contactSubject: "Kontaktanfrage von {name}",
     contactTitle: "Sie haben eine Kontaktanfrage von {name} erhalten:",
   },
+  menu: { foodDeclarations: "Lebensmitteldeklaration" },
 } as const;

src/i18n/en.ts

@@ -41,4 +41,5 @@ export default {
   reservation: {
     guests: "Guests",
   },
+  menu: { foodDeclarations: "Food declarations" },
 } as const;