App&

SketchSystems.spec

App&
  Content
    Stores
      pick store -> Categories
    Categories
      pick category -> Product List
      back to store list -> Stores
    Product List
      choose product -> Product
      back to categories -> Categories
    Product
      customise -> Customise
      back to product list -> Product List
    Customise
      add to cart -> Product
      cancel customise -> Product
  Cart
    Empty
      # technically `add to cart` can only be triggered from `Product`, not here. The event here is to cause the transition when `add to cart` is triggered from `Product`
      add to cart -> Item In Cart
    Item In Cart
      clear cart -> Empty
      back to store list -> Empty
      checkout -> Item In Cart

  Checkout
    Closed
      checkout -> Open
    Open
      cancel checkout -> Closed
    

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  
console.log("MODEL", model)
  if (model.root.children[0].children[2].children[1].is_active) {
    // in Checkout
    return $("div", $("h1", "Check Out"), $("button", { onClick: () => model.emit("cancel checkout") }, "cancel")); 
  }
  
  let cart = $("div");
  if (model.root.children[0].children[1].children[1].is_active) {
    cart = $("div", $("h1", "Cart"), $("button", {onClick: () => model.emit("checkout")}, "checkout"), $("button", {onClick: () => model.emit("clear cart")}, "empty cart"));
  }
  
  let content = model.root.children[0].children[0].children.find(s => s.is_active).name;
  
  let picker = (label, event = label) => $("li", { onClick: () => model.emit(event), style: {"text-decoration": "underline", "color": "blue", "cursor": "pointer"}}, label);
  
  let contentViews = {
     Stores: $("ul",  picker("store 1", "pick store"), picker("store 2", "pick store")),
     Categories: $("ul",  picker("food", "pick category"), picker("drink", "pick category"), picker("back to store list")),
     "Product List": $("ul",  picker("product 1", "choose product"), picker("product 2", "choose product"), picker("back to categories")),
     Product: $("ul",  picker("customise", "customise"), picker("back to products", "back to product list")),
     Customise: $("ul",  picker("add to cart", "add to cart"), picker("back", "cancel customise")),


    
  }
  
  return $("div", $("h1",
           content), contentViews[content], cart);
}