Added Product comparison feature

client/app/components/Store/AddToCompare/index.js

@@ -0,0 +1,40 @@
+/**
+ *
+ * AddToCompare
+ *
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const AddToCompare = props => {
+  const { id, compareItems, addToCompare, authenticated } = props;
+
+  const isProductInCompare = compareItems.some(item => item._id === id);
+
+  const handleAddToCompare = () => {
+    if (authenticated) {
+      addToCompare(id);
+      return;
+    }
+
+    props.toggleCompareMenu();
+  };
+
+  return (
+    <div className='add-to-compare'>
+      <button
+        className={`compare-icon ${isProductInCompare ? 'active' : ''}`}
+        type='button'
+        onClick={handleAddToCompare}
+      >
+        <i className='fa fa-exchange' aria-hidden='true'></i>
+        <span className='btn-tooltip'>
+          {isProductInCompare ? 'Remove From Compare' : 'Add To Compare'}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default AddToCompare;

client/app/components/Store/CompareIcon/index.js

@@ -0,0 +1,30 @@
+/**
+ *
+ * CompareIcon
+ *
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const CompareIcon = props => {
+  const { compareItems, toggleCompareMenu } = props;
+  const compareItemsCount = compareItems.length;
+
+  return (
+    <div className='compare-icon'>
+      <button
+        className='compare-icon-btn'
+        onClick={toggleCompareMenu}
+        type='button'
+      >
+        <i className='fa fa-exchange' aria-hidden='true'></i>
+        {compareItemsCount > 0 && (
+          <span className='compare-badge'>{compareItemsCount}</span>
+        )}
+      </button>
+    </div>
+  );
+};
+
+export default CompareIcon;

client/app/components/Store/CompareMenu/index.js

@@ -0,0 +1,82 @@
+/**
+ *
+ * CompareMenu
+ *
+ */
+
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Button from '../../Common/Button';
+
+const CompareMenu = props => {
+  const { compareItems, isCompareOpen, toggleCompareMenu, removeFromCompare } = props;
+
+  const handleRemoveFromCompare = product => {
+    removeFromCompare(product);
+  };
+
+  const handleGoToCompare = () => {
+    toggleCompareMenu();
+  };
+
+  return (
+    <div className={`compare-menu ${isCompareOpen ? 'open' : ''}`}>
+      <div className='compare-menu-header'>
+        <h1>Compare Products</h1>
+        <button
+          type='button'
+          onClick={toggleCompareMenu}
+          className='close-compare-menu'
+        >
+          <i className='fa fa-close' aria-hidden='true'></i>
+        </button>
+      </div>
+      {compareItems.length > 0 ? (
+        <div className='compare-menu-body'>
+          <div className='compare-items'>
+            {compareItems.map((item, index) => (
+              <div key={index} className='compare-item'>
+                <div className='compare-item-image'>
+                  <img
+                    src={`${
+                      item.imageUrl
+                        ? item.imageUrl
+                        : '/images/placeholder-image.png'
+                    }`}
+                    alt={item.name}
+                  />
+                </div>
+                <div className='compare-item-details'>
+                  <h4>{item.name}</h4>
+                  <div className='compare-item-price'>${item.price}</div>
+                </div>
+                <button
+                  type='button'
+                  className='compare-item-remove'
+                  onClick={() => handleRemoveFromCompare(item)}
+                >
+                  <i className='fa fa-close' aria-hidden='true'></i>
+                </button>
+              </div>
+            ))}
+          </div>
+          <div className='compare-menu-footer'>
+            <Link
+              to='/comparison'
+              className='compare-button'
+              onClick={handleGoToCompare}
+            >
+              Compare Now
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className='compare-menu-body'>
+          <p className='empty-compare-msg'>Your comparison list is empty.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CompareMenu;

client/app/components/Store/ProductList/index.js

@@ -9,9 +9,17 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import AddToWishList from '../AddToWishList';
+import AddToCompare from '../AddToCompare';
 
 const ProductList = props => {
-  const { products, updateWishlist, authenticated } = props;
+  const { 
+    products, 
+    updateWishlist, 
+    authenticated, 
+    compareItems, 
+    addToCompare, 
+    toggleCompareMenu 
+  } = props;
 
   return (
     <div className='product-list'>
@@ -28,6 +36,16 @@ const ProductList = props => {
                   authenticated={authenticated}
                 />
               </div>
+
+              <div className='add-compare-box'>
+                <AddToCompare
+                  id={product._id}
+                  compareItems={compareItems}
+                  addToCompare={() => addToCompare(product)}
+                  authenticated={authenticated}
+                  toggleCompareMenu={toggleCompareMenu}
+                />
+              </div>
 
               <div className='item-link'>
                 <Link

client/app/containers/Comparison/actions.js

@@ -0,0 +1,84 @@
+/*
+ *
+ * Comparison actions
+ *
+ */
+
+import { 
+  ADD_TO_COMPARE, 
+  REMOVE_FROM_COMPARE, 
+  CLEAR_COMPARE,
+  TOGGLE_COMPARE_MENU
+} from './constants';
+
+import handleError from '../../utils/error';
+import { toggleCart } from '../Cart/actions';
+import { allFieldsValidation } from '../../utils/validation';
+
+// add product to comparison
+export const addToCompare = product => {
+  return (dispatch, getState) => {
+    const { comparison } = getState();
+    const isAdded = comparison.compareItems.some(item => item._id === product._id);
+
+    if (isAdded) {
+      return dispatch({
+        type: ADD_TO_COMPARE,
+        payload: comparison.compareItems
+      });
+    }
+
+    // Limit to 4 products for comparison
+    if (comparison.compareItems.length >= 4) {
+      return dispatch(handleError('You can compare up to 4 products at a time.'));
+    }
+
+    const compareItems = [...comparison.compareItems, product];
+
+    dispatch({
+      type: ADD_TO_COMPARE,
+      payload: compareItems
+    });
+  };
+};
+
+// remove product from comparison
+export const removeFromCompare = product => {
+  return (dispatch, getState) => {
+    const { comparison } = getState();
+    const compareItems = comparison.compareItems.filter(
+      item => item._id !== product._id
+    );
+
+    dispatch({
+      type: REMOVE_FROM_COMPARE,
+      payload: compareItems
+    });
+  };
+};
+
+// clear comparison list
+export const clearCompare = () => {
+  return (dispatch, getState) => {
+    dispatch({
+      type: CLEAR_COMPARE
+    });
+  };
+};
+
+// toggle comparison menu
+export const toggleCompareMenu = () => {
+  return (dispatch, getState) => {
+    const { comparison, cart } = getState();
+
+    // If cart menu is open, close it
+    if (cart.isCartOpen) {
+      dispatch(toggleCart());
+    }
+
+    dispatch({
+      type: TOGGLE_COMPARE_MENU,
+      payload: !comparison.isCompareOpen
+    });
+  };
+};

client/app/containers/Comparison/constants.js

@@ -0,0 +1,10 @@
+/*
+ *
+ * Comparison constants
+ *
+ */
+
+export const ADD_TO_COMPARE = 'src/Comparison/ADD_TO_COMPARE';
+export const REMOVE_FROM_COMPARE = 'src/Comparison/REMOVE_FROM_COMPARE';
+export const CLEAR_COMPARE = 'src/Comparison/CLEAR_COMPARE';
+export const TOGGLE_COMPARE_MENU = 'src/Comparison/TOGGLE_COMPARE_MENU';