make stored an own page and redirect there

components/wizard/context/wizardStore.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useReducer } from 'react'
-import {
+import { useRouter } from 'next/router'
-  clearBookingData,
+import { clearBookingData, loadBookingData } from '../../../helpers/storage'
-  loadBookingData,
-  storeBookingData,
-} from '../../../helpers/storage'
 import { ValidationError } from './validationError'
 
 interface WizardFormData {
@@ -17,6 +14,7 @@ interface WizardFormData {
   street: string
   zip: string
   city: string
+  storeData?: boolean
 }
 
 interface Booking {
@@ -40,7 +38,6 @@ interface WizardStore {
   onChange: (data: object) => void
   onChangeEvent: (event: React.ChangeEvent<React.ElementRef<'input'>>) => void
   onSubmit: () => void
-  storeData: (value: boolean) => void
   forgetData: () => void
 }
 
@@ -57,7 +54,6 @@ export const ACTIONS = {
   SET_FORM_DATA: 'setFormData',
   POST_DATA: 'postData',
   POST_DATA_ERROR: 'postDataError',
-  POST_DATA_SUCCESS: 'postDataSuccess',
   DATA_STORED: 'dataStored',
   DATA_STORED_LOADED: 'dataStoredLoaded',
   DATA_STORED_FORGOTTEN: 'dataStoredForgotten',
@@ -91,17 +87,6 @@ function reducer(state: WizardStoreState, action: WizardAction) {
         postDataError: action.payload,
         postDataSuccess: null,
       }
-    case ACTIONS.POST_DATA_SUCCESS:
-      return {
-        ...state,
-        formData: {
-          ...state.formData,
-        },
-        booking: { ...action.payload },
-        postData: false,
-        postDataError: null,
-        postDataSuccess: true,
-      }
     case ACTIONS.DATA_STORED_LOADED:
       return {
         ...state,
@@ -177,6 +162,7 @@ async function createBooking(formData: WizardFormData) {
 }
 
 export default function WizardStore({ children }) {
+  const router = useRouter()
   const [state, dispatch] = useReducer(reducer, initialState)
 
   useEffect(() => {
@@ -209,21 +195,13 @@ export default function WizardStore({ children }) {
 
     try {
       const booking = await createBooking(state.formData)
-      dispatch({ type: ACTIONS.POST_DATA_SUCCESS, payload: booking })
+      router.push(`/booking/${booking.uuid}/stored`)
     } catch (error) {
       console.error(error)
       dispatch({ type: ACTIONS.POST_DATA_ERROR, payload: error.message })
     }
   }
 
-  const storeData = (value: boolean) => {
-    if (value) {
-      storeBookingData(state.booking)
-    }
-
-    dispatch({ type: ACTIONS.DATA_STORED, payload: value })
-  }
-
   const forgetData = () => {
     clearBookingData()
     dispatch({ type: ACTIONS.DATA_STORED_FORGOTTEN })
@@ -237,7 +215,6 @@ export default function WizardStore({ children }) {
         onChangeEvent,
         onChange,
         onSubmit,
-        storeData,
         forgetData,
       }}
     >

components/wizard/index.tsx

@@ -1,56 +1,12 @@
-import Link from 'next/link'
 import React, { useContext } from 'react'
 import Contact from './contact'
 import WizardStore, { WizardContext } from './context/wizardStore'
-import Calendar from './calendar'
 import DateSelect from './dateSelect'
 import Reason from './reason'
 
 function WizardInternal() {
-  const { onSubmit, state, forgetData, storeData } = useContext(WizardContext)
+  const { onSubmit, state, forgetData } = useContext(WizardContext)
-  const {
+  const { postData, postDataError, dataStoredLoaded } = state
-    postData,
-    postDataSuccess,
-    postDataError,
-    dataStoredLoaded,
-    dataStored,
-    booking,
-  } = state
-
-  if (postDataSuccess) {
-    return (
-      <>
-        <h3>Vielen Dank für die Buchungsanfrage!</h3>
-        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
-        <p>
-          <Link href={`/booking/${booking.uuid}`}>
-            <a className="link">Buchungstatus einsehen</a>
-          </Link>
-        </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
-            </button>
-            <button
-              onClick={() => storeData(false)}
-              className="btn btn-grey ml-2"
-            >
-              Nein danke
-            </button>
-          </>
-        )}
-        {dataStored === true && (
-          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
-        )}
-      </>
-    )
-  }
 
   return (
     <>
@@ -61,16 +17,16 @@ function WizardInternal() {
           onSubmit()
         }}
       >
+        <DateSelect />
+        <Reason />
         {dataStoredLoaded && (
-          <p className="mb-6">
+          <p className="mb-6 info-message">
-            Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
+            Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
             <a className="link" onClick={forgetData} href="">
               Daten wieder vergessen
             </a>
           </p>
         )}
-        <DateSelect />
-        <Reason />
         <Contact />
         <div className="flex items-end">
           <button type="submit" disabled={postData} className="btn btn-blue">

pages/booking/[uuid]/stored.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
+import Footer from '../../../components/footer'
+import Header from '../../../components/header'
+import { BookingDocument } 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: BookingDocument
+}) {
+  const [storedBookingData, setStoredBookingData] = useState(null)
+  const [bookingDataStored, setBookingDataStored] = useState(false)
+
+  useEffect(() => setStoredBookingData(loadBookingData()), [])
+
+  const store = () => {
+    storeBookingData(booking)
+    setBookingDataStored(true)
+  }
+
+  return (
+    <div className="mx-3 flex flex-col min-h-screen">
+      <Header />
+      <main className="flex-grow">
+        <h3>Vielen Dank für die Buchungsanfrage!</h3>
+        <p>Nach Prüfung bestätigen wir die Buchung bald per E-Mail!</p>
+        <p>
+          <Link href={`/booking/${booking.uuid}`}>
+            <a className="link">Buchungstatus einsehen</a>
+          </Link>
+        </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="btn btn-blue ml-0 mt-3">
+              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 />
+    </div>
+  )
+}