Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] "Remove item" in minicart usability issue #882

Merged
merged 42 commits into from
Mar 21, 2019
Merged
Show file tree
Hide file tree
Changes from 39 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
a27c9be
Merge branch 'release/2.0' of /home/d.shmaliuk/pwa-studio with confli…
Feb 8, 2019
24ff337
"Remove Item" in Minicart usability issue #661.
Feb 11, 2019
193b4d5
Merge remote-tracking branch 'upstream/release/2.0' into "Remove_Item…
Feb 11, 2019
574a742
"Remove Item" in Minicart usability issue #661.
Feb 11, 2019
0653e26
"Remove Item" in Minicart usability issue #661.
Feb 11, 2019
9639ac5
"Remove Item" in Minicart usability issue #661.
Feb 11, 2019
2e5d876
Merge remote-tracking branch 'origin/"Remove_Item"_in_Minicart_usabil…
Feb 11, 2019
beb5f4c
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 11, 2019
3e7e19b
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 11, 2019
93c8a04
Merge branch 'release/2.0' of github.com:magento-research/pwa-studio …
Feb 13, 2019
6ab8f14
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 13, 2019
2aa42f1
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 13, 2019
c37e01d
Merge branch 'release/2.0' of github.com:magento-research/pwa-studio …
Feb 14, 2019
763eb96
Merge remote-tracking branch 'origin/"Remove_Item"_in_Minicart_usabil…
Feb 14, 2019
e971b97
Merge branch 'release/2.0' of github.com:magento-research/pwa-studio …
Feb 15, 2019
551b947
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 18, 2019
ecdc389
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 20, 2019
7b9b7f0
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Feb 21, 2019
cefdb43
Adds unit tests to app reducer (#921)
supernova-at Mar 4, 2019
f684e69
Add unit tests to cart reducer (#928)
supernova-at Mar 4, 2019
f5ffd7b
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Mar 4, 2019
e026526
Adds unit tests to catalog reducer (#931)
supernova-at Mar 4, 2019
64355eb
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Mar 5, 2019
ae42192
[DOCUMENTATION] cherry pick 3.0 doc updates (#992)
jcalcaben Mar 5, 2019
7174988
Scroll to top on Product mount (#832)
dani97 Mar 5, 2019
e5032fe
Create new guest cart when checkout resets (#917)
supernova-at Mar 5, 2019
9244a33
Purchase History unit tests and refactors (#891)
supernova-at Mar 5, 2019
4ea1029
Merge branch 'release/2.0' into "Remove_Item"_in_Minicart_usability_i…
dmshm Mar 6, 2019
32de431
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
supernova-at Mar 6, 2019
2182d8f
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
dmshm Mar 7, 2019
1d6618a
Mask specific product instead of entire cart during removeItem action
sirugh Mar 8, 2019
64d2077
Remove unnecessary stuff.
sirugh Mar 8, 2019
192b268
Cleanup code and extra additions.
sirugh Mar 8, 2019
ee34326
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
sirugh Mar 8, 2019
1bb8a96
"Remove item" in minicart usability issue #661
Mar 9, 2019
7f75f18
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
dmshm Mar 12, 2019
aaf388e
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
dmshm Mar 13, 2019
02294a0
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
dmshm Mar 18, 2019
c301105
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
sirugh Mar 21, 2019
8c456a4
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
supernova-at Mar 21, 2019
6e1e00f
[FEATURE] "Remove item" in minicart usability issue
Mar 21, 2019
c50952e
Merge branch 'develop' into "Remove_Item"_in_Minicart_usability_issue…
supernova-at Mar 21, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/venia-concept/src/actions/cart/asyncActions.js
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -280,7 +279,11 @@ export const removeItemFromCart = payload => {
}
}

await Promise.all([dispatch(getCartDetails({ forceRefresh: true }))]);
await dispatch(
getCartDetails({
forceRefresh: true
})
);
};
};

Expand Down Expand Up @@ -324,7 +327,10 @@ export const getCartDetails = (payload = {}) => {
totals
] = await Promise.all([
retrieveImageCache(),
fetchCartPart({ guestCartId, forceRefresh }),
fetchCartPart({
guestCartId,
forceRefresh
}),
fetchCartPart({
guestCartId,
forceRefresh,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,9 @@ const styles = {
display: 'grid'
};

stories.add('Kebab Closed', () => (
stories.add('Kebab', () => (
<div style={styles}>
<Kebab isOpen={false} />
dmshm marked this conversation as resolved.
Show resolved Hide resolved
</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" />
Expand Down
15 changes: 4 additions & 11 deletions packages/venia-concept/src/components/MiniCart/kebab.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
};
}

Expand All @@ -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
Expand Down
9 changes: 6 additions & 3 deletions packages/venia-concept/src/components/MiniCart/miniCart.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -64,6 +63,7 @@ class MiniCart extends Component {
constructor(...args) {
super(...args);
this.state = {
isEditPanelOpen: false,
focusItem: null
};
}
Expand Down Expand Up @@ -212,21 +212,24 @@ class MiniCart extends Component {
};

get miniCartInner() {
const { checkout, productList, props } = this;
const { checkout, productConfirm, productList, props, state } = this;
dmshm marked this conversation as resolved.
Show resolved Hide resolved
const { classes, isCartEmpty, isMiniCartMaskOpen } = props;
const { isEditPanelOpen } = state;
dmshm marked this conversation as resolved.
Show resolved Hide resolved

if (isCartEmpty) {
return <EmptyMiniCart />;
}

const footer = isEditPanelOpen ? productConfirm : checkout;
dmshm marked this conversation as resolved.
Show resolved Hide resolved

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>
);
}
Expand Down
28 changes: 3 additions & 25 deletions packages/venia-concept/src/components/MiniCart/product.css
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
dmshm marked this conversation as resolved.
Show resolved Hide resolved
z-index: 2;
}
20 changes: 10 additions & 10 deletions packages/venia-concept/src/components/MiniCart/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -49,7 +48,7 @@ class Product extends Component {
constructor() {
super();
this.state = {
isOpen: false,
isLoading: false,
isFavorite: false
};
}
Expand All @@ -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) {
Expand All @@ -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)}
Expand All @@ -115,7 +111,7 @@ class Product extends Component {
</span>
</div>
</div>
{modal}
{mask}
<Kebab>
<Section
text="Add to favorites"
Expand Down Expand Up @@ -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
Expand Down