From d6030d2b8b6d56487703829cecf054381177d713 Mon Sep 17 00:00:00 2001 From: Esther Falayi Date: Wed, 1 Nov 2017 06:01:39 +0100 Subject: [PATCH] - Refactor code - Fix css styles - Fix typo errors --- .../accounts/client/components/ordersList.js | 45 ++++++++++++------- .../containers/userOrdersListContainer.js | 14 ++++-- .../templates/profile/userOrdersList.html | 13 ++---- .../templates/profile/userOrdersList.js | 43 +++++------------- .../client/components/completedOrder.js | 11 +++-- .../client/components/completedShopOrders.js | 2 +- .../client/components/shopOrderSummary.js | 2 +- .../containers/completedOrderContainer.js | 1 + .../client/styles/accounts/accounts.less | 12 ++++- 9 files changed, 72 insertions(+), 71 deletions(-) diff --git a/imports/plugins/core/accounts/client/components/ordersList.js b/imports/plugins/core/accounts/client/components/ordersList.js index ac2016a360c..2f6c1ddf840 100644 --- a/imports/plugins/core/accounts/client/components/ordersList.js +++ b/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 ( +
+ {allOrdersInfo.map((order) => { + const orderKey = order.orderId; + return ( + + ); + })} +
+ ); + } return ( -
- {allOrdersInfo.map((order) => { - const orderKey = order.orderId; - return ( - - ); - })} +
+ No orders found.
); } diff --git a/imports/plugins/core/accounts/client/containers/userOrdersListContainer.js b/imports/plugins/core/accounts/client/containers/userOrdersListContainer.js index 4aac1e9718a..3a391472a5e 100644 --- a/imports/plugins/core/accounts/client/containers/userOrdersListContainer.js +++ b/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 }); } } diff --git a/imports/plugins/core/accounts/client/templates/profile/userOrdersList.html b/imports/plugins/core/accounts/client/templates/profile/userOrdersList.html index 4a69eac78cd..9495f84652e 100644 --- a/imports/plugins/core/accounts/client/templates/profile/userOrdersList.html +++ b/imports/plugins/core/accounts/client/templates/profile/userOrdersList.html @@ -1,11 +1,6 @@ diff --git a/imports/plugins/core/accounts/client/templates/profile/userOrdersList.js b/imports/plugins/core/accounts/client/templates/profile/userOrdersList.js index 7da7a1f3ebc..5bd191debc7 100644 --- a/imports/plugins/core/accounts/client/templates/profile/userOrdersList.js +++ b/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 }; } diff --git a/imports/plugins/core/checkout/client/components/completedOrder.js b/imports/plugins/core/checkout/client/components/completedOrder.js index 48750b16d22..ab9c088199f 100644 --- a/imports/plugins/core/checkout/client/components/completedOrder.js +++ b/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 ( Order ID {orderId}

); - isProfilePage = true; + if (isProfilePage) { + headerText = (

Order ID {orderId}

); } else { headerText = (
@@ -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, diff --git a/imports/plugins/core/checkout/client/components/completedShopOrders.js b/imports/plugins/core/checkout/client/components/completedShopOrders.js index 25c34b01ef2..3c2dd338f8e 100644 --- a/imports/plugins/core/checkout/client/components/completedShopOrders.js +++ b/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 }) => { diff --git a/imports/plugins/core/checkout/client/components/shopOrderSummary.js b/imports/plugins/core/checkout/client/components/shopOrderSummary.js index f089e29b0df..f3fc4914ba6 100644 --- a/imports/plugins/core/checkout/client/components/shopOrderSummary.js +++ b/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 }) => { diff --git a/imports/plugins/core/checkout/client/containers/completedOrderContainer.js b/imports/plugins/core/checkout/client/containers/completedOrderContainer.js index 78a3cf06b7e..d33b8005c2e 100644 --- a/imports/plugins/core/checkout/client/containers/completedOrderContainer.js +++ b/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, diff --git a/imports/plugins/included/default-theme/client/styles/accounts/accounts.less b/imports/plugins/included/default-theme/client/styles/accounts/accounts.less index f4af2bd4d02..c0aba198bcd 100644 --- a/imports/plugins/included/default-theme/client/styles/accounts/accounts.less +++ b/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%);