Use "Completed Order" component in Profile page #3112

efalayi · 2017-10-15T21:11:47Z

Resolves #3018
Displayed orders list on user profile page uses the old completed order Blaze template but we should reuse the Completed Order component that was converted to React and made marketplace-aware.

Fix

Create a template for userOrdersList to manage list display
Create an helper function for userOrdersList template that return the CompletedOrder react component
Create a container component for userOrdersList
Fix CSS style errors
Update profile template with new template

Test

Login as admin
Create an order
Navigate to user profile page
Scroll to displayed user order
Observe that displayed list matches the completedOrder template

- Create a template for userOrdersList - Create an helper function for userOrdersList - Fix CSS style errors - Update profile template with new template

brent-hoover · 2017-10-16T01:00:28Z

@efalayi As I've mentioned before, when we want Ryan to review something let's add the design-review label, not add him as a reviewer.

brent-hoover · 2017-10-16T01:24:21Z

So you will need to make some adjustments to the completed order component because some of those elements don't make sense within the context of the profile page, e.g. the giant "Thank you".

brent-hoover

Let's make sure that everything we display makes sense within the context of the user profile.

brent-hoover · 2017-10-16T01:27:17Z

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

+import CompletedOrder from "/imports/plugins/core/checkout/client/components/completedOrder";
+
+/**
+ * @method handleDisplayMedia


Isn't there a way we could be rendering the Completed Order container rather than duplicating all this code?

brent-hoover · 2017-10-16T01:27:52Z

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

+      <span data-i18n="cartCompleted.noOrdersFound">No orders found.</span>
+    </div>
+  {{/each}}
+</template>


Missing CR/LF

- Refactor userOrdersList helper function

- Remove margin-bottom

rymorgan · 2017-10-16T19:54:46Z

Two things:

Let's tweak the layout so that the items and cart portion stretch across the full box
Also, on the user profile, the title should change from 'Your cart' to 'Order summary'

efalayi · 2017-10-16T22:00:59Z

@ryan should the tweak in layout be specific to just the user profile page?

rymorgan · 2017-10-16T23:08:05Z

@efalayi Yep, only on the user profile page.

efalayi · 2017-10-17T15:27:24Z

@ryan I just observed that the layout above is a bit different from the one here: https://scene.zeplin.io/project/58af8900737c137280322bd6/screen/59b7272087fcafc969870826. Do we still intend to use the layout on zeplin?

rymorgan · 2017-10-17T19:20:36Z

@efalayi The layout in Zeplin is where we are going in the future w/ a refreshed design of our user profile views. The issue we are working in this PR is using the component consistently. So use the designs I provided here vs the Zeplin ones, which we will tackle when we work on the rest of the user profile updates.

- Fix CSS styles on profile page

efalayi · 2017-10-18T11:34:12Z

@zenweasel @rymorgan I've implemented all requested changes on this PR.

…date-esther-fix-issue-3018

…merce/reaction into update-esther-fix-issue-3018

rymorgan · 2017-10-18T18:54:06Z

@efalayi I'm seeing some formatting problems and after that, this PR should be good from a design perspective.

Need to vertically center align the copy in the rows for 'Your items'.

Need to fix casing

On mobile -
You can reduce the padding by a half.
Stack shipping address and payment method.
Make sure the containers are all centered. (email/password, your orders, ad address) and not getting cut off.

- Aligns items properly - Make titles sentence case

…date-esther-fix-issue-3018

efalayi · 2017-10-19T08:55:04Z

@rymorgan I've updated the PR with the changes specified.

rymorgan · 2017-10-19T17:48:19Z

A few of my comments didn't get addressed yet.

Match the spacing between outer box and inner box. The 'Your orders' box should match the address box. So, we need to reduce the spacing to match.

I know this wasn't in the original ticket, but while we are on this page, I'd like to fix the casing issue on the address book title. Should read 'Address book'.

I also noticed two other spacing issues see below:

The spacing is inconsistent between all of the boxes. All the boxes w/ title should have even spacing between them. The Your items box has more space both above and below than it should. This is happening on mobile and desktop.

There's an awkward unevenness between the shipping and payment boxes on desktop.

- Fix element margin and padding - Create list component for orders - Refactor code - Add JSDoc

efalayi · 2017-10-21T07:13:15Z

@zenweasel I created an OrdersList component as you suggested and refactored the code. @rymorgan the css issues have also been fixed.

brent-hoover · 2017-10-24T18:08:26Z

@rymorgan Are we will saying "Your cart" in the completed order page? Should we just say "Your items"?

brent-hoover · 2017-10-24T19:46:07Z

@efalayi I spoke with @rymorgan and we agreed we should make it "Your items" (rather than You cart) on the completed order page as well as the profile page. Also we want to add Order ID on the Account version. Ryan has updated the comp.

rymorgan · 2017-10-24T19:55:00Z

Here's the profile comp with the order id.

efalayi · 2017-10-24T22:03:59Z

I'll get to it and update the PR asap.

efalayi · 2017-10-24T22:44:47Z

@zenweasel @rymorgan after making the change, this is what completed order page looks like:

Your items is repeated twice. I'm not sure what the first does though.

- Fix css styles

rymorgan · 2017-10-25T00:22:36Z

- Fix error display

efalayi · 2017-10-25T22:19:34Z

@zenweasel I just updated the PR with the changes. I noticed that no message was displayed if the user has no orders (that's now fixed in the update).

brent-hoover

A few code changes here still. Mostly want to try and eliminate as much Blaze code as we can.

brent-hoover · 2017-10-31T18:03:39Z

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

+ * @since 1.5.1
+ * @return {Array} - an array of orders
+ */
+function getOrders() {


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.

brent-hoover · 2017-10-31T18:04:29Z

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

+      {{> React completedOrders }}
+    </div> 
+  {{else}}
+    <div class="alert alert-info">


The component should be handling both the found and not found cases.

Okay. I'll create functions to render found and not found cases in the component.

brent-hoover · 2017-10-31T18:06:00Z

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

-  return (
-    <div className="container order-completed">
+
+  let headerText;


This component should not need to be aware of what route it is in. It should be handled by passing in a prop. Components should be as dumb as possible.

brent-hoover · 2017-10-31T18:06:54Z

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

@@ -10,16 +9,24 @@ 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


Consistent casing for Javascript types

brent-hoover · 2017-10-31T18:07:53Z

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

  return (
    <div className="order-details-shop-breakdown">
      {/* This is the left side / main content */}
      <div className="order-details-info-box">
        <div className="store-detail-box">
          <span className="order-details-store-title">{shopName}</span>
-          <span className="order-details-shipping-name">{shippingMethod.carrier} - {shippingMethod.label}</span>
+          <span className="order-details-shipping-name">{shippingName}</span>


Why was this changed?

shippingName varies depending on whether the current page is profile page. It is defined in line 16.

brent-hoover · 2017-10-31T18:08:25Z

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

@@ -6,9 +6,11 @@ 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


Consistent casing

brent-hoover · 2017-10-31T18:21:18Z

Still not exactly right on mobile devices

brent-hoover · 2017-10-31T18:24:37Z

Seems like this order break could be delineated better. Really gets lost on mobile.

rymorgan · 2017-10-31T20:16:06Z

@zenweasel Agree, let's add a rule between different orders. Two things:

The orders ID text should be 16px not 14px font. Right now it's smaller than everything else.
Let's add a rule between the orders. The rule should not extend across the whole container. It should be the width of the order box. Here's a mock.

efalayi · 2017-11-01T04:24:25Z

@zenweasel at what screen size does this occur?

I just tested with chrome tools.

- Fix css styles - Fix typo errors

…e-3018 Use "Completed Order" component in Profile page

- Create new branch off release-1.5.1

76a4763

- Create a template for userOrdersList - Create an helper function for userOrdersList - Fix CSS style errors - Update profile template with new template

efalayi requested review from brent-hoover and rymorgan October 15, 2017 21:12

brent-hoover removed the request for review from rymorgan October 16, 2017 01:06

brent-hoover added the design-review label Oct 16, 2017

brent-hoover requested changes Oct 16, 2017

View reviewed changes

Esther Falayi added 2 commits October 16, 2017 12:28

- Create a container file for userOrdersList

c3b805f

- Refactor userOrdersList helper function

- Display orderID as userOrdersList header in profile page

8837002

- Remove margin-bottom

rymorgan removed the design-review label Oct 16, 2017

- Fix layout on profile page

faf620e

efalayi changed the title ~~Use "Completed Order" component in Profile page~~ [WIP] Use "Completed Order" component in Profile page Oct 18, 2017

- Refactor code

2e655bd

- Fix CSS styles on profile page

efalayi changed the base branch from release-1.5.1 to master October 18, 2017 11:47

Esther Falayi and others added 3 commits October 18, 2017 12:48

Merge branch 'master' of github.com:reactioncommerce/reaction into up…

2974d80

…date-esther-fix-issue-3018

Merge branch 'master' into update-esther-fix-issue-3018

5a44015

Merge branch 'update-esther-fix-issue-3018' of github.com:reactioncom…

745a1d3

…merce/reaction into update-esther-fix-issue-3018

Esther Falayi added 2 commits October 19, 2017 09:36

- Reduce padding on smaller screens

208f828

- Aligns items properly - Make titles sentence case

Merge branch 'master' of github.com:reactioncommerce/reaction into up…

7cbf6a8

…date-esther-fix-issue-3018

- Conditionally display delivery date

c884282

- Fix sentence case css style

d1a0899

- Fix element margin and padding - Create list component for orders - Refactor code - Add JSDoc

efalayi changed the title ~~[WIP] Use "Completed Order" component in Profile page~~ Use "Completed Order" component in Profile page Oct 23, 2017

brent-hoover added the design-review label Oct 24, 2017

- Change cart to items in completed orders page

214c958

- Fix css styles

- Fix translation

8ab74e0

- Fix error display

brent-hoover requested changes Oct 31, 2017

View reviewed changes

- Refactor code

d6030d2

- Fix css styles - Fix typo errors

brent-hoover approved these changes Nov 1, 2017

View reviewed changes

brent-hoover changed the base branch from master to release-1.5.6 November 2, 2017 21:39

brent-hoover merged commit aa2a1ea into release-1.5.6 Nov 2, 2017

brent-hoover deleted the update-esther-fix-issue-3018 branch November 2, 2017 21:42

brent-hoover mentioned this pull request Nov 2, 2017

Release 1.5.6 #3230

Merged

spencern mentioned this pull request Nov 4, 2017

Use "Completed Order" component in Profile page #3018

Closed

Akarshit pushed a commit that referenced this pull request Jan 7, 2018

Merge pull request #3112 from reactioncommerce/update-esther-fix-issu…

3010f85

…e-3018 Use "Completed Order" component in Profile page

Use "Completed Order" component in Profile page #3112

Use "Completed Order" component in Profile page #3112

Conversation

efalayi commented Oct 15, 2017 • edited Loading

Fix

Test

brent-hoover commented Oct 16, 2017

brent-hoover commented Oct 16, 2017

brent-hoover left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rymorgan commented Oct 16, 2017 • edited Loading

efalayi commented Oct 16, 2017

rymorgan commented Oct 16, 2017

efalayi commented Oct 17, 2017 • edited Loading

rymorgan commented Oct 17, 2017

efalayi commented Oct 18, 2017

rymorgan commented Oct 18, 2017 • edited Loading

efalayi commented Oct 19, 2017

rymorgan commented Oct 19, 2017 • edited Loading

efalayi commented Oct 21, 2017

brent-hoover commented Oct 24, 2017

brent-hoover commented Oct 24, 2017

rymorgan commented Oct 24, 2017 • edited Loading

efalayi commented Oct 24, 2017

efalayi commented Oct 24, 2017

rymorgan commented Oct 25, 2017

efalayi commented Oct 25, 2017

brent-hoover left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brent-hoover commented Oct 31, 2017

brent-hoover commented Oct 31, 2017

rymorgan commented Oct 31, 2017 • edited Loading

efalayi commented Nov 1, 2017

efalayi commented Oct 15, 2017 •

edited

Loading

rymorgan commented Oct 16, 2017 •

edited

Loading

efalayi commented Oct 17, 2017 •

edited

Loading

rymorgan commented Oct 18, 2017 •

edited

Loading

rymorgan commented Oct 19, 2017 •

edited

Loading

rymorgan commented Oct 24, 2017 •

edited

Loading

rymorgan commented Oct 31, 2017 •

edited

Loading