commiting after making valet changes

46f2ed24 · snamdeo · e35332d7 · 46f2ed24 · 46f2ed24 · 46f2ed24
Commit 46f2ed24 authored Sep 06, 2022 by snamdeo
13 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,16 +8,19 @@
      "name": "food-delivery-app",
      "version": "0.1.0",
      "dependencies": {
+        "@cypress/instrument-cra": "^1.4.0",
        "@material-ui/core": "^4.12.4",
        "@react-google-maps/api": "^2.12.2",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.3.0",
        "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
        "bootstrap": "^5.0.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-google-maps": "^9.4.5",
        "react-scripts": "5.0.1",
+        "react-stripe-checkout": "^2.6.3",
        "web-vitals": "^2.1.4"
      }
    },
@@ -2158,6 +2161,70 @@
        "postcss-selector-parser": "^6.0.10"
      }
    },
+    "node_modules/@cypress/instrument-cra": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@cypress/instrument-cra/-/instrument-cra-1.4.0.tgz",
+      "integrity": "sha512-gXf540xL0jcUXkWyrA2Ug9rzs+jRkc9EPhnRi8XfbnRjdF4lvnn108N6x0lgTApMTbbpCDbVuskHGXDmIuD3CQ==",
+      "dependencies": {
+        "babel-plugin-istanbul": "6.0.0",
+        "debug": "4.2.0",
+        "find-yarn-workspace-root": "^2.0.0"
+      }
+    },
+    "node_modules/@cypress/instrument-cra/node_modules/babel-plugin-istanbul": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
+      "integrity": "sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^4.0.0",
+        "test-exclude": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@cypress/instrument-cra/node_modules/debug": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+      "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+      "deprecated": "Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@cypress/instrument-cra/node_modules/istanbul-lib-instrument": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+      "dependencies": {
+        "@babel/core": "^7.7.5",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.0.0",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@cypress/instrument-cra/node_modules/semver": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
    "node_modules/@emotion/hash": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -5175,6 +5242,28 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -8268,6 +8357,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
    "node_modules/flat-cache": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -14609,6 +14706,11 @@
        }
      }
    },
+    "node_modules/react-stripe-checkout": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-stripe-checkout/-/react-stripe-checkout-2.6.3.tgz",
+      "integrity": "sha512-lnsCaAdlmwPGGMbQoI8FXtQUgEm+ktzPZ/ipAw4j0HYf80kef7CivGx6QitmgEn99/aa5hI/dmVXwfVZW/Mzfg=="
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -18794,6 +18896,54 @@
      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
      "requires": {}
    },
+    "@cypress/instrument-cra": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@cypress/instrument-cra/-/instrument-cra-1.4.0.tgz",
+      "integrity": "sha512-gXf540xL0jcUXkWyrA2Ug9rzs+jRkc9EPhnRi8XfbnRjdF4lvnn108N6x0lgTApMTbbpCDbVuskHGXDmIuD3CQ==",
+      "requires": {
+        "babel-plugin-istanbul": "6.0.0",
+        "debug": "4.2.0",
+        "find-yarn-workspace-root": "^2.0.0"
+      },
+      "dependencies": {
+        "babel-plugin-istanbul": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
+          "integrity": "sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.0.0",
+            "@istanbuljs/load-nyc-config": "^1.0.0",
+            "@istanbuljs/schema": "^0.1.2",
+            "istanbul-lib-instrument": "^4.0.0",
+            "test-exclude": "^6.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
+          "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "istanbul-lib-instrument": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
+          "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
+          "requires": {
+            "@babel/core": "^7.7.5",
+            "@istanbuljs/schema": "^0.1.2",
+            "istanbul-lib-coverage": "^3.0.0",
+            "semver": "^6.3.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
    "@emotion/hash": {
      "version": "0.8.0",
      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -21013,6 +21163,27 @@
      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
      "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
    "axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -23308,6 +23479,14 @@
        "path-exists": "^4.0.0"
      }
    },
+    "find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "requires": {
+        "micromatch": "^4.0.2"
+      }
+    },
    "flat-cache": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -27726,6 +27905,11 @@
        "workbox-webpack-plugin": "^6.4.1"
      }
    },
