redirections au bonnes places en appuyant sur "payer"

GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js

@@ -5,6 +5,10 @@ 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 = () => {
 
@@ -12,9 +16,38 @@ const CartButton = () => {
     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}>
@@ -35,7 +68,7 @@ const CartButton = () => {
                                 ))}
                             <div className="payer">
                                 <h className="total">Sous-total: {cart.getTotalCost().toFixed(2)}$ CAD</h>
-                                <Button className="payer">Payer</Button>
+                                <Button onClick={() => handlePayer()} className="payer" >Payer</Button>
                             </div>
                         </>
                         :