summaryrefslogtreecommitdiff
path: root/client/components/OrderList.jsx
blob: 5b0380b2b575e5441394ebbfbf077b1d28dd2542 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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>
    )
  }
}