import React from 'react' import { SiteContext, ContextProviderComponent } from '../context/mainContext' import { DENOMINATION } from '../../providers/inventoryProvider' import { FaTimes, FaLongArrowAltRight } from 'react-icons/fa' import { Link } from 'gatsby' import CartLink from '../components/CartLink' import QuantityPicker from '../components/QuantityPicker' import { slugify } from '../../utils/helpers' import Image from '../components/Image' const Cart = ({ context }) => { const { numberOfItemsInCart, cart, removeFromCart, total, setItemQuantity } = context const cartEmpty = numberOfItemsInCart === Number(0) function increment(item) { item.quantity = item.quantity + 1 setItemQuantity(item) } function decrement(item) { if (item.quantity === 1) return item.quantity = item.quantity - 1 setItemQuantity(item) } return ( <> <CartLink /> <div className="flex flex-col items-center pb-10"> <div className=" flex flex-col w-full c_large:w-c_large "> <div className="pt-10 pb-8"> <h1 className="text-5xl font-light">Your Cart</h1> </div> { cartEmpty ? ( <h3>No items in cart.</h3> ) : ( <div className="flex flex-col"> <div className=""> { cart.map((item) => { return ( <div className="border-b py-10" key={item.id}> { /* Responsive - Desktop */} <div className="flex items-center hidden md:flex"> <Link to={slugify(item.name)}> <Image className="w-32 m-0" src={item.image} alt={item.name} /> </Link> <Link to={slugify(item.name)}> <p className=" m-0 pl-10 text-gray-600 text-sm w-56 "> {item.name} </p> </Link> <div className="ml-4"> <QuantityPicker numberOfitems={item.quantity} increment={() => increment(item)} decrement={() => decrement(item)} /> </div> <div className="flex flex-1 justify-end"> <p className="m-0 pl-10 text-gray-900 tracking-tighter font-semibold"> {DENOMINATION + item.price} </p> </div> <div role="button" onClick={() => removeFromCart(item)} className=" m-0 ml-10 text-gray-900 text-s cursor-pointer "> <FaTimes /> </div> </div> { /* Responsive - Mobile */} <div className="flex items-center flex md:hidden"> <Link to={slugify(item.name)}> <Image className="w-32 m-0" src={item.image} alt={item.name} /> </Link> <div> <Link to={slugify(item.name)}> <p className=" m-0 pl-6 text-gray-600 text-base "> {item.name} </p> </Link> <div className="ml-6 mt-4 mb-2"> <QuantityPicker hideQuantityLabel numberOfitems={item.quantity} increment={() => increment(item)} decrement={() => decrement(item)} /> </div> <div className="flex flex-1"> <p className="text-lg m-0 pl-6 pt-4 text-gray-900 tracking-tighter font-semibold"> {DENOMINATION + item.price} </p> </div> </div> <div role="button" onClick={() => removeFromCart(item)} className=" m-0 ml-10 text-gray-900 text-s cursor-pointer mr-2 "> <FaTimes /> </div> </div> </div> ) }) } </div> </div> ) } <div className="flex flex-1 justify-end py-8"> <p className="text-sm pr-10">Total</p> <p className="font-semibold tracking-tighter">{DENOMINATION + total}</p> </div> {!cartEmpty && ( <Link to="/checkout" className="flex flex-1 justify-end"> <div className="cursor-pointer flex"> <p className="text-gray-600 text-sm mr-2">Proceed to check out</p> <FaLongArrowAltRight className="text-gray-600 mt-1" /> </div> </Link> )} </div> </div> </> ) } function CartWithContext(props) { return ( <ContextProviderComponent> <SiteContext.Consumer> { context => <Cart {...props} context={context} /> } </SiteContext.Consumer> </ContextProviderComponent> ) } export default CartWithContext