[CHEC-1009] Customer account page

[kvisca]

Adding a customer's account page with an individual order view page.

Account Page

Order Page

[linear[bot]]

CHEC-1009 Build a customer's home page

After a user has logged in they'll be sent to this page. We can show some super basic information such as: * Their name and email address * A list of their orders These are available from the following APIs: * `GET /v1/customers/{customer_id}` * `GET /v1/customers/{customer_id}/orders` Both of those APIs require knowledge of the customer ID, which is returned in the login handler (CHEC-1008), and the customer JWT which is also returned in that task. We can probably store these in session storage or something… cc @guy

[robbieaverill]

A couple of minor things from your screenshots: can you use sentence casing, and your dates don't look like they're being parsed correctly

[robbieaverill]

I've rebased locally this onto #152 in order to test it because we broke things. Some feedback:

• We should probably use the customer_reference attribute here instead of the order ID e.g. CMMRC-120465. Also applies to the page title. IDs are more developer focused where customer references are more consumer focused.
• If you hit /login when you're already logged in it should redirect you to /account, it doesn't at the moment
• Billing address (and shipping while you're at it) needs to handle parts of the object that are null:
• The billing and shipping cards are pretty close together. Suggest adding pb-4 or something to the top card so it spaces out a little better
• This page is missing a "< Back to My Account" breadcrumb link at the top I think. We have a design pattern for this in the checkout you could probably re-use:

There are also a couple of console errors on this page for me:

I don't think this is related to this PR specifically, but I think we should change the "Logout" link in the top right header when you're logged in to "Account" which sends you to your account, then put the Logout link somewhere on the account page:

[robbieaverill]

Hey @kvisca, still a few things:

• Billing address undefined
• Sentence casing
• Clicking logout throws an error:
• Error parsing date:

Functionally, I notice that every click from "My account" to an order, back again, to another order etc, reloads everything in Redux (categories, products, cart). This is definitely not ideal.

Good news is this looks good on mobile!

[kvisca]

@robbieaverill Thanks for the feedback, should be good to go now. Let me know if you catch anything else!

[robbieaverill]

@kvisca:

• Change to "My account":
• Change to "Ordered on" or "Order placed on" or something:
• Do you think this screen needs something like a "continue shopping" button or something to take you somewhere?

I haven't reviewed the code at all yet, only UI so far.

[kvisca]

I haven't reviewed the code at all yet, only UI so far.

Thanks, @robbieaverill. I've updated as requested.

[robbieaverill]

Still getting this:

customerAccountPage has customer: {} in props. Otherwise I can't see where this would come from.

This shows when I first log in. I can navigate into an order view and back again and it will still show. When I refresh the page it renders the date correctly. At that point the customer object in props contains my information.

Functionally, I notice that every click from "My account" to an order, back again, to another order etc, reloads everything in Redux (categories, products, cart). This is definitely not ideal.

This is still happening

[kvisca]

Lots of these comments are about linting. Please make sure you lint your code (yarn lint).

Just so you're aware, yarn lint doesn't catch any of this on this project.

[robbieaverill]

Cool, I'll update the linting rules later. In the meantime please take advantage of the human linting results above 😄

[kvisca]

Cool, I'll update the linting rules later. In the meantime please take advantage of the human linting results above 😄

Much appreciated 👍

[robbieaverill]

Nice work. We can address any outstanding issues in new PRs in future 👍