From 072bc76a05e885a24fc7817751480f03d79e218a Mon Sep 17 00:00:00 2001
From: Erik Kieckhafer <ek@ato.la>
Date: Wed, 26 Jun 2019 19:12:43 -0700
Subject: [PATCH 1/5] update styling of orderCard header section, move details
 to sidebar

Signed-off-by: Erik Kieckhafer <ek@ato.la>
---
 .../components/OrderCardCustomerDetails.js    |  78 +++++++++
 .../client/components/OrderCardSidebar.js     | 143 ++++++++++++++++
 .../orders/client/components/orderCard.js     | 161 +++++++++++++++++-
 .../client/components/orderCardHeader.js      | 128 +++-----------
 .../client/components/orderCardStatusChip.js  |  60 ++++++-
 .../client/components/orderCardSummary.js     | 108 ++++++------
 6 files changed, 506 insertions(+), 172 deletions(-)
 create mode 100644 imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
 create mode 100644 imports/plugins/core/orders/client/components/OrderCardSidebar.js

diff --git a/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js b/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
new file mode 100644
index 00000000000..12e496504be
--- /dev/null
+++ b/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
@@ -0,0 +1,78 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Address from "@reactioncommerce/components/Address/v1";
+import { withMoment } from "@reactioncommerce/reaction-components";
+
+
+const styles = (theme) => ({
+  orderCardInfoTextSemiBold: {
+    fontWeight: theme.typography.fontWeightSemiBold
+  },
+  orderCardInfoTextBold: {
+    fontWeight: theme.typography.fontWeightBold
+  },
+  printButton: {
+    flex: 1,
+    justifyContent: "flex-end",
+    display: "flex"
+  }
+});
+
+class OrderCardCustomerDetails extends Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    moment: PropTypes.func,
+    order: PropTypes.shape({
+      createdAt: PropTypes.string,
+      displayStatus: PropTypes.string,
+      email: PropTypes.string,
+      fulfillmentGroups: PropTypes.array,
+      payments: PropTypes.array,
+      referenceId: PropTypes.string,
+      status: PropTypes.string
+    })
+  };
+
+  render() {
+    const { classes, order } = this.props;
+    const { email, fulfillmentGroups } = order;
+    const { shippingAddress } = fulfillmentGroups[0].data;
+
+    return (
+      <Grid container spacing={16}>
+        <Grid item xs={12}>
+          <Grid container spacing={24}>
+            <Grid item xs={12} md={12}>
+              <Card>
+                <CardContent>
+                  <Grid container spacing={24}>
+                    <Grid item xs={12} md={12}>
+                      <Typography variant="body2" className={classes.orderCardInfoTextSemiBold}>
+                        Shipping address
+                      </Typography>
+                      <Address address={shippingAddress} />
+                    </Grid>
+                    <Grid item xs={12} md={12}>
+                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
+                        Contact information
+                      </Typography>
+                      <Typography variant="body2">{email}</Typography>
+                      <Typography variant="body2">{shippingAddress.phone}</Typography>
+                    </Grid>
+                  </Grid>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+export default withMoment(withStyles(styles, { name: "RuiOrderCardCustomerDetails" })(OrderCardCustomerDetails));
diff --git a/imports/plugins/core/orders/client/components/OrderCardSidebar.js b/imports/plugins/core/orders/client/components/OrderCardSidebar.js
new file mode 100644
index 00000000000..ab1c02bf8da
--- /dev/null
+++ b/imports/plugins/core/orders/client/components/OrderCardSidebar.js
@@ -0,0 +1,143 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import withStyles from "@material-ui/core/styles/withStyles";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardContent from "@material-ui/core/CardContent";
+import Grid from "@material-ui/core/Grid";
+import Link from "@material-ui/core/Link";
+import Typography from "@material-ui/core/Typography";
+import Address from "@reactioncommerce/components/Address/v1";
+import { withMoment } from "@reactioncommerce/reaction-components";
+import { ClickToCopy } from "@reactioncommerce/reaction-ui";
+import { i18next, Reaction } from "/client/api";
+import OrderCardStatusChip from "./orderCardStatusChip";
+
+
+const styles = (theme) => ({
+  orderCardInfoTextSemiBold: {
+    fontWeight: theme.typography.fontWeightSemiBold
+  },
+  orderCardInfoTextBold: {
+    fontWeight: theme.typography.fontWeightBold
+  },
+  printButton: {
+    flex: 1,
+    justifyContent: "flex-end",
+    display: "flex"
+  }
+});
+
+class OrderCardHeader extends Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    moment: PropTypes.func,
+    order: PropTypes.shape({
+      createdAt: PropTypes.string,
+      displayStatus: PropTypes.string,
+      email: PropTypes.string,
+      fulfillmentGroups: PropTypes.array,
+      payments: PropTypes.array,
+      referenceId: PropTypes.string,
+      status: PropTypes.string
+    })
+  };
+
+  orderLink() {
+    const { order: { referenceId } } = this.props;
+    return `${window.location.origin}/operator/orders/${referenceId}`;
+  }
+
+  printLink() {
+    const { order } = this.props;
+
+    return Reaction.Router.pathFor("dashboard/pdf/orders", {
+      hash: {
+        id: order.referenceId
+      }
+    });
+  }
+
+  renderOrderShipments() {
+    const { order: { fulfillmentGroups } } = this.props;
+
+    if (Array.isArray(fulfillmentGroups) && fulfillmentGroups.length) {
+      return fulfillmentGroups.map((fulfillmentGroup) => <Typography key={fulfillmentGroup._id} variant="body2">{fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}</Typography>); // eslint-disable-line
+    }
+
+    return null;
+  }
+
+  renderPaymentStatusChip() {
+    const { order } = this.props;
+    const { payments } = order;
+    const paymentStatuses = payments.map((payment) => payment.status);
+    const uniqueStatuses = [...new Set(paymentStatuses)];
+
+    // If all payment statuses are equal, and also not "created", then show a single badge
+    if (Array.isArray(uniqueStatuses) && uniqueStatuses.length === 1) {
+      const [paymentStatus] = uniqueStatuses;
+
+      // No action has been taken on any payments, no need to show a status badge
+      // since we show the button to take action
+      if (paymentStatus === "created") {
+        return null;
+      }
+
+      // An action has been taken on payment, and all payment statuses are the same
+      // show a single badge with the status of all payments
+      return (
+        <Grid item>
+          <OrderCardStatusChip displayStatus={paymentStatus} status={paymentStatus} type="payment" />
+        </Grid>
+      );
+    }
+
+    // Payment statuses aren't equal, show an error badge here
+    // and show badges next to payments to represent their status
+    return (
+      <Grid item>
+        <OrderCardStatusChip displayStatus="Multiple statuses" status="multiple" type="payment" />
+      </Grid>
+    );
+  }
+
+  render() {
+    const { classes, moment, order } = this.props;
+    const { createdAt, displayStatus, email, fulfillmentGroups, payments, referenceId, status } = order;
+    const { shippingAddress } = fulfillmentGroups[0].data;
+    const orderDate = (moment && moment(createdAt).format("MM/DD/YYYY")) || createdAt.toLocaleString();
+
+    return (
+      <Grid container spacing={16}>
+        <Grid item xs={12}>
+          <Grid container spacing={24}>
+            <Grid item xs={12} md={12}>
+              <Card>
+                <CardContent>
+                  <Grid container spacing={24}>
+                    <Grid item xs={12} md={12}>
+                      <Typography variant="body2" className={classes.orderCardInfoTextSemiBold}>
+                        Shipping address
+                      </Typography>
+                      <Address address={shippingAddress} />
+                    </Grid>
+                    <Grid item xs={12} md={12}>
+                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
+                        Contact information
+                      </Typography>
+                      <Typography variant="body2">{email}</Typography>
+                      <Typography variant="body2">{shippingAddress.phone}</Typography>
+                    </Grid>
+                  </Grid>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+    );
+  }
+}
+
+export default withMoment(withStyles(styles, { name: "OrderCardHeader" })(OrderCardHeader));
diff --git a/imports/plugins/core/orders/client/components/orderCard.js b/imports/plugins/core/orders/client/components/orderCard.js
index c6ade143d46..eaa1ba6767f 100644
--- a/imports/plugins/core/orders/client/components/orderCard.js
+++ b/imports/plugins/core/orders/client/components/orderCard.js
@@ -2,10 +2,14 @@ import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import Helmet from "react-helmet";
 import Grid from "@material-ui/core/Grid";
