Cruises

SketchSystems.spec

Cruises
  View 1 available dates -> API call Get available pricing
  Current -> Pick your cabin experience

API
  API call Get available pricing 
    Success -> Cruise booking
  API call POST set pricing
    Success -> Traveller
  API call calculate cabin price
  API call add cabin

Cruise booking&
  Itinerary
    Hide full itinerary
      Itinerary details -> Show full itinerary
    Show full itinerary
      Itinerary details -> Hide full itinerary
  Stepper
    Search
      previous -> Search
      next -> Traveller
      Book -> API call POST set pricing

    Traveller&
      previous -> Search
      next -> Cabin
      List Travellers
        Has Travellers
          Remove a traveller -> Has Travellers
        No Travellers
        Select passenger -> Saved  Travellers

        Saved Travellers
          Close -> List Travellers
          New traveller -> Passenger Details
          List saved travellers
            No saved travellers
            Has saved travellers
              Select a traveller -> Has saved travellers
              Add traveller -> Has saved travellers
              Close -> Has Travellers
          Passenger Details
            Close -> Traveller
            Register -> Has saved travellers
      
      List Cabins
        Select cabin -> Pick your cabin category
        Pick your cabin category
          Select -> Pick your cabin experience
        Pick your cabin experience
          Select -> Assign up to 4 passengers to this cabin
        Assign up to 4 passengers to this cabin
          Select passenger1 -> Assign up to 4 passengers to this cabin
          Calculate price -> API call calculate cabin price
        
  
    Cabin
      previous -> Traveller
      next -> Checkout
    Checkout
      previous -> Cabin
      next -> Payment
    Payment
      previous -> Checkout
      next -> Payment

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}