Skip to content

Commit

Permalink
Merge pull request #3112 from reactioncommerce/update-esther-fix-issu…
Browse files Browse the repository at this point in the history
…e-3018

Use "Completed Order" component in Profile page
  • Loading branch information
brent-hoover authored Nov 2, 2017
2 parents dcaa9c3 + d6030d2 commit aa2a1ea
Show file tree
Hide file tree
Showing 16 changed files with 322 additions and 43 deletions.
52 changes: 52 additions & 0 deletions imports/plugins/core/accounts/client/components/ordersList.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import CompletedOrder from "../../../checkout/client/components/completedOrder";

/**
* @summary React component to display an array of completed orders
* @class OrdersList
* @extends {Component}
* @property {Array} allOrdersInfo - array of orders
* @property {Function} handeleDisplayMedia - function to display order image
*/
class OrdersList extends Component {
static propTypes = {
allOrdersInfo: PropTypes.array,
handleDisplayMedia: PropTypes.func,
isProfilePage: PropTypes.bool
}

render() {
const { allOrdersInfo, handleDisplayMedia } = this.props;

if (allOrdersInfo) {
return (
<div>
{allOrdersInfo.map((order) => {
const orderKey = order.orderId;
return (
<CompletedOrder
key={orderKey}
shops={order.shops}
order={order.order}
orderId={order.orderId}
orderSummary={order.orderSummary}
paymentMethods={order.paymentMethods}
productImages={order.productImages}
handleDisplayMedia={handleDisplayMedia}
isProfilePage={this.props.isProfilePage}
/>
);
})}
</div>
);
}
return (
<div className="alert alert-info">
<span data-i18n="cartCompleted.noOrdersFound">No orders found.</span>
</div>
);
}
}

export default OrdersList;
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import { compose, withProps } from "recompose";
import { Meteor } from "meteor/meteor";
import { Router } from "/client/modules/router/";
import { Media } from "/lib/collections";
import { registerComponent, composeWithTracker } from "@reactioncommerce/reaction-components";
import OrdersList from "../components/ordersList";


const handlers = {};

handlers.handleDisplayMedia = (item) => {
const variantId = item.variants._id;
const productId = item.productId;

const variantImage = Media.findOne({
"metadata.variantId": variantId,
"metadata.productId": productId
});

if (variantImage) {
return variantImage;
}

const defaultImage = Media.findOne({
"metadata.productId": productId,
"metadata.priority": 0
});

if (defaultImage) {
return defaultImage;
}
return false;
};

function composer(props, onData) {
// Get user order from props
const orders = props.orders;
const allOrdersInfo = [];
let isProfilePage = false;

if (Router.getRouteName() === "account/profile") {
isProfilePage = true;
}

if (orders.length > 0) {
orders.map((order) => {
const imageSub = Meteor.subscribe("CartImages", order.items);
const orderSummary = {
quantityTotal: order.getCount(),
subtotal: order.getSubTotal(),
shippingTotal: order.getShippingTotal(),
tax: order.getTaxTotal(),
discounts: order.getDiscounts(),
total: order.getTotal(),
shipping: order.shipping
};
if (imageSub.ready()) {
const productImages = Media.find().fetch();
const orderId = order._id;
const orderInfo = {
shops: order.getShopSummary(),
order,
orderId,
orderSummary,
paymentMethods: order.getUniquePaymentMethods(),
productImages
};
allOrdersInfo.push(orderInfo);
}
});
onData(null, {
allOrdersInfo,
isProfilePage
});
} else {
onData(null, {
orders,
isProfilePage
});
}
}


registerComponent("OrdersList", OrdersList, [
withProps(handlers),
composeWithTracker(composer)
]);

export default compose(
withProps(handlers),
composeWithTracker(composer)
)(OrdersList);
3 changes: 3 additions & 0 deletions imports/plugins/core/accounts/client/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export { default as UpdatePasswordOverlay } from "./components/updatePasswordOve
export { default as LoginInline } from "./components/loginInline";

