Add gravity flow demo

woocomerce-order/src/App.css

@@ -1,5 +1,8 @@
 .App {
   text-align: center;
+  position: fixed;
+  height: 100%;
+  width: 100%;
 }
 
 .App-logo {
@@ -26,3 +29,85 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+.data-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 100px;
+  position: absolute;
+  right: 0;
+  height: 50%;
+}
+
+div.workflow {
+  display: flex;
+  flex-direction: column;
+}
+
+div.workflow-step {
+  margin:5px;
+  box-shadow: 0 1px 4px 0 rgba(0,0,0,.3);
+  padding: 10px;
+  display: flex;
+}
+
+div.workflow-step-completed > div.workflow-graphic {
+  background-color: green;
+}
+
+div.workflow-graphic {
+  height: 20px;
+  width: 20px;
+  border-radius: 100%;
+  box-shadow: 0 1px 4px 0 rgba(0,0,0,.3);
+  margin-right: 20px;
+}
+
+div.workflow-step-current {
+  border: 2px solid orange;
+}
+
+#wiaas {
+  height: 100%;
+  width: 100%;
+}
+
+#wiaas-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100px;
+  background-color: #777;
+  display: flex;
+  flex-direction: column;
+}
+
+#wiaas-sidebar > div {
+  color: #fff;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 20px 0;
+}
+
+#wiaas-sidebar > div.selected {
+  background-color:green;
+}
+
+#wiaas-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 100px;
+  position: absolute;
+  right: 0;
+  height: 100%;
+}
+
+.workflow {
+  display: flex;
+  flex-direction: column;
+}

woocomerce-order/src/App.js

@@ -1,41 +1,96 @@
 import React, { Component } from 'react';
 import './App.css';
 import Wiass from './components';
-import { sendOrder, logIn } from './actions';
+import { sendOrder, logIn, retrieveWorkflow } from './actions';
 
+import ActionType from './enums/ActionType';
 
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.state = {roles: []};
+    this.state = {
+      roles: [],
+        workflow: undefined,
+        currentActionType: ActionType.LOG_IN,
+    };
   }
 
-  
+  onActionTypeChange = actionType => {
+    this.setState({
+        currentActionType: actionType,
+    });
+  };
 
+  onLogInClicked = (username, password) => {
+      const authentucate = function (username, password) {
+          logIn(username, password).then(response => {
+              this.setState((prevState, props) => {
+                  return {roles: JSON.stringify(response.roles)};
+              });
+          });
+      };
+      return authentucate(username, password)
+  };
 
+  onOrderClicked = () => {
+        return sendOrder();
+  };
 
-  render() {
-    let self = this
-    const authentucate = function (username, password) {
-      logIn(username, password).then(response => {
-        self.setState((prevState, props) => {
-          return {roles: JSON.stringify(response.roles)};
+  onRetrieveWorkflowClicked = id => {
+      retrieveWorkflow(id, workflow => {
+        this.setState({
+            workflow,
         });
       });
-    }
+  };
 
-    const onLogInClicked = function (username, password) {
-      return authentucate(username, password)
-    }
-  
-    const onOrderClicked = function () {
-      return sendOrder()
+  renderLogInData() {
+    if (this.state.currentActionType === ActionType.LOG_IN) {
+      return (<div>{this.state.roles}</div>);
     }
+    return null;
+  }
+
+  renderWorkflowData() {
+      if (this.state.currentActionType === ActionType.WORKFLOW && this.state.workflow) {
+          const steps = this.state.workflow.map(step => {
+            const isCompleted = step['status'] === 'complete';
+            const isCurrent = step['is_current_step'];
+            const classes = [
+                'workflow-step',
+                isCompleted ? 'workflow-step-completed' : '',
+                isCurrent ? 'workflow-step-current' : '',
+            ].join(' ');
+            return (<div className={classes} style={{ display: 'flex'}}>
+                <div className="workflow-graphic" />
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start'}}>
+                  <div>{step['name']}</div>
+                  <div>Assigness: {step['assignees'].map(a => a['display_name']).join(',')}</div>
+              </div>
+            </div>);
+          });
+          return (<div className="workflow">
+              {steps}
+              </div>);
+      }
+      return null;
+  }
+
+  render() {
     return (
         <div className="App">
-        {this.state.roles}
-          <Wiass onOrderClicked={onOrderClicked} onLogInClicked={onLogInClicked} />
+            <div className="data-container">
+                {this.renderLogInData()}
+                {this.renderWorkflowData()}
+            </div>
+          <Wiass
+              onActionTypeChange={this.onActionTypeChange}
+              actionType={this.state.currentActionType}
+              onOrderClicked={this.onOrderClicked}
+              onLogInClicked={this.onLogInClicked}
+              onRetrieveWorkflowClicked={this.onRetrieveWorkflowClicked}
+          />
         </div>
     );
   }

woocomerce-order/src/actions.js

@@ -1,4 +1,6 @@
-import fetch from 'cross-fetch'
+import fetch from 'cross-fetch';
+import { execute } from './helpers/GravityAPI';
+
 var WooCommerceAPI = require('woocommerce-api');
 var Base64 = require('base-64');
 
@@ -13,6 +15,7 @@ var WooCommerce = new WooCommerceAPI({
   version: 'wc/v2',
 });
 
+
 export function sendOrder() {
 
   var data = {
@@ -53,7 +56,6 @@ export function sendOrder() {
       }
     ]
   };
-
   WooCommerce.post('orders', data, function (err, data, res) {
     console.log(res);
   });
@@ -80,3 +82,9 @@ export function logIn(username, password) {
       }
     })
 }
+
+export function retrieveWorkflow(id, callback) {
+    const method = 'GET';
+    const route = `entries/${id}/steps`;
+    execute(method, route, callback);
+}

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;

woocomerce-order/src/enums/ActionType.js

@@ -0,0 +1,7 @@
+const actions = {
+    SEND_ORDER: 0,
+    LOG_IN: 1,
+    WORKFLOW: 2,
+};
+
+export default actions;

woocomerce-order/src/helpers/GravityAPI.js

@@ -0,0 +1,47 @@
+//eslint disable
+import CryptoJS from 'crypto-js';
+import fetch from "cross-fetch";
+
+const apiKey = '0102c9cf3b';
+const privateKey = '1524cdc26dceaee';
+
+function convertToFutureUnixTime(expirationInSeconds) {
+    const currentDate = new Date();
+    const unixTimeInSeconds = parseInt(currentDate.getTime() / 1000, 10);
+
+    return unixTimeInSeconds + expirationInSeconds;
+}
+
+export function getFullPath(method, route) {
+    const futureUnixTime = convertToFutureUnixTime(60);
+
+    const stringToSign = `${apiKey}:${method}:${route}:${futureUnixTime}`;
+
+    const hash = CryptoJS.HmacSHA1(stringToSign, privateKey);
+    const base64 = hash.toString(CryptoJS.enc.Base64);
+
+    const signature = encodeURIComponent(base64);
+    const fullPath = `http://localhost/gravityformsapi/${route}?api_key=${apiKey}&signature=${signature}&expires=${futureUnixTime}`;
+    console.log(fullPath);
+    return fullPath;
+
+}
+
+export function execute(method, path, callback) {
+    return fetch(getFullPath(method, path), {
+        method: method,
+    }).then(response => {
+        switch (response.status) {
+            case 401:
+                console.log(response.code);
+                break;
+            case 200:
+                response.json().then(r => {
+                    //callback()
+                    callback(r.response);
+                });
+            default:
+                console.log(response.code)
+        }
+    })
+}