[bug] "Remove item" in minicart usability issue

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

@@ -1,9 +1,8 @@
-import { RestApi } from '@magento/peregrine';
+import { RestApi, Util } from '@magento/peregrine';
 
 import { closeDrawer, toggleDrawer } from 'src/actions/app';
 import checkoutActions from 'src/actions/checkout';
 import actions from './actions';
-import { Util } from '@magento/peregrine';
 
 const { request } = RestApi.Magento2;
 const { BrowserPersistence } = Util;
@@ -280,7 +279,11 @@ export const removeItemFromCart = payload => {
             }
         }
 
-        await Promise.all([dispatch(getCartDetails({ forceRefresh: true }))]);
+        await dispatch(
+            getCartDetails({
+                forceRefresh: true
+            })
+        );
     };
 };
 
@@ -324,7 +327,10 @@ export const getCartDetails = (payload = {}) => {
                 totals
             ] = await Promise.all([
                 retrieveImageCache(),
-                fetchCartPart({ guestCartId, forceRefresh }),
+                fetchCartPart({
+                    guestCartId,
+                    forceRefresh
+                }),
                 fetchCartPart({
                     guestCartId,
                     forceRefresh,

packages/venia-concept/src/components/MiniCart/__stories__/Kebab.js

@@ -13,15 +13,9 @@ const styles = {
     display: 'grid'
 };
 
-stories.add('Kebab Closed', () => (
+stories.add('Kebab', () => (
     <div style={styles}>
-        <Kebab isOpen={false} />
-    </div>
-));
-
-stories.add('Kebab Open', () => (
-    <div style={styles}>
-        <Kebab isOpen={true}>
+        <Kebab>
             <Section icon="Heart" text="Section 1" />
             <Section icon="Edit2" text="Section 2" />
             <Section icon="Trash" text="Section 3" />

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

@@ -1,5 +1,5 @@
 import React, { Component, createRef } from 'react';
-import { bool, shape, string } from 'prop-types';
+import { shape, string } from 'prop-types';
 import Icon from 'src/components/Icon';
 import classify from 'src/classify';
 import defaultClasses from './kebab.css';
@@ -13,16 +13,15 @@ class Kebab extends Component {
             dropdown_active: string,
             kebab: string,
             root: string
-        }),
-        isOpen: bool
+        })
     };
 
     constructor(props) {
         super(props);
         this.kebabButtonRef = createRef();
 
         this.state = {
-            isOpen: !!props.isOpen
+            isOpen: false
         };
     }
 
@@ -43,13 +42,7 @@ class Kebab extends Component {
     }
 
     render() {
-        const {
-            classes,
-            children,
-            //eslint-disable-next-line
-            isOpen,
-            ...restProps
-        } = this.props;
+        const { classes, children, ...restProps } = this.props;
 
         const toggleClass = this.state.isOpen
             ? classes.dropdown_active

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

@@ -2,7 +2,6 @@ import React, { Component, Fragment, Suspense } from 'react';
 import { compose } from 'redux';
 import { connect } from 'src/drivers';
 import { bool, func, object, shape, string } from 'prop-types';
-
 import { Price } from '@magento/peregrine';
 import classify from 'src/classify';
 import {
@@ -64,6 +63,7 @@ class MiniCart extends Component {
     constructor(...args) {
         super(...args);
         this.state = {
+            isEditPanelOpen: false,
             focusItem: null
         };
     }
@@ -212,21 +212,24 @@ class MiniCart extends Component {
     };
 
     get miniCartInner() {
-        const { checkout, productList, props } = this;
+        const { checkout, productConfirm, productList, props, state } = this;
         const { classes, isCartEmpty, isMiniCartMaskOpen } = props;
+        const { isEditPanelOpen } = state;
 
         if (isCartEmpty) {
             return <EmptyMiniCart />;
         }
 
+        const footer = isEditPanelOpen ? productConfirm : checkout;
+
         const footerClassName = isMiniCartMaskOpen
             ? classes.footerMaskOpen
             : classes.footer;
 
         return (
             <Fragment>
                 <div className={classes.body}>{productList}</div>
-                <div className={footerClassName}>{checkout}</div>
+                <div className={footerClassName}>{footer}</div>
             </Fragment>
         );
     }

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

@@ -11,28 +11,6 @@
     grid-template-rows: min-content minmax(54px, 1fr) min-content;
 }
 
-.root_masked {
-    composes: root;
-}
-
-.mask {
-    display: block;
-    background-color: black;
-    position: fixed;
-    grid-row-start: 1;
-    grid-row-end: 4;
-    grid-column-start: 1;
-    grid-column-end: 4;
-    visibility: hidden;
-    opacity: 0;
-}
-
-.mask_active {
-    composes: mask;
-    opacity: 0.5;
-    visibility: visible;
-}
-
 .image {
     background-color: rgb(var(--venia-grey));
     background-position: 50% 50%;
@@ -86,13 +64,13 @@
     display: inline-flex;
 }
 
-.modal {
+.mask {
     position: absolute;
     left: -24px;
     right: -24px;
     top: -7px;
     bottom: -7px;
-    background-color: rgb(var(--venia-teal));
-    opacity: 0.1;
+    background-color: rgb(var(--venia-grey));
+    opacity: 0.5;
     z-index: 2;
 }

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

@@ -4,7 +4,6 @@ import { Price } from '@magento/peregrine';
 import { resourceUrl } from 'src/drivers';
 import Kebab from './kebab';
 import Section from './section';
-
 import classify from 'src/classify';
 import defaultClasses from './product.css';
 
@@ -49,7 +48,7 @@ class Product extends Component {
     constructor() {
         super();
         this.state = {
-            isOpen: false,
+            isLoading: false,
             isFavorite: false
         };
     }
@@ -71,9 +70,9 @@ class Product extends Component {
         ) : null;
     }
 
-    get modal() {
+    get mask() {
         const { classes } = this.props;
-        return this.state.isOpen ? <div className={classes.modal} /> : null;
+        return this.state.isLoading ? <div className={classes.mask} /> : null;
     }
 
     styleImage(image) {
@@ -88,15 +87,12 @@ class Product extends Component {
     }
 
     render() {
-        const { options, props, modal } = this;
+        const { options, props, mask } = this;
         const { classes, item, currencyCode } = props;
-        const rootClasses = this.state.isOpen
-            ? classes.root + ' ' + classes.root_masked
-            : classes.root;
         const favoritesFill = { fill: 'rgb(var(--venia-teal))' };
 
         return (
-            <li className={rootClasses}>
+            <li className={classes.root}>
                 <div
                     className={classes.image}
                     style={this.styleImage(item.image)}
@@ -115,7 +111,7 @@ class Product extends Component {
                         </span>
                     </div>
                 </div>
-                {modal}
+                {mask}
                 <Kebab>
                     <Section
                         text="Add to favorites"
@@ -151,6 +147,10 @@ class Product extends Component {
     };
 
     removeItem = () => {
+        this.setState({
+            isLoading: true
+        });
+
         // TODO: prompt user to confirm this action
         this.props.removeItemFromCart({
             item: this.props.item