Skip to content

Commit

Permalink
Merge pull request #2813 from reactioncommerce/kieha-remove-zeroth-in…
Browse files Browse the repository at this point in the history 
…dexes-2770

Remove hardcoded billing and shipping objects
  • Loading branch information
@spencern
spencern authored Sep 26, 2017
2 parents 593845b + e645ede commit a6fc9f9
Show file tree
Hide file tree
Showing 14 changed files with 447 additions and 300 deletions.
35 changes: 23 additions & 12 deletions imports/plugins/core/orders/client/components/orderSummary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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";
Expand Down Expand Up @@ -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>
Expand All @@ -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 &&
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>
);
Expand Down
106 changes: 64 additions & 42 deletions imports/plugins/core/orders/client/components/orderTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
};

Expand All @@ -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
Expand Down Expand Up @@ -100,6 +93,7 @@ class OrderTable extends Component {

renderOrderInfo(order) {
const { displayMedia } = this.props;
const invoice = getBillingInfo(order).invoice || {};

return (
<div className="order-info">
Expand All @@ -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>

Expand All @@ -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 (
Expand All @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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],
Expand Down
11 changes: 6 additions & 5 deletions imports/plugins/core/orders/client/components/orderTableColumn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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"
Expand Down
Loading

0 comments on commit a6fc9f9

Please sign in to comment.