Last active
November 2, 2018 06:24
-
-
Save bodhi/1dcc7f2502ecf0066c2d14152b96d8a8 to your computer and use it in GitHub Desktop.
# type: screen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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 | |
?? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment