diff --git a/pages/booking/[uuid]/index.tsx b/pages/booking/[uuid]/index.tsx index c0c1991..a018bf3 100644 --- a/pages/booking/[uuid]/index.tsx +++ b/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))} + {storingBookingError && ( +
{storingBookingError}
+ )} {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes( booking.status ) && (
-