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..4188462b343 --- /dev/null +++ b/imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js @@ -0,0 +1,53 @@ +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 Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; + + +/** + * @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; + + return ( + + + + + + + {fullName} + + + + {email} + {phone} + + + + + ); +} + +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; diff --git a/imports/plugins/core/orders/client/components/orderCard.js b/imports/plugins/core/orders/client/components/orderCard.js index c6ade143d46..7b0d543662f 100644 --- a/imports/plugins/core/orders/client/components/orderCard.js +++ b/imports/plugins/core/orders/client/components/orderCard.js @@ -2,10 +2,13 @@ import React, { Component, Fragment } from "react"; import PropTypes from "prop-types"; import Helmet from "react-helmet"; import Grid from "@material-ui/core/Grid"; +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 +43,21 @@ class OrderCard extends Component { return ; } + renderSidebar() { + const { order } = this.props; + + return ( + + + {this.renderSummary()} + + + + + + ); + } + renderSummary() { const { order } = this.props; @@ -62,15 +80,15 @@ class OrderCard extends Component { - - {this.renderSummary()} - - + {this.renderPayments()} + + {this.renderSidebar()} + ); } diff --git a/imports/plugins/core/orders/client/components/orderCardHeader.js b/imports/plugins/core/orders/client/components/orderCardHeader.js index 853041bbf35..6e8b9a75e08 100644 --- a/imports/plugins/core/orders/client/components/orderCardHeader.js +++ b/imports/plugins/core/orders/client/components/orderCardHeader.js @@ -2,25 +2,20 @@ 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 + fontWeightSemiBold: { + fontWeight: theme.typography.fontWeightSemiBold }, - printButton: { - flex: 1, - justifyContent: "flex-end", - display: "flex" + openSidebarButton: { + marginLeft: "auto" } }); @@ -31,20 +26,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 +41,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) => {payment.displayName} {payment.amount.displayAmount}); - } - - // If only one payment method, do not display amount - return payments.map((payment) => {payment.displayName}); - } - - renderOrderShipments() { - const { order: { fulfillmentGroups } } = this.props; - - if (Array.isArray(fulfillmentGroups) && fulfillmentGroups.length) { - return fulfillmentGroups.map((fulfillmentGroup) => {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.carrier} - {fulfillmentGroup.selectedFulfillmentOption.fulfillmentMethod.displayName}); // 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 +70,48 @@ class OrderCardHeader extends Component { // and show badges next to payments to represent their status return ( - + ); } 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 ( - + - + - - Order  - + + {i18next.t("order.order", "Order")} - {referenceId} - | {orderDate} {this.renderPaymentStatusChip()} - - - - + + + + + {i18next.t("orderCard.orderSummary.showOrderSummary", "Show order summary")} - - - - - - - - Shipping address - -
- - - - Contact information - - {email} - {shippingAddress.phone} - - - - - - - - - - - - Shipping method{fulfillmentGroups.length !== 1 ? "s" : null} - - {this.renderOrderShipments()} - - - - Payment method{payments.length !== 1 ? "s" : null} - - {this.renderOrderPayments()} - - - - - - + {i18next.t("order.placed", "Placed")} {orderDate} ); } } -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 - - ); + return ; + } + + paymentStatus() { + const { displayStatus } = this.props; + let chipClasses; + + return ; + } + + shipmentStatus() { + const { classes, displayStatus, status } = this.props; + let chipClasses; + + if (status === "coreOrderWorkflow/canceled") { + chipClasses = classes.orderStatusCanceledOutlined; + } + + return ; + } + + 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 ( - - + + - - - - - ); - } - - return null; + + + ); } + + 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;