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 (
{cancellationResult.message}
{cancellationResult.formattedDate && (
<>
Stornierter Termin: {cancellationResult.formattedDate}>
)}
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.