Add gravity flow demo

woocomerce-order/src/components/index.js

@@ -1,13 +1,45 @@
 import React from 'react'
 import Order from './order'
 import Login from './login'
+import Workflow from './workflow';
+
+import ActionType from '../enums/ActionType';
 
 export const Wiaas = (props) => {
+    const getSidebarItemClass = actionType => {
+        if (actionType === props.actionType) {
+            return 'selected';
+        }
+        return '';
+    };
 
     return (
-        <div>
-            <Login  onLogInClicked={props.onLogInClicked}/>
-            <Order onOrderClicked={props.onOrderClicked} />
+        <div id="wiaas">
+            <div id="wiaas-sidebar">
+                <div
+                    className={getSidebarItemClass(ActionType.LOG_IN)}
+                    onClick={() => { props.onActionTypeChange(ActionType.LOG_IN)}}
+                >
+                    Log In
+                </div>
+                <div
+                    className={getSidebarItemClass(ActionType.SEND_ORDER)}
+                    onClick={() => { props.onActionTypeChange(ActionType.SEND_ORDER)}}
+                >
+                   Order
+                </div>
+                <div
+                    className={getSidebarItemClass(ActionType.WORKFLOW)}
+                    onClick={() => { props.onActionTypeChange(ActionType.WORKFLOW)}}
+                >
+                    Workflow
+                </div>
+            </div>
+            <div id="wiaas-container">
+                {props.actionType === ActionType.LOG_IN && <Login  onLogInClicked={props.onLogInClicked}/>}
+                {props.actionType === ActionType.SEND_ORDER && <Order onOrderClicked={props.onOrderClicked} />}
+                {props.actionType === ActionType.WORKFLOW && <Workflow onRetrieveWorkflowClicked={props.onRetrieveWorkflowClicked} />}
+            </div>
         </div>
     )
 }

woocomerce-order/src/components/workflow/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export const Workflow = (props) => {
+    let workflow = 1;
+
+    return (
+        <div>
+            <div>
+                <label > WORKFLOW_ID </label>
+                <input defaultValue={1} ref={el => workflow=el} type="number" />
+            </div>
+            <button onClick={() => props.onRetrieveWorkflowClicked(workflow.value)} > DISPLAY WORKFLOW </button>
+        </div>
+    )
+}
+
+export default Workflow;