General enhancements

package.json

@@ -19,6 +19,7 @@
     "money": "^0.2.0",
     "netlify-auth-js": "^0.5.2",
     "react": "^15.4.1",
+    "react-date-range": "^0.9.4",
     "react-dom": "^15.4.1",
     "react-gravatar": "^2.6.1",
     "semantic-ui-css": "^2.2.4",

src/Components/Order/Address.js

@@ -11,7 +11,7 @@ export default function({title, address, href, onLink}: args) {
     </h3>
 
     {address && <div>
-      {address.first_name} {address.last_name}<br/>
+      {address.name}<br/>
       {address.company && <span>{address.company}<br/></span>}
       {address.address1}<br/>
       {address.address2 && <span>{address.address2}<br/></span>}

src/Components/Order/AddressEditor.js

@@ -48,8 +48,7 @@ export default class AddressEditor extends Component {
     return addr &&
       <Form onSubmit={this.handleSubmit}>
         <Form.Group widths="equal">
-          <Form.Input label="First Name" name="first_name" value={addr.first_name} onChange={this.handleChange}/>
-          <Form.Input label="Last Name" name="last_name" value={addr.last_name} onChange={this.handleChange}/>
+          <Form.Input label="First Name" name="name" value={addr.name} onChange={this.handleChange}/>
         </Form.Group>
         <Form.Group widths="equal">
           <Form.Input label="Country" name="country" value={addr.country} onChange={this.handleChange}/>

src/Components/Order/index.js

@@ -9,6 +9,8 @@ import Address from './Address';
 import AddressEditor from './AddressEditor';
 import './styles.css';
 
+import { requiresShipping } from '../../helpers'
+
 function formatId(id: string) {
   return id.split("-").pop();
 }
@@ -116,16 +118,15 @@ export default class OrderView extends Component {
 
   handleReceipt = (e: SyntheticEvent) => {
     e.preventDefault();
-    const {commerce, config} = this.props;
     const {order} = this.state;
     if (!order) { return; }
-
-    const openWindow = window.open("about:blank", "Receipt");
-    console.log(config.receiptTemplate)
-    commerce.orderReceipt(order.id, config.receiptTemplate).then((data) => {
-      openWindow.document.body.innerHTML = data.data;
-    });
-
+    let user = localStorage.getItem('netlify.auth.user')
+    try {
+      user = JSON.parse(user)
+      window.open(`https://smashingmagazine.com/receipts/?id=${order.id}&jwt=${user.jwt_token}`, "Receipt");
+    } catch (e) {
+      console.log(e)
+    }
   }
 
   render() {
@@ -135,7 +136,7 @@ export default class OrderView extends Component {
     const item = params.item ? EditableItems[params.item] : null;
 
     return <Layout
-      breadcrumb={[{label: "Orders", href: "/orders"}, {label: formatId(params.id), href: `/orders/${params.id}`}]}
+      breadcrumb={[{label: "Orders", href: "/orders"}, {label: order ? order.invoice_number : formatId(params.id), href: `/orders/${params.id}`}]}
       onLink={onLink}
     >
       <ErrorMessage error={error}/>
@@ -145,7 +146,7 @@ export default class OrderView extends Component {
           <Grid.Column>
             <Segment loading={loading}>
               <Header as="h2" dividing>
-                Order Details
+                Order #<b>{order && order.invoice_number}</b>
                 <Header.Subheader>
                   {params.id}
                 </Header.Subheader>
@@ -178,14 +179,17 @@ export default class OrderView extends Component {
                     />
                   </Grid.Column>
 
-                  <Grid.Column>
-                    <Address
-                        title="Shipping Details"
-                        address={order && order.shipping_address}
-                        href={`/orders/${params.id}/shipping_address`}
-                        onLink={onLink}
-                    />
-                  </Grid.Column>
+
+                    <Grid.Column>
+                      {requiresShipping(order) && (
+                        <Address
+                          title="Shipping Details"
+                          address={order && order.shipping_address}
+                          href={`/orders/${params.id}/shipping_address`}
+                          onLink={onLink}
+                        />
+                      )}
+                    </Grid.Column>
 
                 </Grid.Row>
               </Grid>}
@@ -262,8 +266,8 @@ export default class OrderView extends Component {
               <Header as="h2">
                 Billing Status
                 <Header.Subheader>
-                  {order && order.payment_state}
-                  {order && order.payment_state === 'paid' && <a href="#" onClick={this.handleReceipt}> receipt</a>}
+                  <b>{order && order.payment_state.toUpperCase()}</b>
+                  {order && order.payment_state === 'paid' && <p><a href="#" onClick={this.handleReceipt}>Show receipt</a></p>}
                 </Header.Subheader>
               </Header>
 
@@ -282,23 +286,26 @@ export default class OrderView extends Component {
               </List>}
             </Segment>
 
-            <Segment>
-              <Header as="h2">
-                Shipping Status
-                <Header.Subheader>Shipping to {order && order.shipping_address && order.shipping_address.country}</Header.Subheader>
-              </Header>
+            {false && requiresShipping(order) && (
+              <Segment>
+                <Header as="h2">
+                  Shipping Status
+                  <Header.Subheader>Shipping to {order && order.shipping_address && order.shipping_address.country}</Header.Subheader>
+                </Header>
+
+                <Form onSubmit={this.handleShippingUpdate}>
+                  <Form.Group>
+                    <Form.Select
+                      options={[{value: "pending", text: "Pending"}, {value: "shipped", text: "shipped"}]}
+                      value={newFullfilementState ? newFullfilementState : order && order.fulfillment_state}
+                      onChange={this.handleChangeShippingState}
+                    />
+                  </Form.Group>
+                  {order && newFullfilementState && newFullfilementState !== order.fulfillment_state && <Button type="submit">Update</Button>}
+                </Form>
+              </Segment>
+            )}
 
-              <Form onSubmit={this.handleShippingUpdate}>
-                <Form.Group>
-                  <Form.Select
-                    options={[{value: "pending", text: "Pending"}, {value: "shipped", text: "shipped"}]}
-                    value={newFullfilementState ? newFullfilementState : order && order.fulfillment_state}
-                    onChange={this.handleChangeShippingState}
-                  />
-                </Form.Group>
-                {order && newFullfilementState && newFullfilementState !== order.fulfillment_state && <Button type="submit">Update</Button>}
-              </Form>
-            </Segment>
           </Grid.Column>
         </Grid.Row>
       </Grid>

src/Components/Orders/index.js

@@ -2,14 +2,18 @@
 import type {Commerce, Pagination, Order, Address} from '../../Types';
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {Button, Checkbox, Grid, Dimmer, Dropdown, Loader, Table, Input, Select} from 'semantic-ui-react';
+import {Button, Checkbox, Grid, Dimmer, Dropdown, Loader, Table, Icon, Header, Input, Select, Modal} from 'semantic-ui-react';
 import Layout from '../Layout';
 import PaginationView, {pageFromURL} from '../Pagination';
 import ErrorMessage from '../Messages/Error';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
 import countries from '../../data/countries.json';
 import 'csvexport/dist/Export.min';
 import './Orders.css';
+import { defaultRanges, Calendar, DateRange } from 'react-date-range'
+import moment from 'moment'
+
+import { requiresShipping, formatDateInterval } from '../../helpers'
 
 
 const STORED_FIELDS_KEY = 'commerce.admin.orderFields';
@@ -32,11 +36,20 @@ function formatLineItems(order: Order, csv: boolean) {
 </span>)
 }
 
+function formatName(order: Order, csv: boolean) {
+
+  return _.get(order, 'billing_address.name') || _.get(order, 'shipping_address.name')
+}
+
 function formatLineItemTypes(order: Order, csv: boolean) {
   let types = [];
 
   (order.line_items || []).map(item => !types.includes(item.type) && types.push(item.type))
 
+  if (csv) {
+    return types.map(t => `${t}`).join(', ').replace(/,\s*$/, '')
+  }
+
   return types.map(t => <div key={t}>{t}</div>)
 }
 
@@ -80,33 +93,35 @@ function formatDateField(field: 'created_at' | 'updated_at') {
 }
 
 const fields = {
-  ID: {},
+  ID: { fn: (order) => order.invoice_number },
   Email: {sort: "email"},
   Items: {fn: formatLineItems},
+  Name: {fn: formatName},
   Type: {fn: formatLineItemTypes},
   "Shipping Address": {fn: formatAddress("shipping_address")},
   "Shipping Country": {fn: (order) => order.shipping_address.country},
   "Billing Address": {fn: formatAddress("billing_address")},
   "Billing Country": {fn: (order) => order.billing_address.country},
   Taxes: {sort: "taxes", fn: formatPriceField("taxes")},
   Subtotal: {sort: "subtotal", fn: formatPriceField("subtotal")},
-  "Shipping State": {fn: (order) => order.fulfillment_state},
+  "Shipping State": {fn: (order) => requiresShipping(order) ? order.fulfillment_state : null},
   "Payment State": {},
   Total: {sort: "total", fn: formatPriceField("total")},
   "Created At": {sort: "created_at", fn: formatDateField("created_at")},
   "Updated At": {sort: "updated_at", fn: formatDateField("updated_at")}
 };
 
 const enabledFields = {
-  ID: false,
+  ID: true,
   Items: true,
   Type: true,
+  Name: true,
   Email: true,
   "Shipping Address": false,
   "Shipping Country": false,
   "Billing Address": false,
   "Billing Country": false,
-  "Shipping State": true,
+  //"Shipping State": false,
   "Payment State": true,
   Taxes: false,
   Subtotal: false,
@@ -141,7 +156,6 @@ class OrderDetail extends Component {
 
   render() {
     const {order, enabledFields} = this.props;
-
     return <Table.Row className="tr-clickable">
         <Table.Cell key="checkbox" onClick={this.handleToggle}>
           <Checkbox checked={!!order.selected}/>
@@ -190,7 +204,7 @@ export default class Orders extends Component {
       error: null,
       filters: [],
       page: pageFromURL(),
-      enabledFields: storedFields ? JSON.parse(storedFields) : Object.assign({}, enabledFields),
+      enabledFields: Object.assign({}, enabledFields, storedFields ? JSON.parse(storedFields) : {}),
       tax: false,
       shippingCountries: null,
       orders: null,
@@ -267,7 +281,7 @@ export default class Orders extends Component {
                 const addr = formatField(field, order);
                 console.log(addr, field, order)
                 addressFields.forEach((field) => {
-                  formattedOrder[`${match[1]} ${field}`] = addr[field];
+                  formattedOrder[`${match[1]} ${field}`] = (field === 'zip') ? `="${addr[field]}"` : addr[field];
                 })
               } else {
                 formattedOrder[field] = fields[field].fn ? fields[field].fn(order, true) : formatField(field, order);
@@ -344,15 +358,23 @@ export default class Orders extends Component {
       });
   }
 
-  orderQuery(page: ?number) {
-    const query: Object = {
+  orderQuery(page: ?number, per_page: ?number) {
+    const { startDate, endDate } = this.state
+    let query: Object = {
       user_id: "all",
-      per_page: PER_PAGE,
-      page: page || this.state.page
+      per_page: per_page || PER_PAGE,
+      page: page || this.state.page,
+      payment_state: 'paid',
     };
     this.state.filters.forEach((filter) => {
       query[filter] = OrdersFilters[filter](this.state);
     });
+
+    if (startDate && endDate) {
+      query.from = startDate.unix()
+      query.to = endDate.unix()
+    }
+
     return query;
   }
 
@@ -362,7 +384,7 @@ export default class Orders extends Component {
       return Promise.resolve(selected);
     }
 
-    return this.props.commerce.orderHistory(this.orderQuery(page || 1))
+    return this.props.commerce.orderHistory(this.orderQuery(page || 1, 1000))
       .then(({orders, pagination}) => (
         pagination.last === pagination.current ? orders : this.downloadAll(pagination.next).then(o => orders.concat(o))
       ));
@@ -403,21 +425,57 @@ export default class Orders extends Component {
   handleReceipts = (e: SyntheticEvent) => {
     e.preventDefault();
 
-    const {commerce} = this.props;
     const {orders} = this.state;
-    const openWindow = window.open("about:blank", "Receipts");
+    const selected = (orders || []).filter((o) => o.selected && o.payment_state === 'paid')
+    let user = localStorage.getItem('netlify.auth.user')
 
-    Promise.all((orders || []).filter((o) => o.selected && o.payment_state === 'paid').map((order) => commerce.orderReceipt(order.id)))
-      .then((receipts) => {
-        openWindow.document.body.innerHTML = receipts.map((data) => data.data).join("<div class='page-break'></div>");
-      });
+    console.log(selected.length)
+    user = JSON.parse(user)
+    selected.forEach((order, i) =>  {
+      setTimeout(() => window.open(`https://smashingmagazine.com/receipts/?id=${order.id}&jwt=${user.jwt_token}`, `Receipt ${i + 1}`), i * 100)
+    })
   }
 
+  handleDatePicker = (isReset, isApply) => this.setState({
+    openDatePicker: !this.state.openDatePicker,
+    startDate: !isReset ? this.state.startDate : null,
+    endDate: !isReset ? this.state.endDate : null,
+  }, () => (isReset || isApply) && this.loadOrders())
+
   render() {
     const {onLink} = this.props;
-    const {loading, allSelected, downloading, error, orders, pagination, tax, enabledFields, searchScope, selection} = this.state;
+    const {loading, startDate, endDate, allSelected, openDatePicker, downloading, error, orders, pagination, tax, enabledFields, searchScope, selection} = this.state;
+    const interval = formatDateInterval(startDate, endDate)
+
 
     return <Layout breadcrumb={[{label: "Orders", href: "/orders"}]} onLink={onLink}>
+      <Modal open={openDatePicker}>
+        <Header icon='calendar' content='Select a date range' />
+        <Modal.Content>
+          <DateRange
+            linkedCalendars={ true }
+            ranges={ defaultRanges }
+            startDate={(startDate || moment()).format('DD/MM/YYYY')}
+            endDate={(endDate || moment()).format('DD/MM/YYYY')}
+            onInit={ ({ startDate, endDate }) => this.setState({ startDate, endDate })}
+            onChange={ ({ startDate, endDate }) => this.setState({ startDate, endDate })}
+            theme={{
+              DateRange: { width: 850 },
+              Calendar : { width: 350 },
+              PredefinedRanges : { marginLeft: 10, marginTop: 10 }
+            }}
+          />
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={() => this.handleDatePicker(1)}>
+            <Icon name='remove' /> Reset
+          </Button>
+          <Button color='green' inverted onClick={() => this.handleDatePicker(0, 1)}>
+            <Icon name='checkmark' /> Apply
+          </Button>
+        </Modal.Actions>
+      </Modal>
+
       <Dimmer.Dimmable dimmed={loading}>
         <ErrorMessage error={error}/>
         <Dimmer active={loading}>
@@ -440,6 +498,12 @@ export default class Orders extends Component {
           <Grid.Row columns={2}>
             <Grid.Column>
 
+              <Button primary={!!interval} loading={downloading} onClick={() => this.handleDatePicker()}>
+                {interval || 'All time'}
+              </Button>
+
+
+
               <Button toggle active={tax} onClick={this.handleTax}>
                 Includes Tax
               </Button>