cart section created

techspeeds · Jun 15, 2023 · 08f1d60 · 08f1d60
1 parent 0eb1436
commit 08f1d60
Show file tree

Hide file tree

Showing 14 changed files with 265 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -3,13 +3,17 @@
 
 <head>
   <meta charset="UTF-8" />
-  <!-- <link rel="icon" type="image/svg+xml" href="/Logo_black.png" /> -->
+  <meta name="description"
+    content="Discover the essence of convenience and freshness with our innovative grocery app. Shop for a wide range of high-quality products, from fresh produce to delectable meats and dairy delights. Experience fast and reliable service, ensuring your order arrives at your doorstep with speed and precision. Indulge in a seamless shopping experience, where every item is handpicked for its exceptional quality. Embrace the joy of nourishing yourself and your loved ones with our app, where every ingredient tells a story of health and satisfaction. Explore a world of flavors and embark on a culinary journey like never before. Elevate your grocery shopping experience with our app and let us redefine the way you nourish and delight in life's essentials">
+
+  <!-- Feb Icon -->
+  <link rel="icon" type="image/svg+xml" href="/grocery_febicon.png" />
 
   <!-- Google Font -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
-
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap"
+    rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <title>Grocery</title>

diff --git a/public/grocery_febicon.png b/public/grocery_febicon.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,6 +6,8 @@ import AllCategories from "./Components/AllCategories/AllCategories";
 import PageNotFound from "./Components/PageNotFound/PageNotFound";
 import About from "./Components/About/About";
 import Login from "./Components/Authantication/Login/Login";
