From 1df70047c607cf7557aca3cabb2b432bfdc71bea Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Tue, 30 Apr 2019 15:28:54 -0700 Subject: [PATCH 001/375] new OrderCard component for single order in Catalyst Signed-off-by: Erik Kieckhafer --- .../orders/client/components/orderCard.js | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 imports/plugins/core/orders/client/components/orderCard.js diff --git a/imports/plugins/core/orders/client/components/orderCard.js b/imports/plugins/core/orders/client/components/orderCard.js new file mode 100644 index 00000000000..98f811b5bf9 --- /dev/null +++ b/imports/plugins/core/orders/client/components/orderCard.js @@ -0,0 +1,72 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import withStyles from "@material-ui/core/styles/withStyles"; +import Grid from "@material-ui/core/Grid"; +import Typography from "@material-ui/core/Typography"; +import OrderCardFulfillmentGroup from "./orderCardFulfillmentGroup"; +import OrderCardHeader from "./orderCardHeader"; +import OrderCardSummary from "./orderCardSummary"; + + +const styles = (theme) => ({ + orderCard: { + marginTop: theme.spacing.unit * 2.5 + } +}); + +class OrderCard extends Component { + static propTypes = { + classes: PropTypes.object, + order: PropTypes.object + }; + + renderHeader() { + const { order } = this.props; + + return ; + } + + renderFulfillmentGroups() { + const { order } = this.props; + const { shipping } = order; + + return shipping.map((shipment) => ); + } + + renderSummary() { + const { order } = this.props; + + return ; + } + + render() { + const { classes } = this.props; + + return ( + + +
+ + Order Details + + {this.renderHeader()} +
+
+ + Shipments + + {this.renderFulfillmentGroups()} +
+
+ + Summary + + {this.renderSummary()} +
+ + + ); + } +} + +export default withStyles(styles, { name: "OrderCard" })(OrderCard); From 288070d67be13ed7e91a299beb45f14e0be54eb6 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Tue, 30 Apr 2019 15:29:18 -0700 Subject: [PATCH 002/375] OrderCardHeader component for OrderCard Signed-off-by: Erik Kieckhafer --- .../client/components/orderCardHeader.js | 173 ++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 imports/plugins/core/orders/client/components/orderCardHeader.js diff --git a/imports/plugins/core/orders/client/components/orderCardHeader.js b/imports/plugins/core/orders/client/components/orderCardHeader.js new file mode 100644 index 00000000000..e460313ae3a --- /dev/null +++ b/imports/plugins/core/orders/client/components/orderCardHeader.js @@ -0,0 +1,173 @@ +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 { withMoment } from "@reactioncommerce/reaction-components"; +import { ClickToCopy } from "@reactioncommerce/reaction-ui"; +import OrderCardStatusChip from "./orderCardStatusChip"; + + +import Address from "@reactioncommerce/components/Address/v1"; + +const styles = (theme) => ({ + orderCardInfoTextBold: { + fontWeight: theme.typography.fontWeightBold + }, + orderCardDivider: { + borderTop: `solid 1px ${theme.palette.colors.black10}`, + marginTop: theme.spacing.unit * 2.5, + paddingTop: theme.spacing.unit * 2.5 + }, + orderCardInfoSection: { + marginBottom: theme.spacing.unit * 3 + }, + orderCardReferenceIdLink: { + pointer: "cursor" + }, + + + + + orderAddressText: { + color: theme.palette.colors.black65, + fontSize: "14px" + }, + + + + + orderStatusNew: { + backgroundColor: `${theme.palette.colors.reactionBlue300}`, + color: "white", + fontWeight: "800" + }, + orderStatusCanceled: { + backgroundColor: `${theme.palette.colors.red300}`, + color: "white", + fontWeight: "800" + }, + orderStatusProcessing: { + backgroundColor: `${theme.palette.colors.reactionBlue300}`, + color: "white", + fontWeight: "800" + }, + orderStatusShipped: { + backgroundColor: `${theme.palette.colors.reactionBlue}`, + color: "white", + fontWeight: "800" + } +}); + + +class OrderCardHeader extends Component { + static propTypes = { + classes: PropTypes.object, + moment: PropTypes.func, + order: PropTypes.shape({ + createdAt: PropTypes.string, + email: PropTypes.string, + payments: PropTypes.string, // TODO: EK - update this PropType + referenceId: PropTypes.string, // TODO: EK - update this PropType + shipping: PropTypes.string, // TODO: EK - update this PropType + workflow: PropTypes.shape({ + status: PropTypes.string + }) + }) + }; + + orderLink() { + const { order: { referenceId } } = this.props; + return `${window.location.origin}/operator/orders/${referenceId}`; + } + + 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: { shipping } } = this.props; + + if (Array.isArray(shipping) && shipping.length) { + return shipping.map((fulfillmentGroup) => {fulfillmentGroup.shipmentMethod.carrier} - {fulfillmentGroup.shipmentMethod.label}); // eslint-disable-line + } + + return null; + } + + render() { + + console.log(" ----- ----- ----- ----- ----- renderHeader() this.props", this.props); + + const { classes, moment, order } = this.props; + const { createdAt, email, referenceId, payments, shipping, shipping: fulfillmentGroups, workflow: { status } } = order; + const { shippingAddress } = shipping[0].address; + const orderDate = (moment && moment(createdAt).format("MM/DD/YYYY")) || createdAt.toLocaleString(); + + return ( + + + + + Order Status: + + + + Date: + {orderDate} + + + Order ID: + + + + + +
+ + + + + Payment Method{payments.length !== 1 ? "s" : null}: + + {this.renderOrderPayments()} + + + + Shipping Method{fulfillmentGroups.length !== 1 ? "s" : null}: + + {this.renderOrderShipments()} + + + + + + Shipping Address: + + {/*
*/} + + + +
+ + + ); + } +} + +export default withMoment(withStyles(styles, { name: "OrderCardHeader" })(OrderCardHeader)); From 3726fabaab6b81944690858bfc1cd66febdc5190 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Tue, 30 Apr 2019 15:29:46 -0700 Subject: [PATCH 003/375] placeholder components for OrderCard Signed-off-by: Erik Kieckhafer --- .../components/orderCardFulfillmentGroup.js | 33 +++++++++++++++++++ .../client/components/orderCardSummary.js | 33 +++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 imports/plugins/core/orders/client/components/orderCardFulfillmentGroup.js create mode 100644 imports/plugins/core/orders/client/components/orderCardSummary.js diff --git a/imports/plugins/core/orders/client/components/orderCardFulfillmentGroup.js b/imports/plugins/core/orders/client/components/orderCardFulfillmentGroup.js new file mode 100644 index 00000000000..b0035e48d8e --- /dev/null +++ b/imports/plugins/core/orders/client/components/orderCardFulfillmentGroup.js @@ -0,0 +1,33 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import Card from "@material-ui/core/Card"; +import CardHeader from "@material-ui/core/CardHeader"; +import CardContent from "@material-ui/core/CardContent"; +import Typography from "@material-ui/core/Typography"; + + +class OrderCardFulfillmentGroup extends Component { + static propTypes = { + order: PropTypes.shape({ + }) + }; + + render() { + return ( + + + + + Order Card Fulfillment Group + + + + + ); + } +} + +export default OrderCardFulfillmentGroup; diff --git a/imports/plugins/core/orders/client/components/orderCardSummary.js b/imports/plugins/core/orders/client/components/orderCardSummary.js new file mode 100644 index 00000000000..abec9256112 --- /dev/null +++ b/imports/plugins/core/orders/client/components/orderCardSummary.js @@ -0,0 +1,33 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import Card from "@material-ui/core/Card"; +import CardHeader from "@material-ui/core/CardHeader"; +import CardContent from "@material-ui/core/CardContent"; +import Typography from "@material-ui/core/Typography"; + + +class OrderCardSummary extends Component { + static propTypes = { + order: PropTypes.shape({ + }) + }; + + render() { + return ( + + + + + Order Card Summary + + + + + ); + } +} + +export default OrderCardSummary; From 839e8c6d63768f5cc1df923fa1189371a4e977d2 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Tue, 30 Apr 2019 15:30:11 -0700 Subject: [PATCH 004/375] add bold font-weight to muiTheme Signed-off-by: Erik Kieckhafer --- imports/plugins/core/router/client/theme/muiTheme.js | 1 + 1 file changed, 1 insertion(+) diff --git a/imports/plugins/core/router/client/theme/muiTheme.js b/imports/plugins/core/router/client/theme/muiTheme.js index ec4a0595778..74d66208883 100644 --- a/imports/plugins/core/router/client/theme/muiTheme.js +++ b/imports/plugins/core/router/client/theme/muiTheme.js @@ -34,6 +34,7 @@ export const rawMuiTheme = { fontWeightLight: 400, fontWeightRegular: 400, fontWeightMedium: 500, + fontWeightBold: 700, useNextVariants: true, h6: { fontSize: 18 From 8a9f7f0d0ca0dbc86847ad1209b7d93b7a20fc79 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Tue, 30 Apr 2019 15:30:33 -0700 Subject: [PATCH 005/375] add new OrderCard component to existing Orders admin Signed-off-by: Erik Kieckhafer --- .../orders/client/templates/workflow/workflow.html | 4 ++++ .../core/orders/client/templates/workflow/workflow.js | 10 ++++++++++ 2 files changed, 14 insertions(+) diff --git a/imports/plugins/core/orders/client/templates/workflow/workflow.html b/imports/plugins/core/orders/client/templates/workflow/workflow.html index b412307fa04..3871f0f7014 100644 --- a/imports/plugins/core/orders/client/templates/workflow/workflow.html +++ b/imports/plugins/core/orders/client/templates/workflow/workflow.html @@ -1,4 +1,8 @@