Skip to content

Commit

Permalink
Merge pull request #5240 from reactioncommerce/feat-kieckhafer-update…
Browse files Browse the repository at this point in the history 
…ReadOnlyOrderWithSidebar

refactor: update styling of orderCard header section, move details to sidebar
  • Loading branch information
@mikemurray
mikemurray authored Jun 27, 2019
2 parents 6cebfa6 + d7df9ec commit d26729c
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 171 deletions.
53 changes: 53 additions & 0 deletions imports/plugins/core/orders/client/components/OrderCardCustomerDetails.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<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>
</CardContent>
</Card>
);
}

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;
26 changes: 22 additions & 4 deletions imports/plugins/core/orders/client/components/orderCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";


Expand Down Expand Up @@ -40,6 +43,21 @@ class OrderCard extends Component {
return <OrderCardPayments order={order} />;
}

renderSidebar() {
const { order } = this.props;

return (
<Grid container spacing={8}>
<Grid item xs={12}>
{this.renderSummary()}
</Grid>
<Grid item xs={12}>
<OrderCardCustomerDetails order={order} />
</Grid>
</Grid>
);
}

renderSummary() {
const { order } = this.props;

Expand All @@ -62,15 +80,15 @@ 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>
);
}
Expand Down
129 changes: 25 additions & 104 deletions imports/plugins/core/orders/client/components/orderCardHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
});

Expand All @@ -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", {
Expand All @@ -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) => <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;

Expand All @@ -105,92 +70,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 className={classes.openSidebarButton} 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));
Loading

0 comments on commit d26729c

Please sign in to comment.