add rough billing section

pages/booking/[uuid]/bill.tsx

@@ -0,0 +1,193 @@
+import { GetServerSideProps } from 'next'
+import React, { useEffect, useState } from 'react'
+import Footer from '../../../components/footer'
+import Header from '../../../components/header'
+import Input from '../../../components/wizard/input'
+import { BookingDocument } from '../../../db/booking'
+import { BOOKING_STATUS, MILAGE_RATES } from '../../../db/enums'
+import { getBookingByUUID } from '../../../db/index'
+import { dateFormatFrontend } from '../../../helpers/date'
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const {
+    res,
+    params: { uuid: uuids },
+  } = context
+  const uuid = Array.isArray(uuids) ? uuids[0] : uuids
+  const booking = await getBookingByUUID(uuid)
+
+  if (!booking) {
+    res.statusCode = 404
+    res.end()
+    return { props: {} }
+  }
+
+  // TODO: hack, not sure why _id is not serilizable
+  const bookingJSON = JSON.parse(JSON.stringify(booking.toJSON()))
+  return {
+    props: { booking: bookingJSON },
+  }
+}
+
+function getBookingStatus(booking: BookingDocument) {
+  switch (booking.status) {
+    case BOOKING_STATUS.REQUESTED:
+      return 'In Bearbeitung'
+    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: BookingDocument) {
+  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 Bill({
+  booking: bookingProp,
+}: {
+  booking: BookingDocument
+}) {
+  const [booking, setBooking] = useState(bookingProp)
+  const [milageStart, setMilageStart] = useState(0)
+  const [milageEnd, setMilageEnd] = useState(0)
+  const [rate, setRate] = useState(MILAGE_RATES.EXTERN_UP_TO_200)
+  const milage =
+    (0 < milageEnd &&
+      0 < milageStart &&
+      milageStart < milageEnd &&
+      milageEnd - milageStart) ||
+    0
+  const total = milage && rate && milage * rate
+
+  // 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">
+        <h2 className="text-3xl">Pfadi Bussle Buchung</h2>
+        <div>
+          <strong>Buchungsstatus:</strong> {getBookingStatus(booking)}
+        </div>
+        <div>
+          <strong>Buchungszeitraum:</strong>{' '}
+          {dateFormatFrontend(new Date(booking.startDate))} -{' '}
+          {dateFormatFrontend(new Date(booking.endDate))}
+        </div>
+        <div>
+          <strong>Bucher:</strong> {booking.booker.name}
+        </div>
+        <div>
+          <Input
+            label="Anfangskilometer"
+            name="milageStart"
+            required
+            value={milageStart}
+            type="number"
+            onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
+              setMilageStart(Number(e.target.value))
+            }
+          />
+          <Input
+            label="Endkilometer"
+            name="milageEnd"
+            required
+            value={milageEnd}
+            type="number"
+            onChange={(e: React.ChangeEvent<React.ElementRef<'input'>>) =>
+              setMilageEnd(Number(e.target.value))
+            }
+          />
+          <Input label="Gefahren" name="milage" readOnly value={milage} />
+          <div className="fsw">
+            <div className="fs">
+              <label className="flabel">Rate</label>
+              <div className="relative">
+                <select
+                  className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                  id="rate"
+                  onChange={(
+                    e: React.ChangeEvent<React.ElementRef<'select'>>
+                  ) => setRate(Number(e.target.value))}
+                >
+                  <option value={MILAGE_RATES.INTERN_UP_TO_200}>
+                    Intern bis 200 ({MILAGE_RATES.INTERN_UP_TO_200})
+                  </option>
+                  <option value={MILAGE_RATES.INTERN_200_1000}>
+                    Intern 200-1000 ({MILAGE_RATES.INTERN_200_1000})
+                  </option>
+                  <option value={MILAGE_RATES.INTERN_1001_2000}>
+                    Intern 1001-2000 ({MILAGE_RATES.INTERN_1001_2000})
+                  </option>
+                  <option value={MILAGE_RATES.INTERN_OVER_2000}>
+                    Intern ab 2001 ({MILAGE_RATES.INTERN_OVER_2000})
+                  </option>
+                  <option value={MILAGE_RATES.EXTERN_UP_TO_200}>
+                    Extern bis 200 ({MILAGE_RATES.EXTERN_UP_TO_200})
+                  </option>
+                  <option value={MILAGE_RATES.EXTERN_200_1000}>
+                    Extern 200-1000 ({MILAGE_RATES.EXTERN_200_1000})
+                  </option>
+                  <option value={MILAGE_RATES.EXTERN_1001_2000}>
+                    Extern 1001-2000 ({MILAGE_RATES.EXTERN_1001_2000})
+                  </option>
+                  <option value={MILAGE_RATES.EXTERN_OVER_2000}>
+                    Extern ab 2001 ({MILAGE_RATES.EXTERN_OVER_2000})
+                  </option>
+                </select>
+                <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                  <svg
+                    className="fill-current h-4 w-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                  >
+                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Input label="Summe" name="milage" readOnly value={total} />
+        </div>
+        <button onClick={onCancelBooking} className="btn btn-blue">
+          Rechnung Erstellen
+        </button>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}

pages/booking/[uuid]/index.tsx

@@ -1,11 +1,11 @@
 import { GetServerSideProps } from 'next'
 import React, { useEffect, useState } from 'react'
-import Footer from '../../components/footer'
+import Footer from '../../../components/footer'
-import Header from '../../components/header'
+import Header from '../../../components/header'
-import { BookingDocument } from '../../db/booking'
+import { BookingDocument } from '../../../db/booking'
-import { BOOKING_STATUS } from '../../db/enums'
+import { BOOKING_STATUS } from '../../../db/enums'
-import { getBookingByUUID } from '../../db/index'
+import { getBookingByUUID } from '../../../db/index'
-import { dateFormatFrontend } from '../../helpers/date'
+import { dateFormatFrontend } from '../../../helpers/date'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const {
@@ -33,7 +33,7 @@ function getBookingStatus(booking: BookingDocument) {
     case BOOKING_STATUS.REQUESTED:
       return 'In Bearbeitung'
     case BOOKING_STATUS.CONFIRMED:
-      return 'Bestätigt'
+      return 'Bestätigt'
     case BOOKING_STATUS.REJECTED:
       return 'Abgewiesen'
     case BOOKING_STATUS.CANCELED:
@@ -92,8 +92,8 @@ export default function ShowBooking({
         </div>
         <div>
           <strong>Buchungszeitraum:</strong>{' '}
-          {dateFormatFrontend(booking.startDate)} -{' '}
+          {dateFormatFrontend(new Date(booking.startDate))} -{' '}
-          {dateFormatFrontend(booking.endDate)}
+          {dateFormatFrontend(new Date(booking.endDate))}
         </div>
         {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
           booking.status