Venia v2 Cart Page #2084

supernova-at · 2020-01-07T20:44:54Z

Description

Venia v2 separates out the Cart into its own page. This PR lays out the basic structure of the page. Future PRs will populate the page with its actual content / components.

Related Issue

Closes PWA-130.

Acceptance

Verification Stakeholders

@jimbo

Specification

Verification Steps

yarn watch:venia
Navigate to Venia in your browser
Navigate to <your dev site>/cart
Verify that the new Cart page skeleton appears
Verify that if you are not signed in, a "Sign In" button appears
Verify that clicking the "Sign In" button opens the navigation drawer.
Verify that if you are already signed in, the "Sign In" button does not appear
Switch between Desktop and Mobile (< 640px) views

On Mobile:

Verify that the "Recently Viewed" container is not present
Verify that the page is a single column layout
Verify that the "Order Summary" container appears at the bottom

On Desktop:

Verify that the "Recently Viewed" container is present
Verify that the page is split into two columns
Scroll and verify that the "Order Summary" container "sticks" to the side / stays in view. Note that it is expected that it will disappear once you scroll past all of the content.

Screenshots / Screen Captures (if appropriate)

Mobile

Desktop

Checklist

I have updated the documentation accordingly, if necessary.
I have added tests to cover my changes, if necessary.

PWAStudioBot · 2020-01-07T20:49:34Z

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-130.

Generated by 🚫 dangerJS against 2ea98d1

revanth0212

Nice work @supernova-at

A question/suggestion. Other than that, no issues.

packages/venia-ui/lib/components/CartPage/cartPage.js

sirugh

The only thing I really want to see fixed is the css for the order summary, otherwise this is good.

packages/peregrine/lib/talons/CartPage/useCartPage.js

sirugh · 2020-01-08T18:25:28Z

packages/venia-ui/lib/components/CartPage/cartPage.css

+     * TODO: Use CSS Properties (variables) or something instead of hardcoding these. 
+     * min-height of nav header + page spacing + height of page header 
+     */
+    top: calc(3.5rem + 3.5rem + 25px);


This is not sticking as I would expect. Add some extra long text like lorem ipsum and scroll. You'll see that it scrolls off the page.

Oh yeah, that's what

Scroll and verify that the "Order Summary" container "sticks" to the side / stays in view. Note that it is expected that it will disappear once you scroll past all of the content.

was supposed to identify 😛.

If we're talking about the same thing, the fact that you can scroll past the content entirely is a product of a style that gets applied to all pages: the initial height of the page content area is always set to 100vh.

I think once the components on this page are present we won't be able to repro this.

sirugh · 2020-01-08T18:26:41Z

packages/venia-ui/lib/components/CartPage/cartPage.css

