\n
\n \n {productTiles}\n
\n \n
\n \n );\n};\n\nSortModal.defaultProps = {\n\n};\n\nSortModal.propTypes = {\n closeModal: PropTypes.func,\n dispatchSortSelection: PropTypes.func,\n modalIsOpen: PropTypes.bool\n};\n\nconst mapDispatchToProps = ({\n dispatchSortSelection\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(SortModal);","import SortModal from './SortModal.jsx';\n\nexport default SortModal;","import React, {useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport {dispatchFilterRange} from './../../../pages/PLP/actions';\nimport Modal from 'react-modal';\nimport InputRange from 'react-input-range';\nimport './FilterModal.component.scss';\nimport 'react-input-range/lib/css/index.css';\n\nconst customStyles = {\n content: {\n top: '20%',\n width: '93%',\n marginLeft: 'auto',\n marginRight: 'auto',\n background: 'rgb(255, 255, 255)',\n overflow: 'auto',\n borderRadius: '4px'\n }\n};\n\nconst FilterModal = ({closeModal, dispatchFilterRange, modalIsOpen}) => {\n\n const [filterRange, setFilterRange] = useState({min: 200, max: 5000})\n var subtitle;\n\n function afterOpenModal() {\n subtitle.style.color = '#000';\n subtitle.style.fontWeight = '700';\n }\n\n const submitSelection = (e) => {\n dispatchFilterRange(filterRange)\n closeModal(e)\n }\n\n return (\n \n
\n (subtitle = _subtitle)}>Sort Options
\n \n\n {selectionError && Please Select One of the options below.}\n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n \n
\n \n
\n \n );\n};\n\nFilterModal.defaultProps = {\n\n};\n\nFilterModal.propTypes = {\n closeModal: PropTypes.func,\n dispatchFilterSelection: PropTypes.func,\n modalIsOpen: PropTypes.bool\n};\n\nconst mapDispatchToProps = ({\n dispatchFilterRange\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(FilterModal);\n","import FilterModal from './FilterModal.jsx';\n\nexport default FilterModal;","import React, {useState} from 'react';\nimport './SortAndFilterPanel.component.scss'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSort } from '@fortawesome/free-solid-svg-icons'\nimport { faFilter } from '@fortawesome/free-solid-svg-icons'\nimport SortModal from '../SortModal';\nimport FilterModal from '../FilterModal';\n\nconst SortAndFilterPanel = props => {\n\n const [sortModalIsOpen,setSortIsOpen] = useState(false);\n const [filterModalIsOpen,setFilterIsOpen] = useState(false);\n \n function closeModal(type, e){\n e.stopPropagation();\n type === \"sort\" ? setSortIsOpen(false) : setFilterIsOpen(false);\n }\n\n return (\n \n
\n (subtitle = _subtitle)}>Filter Options
\n \n\n `₹${value}`}\n value={filterRange}\n onChange={value => setFilterRange(value)} />\n {/* onChangeComplete={(e) =>submitSelection(e)} /> */}\n
\n \n \n \n
\n \n
\n );\n};\n\nSortAndFilterPanel.defaultProps = {\n\n};\n\nSortAndFilterPanel.propTypes = {\n\n};\n\nexport default SortAndFilterPanel;","import SortAndFilterPanel from './SortAndFilterPanel.jsx';\n\nexport default SortAndFilterPanel;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport {createPropsSelector} from 'reselect-immutable-helpers';\nimport {updateCart} from './../../../pages/Cart/actions'\nimport {getCartTotalCount, getCartItems} from './../../../pages/Cart/selectors'\n\nimport Button from './../../atoms/Button'\nimport ItemPrice from '../ItemPrice/ItemPrice';\n\nimport './ProductTile.component.scss';\n\nconst ProductTile = props => {\n\n const product = props.product\n const addToCartButtonClass = \"btn btn__addToCart\"\n\n const updateCart = (productId) => {\n let cartTotalCount = props.cartTotalCount\n const cartItems = props.cartItems\n let count = cartItems && cartItems[productId] ? cartItems[productId] : 0\n cartItems[productId] = ++count\n props.updateCart(++cartTotalCount, cartItems)\n }\n\n return (\n \n
\n \n
\n setSortIsOpen(true)}>\n closeModal(\"sort\", e)} modalIsOpen={sortModalIsOpen} />\n
\n setFilterIsOpen(true)}>\n closeModal(\"filter\", e)} modalIsOpen={filterModalIsOpen}/>\n
\n \n {product.discountedPrice && ₹{product.discountedPrice}}\n {\n hasDiscount &&\n (\n \n {product.price}\n {product.discount}% off\n \n )\n }\n
*/}\n \n
\n )\n }\n \n let productsWithDiscountedPrice = props.products \n && props.products.length !== 0\n && props.products.map(product => {\n const discount = product.discount && product.price * (product.discount/100)\n product.discountAmount = Math.ceil(discount)\n product.discountedPrice = Math.ceil(product.price - product.discountAmount)\n return product\n })\n if (productsWithDiscountedPrice) {\n if (sb) {\n switch(sb) {\n case \"priceHtoL\":\n productsWithDiscountedPrice.sort((prod1, prod2) => prod2.discountedPrice - prod1.discountedPrice);\n break;\n case \"priceLtoH\":\n productsWithDiscountedPrice.sort((prod1, prod2) => prod1.discountedPrice - prod2.discountedPrice);\n break;\n case \"discount\":\n productsWithDiscountedPrice.sort((prod1, prod2) => prod2.discount - prod1.discount);\n break;\n default:\n break;\n }\n }\n \n if (fr) {\n const productsWithDiscountedPriceFiltered = productsWithDiscountedPrice.filter(prod => prod.discountedPrice > fr.min && prod.discountedPrice < fr.max);\n if (productsWithDiscountedPrice.length > 0 && productsWithDiscountedPriceFiltered.length === 0) {\n !filterNoMatch && setFilterNoMatch(true)\n } else {\n filterNoMatch && setFilterNoMatch(false)\n }\n productsWithDiscountedPrice = productsWithDiscountedPriceFiltered\n }\n }\n\n const productTiles = productsWithDiscountedPrice && productsWithDiscountedPrice.map((product, key) =>{\n return No Products match the search criteria!
\nPlease modify Search or filter criteria, and try again.
\n\n
\n )\n};\n\nPlp.propTypes = {\n dispatchProducts: PropTypes.func\n};\n\nconst mapDispatchToProps = ({\n dispatchProducts\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(Plp);","import Plp from './Plp.jsx';\n\nexport default Plp;","import {createSelector} from 'reselect'\nimport {createGetSelector} from 'reselect-immutable-helpers'\n\nconst getData = ({data}) => data\n\nexport const getCart = createSelector(\n getData,\n (dataState) => {\n return dataState.pages.cart\n }\n)\n\nexport const getFormValues = createGetSelector(getCart, 'formValues')\nexport const getFormErrors = createGetSelector(getCart, 'formErrors')\nexport const getCartTotalCount = createGetSelector(getCart, 'cartTotalCount')\nexport const getCartItems = createGetSelector(getCart, 'cartItems')","import {createSelector} from 'reselect'\nimport {createGetSelector} from 'reselect-immutable-helpers'\n\nconst getData = ({data}) => data\n\nexport const getPlp = createSelector(\n getData,\n (dataState) => {\n return dataState.pages.plp\n }\n)\n\nexport const getFormValues = createGetSelector(getPlp, 'formValues')\nexport const getFormErrors = createGetSelector(getPlp, 'formErrors')\nexport const getProducts = createGetSelector(getPlp, 'products')\nexport const getFilterRange = createGetSelector(getPlp, 'filterRange')\nexport const getSortSelection = createGetSelector(getPlp, 'sortBy')","import React from 'react';\nimport PropTypes from 'prop-types';\nimport './ItemPrice.component.scss';\n\nconst ItemPrice = ({product}) => {\n\n const hasDiscount = !!product.discount && product.discount !== 0\n\n return (\n \n {product.discountedPrice && ₹{product.discountedPrice}}\n {\n hasDiscount &&\n (\n \n {product.price}\n {product.discount}% off\n \n )\n }\n
\n );\n};\n\nItemPrice.defaultProps = {\n product: PropTypes.object\n};\n\nItemPrice.propTypes = {\n\n};\n\nexport default ItemPrice;","import React, {useState} from 'react';\nimport './Search.component.scss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSearch } from '@fortawesome/free-solid-svg-icons'\n\nconst Search = props => {\n const [searchInitiated, setSearchInitiated] = useState(false)\n return (\n setSearchInitiated(true)}>\n {searchInitiated && }\n
\n );\n};\n\nSearch.defaultProps = {\n\n};\n\nSearch.propTypes = {\n\n};\n\nexport default Search;","import Search from './Search.jsx';\n\nexport default Search;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport './CartIcon.component.scss';\nimport {withRouter} from 'react-router-dom'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faShoppingCart } from '@fortawesome/free-solid-svg-icons'\nimport { createPropsSelector } from 'reselect-immutable-helpers';\n\nimport {getCartTotalCount} from './../../../pages/Cart/selectors'\n\nconst CartIcon = props => {\n\n const navigateToCart = () => {\n props.history.push('/view/cart')\n }\n\n return (\n \n
\n );\n};\n\nCartIcon.propTypes = {\n cartTotalCount: PropTypes.number\n};\n\nconst mapStateToProps = createPropsSelector({\n cartTotalCount: getCartTotalCount\n})\n\nexport default connect(mapStateToProps)(withRouter(CartIcon));","import CartIcon from './CartIcon.jsx';\n\nexport default CartIcon;","import React, {useEffect} from 'react';\nimport { Link } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faStar } from '@fortawesome/free-solid-svg-icons'\n\nimport Search from './../Search'\nimport CartIcon from './../CartIcon'\n\nconst Header = props => {\n\n useEffect(() => {\n const body = document.body;\n const scrollUp = \"scroll-up\";\n const scrollDown = \"scroll-down\";\n let lastScroll = 0;\n\n window.addEventListener(\"scroll\", () => {\n const currentScroll = window.pageYOffset;\n if (currentScroll === 0) {\n body.classList.remove(scrollUp);\n return;\n }\n \n if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {\n // down\n body.classList.remove(scrollUp);\n body.classList.add(scrollDown);\n } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {\n // up\n body.classList.remove(scrollDown);\n body.classList.add(scrollUp);\n }\n lastScroll = currentScroll;\n });\n })\n \n return (\n \n
\n \n );\n};\n\nSortModal.defaultProps = {\n\n};\n\nSortModal.propTypes = {\n closeModal: PropTypes.func,\n dispatchSortSelection: PropTypes.func,\n modalIsOpen: PropTypes.bool\n};\n\nconst mapDispatchToProps = ({\n dispatchSortSelection\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(SortModal);","import SortModal from './SortModal.jsx';\n\nexport default SortModal;","import React, {useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport {dispatchFilterRange} from './../../../pages/PLP/actions';\nimport Modal from 'react-modal';\nimport InputRange from 'react-input-range';\nimport './FilterModal.component.scss';\nimport 'react-input-range/lib/css/index.css';\n\nconst customStyles = {\n content: {\n top: '20%',\n width: '93%',\n marginLeft: 'auto',\n marginRight: 'auto',\n background: 'rgb(255, 255, 255)',\n overflow: 'auto',\n borderRadius: '4px'\n }\n};\n\nconst FilterModal = ({closeModal, dispatchFilterRange, modalIsOpen}) => {\n\n const [filterRange, setFilterRange] = useState({min: 200, max: 5000})\n var subtitle;\n\n function afterOpenModal() {\n subtitle.style.color = '#000';\n subtitle.style.fontWeight = '700';\n }\n\n const submitSelection = (e) => {\n dispatchFilterRange(filterRange)\n closeModal(e)\n }\n\n return (\n \n
\n (subtitle = _subtitle)}>Sort Options
\n \n\n {selectionError && Please Select One of the options below.}\n
\n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n \n
\n \n
\n \n );\n};\n\nFilterModal.defaultProps = {\n\n};\n\nFilterModal.propTypes = {\n closeModal: PropTypes.func,\n dispatchFilterSelection: PropTypes.func,\n modalIsOpen: PropTypes.bool\n};\n\nconst mapDispatchToProps = ({\n dispatchFilterRange\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(FilterModal);\n","import FilterModal from './FilterModal.jsx';\n\nexport default FilterModal;","import React, {useState} from 'react';\nimport './SortAndFilterPanel.component.scss'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSort } from '@fortawesome/free-solid-svg-icons'\nimport { faFilter } from '@fortawesome/free-solid-svg-icons'\nimport SortModal from '../SortModal';\nimport FilterModal from '../FilterModal';\n\nconst SortAndFilterPanel = props => {\n\n const [sortModalIsOpen,setSortIsOpen] = useState(false);\n const [filterModalIsOpen,setFilterIsOpen] = useState(false);\n \n function closeModal(type, e){\n e.stopPropagation();\n type === \"sort\" ? setSortIsOpen(false) : setFilterIsOpen(false);\n }\n\n return (\n \n
\n (subtitle = _subtitle)}>Filter Options
\n \n\n `${value} Kg`}\n value={filterRange}\n onChange={value => setFilterRange(value)} />\n {/* onChangeComplete={(e) =>submitSelection(e)} /> */}\n
\n \n \n \n
\n \n
\n );\n};\n\nSortAndFilterPanel.defaultProps = {\n\n};\n\nSortAndFilterPanel.propTypes = {\n\n};\n\nexport default SortAndFilterPanel;","import SortAndFilterPanel from './SortAndFilterPanel.jsx';\n\nexport default SortAndFilterPanel;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport {createPropsSelector} from 'reselect-immutable-helpers';\nimport {updateCart} from './../../../pages/Cart/actions'\nimport {getCartTotalCount, getCartItems} from './../../../pages/Cart/selectors'\n\nimport Button from './../../atoms/Button'\nimport ItemPrice from '../ItemPrice/ItemPrice';\n\nimport './ProductTile.component.scss';\n\nconst ProductTile = props => {\n\n const product = props.product\n const addToCartButtonClass = \"btn btn__addToCart\"\n\n const updateCart = (productId) => {\n let cartTotalCount = props.cartTotalCount\n const cartItems = props.cartItems\n let count = cartItems && cartItems[productId] ? cartItems[productId] : 0\n cartItems[productId] = ++count\n props.updateCart(++cartTotalCount, cartItems)\n }\n\n return (\n \n
\n \n
\n setSortIsOpen(true)}>\n closeModal(\"sort\", e)} modalIsOpen={sortModalIsOpen} />\n
\n setFilterIsOpen(true)}>\n closeModal(\"filter\", e)} modalIsOpen={filterModalIsOpen}/>\n
\n \n {product.discountedPrice && ₹{product.discountedPrice}}\n {\n hasDiscount &&\n (\n \n {product.price}\n {product.discount}% off\n \n )\n }\n
*/}\n \n
\n \n {productTiles}\n
\n \n
\n )\n};\n\nPlp.propTypes = {\n dispatchProducts: PropTypes.func\n};\n\nconst mapDispatchToProps = ({\n dispatchProducts\n})\n\nexport default connect(\n null,\n mapDispatchToProps\n)(Plp);","import Plp from './Plp.jsx';\n\nexport default Plp;","import {createSelector} from 'reselect'\nimport {createGetSelector} from 'reselect-immutable-helpers'\n\nconst getData = ({data}) => data\n\nexport const getCart = createSelector(\n getData,\n (dataState) => {\n return dataState.pages.cart\n }\n)\n\nexport const getFormValues = createGetSelector(getCart, 'formValues')\nexport const getFormErrors = createGetSelector(getCart, 'formErrors')\nexport const getCartTotalCount = createGetSelector(getCart, 'cartTotalCount')\nexport const getCartItems = createGetSelector(getCart, 'cartItems')","import {createSelector} from 'reselect'\nimport {createGetSelector} from 'reselect-immutable-helpers'\n\nconst getData = ({data}) => data\n\nexport const getPlp = createSelector(\n getData,\n (dataState) => {\n return dataState.pages.plp\n }\n)\n\nexport const getFormValues = createGetSelector(getPlp, 'formValues')\nexport const getFormErrors = createGetSelector(getPlp, 'formErrors')\nexport const getProducts = createGetSelector(getPlp, 'products')\nexport const getFilterRange = createGetSelector(getPlp, 'filterRange')\nexport const getSortSelection = createGetSelector(getPlp, 'sortBy')","import React from 'react';\nimport PropTypes from 'prop-types';\nimport './ItemPrice.component.scss';\n\nconst ItemPrice = ({product}) => {\n\n const hasDiscount = !!product.discount && product.discount !== 0\n\n return (\n \n {product.discountedPrice && ₹{product.discountedPrice}}\n {\n hasDiscount &&\n (\n \n {product.price}\n {product.discount}% off\n \n )\n }\n
\n );\n};\n\nItemPrice.defaultProps = {\n product: PropTypes.object\n};\n\nItemPrice.propTypes = {\n\n};\n\nexport default ItemPrice;","import React, {useState} from 'react';\nimport './Search.component.scss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faSearch } from '@fortawesome/free-solid-svg-icons'\n\nconst Search = props => {\n const [searchInitiated, setSearchInitiated] = useState(false)\n return (\n setSearchInitiated(true)}>\n {searchInitiated && }\n
\n );\n};\n\nSearch.defaultProps = {\n\n};\n\nSearch.propTypes = {\n\n};\n\nexport default Search;","import Search from './Search.jsx';\n\nexport default Search;","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {connect} from 'react-redux';\nimport './CartIcon.component.scss';\nimport {withRouter} from 'react-router-dom'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faShoppingCart } from '@fortawesome/free-solid-svg-icons'\nimport { createPropsSelector } from 'reselect-immutable-helpers';\n\nimport {getCartTotalCount} from './../../../pages/Cart/selectors'\n\nconst CartIcon = props => {\n\n const navigateToCart = () => {\n props.history.push('/view/cart')\n }\n\n return (\n \n
\n );\n};\n\nCartIcon.propTypes = {\n cartTotalCount: PropTypes.number\n};\n\nconst mapStateToProps = createPropsSelector({\n cartTotalCount: getCartTotalCount\n})\n\nexport default connect(mapStateToProps)(withRouter(CartIcon));","import CartIcon from './CartIcon.jsx';\n\nexport default CartIcon;","import React, {useEffect} from 'react';\nimport { Link } from 'react-router-dom';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faStar } from '@fortawesome/free-solid-svg-icons'\n\nimport Search from './../Search'\nimport CartIcon from './../CartIcon'\n\nconst Header = props => {\n\n useEffect(() => {\n const body = document.body;\n const scrollUp = \"scroll-up\";\n const scrollDown = \"scroll-down\";\n let lastScroll = 0;\n\n window.addEventListener(\"scroll\", () => {\n const currentScroll = window.pageYOffset;\n if (currentScroll === 0) {\n body.classList.remove(scrollUp);\n return;\n }\n \n if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {\n // down\n body.classList.remove(scrollUp);\n body.classList.add(scrollDown);\n } else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {\n // up\n body.classList.remove(scrollDown);\n body.classList.add(scrollUp);\n }\n lastScroll = currentScroll;\n });\n })\n \n return (\n