# type: screen

Camera.png

Cart.png

Category List.png

Form.png

Images.png

List.png

No Data.png

PDPCart.png

PLP.png

SketchSystems.spec

# type: screen
# inputs: none
Category Screen
  scan barcode -> Barcode Scanner
  # outputs: search query + API call for categories
  start search -> Search Results
  
  # type: component
  # inputs: categories from API
  Category List
    # outputs: category + API call for product list
    view category -> PLP
    
  # type: component
  # inputs: search query + categories
  Search Results
    cancel -> Category Screen
    # outputs: product
    view product -> PDP

# type: screen
# inputs: none
Barcode Scanner
  close -> Category Screen

  # type: screen
  Camera
    # outputs: JAN code
    barcode found -> Loading Product
    
  # type: saga
  # inputs: JAN code
  # outputs: API call for variant for JAN code
  Loading Product

    # type: component
    # input: API call status + result
    Loading
      # outputs: product variant
      product found -> PDP
      product not found -> No Product
    
    # type: component
    No Product
      back -> Camera

# type: screen
# inputs: category, product list
PLP
  back -> Category Screen
  # outputs: search query
  start search -> PLP
  view cart -> Cart
  # outputs: product variant
  view product -> PDP

# type: screen
# inputs: product variant
PDP&
  back -> PLP
  start search -> ??
  view cart -> Cart
  
  # type: screen
  PDPCart&
  
    # type: component
    # input: other variants of product variant
    Variant&
      # inputs: other variants
      
      # type: component
      Variant List
       # outputs: variant
       change variant -> Variant
       
      # type: component
      # inputs: images for variant
      Images
      
        Image List
          # outputs: image to zoom
          tap image -> Zoom Image
          scroll images -> Images
          
        # type: screen
        Zoom Image
          close -> Image List
          pan & zoom -> Zoom Image
          
      # type: component
      # inputs: sizes for variant
      Size
      
        # type: component
        No Size
          select a size -> Selecting Size

          # type: component
          Disabled Add To Cart Button
          
        # type: component
        Selecting Size 
          no size -> No Size
          # outputs: size
          selected size -> Size Selected
          
          # type: component
          Disabled Add To Cart Button_

        # type: component
        # inputs: size
        Size Selected
          select a size -> Selecting Size
          # outputs: variant + size

          # type: component
          # inputs: size + variant
          Add To Cart Button
            add to cart -> Cart

  # type: component
  # inputs: product
  Inventory
  
    # type: component
    # inputs: current location
    No Data
      # outputs: API call
      request inventory -> Loading Inventory

    # type: saga
    # input: API call status
    Loading Inventory
      # output: shop list + inventory
      loaded -> Shop List
      load failed -> Error

      # type: component
      In Progress
      
      # type: component
      Error
        try again -> Loading Inventory
      
    # type: component
    # inputs: shop list + inventory
    Shop List
      search by closest -> Shop List
      # output: search query
      search -> List
      
      # type: component
      List
        # output: store
        send details -> Form
        
      # type: saga
      # Form screen should show keyboard automatically, also, this should move to top level of PDP, it's in parallel to the rest of the components (and zoomed products)
      Form
      
        # type: component
        Ready
          cancel -> List
          # outputs: email, API call
          send -> Sending
          enter email -> Form
          
        # type: component
        # inputs: store, email
        Sending
          sent -> List

# type: screen
# input: cart
Cart
  back -> PLP
  checkout -> Existing Checkout Flow
  clear cart -> Cart
  
# type: tab
Existing Checkout Flow
  checked out -> Category Screen
  back to cart -> Cart

??

SketchSystems_prototype.js

function Image({ state }) {
   if (state.image_url) {
     return <img style={{height: "20vh"}} src={state.image_url} />
//} else if (state.parent) {
//  return <Image state={state.parent} />
}
return null
}

function statePath(state) {
  if (state == null || state.name === "root") {
    return [];
  }
  const p = statePath(state.parent);
  p.push(state.name)
  return p;
}

function View({ state, level }) {
  const { name, parent, transitions } = state;
  return <div>
    {$("h"+level, state.name)}
    <Image state={state} />
      {state.children && state.children.filter(({ is_active }) => is_active).map(child => <View key={child.name} state={child} level={level + 1} />)}
    </div>
}

function render(model){
  let current_state_name = model.active_states[0].name;
  return <div style={{flex: 1}}>
      <View state={model.root} level={1} />
  </div>
}