class Checkout extends React.Component {
  state = {
    step: Step.ViewingCart([
      /* some shopping items */
    ])
  }

  to (step) {
    this.setState({ step })
  }

  render () {
    return this.state.step.case({
      ViewingCart: (items) => (
        <CartView
          items={items}
          onEditCart={(newItems) => this.to(Step.ViewingCart(newItems))}
          onContinue={(order) => this.to(Step.ConfirmOrder(order))}
        />
      ),
      ConfirmOrder: (details) => (
        <ConfirmOrderView
          details={details}
          onSubmit={() => this.to(Step.ProcessingOrder)}
          onCancel={() => this.to(Step.CancelledOrder('cancel_by_user'))}
        />
      ),
      ProcessingOrder: () => (
        <ProcessingOrderView
          onSuccess={() => this.to(Step.SubmittedOrder)}
          onFailure={(error) => this.to(Step.CancelledOrder(error.message)}
        />
      ),
      SubmittedOrder: () => (
        <SubmittedOrderView />
      ),
      CancelledOrder: (reason) => (
        <CancelledOrderView reason={reason} />
      )
    })
  }
}