Merge branch 'release/2.0' into docker-compose

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,7 +20,8 @@ Feel free to remove this section before creating this PR.
 <!--- This project only accepts pull requests related to open issues -->
 <!--- If suggesting a new feature or change, please discuss it in an issue first -->
 <!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
-<!--- Please link to the issue here with the following wording: Closes #<issue> -->
+<!--- Please link to the issue here with the specific wording: "Closes #<issue>" -->
+<!--- Using the above wording causes Github to automatically close the issue on merge. -->
 Closes #ISSUENUM.
 
 ## Motivation and Context

packages/peregrine/package.json

@@ -38,15 +38,15 @@
     "@storybook/react": "~4.1.6",
     "concurrently": "~4.1.0",
     "intl": "~1.2.5",
-    "react": "~16.7.0",
-    "react-dom": "~16.7.0",
+    "react": "~16.8.0",
+    "react-dom": "~16.8.0",
     "react-router-dom": "~4.4.0-beta.6",
     "rimraf": "~2.6.3"
   },
   "peerDependencies": {
     "@babel/runtime": "~7.2.0",
-    "react": "~16.7.0",
-    "react-dom": "~16.7.0",
+    "react": "~16.8.0",
+    "react-dom": "~16.8.0",
     "react-router-dom": "~4.4.0-beta.6"
   },
   "engines": {

packages/venia-concept/package.json

@@ -51,9 +51,9 @@
     "informed": "~1.10.12",
     "lodash.debounce": "~4.0.8",
     "memoize-one": "~5.0.0",
-    "react": "~16.7.0",
+    "react": "~16.8.0",
     "react-apollo": "~2.3.3",
-    "react-dom": "~16.7.0",
+    "react-dom": "~16.8.0",
     "react-feather": "~1.1.5",
     "react-redux": "~6.0.0",
     "react-router-dom": "~4.4.0-beta.6",
@@ -86,7 +86,7 @@
     "enzyme-adapter-react-16": "~1.7.1",
     "identity-obj-proxy": "~3.0.0",
     "node-fetch": "~2.3.0",
-    "react-test-renderer": "~16.7.0",
+    "react-test-renderer": "~16.8.0",
     "rimraf": "~2.6.3",
     "terser-webpack-plugin": "~1.2.1",
     "webpack": "~4.28.4",

packages/venia-concept/src/RootComponents/Category/__tests__/categoryContent.spec.js

@@ -31,6 +31,5 @@ test('renders with props', () => {
             classes={classes}
         />
     ).dive();
-
     expect(wrapper.hasClass(classes.root)).toBe(true);
 });

packages/venia-concept/src/actions/cart/__tests__/asyncActions.spec.js

@@ -354,6 +354,7 @@ test('addItemToCart opens drawer and gets cart details on success', async () =>
         .mockImplementationOnce(fakeDispatch)
         .mockImplementationOnce(fakeDispatch)
         .mockImplementationOnce(fakeDispatch)
+        .mockImplementationOnce(fakeDispatch)
         .mockImplementationOnce(fakeDispatch);
 
     request.mockResolvedValueOnce(cartItem).mockResolvedValueOnce(cartItem);

packages/venia-concept/src/actions/cart/asyncActions.js

@@ -126,10 +126,8 @@ export const addItemToCart = (payload = {}) => {
             }
         }
 
-        await Promise.all([
-            dispatch(toggleDrawer('cart')),
-            dispatch(getCartDetails({ forceRefresh: true }))
-        ]);
+        await dispatch(getCartDetails({ forceRefresh: true }));
+        await dispatch(toggleDrawer('cart'));
     };
 };
 

packages/venia-concept/src/components/Checkout/wrapper.js

@@ -86,7 +86,6 @@ class CheckoutWrapper extends Component {
             countries: array
         }),
         editOrder: func.isRequired,
-        resetCheckout: func.isRequired,
         submitShippingAddress: func.isRequired,
         submitOrder: func.isRequired,
         submitPaymentMethodAndBillingAddress: func.isRequired,

packages/venia-concept/src/components/MiniCart/mask.css

@@ -0,0 +1,4 @@
+.root_active {
+    composes: root_active from '../Mask/mask.css';
+    opacity: 0.25;
+}

packages/venia-concept/src/components/MiniCart/mask.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { bool, func, shape, string } from 'prop-types';
+
+import Mask from 'src/components/Mask';
+
+import classify from 'src/classify';
+import defaultClasses from './mask.css';
+
+class MiniCartMask extends Component {
+    static propTypes = {
+        classes: shape({
+            root_active: string
+        }),
+        dismiss: func,
+        isActive: bool
+    };
+
+    render() {
+        const { classes, dismiss, isActive } = this.props;
+
+        // We're rendering the shared Mask component but passing it
+        // our own custom class for its active state.
+        return (
+            <Mask
+                classes={{ root_active: classes.root_active }}
+                dismiss={dismiss}
+                isActive={isActive}
+            />
+        );
+    }
+}
+
+export default classify(defaultClasses)(MiniCartMask);

