Remove hardcoded billing and shipping objects

imports/plugins/core/orders/client/components/orderSummary.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import moment from "moment";
 import { Badge, ClickToCopy } from "@reactioncommerce/reaction-ui";
-import { getOrderRiskBadge, getOrderRiskStatus } from "../helpers";
+import { getOrderRiskBadge, getOrderRiskStatus, getBillingInfo, getShippingInfo } from "../helpers";
 
 class OrderSummary extends Component {
   static propTypes = {
@@ -15,7 +15,8 @@ class OrderSummary extends Component {
   }
 
   badgeStatus() {
-    const orderStatus = this.props.order.workflow.status;
+    const order = this.props.order;
+    const orderStatus = order && order.workflow && order.workflow.status;
 
     if (orderStatus === "new") {
       return "info";
@@ -44,12 +45,18 @@ class OrderSummary extends Component {
 
   render() {
     const { dateFormat, tracking, order, profileShippingAddress, printableLabels } = this.props;
+    const paymentMethod = getBillingInfo(order).paymentMethod || {};
+    const invoice = getBillingInfo(order).invoice || {};
+    const shipmentMethod = getShippingInfo(order).shipmentMethod || {};
     const orderRisk = getOrderRiskStatus(order);
 
     return (
       <div>
-        <div className="order-summary-form-group bg-info" style={{ lineHeight: 3, marginTop: -15, marginRight: -15, marginLeft: -15 }}>
-          <strong style={{ marginLeft: 15 }}>{profileShippingAddress.fullName}</strong>
+        <div
+          className="order-summary-form-group bg-info"
+          style={{ lineHeight: 3, marginTop: -15, marginRight: -15, marginLeft: -15 }}
+        >
+          <strong style={{ marginLeft: 15 }}>{profileShippingAddress && profileShippingAddress.fullName}</strong>
           <div className="invoice-details" style={{ marginRight: 15, position: "relative" }}>
             {order.email}
           </div>
@@ -60,8 +67,8 @@ class OrderSummary extends Component {
             <div style={{ marginBottom: 4 }}>
               <Badge
                 badgeSize="large"
-                i18nKeyLabel={`cartDrawer.${order.workflow.status}`}
-                label={order.workflow.status}
+                i18nKeyLabel={`cartDrawer.${order && order.workflow && order.workflow.status}`}
+                label={order && order.workflow && order.workflow.status}
                 status={this.badgeStatus()}
               />
               {orderRisk &&
@@ -97,28 +104,28 @@ class OrderSummary extends Component {
             <div className="order-summary-form-group">
               <strong data-i18n="order.processor">Processor</strong>
               <div className="invoice-details">
-                {order.billing[0].paymentMethod.processor}
+                {paymentMethod && paymentMethod.processor}
               </div>
             </div>
 
             <div className="order-summary-form-group">
               <strong data-i18n="order.payment">Payment</strong>
               <div className="invoice-details">
-                {order.billing[0].paymentMethod.storedCard} ({order.billing[0].invoice.total})
+                {paymentMethod.storedCard} ({invoice.total})
               </div>
             </div>
 
             <div className="order-summary-form-group">
               <strong data-i18n="order.transaction">Transaction</strong>
               <div className="invoice-details">
-                {order.billing[0].paymentMethod.transactionId}
+                {paymentMethod.transactionId}
               </div>
             </div>
 
             <div className="order-summary-form-group">
               <strong data-i18n="orderShipping.carrier">Carrier</strong>
               <div className="invoice-details">
-                {order.shipping[0].shipmentMethod.carrier} - {order.shipping[0].shipmentMethod.label}
+                {shipmentMethod.carrier} - {shipmentMethod.label}
               </div>
             </div>
 
@@ -155,9 +162,13 @@ class OrderSummary extends Component {
 
         <div style={{ marginTop: 4 }}>
           <span>{profileShippingAddress.fullName}</span>
-          <br/><span>{profileShippingAddress.address1}</span>
+          <br/>
+          <span>{profileShippingAddress.address1}</span>
           {profileShippingAddress.address2 && <span><br/>{profileShippingAddress.address2}</span>}
-          <br/><span>{profileShippingAddress.city}, {profileShippingAddress.region}, {profileShippingAddress.country} {profileShippingAddress.postal}</span>
+          <br/>
+          <span>
+            {profileShippingAddress.city}, {profileShippingAddress.region}, {profileShippingAddress.country} {profileShippingAddress.postal}
+          </span>
         </div>
       </div>
     );

imports/plugins/core/orders/client/components/orderTable.js

@@ -3,35 +3,35 @@ import PropTypes from "prop-types";
 import Avatar from "react-avatar";
 import moment from "moment";
 import classnames from "classnames/dedupe";
-import { Reaction, i18next } from "/client/api";
+import { i18next } from "/client/api";
 import { Orders } from "/lib/collections";
 import { Badge, ClickToCopy, Icon, Translation, Checkbox, Loading, SortableTable } from "@reactioncommerce/reaction-ui";
 import OrderTableColumn from "./orderTableColumn";
 import OrderBulkActionsBar from "./orderBulkActionsBar";
 import { formatPriceString } from "/client/api";
 import ProductImage from "./productImage";
-import { getOrderRiskBadge, getOrderRiskStatus } from "../helpers";
+import { getOrderRiskBadge, getOrderRiskStatus, getBillingInfo, getShippingInfo } from "../helpers";
 
 const classNames = {
   colClassNames: {
-    "name": "order-table-column-name",
-    "email": "order-table-column-email",
-    "date": "order-table-column-date hidden-xs hidden-sm",
-    "id": "order-table-column-id hidden-xs hidden-sm",
-    "total": "order-table-column-total",
-    "shipping": "order-table-column-shipping hidden-xs hidden-sm",
-    "status": "order-table-column-status",
-    "": "order-table-column-control"
+    name: "order-table-column-name",
+    email: "order-table-column-email",
+    date: "order-table-column-date hidden-xs hidden-sm",
+    id: "order-table-column-id hidden-xs hidden-sm",
+    total: "order-table-column-total",
+    shipping: "order-table-column-shipping hidden-xs hidden-sm",
+    status: "order-table-column-status",
+    control: "order-table-column-control"
   },
   headerClassNames: {
-    "name": "order-table-header-name",
-    "email": "order-table-header-email",
-    "date": "order-table-header-date hidden-xs hidden-sm",
-    "id": "order-table-header-id hidden-xs hidden-sm",
-    "total": "order-table-header-total",
-    "shipping": "order-table-header-shipping hidden-xs hidden-sm",
-    "status": "order-table-header-status",
-    "": "order-table-header-control"
+    name: "order-table-header-name",
+    email: "order-table-header-email",
+    date: "order-table-header-date hidden-xs hidden-sm",
+    id: "order-table-header-id hidden-xs hidden-sm",
+    total: "order-table-header-total",
+    shipping: "order-table-header-shipping hidden-xs hidden-sm",
+    status: "order-table-header-status",
+    control: "order-table-header-control"
   }
 };
 
@@ -54,13 +54,6 @@ class OrderTable extends Component {
     toggleShippingFlowList: PropTypes.func
   }
 
-  // helper function to get appropriate billing info
-  getBillingInfo(order) {
-    return order.billing.find(
-      billing => billing.shopId === Reaction.getShopId()
-    ) || {};
-  }
-
   /**
    * Fullfilment Badge
    * @param  {Object} order object containing info for order and coreOrderWorkflow
@@ -100,6 +93,7 @@ class OrderTable extends Component {
 
   renderOrderInfo(order) {
     const { displayMedia } = this.props;
+    const invoice = getBillingInfo(order).invoice || {};
 
     return (
       <div className="order-info">
@@ -120,7 +114,7 @@ class OrderTable extends Component {
           </span>
 
           <span className="order-data order-data-total">
-            <strong>Total: {formatPriceString(this.getBillingInfo(order).invoice.total)}</strong>
+            <strong>Total: {formatPriceString(invoice.total)}</strong>
           </span>
         </div>
 
@@ -145,7 +139,9 @@ class OrderTable extends Component {
   }
 
   renderShipmentInfo(order) {
-    const emailAddress = order.email || <Translation defaultValue={"Email not availabe"} i18nKey={"admin.orderWorkflow.ordersList.emailNotFound"} />;
+    const emailAddress = order.email ||
+    <Translation defaultValue={"Email not available"} i18nKey={"admin.orderWorkflow.ordersList.emailNotFound"} />;
+    const shipping = getShippingInfo(order);
     const orderRisk = getOrderRiskStatus(order);
 
     return (
@@ -154,11 +150,11 @@ class OrderTable extends Component {
           <Avatar
             email={order.email}
             round={true}
-            name={order.shipping[0].address.fullName}
+            name={shipping.address && shipping.address.fullName}
             size={30}
             className="rui-order-avatar"
           />
-          <strong>{order.shipping[0].address.fullName}</strong> | {emailAddress}
+          <strong>{shipping.address && shipping.address.fullName}</strong> | {emailAddress}
           {orderRisk &&
             <Badge
               className="risk-info"
@@ -170,8 +166,8 @@ class OrderTable extends Component {
         <div className="workflow-info">
           <Badge
             badgeSize="large"
-            i18nKeyLabel={`cartDrawer.${order.shipping[0].workflow.status}`}
-            label={order.shipping[0].workflow.status}
+            i18nKeyLabel={`cartDrawer.${shipping.workflow && shipping.workflow.status}`}
+            label={shipping.workflow && shipping.workflow.status}
             status="basic"
           />
           <Badge
@@ -216,14 +212,38 @@ class OrderTable extends Component {
     if (this.props.isOpen) {
       // Render order list column/row data
       const filteredFields = {
-        "name": "shipping[0].address.fullName",
-        "email": "email",
-        "date": "createdAt",
-        "id": "_id",
-        "total": "billing[0].invoice.total",
-        "shipping": "shipping[0].workflow.status",
-        "status": "workflow.status",
-        "": ""
+        name: {
+          accessor: row => getShippingInfo(row).address && getShippingInfo(row).address.fullName,
+          id: "shippingFullName"
+        },
+        email: {
+          accessor: "email",
+          id: "email"
+        },
+        date: {
+          accessor: "createdAt",
+          id: "createdAt"
+        },
+        id: {
+          accessor: "_id",
+          id: "_id"
+        },
+        total: {
+          accessor: row => getBillingInfo(row).invoice && getBillingInfo(row).invoice.total,
+          id: "billingTotal"
+        },
+        shipping: {
+          accessor: row => getShippingInfo(row).workflow && getShippingInfo(row).workflow.status,
+          id: "shippingStatus"
+        },
+        status: {
+          accessor: "workflow.status",
+          id: "workflow.status"
+        },
+        control: {
+          accessor: "",
+          id: ""
+        }
       };
 
       const columnNames = Object.keys(filteredFields);
@@ -271,16 +291,18 @@ class OrderTable extends Component {
               </span>
             </div>
           );
-        } else if (columnName === "") {
-          columnNameLabel = "";
+        } else if (columnName === "control") {
+          colHeader = " ";
           resizable = false;
           sortable = false;
         } else {
           columnNameLabel = i18next.t(`admin.table.headers.${columnName}`);
         }
 
+
         const columnMeta = {
-          accessor: filteredFields[columnName],
+          accessor: filteredFields[columnName].accessor,
+          id: filteredFields[columnName].id,
           Header: colHeader ? colHeader : columnNameLabel,
           headerClassName: classNames.headerClassNames[columnName],
           className: classNames.colClassNames[columnName],

imports/plugins/core/orders/client/components/orderTableColumn.js

@@ -5,7 +5,7 @@ import moment from "moment";
 import { formatPriceString, i18next } from "/client/api";
 import Avatar from "react-avatar";
 import { Badge, ClickToCopy, Icon, RolloverCheckbox, Checkbox } from "@reactioncommerce/reaction-ui";
-import { getOrderRiskBadge, getOrderRiskStatus } from "../helpers";
+import { getOrderRiskBadge, getOrderRiskStatus, getBillingInfo } from "../helpers";
 
 class OrderTableColumn extends Component {
   static propTypes = {
@@ -49,9 +49,10 @@ class OrderTableColumn extends Component {
 
   render() {
     const columnAccessor = this.props.row.column.id;
+    const invoice = getBillingInfo(this.props.row.original).invoice || {};
     const orderRisk = getOrderRiskStatus(this.props.row.original);
 
-    if (columnAccessor === "shipping[0].address.fullName") {
+    if (columnAccessor === "shippingFullName") {
       return (
         <div style={{ display: "inline-flex" }}>
           {this.renderCheckboxOnSelect(this.props.row)}
@@ -93,14 +94,14 @@ class OrderTableColumn extends Component {
         </div>
       );
     }
-    if (columnAccessor === "billing[0].invoice.total") {
+    if (columnAccessor === "billingTotal") {
       return (
         <div style={{ marginTop: 7 }}>
-          <strong>{formatPriceString(this.props.row.original.billing[0].invoice.total)}</strong>
+          <strong>{formatPriceString(invoice.total)}</strong>
         </div>
       );
     }
-    if (columnAccessor === "shipping[0].workflow.status") {
+    if (columnAccessor === "shippingStatus") {
       return (
         <Badge
           className="orders-badge"