pfadi-bussle/components/wizard/index.tsx

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>
        )}
      </>
    )
  }

  return (
    <>
      <Calendar />
      <form
        className="form"
        onSubmit={(event) => {
          event.preventDefault()
          onSubmit()
        }}
      >
        {dataStoredLoaded && (
          <p className="mb-12">
            Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
            <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">
            {postData ? 'Speichern...' : 'Absenden'}
          </button>
          {postDataError && (
            <div className="error-message flex-grow">{postDataError}</div>
          )}
        </div>
      </form>
    </>
  )
}

export default function Wizard() {
  return (
    <WizardStore>
      <WizardInternal />
    </WizardStore>
  )
}