Order

SketchSystems.spec

Order
  Open
    addItem -> AddingItem?
  # Transient
  AddingItem?
    added -> Hold
  Hold
    addItem -> AddingItem?
    reopen -> Open
    tender -> ZeroBalance?
  # Transient
  ZeroBalance?
    stillBalance -> Incomplete
    noBalance -> Completed
  Incomplete
    tender -> ZeroBalance?
    void -> Void?
  Completed
    void -> Void?
  Canceled
  Voided
  # Transient
  Void?
    cancelPayments -> Voided
    paymentsNotCanceled -> Incomplete
  # Transient
  PaymentsAPIResponse?
    ok -> Incomplete
    
    

SketchSystems_prototype.js

var numItems = 0;
var tender = 0;
const cost = 5;

function render(model){
  let current_state_name = model.active_states[0].name;
  switch (current_state_name) {
    case 'AddingItem?':
      numItems += 1;
      model.emit('added');
      break;
    case 'ZeroBalance?':
      tender = tender + 5;
      if (calcBalance() <= 0) { model.emit('noBalance'); }
      else { model.emit('stillBalance'); }
      break;
    case 'Void?':
      if (Math.random() > 0.5) {
        tender = 0;
        numItems = 0;
        model.emit('cancelPayments');
      } else {
        model.emit('paymentsNotCanceled');
      }
      break;
  }
  return (
    <div>
      <h1>Order ({current_state_name})</h1>
      <ul>
        <li>Total: <b>${numItems * cost}</b></li>
        <li>Balance: ${calcBalance()}</li>
        <li>Num items: {numItems}</li>
        <li>Tendered: ${tender}</li>
      </ul>
    </div>)
}

function calcBalance() {
  return numItems * cost - tender;
}