feat(cms): migrate from directus to payloadcms

app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+import configPromise from "@payload-config";
+import { RootPage } from "@payloadcms/next/views";
+import { importMap } from "../importMap";
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config: configPromise, importMap, params, searchParams });
+
+export default Page;

app/(payload)/admin/importMap.js

@@ -0,0 +1,78 @@
+import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from "@payloadcms/richtext-lexical/rsc";
+import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from "@payloadcms/richtext-lexical/rsc";
+import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from "@payloadcms/richtext-lexical/rsc";
+import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from "@payloadcms/richtext-lexical/client";
+import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from "@payloadcms/next/rsc";
+
+export const importMap = {
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell":
+    RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField":
+    RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/rsc#LexicalDiffComponent":
+    LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e,
+  "@payloadcms/richtext-lexical/client#BlocksFeatureClient":
+    BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient":
+    InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient":
+    HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UploadFeatureClient":
+    UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient":
+    BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient":
+    RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#LinkFeatureClient":
+    LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient":
+    ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient":
+    OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient":
+    UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#IndentFeatureClient":
+    IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#AlignFeatureClient":
+    AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#HeadingFeatureClient":
+    HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient":
+    ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient":
+    InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient":
+    SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient":
+    SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient":
+    StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#UnderlineFeatureClient":
+    UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#BoldFeatureClient":
+    BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ItalicFeatureClient":
+    ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/next/rsc#CollectionCards":
+    CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1,
+};

app/(payload)/admin/importMap.ts

@@ -0,0 +1 @@
+export const importMap = {};

app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,14 @@
+import config from "@payload-config";
+import {
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_DELETE,
+} from "@payloadcms/next/routes";
+
+export const GET = REST_GET(config);
+export const POST = REST_POST(config);
+export const DELETE = REST_DELETE(config);
+export const PATCH = REST_PATCH(config);
+export const OPTIONS = REST_OPTIONS(config);

app/(payload)/custom.scss

@@ -0,0 +1 @@
+/* Custom SCSS for Payload Admin Panel */

app/(payload)/layout.tsx

