display orders per product, download as csv

1 files changed, 121 insertions, 0 deletions

diff --git a/client/components/OrderList.jsx b/client/components/OrderList.jsx
new file mode 100644
index 0000000..5b0380b
--- /dev/null
+++ b/client/components/OrderList.jsx
@@ -0,0 +1,121 @@
+import React from 'react'
+import state_lookup from '../state_lookup'
+import saveAs from 'browser-saveas'
+import csvStringify from 'csv-stringify'
+
+export default class OrderList extends React.Component {
+  constructor(props) {
+    super()
+    this.downloadCsv = this.downloadCsv.bind(this)
+  }
+  downloadCsv() {
+    const orders = this.parseOrders().map((order) => {
+      return [
+        order.order_id,
+        order.order_date,
+        order.order_checkout_type,
+        order.order_ship_name,
+        order.order_company,
+        order.order_address1,
+        order.order_address2,
+        order.order_city,
+        state_lookup(order.order_state),
+        order.order_zip,
+        order.order_country !== 'United States' ? '' : order.order_country,
+      ]
+    })
+    csvStringify(orders, (err, csv) => {
+      const blob = new Blob([csv], {type : 'text/plain;charset=utf-8'})
+      saveAs(blob, this.props.product.product_name.replace(/\s+/g,"") +'.csv')
+    })
+  }
+  parseOrders() {
+    return this.props.orders.filter( (order) => {
+      // also filter where order.order_status == 3 (paid in full) ?
+      // filter weird blank orders if found
+      return !! order.order_ship_name
+    }).map( (order, i) => {
+      const name = order.order_ship_name
+        .toUpperCase()
+        .replace(/(Sr|Jr|I|II|III|IV)\.?$/i, "")
+        .split(" ")
+        .reverse()[0]
+      return [ name, order ]
+    }).sort((a,b) => {
+      return a[0] < b[0] ? -1 : a[0] === b[0] ? 0 : 1
+    }).map((pair, i) => {
+      return pair[1]
+    })
+  }
+  render() {
+    if (! this.props.product) {
+      return ( <div></div> )
+    }
+    if (! this.props.orders) {
+      return ( <div className='loading'>Loading...</div> )
+    }
+    if (! this.props.orders.length) {
+      return ( <div className='notfound'>No orders found</div> )
+    }
+
+    const items = this.parseOrders().map((order, i) => {
+      const order_link = (
+        <a href={'http://shopping.msana.com/cw4/admin/order-details.php?order_id=' + order.order_id}>
+          (order)
+        </a>
+      )
+      const customer_link = order.order_checkout_type === 'guest' ? '' : (
+        <a href={'http://shopping.msana.com/cw4/admin/customer-details.php?customer_id=' + order.order_customer_id}>
+          (customer)
+        </a>
+      )
+      let order_name, order_address
+      if (order.order_company && order.order_company !== order.order_ship_name) {
+        order_name = (
+          <span>
+            {order.order_ship_name}<br />
+            {order.order_company}
+          </span>
+        )
+      }
+      else {
+        order_name = order.order_ship_name
+      }
+      if (order.order_address2 && order.order_address2 !== order.order_address1) {
+        order_address = (
+          <span>
+            {order.order_address1}<br />
+            {order.order_address2}
+          </span>
+        )
+      }
+      else {
+        order_address = order.order_address1
+      }
+      
+      const country = order.order_country !== 'United States' ? order.order_country : ""
+      return (
+        <div key={i}>
+          <div>
+            {order_link} {customer_link}
+          </div>
+          <div>
+            {order_name}<br />
+            {order_address}<br />
+            {order.order_city}, {state_lookup(order.order_state)} {order.order_zip} {country}
+          </div>
+        </div>
+      )
+    })
+    
+    return (
+      <div className='orderList'>
+        <a href='#' onClick={() => this.downloadCsv()}>Download CSV</a>
+        {items}
+        <br />
+        <br />
+        <br />
+      </div>
+    )
+  }
+}
\ No newline at end of file