Add hierarhical managment

woocomerce-order/src/App.css

@@ -78,7 +78,7 @@ div.workflow-step-current {
   left: 0;
   top: 0;
   bottom: 0;
-  width: 100px;
+  width: 150px;
   background-color: #777;
   display: flex;
   flex-direction: column;
@@ -101,7 +101,7 @@ div.workflow-step-current {
   display: flex;
   align-items: center;
   justify-content: center;
-  left: 100px;
+  left: 150px;
   position: absolute;
   right: 0;
   height: 100%;
@@ -111,3 +111,46 @@ div.workflow-step-current {
   display: flex;
   flex-direction: column;
 }
+
+#user-dashboard {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.user-profile {
+  display: flex;
+  flex-direction: column;
+  box-shadow: 3px 0 7px 0px #777;
+  margin-bottom: 20px;
+}
+
+.user-profile > div {
+  padding: 10px;
+  display: flex;
+}
+
+.user-profile > div > span:first-child {
+  font-weight: bold;
+  font-size: 18px;
+  margin-right: 20px;
+}
+
+.user-orders {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 20px;
+}
+
+.user-orders > div {
+  padding: 20px;
+  border-radius: 3px;
+  border: 1px solid #ddd;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}

woocomerce-order/src/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import './App.css';
 import Wiass from './components';
-import { sendOrder, logIn, retrieveWorkflow, getProducts } from './actions';
+import { sendOrder, logIn, retrieveWorkflow, getProducts, getOrders, getUserOrganization } from './actions';
 
 import ActionType from './enums/ActionType';
 
@@ -15,6 +15,9 @@ class App extends Component {
             uname: undefined,
             pass: undefined,
             products: undefined,
+            userInfo: undefined,
+            userOrders: undefined,
+            userOrganization: undefined,
             currentActionType: ActionType.LOG_IN,
         };
     }
@@ -22,6 +25,19 @@ class App extends Component {
     onActionTypeChange = actionType => {
         this.setState({
             currentActionType: actionType,
+        }, () => {
+            if (this.state.currentActionType === ActionType.USER_DASHBOARD && this.state.uname) {
+                getOrders(this.state.uname).then(response => {
+                    this.setState({
+                        userOrders: JSON.parse(response.toJSON().body),
+                    });
+                });
+                getUserOrganization(this.state.uname, this.state.pass).then(response => {
+                    this.setState({
+                        userOrganization: response,
+                    });
+                });
+            }
         });
     };
 
@@ -29,13 +45,17 @@ class App extends Component {
         let self = this
         const authentucate = function (username, password) {
             logIn(username, password).then(response => {
-                let rolesFromResponse = JSON.stringify(response.roles)
+                console.log(response);
+                let rolesFromResponse = JSON.stringify(response.roles);
+                const userInfo = response.data;
                 if (username && password) {
                     getProducts(username).then(response => {
                         self.setState((prevState, props) => {
                             return {
                                 ...prevState,
                                 roles: rolesFromResponse,
+                                userInfo,
+                                userOrders: undefined,
                                 products: JSON.parse(response.toJSON().body),
                                 currentActionType: ActionType.SEND_ORDER,
                                 uname: username,
@@ -108,6 +128,9 @@ class App extends Component {
                     onLogInClicked={this.onLogInClicked}
                     onRetrieveWorkflowClicked={this.onRetrieveWorkflowClicked}
                     products={this.state.products}
+                    userInfo={this.state.userInfo}
+                    userOrders={this.state.userOrders}
+                    userOrganization={this.state.userOrganization}
                 />
             </div>
         );

woocomerce-order/src/actions.js

@@ -4,7 +4,7 @@ import { execute } from './helpers/GravityAPI';
 var WooCommerceAPI = require('woocommerce-api');
 var Base64 = require('base-64');
 
-export const SEND_ORDER = 'SEND_ORDER'
+export const SEND_ORDER = 'SEND_ORDER';
 
 var WooCommerce = new WooCommerceAPI({
   url: 'https://localhost',
@@ -14,6 +14,14 @@ var WooCommerce = new WooCommerceAPI({
   version: 'wc/v2',
 });
 
+const usersLogins = {
+    worpwooc: ['ck_79837fb6f49f9f3eca830e34faeeea35b6cc1287', 'cs_18bd03a0e6afd7d5c9e51e1d1c86032e425bd8d8'],
+    customer: ['ck_6771c976f16e11e4387aa2549bda327742cea189', 'cs_99dc6251a6d89fed28d2ca971965f4b32309751b'],
+    coor_nordic: ['ck_4b374f3b97137af927e9740831353e8fb1de363d', 'cs_cce7da309f5b3b93c22a9984df24cb0966b6e3fd'],
+    coor_se: ['ck_4b9f1e1350436e81fe6ff6ba46896d3a4cd9c49f', 'cs_55aa56d59cdee89ddc1623d76c91f37574532718'],
+    coor_kista: ['ck_54e43135b0b8c4ea4e909306a0faafd2abaa8c92', 'cs_c078e2696e7fd20cabb114e15c2a7dfbbcf91d0b'],
+};
+
 
 export function sendOrder(productID) {
 
@@ -84,18 +92,50 @@ export function retrieveWorkflow(id, callback) {
 }
 
 export function getProducts(username) {
-
-  let isAdmin = username === "worpwooc"
-  let ck = isAdmin ? "ck_79837fb6f49f9f3eca830e34faeeea35b6cc1287" : "ck_6771c976f16e11e4387aa2549bda327742cea189"
-  let cs = isAdmin ? "cs_18bd03a0e6afd7d5c9e51e1d1c86032e425bd8d8" : "cs_99dc6251a6d89fed28d2ca971965f4b32309751b"
+  const auth = usersLogins[username];
 
   let API = new WooCommerceAPI({
     url: 'https://localhost',
-    consumerKey: ck,
-    consumerSecret: cs,
+    consumerKey: auth[0],
+    consumerSecret: auth[1],
     wpAPI: true,
     version: 'wc/v2',
   });
 
   return API.getAsync('products')
+}
+
+export function getUserOrganization(username, password) {
+    let auth = Base64.encode(username + ':' + password);
+    let fullPath = 'https://localhost/wp-json/wiaas/v1/organization';
+    return fetch(fullPath, {
+        method: 'get',
+        headers: {
+            'authorization': 'Basic ' + auth
+        }
+    }).then(response => {
+        switch (response.status) {
+            case 401:
+                console.log(response.code);
+                break;
+            case 200:
+                return response.json();
+            default:
+                console.log(response.code)
+        }
+    })
+}
+
+export function getOrders(username) {
+    const auth = usersLogins[username];
+
+    let API = new WooCommerceAPI({
+        url: 'https://localhost',
+        consumerKey: auth[0],
+        consumerSecret: auth[1],
+        wpAPI: true,
+        version: 'wc/v2',
+    });
+
+    return API.getAsync('orders')
 }

woocomerce-order/src/components/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Order from './order'
 import Login from './login'
 import Workflow from './workflow';
+import UserDashboard from './user-dashboard';
 
 import ActionType from '../enums/ActionType';
 
@@ -35,11 +36,22 @@ export const Wiaas = (props) => {
                 >
                     Workflow
                 </div>
+                <div
+                    className={getSidebarItemClass(ActionType.USER_DASHBOARD)}
+                    onClick={() => { props.onActionTypeChange(ActionType.USER_DASHBOARD)}}
+                >
+                    User Dashboard
+                </div>
             </div>
             <div id="wiaas-container">
                 {props.actionType === ActionType.LOG_IN && <Login  onLogInClicked={props.onLogInClicked}/>}
                 {props.actionType === ActionType.SEND_ORDER && <Order products={props.products} onOrderClicked={props.onOrderClicked} />}
                 {props.actionType === ActionType.WORKFLOW && <Workflow onRetrieveWorkflowClicked={props.onRetrieveWorkflowClicked} />}
+                {props.actionType === ActionType.USER_DASHBOARD && <UserDashboard
+                    userInfo={props.userInfo}
+                    userOrders={props.userOrders}
+                    userOrganization={props.userOrganization}
+                />}
             </div>
         </div>
     )

woocomerce-order/src/components/user-dashboard/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export const UserDashboard = props => {
+    if (!props.userInfo) {
+        return (<div id="user-dashboard">
+            You need to log in to see dashboard.
+        </div>)
+    }
+    const userOrders = [];
+    if (props.userOrders) {
+        props.userOrders.forEach(order => {
+            userOrders.push(<div className={order.status} key={order.id}>
+                <span>#{order.id}</span>
+                <span>{order.total} {order.currency}</span>
+                <span>{order.status}</span>
+            </div>);
+        });
+    }
+
+    let userOrganizationInfo;
+    if (props.userOrganization) {
+        console.log(props.userOrganization);
+        userOrganizationInfo = (<div>
+            <span>Organization:</span>
+            <span>{props.userOrganization.name} ({props.userOrganization.description})</span>
+        </div>);
+    }
+
+    return (<div id="user-dashboard">
+        <div className="user-profile">
+            <div>
+                <span>Name:</span>
+                <span>{props.userInfo.display_name}</span>
+            </div>
+            <div>
+                <span>Email:</span>
+                <span>{props.userInfo.user_email}</span>
+            </div>
+            {userOrganizationInfo}
+        </div>
+        <div className="user-orders">
+            {userOrders}
+        </div>
+    </div>);
+};
+
+export default UserDashboard;

woocomerce-order/src/enums/ActionType.js

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