feat: add Orders to Account Profile #507

kieckhafer · 2019-02-27T07:01:01Z

Expands upon #499 to add Orders data to profile page
Impact: minor
Type: feature

Issue

Add Orders data to Account Profile

Solution

Split existing orders page into profileAddressBook and profileOrders pages. This is necessary due to the way we do pagination, our existing method broke when using asPath to display different components (Orders or AddressBook) on a single page based on the URL.
Add 5 and 10 page size to our default pagination. Since we use the same component for CatalogItems / Tags, and now orders, and these return various dimensions of results we should allow more than just 20,60, or 100 for the results, as 20 is far too many OrderCard's to scroll through
Update Thank You page after an order is placed to use OrderCard, with the Header portion expanded by default (it's not expanded by default on the profile page).

Breaking changes

None

Testing

Visit /profile/orders as a non-logged in user, and see a 404 / page not found
Login as a user, create 6+ orders (to see pagination)
Visit /profile/orders as a logged in user, see that orders show up and match our designs: https://zpl.io/V0ypYWR
Move orders into different workflow statuses
See orders are filtered as they should

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…wAccountPage

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…wAccountPage

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…ent Library updates Signed-off-by: Erik Kieckhafer <ek@ato.la>

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…wAccountPage

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…gs (orders) Signed-off-by: Erik Kieckhafer <ek@ato.la>

Signed-off-by: Erik Kieckhafer <ek@ato.la>

…cross app Signed-off-by: Erik Kieckhafer <ek@ato.la>

…commerce/reaction-next-starterkit into feat-kieckhafer-newAccountPage

nnnnat

This is looking great. I did notice this copy issue with the order status labels.

This happens for me with all the status except "new"

kieckhafer · 2019-02-28T19:05:17Z

@nnnnat Yes, that is expected if you haven't added the translations data. Instructions are here: reactioncommerce/reaction#4981

Let me know if that fixes the issue. "new" is probably also wrong, it's probably not capitalized in your version. If you add them to the settings it'll change.

nnnnat · 2019-02-28T19:59:43Z

@kieckhafer that makes sense I'll retest in a bit

aldeed · 2019-03-06T15:21:20Z

@kieckhafer Regarding the copy issue Nat mentioned, it's still possible that people could eventually have long status labels when we allow customizing them. Can we do something with CSS, maybe overflow-wrap: break-word;, on the status badge to prevent it overlapping the date? cc @cassytaylor

aldeed

Mostly looks good. Just a couple small suggestions.

aldeed · 2019-03-06T15:23:28Z

package.json

@@ -48,6 +48,7 @@
    "compression": "^1.7.3",
    "cookie-parser": "^1.4.3",
    "cookie-session": "^2.0.0-beta.3",
+    "date-fns": "^1.30.1",


Was there a decision to use date-fns instead of moment for new projects? It's fine with me but I'd like to see the decision recorded and communicated if it hasn't been.

We had a chat in Slack about a light(er)weight solution for dates, considering we need very little. Made a DR and tagged you in Notion.

src/components/OrderCard/OrderCard.js

aldeed · 2019-03-06T15:31:19Z

src/components/OrderCardFulfillmentGroup/OrderCardFulfillmentGroup.js

+  }
+
+  onTrackShipmentButtonClick() {
+    // TODO: What do we do to track a shipment? Link to a specific provider website?


Maybe I'll add trackingUrl prop on fulfillmentGroup in my tracking PR, and then you can render that in a link here? Seems better than recording the carrier and trying to dynamically build links to different carriers.

Yeah, that sounds like a good idea.

…wAccountPage

Signed-off-by: Erik Kieckhafer <ek@ato.la>

@aldeed

@aldeed updated based on comments, ready for a look

kieckhafer · 2019-03-06T23:55:01Z

@aldeed did not update the long name on the Badge yet. Created an issue here to have design take a look since it shouldn't be a blocker: #515

Signed-off-by: Erik Kieckhafer <ek@ato.la>

kieckhafer added 30 commits February 11, 2019 18:07

add header / title to Address Book

c4d7d1e

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add ProfileOrders component to Profile page

5448681

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add query and HOC to get multiple orders per accountId

c4a172e

Signed-off-by: Erik Kieckhafer <ek@ato.la>

Merge remote-tracking branch 'origin/develop' into feat-kieckhafer-ne…

201c761

…wAccountPage

use primaryShopId instead of shop._id in withORders

baa027e

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add date-fns for date formatting on account orders page

96bf62e

Signed-off-by: Erik Kieckhafer <ek@ato.la>

Merge remote-tracking branch 'origin/develop' into feat-kieckhafer-ne…

886c093

…wAccountPage

update gql with new edges / node

458a24a

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add language to query

5af41df

Signed-off-by: Erik Kieckhafer <ek@ato.la>

fix proptype

4eaecf6

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add spacing around container

fb67fac

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add ProfileOrders component

39d7b08

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add tracking info to gql query

80e6920

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add new components for OrderCard

fb34f49

Signed-off-by: Erik Kieckhafer <ek@ato.la>

ProfileOrders component

d82ab80

Signed-off-by: Erik Kieckhafer <ek@ato.la>

OrderCard component

c340aa3

Signed-off-by: Erik Kieckhafer <ek@ato.la>

destructure some variables

b3e0692

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add filter to gql query

499d4d7

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add header to addressbook page

38dad5a

Signed-off-by: Erik Kieckhafer <ek@ato.la>

OrderCardSummary component

3ada014

Signed-off-by: Erik Kieckhafer <ek@ato.la>

OrderCardFulfillmentGroup component

3158c57

Signed-off-by: Erik Kieckhafer <ek@ato.la>

update OrderCardSummary to remove styles no longer needed with Compon…

8256e4f

…ent Library updates Signed-off-by: Erik Kieckhafer <ek@ato.la>

add order summary to Order fragment

1acaf8e

Signed-off-by: Erik Kieckhafer <ek@ato.la>

lint fixes

4d170f5

Signed-off-by: Erik Kieckhafer <ek@ato.la>

OrderCardHeader component

336f6e8

Signed-off-by: Erik Kieckhafer <ek@ato.la>

update reaction component library version

f1eb1aa

Signed-off-by: Erik Kieckhafer <ek@ato.la>

update test snapshots

a4721bb

Signed-off-by: Erik Kieckhafer <ek@ato.la>

Merge remote-tracking branch 'origin/develop' into feat-kieckhafer-ne…

4edbb59

…wAccountPage

move order status into it's own badge component

6347b4c

Signed-off-by: Erik Kieckhafer <ek@ato.la>

update tests for all new components

a5b5289

Signed-off-by: Erik Kieckhafer <ek@ato.la>

kieckhafer added 6 commits February 26, 2019 22:14

pass correct query name

f5a068f

Signed-off-by: Erik Kieckhafer <ek@ato.la>

updated snapshots with new data

02adb5f

Signed-off-by: Erik Kieckhafer <ek@ato.la>

lint fix

e8ce8d4

Signed-off-by: Erik Kieckhafer <ek@ato.la>

add more sizes to pagination defaults to allow smaller result groupin…

57bbca5

…gs (orders) Signed-off-by: Erik Kieckhafer <ek@ato.la>

reset search params when switching order type

3522b09

Signed-off-by: Erik Kieckhafer <ek@ato.la>

tests and linting

152d437

Signed-off-by: Erik Kieckhafer <ek@ato.la>

kieckhafer requested review from aldeed and nnnnat February 27, 2019 07:01

kieckhafer and others added 4 commits February 26, 2019 23:32

use new OrderCard for order thank you page

48fa874

Signed-off-by: Erik Kieckhafer <ek@ato.la>

Merge branch 'develop' into feat-kieckhafer-newAccountPage

08849ac

refactor: change isHeaderOpen to isExpanded for better syncronicity a…

0778b80

…cross app Signed-off-by: Erik Kieckhafer <ek@ato.la>

Merge branch 'feat-kieckhafer-newAccountPage' of github.com:/reaction…

1b0e5c2

…commerce/reaction-next-starterkit into feat-kieckhafer-newAccountPage

nnnnat reviewed Feb 28, 2019

View reviewed changes

aldeed previously requested changes Mar 6, 2019

View reviewed changes

kieckhafer added 2 commits March 6, 2019 15:49

Merge remote-tracking branch 'origin/develop' into feat-kieckhafer-ne…

31a60ec

…wAccountPage

add fulfillmentGroup._id as key

241713a

Signed-off-by: Erik Kieckhafer <ek@ato.la>

kieckhafer requested a review from aldeed March 6, 2019 23:51

update snapshots

3b70679

Signed-off-by: Erik Kieckhafer <ek@ato.la>

aldeed approved these changes Mar 7, 2019

View reviewed changes

kieckhafer requested a review from nnnnat March 8, 2019 18:45

kieckhafer merged commit f2eb972 into develop Mar 8, 2019

kieckhafer deleted the feat-kieckhafer-newAccountPage branch March 8, 2019 20:17

jeffcorpuz mentioned this pull request Mar 19, 2019

Release v2.0.0-rc.11 #517

Merged

This was referenced Jul 1, 2019

Release v2.0.0 rc.12 #547

Merged

chore: update changelog + version match #548

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Orders to Account Profile #507

feat: add Orders to Account Profile #507

kieckhafer commented Feb 27, 2019 •

edited

Loading

nnnnat left a comment •

edited

Loading

kieckhafer commented Feb 28, 2019

nnnnat commented Feb 28, 2019

aldeed commented Mar 6, 2019

aldeed left a comment

aldeed Mar 6, 2019

kieckhafer Mar 6, 2019

aldeed Mar 6, 2019

kieckhafer Mar 6, 2019

kieckhafer commented Mar 6, 2019 •

edited

Loading

feat: add Orders to Account Profile #507

feat: add Orders to Account Profile #507

Conversation

kieckhafer commented Feb 27, 2019 • edited Loading

Issue

Solution

Breaking changes

Testing

nnnnat left a comment • edited Loading

Choose a reason for hiding this comment

kieckhafer commented Feb 28, 2019

nnnnat commented Feb 28, 2019

aldeed commented Mar 6, 2019

aldeed left a comment

Choose a reason for hiding this comment

aldeed Mar 6, 2019

Choose a reason for hiding this comment

kieckhafer Mar 6, 2019

Choose a reason for hiding this comment

aldeed Mar 6, 2019

Choose a reason for hiding this comment

kieckhafer Mar 6, 2019

Choose a reason for hiding this comment

kieckhafer commented Mar 6, 2019 • edited Loading

kieckhafer commented Feb 27, 2019 •

edited

Loading

nnnnat left a comment •

edited

Loading

kieckhafer commented Mar 6, 2019 •

edited

Loading