Initialize project with Payload CMS

apps/website/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;

apps/website/app/(payload)/admin/importMap.js

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

apps/website/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);

apps/website/app/(payload)/layout.tsx

@@ -0,0 +1,30 @@
+import configPromise from '@payload-config';
+import { RootLayout } from '@payloadcms/next/layouts';
+import React from 'react';
+
+import '@payloadcms/next/css';
+import { handleServerFunctions } from '@payloadcms/next/layouts';
+import { importMap } from './admin/importMap';
+
+type Args = {
+    children: React.ReactNode;
+};
+
+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;

apps/website/app/actions/contact.ts

@@ -0,0 +1,93 @@
+'use server';
+
+import { sendEmail } from '@/lib/mail/mailer';
+import { render, ContactFormNotification, ConfirmationMessage } from '@mintel/mail';
+import React from 'react';
+
+export async function sendContactFormAction(formData: FormData) {
+    const name = formData.get('name') as string;
+    const email = formData.get('email') as string;
+    const message = formData.get('message') as string;
+    const productName = formData.get('productName') as string | null;
+
+    if (!name || !email || !message) {
+        console.warn('Missing required fields in contact form');
+        return { success: false, error: 'Missing required fields' };
+    }
+
+    // 1. Save to CMS
+    try {
+        const { getPayload } = await import('payload');
+        const configPromise = (await import('@payload-config')).default;
+        const payload = await getPayload({ config: configPromise });
+
+        await payload.create({
+            collection: 'form-submissions',
+            data: {
+                name,
+                email,
+                message,
+                type: productName ? 'product_quote' : 'contact',
+                productName: productName || undefined,
+            },
+        });
+
+        console.log('Successfully saved form submission to Payload CMS');
+    } catch (error) {
+        console.error('Failed to store submission in Payload CMS', { error });
+    }
+
+    // 2. Send Emails
+    console.log('Sending branded emails', { email, productName });
+
+    const notificationSubject = productName
+        ? `Product Inquiry: ${productName}`
+        : 'New Contact Form Submission';
+    const confirmationSubject = 'Thank you for your inquiry';
+
+    try {
+        // 2a. Send notification to Mintel/Client
+        const notificationHtml = await render(
+            React.createElement(ContactFormNotification, {
+                name,
+                email,
+                message,
+                productName: productName || undefined,
+            }),
+        );
+
+        const notificationResult = await sendEmail({
+            replyTo: email,
+            subject: notificationSubject,
+            html: notificationHtml,
+        });
+
+        if (!notificationResult.success) {
+            console.error('Notification email FAILED', { error: notificationResult.error });
+        }
+
+        // 2b. Send confirmation to Customer
+        const confirmationHtml = await render(
+            React.createElement(ConfirmationMessage, {
+                name,
+                clientName: 'Cable Creations',
+            }),
+        );
+
+        const confirmationResult = await sendEmail({
+            to: email,
+            subject: confirmationSubject,
+            html: confirmationHtml,
+        });
+
+        if (!confirmationResult.success) {
+            console.error('Confirmation email FAILED', { error: confirmationResult.error });
+        }
+
+        return { success: true };
+    } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        console.error('Failed to send branded emails', { error: errorMsg });
+        return { success: false, error: errorMsg };
+    }
+}