#Guest can browse plays, see all info, but has no profile and cannot see performance prices

SketchSystems.spec

#Guest can browse plays, see all info, but has no profile and cannot see performance prices
Anonymous user
  login -> Logged in user
  List of performances

Logged in user
  logout -> Anonymous user
  
  Welcome view
    Type of profile
      organiser login -> Organiser view
      artist login -> Artist view
  
  #Organiser can browse for plays and do a booking
  Organiser view
      
    Organiser profile complete?
      true? ->  Organiser approved?
      false? -> Organiser registration
    
    Organiser approved?
      true? -> Organiser welcome
      false? -> Organiser approval pending
    
    Organiser registration
      
    #Informing user that approval is still pending
    Organiser approval pending
    
    #Welcome page after login
    Organiser welcome
      performances -> List of performances with prices
    
   #Artist (Theater, Circus, Musician...) can enter their plays and associated data
   Artist view
     Artist profile complete?
       true? -> Artist approved?
       false? -> Artist registration
     Artist approved?
       true? -> Artist welcome
       false? -> Artist approval pending
     Artist registration
     Artist approval pending
     Artist welcome
     
   List of performances with prices
     profile -> Organiser welcome

SketchSystems_prototype.js

const Go = ({emit,event}) => event ? <button onClick={()=>emit(event)}>{event}</button> : ' '
const Nav = ({emit, acs}) => {
  const events = acs.transitions ? acs.transitions.map(({event_name})=>event_name) : []
  const parentEvents = acs.parent && acs.parent.transitions ? acs.parent.transitions.map(({event_name})=>event_name) : []
  const parent2Events = acs.parent && acs.parent.parent && acs.parent.parent.transitions ? acs.parent.parent.transitions.map(({event_name})=>event_name) : []

  const allEvents = [...parent2Events,'', ...parentEvents,'',...events]
  
  return <>send event: { allEvents.map(event=><Go {...{event,emit}} />)}</>
}

function render({active_states,emit}){
  console.log(active_states)
  let acs = active_states[0]
  let state = acs.name
  return <>
      <h1>{state}</h1>
      <Nav {...{emit, acs}} />
    </>
}