make stored an own page and redirect there

components/wizard/context/wizardStore.tsx

@@ -1,9 +1,6 @@
 import React, { useEffect, useReducer } from 'react'
-import {
-  clearBookingData,
-  loadBookingData,
-  storeBookingData,
-} from '../../../helpers/storage'
+import { useRouter } from 'next/router'
+import { clearBookingData, loadBookingData } 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 {
-    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>
-        )}
-      </>
-    )
-  }
+  const { onSubmit, state, forgetData } = useContext(WizardContext)
+  const { postData, postDataError, dataStoredLoaded } = state
 
   return (
     <>
@@ -61,16 +17,16 @@ function WizardInternal() {
           onSubmit()
         }}
       >
+        <DateSelect />
+        <Reason />
         {dataStoredLoaded && (
-          <p className="mb-6">
-            Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
+          <p className="mb-6 info-message">
+            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">