commiting after making valet changes

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": {

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>
   );

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();
 });
+

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>
   );

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

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>

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

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>
-    );
-}
+  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
+  );
+}

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

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

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