- Refactor code

- Fix css styles
- Fix typo errors

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

@@ -12,27 +12,38 @@ import CompletedOrder from "../../../checkout/client/components/completedOrder";
 class OrdersList extends Component {
   static propTypes = {
     allOrdersInfo: PropTypes.array,
-    handleDisplayMedia: PropTypes.func
+    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>
-        {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}
-            />
-          );
-        })}
+      <div className="alert alert-info">
+        <span data-i18n="cartCompleted.noOrdersFound">No orders found.</span>
       </div>
     );
   }

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

@@ -1,5 +1,6 @@
 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";
@@ -35,8 +36,13 @@ function composer(props, onData) {
   // Get user order from props
   const orders = props.orders;
   const allOrdersInfo = [];
+  let isProfilePage = false;
 
-  if (orders) {
+  if (Router.getRouteName() === "account/profile") {
+    isProfilePage = true;
+  }
+
+  if (orders.length > 0) {
     orders.map((order) => {
       const imageSub = Meteor.subscribe("CartImages", order.items);
       const orderSummary = {
@@ -63,11 +69,13 @@ function composer(props, onData) {
       }
     });
     onData(null, {
-      allOrdersInfo
+      allOrdersInfo,
+      isProfilePage
     });
   } else {
     onData(null, {
-      orders
+      orders,
+      isProfilePage
     });
   }
 }

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

@@ -1,11 +1,6 @@
 <template name="userOrdersList">
-  {{#if hasData data=data}}
-    <div>
-      {{> React completedOrders }}
-    </div> 
-  {{else}}
-    <div class="alert alert-info">
-      <span data-i18n="cartCompleted.noOrdersFound">No orders found.</span>
-    </div>
-  {{/if}}
+  <div>
+    {{> React completedOrders }}
+  </div> 
+
 </template>

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

@@ -1,45 +1,22 @@
-import { Meteor } from "meteor/meteor";
 import { Template } from "meteor/templating";
-import { Orders } from "/lib/collections";
-import { Reaction } from "/client/api";
-import CompletedOrder from "/imports/plugins/core/accounts/client/containers/userOrdersListContainer";
-
-/**
- * @method getOrders
- * @summary returns user's orders
- * @since 1.5.1
- * @return {Array} - an array of orders
- */
-function getOrders() {
-  const targetUserId = Reaction.Router.getQueryParam("userId") ||
-  Meteor.userId();
-  return Orders.find({ userId: targetUserId }, {
-    sort: {
-      createdAt: -1
-    },
-    limit: 25
-  });
-}
+import UserOrdersList from "/imports/plugins/core/accounts/client/containers/userOrdersListContainer";
 
 /**
  * userOrdersList helpers
  *
  */
 Template.userOrdersList.helpers({
-  hasData(data) {
-    if (data.hash.data) {
-      if (data.hash.data.count() > 0) {
-        return true;
-      }
-      return false;
-    }
-    return false;
-  },
-
   // Returns React Component
   completedOrders() {
-    const orders = getOrders();
-    return { component: CompletedOrder,
+    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

@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Components } from "@reactioncommerce/reaction-components";
-import { Router } from "/client/modules/router/";
 import CompletedShopOrders from "./completedShopOrders";
 import CompletedOrderPaymentMethod from "./completedOrderPaymentMethods";
 import CompletedOrderSummary from "./completedOrderSummary";
@@ -16,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
@@ -30,11 +30,9 @@ const CompletedOrder = ({ order, orderId, shops, orderSummary, paymentMethods, h
   }
 
   let headerText;
-  let isProfilePage = false;
 
-  if (Router.getRouteName() === "account/profile") {
-    headerText = (<p><strong>Order ID </strong>{orderId}</p>);
-    isProfilePage = true;
+  if (isProfilePage) {
+    headerText = (<p className="order-id"><strong>Order ID </strong>{orderId}</p>);
   } else {
     headerText = (
       <div className="order-details-header">
@@ -112,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/completedShopOrders.js

@@ -9,7 +9,7 @@ import CompletedOrderItem from "./completedOrderItem";
  * @property {String} shopName - The name of the shop
  * @property {Array} items - an array of individual items for this shop
  * @property {Function} handleDisplayMedia - A function for displaying product images
- * @property {boolean} isProfilePage - Checks if current page is Profile Page
+ * @property {boolean} isProfilePage - Checks if current page is profile page
  * @return {Node} React node containing the break down of the order by Shop
  */
 const CompletedShopOrders = ({ shopName, items, handleDisplayMedia, shippingMethod, isProfilePage }) => {

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

@@ -6,7 +6,7 @@ import { Components, registerComponent } from "@reactioncommerce/reaction-compon
  * @summary Displays the order summary for each shop
  * @param {Object} props - React PropTypes
  * @property {Object} shopSummary - An object representing the summary information for this Shop
- * @property {boolean} isProfilePage - Checks if current page is Profile Page
+ * @property {boolean} isProfilePage - Checks if current page is profile page
  * @return {Node} React node containing the summary information for each shop
  */
 const ShopOrderSummary = ({ shopSummary, isProfilePage }) => {

imports/plugins/core/checkout/client/containers/completedOrderContainer.js

@@ -66,6 +66,7 @@ function composer(props, onData) {
         const productImages = Media.find().fetch();
 
         onData(null, {
+          isProfilePage: false,
           shops: order.getShopSummary(),
           order,
           orderId,

imports/plugins/included/default-theme/client/styles/accounts/accounts.less

@@ -74,7 +74,17 @@
   }
   .order-completed{
     width: inherit;
-    margin: 20px 0px 20px 0px;
+    margin: 20px 0px 30px 0px;
+    padding-bottom: 50px;
+    border-bottom: 1px solid @border-color;
+    p.order-id{
+      font-size: 16px;
+    }
+  }
+  .order-completed:last-child {
+    margin-bottom: 20px;
+    padding-bottom: 0px;
+    border-bottom: none;
   }
   .order-details-main {
     .flex(0 0 100%);