+import { Blocks } from "@reactioncommerce/reaction-components";
+import { i18next } from "/client/api";
+import DetailDrawer from "/imports/client/ui/components/DetailDrawer";
 import OrderCardAppBar from "./orderCardAppBar";
 import OrderCardFulfillmentGroup from "./orderCardFulfillmentGroup";
 import OrderCardHeader from "./orderCardHeader";
 import OrderCardPayments from "./orderCardPayments";
+import OrderCardCustomerDetails from "./OrderCardCustomerDetails";
 import OrderCardSummary from "./orderCardSummary";
 
 
@@ -40,6 +44,22 @@ class OrderCard extends Component {
     return <OrderCardPayments order={order} />;
   }
 
+  renderSidebar() {
+    const { order } = this.props;
+
+    return (
+      <Grid container spacing={8}>
+        <Grid item xs={12}>
+          {this.renderSummary()}
+          <Blocks region="OrderCardSummary" blockProps={{ order, ...this.props }} />
+        </Grid>
+        <Grid item xs={12}>
+          <OrderCardCustomerDetails order={order} />
+        </Grid>
+      </Grid>
+    );
+  }
+
   renderSummary() {
     const { order } = this.props;
 
@@ -62,18 +82,151 @@ class OrderCard extends Component {
           </Grid>
           <Grid item xs={12}>
             <Grid container spacing={24}>
-              <Grid item xs={12} md={6}>
-                {this.renderSummary()}
-              </Grid>
-              <Grid item xs={12} md={6}>
+              <Grid item xs={12} md={12}>
                 {this.renderPayments()}
               </Grid>
             </Grid>
           </Grid>
         </Grid>
+        <DetailDrawer title={i18next.t("orderCard.orderSummary.title", "Order summary")}>
+          {this.renderSidebar()}
+        </DetailDrawer>
       </Fragment>
     );
   }
 }
 
 export default OrderCard;
