Auto Refills Card

SketchSystems.spec

Auto Refills Card
  Recommended Manual-Refills
    Add Starter Set -> Considering Manual-Refills
  Recommended Auto-Refills
    Add Starter Set -> Considering Auto-Refills
  Considering Auto-Refills
    Add Auto-Refills -> Reviewing Auto-Refills
    I prefer to Refill Manually -> Reconsidering Manual-Refills
  Considering Manual-Refills
    Review Order -> Reviewing Manual-Refills
    I prefer Auto-Refills -> Reconsidering Auto-Refills
  Reviewing Auto-Refills
    Edit -> Reconsidering Auto-Refills
    Checkout -> Checkout
  Reviewing Manual-Refills
    Edit -> Reconsidering Manual-Refills
    Checkout -> Checkout
  Reconsidering Auto-Refills
    Done -> Reviewing Auto-Refills
    I prefer to Refill Manually -> Reconsidering Manual-Refills
  Reconsidering Manual-Refills
    Done -> Reviewing Manual-Refills
    Add Auto-Refills -> Reconsidering Auto-Refills
  Checkout
    Back -> Recommended Auto-Refills

SketchSystems_prototype.js

function buttonEmitter(model, event) {
  return $("button", { onClick: model.emit.bind(this, event) }, event);
}

function starterSetCard(buttonMaker) {
  return $("div", buttonMaker("Add Starter Set"));
}

function consideringAutoRefills(buttonMaker) {
  return $("div",
           $("p", "We think auto-refills make sense"),
           buttonMaker("Add Auto-Refills"),
           buttonMaker("I prefer to Refill Manually"));
}

function consideringManualRefills(buttonMaker) {
  return $("div",
         $("p", "We think manual-refills make sense"),
           buttonMaker("Review Order"),
           buttonMaker("I prefer Auto-Refills"));
}

function reviewingAutoRefills(buttonMaker) {
  return $("div", 
           $("p", "We'll bill you later for an auto-refill"),
           buttonMaker("Edit"),
          buttonMaker("Checkout"));
}

function reviewingManualRefills(buttonMaker) {
  return $("div", 
           $("p", "You'll need to order refills manually"),
           buttonMaker("Edit"),
          buttonMaker("Checkout"));
}

function reconsideringAutoRefills(buttonMaker) {
    return $("div", 
           $("p", "You've chosen to get auto-refills"),
            buttonMaker("Done"),
            buttonMaker("I prefer to Refill Manually"));
}

function reconsideringManualRefills(buttonMaker) {
    return $("div", 
           $("p", "You've chosen to refill manually"),
            buttonMaker("Done"),
            buttonMaker("Add Auto-Refills"));
}

function checkout(buttonMaker) {
  return $("div", 
           $("p", "Time to checkout"),
           buttonMaker("Back"));
}

let presenterByState = {
  'Recommended Auto-Refills': starterSetCard,
  'Recommended Manual-Refills': starterSetCard,
  'Considering Auto-Refills': consideringAutoRefills,
  'Considering Manual-Refills': consideringManualRefills,
  'Reviewing Auto-Refills': reviewingAutoRefills,
  'Reviewing Manual-Refills': reviewingManualRefills,
  'Reconsidering Auto-Refills': reconsideringAutoRefills,
  'Reconsidering Manual-Refills': reconsideringManualRefills,
  'Checkout': checkout
}

function render(model){
  let buttonMaker = buttonEmitter.bind(this, model);
  let current_state_name = model.active_states[0].name;
  
  return presenterByState[current_state_name](buttonMaker)
}