allow sending email again

components/bookingTable.tsx

@@ -2,12 +2,11 @@ import React from 'react'
 import Link from 'next/link'
 
 import { daysFormatFrontend } from '../helpers/date'
-import { BookingDocument } from '../db/booking'
 
 export default function BookingTable({
   booking,
 }: {
-  booking: BookingDocument
+  booking: Booking
 }) {
   const data = [
     { name: 'Status', value: booking.status },
@@ -58,9 +57,8 @@ export default function BookingTable({
           {data.map(({ name, value }, index) => (
             <div
               key={`${booking.uuid}-${name}`}
-              className={`${
+              className={`${index % 2 === 1 ? 'bg-white' : 'bg-gray-100'
-                index % 2 === 1 ? 'bg-white' : 'bg-gray-100'
+                } px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6`}
-              } px-2 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6`}
             >
               <dt className="text-sm font-medium text-gray-500">{name}</dt>
               <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">

pages/admin/bookings/[uuid]/index.tsx

@@ -4,10 +4,10 @@ import Link from 'next/link'
 import Calendar from '../../../../components/calendar'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 import { Booking } from '../../../../db/booking'
-import { getBookingStatus, patchBooking } from '../../../../helpers/booking'
+import { patchBooking } from '../../../../helpers/booking'
-import { daysFormatFrontend } from '../../../../helpers/date'
 import { log } from '../../../../helpers/log'
 import { BOOKING_STATUS } from '../../../../db/enums'
+import BookingTable from '../../../../components/bookingTable'
 
 export const getServerSideProps = getServerSideBooking
 
@@ -20,13 +20,11 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
   // in case the props change, update the internal state
   useEffect(() => setBooking(bookingProp), [bookingProp])
 
-  const onStoreBooking = async (confirmed: boolean) => {
+  const patchBookingStatus = async (status: BOOKING_STATUS) => {
     try {
       setStoringBookingError(null)
       setStoringBooking(true)
-      const updatedBooking = await patchBooking(booking.uuid, {
+      const updatedBooking = await patchBooking(booking.uuid, { status })
-        status: confirmed ? BOOKING_STATUS.CONFIRMED : BOOKING_STATUS.REJECTED,
-      })
       setBooking(updatedBooking)
     } catch (error) {
       setStoringBookingError('Buchung konnte nicht gespeichert werden.')
@@ -39,28 +37,27 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
     <>
       <h2 className="text-3xl">Buchung {booking.uuid}</h2>
       <Calendar start={booking.startDate} end={booking.endDate} />
-      <div>
+      <BookingTable booking={booking} />
-        <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
-      </div>
-      <div>
-        <strong>Bucher:</strong> {booking.name}
-      </div>
-      <div>
-        <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
-      </div>
       {storingBookingError && (
         <div className="error-message flex-grow">{storingBookingError}</div>
       )}
       <div className="my-6">
         <button
-          onClick={() => onStoreBooking(true)}
+          onClick={() => patchBookingStatus(BOOKING_STATUS.REQUESTED)}
+          className="btn btn-green"
+          disabled={storingBooking}
+        >
+          Zurück auf Requested
+        </button>
+        <button
+          onClick={() => patchBookingStatus(BOOKING_STATUS.CONFIRMED)}
           className="btn btn-blue"
           disabled={storingBooking}
         >
           Buchung Bestätigen
         </button>
         <button
-          onClick={() => onStoreBooking(false)}
+          onClick={() => patchBookingStatus(BOOKING_STATUS.REJECTED)}
           className="btn btn-red"
           disabled={storingBooking}
         >

styles/index.css

@@ -32,6 +32,10 @@
   @apply ml-0;
 }
 
+.btn-green {
+  @apply bg-green-800 text-white;
+}
+
 .btn-blue {
   @apply bg-blue-800 text-white;
 }