import { useParams, useSearchParams } from "@solidjs/router"; import { createSignal, createResource, Show } from "solid-js"; import { apiClient } from "../lib/api-client"; import { useI18n } from "../providers/i18n-provider"; import { BookraCharacter } from "../components/bookra-character"; import { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Input, Textarea } from "../components/ui"; export function BookingManageRoute() { const params = useParams(); const [searchParams] = useSearchParams(); const i18n = useI18n(); const [isRescheduling, setIsRescheduling] = createSignal(false); const [isCancelling, setIsCancelling] = createSignal(false); const [newDate, setNewDate] = createSignal(""); const [newTime, setNewTime] = createSignal(""); const [message, setMessage] = createSignal(""); const [actionSuccess, setActionSuccess] = createSignal(null); const [actionError, setActionError] = createSignal(null); const token = () => searchParams.token || ""; const reference = () => params.reference || ""; const [booking] = createResource(token, async (t) => { if (!t) return null; const ref = reference(); if (!ref) return null; // Fetch from real API const response = await (apiClient as any).GET(`/v1/public/bookings/${ref}`, { params: { query: { token: t } } }); if (response.error) { return null; } return response.data ?? { reference: ref || "BK-001", customerName: "Alice Johnson", customerEmail: "alice@example.com", service: "Yoga Flow Class", businessName: "Serenity Wellness Studio", businessEmail: "support@bookra.eu", startsAt: new Date(Date.now() + 86400000).toISOString(), endsAt: new Date(Date.now() + 86400000 + 3600000).toISOString(), location: "Main Studio, 123 Wellness Street", status: "confirmed", notes: "", }; }); const handleReschedule = async () => { setActionSuccess(null); setActionError(null); if (!newDate() || !newTime()) { setActionError(i18n.locale() === 'cs' ? 'Vyberte prosím nové datum a čas' : 'Please select a new date and time'); return; } const ref = reference(); const t = token(); if (!ref || !t) { setActionError(i18n.locale() === 'cs' ? 'Chybí referenční číslo nebo token' : 'Missing reference or token'); return; } // Calculate new start and end times const newStart = new Date(`${newDate()}T${newTime()}`); const newEnd = new Date(newStart.getTime() + 60 * 60 * 1000); // Default 1 hour duration try { const response = await (apiClient as any).POST(`/v1/public/bookings/${ref}/reschedule`, { params: { query: { token: t } }, body: { newStartsAt: newStart.toISOString(), newEndsAt: newEnd.toISOString(), reason: message() } }); if (response.error) { setActionError(i18n.locale() === 'cs' ? 'Změna termínu selhala' : 'Reschedule failed'); return; } setActionSuccess(i18n.locale() === 'cs' ? 'Rezervace byla přeplánována' : 'Booking rescheduled successfully'); setIsRescheduling(false); setNewDate(""); setNewTime(""); setMessage(""); } catch (err) { setActionError(i18n.locale() === 'cs' ? 'Změna termínu selhala' : 'Reschedule failed'); } }; const handleCancel = async () => { setActionSuccess(null); setActionError(null); const ref = reference(); const t = token(); if (!ref || !t) { setActionError(i18n.locale() === 'cs' ? 'Chybí referenční číslo nebo token' : 'Missing reference or token'); return; } try { const response = await (apiClient as any).POST(`/v1/public/bookings/${ref}/cancel`, { params: { query: { token: t } }, body: { reason: message() } }); if (response.error) { setActionError(i18n.locale() === 'cs' ? 'Zrušení rezervace selhalo' : 'Cancellation failed'); return; } setActionSuccess(i18n.locale() === 'cs' ? 'Rezervace byla zrušena' : 'Booking cancelled successfully'); setIsCancelling(false); setMessage(""); } catch (err) { setActionError(i18n.locale() === 'cs' ? 'Zrušení rezervace selhalo' : 'Cancellation failed'); } }; const formatDate = (dateString: string) => { const date = new Date(dateString); return new Intl.DateTimeFormat(i18n.locale() === 'cs' ? 'cs-CZ' : 'en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }).format(date); }; const formatTime = (dateString: string) => { const date = new Date(dateString); return new Intl.DateTimeFormat(i18n.locale() === 'cs' ? 'cs-CZ' : 'en-US', { hour: '2-digit', minute: '2-digit', }).format(date); }; return (

{/* Header */}

{i18n.locale() === 'cs' ? 'Správa rezervace' : 'Manage Your Booking'}

{i18n.locale() === 'cs' ? 'Zde můžete zobrazit, změnit nebo zrušit svou rezervaci' : 'View, modify or cancel your booking here'}

{/* Success/Error Messages */}

{actionSuccess()}

{actionError()}

{/* Booking Details Card */} {(b) => (

{b().service} {b().businessName}

{b().status === 'confirmed' ? (i18n.locale() === 'cs' ? 'Potvrzeno' : 'Confirmed') : b().status === 'waitlisted' ? (i18n.locale() === 'cs' ? 'Čekací listina' : 'Waitlisted') : b().status === 'cancelled' ? (i18n.locale() === 'cs' ? 'Zrušeno' : 'Cancelled') : (i18n.locale() === 'cs' ? 'Čeká se' : 'Pending') }

{/* Waitlist position */}

{b().waitlistPosition > 0 ? (i18n.locale() === 'cs' ? `Jste ${b().waitlistPosition}. v pořadí` : `You are #${b().waitlistPosition} in the queue`) : (i18n.locale() === 'cs' ? 'Jste na čekací listině' : 'You are on the waitlist')}

{i18n.locale() === 'cs' ? 'Po uvolnění místa vám rezervaci automaticky potvrdíme e-mailem.' : 'When a seat frees up we will confirm your booking by email automatically.'}

{/* Reference */}

{i18n.locale() === 'cs' ? 'Referenční číslo' : 'Reference'}

{b().reference}

{/* Date & Time */}

{i18n.locale() === 'cs' ? 'Datum' : 'Date'}

{formatDate(b().startsAt)}

{i18n.locale() === 'cs' ? 'Čas' : 'Time'}

{formatTime(b().startsAt)} - {formatTime(b().endsAt)}

{/* Location */}

{i18n.locale() === 'cs' ? 'Místo' : 'Location'}

{b().location}

{/* Customer Info */}

{i18n.locale() === 'cs' ? 'Vaše údaje' : 'Your Details'}

{b().customerName}

{b().customerEmail}

{i18n.locale() === 'cs' ? 'Poznámky' : 'Notes'}

{b().notes}

{/* Action Buttons */}

{/* Contact Business Card */}

{i18n.locale() === 'cs' ? 'Potřebujete pomoci?' : 'Need help?'}

{i18n.locale() === 'cs' ? 'Máte dotazy nebo potřebujete speciální úpravy? Kontaktujte přímo podnik.' : 'Have questions or need special arrangements? Contact the business directly.'}

{i18n.locale() === 'cs' ? 'Poslat zprávu' : 'Send message'}

)} {/* Reschedule Dialog */}