appStore was a stupid idea...

components/contact.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
-import { AppContext } from '../context/appStore'
+import { WizardContext } from '../context/wizardStore'
 import Required from './required'
 
 export default function Contact() {
-  const { state, onChangeEvent } = useContext(AppContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { name, email, street, zip, city } = state.formData
 

components/dateSelect.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useRef, useEffect } from 'react'
 import useSWR from 'swr'
 
-import { AppContext } from '../context/appStore'
+import { WizardContext } from '../context/wizardStore'
 
 import { DateUtils } from 'react-day-picker'
 import DayPickerInput from 'react-day-picker/DayPickerInput'
@@ -19,7 +19,7 @@ import 'moment/locale/de'
 const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
-  const { state, onChange } = useContext(AppContext)
+  const { state, onChange } = useContext(WizardContext)
   const [range, setRange] = useState({
     form: state.startDate && new Date(state.startDate),
     to: state.endDate && new Date(state.endDate),

components/reason.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react'
-import { AppContext } from '../context/appStore'
+import { WizardContext } from '../context/wizardStore'
 import Required from './required'
 
 export default function Contact() {
-  const { state, onChangeEvent } = useContext(AppContext)
+  const { state, onChangeEvent } = useContext(WizardContext)
 
   const { formDataChanged } = state
   const { purpose, destination, org } = state.formData

components/wizard.js

@@ -1,19 +1,58 @@
 import React, { useContext } from 'react'
 
-import { AppContext } from '../context/appStore'
+import Link from 'next/link'
+
+import WizardStore, { WizardContext } from '../context/wizardStore'
 
 import DateSelect from './dateSelect'
 import Reason from './reason'
 import Contact from './contact'
 //import Driver from './driver'
 
-export default function Wizard() {
-  const { onSubmit, state, forgetData } = useContext(AppContext)
-  const { postData, postDataSuccess, postDataError, dataStoredLoaded } = state
+function WizardInternal() {
+  const { onSubmit, state, forgetData, storeData } = useContext(WizardContext)
+  const {
+    postData,
+    postDataSuccess,
+    postDataError,
+    dataStoredLoaded,
+    dataStored,
+    booking,
+  } = state
 
   if (postDataSuccess) {
-    // /booking/[id] takes over
-    return null
+    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 (
@@ -44,3 +83,11 @@ export default function Wizard() {
     </form>
   )
 }
+
+export default function Wizard() {
+  return (
+    <WizardStore>
+      <WizardInternal />
+    </WizardStore>
+  )
+}