@@ -0,0 +1,36 @@
+import configPromise from "@payload-config";
+import { RootLayout } from "@payloadcms/next/layouts";
+import React from "react";
+
+import "@payloadcms/next/css";
+import "./custom.scss";
+import { handleServerFunctions } from "@payloadcms/next/layouts";
+import { importMap } from "./admin/importMap";
+
+type Args = {
+  children: React.ReactNode;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const serverFunction: any = async function (args: any) {
+  "use server";
+  return handleServerFunctions({
+    ...args,
+    config: configPromise,
+    importMap,
+  });
+};
+
+const Layout = ({ children }: Args) => {
+  return (
+    <RootLayout
+      config={configPromise}
+      importMap={importMap}
+      serverFunction={serverFunction}
+    >
+      {children}
+    </RootLayout>
+  );
+};
+
+export default Layout;

app/api/contact/route.ts

@@ -1,15 +1,19 @@
 import { NextResponse } from "next/server";
-import * as nodemailer from "nodemailer";
-import directus, { ensureAuthenticated } from "@/lib/directus";
-import { createItem } from "@directus/sdk";
+import { getPayload } from "payload";
+import configPromise from "@payload-config";
 import { getServerAppServices } from "@/lib/services/create-services.server";
+import {
+  render,
+  ContactFormNotification,
+  ConfirmationMessage,
+} from "@mintel/mail";
+import React from "react";
 
 export async function POST(req: Request) {
   const services = getServerAppServices();
   const logger = services.logger.child({ action: "contact_submission" });
 
   // Set analytics context from request headers for high-fidelity server-side tracking
-  // This fulfills the "server-side via nextjs proxy" requirement
   if (services.analytics.setServerContext) {
     services.analytics.setServerContext({
       userAgent: req.headers.get("user-agent") || undefined,
@@ -41,70 +45,87 @@ export async function POST(req: Request) {
     if (!message || message.length < 20) {
       return NextResponse.json({ error: "message_too_short" }, { status: 400 });
     }
-
     if (message.length > 4000) {
       return NextResponse.json({ error: "message_too_long" }, { status: 400 });
     }
 
-    // 1. Directus save
-    let directusSaved = false;
+    const payload = await getPayload({ config: configPromise });
+
+    // 1. Payload save
+    let payloadSaved = false;
     try {
-      await ensureAuthenticated();
-      await directus.request(
-        createItem("contact_submissions", {
+      await payload.create({
+        collection: "form-submissions",
+        data: {
           name,
           email,
           company: company || "Nicht angegeben",
           message,
-        }),
-      );
-      logger.info("Contact submission saved to Directus");
-      directusSaved = true;
-    } catch (directusError) {
-      const errorMessage =
-        directusError instanceof Error
-          ? directusError.message
-          : String(directusError);
-      logger.error("Failed to save to Directus", {
-        error: errorMessage,
-        details: directusError,
-      });
-      services.errors.captureException(directusError, {
-        phase: "directus_save",
-      });
-      // We still try to send the email even if Directus fails
-    }
-
-    // 2. Email sending
-    try {
-      const { config } = await import("@/lib/config");
-      const transporter = nodemailer.createTransport({
-        host: config.mail.host,
-        port: config.mail.port,
-        secure: config.mail.port === 465,
-        auth: {
-          user: config.mail.user,
-          pass: config.mail.pass,
         },
       });
+      logger.info("Contact submission saved to PayloadCMS");
+      payloadSaved = true;
+    } catch (payloadError) {
+      const errorMessage =
+        payloadError instanceof Error
+          ? payloadError.message
+          : String(payloadError);
+      logger.error("Failed to save to Payload", {
+        error: errorMessage,
+        details: payloadError,
+      });
+      services.errors.captureException(payloadError, { phase: "payload_save" });
+    }
 
-      await transporter.sendMail({
+    // 2. Email sending via Payload (which uses configured nodemailer)
+    try {
+      const { config } = await import("@/lib/config");
+      const clientName = "MB Grid Solutions";
+
+      // 2a. Notification to MB Grid
+      const notificationHtml = await render(
+        React.createElement(ContactFormNotification, {
+          name,
+          email,
+          message,
+          company,
+        }),
+      );
+
+      await payload.sendEmail({
         from: config.mail.from,
-        to: config.mail.recipients.join(",") || "info@mb-grid-solutions.com",
+        to:
+          config.mail.recipients.join(",") ||
+          process.env.CONTACT_RECIPIENT ||
+          "info@mb-grid-solutions.com",
         replyTo: email,
         subject: `Kontaktanfrage von ${name}`,
-        text: `
-Name: ${name}
-Firma: ${company || "Nicht angegeben"}
-E-Mail: ${email}
-Zeitpunkt: ${new Date().toISOString()}
-
-Nachricht:
-${message}
-        `,
+        html: notificationHtml,
       });
 
-      logger.info("Email sent successfully");
+      // 2b. Confirmation to the User
+      try {
+        const confirmationHtml = await render(
+          React.createElement(ConfirmationMessage, {
+            name,
+            clientName,
+          }),
+        );
+
+        await payload.sendEmail({
+          from: config.mail.from,
+          to: email,
+          subject: `Ihre Kontaktanfrage bei ${clientName}`,
+          html: confirmationHtml,
+        });
+      } catch (confirmError) {
+        logger.warn(
+          "Failed to send confirmation email, but notification was sent",
+          { error: confirmError },
+        );
+      }
+
+      logger.info("Emails sent successfully");
 
       // Notify success for important leads
       await services.notifications.notify({
@@ -116,18 +137,16 @@ ${message}
       logger.error("SMTP Error", { error: smtpError });
       services.errors.captureException(smtpError, { phase: "smtp_send" });
 
-      // If Directus failed AND SMTP failed, then we really have a problem
-      if (!directusSaved) {
+      if (!payloadSaved) {
         return NextResponse.json(
           { error: "Systemfehler (Speicherung und Versand fehlgeschlagen)" },
           { status: 500 },
         );
       }
 
-      // If Directus was successful, we tell the user "Ok" but we know internally it was a partial failure
       await services.notifications.notify({
         title: "🚨 SMTP Fehler (Kontaktformular)",
-        message: `Anfrage von ${name} (${email}) in Directus gespeichert, aber E-Mail-Versand fehlgeschlagen: ${smtpError instanceof Error ? smtpError.message : String(smtpError)}`,
+        message: `Anfrage von ${name} (${email}) in Payload gespeichert, aber E-Mail-Versand fehlgeschlagen: ${smtpError instanceof Error ? smtpError.message : String(smtpError)}`,
         priority: 8,
       });
     }