Use "Completed Order" component in Profile page #3112
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| 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 | ||
| } | ||
| render() { | ||
| const { allOrdersInfo, handleDisplayMedia } = this.props; | ||
| 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> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default OrdersList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import { compose, withProps } from "recompose"; | ||
| import { Meteor } from "meteor/meteor"; | ||
| 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 = []; | ||
|
|
||
| if (orders) { | ||
| 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 | ||
| }); | ||
| } else { | ||
| onData(null, { | ||
| orders | ||
| }); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| registerComponent("OrdersList", OrdersList, [ | ||
| withProps(handlers), | ||
| composeWithTracker(composer) | ||
| ]); | ||
|
|
||
| export default compose( | ||
| withProps(handlers), | ||
| composeWithTracker(composer) | ||
| )(OrdersList); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <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}} | ||
| </template> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| 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() { | ||
|
There was a problem hiding this comment. I'm confused as to why we are doing anything at all in the template. If we still need the template at all the only thing it should be doing is rendering the component. |
||
| const targetUserId = Reaction.Router.getQueryParam("userId") || | ||
| Meteor.userId(); | ||
| return Orders.find({ userId: targetUserId }, { | ||
| sort: { | ||
| createdAt: -1 | ||
| }, | ||
| limit: 25 | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * 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, | ||
| orders | ||
| }; | ||
| } | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The component should be handling both the found and not found cases.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Okay. I'll create functions to render found and not found cases in the component.