+    "react-stripe-checkout": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-stripe-checkout/-/react-stripe-checkout-2.6.3.tgz",
+      "integrity": "sha512-lnsCaAdlmwPGGMbQoI8FXtQUgEm+ktzPZ/ipAw4j0HYf80kef7CivGx6QitmgEn99/aa5hI/dmVXwfVZW/Mzfg=="
+    },
    "react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
--- a/package.json
+++ b/package.json
@@ -3,16 +3,19 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@cypress/instrument-cra": "^1.4.0",
    "@material-ui/core": "^4.12.4",
    "@react-google-maps/api": "^2.12.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
    "bootstrap": "^5.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-maps": "^9.4.5",
    "react-scripts": "5.0.1",
+    "react-stripe-checkout": "^2.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {

--- a/public/Images/Gulan Jaamun.png
+++ b/public/Images/Gulan Jaamun.png
--- a/src/App.js
+++ b/src/App.js
-import {useState} from 'react'
-import Header from'./components/Header'
-import Main from'./components/Main'
-import Basket from'./components/Basket'
-import data from './data';
-
+import { useState, useEffect } from "react";
+import Header from "./components/Header";
+import Main from "./components/Main";
+import Basket from "./components/Basket";
+import axios from "axios";

 function App() {
-  const [cartItems,setCartItems] = useState([]);
-  const { products } = data;
+  const [cartItems, setCartItems] = useState([]);
  const onAdd = (product) => {
-    const exist = cartItems.find((x)=>x.id === product.id);
-
-    if(exist){
+    const exist = cartItems.find((x) => x.id === product.id);
+    if (exist) {
      const newCartItems = cartItems.map((x) =>
-      x.id === product.id ? { ...exist,qty :exist.qty +1 } :x
+        x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
      );
      setCartItems(newCartItems);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
-    }else {
-      const newCartItems = [...cartItems,{ ...product,qty:1}];
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
+    } else {
+      const newCartItems = [...cartItems, { ...product, qty: 1 }];
      setCartItems(newCartItems);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
    }
  };
  const onRemove = (product) => {
    const exist = cartItems.find((x) => x.id === product.id);
-    if(exist.qty === 1){
-      const newCartItems = cartItems.filter((x) =>x.id !== product.id);
-      setCartItems(newCartItems)
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
-    }else {
-      const newCartItems = cartItems.map((x)=>
-      x.id === product.id? { ...exist,qty:exist.qty -1} :x
+    if (exist.qty === 1) {
+      const newCartItems = cartItems.filter((x) => x.id !== product.id);
+      setCartItems(newCartItems);
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
+    } else {
+      const newCartItems = cartItems.map((x) =>
+        x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
      );
      setCartItems(newCartItems);
-      localStorage.setItem('cartItems',JSON.stringify(newCartItems));
+      localStorage.setItem("cartItems", JSON.stringify(newCartItems));
    }
  };
-  useState(()=>{
-    setCartItems(localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')):[]);
+  useState(() => {
+    setCartItems(
+      localStorage.getItem("cartItems")
+        ? JSON.parse(localStorage.getItem("cartItems"))
+        : []
+    );
+  }, []);
+  useEffect(() => {
+    axios
+      .get("http://localhost:8080/fetchData/getAllProducts")
+      .then((res) => {
+        setData(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  },[]);
+
+  useEffect(() => {
+    axios
+      .get("http://localhost:8080/api/v1/getUserValetAmount")
+      .then((res) => {
+        console.log("Valet Amount : ",res.data);
+        localStorage.setItem("valetAmount",res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
  },[]);
+
+  const [dataItems, setData] = useState([]);
  return (
    <div>
-      <Header countCartItems = {cartItems.length}/>
-      <div className='row'>
-        <Main cartItems={cartItems} onAdd = {onAdd} onRemove={onRemove} products={products}/>
-        <Basket cartItems={cartItems} onAdd = {onAdd} onRemove={onRemove}/>
+      <Header countCartItems={cartItems.length} valetAmt= {localStorage.getItem("valetAmount")} className="sticky-header" />
+      <div className="row">
+        <Main
+          cartItems={cartItems}
+          onAdd={onAdd}
+          onRemove={onRemove}
+          products={dataItems}
+        />
+        <Basket cartItems={cartItems} onAdd={onAdd} onRemove={onRemove}/>
      </div>
    </div>
  );

--- a/src/App.test.js
+++ b/src/App.test.js
 import { render, screen } from '@testing-library/react';
 import App from './App';

-test('renders learn react link', () => {
+test('renders food deliveroooo title for the app', () => {
  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/food deliveroooo/i);
  expect(linkElement).toBeInTheDocument();
 });
+
--- a/src/components/Basket.js
+++ b/src/components/Basket.js
-import { Box } from "@material-ui/core";
-import { useLoadScript, GoogleMap } from "@react-google-maps/api";
+import axios from "axios";
+import StripeCheckout from "react-stripe-checkout";

-const center = { lat: 488584, long: 22945 };
 export default function Basket(props) {
  const { cartItems, onAdd, onRemove } = props;
  const itemsPrice = cartItems.reduce((a, c) => a + c.qty * c.price, 0);
  const taxPrice = itemsPrice * 0.14;
-  const deliveryCharges = itemsPrice > 150 ? 0 : 20;
-  const totalPrice = itemsPrice + taxPrice + deliveryCharges;
- 
-  // console.log("Shopping Id ",shoppingId )
-   const { isLoaded } = useLoadScript({
-    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
-  });
+  const shippingPrice = itemsPrice > 250 ? 0 : 100;
+  let totalPrice = itemsPrice + taxPrice + shippingPrice;
+  const cartIds = [];
+  for(const x of props.cartItems){
+     cartIds.push(x.id);
+  }
+  const cartDetails = {
+    orderNumber: Math.floor(Math.random() * 10000),
+    productIds: cartIds,
+    taxPrice: taxPrice,
+    shippingPrice: shippingPrice,
+    totalPrice: totalPrice,
+    itemsPrice: itemsPrice
+  };

-  if(isLoaded){
-    //  return <SkeletonText></SkeletonText>
+  const onToken = (token) => {
+    console.log(token);
+  };
+  for (const iterator of cartItems) {
+    cartIds.push(iterator.id);
  }
+  // console.log(productIds)
  return (
    <aside className="block col-1">
-       {/* <GoogleMap></GoogleMap> */}
-      <div></div>
      <h2>Cart Items</h2>
      <div>
        {cartItems.length === 0 && <div>Cart is Empty</div>}
@@ -54,7 +62,7 @@ export default function Basket(props) {
            <div className="row">
              <div className="col-2">Shipping Price</div>
              <div className="col-1 text-right">
-                Rs.{deliveryCharges.toFixed(2)}
+                Rs.{shippingPrice.toFixed(2)}
              </div>
            </div>
            <div className="row">
@@ -66,12 +74,54 @@ export default function Basket(props) {
              </div>
            </div>
            <hr />
-            <div className="row">
-              <button onClick={() => alert("Implement Order")}>Order</button>
+            {/* <button>Order Now</button> */}
+            <br />
+            <br />
+            <div
+              className="row"
+              onClick={() => {
+                console.log(cartDetails.reference)
+                axios
+                  .post("http://localhost:8080/api/v1/addProducts", cartDetails)
+                  .then((response) => {
+                    if (response.data != null) {
+                      // alert("post is successfull");
+                    }
+                  });
+                document.getElementById("hiddenSpan").style.display =
+                  "inline-block";
+              }}
+            >
+              <StripeCheckout
+                token={onToken}
+                stripeKey="pk_test_51Lac1RSGTXmhdtInMHzrGF4PFAcbIITNkOdvRaWd9VRw10YSLEXcCinQ1BaVP5LwCyoc4nX7xlPEYCQe9wgCbkEW00dMKKiC4u"
+                name="Simple Shopping Cart"
+                currency="INR"
+                amount={totalPrice + "00"}
+              />
+              <br />
+              <span id="hiddenSpan">
+                Order {cartDetails.orderNumber} is placed successfully
+              </span>
            </div>
+            <br />
+            <button  className = "disabled"onClick={() => {
+                 let newValetAmt = (parseInt(localStorage.getItem("valetAmount")) + itemsPrice)
+                 localStorage.setItem("valetAmount",newValetAmt)
+                 console.log("New Valet Amount", newValetAmt);
+                 const newValetAmount = {
+                  newValetAmt:newValetAmt
+                 }
+                axios
+                  .put('http://localhost:8080/api/v1/updateValetAmount',newValetAmount)
+                  .then((response) => {
+                    if (response.data != null) {
+                      // alert("post is successfull");
+                    }
+                  });
+              }}>Cancel Order</button>
          </>
        )}
-       
      </div>
    </aside>
  );

--- a/src/components/Basket.test.js
+++ b/src/components/Basket.test.js
+// import {render , screen}  from "@testing-library/react"
+// import Basket from "./Basket";
+
+// test('renders food deliveroooo title for the app', () => {
+//     render(<Basket />);
+//     const linkElement = screen.getByText(/food deliveroooo/i);
+//     expect(linkElement).toBeInTheDocument();
+//   });
+  
\ No newline at end of file
--- a/src/components/Header.js
+++ b/src/components/Header.js
 export default function Header(props){
-    const{countCartItems} = props;
+    const{countCartItems,valetAmt} = props;
  return  (
         <div className="row center blockHeader">
-        <div>
+        <div id="headerId">
            <a href="#">
                <h2>food Deliverooooo</h2>
            </a> 
@@ -17,6 +17,7 @@ export default function Header(props){
                )}
                </a> {''}
                <a href='#/signin'>Sign In</a>
+                <h4>Valet Amount Left : {valetAmt}</h4>
        </div>

    </div>

--- a/src/components/Header.test.js
+++ b/src/components/Header.test.js
+import {render , screen}  from "@testing-library/react"
+import Header from "./Header";
+test('renders food deliveroooo title for the app', () => {
+    render(<Header />);
+    const linkElement = screen.getByText(/food deliveroooo/i);
+    expect(linkElement).toBeInTheDocument();
+  });
+  
+  test('renders CART button for the app', () => {
+    render(<Header />);
+    const linkElement = screen.getByText(/CART/i);
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  test('renders SIGN IN button for the app', () => {
+    render(<Header />);
+    const linkElement = screen.getByText(/SIGN IN/i);
+    expect(linkElement).toBeInTheDocument();
+  });
+
+  test('renders Anchor tag', () => {
+    render(<Header />);
+    const linkElement = screen.queryAllByRole("link");
+    expect(linkElement).toBeDefined();
+  });
\ No newline at end of file
--- a/src/components/Main.js
+++ b/src/components/Main.js
 import Product from "./Product";
-
 export default function Main(props) {
-    const {cartItems, products , onAdd, onRemove} = props;
-    return (
-        <div className='block col-2'>
-            <h2>Products</h2>
-            <div className="row">
-                {products.map((product) => (
-                 <Product  key={product.id}
-                  product={product} 
-                  item={cartItems.find((x)=> x.id === product.id)}
-                  onAdd = {onAdd} 
-                  onRemove={onRemove}
-                  ></Product> 
-                ))}
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+  const { cartItems, products, onAdd, onRemove } = props;
+ 
+  return (
+    <div className="block col-2">
+      <h2>Products</h2>
+      <div className="row">
+        {products.map((product) => (
+          <Product
+            key={product.id}
+            product={product}
+            item={cartItems.find((x) => x.id === product.id)}
+            onAdd={onAdd}
+            onRemove={onRemove}
+          ></Product>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/src/data.js
+++ b/src/data.js
-const data = {
-    products:[
-        {
-            id:'1',
-            name:'Pizza',
-            price:300,
-            image:'./Images/Pizza2.png'
-        },
-        {
-            id:'2',
-            name:'Burger',
-            price:250,
-            image:'./Images/Burger.png'
-        },
-        {
-            id:'3',
-            name:'Gulab Jamun',
-            price:50,
-            image:'./Images/Gulan Jaamun.png'
-        },
-
-        {
-            id:'4',
-            name:'Veg Thali',
-            price:200,
-            image:'./Images/VegThali.png'
-        }
-    ]
-}
-
-export default data;
\ No newline at end of file
--- a/src/index.css
+++ b/src/index.css
@@ -84,7 +84,20 @@ button.remove{
  text-align: right;
 }

+#hiddenSpan{
+  display: none;
+  color: darkgreen;
+  font-weight: bold;
+}
+
 .blockHeader{
-  background-color:#00FA9A
+  background-color: lightgreen;
+}
+
+.sticky-header{
+  position:fixed;
 }

+.addDisable{
+  disabled:true
+}
\ No newline at end of file
--- a/src/index.js
+++ b/src/index.js
@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+//import 'bootstrap/dist/css/bootstrap.min.css';

 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+ // <React.StrictMode>
    <App />
-  </React.StrictMode>
+  //</React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function