├── src
    ├── Pages
    │   ├── Order.jsx
    │   ├── Signup.jsx
    │   ├── PaymentOptions.jsx
    │   ├── AuthLayout.jsx
    │   ├── home.jsx
    │   ├── StoreLayout.jsx
    │   ├── Products.jsx
    │   ├── Product.jsx
    │   ├── Settings.jsx
    │   ├── Login.jsx
    │   └── Store.jsx
    ├── assets
    │   ├── emptycart.webp
    │   ├── react.svg
    │   └── styles
    │   │   └── styles.css
    ├── Components
    │   ├── ProductListingCard.jsx
    │   ├── CounterButton.jsx
    │   ├── ProductCard.jsx
    │   ├── CartCard.jsx
    │   ├── Sidebar.jsx
    │   └── PaymentsModal.jsx
    ├── main.jsx
    ├── App.jsx
    └── Contexts
    │   ├── Product.context.jsx
    │   ├── Order.context.jsx
    │   ├── Auth.context.jsx
    │   └── Cart.context.jsx
├── vite.config.js
├── .gitignore
├── index.html
├── README.md
├── .eslintrc.cjs
├── package.json
└── public
    ├── vite.svg
    └── products.json


/src/Pages/Order.jsx:
--------------------------------------------------------------------------------
1 | export default function Order() {
2 |     return <>Order</>
3 | }


--------------------------------------------------------------------------------
/src/Pages/Signup.jsx:
--------------------------------------------------------------------------------
1 | export default function Signup() {
2 |     return <>Signup</>
3 | }


