Use "Completed Order" component in Profile page

imports/plugins/core/accounts/client/components/ordersList.js

@@ -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;

imports/plugins/core/accounts/client/containers/userOrdersListContainer.js

@@ -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);

imports/plugins/core/accounts/client/index.js

@@ -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";
@@ -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";

imports/plugins/core/accounts/client/templates/profile/profile.html

@@ -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>
@@ -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>

imports/plugins/core/accounts/client/templates/profile/userOrdersList.html

@@ -0,0 +1,6 @@
+<template name="userOrdersList">
+  <div>
+    {{> React completedOrders }}
+  </div> 
+
+</template>

imports/plugins/core/accounts/client/templates/profile/userOrdersList.js

@@ -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
+    };
+  }
+});

imports/plugins/core/checkout/client/components/completedOrder.js

@@ -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
@@ -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>
@@ -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);
@@ -51,6 +62,7 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
               key={shopKey}
               shippingMethod={shop[shopKey].shippingMethod}
               handleDisplayMedia={handleDisplayMedia}
+              isProfilePage={isProfilePage}
             />
           );
         })}
@@ -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>
 
@@ -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,

imports/plugins/core/checkout/client/components/completedOrderItem.js

@@ -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>
   );

imports/plugins/core/checkout/client/components/completedOrderSummary.js

@@ -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 &&
@@ -47,6 +48,7 @@ const CompletedOrderSummary = ({ shops, orderSummary }) => {
 };
 
 CompletedOrderSummary.propTypes = {
+  isProfilePage: PropTypes.bool,
   orderSummary: PropTypes.object,
   shops: PropTypes.array
 };