item highlight

package.json

@@ -24,13 +24,14 @@
  },
  "homepage": "https://github.com/coopcycle/coopcycle-js",
  "dependencies": {
+ "classnames": "^2.2.5",
  "form-data": "^2.2.0",
  "isomorphic-fetch": "^2.2.1",
  "localforage": "^1.5.0",
  "lodash": "^4.17.4",
  "lodash.groupby": "^4.6.0",
- "react-scroll": "^1.6.4",
- "object-hash": "^1.1.8"
+ "object-hash": "^1.1.8",
+ "react-scroll": "^1.6.4"
  },
  "devDependencies": {
  "babel-core": "^6.26.0",

src/actions/index.js

@@ -7,6 +7,10 @@ export const CART_ADDRESS_KEY = 'cartAddress';
 export const DELIVERY_DATE_KEY = 'deliveryDate';
 export const ORDER_KEY = 'order';
 
+export const removeLastCartItem = () => {
+ return { type: 'REMOVE_LAST_CART_ITEM' }
+}
+
 export const addToCart = (menuItem, selectedModifiers = {}) => {
  return { type: 'ADD_TO_CART', menuItem, selectedModifiers};
 }
@@ -184,4 +188,3 @@ export const checkDistance = () => (dispatch, getState) => {
 export const setDeliveryDate = (date) => ({ type: 'SET_DELIVERY_DATE', date })
 
 export const resetCheckout = () => ({ type: 'RESET_CHECKOUT' })
-

src/components/Cart.js

@@ -1,3 +1,4 @@
+import classnames from 'classnames'
 import React, { Component } from 'react';
 import { ListGroup, ListGroupItem, Alert, Button } from 'react-bootstrap';
 import { bindActionCreators } from 'redux';
@@ -36,12 +37,15 @@ class Cart extends Component {
  }
 
  renderCartItems() {
+ const { cartItems, cartLastItem } = this.props
  return (
  <ListGroup>
- { this.props.cartItems.map((item, key) =>
- <ListGroupItem key={ key }>
+ { cartItems.map((item, key) =>
+ <ListGroupItem active={item.menuItem['@id'] === (cartLastItem && cartLastItem['@id'])} key={ key }>
  { item.menuItem.name }
- <span className="quantity text-muted">×{ item.quantity }</span>
+ <span className={classnames("quantity text-muted", {
+ "quantity--last": item.menuItem['@id'] === (cartLastItem && cartLastItem['@id'])
+ })}>×{ item.quantity }</span>
  <button type="button" className="close pull-right" aria-label="Close"
  onClick={ () => this.props.actions.removeFromCart(item) }>
  <span aria-hidden="true">×</span>
@@ -63,6 +67,12 @@ class Cart extends Component {
  }
 
  render() {
+ const { cartItems,
+ noDatePicker,
+ itemCount,
+ readonly,
+ total
+ } = this.props
  const { toggled } = this.state
 
  var panelClasses = ['panel', 'panel-default', 'cart-wrapper']
@@ -73,22 +83,22 @@ class Cart extends Component {
  return (
  <div className={ panelClasses.join(' ') }>
  <div className="panel-heading cart-heading" onClick={ this.onHeaderClick }>
- <span className="cart-heading--items">{ this.props.itemCount }</span>
+ <span className="cart-heading--items">{ itemCount }</span>
  <span className="cart-heading--total"><i className={ toggled ? "glyphicon glyphicon-chevron-up" : "glyphicon glyphicon-chevron-down"}></i></span>
  Ma commande
  </div>
  <div className="panel-body">
  {
- !this.props.noDatePicker && (<div><DatePicker /><hr/></div>)
+ !noDatePicker && (<div><DatePicker /><hr/></div>)
  }
- { this.props.cartItems.length > 0 ? this.renderCartItems(): (
+ { cartItems.length > 0 ? this.renderCartItems(): (
  <Alert bsStyle="warning">Votre panier est vide</Alert>
  ) }
  <hr />
  <p>
- <strong>Total : { this.props.total } €</strong>
+ <strong>Total : { total } €</strong>
  </p>
- { !this.props.readonly && this.renderButton() }
+ { !readonly && this.renderButton() }
  </div>
  </div>
  )
@@ -97,6 +107,7 @@ class Cart extends Component {
 
 function mapStateToProps(state, props) {
  return {
+ cartLastItem: state.cartLastItem,
  cartItems: state.cartItems,
  total: cartTotal(state.cartItems),
  itemCount: cartCountItems(state.cartItems),

src/components/MenuItem.js

@@ -1,11 +1,11 @@
+import classnames from 'classnames'
 import React, { Component } from 'react';
 import { ListGroup, ListGroupItem, Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
-import { addToCart } from '../actions';
+import { addToCart, removeLastCartItem } from '../actions';
 import _ from 'lodash';
 import Modal from 'react-modal';
 
-
 class MenuItem extends Component {
 
  constructor (props) {
@@ -82,17 +82,24 @@ class MenuItem extends Component {
  }
 
  render () {
+ const { cartLastItem, item } = this.props
+ const isActive = item['@id'] === (cartLastItem && cartLastItem['@id'])
  return (
- <ListGroupItem onClick = { this.props.item.modifiers.length > 0 ? () => this.showModal() : () => this.props.onItemClick(this.props.item) }>
- { this.props.item.name } <span className="pull-right">{ this.props.item.offers.price } €</span>
- { this.props.item.modifiers.length > 0 ?
+ <ListGroupItem
+ active={isActive}
+ >
+ <span className={classnames("add-icon", { 'add-icon--disabled': cartLastItem })}
+ onClick={ item.modifiers.length > 0
+ ? () => this.showModal()
+ : () => !cartLastItem && this.props.onItemClick(item) }> + </span> { item.name } <span className="pull-right price"> { item.offers.price } €</span>
+ { item.modifiers.length > 0 ?
  <Modal isOpen={ this.state.showModal } onHide={ () => this.closeModal() }>
  <div onClick={ (evt) => this.stopPropagation(evt) }>
  <div>
- <h3>{ this.props.item.name }</h3>
+ <h3>{ item.name }</h3>
  </div>
  <div>
- { this.props.item.modifiers.map( (modifier, key) => this.renderModifier(modifier, key)) }
+ { item.modifiers.map( (modifier, key) => this.renderModifier(modifier, key)) }
  </div>
  <div>
  <Button bsStyle="primary" bsSize="large" block onClick={ (evt) => this.onModalDone(evt) }>Ajouter</Button>
@@ -107,15 +114,16 @@ class MenuItem extends Component {
 
 }
 
-const mapStateToProps = state => {
- return {
- }
-}
 
-const mapDispatchToProps = dispatch => {
- return {
- onItemClick: (item, modifiers = {}) => { dispatch(addToCart(item, modifiers)) }
- }
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(MenuItem);
+export default connect(
+ ({ cartLastItem }) => ({ cartLastItem }),
+ dispatch => {
+ return {
+ onItemClick: (item, modifiers = {}) => {
+ dispatch(addToCart(item, modifiers))
+ setTimeout(() => dispatch(removeLastCartItem()), 1000)
+ }
+ }
+ }
+)(MenuItem);

src/reducers/index.js

@@ -2,6 +2,18 @@ import { combineReducers } from 'redux'
 import _ from 'lodash';
 import hash from 'object-hash';
 
+const cartLastItem = (state = null, action) => {
+ console.log('cdqs', action.type)
+ switch (action.type) {
+ case 'ADD_TO_CART':
+ return action.menuItem
+ case 'REMOVE_LAST_CART_ITEM':
+ return null
+ default:
+ return state
+ }
+}
+
 const cartItems = (state = [], action) => {
 
  let newState, cartItem;
@@ -26,7 +38,7 @@ const cartItems = (state = [], action) => {
  }
  return newState;
  case 'REMOVE_FROM_CART':
- return state.filter((item) => item !== action.cartItem);
+ return state.filter(item => item !== action.cartItem);
  case 'RESET_CHECKOUT':
  return [];
  default:
@@ -199,7 +211,7 @@ const deliveryDate = (state = null, action) => {
  }
 }
 
-export default combineReducers({
+export default combineReducers({ cartLastItem,
  cartItems,
  cartAddress,
  client,

src/styles/index.scss

@@ -201,3 +201,50 @@ $cart-heading-height: 40px;
 .text-center {
  text-align: center;
 }
+
+.add-icon {
+ cursor: pointer;
+ border-radius: 50%;
+ border: 1px solid $main-blue-light;
+ color: $main-blue-light;
+ display: inline-block;
+ font-size: 20px;
+ margin-right: 1rem;
+ height: 30px;
+ text-align: center;
+ width: 30px;
+ &:hover {
+ background-color: $main-blue-light;
+ transition: all 0.4s ease-out;
+ }
+ &:focus {
+ border-color: white;
+ color: white;
+ }
+ &--disabled {
+ &:hover {
+ background-color: transparent;
+ }
+ cursor: not-allowed;
+ opacity: 0.5;
+ }
+}
+
+.price {
+ line-height: 30px;
+}
+
+.list-group-item {
+ transition: all 0.4s ease-out;
+ &.disabled {
+ background-color: transparent;
+ }
+}
+
+.quantity {
+ transition: all 0.4s ease-out;
+ &--last {
+ color: white;
+ transition: all 0.4s ease-out;
+ }
+}

src/utils.js

@@ -32,5 +32,4 @@ const cartCountItems = cartItems => {
  })
 }
 
-
 export { cartTotal, cartCountItems }

yarn.lock

@@ -42,16 +42,7 @@ ajv@^4.9.1:
  co "^4.6.0"
  json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0:
- version "5.3.0"
- resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.3.0.tgz#4414ff74a50879c208ee5fdc826e32c303549eda"
- dependencies:
- co "^4.6.0"
- fast-deep-equal "^1.0.0"
- fast-json-stable-stringify "^2.0.0"
- json-schema-traverse "^0.3.0"
-
-ajv@^5.1.0, ajv@^5.1.5:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5:
  version "5.2.3"
  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
  dependencies:
@@ -225,13 +216,7 @@ async@^1.5.2:
  version "1.5.2"
  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
 
-async@^2.1.2:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
- dependencies:
- lodash "^4.14.0"
-
-async@^2.1.5:
+async@^2.1.2, async@^2.1.5:
  version "2.6.0"
  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
  dependencies:
@@ -2366,10 +2351,6 @@ fast-deep-equal@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
 
-fast-json-stable-stringify@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
-
 fastparse@^1.1.1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
@@ -3237,11 +3218,7 @@ is-binary-path@^1.0.0:
  dependencies:
  binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2:
- version "1.1.6"
- resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-
-is-buffer@^1.1.5:
+is-buffer@^1.0.2, is-buffer@^1.1.5:
  version "1.1.5"
  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"