pfadi-bussle/components/wizard/index.tsx

import * as React from 'react'
import { useContext } from 'react'

import Link from 'next/link'

import WizardStore, { WizardContext } from './context/wizardStore'

import DateSelect from './dateSelect'
import Reason from './reason'
import Contact from './contact'

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 (
    <form
      className="w-full max-w-lg"
      onSubmit={(event) => {
        event.preventDefault()
        onSubmit()
      }}
    >
      {dataStoredLoaded && (
        <p className="my-12">
          Gespeicherte Daten wurden aus Deinem Browser geladen.{' '}
          <a className="link" onClick={forgetData} href="">
            Daten wieder vergessen
          </a>
        </p>
      )}
      <DateSelect />
      <Reason />
      <Contact />
      <div>{postDataError}</div>
      <div>
        <button type="submit" disabled={postData} className="btn btn-blue">
          {postData ? 'Speichern...' : 'Absenden'}
        </button>
      </div>
    </form>
  )
}

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