+
+
+
+// class OrderCard extends Component {
+//   static propTypes = {
+//     order: PropTypes.object
+//   };
+
+//   state = {
+//     currentTab: 0
+//   }
+
+//   handleTabChange = (event, value) => {
+//     this.setState({ currentTab: value });
+//   };
+
+//   renderAppBar() {
+//     const { order } = this.props;
+
+//     return <OrderCardAppBar order={order} {...this.props} />;
+//   }
+
+//   renderHeader() {
+//     const { order } = this.props;
+
+//     return <OrderCardHeader order={order} />;
+//   }
+
+//   renderFulfillmentGroups() {
+//     const { order } = this.props;
+
+//     return <OrderCardFulfillmentGroup order={order} {...this.props} />;
+//   }
+
+//   renderPayments() {
+//     const { order } = this.props;
+
+//     return <OrderCardPayments order={order} {...this.props} />;
+//   }
+
+//   renderTabs() {
+//     const { currentTab } = this.state;
+
+//     return (
+//       <Fragment>
+//         <Tabs value={currentTab} onChange={this.handleTabChange}>
+//           <Tab label={i18next.t("fulfillment", "Fulfillment")} />
+//           <Tab label={i18next.t("refunds", "Refunds")} />
+//         </Tabs>
+//         <Divider />
+//       </Fragment>
+//     );
+//   }
+
+//   renderFulfillment() {
+//     const { currentTab } = this.state;
+
+//     if (currentTab === 0) {
+//       return (
+//         <Fragment>
+//           <Grid item xs={12}>
+//             {this.renderFulfillmentGroups()}
+//           </Grid>
+//           <Grid item xs={12}>
+//             {this.renderPayments()}
+//           </Grid>
+//         </Fragment>
+//       );
+//     }
+
+//     return null;
+//   }
+
+//   renderRefunds() {
+//     const { currentTab } = this.state;
+
+//     if (currentTab === 1) {
+//       return (
+//         <Fragment>
+//           <Grid item xs={12}>
+//             [Placeholder] Refunds will go here
+//           </Grid>
+//         </Fragment>
+//       );
+//     }
+
+//     return null;
+//   }
+
+//   renderSidebar() {
+//     const { order } = this.props;
+
+//     return (
+//       <Grid container spacing={8}>
+//         <Grid item xs={12}>
+//           <Blocks region="OrderCardSummary" blockProps={{ order, ...this.props }} />
+//         </Grid>
+//         <Grid item xs={12}>
+//           <OrderCardCustomerDetails order={order} />
+//         </Grid>
+//       </Grid>
+//     );
+//   }
+
+//   render() {
+//     const { order } = this.props;
+//     const { currentTab } = this.state;
+
+//     return (
+//       <Fragment>
+//         <Helmet title={`Order Details for order reference #${order.referenceId}`} />
+//         {this.renderAppBar()}
+//         <Grid container spacing={24}>
+//           <Grid item xs={12}>
+//             {this.renderHeader()}
+//           </Grid>
+//           <Grid item xs={12}>
+//             {this.renderTabs()}
+//           </Grid>
+//           {currentTab === 0 &&
+//             this.renderFulfillment()
+//           }
+//           {currentTab === 1 &&
+//             this.renderRefunds()
+//           }
+//         </Grid>
+//         <DetailDrawer title={i18next.t("orderCard.orderSummary.title", "Order summary")}>
+//           {this.renderSidebar()}
+//         </DetailDrawer>
+//       </Fragment>
+//     );
+//   }
+// }
diff --git a/imports/plugins/core/orders/client/components/orderCardHeader.js b/imports/plugins/core/orders/client/components/orderCardHeader.js
index 853041bbf35..2e433f906ae 100644
--- a/imports/plugins/core/orders/client/components/orderCardHeader.js
+++ b/imports/plugins/core/orders/client/components/orderCardHeader.js
@@ -2,25 +2,17 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import Button from "@material-ui/core/Button";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import Address from "@reactioncommerce/components/Address/v1";
 import { withMoment } from "@reactioncommerce/reaction-components";
-import { ClickToCopy } from "@reactioncommerce/reaction-ui";
 import { i18next, Reaction } from "/client/api";
