Merge pull request #76 from fac29/login_function_w_checkout

You can't checkout w/out logginig in

src/App.tsx

@@ -5,7 +5,6 @@ import { ShoppingCartProvider } from './ShoppingCartContext';
 import NavBar from './components/NavBar/NavBar';
 import { fetchAllProducts } from './utils/fetchData/fetchData';
 import './App.css';
-
 function App() {
 	fetchAllProducts;
 	return (

src/components/Modal/Modal.module.css

@@ -0,0 +1,126 @@
+.darkBG {
+    background-color: rgba(0, 0, 0, 0.2);
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+  }
+
+  .centered {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .modal {
+    width: 250px;
+    height: 170px;
+    background: white;
+    color: white;
+    z-index: 10;
+    border-radius: 16px;
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+  }
+
+  .modalHeader {
+    height: 50px;
+    background: white;
+    overflow: hidden;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  .heading {
+    margin: 0;
+    padding: 10px;
+    color: #2c3e50;
+    font-weight: 500;
+    font-size: 18px;
+    text-align: center;
+  }
+
+  .modalContent {
+    padding: 10px;
+    font-size: 14px;
+    color: #2c3e50;
+    text-align: center;
+  }
+
+  .modalActions {
+    position: absolute;
+    bottom: 2px;
+    margin-bottom: 10px;
+    width: 100%;
+  }
+
+  .actionsContainer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .closeBtn {
+    cursor: pointer;
+    font-weight: 500;
+    padding: 4px 8px;
+    border-radius: 8px;
+    border: none;
+    font-size: 18px;
+    color: #2c3e50;
+    background: white;
+    transition: all 0.25s ease;
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.06);
+    position: absolute;
+    right: 0;
+    top: 0;
+    align-self: flex-end;
+    margin-top: -7px;
+    margin-right: -7px;
+  }
+
+  .closeBtn:hover {
+    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+    transform: translate(-4px, 4px);
+  }
+
+  .deleteBtn {
+    margin-top: 10px;
+    cursor: pointer;
+    font-weight: 500;
+    padding: 11px 28px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    border: none;
+    color: #fff;
+    background: #ff3e4e;
+    transition: all 0.25s ease;
+  }
+
+  .deleteBtn:hover {
+    box-shadow: 0 10px 20px -10px rgba(255, 62, 78, 0.6);
+    transform: translateY(-5px);
+    background: #ff3e4e;
+  }
+
+  .cancelBtn {
+    margin-top: 10px;
+    cursor: pointer;
+    font-weight: 500;
+    padding: 11px 28px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    border: none;
+    color: #2c3e50;
+    background: #fcfcfc;
+    transition: all 0.25s ease;
+  }
+
+  .cancelBtn:hover {
+    box-shadow: none;
+    transform: none;
+    background: whitesmoke;
+  }

src/components/Modal/Modal.tsx

@@ -0,0 +1,34 @@
+import styles from './Modal.module.css';
+
+
+type ModalProps = {
+	textModal: string;
+	setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export function Modal({ textModal, setIsOpen }: ModalProps) {
+
+	return (
+		<>
+			<div className={styles.darkBG} />
+			<div className={styles.centered}>
+				<div className={styles.modal}>
+					<div className={styles.modalHeader}>
+						<h5 className={styles.heading}> Can't checkout yet!</h5>
+					</div>
+					<div className={styles.modalContent}>{textModal}</div>
+					<div className={styles.modalActions}>
+						<div className={styles.actionsContainer}>
+							<button
+								className={styles.deleteBtn}
+								onClick={() => setIsOpen(false)}
+							>
+								cancel
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}

src/components/NavBar/NavBar.tsx

@@ -30,7 +30,7 @@ function NavBar() {
 		<nav className='nav-container'>
 			<div className='nav-left'>
 				<Link className='company-name' to='/'>
-					Ganoush
+					Ganoush Limited. 
 				</Link>
 			</div>
 			<div className='nav-right'>

src/pages/ShoppingCart/ShoppingCart.tsx

@@ -2,20 +2,38 @@ import { useNavigate } from 'react-router-dom';
 
 import { useCart } from '../../ShoppingCartContext';
 import PlusMinusButton from '../../components/PlusMinusButton/PlusMinusButton';
+import { Modal } from '../../components/Modal/Modal';
+import { useState } from 'react';
+const requestUrl = import.meta.env.VITE_REQUEST_URL;
 
 function ShoppingCart() {
 	const navigate = useNavigate();
-
-	const { cart, total, handleRemoveFromCart, handleAddToCart } = useCart();
+	const [isOpen, setIsOpen] = useState(false);
+	const {
+		cart,
+		total,
+		handleRemoveFromCart,
+		handleAddToCart,
+		loggedIn,
+		userID,
+	} = useCart();
 
 	function handleBack() {
 		navigate('/');
 	}
 
-	// const { addToCart, removeFromCart } = useCart();
-
 	function goToCheckout() {
-		navigate('/checkout');
+		if (loggedIn) {
+			navigate('/checkout');
+		} else {
+			setIsOpen(true);
+		}
+	}
+
+	async function handleCheckout() {
+		const response = await fetch(`${requestUrl}/checkout`, {
+			method: 'POST',
+		});
 	}
 
 	return (
@@ -45,6 +63,9 @@ function ShoppingCart() {
 				)}
 			</ul>
 			{cart.length ? <p>Total: £{total ? total / 100 : null}</p> : null}
+			{isOpen && (
+				<Modal textModal='Please Log In to Checkout' setIsOpen={setIsOpen} />
+			)}
 			{cart.length ? <button onClick={goToCheckout}>Checkout</button> : null}
 		</div>
 	);