Add calendar-based booking system: accounts, availability, admin calendar
- Customer accounts (separate auth collection) with /konto area - Availability + AvailabilityOverrides collections driving real slot calculation - BookingRequests with race-safe confirmation (Postgres advisory lock + transaction) - Booking emails (request received, admin notify, confirmed, rejected, alternative proposed/accepted, cancelled) - Confirmed online bookings auto-create a private linked video-call Event - Custom Payload admin calendar view (month grid + day schedule) - Wired booking widget into offer pages and /termin-buchen
This commit is contained in:
@@ -5,10 +5,12 @@ import { Section } from "@/components/Section";
|
||||
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
|
||||
import { RichText } from "@/components/RichText";
|
||||
import { CTA } from "@/components/CTA";
|
||||
import { BookingWidget } from "@/components/booking/BookingWidget";
|
||||
import { getOfferBySlug } from "@/lib/payload/content";
|
||||
import { moodForOffer } from "@/lib/angebote";
|
||||
import { mediaAlt, mediaUrl } from "@/lib/payload/media";
|
||||
import { OFFER_CATEGORIES } from "@/collections/Offers";
|
||||
import { getCurrentCustomer } from "@/lib/auth/customer";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -30,6 +32,7 @@ export default async function OfferDetailPage({ params }: Args) {
|
||||
if (!offer) notFound();
|
||||
|
||||
const categoryLabel = OFFER_CATEGORIES.find((c) => c.value === offer.category)?.label;
|
||||
const customer = offer.bookable ? await getCurrentCustomer() : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -54,13 +57,39 @@ export default async function OfferDetailPage({ params }: Args) {
|
||||
</div>
|
||||
<Section tone="plain">
|
||||
<div className="mx-auto max-w-2xl">
|
||||
{(offer.price || offer.durationMinutes) && (
|
||||
<div className="mb-8 flex flex-wrap gap-6 rounded-2xl bg-anouma-cream-light p-5 text-sm">
|
||||
{offer.price && (
|
||||
<div>
|
||||
<span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Preis</span>
|
||||
<span className="text-base text-anouma-plum">{offer.price}</span>
|
||||
</div>
|
||||
)}
|
||||
{offer.durationMinutes && (
|
||||
<div>
|
||||
<span className="block text-xs font-medium uppercase tracking-wide text-anouma-plum/60">Dauer</span>
|
||||
<span className="text-base text-anouma-plum">{offer.durationMinutes} Minuten</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<RichText data={offer.description} />
|
||||
</div>
|
||||
</Section>
|
||||
<CTA
|
||||
title="Interesse geweckt?"
|
||||
lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
|
||||
/>
|
||||
|
||||
{offer.bookable ? (
|
||||
<Section tone="cream">
|
||||
<div className="mx-auto max-w-3xl">
|
||||
<h2 className="mb-6 text-center font-serif text-3xl font-medium text-anouma-plum">Termin auswählen</h2>
|
||||
<BookingWidget offerSlug={offer.slug!} isLoggedIn={Boolean(customer)} />
|
||||
</div>
|
||||
</Section>
|
||||
) : (
|
||||
<CTA
|
||||
title="Interesse geweckt?"
|
||||
lead={`Melde dich gerne für ein unverbindliches Gespräch zu „${offer.title}“.`}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,6 +4,7 @@ import { Navbar } from "@/components/Navbar";
|
||||
import { Footer } from "@/components/Footer";
|
||||
import { siteConfig } from "@/lib/site";
|
||||
import { getOffers } from "@/lib/payload/content";
|
||||
import { getCurrentCustomer } from "@/lib/auth/customer";
|
||||
import "./globals.css";
|
||||
|
||||
// Every page under this layout can read live content from Payload, so the
|
||||
@@ -45,7 +46,7 @@ export const metadata: Metadata = {
|
||||
};
|
||||
|
||||
export default async function RootLayout({ children }: LayoutProps<"/">) {
|
||||
const offers = await getOffers();
|
||||
const [offers, customer] = await Promise.all([getOffers(), getCurrentCustomer()]);
|
||||
|
||||
return (
|
||||
<html
|
||||
@@ -60,7 +61,7 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
|
||||
>
|
||||
Zum Inhalt springen
|
||||
</a>
|
||||
<Navbar offers={offers} />
|
||||
<Navbar offers={offers} customerName={customer?.name ?? null} />
|
||||
<main id="main-content" className="flex-1">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
@@ -2,8 +2,12 @@ import type { Metadata } from "next";
|
||||
import { PageHeader } from "@/components/PageHeader";
|
||||
import { Section, SectionHeading } from "@/components/Section";
|
||||
import { ContactForm } from "@/components/ContactForm";
|
||||
import { AngebotCard } from "@/components/AngebotCard";
|
||||
import { Reveal } from "@/components/Reveal";
|
||||
import { getBookingGlobal, getContactGlobal } from "@/lib/payload/globals";
|
||||
import { getOffers } from "@/lib/payload/content";
|
||||
import { moodForOffer } from "@/lib/angebote";
|
||||
import { mediaUrl } from "@/lib/payload/media";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -16,7 +20,8 @@ export async function generateMetadata(): Promise<Metadata> {
|
||||
}
|
||||
|
||||
export default async function TerminBuchenPage() {
|
||||
const [booking, contact] = await Promise.all([getBookingGlobal(), getContactGlobal()]);
|
||||
const [booking, contact, offers] = await Promise.all([getBookingGlobal(), getContactGlobal(), getOffers()]);
|
||||
const bookableOffers = offers.filter((offer) => offer.bookable);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -27,6 +32,25 @@ export default async function TerminBuchenPage() {
|
||||
crumbs={[{ title: "Termin buchen" }]}
|
||||
/>
|
||||
|
||||
{bookableOffers.length > 0 && (
|
||||
<Section tone="plain">
|
||||
<SectionHeading eyebrow="Angebot auswählen" title="Wofür möchtest du einen Termin?" />
|
||||
<div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{bookableOffers.map((offer, i) => (
|
||||
<Reveal key={offer.slug} delay={i * 0.08}>
|
||||
<AngebotCard
|
||||
href={`/angebote/${offer.slug}`}
|
||||
title={offer.title}
|
||||
tagline={offer.shortDescription}
|
||||
mood={moodForOffer(offer)}
|
||||
imageSrc={mediaUrl(offer.image, "card")}
|
||||
/>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{booking.steps && booking.steps.length > 0 && (
|
||||
<Section tone="cream">
|
||||
<SectionHeading eyebrow="Ablauf" title="So findest du zu deinem Termin" />
|
||||
@@ -46,7 +70,15 @@ export default async function TerminBuchenPage() {
|
||||
|
||||
<Section tone="plain">
|
||||
<div className="mx-auto max-w-xl">
|
||||
<SectionHeading title="Nachricht senden" align="left" />
|
||||
<SectionHeading
|
||||
title="Allgemeine Anfrage"
|
||||
lead={
|
||||
bookableOffers.length > 0
|
||||
? "Für einen konkreten Termin wähle oben ein Angebot — hier kannst du auch einfach eine allgemeine Nachricht schreiben."
|
||||
: undefined
|
||||
}
|
||||
align="left"
|
||||
/>
|
||||
<div className="mt-10">
|
||||
<ContactForm
|
||||
toEmail={contact.email}
|
||||
|
||||
@@ -21,6 +21,8 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93
|
||||
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 { CalendarNavLink as CalendarNavLink_4d06fac03127b339306d5f5ecb073251 } from '../../../components/admin/CalendarNavLink'
|
||||
import { AdminCalendarView as AdminCalendarView_a2760c3ae85f4fd51d79a465baaf023a } from '../../../components/admin/AdminCalendarView'
|
||||
import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
|
||||
|
||||
/** @type import('payload').ImportMap */
|
||||
@@ -48,5 +50,7 @@ export const importMap = {
|
||||
"@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
|
||||
"/components/admin/CalendarNavLink#CalendarNavLink": CalendarNavLink_4d06fac03127b339306d5f5ecb073251,
|
||||
"/components/admin/AdminCalendarView#AdminCalendarView": AdminCalendarView_a2760c3ae85f4fd51d79a465baaf023a,
|
||||
"@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user