+import DetailDrawerButton from "/imports/client/ui/components/DetailDrawerButton";
 import OrderCardStatusChip from "./orderCardStatusChip";
 
 
 const styles = (theme) => ({
-  orderCardInfoTextBold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  printButton: {
-    flex: 1,
-    justifyContent: "flex-end",
-    display: "flex"
+  fontWeightSemiBold: {
+    fontWeight: theme.typography.fontWeightSemiBold
   }
 });
 
@@ -31,20 +23,12 @@ class OrderCardHeader extends Component {
     order: PropTypes.shape({
       createdAt: PropTypes.string,
       displayStatus: PropTypes.string,
-      email: PropTypes.string,
-      fulfillmentGroups: PropTypes.array,
-      payments: PropTypes.array,
       referenceId: PropTypes.string,
       status: PropTypes.string
     })
   };
 
-  orderLink() {
-    const { order: { referenceId } } = this.props;
-    return `${window.location.origin}/operator/orders/${referenceId}`;
-  }
-
-  printLink() {
+  handleClickPrintLink() {
     const { order } = this.props;
 
     return Reaction.Router.pathFor("dashboard/pdf/orders", {
@@ -54,35 +38,13 @@ class OrderCardHeader extends Component {
     });
   }
 
-  renderOrderPayments() {
-    const { order: { payments } } = this.props;
-
-    // If more than one payment method, display amount for each
-    if (Array.isArray(payments) && payments.length > 1) {
-      return payments.map((payment) => <Typography key={payment._id} variant="body2">{payment.displayName} {payment.amount.displayAmount}</Typography>);
-    }
-
-    // If only one payment method, do not display amount
-    return payments.map((payment) => <Typography key={payment._id} variant="body2">{payment.displayName}</Typography>);
-  }
-
-  renderOrderShipments() {
-    const { order: { fulfillmentGroups } } = this.props;
-
-    if (Array.isArray(fulfillmentGroups) && fulfillmentGroups.length) {
-      return fulfillmentGroups.map((fulfillmentGroup) => <Typography key={fulfillmentGroup._id} variant="body2">{fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}</Typography>); // eslint-disable-line
-    }
-
-    return null;
-  }
-
   renderPaymentStatusChip() {
     const { order } = this.props;
     const { payments } = order;
     const paymentStatuses = payments.map((payment) => payment.status);
     const uniqueStatuses = [...new Set(paymentStatuses)];
 
-    // If all payment statuses are equal, and also not "new", then show a single badge
+    // If all payment statuses are equal, and also not "created", then show a single badge
     if (Array.isArray(uniqueStatuses) && uniqueStatuses.length === 1) {
       const [paymentStatus] = uniqueStatuses;
 
@@ -105,92 +67,48 @@ class OrderCardHeader extends Component {
     // and show badges next to payments to represent their status
     return (
       <Grid item>
-        <OrderCardStatusChip displayStatus="multiple" status="multiple" type="payment" />
+        <OrderCardStatusChip displayStatus={i18next.t("data.status.multipleStatuses", "Multiple statuses")} status="multiple" type="payment" />
       </Grid>
     );
   }
 
   render() {
     const { classes, moment, order } = this.props;
-    const { createdAt, displayStatus, email, fulfillmentGroups, payments, referenceId, status } = order;
-    const { shippingAddress } = fulfillmentGroups[0].data;
+    const { createdAt, displayStatus, referenceId, status } = order;
     const orderDate = (moment && moment(createdAt).format("MM/DD/YYYY")) || createdAt.toLocaleString();
 
     return (
-      <Grid container spacing={32}>
+      <Grid container spacing={8}>
         <Grid item xs={12}>
-          <Grid container alignItems="center" spacing={8}>
+          <Grid container alignItems="center" spacing={16}>
             <Grid item>
-              <Typography variant="body2" className={classes.orderCardInfoTextBold} inline={true}>
-                Order&nbsp;
-                <ClickToCopy
-                  copyToClipboard={this.orderLink()}
-                  displayText={referenceId}
-                  i18nKeyTooltip="admin.orderWorkflow.summary.copyOrderLink"
-                  tooltip="Copy Order Link"
-                />
+              <Typography variant="h3" className={classes.fontWeightSemiBold} inline={true}>
+                {i18next.t("order.order", "Order")} - {referenceId}
               </Typography>
-              <Typography variant="body2" inline={true}> | {orderDate}</Typography>
             </Grid>
             <Grid item>
               <OrderCardStatusChip displayStatus={displayStatus} status={status} type="order" />
             </Grid>
             {this.renderPaymentStatusChip()}
-            <Grid item className={classes.printButton}>
-              <a href={this.printLink()} target="_blank">
-                <Button size="small" variant="outlined">{i18next.t("admin.invoice.printInvoice", "Print invoice")}</Button>
-              </a>
+            <Grid item>
+              <Button
+                href={this.handleClickPrintLink()}
+                variant="text"
+              >
+                {i18next.t("admin.orderWorkflow.invoice.printInvoice", "Print invoice")}
+              </Button>
+            </Grid>
+            <Grid item>
+              <DetailDrawerButton color="primary" size="small" variant="outlined">{i18next.t("orderCard.orderSummary.showOrderSummary", "Show order summary")}</DetailDrawerButton>
             </Grid>
           </Grid>
         </Grid>
         <Grid item xs={12}>
-          <Grid container spacing={24}>
-            <Grid item xs={12} md={6}>
-              <Card>
-                <CardContent>
-                  <Grid container spacing={24}>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                        Shipping address
-                      </Typography>
-                      <Address address={shippingAddress} />
-                    </Grid>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                        Contact information
-                      </Typography>
-                      <Typography variant="body2">{email}</Typography>
-                      <Typography variant="body2">{shippingAddress.phone}</Typography>
-                    </Grid>
-                  </Grid>
-                </CardContent>
-              </Card>
-            </Grid>
-            <Grid item xs={12} md={6}>
-              <Card>
-                <CardContent>
-                  <Grid container spacing={24}>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                      Shipping method{fulfillmentGroups.length !== 1 ? "s" : null}
-                      </Typography>
-                      {this.renderOrderShipments()}
-                    </Grid>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                      Payment method{payments.length !== 1 ? "s" : null}
-                      </Typography>
-                      {this.renderOrderPayments()}
-                    </Grid>
-                  </Grid>
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
+          <Typography variant="body1" inline={true}>{i18next.t("order.placed", "Placed")} {orderDate}</Typography>
         </Grid>
       </Grid>
     );
   }
 }
 
-export default withMoment(withStyles(styles, { name: "OrderCardHeader" })(OrderCardHeader));
+export default withMoment(withStyles(styles, { name: "RuiOrderCardHeader" })(OrderCardHeader));
diff --git a/imports/plugins/core/orders/client/components/orderCardStatusChip.js b/imports/plugins/core/orders/client/components/orderCardStatusChip.js
index ba5902f1a39..743f04cc7d9 100644
--- a/imports/plugins/core/orders/client/components/orderCardStatusChip.js
+++ b/imports/plugins/core/orders/client/components/orderCardStatusChip.js
@@ -15,6 +15,10 @@ const styles = (theme) => ({
     color: "white",
     fontWeight: "800"
   },
+  orderStatusCanceledOutlined: {
+    borderColor: theme.palette.colors.red300,
+    color: theme.palette.colors.red300
+  },
   orderStatusProcessing: {
     backgroundColor: theme.palette.colors.reactionBlue300,
     color: "white",
@@ -24,6 +28,12 @@ const styles = (theme) => ({
     backgroundColor: theme.palette.colors.reactionBlue,
     color: "white",
     fontWeight: "800"
+  },
+  paymentStatusMultiple: {
+    borderColor: theme.palette.colors.red
+  },
+  shipmentStatus: {
+    borderColor: theme.palette.colors.red
   }
 });
 
@@ -31,13 +41,14 @@ class OrderCardStatusChip extends Component {
   static propTypes = {
     classes: PropTypes.object,
     displayStatus: PropTypes.string,
-    status: PropTypes.string
+    status: PropTypes.string,
+    type: PropTypes.string
   };
 
-  render() {
+  orderStatus() {
     const { classes, displayStatus, status } = this.props;
-
     let chipClasses;
+
     if (status === "coreOrderWorkflow/canceled") {
       chipClasses = classes.orderStatusCanceled;
     }
@@ -54,11 +65,44 @@ class OrderCardStatusChip extends Component {
       chipClasses = classes.orderStatusShipped;
     }
 
-    return (
-      // TODO: EK - add translations here for status
-      <Chip label={displayStatus} className={chipClasses} />
-    );
+    return <Chip label={displayStatus} className={chipClasses} color="primary" />;
+  }
+
+  paymentStatus() {
+    const { displayStatus } = this.props;
+    let chipClasses;
+
+    return <Chip label={displayStatus} className={chipClasses} color="primary" variant="outlined" />;
+  }
+
+  shipmentStatus() {
+    const { classes, displayStatus, status } = this.props;
+    let chipClasses;
+
+    if (status === "coreOrderWorkflow/canceled") {
+      chipClasses = classes.orderStatusCanceledOutlined;
+    }
+
+    return <Chip label={displayStatus} className={chipClasses} color="primary" variant="outlined" />;
+  }
+
+  render() {
+    const { type } = this.props;
+
+    if (type === "order") {
+      return this.orderStatus();
+    }
+
+    if (type === "payment") {
+      return this.paymentStatus();
+    }
+
+    if (type === "shipment") {
+      return this.shipmentStatus();
+    }
+
+    return null;
   }
 }
 
-export default withStyles(styles, { name: "OrderCardStatusChip" })(OrderCardStatusChip);
+export default withStyles(styles, { name: "RuiOrderCardStatusChip" })(OrderCardStatusChip);
diff --git a/imports/plugins/core/orders/client/components/orderCardSummary.js b/imports/plugins/core/orders/client/components/orderCardSummary.js
index d005210a7cd..6466a6b3957 100644
--- a/imports/plugins/core/orders/client/components/orderCardSummary.js
+++ b/imports/plugins/core/orders/client/components/orderCardSummary.js
@@ -1,68 +1,66 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import CardHeader from "@material-ui/core/CardHeader";
 import CartSummary from "@reactioncommerce/components/CartSummary/v1";
 
 
-class OrderCardSummary extends Component {
-  static propTypes = {
-    order: PropTypes.shape({
-      summary: PropTypes.shape({
-        fulfillmentTotal: PropTypes.shape({
-          displayAmount: PropTypes.string
-        }),
-        itemTotal: PropTypes.shape({
-          displayAmount: PropTypes.string
-        }),
-        surchargeTotal: PropTypes.shape({
-          displayAmount: PropTypes.string
-        }),
-        taxTotal: PropTypes.shape({
-          displayAmount: PropTypes.string
-        }),
-        total: PropTypes.shape({
-          displayAmount: PropTypes.string
-        })
-      })
-    })
-  }
+/**
+ * @name OrderCardSummary
+ * @params {Object} props Component props
+ * @returns {React.Component} returns a React component
+ */
+function OrderCardSummary({ order }) {
+  const { summary } = order;
 
-  render() {
-    const { order } = this.props;
-    const { summary } = order;
+  if (summary) {
+    const {
+      fulfillmentTotal,
+      itemTotal,
+      surchargeTotal,
+      taxTotal,
+      total
+    } = summary;
 
-    if (summary) {
-      const {
-        fulfillmentTotal,
-        itemTotal,
-        surchargeTotal,
-        taxTotal,
-        total
-      } = summary;
-
-      return (
-        <Card>
-          <CardHeader
-            title="Order Summary"
+    return (
+      <Card>
+        <CardContent>
+          <CartSummary
+            isDense
+            displayShipping={fulfillmentTotal && fulfillmentTotal.displayAmount}
+            displaySubtotal={itemTotal && itemTotal.displayAmount}
+            displaySurcharge={surchargeTotal && surchargeTotal.displayAmount}
+            displayTax={taxTotal && taxTotal.displayAmount}
+            displayTotal={total && total.displayAmount}
           />
-          <CardContent>
-            <CartSummary
-              isDense
-              displayShipping={fulfillmentTotal && fulfillmentTotal.displayAmount}
-              displaySubtotal={itemTotal && itemTotal.displayAmount}
-              displaySurcharge={surchargeTotal && surchargeTotal.displayAmount}
-              displayTax={taxTotal && taxTotal.displayAmount}
-              displayTotal={total && total.displayAmount}
-            />
-          </CardContent>
-        </Card>
-      );
-    }
-
-    return null;
+        </CardContent>
+      </Card>
+    );
   }
+
+  return null;
 }
 
+OrderCardSummary.propTypes = {
+  order: PropTypes.shape({
+    summary: PropTypes.shape({
+      fulfillmentTotal: PropTypes.shape({
+        displayAmount: PropTypes.string
+      }),
+      itemTotal: PropTypes.shape({
+        displayAmount: PropTypes.string
+      }),
+      surchargeTotal: PropTypes.shape({
+        displayAmount: PropTypes.string
+      }),
+      taxTotal: PropTypes.shape({
+        displayAmount: PropTypes.string
+      }),
+      total: PropTypes.shape({
+        displayAmount: PropTypes.string
+      })
+    })
+  })
+};
+
 export default OrderCardSummary;

From 4abc4a786baa5fdc2f3bfce3166833245f00107d Mon Sep 17 00:00:00 2001
From: Erik Kieckhafer <ek@ato.la>
Date: Wed, 26 Jun 2019 20:34:33 -0700
Subject: [PATCH 2/5] convert class component to functional component

Signed-off-by: Erik Kieckhafer <ek@ato.la>
---
 .../components/OrderCardCustomerDetails.js    | 107 +++++++-----------
 1 file changed, 41 insertions(+), 66 deletions(-)

diff --git a/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js b/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
index 12e496504be..4188462b343 100644
--- a/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
+++ b/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
@@ -1,78 +1,53 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import withStyles from "@material-ui/core/styles/withStyles";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
+import CardHeader from "@material-ui/core/CardHeader";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
-import Address from "@reactioncommerce/components/Address/v1";
-import { withMoment } from "@reactioncommerce/reaction-components";
 
 
-const styles = (theme) => ({
-  orderCardInfoTextSemiBold: {
-    fontWeight: theme.typography.fontWeightSemiBold
-  },
-  orderCardInfoTextBold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  printButton: {
-    flex: 1,
-    justifyContent: "flex-end",
-    display: "flex"
-  }
-});
+/**
+ * @name OrderCardCustomerDetails
+ * @params {Object} props Component props
+ * @returns {React.Component} returns a React component
+ */
+function OrderCardCustomerDetails({ order }) {
+  const { email, fulfillmentGroups } = order;
+  const { shippingAddress: { fullName, phone } } = fulfillmentGroups[0].data;
 
-class OrderCardCustomerDetails extends Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    moment: PropTypes.func,
-    order: PropTypes.shape({
-      createdAt: PropTypes.string,
-      displayStatus: PropTypes.string,
-      email: PropTypes.string,
-      fulfillmentGroups: PropTypes.array,
-      payments: PropTypes.array,
-      referenceId: PropTypes.string,
-      status: PropTypes.string
-    })
-  };
-
-  render() {
-    const { classes, order } = this.props;
-    const { email, fulfillmentGroups } = order;
-    const { shippingAddress } = fulfillmentGroups[0].data;
-
-    return (
-      <Grid container spacing={16}>
-        <Grid item xs={12}>
-          <Grid container spacing={24}>
-            <Grid item xs={12} md={12}>
-              <Card>
-                <CardContent>
-                  <Grid container spacing={24}>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextSemiBold}>
-                        Shipping address
-                      </Typography>
-                      <Address address={shippingAddress} />
-                    </Grid>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                        Contact information
-                      </Typography>
-                      <Typography variant="body2">{email}</Typography>
-                      <Typography variant="body2">{shippingAddress.phone}</Typography>
-                    </Grid>
-                  </Grid>
-                </CardContent>
-              </Card>
-            </Grid>
+  return (
+    <Card>
+      <CardHeader
+        title="Customer information"
+      />
+      <CardContent>
+        <Grid container spacing={24}>
+          <Grid item xs={12} md={12}>
+            <Typography variant="h4">
+              {fullName}
+            </Typography>
+          </Grid>
+          <Grid item xs={12} md={12}>
+            <Typography variant="body1">{email}</Typography>
+            <Typography variant="body1">{phone}</Typography>
           </Grid>
         </Grid>
-      </Grid>
-    );
-  }
+      </CardContent>
+    </Card>
+  );
 }
 
-export default withMoment(withStyles(styles, { name: "RuiOrderCardCustomerDetails" })(OrderCardCustomerDetails));
+OrderCardCustomerDetails.propTypes = {
+  order: PropTypes.shape({
+    email: PropTypes.string,
+    fulfillmentGroups: PropTypes.arrayOf(PropTypes.shape({
+      shippingAddress: PropTypes.shape({
+        fullName: PropTypes.string,
+        phone: PropTypes.string
+      })
+    }))
+  })
+};
+
+export default OrderCardCustomerDetails;

From e06522da0d3d1ae4e387011dd63a0c1b6badbf2b Mon Sep 17 00:00:00 2001
From: Erik Kieckhafer <ek@ato.la>
Date: Wed, 26 Jun 2019 20:36:53 -0700
Subject: [PATCH 3/5] remove unused code

Signed-off-by: Erik Kieckhafer <ek@ato.la>
---
 .../client/components/OrderCardSidebar.js     | 143 ------------------
 .../orders/client/components/orderCard.js     | 133 ----------------
 2 files changed, 276 deletions(-)
 delete mode 100644 imports/plugins/core/orders/client/components/OrderCardSidebar.js

diff --git a/imports/plugins/core/orders/client/components/OrderCardSidebar.js b/imports/plugins/core/orders/client/components/OrderCardSidebar.js
deleted file mode 100644
index ab1c02bf8da..00000000000
--- a/imports/plugins/core/orders/client/components/OrderCardSidebar.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import withStyles from "@material-ui/core/styles/withStyles";
-import Button from "@material-ui/core/Button";
-import Card from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import Grid from "@material-ui/core/Grid";
-import Link from "@material-ui/core/Link";
-import Typography from "@material-ui/core/Typography";
-import Address from "@reactioncommerce/components/Address/v1";
-import { withMoment } from "@reactioncommerce/reaction-components";
-import { ClickToCopy } from "@reactioncommerce/reaction-ui";
-import { i18next, Reaction } from "/client/api";
-import OrderCardStatusChip from "./orderCardStatusChip";
-
-
-const styles = (theme) => ({
-  orderCardInfoTextSemiBold: {
-    fontWeight: theme.typography.fontWeightSemiBold
-  },
-  orderCardInfoTextBold: {
-    fontWeight: theme.typography.fontWeightBold
-  },
-  printButton: {
-    flex: 1,
-    justifyContent: "flex-end",
-    display: "flex"
-  }
-});
-
-class OrderCardHeader extends Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    moment: PropTypes.func,
-    order: PropTypes.shape({
-      createdAt: PropTypes.string,
-      displayStatus: PropTypes.string,
-      email: PropTypes.string,
-      fulfillmentGroups: PropTypes.array,
-      payments: PropTypes.array,
-      referenceId: PropTypes.string,
-      status: PropTypes.string
-    })
-  };
-
-  orderLink() {
-    const { order: { referenceId } } = this.props;
-    return `${window.location.origin}/operator/orders/${referenceId}`;
-  }
-
-  printLink() {
-    const { order } = this.props;
-
-    return Reaction.Router.pathFor("dashboard/pdf/orders", {
-      hash: {
-        id: order.referenceId
-      }
-    });
-  }
-
-  renderOrderShipments() {
-    const { order: { fulfillmentGroups } } = this.props;
-
-    if (Array.isArray(fulfillmentGroups) && fulfillmentGroups.length) {
-      return fulfillmentGroups.map((fulfillmentGroup) => <Typography key={fulfillmentGroup._id} variant="body2">{fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}</Typography>); // eslint-disable-line
-    }
-
-    return null;
-  }
-
-  renderPaymentStatusChip() {
-    const { order } = this.props;
-    const { payments } = order;
-    const paymentStatuses = payments.map((payment) => payment.status);
-    const uniqueStatuses = [...new Set(paymentStatuses)];
-
-    // If all payment statuses are equal, and also not "created", then show a single badge
-    if (Array.isArray(uniqueStatuses) && uniqueStatuses.length === 1) {
-      const [paymentStatus] = uniqueStatuses;
-
-      // No action has been taken on any payments, no need to show a status badge
-      // since we show the button to take action
-      if (paymentStatus === "created") {
-        return null;
-      }
-
-      // An action has been taken on payment, and all payment statuses are the same
-      // show a single badge with the status of all payments
-      return (
-        <Grid item>
-          <OrderCardStatusChip displayStatus={paymentStatus} status={paymentStatus} type="payment" />
-        </Grid>
-      );
-    }
-
-    // Payment statuses aren't equal, show an error badge here
-    // and show badges next to payments to represent their status
-    return (
-      <Grid item>
-        <OrderCardStatusChip displayStatus="Multiple statuses" status="multiple" type="payment" />
-      </Grid>
-    );
-  }
-
-  render() {
-    const { classes, moment, order } = this.props;
-    const { createdAt, displayStatus, email, fulfillmentGroups, payments, referenceId, status } = order;
-    const { shippingAddress } = fulfillmentGroups[0].data;
-    const orderDate = (moment && moment(createdAt).format("MM/DD/YYYY")) || createdAt.toLocaleString();
-
-    return (
-      <Grid container spacing={16}>
-        <Grid item xs={12}>
-          <Grid container spacing={24}>
-            <Grid item xs={12} md={12}>
-              <Card>
-                <CardContent>
-                  <Grid container spacing={24}>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextSemiBold}>
-                        Shipping address
-                      </Typography>
-                      <Address address={shippingAddress} />
-                    </Grid>
-                    <Grid item xs={12} md={12}>
-                      <Typography variant="body2" className={classes.orderCardInfoTextBold}>
-                        Contact information
-                      </Typography>
-                      <Typography variant="body2">{email}</Typography>
-                      <Typography variant="body2">{shippingAddress.phone}</Typography>
-                    </Grid>
-                  </Grid>
-                </CardContent>
-              </Card>
-            </Grid>
-          </Grid>
-        </Grid>
-      </Grid>
-    );
-  }
-}
-
-export default withMoment(withStyles(styles, { name: "OrderCardHeader" })(OrderCardHeader));
diff --git a/imports/plugins/core/orders/client/components/orderCard.js b/imports/plugins/core/orders/client/components/orderCard.js
index eaa1ba6767f..e672f46912e 100644
--- a/imports/plugins/core/orders/client/components/orderCard.js
+++ b/imports/plugins/core/orders/client/components/orderCard.js
@@ -97,136 +97,3 @@ class OrderCard extends Component {
 }
 
 export default OrderCard;
-
-
-
-// class OrderCard extends Component {
-//   static propTypes = {
-//     order: PropTypes.object
-//   };
-
-//   state = {
-//     currentTab: 0
-//   }
-
-//   handleTabChange = (event, value) => {
-//     this.setState({ currentTab: value });
-//   };
-
-//   renderAppBar() {
-//     const { order } = this.props;
-
-//     return <OrderCardAppBar order={order} {...this.props} />;
-//   }
-
-//   renderHeader() {
-//     const { order } = this.props;
-
-//     return <OrderCardHeader order={order} />;
-//   }
-
-//   renderFulfillmentGroups() {
-//     const { order } = this.props;
-
-//     return <OrderCardFulfillmentGroup order={order} {...this.props} />;
-//   }
-
-//   renderPayments() {
-//     const { order } = this.props;
-
-//     return <OrderCardPayments order={order} {...this.props} />;
-//   }
-
-//   renderTabs() {
-//     const { currentTab } = this.state;
-
-//     return (
-//       <Fragment>
-//         <Tabs value={currentTab} onChange={this.handleTabChange}>
-//           <Tab label={i18next.t("fulfillment", "Fulfillment")} />
-//           <Tab label={i18next.t("refunds", "Refunds")} />
-//         </Tabs>
-//         <Divider />
-//       </Fragment>
-//     );
-//   }
-
-//   renderFulfillment() {
-//     const { currentTab } = this.state;
-
-//     if (currentTab === 0) {
-//       return (
-//         <Fragment>
-//           <Grid item xs={12}>
-//             {this.renderFulfillmentGroups()}
-//           </Grid>
-//           <Grid item xs={12}>
-//             {this.renderPayments()}
-//           </Grid>
-//         </Fragment>
-//       );
-//     }
-
-//     return null;
-//   }
-
-//   renderRefunds() {
-//     const { currentTab } = this.state;
-
-//     if (currentTab === 1) {
-//       return (
-//         <Fragment>
-//           <Grid item xs={12}>
-//             [Placeholder] Refunds will go here
-//           </Grid>
-//         </Fragment>
-//       );
-//     }
-
-//     return null;
-//   }
-
-//   renderSidebar() {
-//     const { order } = this.props;
-
-//     return (
-//       <Grid container spacing={8}>
-//         <Grid item xs={12}>
-//           <Blocks region="OrderCardSummary" blockProps={{ order, ...this.props }} />
-//         </Grid>
-//         <Grid item xs={12}>
-//           <OrderCardCustomerDetails order={order} />
-//         </Grid>
-//       </Grid>
-//     );
-//   }
-
-//   render() {
-//     const { order } = this.props;
-//     const { currentTab } = this.state;
-
-//     return (
-//       <Fragment>
-//         <Helmet title={`Order Details for order reference #${order.referenceId}`} />
-//         {this.renderAppBar()}
-//         <Grid container spacing={24}>
-//           <Grid item xs={12}>
-//             {this.renderHeader()}
-//           </Grid>
-//           <Grid item xs={12}>
-//             {this.renderTabs()}
-//           </Grid>
-//           {currentTab === 0 &&
-//             this.renderFulfillment()
-//           }
-//           {currentTab === 1 &&
-//             this.renderRefunds()
-//           }
-//         </Grid>
-//         <DetailDrawer title={i18next.t("orderCard.orderSummary.title", "Order summary")}>
-//           {this.renderSidebar()}
-//         </DetailDrawer>
-//       </Fragment>
-//     );
-//   }
-// }

From 2f626087108f6e4fc0f06bff1dbb54f78ee681d6 Mon Sep 17 00:00:00 2001
From: Erik Kieckhafer <ek@ato.la>
Date: Wed, 26 Jun 2019 20:38:20 -0700
Subject: [PATCH 4/5] remove code implemented in another PR

Signed-off-by: Erik Kieckhafer <ek@ato.la>
---
 imports/plugins/core/orders/client/components/orderCard.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/imports/plugins/core/orders/client/components/orderCard.js b/imports/plugins/core/orders/client/components/orderCard.js
index e672f46912e..7b0d543662f 100644
--- a/imports/plugins/core/orders/client/components/orderCard.js
+++ b/imports/plugins/core/orders/client/components/orderCard.js
@@ -2,7 +2,6 @@ import React, { Component, Fragment } from "react";
 import PropTypes from "prop-types";
 import Helmet from "react-helmet";
 import Grid from "@material-ui/core/Grid";
-import { Blocks } from "@reactioncommerce/reaction-components";
 import { i18next } from "/client/api";
 import DetailDrawer from "/imports/client/ui/components/DetailDrawer";
 import OrderCardAppBar from "./orderCardAppBar";
@@ -51,7 +50,6 @@ class OrderCard extends Component {
       <Grid container spacing={8}>
         <Grid item xs={12}>
           {this.renderSummary()}
-          <Blocks region="OrderCardSummary" blockProps={{ order, ...this.props }} />
         </Grid>
         <Grid item xs={12}>
           <OrderCardCustomerDetails order={order} />

From d7df9ecb7aa606cfbdf1ebbae907afe4be9f9c8c Mon Sep 17 00:00:00 2001
From: Erik Kieckhafer <ek@ato.la>
Date: Wed, 26 Jun 2019 20:48:23 -0700
Subject: [PATCH 5/5] move sidebar button to right

Signed-off-by: Erik Kieckhafer <ek@ato.la>
---
 .../plugins/core/orders/client/components/orderCardHeader.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/imports/plugins/core/orders/client/components/orderCardHeader.js b/imports/plugins/core/orders/client/components/orderCardHeader.js
index 2e433f906ae..6e8b9a75e08 100644
--- a/imports/plugins/core/orders/client/components/orderCardHeader.js
+++ b/imports/plugins/core/orders/client/components/orderCardHeader.js
@@ -13,6 +13,9 @@ import OrderCardStatusChip from "./orderCardStatusChip";
 const styles = (theme) => ({
   fontWeightSemiBold: {
     fontWeight: theme.typography.fontWeightSemiBold
+  },
+  openSidebarButton: {
+    marginLeft: "auto"
   }
 });
 
@@ -98,7 +101,7 @@ class OrderCardHeader extends Component {
                 {i18next.t("admin.orderWorkflow.invoice.printInvoice", "Print invoice")}
               </Button>
             </Grid>
-            <Grid item>
+            <Grid className={classes.openSidebarButton} item>
               <DetailDrawerButton color="primary" size="small" variant="outlined">{i18next.t("orderCard.orderSummary.showOrderSummary", "Show order summary")}</DetailDrawerButton>
             </Grid>
           </Grid>