New MiniCart

packages/peregrine/lib/talons/Header/useCartTrigger.js

@@ -1,11 +1,12 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import {
     useApolloClient,
     useLazyQuery,
     useMutation
 } from '@apollo/react-hooks';
+import { useHistory } from 'react-router-dom';
+
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
-import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
 
 export const useCartTrigger = props => {
@@ -15,15 +16,17 @@ export const useCartTrigger = props => {
     } = props;
 
     const apolloClient = useApolloClient();
-    const [, { toggleDrawer }] = useAppContext();
     const [{ cartId }, { getCartDetails }] = useCartContext();
+    const history = useHistory();
 
     const [getItemCount, { data }] = useLazyQuery(getItemCountQuery, {
         fetchPolicy: 'cache-and-network'
     });
     const [fetchCartId] = useMutation(createCartMutation);
     const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
 
+    const [miniCartIsOpen, setMiniCartIsOpen] = useState(false);
+
     const itemCount = data ? data.cart.total_quantity : 0;
 
     useEffect(() => {
@@ -42,16 +45,21 @@ export const useCartTrigger = props => {
         }
     }, [cartId, getItemCount]);
 
-    const handleClick = useCallback(async () => {
-        toggleDrawer('cart');
-        await getCartDetails({
-            fetchCartId,
-            fetchCartDetails
-        });
-    }, [fetchCartDetails, fetchCartId, getCartDetails, toggleDrawer]);
+    const handleDesktopClick = useCallback(async () => {
+        // On desktop show the minicart.
+        setMiniCartIsOpen(true);
+    }, []);
+
+    const handleMobileClick = useCallback(() => {
+        // On mobile send the user to the cart page.
+        history.push('/cart');
+    }, [history]);
 
     return {
-        handleClick,
-        itemCount
+        handleDesktopClick,
+        handleMobileClick,
+        itemCount,
+        miniCartIsOpen,
+        setMiniCartIsOpen
     };
 };

packages/peregrine/lib/talons/MiniCart2/useMiniCart2.js

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+
+export const useMiniCart2 = props => {
+    const { setIsOpen } = props;
+
+    const onDismiss = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    return {
+        onDismiss
+    };
+};

packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -2,7 +2,6 @@ import { useCallback, useState, useMemo } from 'react';
 import { useMutation } from '@apollo/react-hooks';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
-import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useAwaitQuery } from '@magento/peregrine/lib/hooks/useAwaitQuery';
 import { appendOptionsToPayload } from '@magento/peregrine/lib/util/appendOptionsToPayload';
 import { findMatchingVariant } from '@magento/peregrine/lib/util/findMatchingProductVariant';
@@ -164,7 +163,6 @@ export const useProductFullDetail = props => {
         productType
     );
 
-    const [, { toggleDrawer }] = useAppContext();
     const [{ isAddingItem }, { addItemToCart }] = useCartContext();
 
     const [addConfigurableProductToCart] = useMutation(
@@ -236,7 +234,6 @@ export const useProductFullDetail = props => {
                 fetchCartDetails,
                 fetchCartId
             });
-            toggleDrawer('cart');
         } else {
             console.error('Unsupported product type. Cannot add to cart.');
         }
