import React, { useState } from "react"; import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; import { queryClient } from "@/client/rpc-client"; interface CancellationPageProps { token: string; } export default function CancellationPage({ token }: CancellationPageProps) { const [isCancelling, setIsCancelling] = useState(false); const [cancellationResult, setCancellationResult] = useState<{ success: boolean; message: string; formattedDate?: string } | null>(null); // Fetch booking details const { data: booking, isLoading, error } = useQuery({ queryKey: ["cancellation", "booking", token], queryFn: () => queryClient.cancellation.getBookingByToken({ token }), retry: false, }); // Cancellation mutation const cancelMutation = useMutation({ mutationFn: () => queryClient.cancellation.cancelByToken({ token }), onSuccess: (result) => { setCancellationResult({ success: true, message: result.message, formattedDate: result.formattedDate, }); setIsCancelling(false); }, onError: (error: any) => { setCancellationResult({ success: false, message: error?.message || "Ein Fehler ist aufgetreten.", }); setIsCancelling(false); }, }); const handleCancel = () => { setIsCancelling(true); setCancellationResult(null); cancelMutation.mutate(); }; if (isLoading) { return (
Termin wird geladen...
); } if (error) { return (

Fehler

{error?.message || "Der Stornierungs-Link ist ungültig oder abgelaufen."}

Zur Startseite
); } if (cancellationResult) { return (
{cancellationResult.success ? ( ) : ( )}

{cancellationResult.success ? 'Termin storniert' : 'Stornierung fehlgeschlagen'}

{cancellationResult.message} {cancellationResult.formattedDate && ( <>
Stornierter Termin: {cancellationResult.formattedDate} )}

Zur Startseite
); } if (!booking) { return (

Termin nicht gefunden

Der angeforderte Termin konnte nicht gefunden werden.

Zur Startseite
); } return (
Stargil Nails Logo

Termin stornieren

Termin-Details

Name: {booking.customerName}
Datum: {booking.formattedDate}
Uhrzeit: {booking.appointmentTime}
Behandlung: {(booking as any).treatmentName || 'Unbekannte Behandlung'}
Status: {booking.status === 'confirmed' ? 'Bestätigt' : booking.status === 'pending' ? 'Ausstehend' : booking.status}
{booking.status === 'cancelled' ? (

Dieser Termin wurde bereits storniert.

) : (

ℹ️ Stornierungsfrist: Termine können nur bis zu einer bestimmten Zeit vor dem Termin storniert werden. Falls die Stornierung nicht möglich ist, erhältst du eine entsprechende Meldung.

Hinweis: Nach der Stornierung wird der Termin-Slot wieder für andere Kunden verfügbar. Eine erneute Buchung ist jederzeit möglich.

)}
Zurück zur Startseite
); }