--------------------------------------------------------------------------------
/src/Pages/PaymentOptions.jsx:
--------------------------------------------------------------------------------
1 | export default function PaymentOptions() {
2 |   return <div></div>;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/emptycart.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vaaluvishnu5146/Foody-Pos-Application/HEAD/src/assets/emptycart.webp


--------------------------------------------------------------------------------
/src/Pages/AuthLayout.jsx:
--------------------------------------------------------------------------------
1 | export default function AuthLayout() {
2 |   return (
3 |     <div className="container">
4 |       <h1>Login</h1>
5 |     </div>
6 |   );
7 | }
8 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/Pages/home.jsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from "react-router-dom";
 2 | import StoreLayout from "./StoreLayout";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <StoreLayout>
 7 |       <Outlet />
 8 |     </StoreLayout>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/src/Pages/StoreLayout.jsx:
--------------------------------------------------------------------------------
 1 | import Sidebar from "../Components/Sidebar";
 2 | 
 3 | export default function StoreLayout({ children }) {
 4 |   return (
 5 |     <div className="container d-flex gap-10 ">
 6 |       <Sidebar />
 7 |       {children}
 8 |     </div>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/Components/ProductListingCard.jsx:
--------------------------------------------------------------------------------
 1 | export default function ProductListingCard(props) {
 2 |   const { data = {}, handleClick = () => {} } = props;
 3 |   return (
 4 |     <div
 5 |       className={`container product-card b-r-10`}
 6 |       onClick={() => handleClick(data._id)}
 7 |     >
 8 |       <h2 className="m-b-10 truncate-text">{data.name}</h2>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Foody POS</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/src/Components/CounterButton.jsx:
--------------------------------------------------------------------------------
1 | export default function CounterButton(props) {
2 |     const { id = '', quantity = 0, handleQuantity = () => {} } = props;
3 |     return <div className="counter d-flex gap-10">
4 |         <button className="btn cart-counter-btn b-r-10" onClick={() => handleQuantity('decrement', id)}>-</button>
5 |         <p>{quantity}</p>
6 |         <button className="btn cart-counter-btn b-r-10" onClick={() => handleQuantity('increment', id)}>+</button>
7 |     </div>
8 | }


--------------------------------------------------------------------------------
/src/Components/ProductCard.jsx:
--------------------------------------------------------------------------------
 1 | export default function ProductCard(props) {
 2 |     const { data = {}, addToCart = () => {}, isAdded = false } = props;
 3 |     return <div className={`container product-card b-r-10 ${isAdded && 'bg-secondary'}`} onClick={isAdded ? () => {} : () => addToCart(data)}>
 4 |         <h2 className="m-b-10 truncate-text">{data.name}</h2>
 5 |         <div className="d-flex justify-between">
 6 |             <p>Price: {data.price}</p>
 7 |             <p>Ratings({data.ratings})</p>
 8 |         </div>
 9 |     </div>
10 | }


--------------------------------------------------------------------------------
/src/Components/CartCard.jsx:
--------------------------------------------------------------------------------
 1 | import CounterButton from "./CounterButton";
 2 | 
 3 | export default function CartCard(props) {
 4 |     const { data = {}, handleQuantity = () => {} } = props;
 5 |     return <div className="container cart-card b-r-10 d-flex justify-between">
 6 |         <div style={{
 7 |             width: '50%'
 8 |         }}>
 9 |             <h2 className="truncate-text">{data.name}</h2>
10 |         </div>
11 |         <div>
12 |             <CounterButton id={data._id} quantity={data.quantity} handleQuantity={handleQuantity} />
13 |         </div>
14 |     </div>
15 | }


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:react/recommended',
 7 |     'plugin:react/jsx-runtime',
 8 |     'plugin:react-hooks/recommended',
 9 |   ],
10 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
11 |   parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12 |   settings: { react: { version: '18.2' } },
13 |   plugins: ['react-refresh'],
14 |   rules: {
15 |     'react/jsx-no-target-blank': 'off',
16 |     'react-refresh/only-export-components': [
17 |       'warn',
18 |       { allowConstantExport: true },
19 |     ],
20 |   },
21 | }
22 | 


--------------------------------------------------------------------------------
/src/Pages/Products.jsx:
--------------------------------------------------------------------------------
 1 | import { useNavigate } from "react-router-dom";
 2 | import ProductListingCard from "../Components/ProductListingCard";
 3 | import { useProducts } from "../Contexts/Product.context";
 4 | 
 5 | export default function Products() {
 6 |   const { products = [] } = useProducts();
 7 |   const navigator = useNavigate();
 8 | 
 9 |   function handleClick(id = "") {
10 |     navigator(`/store/product/${id}`);
11 |   }
12 | 
13 |   return (
14 |     <div className="products-container b-r-10">
15 |       {products.map((product, index) => (
16 |         <ProductListingCard
17 |           key={`product-${index}-${product.name}`}
18 |           data={product}
19 |           handleClick={handleClick}
20 |         />
21 |       ))}
22 |     </div>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/src/Pages/Product.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import { useParams } from "react-router-dom";
 3 | 
 4 | export default function Product() {
 5 |   const { id } = useParams();
 6 |   const [product, setProduct] = useState({});
 7 | 
 8 |   useEffect(() => {
 9 |     if (id) {
10 |       fetch(`http://localhost:5000/api/food/${id}`)
11 |         .then((response) => response.json())
12 |         .then((result) => {
13 |           if (result && result.success) {
14 |             setProduct(result.data);
15 |           }
16 |         })
17 |         .catch((err) => console.log(err));
18 |     }
19 |   }, [id]);
20 | 
21 |   return (
22 |     <div className="products-container b-r-10">
23 |       <h1>{product.name}</h1>
24 |       <h3>{product.price}</h3>
25 |     </div>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/Pages/Settings.jsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | 
 3 | export default function Settings() {
 4 |   const headingRef = useRef();
 5 |   const subHeadingRef = useRef();
 6 | 
 7 |   // function changeColor() {
 8 |   //   const textEl = document.getElementById("text");
 9 |   //   textEl.style.color = "red";
10 |   // }
11 | 
12 |   function changeColor() {
13 |     headingRef.current.style.color = "red";
14 |     headingRef.current.style.fontWeight = "200";
15 |     subHeadingRef.current.style.color = "orange";
16 |     subHeadingRef.current.style.fontWeight = "100";
17 |   }
18 | 
19 |   return (
20 |     <div>
21 |       <h1 ref={headingRef}>Settings</h1>
22 |       <h3 ref={subHeadingRef}>Settings page for changing ap settings</h3>
23 |       <button onClick={changeColor}>Change</button>
24 |     </div>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "bootstrap": "^5.3.3",
14 |     "react": "^18.2.0",
15 |     "react-bootstrap": "^2.10.2",
16 |     "react-dom": "^18.2.0",
17 |     "react-icons": "^5.0.1",
18 |     "react-jwt": "^1.2.1",
19 |     "react-router-dom": "^6.22.3",
20 |     "react-toastify": "^10.0.5"
21 |   },
22 |   "devDependencies": {
23 |     "@types/react": "^18.2.66",
24 |     "@types/react-dom": "^18.2.22",
25 |     "@vitejs/plugin-react": "^4.2.1",
26 |     "eslint": "^8.57.0",
27 |     "eslint-plugin-react": "^7.34.1",
28 |     "eslint-plugin-react-hooks": "^4.6.0",
29 |     "eslint-plugin-react-refresh": "^0.4.6",
30 |     "vite": "^5.2.0"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import ReactDOM from "react-dom/client";
 2 | import App from "./App.jsx";
 3 | import { BrowserRouter as Router } from "react-router-dom";
 4 | import "./assets/styles/styles.css";
 5 | import ProductContextProvider from "./Contexts/Product.context.jsx";
 6 | import CartContextProvider from "./Contexts/Cart.context.jsx";
 7 | import OrdersContextProvider from "./Contexts/Order.context.jsx";
 8 | import AuthContextProvider from "./Contexts/Auth.context.jsx";
 9 | import { ToastContainer } from "react-toastify";
10 | import "react-toastify/dist/ReactToastify.css";
11 | 
12 | ReactDOM.createRoot(document.getElementById("root")).render(
13 |   <AuthContextProvider>
14 |     <ProductContextProvider>
15 |       <CartContextProvider>
16 |         <OrdersContextProvider>
17 |           <Router>
18 |             <ToastContainer />
19 |             <App />
20 |           </Router>
21 |         </OrdersContextProvider>
22 |       </CartContextProvider>
23 |     </ProductContextProvider>
24 |   </AuthContextProvider>
25 | );
26 | 


--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { Routes, Route } from "react-router-dom";
 2 | import Login from "./Pages/Login";
 3 | import Signup from "./Pages/Signup";
 4 | import Store from "./Pages/Store";
 5 | import Order from "./Pages/Order";
 6 | import Home from "./Pages/home";
 7 | import Products from "./Pages/Products";
 8 | import Product from "./Pages/Product";
 9 | import Settings from "./Pages/Settings";
10 | import "bootstrap/dist/css/bootstrap.min.css";
11 | 
12 | function App() {
13 |   return (
14 |     <Routes>
15 |       <Route Component={Login} path="/" />
16 |       <Route Component={Signup} path="/signup" />
17 |       <Route Component={Home} path="/store">
18 |         <Route Component={Store} index />
19 |         <Route Component={Order} path="/store/order" />
20 |         <Route Component={Products} path="/store/products" />
21 |         <Route Component={Product} path="/store/product/:id" />
22 |         <Route Component={Settings} path="/store/settings" />
23 |       </Route>
24 |     </Routes>
25 |   );
26 | }
27 | 
28 | export default App;
29 | 


--------------------------------------------------------------------------------
/src/Contexts/Product.context.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useContext, createContext } from "react";
 2 | import { useAuth } from "./Auth.context";
 3 | 
 4 | const ProductContext = createContext({
 5 |   products: [],
 6 | });
 7 | 
 8 | export const useProducts = () => useContext(ProductContext);
 9 | 
10 | export default function ProductContextProvider({ children }) {
11 |   const [products, setProducts] = useState([]);
12 |   const { isLoggedIn } = useAuth();
13 | 
14 |   useEffect(() => {
15 |     if (isLoggedIn) {
16 |       fetch("http://localhost:5000/api/food/all?page=1&count=10")
17 |         .then((response) => response.json())
18 |         .then((result) => {
19 |           if (result.success) {
20 |             setProducts(result.data);
21 |           }
22 |         })
23 |         .catch((err) => console.log(err));
24 |     }
25 |   }, [isLoggedIn]);
26 | 
27 |   return (
28 |     <ProductContext.Provider
29 |       value={{
30 |         products,
31 |       }}
32 |     >
33 |       {children}
34 |     </ProductContext.Provider>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/Components/Sidebar.jsx:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom";
 2 | import { FiGlobe, FiGrid, FiGift } from "react-icons/fi";
 3 | import { BsFillGearFill } from "react-icons/bs";
 4 | 
 5 | export default function Sidebar() {
 6 |   return (
 7 |     <div className="sidebar d-flex flex-column gap-10 align-center b-r-10">
 8 |       <Link to="/store">
 9 |         <div className="nav_item b-r-10 d-flex align-center justify-center">
10 |           <FiGlobe />
11 |         </div>
12 |       </Link>
13 |       <Link to="/store/order">
14 |         <div className="nav_item b-r-10 d-flex align-center justify-center">
15 |           <FiGrid />
16 |         </div>
17 |       </Link>
18 |       <Link to="/store/products">
19 |         <div className="nav_item b-r-10 d-flex align-center justify-center">
20 |           <FiGift />
21 |         </div>
22 |       </Link>
23 |       <Link to="/store/settings">
24 |         <div className="nav_item b-r-10 d-flex align-center justify-center">
25 |           <BsFillGearFill />
26 |         </div>
27 |       </Link>
28 |     </div>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/src/Contexts/Order.context.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, createContext, useContext } from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export const OrdersContext = createContext({
 5 |   orders: [],
 6 | });
 7 | 
 8 | export const useOrder = () => useContext(OrdersContext);
 9 | 
10 | export default function OrdersContextProvider({ children }) {
11 |   const [orders, setOrders] = useState([]);
12 | 
13 |   function createOrder(order = {}) {
14 |     if (order) {
15 |       fetch("http://localhost:5000/api/order/create", {
16 |         method: "POST",
17 |         headers: {
18 |           "Content-Type": "application/json",
19 |         },
20 |         body: JSON.stringify(order),
21 |       })
22 |         .then((response) => response.json())
23 |         .then((result) => console.log(result))
24 |         .catch((error) => console.log(error));
25 |     }
26 |   }
27 | 
28 |   const values = {
29 |     orders,
30 |     createOrder,
31 |   };
32 | 
33 |   return (
34 |     <OrdersContext.Provider value={values}>{children}</OrdersContext.Provider>
35 |   );
36 | }
37 | 
38 | OrdersContextProvider.propTypes = {
39 |   children: PropTypes.node,
40 | };
41 | 


--------------------------------------------------------------------------------
/src/Contexts/Auth.context.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, createContext, useContext, useEffect } from "react";
 2 | import { useJwt } from "react-jwt";
 3 | import PropTypes from "prop-types";
 4 | 
 5 | export const AuthContext = createContext({
 6 |   isLoggedIn: false,
 7 |   userDetails: {},
 8 |   setLoggedIn: () => {},
 9 |   setUserDetails: () => {},
10 |   decodedToken: {},
11 | });
12 | 
13 | export const useAuth = () => useContext(AuthContext);
14 | 
15 | export default function AuthContextProvider({ children }) {
16 |   const [isLoggedIn, setLoggedIn] = useState(false);
17 |   const [userDetails, setUserDetails] = useState({});
18 |   const token = sessionStorage.getItem("_tk");
19 |   const { decodedToken, isExpired } = useJwt(token || "");
20 | 
21 |   useEffect(() => {
22 |     if (token) {
23 |       setLoggedIn(true);
24 |     }
25 |   }, [token]);
26 | 
27 |   const values = {
28 |     setLoggedIn,
29 |     isLoggedIn,
30 |     userDetails,
31 |     setUserDetails,
32 |     decodedToken,
33 |   };
34 | 
35 |   return <AuthContext.Provider value={values}>{children}</AuthContext.Provider>;
36 | }
37 | 
38 | AuthContextProvider.propTypes = {
39 |   children: PropTypes.node,
40 | };
41 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/Components/PaymentsModal.jsx:
--------------------------------------------------------------------------------
 1 | import Button from "react-bootstrap/Button";
 2 | import Modal from "react-bootstrap/Modal";
 3 | import Form from "react-bootstrap/Form";
 4 | 
 5 | export default function PaymentsModal({
 6 |   show = false,
 7 |   setOpen = () => {},
 8 |   handleTransactionType = () => {},
 9 |   handleOrderSubmit = () => {},
10 | }) {
11 |   function handleClose() {
12 |     setOpen(false);
13 |   }
14 |   return (
15 |     <>
16 |       <Modal show={show} onHide={handleClose}>
17 |         <Modal.Header closeButton>
18 |           <Modal.Title>Payment Mode</Modal.Title>
19 |         </Modal.Header>
20 |         <Modal.Body>
21 |           <Form>
22 |             <div className="mb-3">
23 |               <Form.Check // prettier-ignore
24 |                 inline
25 |                 type={"radio"}
26 |                 name="transactionType"
27 |                 id={"cod"}
28 |                 label={"COD"}
29 |                 onChange={(e) => handleTransactionType(e.target.id)}
30 |               />
31 |               <Form.Check
32 |                 inline
33 |                 type={"radio"}
34 |                 name="transactionType"
35 |                 label={"UPI"}
36 |                 id={"upi"}
37 |                 onChange={(e) => handleTransactionType(e.target.id)}
38 |               />
39 |               <Form.Check
40 |                 inline
41 |                 type={"radio"}
42 |                 name="transactionType"
43 |                 label={"Net Banking"}
44 |                 id={"netBanking"}
45 |                 onChange={(e) => handleTransactionType(e.target.id)}
46 |               />
47 |             </div>
48 |           </Form>
49 |         </Modal.Body>
50 |         <Modal.Footer>
51 |           <Button variant="primary" onClick={handleOrderSubmit}>
52 |             Confirm Order
53 |           </Button>
54 |         </Modal.Footer>
55 |       </Modal>
56 |     </>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/public/products.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "success": true,
 3 |   "message": "Food fetched successfully",
 4 |   "data": [
 5 |     {
 6 |       "_id": "661238816a51cbe33250b77c",
 7 |       "name": "Idli",
 8 |       "price": 30,
 9 |       "qty": "0.25",
10 |       "qtyUnit": "kilograms",
11 |       "ratings": 5,
12 |       "createdAt": "2024-04-07T06:09:06.014Z",
13 |       "updatedAt": "2024-04-07T06:09:06.014Z",
14 |       "__v": 0
15 |     },
16 |     {
17 |       "_id": "66126d084cf6f3ad26f4430d",
18 |       "name": "Dosa",
19 |       "price": 50,
20 |       "qty": "0.25",
21 |       "qtyUnit": "kilograms",
22 |       "ratings": 5,
23 |       "createdAt": "2024-04-07T09:53:12.199Z",
24 |       "updatedAt": "2024-04-07T09:53:12.199Z",
25 |       "__v": 0
26 |     },
27 |     {
28 |       "_id": "66126d234cf6f3ad26f4430f",
29 |       "name": "Bisi bele bath",
30 |       "price": 35,
31 |       "qty": "0.25",
32 |       "qtyUnit": "kilograms",
33 |       "ratings": 5,
34 |       "createdAt": "2024-04-07T09:53:39.365Z",
35 |       "updatedAt": "2024-04-07T09:53:39.365Z",
36 |       "__v": 0
37 |     },
38 |     {
39 |       "_id": "66126d344cf6f3ad26f44311",
40 |       "name": "Masala Dosa",
41 |       "price": 55,
42 |       "qty": "0.25",
43 |       "qtyUnit": "kilograms",
44 |       "ratings": 5,
45 |       "createdAt": "2024-04-07T09:53:56.637Z",
46 |       "updatedAt": "2024-04-07T09:53:56.637Z",
47 |       "__v": 0
48 |     },
49 |     {
50 |       "_id": "66126d444cf6f3ad26f44313",
51 |       "name": "Mysore masala Dosa",
52 |       "price": 65,
53 |       "qty": "0.25",
54 |       "qtyUnit": "kilograms",
55 |       "ratings": 5,
56 |       "createdAt": "2024-04-07T09:54:12.279Z",
57 |       "updatedAt": "2024-04-07T09:54:12.279Z",
58 |       "__v": 0
59 |     },
60 |     {
61 |       "_id": "66126d514cf6f3ad26f44315",
62 |       "name": "Onion Dosa",
63 |       "price": 65,
64 |       "qty": "0.25",
65 |       "qtyUnit": "kilograms",
66 |       "ratings": 5,
67 |       "createdAt": "2024-04-07T09:54:25.978Z",
68 |       "updatedAt": "2024-04-07T09:54:25.978Z",
69 |       "__v": 0
70 |     },
71 |     {
72 |       "_id": "66126d604cf6f3ad26f44317",
73 |       "name": "Ghee Dosa",
74 |       "price": 55,
75 |       "qty": "0.25",
76 |       "qtyUnit": "kilograms",
77 |       "ratings": 5,
78 |       "createdAt": "2024-04-07T09:54:40.773Z",
79 |       "updatedAt": "2024-04-07T09:54:40.773Z",
80 |       "__v": 0
81 |     }
82 |   ]
83 | }
84 | 


--------------------------------------------------------------------------------
/src/Pages/Login.jsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | import { useAuth } from "../Contexts/Auth.context";
 3 | import { useNavigate } from "react-router-dom";
 4 | import { toast } from "react-toastify";
 5 | 
 6 | export default function Login() {
 7 |   const phoneRef = useRef();
 8 |   const passwordRef = useRef();
 9 |   const { setLoggedIn } = useAuth();
10 |   const navigation = useNavigate();
11 | 
12 |   function showNotification(type = "", message = "") {
13 |     return toast(message, {
14 |       type: type,
15 |       theme: "colored",
16 |       position: "top-right",
17 |     });
18 |   }
19 | 
20 |   function handleLogin() {
21 |     const mobileNumber = phoneRef.current.value;
22 |     const password = passwordRef.current.value;
23 |     if (mobileNumber && password) {
24 |       fetch("http://localhost:5000/api/auth/signin", {
25 |         method: "POST",
26 |         headers: {
27 |           "Content-Type": "application/json",
28 |         },
29 |         body: JSON.stringify({
30 |           mobileNumber,
31 |           password,
32 |         }),
33 |       })
34 |         .then((response) => response.json())
35 |         .then((result) => {
36 |           if (result && result.success) {
37 |             showNotification("success", "Login successful");
38 |             try {
39 |               window.sessionStorage.setItem("_tk", result.token);
40 |             } catch (err) {
41 |               showNotification;
42 |               "error", "Setting token failed";
43 |             }
44 |             setLoggedIn(true);
45 |             setTimeout(() => {
46 |               navigation("/store");
47 |             }, 2000);
48 |           }
49 |           if (result && !result.success) {
50 |             showNotification("error", result.message);
51 |           }
52 |         })
53 |         .catch((error) => {
54 |           showNotification("warning", error.message);
55 |         });
56 |     } else {
57 |       showNotification("warning", "Form is empty");
58 |     }
59 |   }
60 | 
61 |   return (
62 |     <div className="auth_page_container">
63 |       <div className="auth_form_card">
64 |         <img src="https://cdn.iconscout.com/icon/free/png-512/free-food-drink-healthy-hot-soup-bowl-spoon-4-10478.png?f=webp&w=256" />
65 |         <div style={{ height: 50 }}></div>
66 |         <div className="inputField">
67 |           <label>Phone Number</label>
68 |           <input
69 |             className="b-r-10"
70 |             ref={phoneRef}
71 |             placeholder="Enter Phone Number"
72 |           />
73 |         </div>
74 |         <div className="inputField">
75 |           <label>Password</label>
76 |           <input
77 |             className="b-r-10"
78 |             ref={passwordRef}
79 |             placeholder="Enter Password"
80 |           />
81 |         </div>
82 |         <div className="m-b-10"></div>
83 |         <button className="btn b-r-10" onClick={handleLogin}>
84 |           Login
85 |         </button>
86 |       </div>
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/src/Contexts/Cart.context.jsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useContext, createContext, useReducer } from "react";
  2 | import PropTypes from "prop-types";
  3 | 
  4 | const taxApplicable = [
  5 |   { name: "GST", value: 18, unit: "%" },
  6 |   { name: "Door Delivery", value: 20, unit: "inr" },
  7 | ];
  8 | 
  9 | const CartContext = createContext({
 10 |   cart: [],
 11 |   setCart: () => {},
 12 |   addToCart: () => {},
 13 |   findAleadyInTheCart: () => {},
 14 |   handleItemQuantity: () => {},
 15 |   cartValue: 0,
 16 |   taxApplicable: [],
 17 |   resetCart: () => {},
 18 | });
 19 | 
 20 | export const useCart = () => useContext(CartContext);
 21 | 
 22 | function reducer(state, action = {}) {
 23 |   switch (action.type) {
 24 |     case "addToCart":
 25 |       var cartCopy = [...state.cart];
 26 |       cartCopy.push({ ...action.payload, quantity: 1 });
 27 |       return { ...state, cart: cartCopy };
 28 |     case "handleQuantityChange":
 29 |       var copy = [...state.cart];
 30 |       var matchingProduct = copy.find((item) => item._id === action.payload.id);
 31 |       if (matchingProduct) {
 32 |         matchingProduct.quantity =
 33 |           action.payload.type === "decrement"
 34 |             ? matchingProduct.quantity - 1
 35 |             : matchingProduct.quantity + 1;
 36 |         // setCart(cartCopy);
 37 |       } else {
 38 |         console.log("No Items matching", action.payload.id);
 39 |       }
 40 |       return { ...state, cart: copy };
 41 |     case "resetCart":
 42 |       return { ...state, cart: [] };
 43 |     case "calculateCartTotal":
 44 |       var grandTotal = 0;
 45 |       for (let i = 0; i < state.cart.length; i++) {
 46 |         grandTotal += state.cart[i].price * state.cart[i].quantity;
 47 |       }
 48 |       for (let t = 0; t < taxApplicable.length; t++) {
 49 |         if (taxApplicable[t].unit === "%") {
 50 |           grandTotal += (grandTotal / 100) * taxApplicable[t].value;
 51 |         } else {
 52 |           grandTotal += taxApplicable[t].value;
 53 |         }
 54 |       }
 55 |       return { ...state, cartValue: grandTotal };
 56 |     default:
 57 |       // PROGRAM HERE
 58 |       break;
 59 |   }
 60 | }
 61 | 
 62 | const INITIAL_STATE = {
 63 |   cart: [],
 64 |   cartValue: 0,
 65 | };
 66 | 
 67 | export default function CartContextProvider({ children }) {
 68 |   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
 69 | 
 70 |   useEffect(() => {
 71 |     if (state.cart && state.cart.length > 0 && taxApplicable) {
 72 |       dispatch({ type: "calculateCartTotal" });
 73 |     }
 74 |   }, [state.cart]);
 75 | 
 76 |   function addToCart(data = {}) {
 77 |     dispatch({ type: "addToCart", payload: data });
 78 |   }
 79 | 
 80 |   function handleItemQuantity(type = "decrement", id = "") {
 81 |     dispatch({ type: "handleQuantityChange", payload: { type, id } });
 82 |   }
 83 | 
 84 |   function resetCart() {
 85 |     dispatch({ type: "resetCart" });
 86 |   }
 87 | 
 88 |   function findAleadyInTheCart(data = {}) {
 89 |     const product = state.cart.find((d) => d._id === data._id);
 90 |     return product && product._id ? true : false;
 91 |   }
 92 | 
 93 |   return (
 94 |     <CartContext.Provider
 95 |       value={{
 96 |         cart: state.cart,
 97 |         addToCart,
 98 |         findAleadyInTheCart,
 99 |         handleItemQuantity,
100 |         cartValue: state.cartValue,
101 |         taxApplicable,
102 |         resetCart,
103 |       }}
104 |     >
105 |       {children}
106 |     </CartContext.Provider>
107 |   );
108 | }
109 | 
110 | CartContextProvider.propTypes = {
111 |   children: PropTypes.node,
112 | };
113 | 


--------------------------------------------------------------------------------
/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/src/assets/styles/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --primary: #735cdd;
  3 |   --secondary: #c5bcf1;
  4 |   --white: #ffffff;
  5 |   --grey: #f6f6f6;
  6 |   --sidebar-width: 80px;
  7 | }
  8 | 
  9 | html,
 10 | body {
 11 |   margin: 0px;
 12 |   padding: 0px;
 13 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 14 | }
 15 | 
 16 | p,
 17 | h1,
 18 | h2,
 19 | h3,
 20 | h4,
 21 | h5,
 22 | h6 {
 23 |   margin: 0px;
 24 | }
 25 | 
 26 | button {
 27 |   width: 100%;
 28 |   height: 50px;
 29 |   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 30 |   cursor: pointer;
 31 | }
 32 | 
 33 | .btn {
 34 |   background-color: var(--primary);
 35 |   color: var(--white);
 36 |   outline: none;
 37 |   border: none;
 38 | }
 39 | 
 40 | svg {
 41 |   width: 1.2rem;
 42 |   height: 1.2rem;
 43 | }
 44 | 
 45 | .d-flex {
 46 |   display: flex;
 47 | }
 48 | 
 49 | .flex-column {
 50 |   flex-direction: column;
 51 | }
 52 | 
 53 | .flex-wrap {
 54 |   flex-wrap: wrap;
 55 | }
 56 | 
 57 | .align-center {
 58 |   align-items: center;
 59 | }
 60 | 
 61 | .justify-center {
 62 |   justify-content: center;
 63 | }
 64 | 
 65 | .justify-between {
 66 |   justify-content: space-between;
 67 | }
 68 | 
 69 | .gap-10 {
 70 |   gap: 10px;
 71 | }
 72 | 
 73 | .b-r-10 {
 74 |   border-radius: 10px;
 75 | }
 76 | 
 77 | .m-b-5 {
 78 |   margin-bottom: 5px;
 79 | }
 80 | 
 81 | .m-b-10 {
 82 |   margin-bottom: 10px;
 83 | }
 84 | 
 85 | .truncate-text {
 86 |   white-space: nowrap;
 87 |   text-overflow: ellipsis;
 88 |   overflow: hidden;
 89 | }
 90 | 
 91 | .container {
 92 |   width: 100%;
 93 |   height: 100vh;
 94 |   padding: 10px;
 95 |   box-sizing: border-box;
 96 | }
 97 | 
 98 | /* SIDEBAR */
 99 | .sidebar {
100 |   width: var(--sidebar-width);
101 |   height: 100%;
102 |   background: var(--primary);
103 |   padding: 10px;
104 |   box-sizing: border-box;
105 | }
106 | 
107 | .product-listing-area {
108 |   width: calc(100% - var(--sidebar-width) - 25%);
109 |   height: 100%;
110 |   border: 2px solid var(--primary);
111 | }
112 | 
113 | .cart-listing-area {
114 |   width: calc(100% - 75%);
115 |   height: 100%;
116 | }
117 | 
118 | .product-card {
119 |   width: calc(100% / 4 - 10px);
120 |   height: auto;
121 |   border: 2px solid var(--primary);
122 |   cursor: pointer;
123 | }
124 | 
125 | .cart-card {
126 |   width: 100%;
127 |   height: auto;
128 |   border: 2px solid var(--primary);
129 |   cursor: pointer;
130 | }
131 | 
132 | .product-card:hover,
133 | .cart-card:hover {
134 |   background-color: #f5f5f5;
135 | }
136 | 
137 | .counter {
138 |   > p {
139 |     font-size: 1.5rem;
140 |   }
141 | }
142 | 
143 | .cart-counter-btn {
144 |   width: 35px;
145 |   height: 35px;
146 |   border: none;
147 |   outline: none;
148 |   cursor: pointer;
149 | }
150 | 
151 | .bg-secondary {
152 |   background-color: var(--secondary);
153 | }
154 | 
155 | .cart-listing-container {
156 |   height: auto;
157 |   overflow-y: scroll;
158 | }
159 | 
160 | .cart-value-section {
161 |   > .tax-item {
162 |     > ul {
163 |       padding: 0px;
164 |       list-style-type: none;
165 | 
166 |       > li {
167 |         display: flex;
168 |         align-items: center;
169 |         justify-content: space-between;
170 |       }
171 |     }
172 |   }
173 | }
174 | 
175 | /* NAV_ITEM */
176 | .nav_item {
177 |   width: 50px;
178 |   height: 50px;
179 |   background: var(--white);
180 |   color: var(--primary);
181 | }
182 | 
183 | .products-container {
184 |   width: 100%;
185 | }
186 | 
187 | .auth_page_container {
188 |   width: 100%;
189 |   height: 100vh;
190 |   background: var(--grey);
191 |   display: flex;
192 |   align-items: center;
193 |   justify-content: center;
194 | }
195 | 
196 | .auth_form_card {
197 |   width: 400px;
198 |   min-height: 400px;
199 |   background: var(--white);
200 |   border-radius: 5px;
201 |   padding: 20px;
202 |   box-sizing: border-box;
203 |   display: flex;
204 |   align-items: center;
205 |   flex-direction: column;
206 | 
207 |   > img {
208 |     width: 100px;
209 |   }
210 | 
211 |   > .inputField {
212 |     width: 100%;
213 |     display: flex;
214 |     flex-direction: column;
215 |     margin-bottom: 10px;
216 | 
217 |     > label {
218 |       font-size: 1.2rem;
219 |       font-weight: 400;
220 |       margin-bottom: 5px;
221 |     }
222 | 
223 |     > input {
224 |       height: 50px;
225 |       padding-inline-start: 10px;
226 |       font-size: 1rem;
227 |     }
228 |   }
229 | }
230 | 


--------------------------------------------------------------------------------
/src/Pages/Store.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import ProductCard from "../Components/ProductCard";
  3 | import CartCard from "../Components/CartCard";
  4 | import { useProducts } from "../Contexts/Product.context";
  5 | import { useCart } from "../Contexts/Cart.context";
  6 | import EmptyCart from "../assets/emptycart.webp";
  7 | import { useOrder } from "../Contexts/Order.context";
  8 | import PaymentsModal from "../Components/PaymentsModal";
  9 | import { useAuth } from "../Contexts/Auth.context";
 10 | 
 11 | export default function Store() {
 12 |   const { products = [] } = useProducts();
 13 |   const [paymentModalOpen, setPaymentModalOpen] = useState(false);
 14 |   const [transactionType, setTransactionType] = useState("cod");
 15 |   const {
 16 |     cart = [],
 17 |     addToCart = () => {},
 18 |     findAleadyInTheCart = () => {},
 19 |     handleItemQuantity = () => {},
 20 |     cartValue,
 21 |     taxApplicable,
 22 |     resetCart,
 23 |   } = useCart();
 24 |   const { decodedToken = {} } = useAuth();
 25 | 
 26 |   const { createOrder = () => {} } = useOrder();
 27 | 
 28 |   function handleCreateOrderClick(e) {
 29 |     e.preventDefault();
 30 |     setPaymentModalOpen(true);
 31 |   }
 32 | 
 33 |   function handleOrderSubmit() {
 34 |     if (cart && cart.length > 0) {
 35 |       const order = {
 36 |         user: decodedToken.userId,
 37 |         products: cart,
 38 |         orderValue: cartValue,
 39 |         isPaid: false,
 40 |         transactionType,
 41 |         transactionId: null,
 42 |       };
 43 |       createOrder(order);
 44 |       resetCart();
 45 |     }
 46 |   }
 47 | 
 48 |   return (
 49 |     <>
 50 |       <div className="container product-listing-area b-r-10">
 51 |         <div className="header">
 52 |           <h2 className="m-b-10">All Items</h2>
 53 |         </div>
 54 |         <div className="d-flex justify-content-start gap-10 flex-wrap">
 55 |           {products.map((product, index) => (
 56 |             <ProductCard
 57 |               key={`${index}-${product.name}`}
 58 |               addToCart={addToCart}
 59 |               data={product}
 60 |               isAdded={findAleadyInTheCart(product)}
 61 |             />
 62 |           ))}
 63 |         </div>
 64 |       </div>
 65 |       <div className="container cart-listing-area b-r-10">
 66 |         {cart && cart.length > 0 ? (
 67 |           <>
 68 |             <div className="header">
 69 |               <h2 className="m-b-10">Cart</h2>
 70 |             </div>
 71 |             <div
 72 |               className="cart-listing-container d-flex flex-column gap-10"
 73 |               style={{ height: "55%" }}
 74 |             >
 75 |               {cart &&
 76 |                 cart.length > 0 &&
 77 |                 cart.map((item, index) => (
 78 |                   <CartCard
 79 |                     key={`${index}-cart-${item._id}`}
 80 |                     handleQuantity={handleItemQuantity}
 81 |                     data={item}
 82 |                   />
 83 |                 ))}
 84 |             </div>
 85 |             <div className="cart-value-section" style={{ height: "35%" }}>
 86 |               <h1 className="m-b-10">Cart Value</h1>
 87 |               <div className="tax-item">
 88 |                 <h3>Tax</h3>
 89 |                 <ul>
 90 |                   {taxApplicable.map((tax, index) => (
 91 |                     <li key={`${tax.name}-${index}`}>
 92 |                       <h5>{tax.name}</h5>
 93 |                       <p>
 94 |                         {tax.value}
 95 |                         {tax.unit}
 96 |                       </p>
 97 |                     </li>
 98 |                   ))}
 99 |                 </ul>
100 |               </div>
101 |               <div className="tax-item">
102 |                 <ul>
103 |                   <li>
104 |                     <h4>Grand Total</h4>
105 |                     <h5>{cartValue}</h5>
106 |                   </li>
107 |                 </ul>
108 |               </div>
109 |               <PaymentsModal
110 |                 show={paymentModalOpen}
111 |                 setOpen={setPaymentModalOpen}
112 |                 handleTransactionType={setTransactionType}
113 |                 handleOrderSubmit={handleOrderSubmit}
114 |               />
115 |               <button className="btn b-r-10" onClick={handleCreateOrderClick}>
116 |                 Pay Now
117 |               </button>
118 |             </div>
119 |           </>
120 |         ) : (
121 |           <div
122 |             className="d-flex"
123 |             style={{
124 |               alignItems: "center",
125 |               justifyContent: "center",
126 |               height: "100%",
127 |             }}
128 |           >
129 |             <img src={EmptyCart} alt="cart" style={{ width: 200 }} />
130 |           </div>
131 |         )}
132 |       </div>
133 |     </>
134 |   );
135 | }
136 | 


--------------------------------------------------------------------------------