Enabled product bundles

woocomerce-order/src/App.js

@@ -1,99 +1,117 @@
 import React, { Component } from 'react';
 import './App.css';
 import Wiass from './components';
-import { sendOrder, logIn, retrieveWorkflow } from './actions';
+import { sendOrder, logIn, retrieveWorkflow, getProducts } from './actions';
 
 import ActionType from './enums/ActionType';
 
 
 class App extends Component {
-  constructor(props) {
-    super(props);
-    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();
-  };
-
-  onRetrieveWorkflowClicked = id => {
-      retrieveWorkflow(id, workflow => {
-        this.setState({
-            workflow,
-        });
-      });
-  };
-
-  renderLogInData() {
-    if (this.state.currentActionType === ActionType.LOG_IN) {
-      return (<div>{this.state.roles}</div>);
+    constructor(props) {
+        super(props);
+        this.state = {
+            roles: [],
+            workflow: undefined,
+            uname: undefined,
+            pass: undefined,
+            products: undefined,
+            currentActionType: ActionType.LOG_IN,
+        };
     }
-    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>
+    onActionTypeChange = actionType => {
+        this.setState({
+            currentActionType: actionType,
+        });
+    };
+
+    onLogInClicked = (username, password) => {
+        let self = this
+        const authentucate = function (username, password) {
+            logIn(username, password).then(response => {
+                let rolesFromResponse = JSON.stringify(response.roles)
+                if (username && password) {
+                    getProducts(username).then(response => {
+                        self.setState((prevState, props) => {
+                            return {
+                                ...prevState,
+                                roles: rolesFromResponse,
+                                products: JSON.parse(response.toJSON().body),
+                                currentActionType: ActionType.SEND_ORDER,
+                                uname: username,
+                                pass: password
+                            };
+                        });
+                    });
+                }
+            });
+        };
+        return authentucate(username, password)
+    };
+
+    onOrderClicked = (productId) => {
+        return sendOrder(productId);
+    };
+
+    onRetrieveWorkflowClicked = id => {
+        retrieveWorkflow(id, workflow => {
+            this.setState({
+                workflow,
+            });
+        });
+    };
+
+    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 (<div className="workflow">
-              {steps}
-              </div>);
-      }
-      return null;
-  }
+        }
+        return null;
+    }
 
-  render() {
-    return (
-        <div className="App">
-            <div className="data-container">
-                {this.renderLogInData()}
-                {this.renderWorkflowData()}
+    render() {
+        return (
+            <div className="App">
+                <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}
+                    products={this.state.products}
+                />
             </div>
-          <Wiass
-              onActionTypeChange={this.onActionTypeChange}
-              actionType={this.state.currentActionType}
-              onOrderClicked={this.onOrderClicked}
-              onLogInClicked={this.onLogInClicked}
-              onRetrieveWorkflowClicked={this.onRetrieveWorkflowClicked}
-          />
-        </div>
-    );
-  }
+        );
+    }
 }
 
 export default App;

woocomerce-order/src/actions.js

@@ -4,7 +4,6 @@ import { execute } from './helpers/GravityAPI';
 var WooCommerceAPI = require('woocommerce-api');
 var Base64 = require('base-64');
 
-
 export const SEND_ORDER = 'SEND_ORDER'
 
 var WooCommerce = new WooCommerceAPI({
@@ -16,7 +15,7 @@ var WooCommerce = new WooCommerceAPI({
 });
 
 
-export function sendOrder() {
+export function sendOrder(productID) {
 
   var data = {
     payment_method: 'bacs',
@@ -46,12 +45,7 @@ export function sendOrder() {
     },
     line_items: [
       {
-        product_id: 93,
-        quantity: 2
-      },
-      {
-        product_id: 22,
-        variation_id: 23,
+        product_id: productID,
         quantity: 1
       }
     ]
@@ -71,20 +65,37 @@ export function logIn(username, password) {
       '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)
-      }
-    })
+    switch (response.status) {
+      case 401:
+        console.log(response.code)
+        break
+      case 200:
+        return response.json()
+      default:
+        console.log(response.code)
+    }
+  })
 }
 
 export function retrieveWorkflow(id, callback) {
-    const method = 'GET';
-    const route = `entries/${id}/steps`;
-    execute(method, route, callback);
+  const method = 'GET';
+  const route = `entries/${id}/steps`;
+  execute(method, route, callback);
 }
+
+export function getProducts(username) {
+
+  let isAdmin = username === "worpwooc"
+  let ck = isAdmin ? "ck_79837fb6f49f9f3eca830e34faeeea35b6cc1287" : "ck_6771c976f16e11e4387aa2549bda327742cea189"
+  let cs = isAdmin ? "cs_18bd03a0e6afd7d5c9e51e1d1c86032e425bd8d8" : "cs_99dc6251a6d89fed28d2ca971965f4b32309751b"
+
+  let API = new WooCommerceAPI({
+    url: 'https://localhost',
+    consumerKey: ck,
+    consumerSecret: cs,
+    wpAPI: true,
+    version: 'wc/v2',
+  });
+
+  return API.getAsync('products')
+}

woocomerce-order/src/components/index.js

@@ -6,6 +6,7 @@ import Workflow from './workflow';
 import ActionType from '../enums/ActionType';
 
 export const Wiaas = (props) => {
+
     const getSidebarItemClass = actionType => {
         if (actionType === props.actionType) {
             return 'selected';
@@ -37,7 +38,7 @@ export const Wiaas = (props) => {
             </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.SEND_ORDER && <Order products={props.products} onOrderClicked={props.onOrderClicked} />}
                 {props.actionType === ActionType.WORKFLOW && <Workflow onRetrieveWorkflowClicked={props.onRetrieveWorkflowClicked} />}
             </div>
         </div>

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

@@ -2,8 +2,42 @@ import React from 'react'
 
 export const Order = (props) => {
 
+    const { products } = props
+    let bundledProductId
+
+    const imageStyle = {
+        width: "50px",
+        height: "50px",
+    };
+    let displayedProducts = products.map(
+        product => {
+
+            if (product.type === "grouped"){
+                bundledProductId = product.id
+            }
+
+            let images = product.images.map(
+                image => {
+                    return (
+                        <img key={image.id.toString()} style={imageStyle} src={image.src} />
+                    )
+                }
+            )
+            return (
+                <div key={product.id.toString()}>
+                    {images}
+                   {product.name}
+                </div>
+            )
+
+        }
+    )
+
     return (
-        <button onClick={props.onOrderClicked} > SEND ORDER </button>
+        <div>
+            {displayedProducts}
+            <button onClick={() => props.onOrderClicked(bundledProductId)} > SEND ORDER </button>
+        </div>
     )
 }
 

woocomerce-order/src/helpers/GravityAPI.js

@@ -40,6 +40,7 @@ export function execute(method, path, callback) {
                     //callback()
                     callback(r.response);
                 });
+                break;
             default:
                 console.log(response.code)
         }