diff --git a/pages/booking/[uuid]/bill.tsx b/pages/booking/[uuid]/bill.tsx new file mode 100644 index 0000000..2265e37 --- /dev/null +++ b/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 ( +
+
+
+

Pfadi Bussle Buchung

+
+ Buchungsstatus: {getBookingStatus(booking)} +
+
+ Buchungszeitraum:{' '} + {dateFormatFrontend(new Date(booking.startDate))} -{' '} + {dateFormatFrontend(new Date(booking.endDate))} +
+
+ Bucher: {booking.booker.name} +
+
+ >) => + setMilageStart(Number(e.target.value)) + } + /> + >) => + setMilageEnd(Number(e.target.value)) + } + /> + +
+
+ +
+ +
+ + + +
+
+
+
+ + +
+ +
+ +
+ ) +} diff --git a/pages/booking/[uuid].tsx b/pages/booking/[uuid]/index.tsx similarity index 85% rename from pages/booking/[uuid].tsx rename to pages/booking/[uuid]/index.tsx index fb24066..d7ba466 100644 --- a/pages/booking/[uuid].tsx +++ b/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 Header from '../../components/header' -import { BookingDocument } from '../../db/booking' -import { BOOKING_STATUS } from '../../db/enums' -import { getBookingByUUID } from '../../db/index' -import { dateFormatFrontend } from '../../helpers/date' +import Footer from '../../../components/footer' +import Header from '../../../components/header' +import { BookingDocument } from '../../../db/booking' +import { BOOKING_STATUS } from '../../../db/enums' +import { getBookingByUUID } from '../../../db/index' +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({
Buchungszeitraum:{' '} - {dateFormatFrontend(booking.startDate)} -{' '} - {dateFormatFrontend(booking.endDate)} + {dateFormatFrontend(new Date(booking.startDate))} -{' '} + {dateFormatFrontend(new Date(booking.endDate))}
{[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes( booking.status