Merge pull request AditiSharma00#20 from AditiSharma00/fw20_0743_day6

d6
varun2696 · Apr 2, 2023 · 8637976 · 8637976
2 parents 0d6c60f + 3a7c95a
commit 8637976
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 36 deletions.
diff --git a/pharmeasy/src/Components/AddAddressDrawer/AddressDrawer.jsx b/pharmeasy/src/Components/AddAddressDrawer/AddressDrawer.jsx
@@ -42,7 +42,7 @@ const AddressDrawer = () => {
     <>
      {!address.bill?<Button
         variant="solid"
-        //   className={styles.addAddressButton}
+          className={styles.addAddressButton}
         width="354px"
         height="45px"
         backgroundColor="#10847e"
@@ -58,7 +58,7 @@ const AddressDrawer = () => {
         Add Delivery Address
       </Button>:<Button
         variant="solid"
-        //   className={styles.addAddressButton}
+         className={styles.addAddressButton}
         width="354px"
         height="45px"
         backgroundColor="#10847e"
@@ -206,7 +206,7 @@ const AddressDrawer = () => {
             </Box>
 
             <Box m="30px 0 0 0">
-              <Text
+              {/* <Text
                 mb="15px"
                 fontSize="14px"
                 color="#4f585e"
@@ -215,8 +215,8 @@ const AddressDrawer = () => {
                 letterSpacing="0.3px"
               >
                 Pincode<span style={{ color: "red" }}>*</span>
-              </Text>
-              <RadioGroup fontSize="12px" name="addType" value={address.addType} onChange={handleChange}>
+              </Text> */}
+              {/* <RadioGroup fontSize="12px" name="addType" value={address.addType} onChange={handleChange}>
                 <Stack
                   spacing={5}
                   direction="row"
@@ -233,7 +233,7 @@ const AddressDrawer = () => {
                   <Radio value="work">Work</Radio>
                   <Radio value="others">Others</Radio>
                 </Stack>
-              </RadioGroup>
+              </RadioGroup> */}
             </Box>
 
             <Box m="30px 40px">

diff --git a/pharmeasy/src/Components/CartItem.jsx b/pharmeasy/src/Components/CartItem.jsx
@@ -2,15 +2,15 @@ import React, { useEffect, useState } from "react";
 import styles from "./CartItem.module.css";
 
 const CartItem = ({ image, title, price }) => {
-  // const handleclick = (id) => {
+  // const handleDelete = (id) => {
   //   let data = JSON.parse(localStorage.getItem("cartitem"));
   //   let finaldata = data.filter((ele) => {
   //     if (ele.id != id) return ele;
   //   });
   //   localStorage.setItem("cartitem", JSON.stringify(finaldata));
   //   setdata(finaldata);
   // };
-  // useEffect(() => {}, []);
+  useEffect(() => {}, []);
 
   // function updateqty(id, value) {
   //   let data = JSON.parse(localStorage.getItem("cartitem"));
@@ -44,7 +44,7 @@ const CartItem = ({ image, title, price }) => {
             <div className={styles.deleteButtonWrapper}>
               <button
                 className={styles.deleteButton}
-                // onClick={() => handleclick()}
+                // onClick={() => handleDelete()}
               >
                 <img
                   src="https://assets.pharmeasy.in/web-assets/dist/2fb50086.svg"

diff --git a/pharmeasy/src/Pages/AllRoutes.jsx b/pharmeasy/src/Pages/AllRoutes.jsx
@@ -6,6 +6,7 @@ import NotFound from "./NotFound";
 import { Products } from "../Pages/ProductPage/Products";
 import { SingleProductPage } from "../Pages/SingleProdPage/SingleProductPage";
 import Cart from "./Cart/Cart";
+import Payment from "./PaymentPage/Payment";
 function AllRoutes() {
   return (
     <Routes>
@@ -15,6 +16,7 @@ function AllRoutes() {
       <Route path="/products/:id" element={<SingleProductPage />} />
       <Route path="/search/:name" element={<Search />}></Route>
       <Route path="/cart" element={<Cart />} />
+      <Route path="/payment" element={<Payment />} />
     </Routes>
   );
 }

diff --git a/pharmeasy/src/Pages/Cart/Cart.jsx b/pharmeasy/src/Pages/Cart/Cart.jsx
@@ -12,20 +12,28 @@ import AddressDrawer from "../../Components/AddAddressDrawer/AddressDrawer";
 import axios from "axios";
 
 const Cart = () => {
+  const[total_price,setTotalPrice]=useState(0)
   const [cartItems, setCartItems] = useState([]);
   useEffect(() => {
     const items = JSON.parse(localStorage.getItem("cartItems")) || [];
     setCartItems(items);
     // console.log(items);
   }, []);
   // console.log(cartItems);
-
+  useEffect(() => {
+    let total = 0;
+    cartItems.forEach((item) => {
+      total += item.salePrice;
+    });
+    setTotalPrice(total);
+  }, [cartItems]);
+  // console.log(total_price)
   return (
     <>
       <div className={styles.container}>
         <div className={styles.leftContainer}>
           <div className={styles.cartItemsWrapper}>
-            <h1 className={styles.cartItemsNumber}>Items in cart</h1>
+            <h1 className={styles.cartItemsNumber}>{cartItems.length}{" "}Items in cart</h1>
             {/* <p className={styles.priceDes}>Prices are indicative</p> */}
           </div>
           {cartItems?.map((el) => {
@@ -141,7 +149,7 @@ const Cart = () => {
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                gap: "5px",
+                gap: "20px",
               }}
             >
               <span>
@@ -161,13 +169,12 @@ const Cart = () => {
               <div className={styles.cartValueWrapper}>
                 <p className={styles.CartValue}>Cart Value</p>
                 <p className={styles.CartValue}>
-                  <span className={styles.orderStrikedPrice} />
+                  <span className>
+                  {total_price}
+                  </span>
                 </p>
               </div>
-              <div className={styles.deliveryChargesWrapper}>
-                <p className={styles.deliveryCharges}>Delivery Charges</p>
-                <p className={styles.deliveryCharges}>₹49.00</p>
-              </div>
+
               <div className={styles.convenienceWrapper}>
                 <p className={styles.convenienceCharges}>Convenience charges</p>
                 <p className={styles.convenienceCharges}>
@@ -178,18 +185,7 @@ const Cart = () => {
               <div className={styles.toBePaidWrapper}>
                 <p className={styles.toBePaid}>Amount to be paid</p>
                 <p className={styles.toBePaid}>
-                  {/* ₹
-                  {data.length == 0
-                    ? 0
-                    : data.length == 1
-                    ? (Number(data[0].offprice * data[0].qty) + 49).toFixed(2)
-                    : (
-                        Number(
-                          data.reduce(
-                            (a, b) => a.offprice * a.qty + b.offprice * b.qty
-                          )
-                        ) + 49
-                      ).toFixed(2)} */}
+                 {total_price}            
                 </p>
               </div>
               <hr className={styles.seperator} />

diff --git a/pharmeasy/src/Pages/PaymentPage/Payment.jsx b/pharmeasy/src/Pages/PaymentPage/Payment.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./Payment.module.css";
 import { MdOutlineKeyboardArrowRight } from "react-icons/md";
 import {
@@ -20,6 +20,23 @@ import { GiConfirmed } from "react-icons/gi";
 import { useNavigate } from "react-router-dom";
 
 const Payment = () => {
+  const[total_price,setTotalPrice]=useState(0)
+  const [cartItems, setCartItems] = useState([]);
+  useEffect(() => {
+    const items = JSON.parse(localStorage.getItem("cartItems")) || [];
+    setCartItems(items);
+    // console.log(items);
+  }, []);
+  // console.log(cartItems);
+  useEffect(() => {
+    let total = 0;
+    cartItems.forEach((item) => {
+      total += item.salePrice;
+    });
+    setTotalPrice(total);
+  }, [cartItems]);
+  console.log(total_price)
+
   const offersArray = [
     {
       id: 1,
@@ -65,8 +82,8 @@ const Payment = () => {
       onOpen();
       setTimeout(() => {
         onClose();
-        localStorage.removeItem("cartvalue");
-        localStorage.removeItem("cartitem");
+        //localStorage.removeItem("cartvalue");
+        localStorage.removeItem("cartItems");
         Navigate("/")
       }, 5000)
   }
@@ -358,13 +375,12 @@ const Payment = () => {
               </Box>
               <Flex gap="10px">
                 <Text
-                  textDecoration="line-through"
                   fontSize="16px"
-                  color="#8897a2"
+                  color="#4f585e"
                   fontWeight="400"
                   fontFamily='"Open Sans", sans-serif'
                 >
-                  {/* ₹{prices.sprice} */}
+                  {total_price}
                 </Text>
                 <Text
                   fontSize="16px"
@@ -454,7 +470,7 @@ const Payment = () => {
                   fontWeight="500"
                   fontFamily='"Open Sans", sans-serif'
                 >
-                  {/* ₹{Number(prices.price) + 49} */}
+                  {Number(total_price) + 49} 
                 </Text>
               </Flex>
             </Flex>