use error notification and disable button

pages/booking/[uuid]/index.tsx

@@ -65,6 +65,8 @@ export default function ShowBooking({
   booking: BookingDocument
 }) {
   const [booking, setBooking] = useState(bookingProp)
+  const [storingBooking, setStoringBooking] = useState(false)
+  const [storingBookingError, setStoringBookingError] = useState(null)
 
   // in case the props change, update the internal state
   useEffect(() => setBooking(bookingProp), [bookingProp])
@@ -73,14 +75,19 @@ export default function ShowBooking({
     if (!confirm('Soll die Buchung wirklich storniert werden?')) {
       return
     }
+
     try {
+      setStoringBookingError(null)
+      setStoringBooking(true)
       const updatedBooking = await cancelBooking(booking)
       setBooking(updatedBooking)
-    } catch (e) {
-      alert(
-        'Die Buchung konnte nicht storniert werden. Schreiben Sie uns eine E-Mail'
+    } catch (error) {
+      setStoringBookingError(
+        'Buchung konnte nicht storniert werden. Schreiben Sie uns eine E-Mail!'
       )
+      console.error('Failed to store booking', error)
     }
+    setStoringBooking(false)
   }
 
   return (
@@ -96,11 +103,18 @@ export default function ShowBooking({
           {dateFormatFrontend(new Date(booking.startDate))} -{' '}
           {dateFormatFrontend(new Date(booking.endDate))}
         </div>
+        {storingBookingError && (
+          <div className="error-message flex-grow">{storingBookingError}</div>
+        )}
         {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
           booking.status
         ) && (
           <div className="my-6">
-            <button onClick={onCancelBooking} className="btn btn-red">
+            <button
+              onClick={onCancelBooking}
+              className="btn btn-red"
+              disabled={storingBooking}
+            >
               Buchung Stornieren
             </button>
           </div>