@@ -251,8 +248,7 @@ export const useProductFullDetail = props => {
         optionSelections,
         product,
         productType,
-        quantity,
-        toggleDrawer
+        quantity
     ]);
 
     const handleSelectionChange = useCallback(

packages/venia-ui/lib/components/App/__tests__/app.spec.js

@@ -4,7 +4,6 @@ import { useAppContext } from '@magento/peregrine/lib/context/app';
 
 import Main from '../../Main';
 import Mask from '../../Mask';
-import MiniCart from '../../MiniCart';
 import Navigation from '../../Navigation';
 import Routes from '../../Routes';
 
@@ -13,7 +12,6 @@ jest.mock('../../Head', () => ({
     Title: () => 'Title'
 }));
 jest.mock('../../Main', () => 'Main');
-jest.mock('../../MiniCart', () => 'MiniCart');
 jest.mock('../../Navigation', () => 'Navigation');
 jest.mock('../../Routes', () => 'Routes');
 jest.mock('../../ToastContainer', () => 'ToastContainer');
@@ -144,7 +142,6 @@ test('renders a full page with onlineIndicator and routes', () => {
     const { root } = createTestInstance(<App {...appProps} />);
 
     getAndConfirmProps(root, Navigation);
-    getAndConfirmProps(root, MiniCart);
 
     const main = getAndConfirmProps(root, Main, {
         isMasked: false
@@ -231,10 +228,6 @@ test('displays open nav or drawer', () => {
     const { root: openNav } = createTestInstance(<App {...props} />);
 
     getAndConfirmProps(openNav, Navigation);
-
-    const { root: openCart } = createTestInstance(<App {...props} />);
-
-    getAndConfirmProps(openCart, MiniCart);
 });
 
 test('renders with renderErrors', () => {

packages/venia-ui/lib/components/App/app.js

@@ -7,7 +7,6 @@ import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
 import { HeadProvider, Title } from '../Head';
 import Main from '../Main';
 import Mask from '../Mask';
-import MiniCart from '../MiniCart';
 import Navigation from '../Navigation';
 import Routes from '../Routes';
 import ToastContainer from '../ToastContainer';
@@ -96,7 +95,6 @@ const App = props => {
             </Main>
             <Mask isActive={hasOverlay} dismiss={handleCloseDrawer} />
             <Navigation />
-            <MiniCart />
             <ToastContainer />
         </HeadProvider>
     );

packages/venia-ui/lib/components/Header/cartTrigger.css

@@ -1,9 +1,14 @@
-.root {
+.root_desktop {
     composes: root from '../clickable.css';
     height: 3rem;
     min-width: 3rem;
 }
 
+.root_mobile {
+    composes: root_desktop;
+    display: none;
+}
+
 .counter {
     font-weight: 600;
     margin-left: 0.25rem;
@@ -17,3 +22,16 @@
     composes: root from '../Icon/icon.css';
     --fill: rgb(var(--venia-text));
 }
+
+/*
+ * Mobile-specific styles.
+ */
+@media (max-width: 960px) {
+    .root_desktop {
+        display: none;
+    }
+
+    .root_mobile {
+        display: block;
+    }
+}

packages/venia-ui/lib/components/Header/cartTrigger.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { shape, string } from 'prop-types';
 import { ShoppingCart as ShoppingCartIcon } from 'react-feather';
 
@@ -8,11 +8,18 @@ import { mergeClasses } from '../../classify';
 import CREATE_CART_MUTATION from '../../queries/createCart.graphql';
 import GET_CART_DETAILS_QUERY from '../../queries/getCartDetails.graphql';
 import Icon from '../Icon';
+import MiniCart from '../MiniCart2';
 import defaultClasses from './cartTrigger.css';
 import { GET_ITEM_COUNT_QUERY } from './cartTrigger.gql';
 
 const CartTrigger = props => {
-    const { handleClick, itemCount } = useCartTrigger({
+    const {
+        handleDesktopClick,
+        handleMobileClick,
+        itemCount,
+        miniCartIsOpen,
+        setMiniCartIsOpen
+    } = useCartTrigger({
         mutations: {
             createCartMutation: CREATE_CART_MUTATION
         },
@@ -32,15 +39,29 @@ const CartTrigger = props => {
         <span className={classes.counter}>{itemCount}</span>
     ) : null;
 
+    // Because this button behaves differently on desktop and mobile
+    // we render two buttons that differ only in their click handler
+    // and control which one displays in CSS.
     return (
-        <button
-            aria-label={buttonAriaLabel}
-            className={classes.root}
-            onClick={handleClick}
-        >
-            <Icon classes={iconClasses} src={ShoppingCartIcon} />
-            {itemCounter}
-        </button>
+        <Fragment>
+            <button
+                aria-label={buttonAriaLabel}
+                className={classes.root_desktop}
+                onClick={handleDesktopClick}
+            >
+                <Icon classes={iconClasses} src={ShoppingCartIcon} />
+                {itemCounter}
+            </button>
+            <button
+                aria-label={buttonAriaLabel}
+                className={classes.root_mobile}
+                onClick={handleMobileClick}
+            >
+                <Icon classes={iconClasses} src={ShoppingCartIcon} />
+                {itemCounter}
+            </button>
+            <MiniCart isOpen={miniCartIsOpen} setIsOpen={setMiniCartIsOpen} />
+        </Fragment>
     );
 };
 

packages/venia-ui/lib/components/MiniCart2/__stories__/minicart.js

@@ -0,0 +1,20 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import MiniCart from '../minicart';
+
+const stories = storiesOf('Venia/MiniCart2', module);
+
+/*
+ *  Story definitions.
+ */
+
+stories.add('Default', () => {
+    const [isOpen, setIsOpen] = useState(true);
+    const props = {
+        isOpen,
+        setIsOpen
+    };
+
+    return <MiniCart {...props} />;
+});

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

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

packages/venia-ui/lib/components/MiniCart2/minicart.css

@@ -0,0 +1,80 @@
+.root {
+    /* The root aside element takes up the whole screen. */
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+
+    /* It is hidden by default. */
+    opacity: 0;
+    visibility: hidden;
+
+    /* It animates to being closed. */
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-anim-out);
+    transition-property: opacity, visibility;
+
+    /* It sits over all background content. */
+    z-index: 3;
+}
+
+.root_open {
+    composes: root;
+
+    opacity: 1;
+    visibility: visible;
+
+    /* It animates to being open. */
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-anim-in);
+}
+
+.body {
+    margin-top: 1rem;
+    overflow-y: scroll;
+}
+
+.contents {
+    align-content: space-between;
+    background-color: rgb(var(--venia-background-color));
+    border-radius: 1px;
+    box-shadow: 1px 1px 5px rgb(var(--venia-grey-darker));
+    display: grid;
+    /* The header and footer heights may change based on PWA-116 and PWA-601. */
+    grid-template-rows: 2rem 1fr 8rem;
+    /* These heights may change based on PWA-605 and should be based on 1.5 and 2.5 visible items. */
+    height: 100%;
+    min-height: 16rem;
+    max-height: 22.5rem;
+    overflow: hidden;
+    padding: 1rem;
+    position: fixed;
+    right: 0;
+    /* This value is equal to the site header height. */
+    top: 3.5rem;
+    width: 30rem;
+}
+
+.footer {
+    border-top: solid 0.4rem rgb(var(--venia-grey));
+    overflow: hidden;
+}
+
+.header {
+    border-bottom: solid 0.15rem rgb(var(--venia-grey));
+    overflow: hidden;
+}
+
+.mask {
+    /* The mask takes up the entire screen. */
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+
+    /* The mask is a semi-transparent grey. */
+    background-color: rgb(var(--venia-grey-darker));
+    opacity: 0.5;
+}