packages/venia-concept/src/components/MiniCart/miniCart.css

@@ -47,6 +47,12 @@
 .footer {
     box-shadow: 0 -1px rgb(var(--venia-border));
     padding: 1.5rem 0 0.5rem;
+    background-color: white;
+}
+
+.footerMaskOpen {
+    composes: footer;
+    z-index: 3;
 }
 
 .header {

packages/venia-concept/src/components/MiniCart/miniCart.js

@@ -1,25 +1,28 @@
 import React, { Component, Fragment, Suspense } from 'react';
 import { compose } from 'redux';
 import { connect } from 'src/drivers';
-import { bool, object, shape, string } from 'prop-types';
+import { bool, func, object, shape, string } from 'prop-types';
 
 import { Price } from '@magento/peregrine';
 import classify from 'src/classify';
 import { getCartDetails, removeItemFromCart } from 'src/actions/cart';
+import { cancelCheckout } from 'src/actions/checkout';
 import Icon from 'src/components/Icon';
 import CloseIcon from 'react-feather/dist/icons/x';
 import Button from 'src/components/Button';
 import CheckoutButton from 'src/components/Checkout/checkoutButton';
 import EmptyMiniCart from './emptyMiniCart';
+import Mask from './mask';
 import ProductList from './productList';
 import Trigger from './trigger';
 import defaultClasses from './miniCart.css';
-import { isEmptyCartVisible } from 'src/selectors/cart';
+import { isEmptyCartVisible, isMiniCartMaskOpen } from 'src/selectors/cart';
 
 const Checkout = React.lazy(() => import('src/components/Checkout'));
 
 class MiniCart extends Component {
     static propTypes = {
+        cancelCheckout: func.isRequired,
         cart: shape({
             details: object,
             guestCartId: string,
@@ -28,6 +31,7 @@ class MiniCart extends Component {
         classes: shape({
             body: string,
             footer: string,
+            footerMaskOpen: string,
             header: string,
             placeholderButton: string,
             root_open: string,
@@ -38,7 +42,8 @@ class MiniCart extends Component {
             title: string,
             totals: string
         }),
-        isCartEmpty: bool
+        isCartEmpty: bool,
+        isMiniCartMaskOpen: bool
     };
 
     constructor(...args) {
@@ -190,7 +195,7 @@ class MiniCart extends Component {
             props,
             state
         } = this;
-        const { classes, isCartEmpty } = props;
+        const { classes, isCartEmpty, isMiniCartMaskOpen } = props;
 
         if (isCartEmpty) {
             return <EmptyMiniCart />;
@@ -199,11 +204,14 @@ class MiniCart extends Component {
         const { isEditPanelOpen } = state;
         const body = isEditPanelOpen ? productOptions : productList;
         const footer = isEditPanelOpen ? productConfirm : checkout;
+        const footerClassName = isMiniCartMaskOpen
+            ? classes.footerMaskOpen
+            : classes.footer;
 
         return (
             <Fragment>
                 <div className={classes.body}>{body}</div>
-                <div className={classes.footer}>{footer}</div>
+                <div className={footerClassName}>{footer}</div>
             </Fragment>
         );
     }
@@ -214,7 +222,7 @@ class MiniCart extends Component {
         }
 
         const { miniCartInner, props } = this;
-        const { classes, isOpen } = props;
+        const { classes, isOpen, isMiniCartMaskOpen, cancelCheckout } = props;
         const className = isOpen ? classes.root_open : classes.root;
         const title = this.state.isEditPanelOpen
             ? 'Edit Cart Item'
@@ -231,6 +239,7 @@ class MiniCart extends Component {
                     </Trigger>
                 </div>
                 {miniCartInner}
+                <Mask isActive={isMiniCartMaskOpen} dismiss={cancelCheckout} />
             </aside>
         );
     }
@@ -241,11 +250,16 @@ const mapStateToProps = state => {
 
     return {
         cart,
-        isCartEmpty: isEmptyCartVisible(state)
+        isCartEmpty: isEmptyCartVisible(state),
+        isMiniCartMaskOpen: isMiniCartMaskOpen(state)
     };
 };
 
-const mapDispatchToProps = { getCartDetails, removeItemFromCart };
+const mapDispatchToProps = {
+    getCartDetails,
+    removeItemFromCart,
+    cancelCheckout
+};
 
 export default compose(
     classify(defaultClasses),