rename api end url to bookings

pages/bookings/[uuid]/index.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react'
+import Footer from '../../../components/footer'
+import Header from '../../../components/header'
+import { getServerSideBooking } from '../../../lib/getServerSideProps'
+import { Booking } from '../../../db/booking'
+import { BOOKING_STATUS } from '../../../db/enums'
+import { daysFormatFrontend } from '../../../helpers/date'
+import { getBookingStatus, cancelBooking } from '../../../helpers/booking'
+
+export const getServerSideProps = getServerSideBooking
+
+export default function ShowBooking({
+  booking: bookingProp,
+}: {
+  booking: Booking
+}) {
+  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])
+
+  const onCancelBooking = async () => {
+    if (!confirm('Soll die Buchung wirklich storniert werden?')) {
+      return
+    }
+
+    try {
+      setStoringBookingError(null)
+      setStoringBooking(true)
+      const updatedBooking = await cancelBooking(booking.uuid)
+      setBooking(updatedBooking)
+    } catch (error) {
+      setStoringBookingError(
+        'Buchung konnte nicht storniert werden. Schreiben Sie uns eine E-Mail!'
+      )
+      console.error('Failed to store booking', error)
+    }
+    setStoringBooking(false)
+  }
+
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <div>
+          <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
+        </div>
+        <div>
+          <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
+        </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"
+              disabled={storingBooking}
+            >
+              Buchung Stornieren
+            </button>
+          </div>
+        )}
+      </main>
+
+      <Footer />
+    </>
+  )
+}

pages/bookings/[uuid]/stored.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
+import Footer from '../../../components/footer'
+import Header from '../../../components/header'
+import { Booking } from '../../../db/booking'
+import { loadBookingData, storeBookingData } from '../../../helpers/storage'
+import { getServerSideBooking } from '../../../lib/getServerSideProps'
+
+export const getServerSideProps = getServerSideBooking
+
+export default function ShowBookingStored({ booking }: { booking: Booking }) {
+  const [storedBookingData, setStoredBookingData] = useState(null)
+  const [bookingDataStored, setBookingDataStored] = useState(false)
+
+  useEffect(() => setStoredBookingData(loadBookingData()), [])
+
+  const store = () => {
+    storeBookingData(booking)
+    setBookingDataStored(true)
+  }
+
+  return (
+    <>
+      <Header />
+      <main className="main">
+        <h3 className="mb-3 text-lg">Vielen Dank für die Buchungsanfrage</h3>
+        <p className="mb-6">
+          Nach Prüfung bestätigen wir die Buchung zeitnah per E-Mail.
+        </p>
+        <p>
+          Den{' '}
+          <Link href={`/bookings/${booking.uuid}`}>
+            <a className="link">Link</a>
+          </Link>{' '}
+          zur Buchung schicken wir Dir auch per E-Mail. Dort kann die Buchung
+          auch jederzeit storniert werden.
+        </p>
+        {!storedBookingData && !bookingDataStored && (
+          <div className="mt-6">
+            <p>
+              Sollen deine Buchungsdaten für die nächste Buchung in{' '}
+              <strong>deinem Browser</strong> gespeichert werden?
+            </p>
+            <button onClick={store} className="mt-3 ml-0 btn btn-blue">
+              Ja, bitte speichern
+            </button>
+          </div>
+        )}
+        {bookingDataStored === true && (
+          <div className="mt-6">
+            <p className="info-message">
+              Ok, deine Buchungsdaten wurden für die nächste Buchung
+              gespeichert.
+            </p>
+          </div>
+        )}
+      </main>
+
+      <Footer />
+    </>
+  )
+}