pfadi-bussle/components/wizard.js

import React, { useContext } from 'react'

import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'

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

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

function WizardInternal() {
  const { onSubmit, state, storeData, forgetData } = useContext(WizardContext)
  const {
    postData,
    postDataSuccess,
    postDataError,
    dataStored,
    dataStoredLoaded,
  } = state

  if (postDataSuccess) {
    return (
      <>
        <h3>Danke, die Buchung ist in Bearbeitung!</h3>
        <p>Wir melden uns per E-Mail sobald die Buchung bestätigt ist.</p>
        {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)}>Ja, bitte speichern</Button>
            <Button
              onClick={() => storeData(false)}
              className="ml-2"
              variant="secondary"
            >
              Nein danke
            </Button>
          </>
        )}
        {dataStored === true && (
          <p>Ok, die Daten wurden für die nächste Buchung gespeichert.</p>
        )}
      </>
    )
  }

  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault()
        onSubmit()
      }}
    >
      {dataStoredLoaded && (
        <p>
          Gespeicherte Daten aus Deinem Browser geladen.{' '}
          <Button size="sm" variant="outline-secondary" onClick={forgetData}>
            Daten wieder Vergessen
          </Button>
        </p>
      )}
      <DateSelect />
      <Reason />
      <Contact />
      <div>{postDataError}</div>
      <Button type="submit" disabled={postData}>
        {postData ? 'Speichern...' : 'Absenden'}
      </Button>
    </Form>
  )
}

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