Add hierarhical managment

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;