Venia v2 Cart Page

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(<Component />);
+
+    // Assert.
+    expect(log).toHaveBeenCalledWith({
+        handleSignIn: expect.any(Function),
+        isSignedIn: expect.any(Boolean)
+    });
+});

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

@@ -0,0 +1,20 @@
+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: set navigation state to "SIGN_IN". useNavigation:showSignIn doesn't work.
+        toggleDrawer('nav');
+    }, [toggleDrawer]);
+
+    return {
+        handleSignIn,
+        isSignedIn
+    };
+};

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

@@ -0,0 +1,76 @@
+.root {
+    padding: 1.5rem;
+}
+
+.body {
+    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'
+        'recents summary';
+}
+
+.heading_container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+
+    margin-bottom: 1rem;
+}
+
+.heading {
+    line-height: 1.25em;
+}
+
+.items_container {
+    grid-area: items;
+}
+
+.price_adjustments_container {
+    grid-area: adjustments;
+}
+
+.recently_viewed_container {
+    grid-area: recents;
+}
+
+.sign_in {
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.summary_container {
+    grid-area: summary;
+    height: 100%;
+}
+
+.summary_contents {
+    position: sticky;
+    /*
+     * 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: 3.5rem;
+}
+
+/*
+ * 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;
+    }
+}

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

@@ -0,0 +1,61 @@
+import React, { useMemo } 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 = useMemo(() => {
+        return !isSignedIn ? (
+            <Button
+                className={classes.sign_in}
+                onClick={handleSignIn}
+                priority="high"
+            >
+                {'Sign In'}
+            </Button>
+        ) : null;
+    }, [classes.sign_in, handleSignIn, isSignedIn]);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.heading_container}>
+                <h1 className={classes.heading}>Cart</h1>
+                {signInDisplay}
+            </div>
+            <div className={classes.body}>
+                <div className={classes.items_container}>
+                    <a href="https://jira.corp.magento.com/browse/PWA-238">
+                        Items List to be completed by PWA-238.
+                    </a>
+                </div>
+                <div className={classes.price_adjustments_container}>
+                    <a href="https://jira.corp.magento.com/browse/PWA-241">
+                        Price Adjustments to be completed by PWA-241.
+                    </a>
+                </div>
+                <div className={classes.summary_container}>
+                    <div className={classes.summary_contents}>
+                        <a href="https://jira.corp.magento.com/browse/PWA-240">
+                            Order Summary to be completed by PWA-240.
+                        </a>
+                    </div>
+                </div>
+                <div className={classes.recently_viewed_container}>
+                    <a href="https://jira.corp.magento.com/browse/PWA-270">
+                        Recently Viewed to be completed by PWA-270.
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CartPage;

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

@@ -0,0 +1 @@
+export { default } from './cartPage';

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 = () => {
                 <Route exact path="/create-account">
                     <CreateAccountPage />
                 </Route>
+                <Route exact path="/cart">
+                    <CartPage />
+                </Route>
                 <Route>
                     <MagentoRoute />
                 </Route>