export { default as AccountsDashboardContainer } from "./containers/accountsDashboardContainer";
export { default as UserOrdersListContainer } from "./containers/userOrdersListContainer";
export { default as AuthContainer } from "./containers/auth";
export { default as EditGroupContainer } from "./containers/editGroupContainer";
export { default as ForgotPasswordContainer } from "./containers/forgotPassword";
Expand Down Expand Up @@ -53,6 +54,8 @@ import "./templates/members/member.html";
import "./templates/members/member.js";
import "./templates/profile/profile.html";
import "./templates/profile/profile.js";
import "./templates/profile/userOrdersList.html";
import "./templates/profile/userOrdersList.js";
import "./templates/updatePassword/updatePassword.html";
import "./templates/updatePassword/updatePassword.js";
import "./templates/verify/verifyAccount.html";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</div>

<div class="flex-item">
<div class="panel panel-default">
<div class="panel panel-default user-orders-list">
<div class="panel-heading">
{{#if isOwnerOfProfile}}
<h3 class="panel-title" data-i18n="accountsUI.yourOrders">Your orders</h3>
Expand All @@ -35,7 +35,7 @@ <h3 class="panel-title" data-i18n="accountsUI.usersOrders">User's orders</h3>
{{/if}}
</div>
<div class="panel-content">
{{> dashboardOrdersList data=userOrders}}
{{> userOrdersList data=userOrders}}
</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template name="userOrdersList">
<div>
{{> React completedOrders }}
</div>

</template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Template } from "meteor/templating";
import UserOrdersList from "/imports/plugins/core/accounts/client/containers/userOrdersListContainer";

/**
* userOrdersList helpers
*
*/
Template.userOrdersList.helpers({
// Returns React Component
completedOrders() {
let orders;

if (Template.currentData() && Template.currentData().data) {
orders = Template.currentData().data.fetch();
} else {
orders = [];
}

return { component: UserOrdersList,
orders
};
}
});
71 changes: 45 additions & 26 deletions imports/plugins/core/checkout/client/components/completedOrder.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@ import AddEmail from "./addEmail";
* @property {Object} orderSummary - An object containing the items making up the order summary
* @property {Array} paymentMethod - An array of paymentMethod objects
* @property {Function} handleDisplayMedia - A function for displaying the product image
* @property {Booleam} isProfilePage - A boolean value that checks if current page is user profile page
* @return {Node} React node containing the top-level component for displaying the completed order/receipt page
*/
const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, handleDisplayMedia }) => {
const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, handleDisplayMedia, isProfilePage }) => {
if (!order) {
return (
<Components.NotFound
Expand All @@ -27,8 +28,13 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
/>
);
}
return (
<div className="container order-completed">

let headerText;

if (isProfilePage) {
headerText = (<p className="order-id"><strong>Order ID </strong>{orderId}</p>);
} else {
headerText = (
<div className="order-details-header">
{/* This is the left side / main content */}
<h3><Components.Translation defaultValue="Thank You" i18nKey={"cartCompleted.thankYou"} /></h3>
Expand All @@ -37,10 +43,15 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
<AddEmail order={order} orderEmail={order.email} />
{/* This is the left side / main content*/}
</div>
);
}

return (
<div className="container order-completed">
{ headerText }
<div className="order-details-main">
<div className="order-details-content-title">
<Components.Translation defaultValue="Your Items" i18nKey={"cartCompleted.yourItems"} />
<p><Components.Translation defaultValue="Your Items" i18nKey={"cartCompleted.yourItems"} /></p>
</div>
{shops.map(function (shop) {
const shopKey = Object.keys(shop);
Expand All @@ -51,6 +62,7 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
key={shopKey}
shippingMethod={shop[shopKey].shippingMethod}
handleDisplayMedia={handleDisplayMedia}
isProfilePage={isProfilePage}
/>
);
})}
Expand All @@ -59,30 +71,36 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
<div className="order-details-side">

{/* This is the right side / side content */}
<div className="order-details-content-title">
<Components.Translation defaultValue="Shipping Address" i18nKey={"cartCompleted.shippingAddress"} />
</div>
{orderSummary.shipping.map((shipment) => {
if (shipment.address.fullName || shipment.address.address1) {
return <div className="order-details-info-box" key={shipment._id}>
<div className="order-details-info-box-content">
<p>
{shipment.address.fullName}<br/>
{shipment.address.address1}<br/>
{shipment.address.city}, {shipment.address.region} {shipment.address.postal} {shipment.address.country}
</p>
</div>
</div>;
}
})}
<div className="shipping-payment-details">
<div className="shipping-info">
<div className="order-details-content-title">
<p> <Components.Translation defaultValue="Shipping Address" i18nKey={"cartCompleted.shippingAddress"} /></p>
</div>
{orderSummary.shipping.map((shipment) => {
if (shipment.address.fullName || shipment.address.address1) {
return <div className="order-details-info-box" key={shipment._id}>
<div className="order-details-info-box-content">
<p>
{shipment.address.fullName}<br/>
{shipment.address.address1}<br/>
{shipment.address.city}, {shipment.address.region} {shipment.address.postal} {shipment.address.country}
</p>
</div>
</div>;
}
})}
</div>

<div className="order-details-content-title">
<Components.Translation defaultValue="Payment Method" i18nKey={"cartCompleted.paymentMethod"} />
<div className="payment-info">
<div className="order-details-content-title">
<p><Components.Translation defaultValue="Payment Method" i18nKey={"cartCompleted.paymentMethod"} /></p>
</div>
{paymentMethods.map(function (paymentMethod) {
return <CompletedOrderPaymentMethod key={paymentMethod.key} paymentMethod={paymentMethod} />;
})}
</div>
</div>
{paymentMethods.map(function (paymentMethod) {
return <CompletedOrderPaymentMethod key={paymentMethod.key} paymentMethod={paymentMethod} />;
})}
<CompletedOrderSummary shops={shops} orderSummary={orderSummary} />
<CompletedOrderSummary shops={shops} orderSummary={orderSummary} isProfilePage={isProfilePage} />
{/* This is the right side / side content */}
</div>

Expand All @@ -92,6 +110,7 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h

CompletedOrder.propTypes = {
handleDisplayMedia: PropTypes.func,
isProfilePage: PropTypes.bool,
order: PropTypes.object,
orderId: PropTypes.string,
orderSummary: PropTypes.object,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CompletedOrderItem = ({ item, handleDisplayMedia }) => {
<div className="row order-details-line">
<div className="order-details-media"><img src={image} /></div>
<div className="order-details-title">{item.product.title}<p>{item.variants.title}</p></div>
<div className="order-details-quantity">{item.quantity}</div>
<div className="order-details-quantity"><span>{item.quantity}</span></div>
<div className="order-details-price"><Components.Currency amount={item.variants.price} /></div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,19 @@ import ShopOrderSummary from "./shopOrderSummary";
* @param {Object} props - React PropTypes
* @property {Array} shops - An array of summary information broken down by shop
* @property {Object} orderSummary - An object representing the "bottom line" summary for the order
* @property {boolean} isProfilePage - Checks if current page is Profile Page
* @return {Node} React node containing the order summary broken down by shop
*/
const CompletedOrderSummary = ({ shops, orderSummary }) => {
const CompletedOrderSummary = ({ shops, orderSummary, isProfilePage }) => {
return (
<div>
<div className="order-details-content-title">
<Components.Translation defaultValue="Your Cart" i18nKey={"cartCompleted.yourCart"} />
<p><Components.Translation defaultValue="Order Summary" i18nKey={"cartCompleted.orderSummary"} /></p>
</div>
<div className="order-details-info-box">
{shops.map((shop) => {
const shopKey = Object.keys(shop);
return <ShopOrderSummary shopSummary={shop[shopKey]} key={shopKey} />;
return <ShopOrderSummary shopSummary={shop[shopKey]} key={shopKey} isProfilePage={isProfilePage} />;
})}
<hr />
{orderSummary.discounts > 0 &&
Expand All @@ -47,6 +48,7 @@ const CompletedOrderSummary = ({ shops, orderSummary }) => {
};

CompletedOrderSummary.propTypes = {
isProfilePage: PropTypes.bool,
orderSummary: PropTypes.object,
shops: PropTypes.array
};
Expand Down
Loading

0 comments on commit aa2a1ea

Please sign in to comment.