222 lines
8.8 KiB
TypeScript
222 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { MonthCalendar, type CalendarMarker } from "./MonthCalendar";
|
|
import { ResendVerificationButton } from "@/components/auth/ResendVerificationButton";
|
|
import { TextAreaField, FormError } from "@/components/FormField";
|
|
import { track } from "@/lib/analytics/client";
|
|
import { berlinDateKey, formatBerlinDate, formatBerlinTime } from "@/lib/calendar/timezone";
|
|
|
|
type SlotsResponse = { durationMinutes: number; slots: Record<string, { start: string; end: string }[]> };
|
|
|
|
function dateKey(d: Date) {
|
|
return berlinDateKey(d);
|
|
}
|
|
|
|
const fmtTime = (iso: string) => formatBerlinTime(new Date(iso), { hour: "2-digit", minute: "2-digit" });
|
|
const fmtDate = (iso: string) => formatBerlinDate(new Date(iso), { weekday: "long", day: "2-digit", month: "long" });
|
|
|
|
export function BookingWidget({
|
|
offerSlug,
|
|
isLoggedIn,
|
|
isVerified,
|
|
}: {
|
|
offerSlug: string;
|
|
isLoggedIn: boolean;
|
|
isVerified: boolean;
|
|
}) {
|
|
const [slotsByDay, setSlotsByDay] = useState<SlotsResponse["slots"]>({});
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadError, setLoadError] = useState(false);
|
|
const [selectedDay, setSelectedDay] = useState<Date | null>(null);
|
|
const [selectedSlot, setSelectedSlot] = useState<string | null>(null);
|
|
const [appointmentType, setAppointmentType] = useState<"onsite" | "online">("onsite");
|
|
const [message, setMessage] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [result, setResult] = useState<{ ok: boolean; error?: string } | null>(null);
|
|
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
const from = new Date();
|
|
const to = new Date(from.getTime() + 28 * 24 * 60 * 60 * 1000);
|
|
fetch(`/api/booking/slots?offer=${encodeURIComponent(offerSlug)}&from=${dateKey(from)}&to=${dateKey(to)}`, { signal: controller.signal })
|
|
.then((res) => { if (!res.ok) throw new Error("Slots unavailable"); return res.json(); })
|
|
.then((data: SlotsResponse) => setSlotsByDay(data.slots ?? {}))
|
|
.catch(() => { if (!controller.signal.aborted) setLoadError(true); })
|
|
.finally(() => { if (!controller.signal.aborted) setLoading(false); });
|
|
return () => controller.abort();
|
|
}, [offerSlug]);
|
|
|
|
if (result?.ok) {
|
|
return (
|
|
<div className="rounded-3xl bg-anouma-cream-light p-8">
|
|
<p className="text-xs font-medium uppercase tracking-wide text-anouma-dustyrose">Deine Anfrage</p>
|
|
{selectedSlot && (
|
|
<p className="mt-2 font-serif text-2xl font-medium text-anouma-plum">
|
|
{fmtDate(selectedSlot)}, {fmtTime(selectedSlot)} Uhr
|
|
</p>
|
|
)}
|
|
<p className="mt-4 text-sm font-medium text-anouma-plum">Status: Termin vorgeschlagen</p>
|
|
<p className="mt-3 text-sm leading-relaxed text-anouma-plum">
|
|
Der Termin ist noch nicht verbindlich. Du erhältst eine E-Mail, sobald Anna den Termin bestätigt.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isLoggedIn) {
|
|
return (
|
|
<div className="rounded-3xl bg-anouma-cream-light p-8 text-center">
|
|
<p className="text-base text-anouma-plum">
|
|
Melde dich an oder erstelle ein Konto, um einen Termin anzufragen.
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap justify-center gap-3">
|
|
<a
|
|
href={`/login?next=/angebote/${offerSlug}`}
|
|
className="rounded-full bg-anouma-mauve-dark px-6 py-2.5 text-sm font-medium text-white hover:bg-anouma-plum"
|
|
>
|
|
Anmelden
|
|
</a>
|
|
<a
|
|
href="/registrieren"
|
|
className="rounded-full border border-anouma-mauve-dark/40 px-6 py-2.5 text-sm font-medium text-anouma-plum hover:bg-white"
|
|
>
|
|
Konto erstellen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!isVerified) {
|
|
return (
|
|
<div className="rounded-3xl bg-anouma-cream-light p-8 text-center">
|
|
<p className="text-base text-anouma-plum">Bitte bestätige zuerst deine E-Mail-Adresse.</p>
|
|
<p className="mt-2 text-sm text-anouma-plum/70">Erst danach kannst du einen Termin anfragen.</p>
|
|
<ResendVerificationButton variant="session" className="mt-5 flex justify-center" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const markers: CalendarMarker[] = Object.keys(slotsByDay).map((key) => ({ date: new Date(key), status: "public" }));
|
|
const daySlots = selectedDay ? (slotsByDay[dateKey(selectedDay)] ?? []) : [];
|
|
|
|
async function submit() {
|
|
if (!selectedSlot) return;
|
|
setSubmitting(true);
|
|
setResult(null);
|
|
try {
|
|
const res = await fetch("/api/booking/request", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify({ offerSlug, start: selectedSlot, appointmentType, message }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
setResult({ ok: false, error: data.error || "Anfrage fehlgeschlagen." });
|
|
setSubmitting(false);
|
|
return;
|
|
}
|
|
setResult({ ok: true });
|
|
// Event only — never the offer/date/message content.
|
|
track("booking_started");
|
|
} catch {
|
|
setResult({ ok: false, error: "Verbindung fehlgeschlagen." });
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
if (loading) {
|
|
return <p className="text-sm text-anouma-plum/70">Verfügbare Termine werden geladen …</p>;
|
|
}
|
|
if (loadError) return <FormError>Verfügbare Termine konnten nicht geladen werden. Bitte lade die Seite erneut.</FormError>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid gap-6 lg:grid-cols-[minmax(0,340px)_1fr]">
|
|
<MonthCalendar markers={markers} onSelectDay={(day) => { setSelectedDay(day); setSelectedSlot(null); }} selectedDay={selectedDay} />
|
|
<div>
|
|
{!selectedDay && <p className="text-sm text-anouma-plum/70">Wähle einen markierten Tag, um freie Zeiten zu sehen.</p>}
|
|
{selectedDay && daySlots.length === 0 && (
|
|
<p className="text-sm text-anouma-plum/70">An diesem Tag ist leider kein Termin frei.</p>
|
|
)}
|
|
{selectedDay && daySlots.length > 0 && (
|
|
<div>
|
|
<p className="text-sm font-medium text-anouma-plum">{fmtDate(daySlots[0].start)}</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{daySlots.map((slot) => (
|
|
<button
|
|
key={slot.start}
|
|
type="button"
|
|
onClick={() => setSelectedSlot(slot.start)}
|
|
className={`inline-flex min-h-11 items-center justify-center rounded-full border px-4 text-sm font-medium transition-colors ${
|
|
selectedSlot === slot.start
|
|
? "border-anouma-mauve-dark bg-anouma-mauve-dark text-white"
|
|
: "border-anouma-taupe/40 text-anouma-plum hover:border-anouma-mauve-dark"
|
|
}`}
|
|
>
|
|
{fmtTime(slot.start)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{selectedSlot && (
|
|
<div className="rounded-3xl bg-anouma-cream-light p-6">
|
|
<p className="text-sm font-medium text-anouma-plum">
|
|
Ausgewählt: {fmtDate(selectedSlot)}, {fmtTime(selectedSlot)} Uhr
|
|
</p>
|
|
|
|
<fieldset className="mt-4">
|
|
<legend className="text-sm font-medium text-anouma-plum">Terminart</legend>
|
|
<div className="mt-2 flex gap-4">
|
|
<label className="flex items-center gap-2 text-sm text-anouma-plum">
|
|
<input
|
|
type="radio"
|
|
name="appointmentType"
|
|
checked={appointmentType === "onsite"}
|
|
onChange={() => setAppointmentType("onsite")}
|
|
/>
|
|
Vor Ort
|
|
</label>
|
|
<label className="flex items-center gap-2 text-sm text-anouma-plum">
|
|
<input
|
|
type="radio"
|
|
name="appointmentType"
|
|
checked={appointmentType === "online"}
|
|
onChange={() => setAppointmentType("online")}
|
|
/>
|
|
Online
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<TextAreaField
|
|
label="Nachricht (optional)"
|
|
id="booking-message"
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
rows={3}
|
|
wrapperClassName="mt-4"
|
|
/>
|
|
|
|
{result?.error && <FormError className="mt-3">{result.error}</FormError>}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={submitting}
|
|
className="mt-5 rounded-full bg-anouma-mauve-dark px-7 py-3 text-sm font-medium text-white hover:bg-anouma-plum disabled:opacity-60"
|
|
>
|
|
{submitting ? "Wird gesendet …" : "Terminanfrage senden"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|