+
+.sign_in {
+    font-weight: bold;
+    text-decoration: underline;


This text looks a little larger than in the mocks, at least in relation to its counterpart in the header, "Cart".

That's actually a good callout - I don't know how to open the mock in XD to get the correct size. I'll dig deeper.

Should be able to find a link somewhere in the epic or linked issues. But @tjwiebell is also having trouble finding pixel/size direction from XD so not sure how to help from there.

sirugh · 2020-01-08T18:27:31Z

packages/venia-ui/lib/components/CartPage/cartPage.css

+    grid-area: adjustments;
+}
+
+.recently_viewed_container {


Since this is an extension/dynamic location can we just call this cart_extension_container and rename the grid area?

Do we know for sure that's the case? I wasn't clear.

Ah yea, it was discussed when we broke the stories down that its more like a configurable area for things like "recently viewed" or "people like you purchased..." etc.

TBH It may be better to simply remove/comment out the html since those components don't exist and I'm not sure we are expected to even implement it within this epic.

sirugh · 2020-01-08T20:32:50Z

packages/venia-ui/lib/components/CartPage/cartPage.css

     */
-    top: calc(3.5rem + 3.5rem + 25px);
+    top: 3.5rem;


Would have liked this to be a variable but the TODO will suffice

jimbo · 2020-01-08T23:17:13Z

Looking through late on this one, but it's fine. We can patch up the CSS as part of the pricing summary work. 👍

supernova-at added 3 commits January 7, 2020 11:07

Adds Cart Page

d9f2beb

Hooks up Sign In button

55d9be3

Sticky order summary in desktop view

f010ed9

PWAStudioBot added pkg:peregrine pkg:venia-ui labels Jan 7, 2020

revanth0212 added the version: Major This changeset includes incompatible API changes and its release necessitates a Major version bump. label Jan 7, 2020

revanth0212 requested changes Jan 7, 2020

View reviewed changes

packages/venia-ui/lib/components/CartPage/cartPage.js Outdated Show resolved Hide resolved

m2-community-project bot assigned revanth0212 Jan 7, 2020

m2-community-project bot added the Progress: changes requested label Jan 7, 2020

supernova-at added 5 commits January 7, 2020 15:02

Unit tests useCartPage talon

324c428

Adds link to JIRA for Recently Viewed component

314e3d6

Adds a comment to cartPage CSS

7379632

Runs prettier

bc21343

Adds useMemo for sign in display

4442862

m2-community-project bot assigned supernova-at Jan 7, 2020

m2-community-project bot added Progress: review and removed Progress: changes requested labels Jan 7, 2020

supernova-at added version: Minor This changeset includes functionality added in a backwards compatible manner. and removed version: Major This changeset includes incompatible API changes and its release necessitates a Major version bump. labels Jan 8, 2020

Updates styles in accordance with styleguide

db77065

revanth0212 previously approved these changes Jan 8, 2020

View reviewed changes

sirugh requested changes Jan 8, 2020

View reviewed changes

m2-community-project bot assigned sirugh Jan 8, 2020

m2-community-project bot added Progress: changes requested and removed Progress: review labels Jan 8, 2020

Order summary sticks directly underneath header

d2aaafd

supernova-at dismissed revanth0212’s stale review via d2aaafd January 8, 2020 20:24

sirugh reviewed Jan 8, 2020

View reviewed changes

sirugh approved these changes Jan 8, 2020

View reviewed changes

Merge branch 'develop' into supernova/130_cart_page

2ea98d1

sirugh merged commit 3048211 into develop Jan 8, 2020

sirugh deleted the supernova/130_cart_page branch January 8, 2020 21:34

m2-community-project bot removed the Progress: changes requested label Jan 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Venia v2 Cart Page #2084

Venia v2 Cart Page #2084

supernova-at commented Jan 7, 2020 •

edited

Loading

PWAStudioBot commented Jan 7, 2020 •

edited

Loading

revanth0212 left a comment •

edited

Loading

sirugh left a comment

sirugh Jan 8, 2020

supernova-at Jan 8, 2020 •

edited

Loading

sirugh Jan 8, 2020

supernova-at Jan 8, 2020

sirugh Jan 8, 2020

sirugh Jan 8, 2020

supernova-at Jan 8, 2020

sirugh Jan 8, 2020

sirugh Jan 8, 2020

sirugh Jan 8, 2020

jimbo commented Jan 8, 2020

Venia v2 Cart Page #2084

Venia v2 Cart Page #2084

Conversation

supernova-at commented Jan 7, 2020 • edited Loading

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Jan 7, 2020 • edited Loading

revanth0212 left a comment • edited Loading

Choose a reason for hiding this comment

sirugh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

supernova-at Jan 8, 2020 • edited Loading

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

jimbo commented Jan 8, 2020

supernova-at commented Jan 7, 2020 •

edited

Loading

PWAStudioBot commented Jan 7, 2020 •

edited

Loading

revanth0212 left a comment •

edited

Loading

supernova-at Jan 8, 2020 •

edited

Loading