From 3580c2d0d9df93ee864ed587fb22de622f42cf05 Mon Sep 17 00:00:00 2001
From: JamesRamm <jamessramm@gmail.com>
Date: Fri, 10 Feb 2017 08:59:08 +0000
Subject: [PATCH] Allow orders to be marked as fulfilled

---
 longclaw/client/src/api/api.js             |  7 +---
 longclaw/client/src/orders/OrderDetail.jsx | 48 ++++++++++++++++++----
 longclaw/client/src/orders/index.jsx       |  3 +-
 longclaw/orders/wagtail_hooks.py           |  2 +-
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/longclaw/client/src/api/api.js b/longclaw/client/src/api/api.js
index 0d4528d..491f47d 100644
--- a/longclaw/client/src/api/api.js
+++ b/longclaw/client/src/api/api.js
@@ -7,7 +7,7 @@ import fetch from 'isomorphic-fetch';
 export default {
 
   getOrder: makeApiFunction('/api/order/{id}/', get),
-  fulfillOrder: makeApiFunction('api/order/{id}/fulfill', post, false, false)
+  fulfillOrder: makeApiFunction('/api/order/{id}/fulfill/', post, false, false)
 
 }
 
@@ -44,11 +44,8 @@ function makeApiFunction(endpoint, requestFunction, form = false, json = false)
    * without all the boilerplate and offer a more secure way of allowing
    * this 'host' to be passed in with out altering any global state.
    */
-  return (host = null, options = {}) => {
+  return (options = {}) => {
     let url = endpoint;
-    if (host !== null) {
-      url = `${host}${endpoint}`;
-    }
     if (options.urlParams) {
       Object.keys(options.urlParams).map((key) => {
         url = url.replace(`{${key}}`, options.urlParams[key]);
diff --git a/longclaw/client/src/orders/OrderDetail.jsx b/longclaw/client/src/orders/OrderDetail.jsx
index a113ab1..e7a2c88 100644
--- a/longclaw/client/src/orders/OrderDetail.jsx
+++ b/longclaw/client/src/orders/OrderDetail.jsx
@@ -5,26 +5,56 @@ import api from '../api/api';
 
 class OrderDetail extends Component {
 
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      loading: true,
+      order: null
+    }
+
+  }
+
   handleFulfill() {
-    console.log("Fulfill clicked!")
+    api.fulfillOrder({ urlParams: { id: this.props.orderId }})
+      .then(this.fetchOrder())
   }
 
   handleRefund() {
     console.log("Refund clicked!")
   }
 
+  fetchOrder() {
+    this.setState({ loading: true })
+    api.getOrder({ urlParams: { id: this.props.orderId }})
+      .then(json => this.setState({ loading: false, order: json }))
+  }
+
+  componentDidMount() {
+    this.fetchOrder()
+  }
+
   render() {
+    if (this.state.loading) {
+      return (
+        <span>
+          <i className="icon icon-spinner"></i>
+        </span>
+      );
+    }
+    const order = this.state.order;
     let status = <span className="icon icon-warning">UNKNOWN&nbsp;</span>;
     let refundBtn = (
       <button
         onClick={() => this.handleRefund()}
         className="button button-secondary"
+        disabled
       >
         Refund
       </button>
     );
 
-    if (this.props.order.status == 1) {
+    if (order.status == 1) {
       status = (
         <div>
           <span className="icon icon-warning">
@@ -35,7 +65,7 @@ class OrderDetail extends Component {
         </div>
       );
     }
-    else if (this.props.order.status == 2) {
+    else if (order.status == 2) {
       status = (
         <div>
           <span className="icon icon-warning">
@@ -45,7 +75,7 @@ class OrderDetail extends Component {
         </div>
       );
     }
-    else if (this.props.order.status == 3) {
+    else if (order.status == 3) {
       status = <span className="icon icon-bin">CANCELLED</span>;
     };
 
@@ -56,14 +86,14 @@ class OrderDetail extends Component {
           {status}
         </div>
         <OrderSummary
-          order={this.props.order}
-          shippingAddress={this.props.order.shipping_address}
+          order={order}
+          shippingAddress={order.shipping_address}
         />
         <h2>Order Items</h2>
         <OrderItems
-          items={this.props.order.items}
-          subTotal={this.props.order.total}
-          shippingRate={parseFloat(this.props.order.shipping_rate)}
+          items={order.items}
+          subTotal={order.total}
+          shippingRate={parseFloat(order.shipping_rate)}
         />
       </div>
     );
diff --git a/longclaw/client/src/orders/index.jsx b/longclaw/client/src/orders/index.jsx
index 20192a9..a8e3c0e 100644
--- a/longclaw/client/src/orders/index.jsx
+++ b/longclaw/client/src/orders/index.jsx
@@ -4,10 +4,9 @@ import ReactDOM from 'react-dom';
 import OrderDetail from './OrderDetail'
 
 const target = document.getElementById('order-app');
-const order = window.initialData;
 ReactDOM.render(
     <OrderDetail
-      order={order}
+      orderId={target.dataset.orderId}
     />,
   target
 );
diff --git a/longclaw/orders/wagtail_hooks.py b/longclaw/orders/wagtail_hooks.py
index e4fc63b..1ff34f4 100644
--- a/longclaw/orders/wagtail_hooks.py
+++ b/longclaw/orders/wagtail_hooks.py
@@ -77,7 +77,7 @@ class DetailView(InspectView):
 
     def get_context_data(self, **kwargs):
         context = {
-            'initial_data': JSONRenderer().render(OrderSerializer(self.instance).data),
+            'order_id': self.instance.id
         }
         context.update(kwargs)
         return super(DetailView, self).get_context_data(**context)