show booking details and cancel option

pages/booking/[uuid].js

@@ -1,43 +1,96 @@
-import React, { useContext } from 'react'
+import React, { useEffect, useState } from 'react'
 
+import { getBookingByUUIDAsJSON } from '../../db/index'
+
+import Header from '../../components/header'
 import Footer from '../../components/footer'
 
-// TODO: load booking somehow if we navigate to booking
-// TODO: when storing data take loaded booking instead of fromData
-// TODO: show state of booking and minimal data
+import { dateFormatFrontend } from '../../helpers/date'
 
-export default function Booking() {
-  const { state, storeData } = useContext(WizardContext)
-  const { dataStored, dataStoredLoaded } = state
+import { BOOKING_STATUS } from '../../db/bookingStatus'
+
+export async function getServerSideProps(context) {
+  const { uuid } = context.params
+  const booking = await getBookingByUUIDAsJSON(uuid)
+  // TODO: hack, not sure why _id is not serilizable
+  const bookingJSON = JSON.parse(JSON.stringify(booking))
+  return {
+    props: { booking: bookingJSON },
+  }
+}
+
+function getBookingStatus(booking) {
+  switch (booking.status) {
+    case BOOKING_STATUS.REQUESTED:
+      return 'In Anfrage'
+    case BOOKING_STATUS.CONFIRMED:
+      return 'Bestätigt'
+    case BOOKING_STATUS.REJECTED:
+      return 'Abgewiesen'
+    case BOOKING_STATUS.CANCELED:
+      return 'Storniert'
+    default:
+      return 'Unbekannt - bitte kontaktieren Sie uns!'
+  }
+}
+
+async function cancelBooking(booking) {
+  const response = await fetch(`/api/booking/${booking.uuid}`, {
+    method: 'PATCH',
+    mode: 'cors',
+    cache: 'no-cache',
+    credentials: 'same-origin',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    referrerPolicy: 'no-referrer',
+    body: JSON.stringify({ status: BOOKING_STATUS.CANCELED }),
+  })
+  return response.json()
+}
+
+export default function Booking({ booking: bookingProp }) {
+  const [booking, setBooking] = useState(bookingProp)
+
+  // in case the props change, update the internal state
+  useEffect(() => setBooking(bookingProp), [bookingProp])
+
+  const onCancelBooking = async () => {
+    if (!confirm('Soll die Buchung wirklich storniert werden?')) {
+      return
+    }
+    try {
+      const updatedBooking = await cancelBooking(booking)
+      setBooking(updatedBooking)
+    } catch (e) {
+      alert(
+        'Die Buchung konnte nicht storniert werden. Kontaktieren Sie uns bitt per E-Mail!'
+      )
+    }
+  }
 
   return (
     <div className="mx-3 flex flex-col min-h-screen">
+      <Header />
       <main className="flex-grow">
-        <h1 className="text-3xl">Pfadi Bussle Buchung</h1>
-
-        <h3>Vielen Dank für die Buchung!</h3>
-        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
-        {!dataStoredLoaded && typeof dataStored !== 'boolean' && (
-          <>
-            <p>
-              Sollen die eingegebenen Daten in <strong>Deinem Browser</strong>{' '}
-              für die nächste Buchung gespeichert werden?
-            </p>
-            <button onClick={() => storeData(true)} className="btn btn-blue">
-              Ja, bitte speichern
+        <h2 className="text-3xl">Ihre Pfadi Bussle Buchung</h2>
+        <div>
+          <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
+        </div>
+        <div>
+          <strong>Buchungszeitraum:</strong>{' '}
+          {dateFormatFrontend(booking.startDate)} -{' '}
+          {dateFormatFrontend(booking.endDate)}
+        </div>
+        {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
+          booking.status
+        ) && (
+          <div className="my-6">
+            <button onClick={onCancelBooking} className="btn btn-red">
+              Buchung Stornieren
             </button>
-            <button
-              onClick={() => storeData(false)}
-              className="btn btn-grey ml-2"
-            >
-              Nein danke
-            </button>
-          </>
+          </div>
         )}
-        {dataStored === true && (
-          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
-        )}
-        <div>{JSON.stringify(state.booking, null, 4)}</div>
       </main>
 
       <Footer />

styles/index.css

@@ -68,6 +68,14 @@
   @apply bg-blue-700;
 }
 
+.btn-red {
+  @apply bg-red-500 text-white;
+}
+
+.btn-red:hover {
+  @apply bg-red-700;
+}
+
 .btn-gray {
   @apply bg-gray-500 text-white;
 }