+import ProtectedRoute from "./Components/ProtectedRoute/ProtectedRoute";
+import Cart from "./Components/Cart/Cart";
 
 function App() {
   return (
@@ -19,8 +21,12 @@ function App() {
           <Route path="/about" element={<About />} />
           <Route path="/categories/:categoryName" element={
             <Products categoryProducts={true} />} />
-            <Route path="/login" element={<Login/>} />
-          <Route path="/*" element={<PageNotFound/>} />
+          <Route path="/login" element={<Login />} />
+          {/* Protected Route */}
+          <Route element={<ProtectedRoute />}>
+            <Route path="/cart" element={<Cart />} />
+          </Route>
+          <Route path="/*" element={<PageNotFound />} />
         </Route>
       </Routes>
     </Router>

diff --git a/src/Components/Authantication/Login/Login.jsx b/src/Components/Authantication/Login/Login.jsx
@@ -1,8 +1,10 @@
 import { Visibility, VisibilityOff } from '@mui/icons-material';
-import { Button, Container, Fade, IconButton, InputAdornment, TextField } from '@mui/material';
-import { useState } from 'react';
+import { Alert, Button, Collapse, Container, Fade, IconButton, InputAdornment, TextField } from '@mui/material';
+import { useContext, useState } from 'react';
 import { useForm } from "react-hook-form";
 import animation from '../../../assets/animations/loginAnimation.gif';
+import { groceryContext } from '../../Layout/Layout';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const Login = () => {
     const { register, handleSubmit, formState: { errors } } = useForm();
@@ -12,19 +14,28 @@ const Login = () => {
     // Scrolling Bug Fixed
     window.scroll({ top: 0 });
 
+    const navigate = useNavigate();
+    const location = useLocation();
+    const { from } = location.state || { from: { pathname: '/' } }
+
+    const { userLoggedInState } = useContext(groceryContext);
     // Login handler
     const onSubmit = data => {
         const defaultUser = {
             email: '[email protected]',
             password: 'User1234'
         }
+        const [isUserLoggedIn, setIsUserLoggedIn] = userLoggedInState;
+
         if (defaultUser.email !== data.email) {
-            setLogInError("You entered wrong email")
+            setLogInError("Invalid email")
         } else if (defaultUser.password !== data.password) {
-            setLogInError('You entered the password')
+            setLogInError('Invalid password')
         } else {
             setLogInError('')
             sessionStorage.setItem('userLoggedIn', JSON.stringify(true))
+            setIsUserLoggedIn(true)
+            navigate(from)
         }
     };
 
@@ -103,6 +114,10 @@ const Login = () => {
                                             }}
                                         />
 
+                                        {/* Display the alert only if there is a login error */}
+                                        {logInError &&
+                                            <></>
+                                        }
                                         {/* Submit-btn */}
                                         <Button
                                             sx={{ textTransform: 'capitalize' }}

diff --git a/src/Components/Cart/Cart.jsx b/src/Components/Cart/Cart.jsx
@@ -0,0 +1,34 @@
+import { useNavigate } from "react-router-dom";
+import EmptyCart from './EmptyCart/EmptyCart';
+import { Container, Fade } from "@mui/material";
+import { useState } from "react";
+import OrderSummary from "./OrderSummary/OrderSummary";
+import CartItems from "./CartItems/CartItems";
+
+const Cart = () => {
+    // Scrolling Bug Fixed
+    window.scroll({ top: 0 });
+    const [isCartEmpty, setIsCartEmpty] = useState(false)
+    const navigate = useNavigate();
+
+    return (
+        <section className='h-screen pt-16'>
+
+            {
+                !isCartEmpty ?
+                    // Main Layout
+                    <Container sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+                        <section className="grid gap-8 w-full lg:grid-cols-3 md:grid-cols-2 ">
+                            <CartItems />
+                            <OrderSummary />
+                        </section>
+                    </Container>
+
+                    // If the cart is empty this component will show
+                    : <EmptyCart />
+            }
+        </section>
+    );
+};
+
+export default Cart;
diff --git a/src/Components/Cart/CartItemCard/CartItemCard.jsx b/src/Components/Cart/CartItemCard/CartItemCard.jsx
@@ -0,0 +1,52 @@
+import { Fade, IconButton, Tooltip } from '@mui/material';
+import {Close} from '@mui/icons-material';
+
+const CartItemCard = () => {
+    return (
+        <Fade in={true}>
+            <div className='grid grid-cols-3 gap-x-2.5 rounded-xl w-full  bg-gray-100'>
+                {/* Meal Img */}
+                <div className='col py-2 pl-1.5 '>
+                    <img src={''} className='cursor-pointer' alt={''} />
+                </div>
+
+                {/* Meal Name & Price*/}
+                <div className='col py-2 flex'>
+                    <div className='my-auto overflow-hidden space-y-1'>
+                        <h4 className='font-semibold text-xs'>{'nam'}</h4>
+                        <h4 className='text-lg font-bold text-red-600'>${'price'}</h4>
+                        <h6 className='text-xs text-gray-400'>Best in quality</h6>
+                    </div>
+                </div>
+
+                {/* Actions */}
+                <div className='space-y-3.5 lg:py-0.5 lg:pr-0.5  py-2 pr-1.5'>
+
+                    {/* Remove_from_cart Btn */}
+                    <div className='flex justify-end'>
+                        <Tooltip
+                            placement='top-end'
+                            title={'Remove'}>
+                            <IconButton
+                                // onClick={handleRemove}
+                                size='small'>
+                                <Close fontSize='inherit' />
+                            </IconButton>
+                        </Tooltip>
+                    </div>
+
+                    {/* set Quantity */}
+                    <div className='flex align-middle'>
+                        {/* <QuantityController
+                            cartItemCard={true}
+                            meal={meal}
+                            mealQuantity={mealQuantity}
+                            setMealQuantity={setMealQuantity} /> */}
+                    </div>
+                </div>
+            </div>
+        </Fade>
+    );
+};
+
+export default CartItemCard;
diff --git a/src/Components/Cart/CartItems/CartItems.jsx b/src/Components/Cart/CartItems/CartItems.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import CartItemCard from '../CartItemCard/CartItemCard';
+
+const CartItems = () => {
+    return (
+        <div className='col lg:col-span-2 space-y-3.5 '>
+            {/* Title */}
+            <h2 className='sm:text-2xl text-lg sm:font-semibold font-bold '>Selected Items</h2>
+            <CartItemCard />
+        </div>
+    );
+};
+
+export default CartItems;
diff --git a/src/Components/Cart/EmptyCart/EmptyCart.jsx b/src/Components/Cart/EmptyCart/EmptyCart.jsx
@@ -0,0 +1,27 @@
+import { Button, Container, Fade } from '@mui/material';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const EmptyCart = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Fade in={true}>
+            <Container sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+                <div className='text-center md:space-y-4 space-y-3.5 text-gray-500'>
+                    <h6 className='text-sm'>There are no items in this cart</h6>
+                    <Button
+                        onClick={() => navigate('/products')}
+                        size='large'
+                        color='success'
+                        sx={{ textTransform: 'capitalize' }}
+                        variant='outlined'>
+                        Continue Shopping
+                    </Button>
+                </div>
+            </Container>
+        </Fade>
+    );
+};
+
+export default EmptyCart;
diff --git a/src/Components/Cart/OrderSummary/OrderSummary.jsx b/src/Components/Cart/OrderSummary/OrderSummary.jsx
@@ -0,0 +1,45 @@
+import { Button } from '@mui/material';
+
+const OrderSummary = () => {
+    return (
+        <div className='flex justify-center'>
+            <div className='sm:space-y-5 w-full max-w-[25rem] space-y-4'>
+            {/* Title */}
+            <h3 className='sm:text-xl text-lg sm:font-semibold font-bold tracking-wide'>Order Summary</h3>
+
+            {/* Total Bill */}
+            <table className='table-auto h-28 text-sm w-full'>
+                <tbody>
+                    {/* Subtotal */}
+                    <tr className='font-medium text-gray-800'>
+                        <td>Subtotal</td>
+                        <td>$ 1200 USD</td>
+                    </tr>
+                    {/* Delivery Charge */}
+                    <tr className='font-medium text-gray-800'>
+                        <td>Delivery charge</td>
+                        <td>$ 12 USD</td>
+                    </tr>
+                    {/* Total */}
+                    <tr className='font-medium text-lg'>
+                        <td>Total</td>
+                        <td style={{color: 'green'}}>$ 1212 USD</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            {/* Proceed to checkout */}
+            <Button
+                fullWidth
+                // onClick={handlePlaceOrder}
+                sx={{ textTransform: 'capitalize', display: 'block' }}
+                variant='contained'
+                color='success'>
+                Proceed to checkout
+            </Button>
+        </div>
+        </div>
+    );
+};
+
+export default OrderSummary;
diff --git a/src/Components/Layout/Layout.jsx b/src/Components/Layout/Layout.jsx
@@ -1,14 +1,22 @@
 import { Outlet } from "react-router-dom";
-import Navbar from '../Navbar/Navbar';
+import Navbar, { userLoggedIn } from '../Navbar/Navbar';
 import Footer from '../Footer/Footer';
+import { createContext, useState } from "react";
 
+export const groceryContext = createContext();
 const Layout = () => {
+    const [isUserLoggedIn, setIsUserLoggedIn] = useState(userLoggedIn);
+
     return (
-        <>
+        <groceryContext.Provider value={{
+            userLoggedInState: [isUserLoggedIn, setIsUserLoggedIn],
+        }}>
             <Navbar />
-            <Outlet />
+            <section className="min-h-screen">
+                <Outlet />
+            </section>
             <Footer />
-        </>
+        </groceryContext.Provider>
     );
 };
 

diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx
@@ -12,6 +12,8 @@ import logo_black from '../../assets/logo_black.png';
 import { Button, Container, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Tooltip, useMediaQuery } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { groceryContext } from '../Layout/Layout';
+import { ShoppingCartRounded } from '@mui/icons-material';
 
 // This function will add Go_back feature on the Navbar
 function ScrollTop(props) {
@@ -144,6 +146,7 @@ const Links = ({ drawer, setIsOpenDrawer, isOpenDrawer }) => {
         </ul >
         )
 }
+export const userLoggedIn = JSON.parse(sessionStorage.getItem('userLoggedIn'));
 
 const Navbar = (props) => {
     const [isNavBarElevated, setIsNavbarElevated] = React.useState(false)
@@ -160,6 +163,14 @@ const Navbar = (props) => {
     })
 
     const navigate = useNavigate();
+    const { userLoggedInState } = React.useContext(groceryContext);
+    const [isUserLoggedIn, setIsUserLoggedIn] = userLoggedInState;
+
+    // Log out button handler 
+    const handleLogOut = () => {
+        setIsUserLoggedIn(false)
+        sessionStorage.setItem('userLoggedIn', JSON.stringify(false))
+    }
 
     return (
         <nav className='fixed z-50'>
@@ -210,11 +221,21 @@ const Navbar = (props) => {
                                             setIsOpenDrawer={setIsOpenDrawer}
                                             isOpenDrawer={isOpenDrawer} />
                                     }
+                                    {/* Go to cart btn */}
+                                    <Tooltip title='Cart'>
+                                        <span>
+                                            <IconButton
+                                                onClick={() => navigate('/cart')}
+                                                // disabled
+                                                sx={{ textTransform: 'capitalize' }}
+                                                color='warning'>
+                                                <ShoppingCartRounded fontSize='inherit' />
+                                            </IconButton>
+                                        </span>
+                                    </Tooltip>
 
-                                    {/* Authentication Btn */}
-                                    {
-                                        // Log in
-                                        0 < 1 ?
+                                    {// Log in Btn
+                                        !isUserLoggedIn ?
                                             <Button onClick={() => navigate('/login')}
                                                 size={isExtraSmallScreen ? 'small' : 'medium'}
                                                 sx={{ textTransform: 'capitalize' }}
@@ -223,13 +244,14 @@ const Navbar = (props) => {
                                                 Log in
                                             </Button>
 
-                                            // Log out
+                                            // Log out Btn
                                             : <Button
                                                 size={isExtraSmallScreen ? 'small' : 'medium'}
+                                                onClick={handleLogOut}
                                                 sx={{ textTransform: 'capitalize' }}
                                                 color='success'
                                                 variant='contained'>
-                                                Log in
+                                                Log out
                                             </Button>
                                     }
                                 </div>