From d7b1ae3525bcfae8e6b6bd38d01bada916e15d20 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Thu, 2 Oct 2025 15:38:22 +0200
Subject: [PATCH] Fix: Improve booking status page error handling

- Add better error messages for invalid/expired booking tokens
- Replace generic 'Internal server error' with user-friendly explanations
- List possible reasons why booking links might not work
- Add clear call-to-action for new bookings
- Improve user experience with helpful guidance
---
 src/client/components/booking-status-page.tsx | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/client/components/booking-status-page.tsx b/src/client/components/booking-status-page.tsx
index c954e3e..c792782 100644
--- a/src/client/components/booking-status-page.tsx
+++ b/src/client/components/booking-status-page.tsx
@@ -114,16 +114,26 @@ export default function BookingStatusPage({ token }: BookingStatusPageProps) {
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
               </svg>
             </div>
-            <h2 className="text-xl font-bold text-gray-900 mb-2">Fehler</h2>
+            <h2 className="text-xl font-bold text-gray-900 mb-2">Link nicht verfügbar</h2>
             <p className="text-gray-600 mb-4">
-              {error?.message || "Der Link ist ungültig oder abgelaufen."}
+              Dieser Buchungslink ist nicht mehr verfügbar. Mögliche Gründe:
             </p>
-            <a 
-              href="/" 
-              className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
-            >
-              Zur Startseite
-            </a>
+            <ul className="text-sm text-gray-600 text-left mb-6 space-y-2">
+              <li>• Der Link ist abgelaufen</li>
+              <li>• Die Buchung wurde bereits storniert</li>
+              <li>• Der Link wurde bereits verwendet</li>
+            </ul>
+            <div className="space-y-3">
+              <a 
+                href="/" 
+                className="inline-flex items-center px-4 py-2 bg-pink-600 text-white rounded-lg hover:bg-pink-700 transition-colors"
+              >
+                Neue Buchung erstellen
+              </a>
+              <p className="text-sm text-gray-500">
+                Bei Fragen wende dich direkt an uns.
+              </p>
+            </div>
           </div>
         </div>
       </div>