From d9f2beb02460a1756488622ac033eb79b7bfc2cf Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 11:07:01 -0600 Subject: [PATCH 01/10] Adds Cart Page --- .../lib/components/CartPage/cartPage.css | 24 ++++++++++++++ .../lib/components/CartPage/cartPage.js | 32 +++++++++++++++++++ .../venia-ui/lib/components/CartPage/index.js | 1 + .../venia-ui/lib/components/Routes/routes.js | 4 +++ 4 files changed, 61 insertions(+) create mode 100644 packages/venia-ui/lib/components/CartPage/cartPage.css create mode 100644 packages/venia-ui/lib/components/CartPage/cartPage.js create mode 100644 packages/venia-ui/lib/components/CartPage/index.js diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css new file mode 100644 index 0000000000..34a0e17c60 --- /dev/null +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -0,0 +1,24 @@ +.root { + padding: 2rem; +} + +.heading_container { + display: flex; + align-items: baseline; + justify-content: space-between; +} + +.heading {} + +.items_container { + +} + +.price_adjustments_container {} + +.sign_in { + font-weight: bold; + text-decoration: underline; +} + +.summary_container {} \ No newline at end of file diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js new file mode 100644 index 0000000000..9318ff4094 --- /dev/null +++ b/packages/venia-ui/lib/components/CartPage/cartPage.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import { mergeClasses } from '../../classify'; +import defaultClasses from './cartPage.css'; + +const CartPage = props => { + + const classes = mergeClasses(defaultClasses, props.classes); + + return ( +
+
+

Cart

+ Sign In +
+
+ Items List to be completed by PWA-238. +
+
+ Price Adjustments to be completed by PWA-241. +
+
+ Order Summary to be completed by PWA-240. +
+
+ Recently Viewed TBD. Should show only in Desktop. +
+
+ ); +} + +export default CartPage; diff --git a/packages/venia-ui/lib/components/CartPage/index.js b/packages/venia-ui/lib/components/CartPage/index.js new file mode 100644 index 0000000000..2fcc60f2e8 --- /dev/null +++ b/packages/venia-ui/lib/components/CartPage/index.js @@ -0,0 +1 @@ +export { default } from './cartPage'; diff --git a/packages/venia-ui/lib/components/Routes/routes.js b/packages/venia-ui/lib/components/Routes/routes.js index d3c1cad816..873f1d6dcc 100644 --- a/packages/venia-ui/lib/components/Routes/routes.js +++ b/packages/venia-ui/lib/components/Routes/routes.js @@ -4,6 +4,7 @@ import { Route, Switch } from 'react-router-dom'; import { fullPageLoadingIndicator } from '../LoadingIndicator'; import MagentoRoute from '../MagentoRoute'; +const CartPage = lazy(() => import('../CartPage')); const CreateAccountPage = lazy(() => import('../CreateAccountPage')); const Search = lazy(() => import('../../RootComponents/Search')); @@ -17,6 +18,9 @@ const Routes = () => { + + + From 55d9be339686842c8d47b5d19a611f412f311691 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 11:57:46 -0600 Subject: [PATCH 02/10] Hooks up Sign In button --- .../lib/talons/CartPage/useCartPage.js | 21 +++++++++++++++++++ .../lib/components/CartPage/cartPage.css | 5 ++++- .../lib/components/CartPage/cartPage.js | 18 +++++++++++++++- 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 packages/peregrine/lib/talons/CartPage/useCartPage.js diff --git a/packages/peregrine/lib/talons/CartPage/useCartPage.js b/packages/peregrine/lib/talons/CartPage/useCartPage.js new file mode 100644 index 0000000000..6842ffda86 --- /dev/null +++ b/packages/peregrine/lib/talons/CartPage/useCartPage.js @@ -0,0 +1,21 @@ +import { useCallback } from 'react'; + +import { useAppContext } from '../../context/app'; +import { useUserContext } from '../../context/user'; + +export const useCartPage = () => { + const [, appApi] = useAppContext(); + const { toggleDrawer } = appApi; + const [{ isSignedIn }] = useUserContext(); + + const handleSignIn = useCallback(() => { + // TODO: export the drawer names + // TODO: set navigation state to "SIGN_IN". useNavigation:showSignIn doesn't work. + toggleDrawer('nav'); + }, [toggleDrawer]); + + return { + handleSignIn, + isSignedIn + }; +}; \ No newline at end of file diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index 34a0e17c60..3203ddb593 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -1,11 +1,14 @@ .root { - padding: 2rem; + padding: 1.5rem; } .heading_container { display: flex; align-items: baseline; justify-content: space-between; + + margin-bottom: 1rem; + margin-top: 1rem; } .heading {} diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js index 9318ff4094..2622f452d4 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.js +++ b/packages/venia-ui/lib/components/CartPage/cartPage.js @@ -1,17 +1,33 @@ import React from 'react'; +import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage'; + +import Button from '../Button'; + import { mergeClasses } from '../../classify'; import defaultClasses from './cartPage.css'; const CartPage = props => { + const { handleSignIn, isSignedIn } = useCartPage(); + const classes = mergeClasses(defaultClasses, props.classes); + const signInDisplay = !isSignedIn ? ( + + ) : null; + return (

Cart

- Sign In + { signInDisplay }
Items List to be completed by PWA-238. From f010ed9ec9ec0529373b4b5094013b1c5f7d7115 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 14:26:44 -0600 Subject: [PATCH 03/10] Sticky order summary in desktop view --- .../lib/talons/CartPage/useCartPage.js | 2 +- .../lib/components/CartPage/cartPage.css | 54 +++++++++++++++++-- .../lib/components/CartPage/cartPage.js | 40 +++++++++----- 3 files changed, 78 insertions(+), 18 deletions(-) diff --git a/packages/peregrine/lib/talons/CartPage/useCartPage.js b/packages/peregrine/lib/talons/CartPage/useCartPage.js index 6842ffda86..642e52f7cd 100644 --- a/packages/peregrine/lib/talons/CartPage/useCartPage.js +++ b/packages/peregrine/lib/talons/CartPage/useCartPage.js @@ -18,4 +18,4 @@ export const useCartPage = () => { handleSignIn, isSignedIn }; -}; \ No newline at end of file +}; diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index 3203ddb593..ce29cdc9ef 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -2,6 +2,16 @@ padding: 1.5rem; } +.body { + display: grid; + gap: 2rem; + grid-template-columns: 66% auto; + grid-template-areas: + 'items summary' + 'adjustments summary' + 'recents summary'; +} + .heading_container { display: flex; align-items: baseline; @@ -11,17 +21,55 @@ margin-top: 1rem; } -.heading {} +.heading { +} .items_container { + grid-area: items; +} +.price_adjustments_container { + grid-area: adjustments; } -.price_adjustments_container {} +.recently_viewed_container { + grid-area: recents; +} .sign_in { font-weight: bold; text-decoration: underline; } -.summary_container {} \ No newline at end of file +.summary_container { + grid-area: summary; + height: 100%; +} + +.summary_contents { + position: sticky; + /* + * 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); +} + +/* + * Mobile-specific styles. + */ + +@media (max-width: 640px) { + .body { + /* Only one column in mobile view. */ + grid-template-columns: 100%; + grid-template-areas: + 'items' + 'adjustments' + 'summary'; + } + + .recently_viewed_container { + display: none; + } +} diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js index 2622f452d4..9983ca56f4 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.js +++ b/packages/venia-ui/lib/components/CartPage/cartPage.js @@ -8,7 +8,6 @@ import { mergeClasses } from '../../classify'; import defaultClasses from './cartPage.css'; const CartPage = props => { - const { handleSignIn, isSignedIn } = useCartPage(); const classes = mergeClasses(defaultClasses, props.classes); @@ -27,22 +26,35 @@ const CartPage = props => {

Cart

- { signInDisplay } -
- - - -
- Recently Viewed TBD. Should show only in Desktop. +
); -} +}; export default CartPage; From 324c428b7e2749762926a66c8b1abb5df4fa24bd Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 14:50:35 -0600 Subject: [PATCH 04/10] Unit tests useCartPage talon --- .../CartPage/__tests__/useCartPage.spec.js | 45 +++++++++++++++++++ .../lib/talons/CartPage/useCartPage.js | 1 - 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js diff --git a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js new file mode 100644 index 0000000000..0075ed87ba --- /dev/null +++ b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js @@ -0,0 +1,45 @@ +import React, { useEffect } from 'react'; +import { createTestInstance } from '@magento/peregrine'; + +import { useCartPage } from '../useCartPage'; + +jest.mock('../../../context/app', () => { + const state = {} + const api = { + toggleDrawer: jest.fn() + }; + const useAppContext = jest.fn(() => [state, api]); + + return { useAppContext }; +}); +jest.mock('../../../context/user', () => { + const state = { + isSignedIn: false + }; + const api = {}; + const useUserContext = jest.fn(() => [state, api]); + + return { useUserContext }; +}); + +const log = jest.fn(); +const Component = () => { + const talonProps = useCartPage(); + + useEffect(() => { + log(talonProps); + }, [talonProps]); + + return null; +}; + +test('it returns the proper shape', () => { + // Act. + createTestInstance(); + + // Assert. + expect(log).toHaveBeenCalledWith({ + handleSignIn: expect.any(Function), + isSignedIn: expect.any(Boolean) + }); +}); diff --git a/packages/peregrine/lib/talons/CartPage/useCartPage.js b/packages/peregrine/lib/talons/CartPage/useCartPage.js index 642e52f7cd..06d3b22b2d 100644 --- a/packages/peregrine/lib/talons/CartPage/useCartPage.js +++ b/packages/peregrine/lib/talons/CartPage/useCartPage.js @@ -9,7 +9,6 @@ export const useCartPage = () => { const [{ isSignedIn }] = useUserContext(); const handleSignIn = useCallback(() => { - // TODO: export the drawer names // TODO: set navigation state to "SIGN_IN". useNavigation:showSignIn doesn't work. toggleDrawer('nav'); }, [toggleDrawer]); From 314e3d6dc6b0fddaaaa1a19397af8ab95cd549a3 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 15:02:46 -0600 Subject: [PATCH 05/10] Adds link to JIRA for Recently Viewed component --- .../venia-ui/lib/components/CartPage/cartPage.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js index 9983ca56f4..de6dd0ea99 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.js +++ b/packages/venia-ui/lib/components/CartPage/cartPage.js @@ -31,26 +31,25 @@ const CartPage = props => {
From 7379632b1f397551f6a2a28019862d1848422c04 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 15:05:24 -0600 Subject: [PATCH 06/10] Adds a comment to cartPage CSS --- packages/venia-ui/lib/components/CartPage/cartPage.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index ce29cdc9ef..c64c35e509 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -6,6 +6,7 @@ display: grid; gap: 2rem; grid-template-columns: 66% auto; + /* The summary grid item spans the entire right column. */ grid-template-areas: 'items summary' 'adjustments summary' From bc21343a103b87487d72c70c82a2f6876f3db80d Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 15:07:19 -0600 Subject: [PATCH 07/10] Runs prettier --- .../peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js index 0075ed87ba..84f0106dda 100644 --- a/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js +++ b/packages/peregrine/lib/talons/CartPage/__tests__/useCartPage.spec.js @@ -4,7 +4,7 @@ import { createTestInstance } from '@magento/peregrine'; import { useCartPage } from '../useCartPage'; jest.mock('../../../context/app', () => { - const state = {} + const state = {}; const api = { toggleDrawer: jest.fn() }; From 4442862c88e02f4b8c51eb197e10b36e40c57947 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Tue, 7 Jan 2020 15:12:00 -0600 Subject: [PATCH 08/10] Adds useMemo for sign in display --- .../lib/components/CartPage/cartPage.js | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.js b/packages/venia-ui/lib/components/CartPage/cartPage.js index de6dd0ea99..596135122e 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.js +++ b/packages/venia-ui/lib/components/CartPage/cartPage.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage'; @@ -12,15 +12,17 @@ const CartPage = props => { const classes = mergeClasses(defaultClasses, props.classes); - const signInDisplay = !isSignedIn ? ( - - ) : null; + const signInDisplay = useMemo(() => { + return !isSignedIn ? ( + + ) : null; + }, [classes.sign_in, handleSignIn, isSignedIn]); return (
From db7706570bb7b381d72e503c92f25b8a47c56ac7 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Wed, 8 Jan 2020 08:23:46 -0600 Subject: [PATCH 09/10] Updates styles in accordance with styleguide --- packages/venia-ui/lib/components/CartPage/cartPage.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index c64c35e509..87fd8584a3 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -19,10 +19,10 @@ justify-content: space-between; margin-bottom: 1rem; - margin-top: 1rem; } .heading { + line-height: 1.25em; } .items_container { From d2aaafd8c793ef8f2f31cca4ce5587ef0c4699f0 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Wed, 8 Jan 2020 14:24:01 -0600 Subject: [PATCH 10/10] Order summary sticks directly underneath header --- packages/venia-ui/lib/components/CartPage/cartPage.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/cartPage.css b/packages/venia-ui/lib/components/CartPage/cartPage.css index 87fd8584a3..da5a90fd9b 100644 --- a/packages/venia-ui/lib/components/CartPage/cartPage.css +++ b/packages/venia-ui/lib/components/CartPage/cartPage.css @@ -50,10 +50,10 @@ .summary_contents { position: sticky; /* - * TODO: Use CSS Properties (variables) or something instead of hardcoding these. - * min-height of nav header + page spacing + height of page header + * TODO: Use CSS Properties (variables) or something instead of hardcoding this. + * 3.5 rem = min-height of nav header. See the "toolbar" class in header.css. */ - top: calc(3.5rem + 3.5rem + 25px); + top: 3.5rem; } /*