move contexts all out in own toplevel dir

- rename wizard to book

components/book/contact.tsx

@@ -0,0 +1,58 @@
+import React, { useContext } from 'react'
+import { BookContext } from '../../context/book'
+import Input from '../input'
+
+export default function Contact() {
+  const { state, onChangeEvent } = useContext(BookContext)
+
+  const { org, name, email, phone, street, zip, city } = state.formData
+
+  return (
+    <>
+      <Input label="Verein" name="org" value={org} onChange={onChangeEvent} />
+      <Input
+        label="Name"
+        required
+        name="name"
+        value={name}
+        onChange={onChangeEvent}
+      />
+      <Input
+        label="E-Mail"
+        type="email"
+        name="email"
+        value={email}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="Telefon"
+        type="phone"
+        name="phone"
+        value={phone}
+        onChange={onChangeEvent}
+      />
+      <Input
+        label="Straße"
+        name="street"
+        value={street}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="PLZ"
+        name="zip"
+        value={zip}
+        onChange={onChangeEvent}
+        required
+      />
+      <Input
+        label="Stadt"
+        name="city"
+        value={city}
+        onChange={onChangeEvent}
+        required
+      />
+    </>
+  )
+}

components/book/dateSelect.tsx

@@ -0,0 +1,55 @@
+import React, { useContext } from 'react'
+import { BookContext } from '../../context/book'
+import InputWrapper from '../inputWrapper'
+import Calendar from '../calendar'
+
+export default function DateSelect() {
+  const { onChangeEvent, onChange, state } = useContext(BookContext)
+  const { startDate, endDate } = state.formData
+
+  const today = new Date().toISOString().substring(0, 10)
+
+  return (
+    <>
+      <InputWrapper label="Datum" required>
+        <Calendar
+          start={startDate}
+          end={endDate}
+          onChange={onChange}
+          className="my-6 max-w-lg"
+        />
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <div className="">
+            <label className="flabel inline-block mr-3" htmlFor="startDate">
+              Von
+            </label>
+            <input
+              required
+              type="date"
+              className="input-text"
+              name="startDate"
+              value={startDate || ''}
+              onChange={onChangeEvent}
+              min={today}
+            />
+          </div>
+          <div className="">
+            <label className="flabel inline-block mr-3" htmlFor="endDate">
+              Bis
+            </label>
+            <input
+              required
+              type="date"
+              className="input-text"
+              name="endDate"
+              value={endDate || ''}
+              placeholder="Von"
+              onChange={onChangeEvent}
+              min={startDate || today}
+            />
+          </div>
+        </div>
+      </InputWrapper>
+    </>
+  )
+}

components/book/index.tsx

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react'
+import Contact from './contact'
+import BookStore, { BookContext } from '../../context/book'
+import DateSelect from './dateSelect'
+import Reason from './reason'
+
+function BookForm() {
+  const { onSubmit, state, forgetData } = useContext(BookContext)
+  const { postData, postDataError, dataStoredLoaded } = state
+
+  return (
+    <>
+      <form
+        className="form"
+        onSubmit={(event) => {
+          event.preventDefault()
+          onSubmit()
+        }}
+      >
+        <DateSelect />
+        <Reason />
+        {dataStoredLoaded && (
+          <p className="mb-6 info-message">
+            Buchungsdaten wurden aus Deinem Browser geladen und vorausgefüllt.{' '}
+            <a className="link" onClick={forgetData}>
+              Daten wieder vergessen
+            </a>
+          </p>
+        )}
+        <Contact />
+        <div className="flex items-end">
+          <button type="submit" disabled={postData} className="btn btn-blue">
+            {postData ? 'Speichern...' : 'Absenden'}
+          </button>
+          {postDataError && (
+            <div className="error-message flex-grow">{postDataError}</div>
+          )}
+        </div>
+      </form>
+    </>
+  )
+}
+
+export default function Book() {
+  return (
+    <BookStore>
+      <BookForm />
+    </BookStore>
+  )
+}

components/book/reason.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react'
+import { BookContext } from '../../context/book'
+import Input from '../input'
+
+export default function Contact() {
+  const { state, onChangeEvent } = useContext(BookContext)
+
+  const { purpose, destination } = state.formData
+
+  return (
+    <>
+      <Input
+        label="Zweck der Fahrt"
+        name="purpose"
+        value={purpose}
+        onChange={onChangeEvent}
+      />
+      <Input
+        label="Ziel der Fahrt"
+        name="destination"
+        value={destination}
+        onChange={onChangeEvent}
+      />
+    </>
+  )
+}