83 lines
3.0 KiB
JavaScript
83 lines
3.0 KiB
JavaScript
import { Button } from "react-bootstrap";
|
|
import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { Modal, ModalBody, ModalHeader } from "react-bootstrap";
|
|
import { useState, useContext } from "react";
|
|
import { CartCard } from './CartCard';
|
|
import { CartContext } from './Cart';
|
|
import { useNavigate } from "react-router-dom";
|
|
import Cookies from "universal-cookie";
|
|
import Swal from "sweetalert2";
|
|
import withReactContent from "sweetalert2-react-content";
|
|
|
|
const CartButton = () => {
|
|
|
|
const [show, setShow] = useState(false);
|
|
const handleClose = () => setShow(false);
|
|
const handleShow = () => setShow(true);
|
|
const cart = useContext(CartContext);
|
|
const navigate = useNavigate();
|
|
const cookies = new Cookies();
|
|
const mySwal = withReactContent(Swal);
|
|
|
|
const productsCount = cart.items.reduce((sum, product) => sum + product.quantity, 0)
|
|
|
|
const handlePayer = () => {
|
|
|
|
if (cookies.get('GMGM') == null || cookies.get('GMGM').LoggedIn == false) {
|
|
mySwal.fire({
|
|
title: `Vous n'êtes pas connecté`,
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Se connecter',
|
|
cancelButtonText: `Continuer en tant qu'invité`,
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
navigate("/login");
|
|
handleClose();
|
|
}
|
|
else if (result.isDismissed && result.dismiss == Swal.DismissReason.cancel) {
|
|
navigate("/formulaire");
|
|
handleClose();
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
navigate("/formulaire");
|
|
handleClose();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Button id="cart-button" onClick={handleShow}>
|
|
<FontAwesomeIcon icon={faCartShopping} />
|
|
<div id="cart-count">{productsCount}</div>
|
|
</Button>
|
|
<Modal show={show} onHide={handleClose} className="carosse">
|
|
<ModalHeader closeButton>
|
|
<Modal.Title>Carosse</Modal.Title>
|
|
</ModalHeader>
|
|
<ModalBody>
|
|
{productsCount > 0 ?
|
|
<>
|
|
{cart.items.map(
|
|
(item) =>
|
|
(
|
|
<CartCard key={item.id} product={item} />
|
|
))}
|
|
<div className="payer">
|
|
<h className="total">Sous-total: {cart.getTotalCost().toFixed(2)}$ CAD</h>
|
|
<Button onClick={() => handlePayer()} className="payer" >Payer</Button>
|
|
</div>
|
|
</>
|
|
:
|
|
<h1>C'est vide! Rempli le hi hi!</h1>
|
|
}
|
|
</ModalBody>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CartButton; |