import React from 'react'; import { NavLink } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { Row, Col, Icon, Badge, Input } from 'antd'; import * as creators from '../../state/actionCreators'; import history from '../../history'; import useCurrency from '../hooks/useCurrency'; import NoLogo from '../../images/PureRetail_Logo.png'; const CartHeader = ({ logoPath, badgeCount = 0, currency = '', totalDue = 0, displayBack, displayTotal, top = false }) => { const dispatch = useDispatch(); const cartContents = useSelector((state) => state.cart); const storeDetails = useSelector((state) => state.user.user); const sign = useCurrency(storeDetails.currency); const totalPrice = (arr) => { return arr.reduce((sum, item) => { return sum + item.price * item.quantity; }, 0); }; const totalQuantity = (arr) => { return arr.reduce((sum, item) => { return sum + item.quantity; }, 0); }; const change = (e) => { dispatch(creators.setString(e.target.value)); }; return ( <Row className={top ? 'color cart-header' : 'cart-header'} type="flex" justify="space-between" align="middle"> <Col span={6} className="logo"> {displayBack ? ( <Icon onClick={history.goBack} type="left-circle" /> ) : ( <img src={logoPath || NoLogo} alt="Store Logo" /> )} </Col> <Col span={12} className="total"> {displayTotal ? ( `Total: ${sign}${totalPrice(cartContents).toFixed(2)}` ) : ( <Input onChange={change} placeholder="Search..." /> )} </Col> <NavLink to="/review"> <Col span={6} className="icon"> <Badge style={{ backgroundColor: 'gold', color: 'black' }} count={totalQuantity(cartContents)}> <Icon type="shopping-cart" style={{ color: 'black' }} /> </Badge> </Col> </NavLink> </Row> ); }; export default CartHeader;