+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+ {activeTabs === 0 && (
+
+
{currentProduct.description}
+
+ )}
+
+ {activeTabs === 1 && (
+
+
+
+
+
+ | Stand Up |
+
+ 35″L x 24″W x 37-45″H(front to back wheel)
+ |
+
+
+ | Folded (w/o wheels) |
+
+ 32.5″L x 18.5″W x 16.5″H
+ |
+
+
+ | Folded (w/ wheels) |
+
+ 32.5″L x 24″W x 18.5″H
+ |
+
+
+ | Door Pass Through |
+
+ 24
+ |
+
+
+ | Frame |
+
+ Aluminum
+ |
+
+
+ | Weight (w/o wheels) |
+
+ 20 LBS
+ |
+
+
+ | Weight Capacity |
+
+ 60 LBS
+ |
+
+
+ | Width |
+
+ 24″
+ |
+
+
+ | Handle height (ground to handle) |
+
+ 37-45″
+ |
+
+
+ | Wheels |
+
+ 12″ air / wide track slick tread
+ |
+
+
+ | Seat back height |
+
+ 21.5″
+ |
+
+
+ | Head room (inside canopy) |
+
+ 25″
+ |
+
+
+ | Color |
+
+ Black, Blue, Red, White
+ |
+
+
+ | Size |
+
+ M, S
+ |
+
+
+
+
+
+ )}
+
+ {activeTabs === 2 && (
+
+
+
+
Customer questions & answers
+
+
+ {reviewsArr.length !== 0 &&
+ reviewsArr !== undefined &&
+ reviewsArr.map((item, index) => {
+ return (
+
+
+
+
- }
-
-
-
- {
- currentProduct.RAM !== undefined && currentProduct.RAM.length !== 0 &&
-
-
RAM:
-
+
+ {item.userName}
+
+
+
+
+
- }
-
-
- {
- currentProduct.SIZE !== undefined && currentProduct.SIZE.length !== 0 &&
-
+
{item.review}
+
+
+ );
+ })}
+
+
+
+
+
+
-
-
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
-
- {
- activeTabs === 0 &&
-
-
{currentProduct.description}
-
-
- }
-
-
- {
- activeTabs === 1 &&
-
-
-
-
-
-
- | Stand Up |
-
- 35″L x 24″W x 37-45″H(front to back wheel)
- |
-
-
- | Folded (w/o wheels) |
-
- 32.5″L x 18.5″W x 16.5″H
- |
-
-
- | Folded (w/ wheels) |
-
- 32.5″L x 24″W x 18.5″H
- |
-
-
- | Door Pass Through |
-
- 24
- |
-
-
- | Frame |
-
- Aluminum
- |
-
-
- | Weight (w/o wheels) |
-
- 20 LBS
- |
-
-
- | Weight Capacity |
-
- 60 LBS
- |
-
-
- | Width |
-
- 24″
- |
-
-
- | Handle height (ground to handle) |
-
- 37-45″
- |
-
-
- | Wheels |
-
- 12″ air / wide track slick tread
- |
-
-
- | Seat back height |
-
- 21.5″
- |
-
-
- | Head room (inside canopy) |
-
-
- 25″
- |
-
-
- | Color |
-
- Black, Blue, Red, White
- |
-
-
- | Size |
-
- M, S
- |
-
-
-
-
-
-
- }
-
-
-
- {
- activeTabs === 2 &&
-
-
-
-
-
Customer questions & answers
-
-
-
-
- {
- reviewsArr.length !== 0 && reviewsArr !== undefined &&
- reviewsArr.map((item, index) => {
-
-
- return (
-
-
-
-
-
-
-
-
{item.userName}
-
-
-
-
-
-
- )
-
-
- })
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Customer reviews
-
-
-
- 4.8 out of 5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
-
-
-
-
+
+
+
+
-
-
-
-
-
Related products
-
-
-
- {
-
- relatedProducts.length !== 0 &&
- relatedProducts.map((product, index) => {
-
- return (
-
- )
- })
- }
-
-
+
+
Customer reviews
+
+
+
+ 4.8 out of 5
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
- )
-}
-
-
-export default DetailsPage;
-
+ )}
+
+
+
+
+
+
+
Related products
+
+
+ {relatedProducts.length !== 0 &&
+ relatedProducts.map((product, index) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+export default DetailsPage;
\ No newline at end of file
diff --git a/src/pages/cart/index.js b/src/pages/cart/index.js
index 049ac91..d7f4dfa 100644
--- a/src/pages/cart/index.js
+++ b/src/pages/cart/index.js
@@ -17,14 +17,20 @@ import { useNavigate } from "react-router-dom";
import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
import MapComponent from "../../components/map/ITEMmap";
import { db } from "../../firebase";
-import { collection, deleteDoc, doc, getDocs, onSnapshot } from "firebase/firestore";
+import {
+ collection,
+ deleteDoc,
+ doc,
+ getDocs,
+ onSnapshot,
+} from "firebase/firestore";
const Cart = () => {
const [cartItems, setCartItems] = useState([]);
const [error, setError] = useState(null);
const [totalPrice, setTotalPrice] = useState(0);
const context = useContext(MyContext);
const navigate = useNavigate();
- const [uid,setUid] = useState(localStorage.getItem("uid"))
+ const [uid, setUid] = useState(localStorage.getItem("uid"));
useEffect(() => {
try {
if (context.isLogin === "true") {
@@ -41,54 +47,52 @@ const Cart = () => {
}, []);
useEffect(() => {
- fetchCartProducts()
- }, [db,uid]);
+ fetchCartProducts();
+ }, [db, uid]);
const fetchCartProducts = async () => {
try {
- const cartRef = doc(db, 'carts', uid);
- const productsCollectionRef = collection(cartRef, 'products');
+ const cartRef = doc(db, "carts", uid);
+ const productsCollectionRef = collection(cartRef, "products");
const querySnapshot = await getDocs(productsCollectionRef);
let products = [];
let price = 0;
querySnapshot.forEach((doc) => {
products.push({ id: doc.id, ...doc.data() });
- price+= parseInt(doc.data()?.price)*(doc.data()?.quantity)
+ price += parseInt(doc.data()?.price) * doc.data()?.quantity;
});
- context.setCartCount(products.length)
+ context.setCartCount(products.length);
setCartItems(products);
- setTotalPrice(price)
+ setTotalPrice(price);
} catch (error) {
- console.error('Error fetching cart products:', error);
+ console.error("Error fetching cart products:", error);
}
};
-
const deleteCartItem = async (uid, cartItemId) => {
- const cartItemRef = doc(db, 'carts', uid, 'products', cartItemId);
-
+ const cartItemRef = doc(db, "carts", uid, "products", cartItemId);
+
try {
await deleteDoc(cartItemRef);
- fetchCartProducts()
- console.log('Cart item deleted successfully.');
+ fetchCartProducts();
+ console.log("Cart item deleted successfully.");
} catch (error) {
- console.error('Error deleting cart item:', error);
+ console.error("Error deleting cart item:", error);
}
};
const deleteAllCartItems = async (uid) => {
+ const productsCollectionRef = collection(db, "carts", uid, "products");
- const productsCollectionRef = collection(db, 'carts', uid, 'products');
-
try {
const querySnapshot = await getDocs(productsCollectionRef);
querySnapshot.forEach(async (doc) => {
await deleteDoc(doc.ref);
});
- await fetchCartProducts()
- console.log('All cart items deleted successfully.');
+ await fetchCartProducts();
+ console.log("All cart items deleted successfully.");
} catch (error) {
- console.error('Error deleting cart items:', error);
+ console.error("Error deleting cart items:", error);
}
};
@@ -194,12 +198,20 @@ const Cart = () => {
+ {/*
+ /> */}
|
@@ -214,7 +226,9 @@ const Cart = () => {
|
deleteCartItem(uid,`${item?.id}`)}
+ onClick={() =>
+ deleteCartItem(uid, `${item?.id}`)
+ }
>
@@ -306,11 +320,11 @@ const Cart = () => {
Your Cart is Empty
Please add some products to your cart
-
-
-
+
+
+
diff --git a/src/pages/cart/style.css b/src/pages/cart/style.css
index 542bf1d..8dd4eaf 100644
--- a/src/pages/cart/style.css
+++ b/src/pages/cart/style.css
@@ -1,21 +1,66 @@
+.cartSection {
+ width: 100%;
+ height: auto;
+ padding: 10px 0px;
+}
+.cartSection .clearCart {
+ font-weight: 600;
+ font-size: 18px;
+}
+.cartSection .clearCart svg {
+ font-size: 25px !important;
+}
-.cartSection{width: 100%; height: auto; padding: 10px 0px;}
-.cartSection .clearCart{font-weight: 600; font-size: 18px;}
-.cartSection .clearCart svg{font-size: 25px !important;}
+.cartWrapper table thead {
+ background: #f1f1f1;
+ overflow: hidden;
+}
+.cartWrapper table thead th:first-child {
+ border-top-left-radius: 15px;
+ border-bottom-left-radius: 15px;
+}
+.cartWrapper table thead th:last-child {
+ border-top-right-radius: 15px;
+ border-bottom-right-radius: 15px;
+}
-.cartWrapper table thead{background: #f1f1f1; overflow: hidden; }
-.cartWrapper table thead th:first-child{border-top-left-radius: 15px; border-bottom-left-radius: 15px;}
-.cartWrapper table thead th:last-child{border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
+.cartWrapper table tbody td {
+ vertical-align: middle;
+}
+.cartWrapper table tbody td .img {
+ width: 30%;
+ height: 150px;
+ padding: 5px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+}
+.cartWrapper table tbody td .img img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.cartWrapper table tbody td .info {
+ width: 70%;
+}
+.cartWrapper table tbody td .info a {
+ color: rgba(0, 0, 0, 0.7);
+}
+.cartWrapper table tbody td .info a:hover {
+ text-decoration: none;
+}
-.cartWrapper table tbody td{vertical-align: middle;}
-.cartWrapper table tbody td .img{width: 30%; height: 150px; padding: 5px; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px;}
-.cartWrapper table tbody td .img img{width: 100%; height: 100%; object-fit: cover;}
-.cartWrapper table tbody td .info{width: 70%;}
-.cartWrapper table tbody td .info a{color: rgba(0,0,0,0.7);}
-.cartWrapper table tbody td .info a:hover{text-decoration: none;}
+.cartWrapper table tbody td span {
+ font-weight: 600;
+ font-size: 28px;
+}
+.cartWrapper table tbody td span.text-g {
+ font-weight: bold;
+}
-.cartWrapper table tbody td span{font-weight: 600; font-size: 28px;}
-.cartWrapper table tbody td span.text-g{font-weight: bold;}
-
-.cartRightBox{padding-left: 100px;}
-.cartRightBox .card{position: sticky; top: 150px;}
+.cartRightBox {
+ padding-left: 100px;
+}
+.cartRightBox .card {
+ position: sticky;
+ top: 150px;
+}
diff --git a/src/pages/wishList/index.js b/src/pages/wishList/index.js
new file mode 100644
index 0000000..4e0cd2c
--- /dev/null
+++ b/src/pages/wishList/index.js
@@ -0,0 +1,339 @@
+import React, { useContext, useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import "./style.css";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import Rating from "@mui/material/Rating";
+import {
+ Button,
+ Card,
+ CardActions,
+ CardContent,
+ Typography,
+} from "@mui/material";
+import QuantityBox from "../../components/quantityBox";
+import { MyContext } from "../../App";
+import { getDatabase, ref, onValue, remove } from "firebase/database";
+import { useNavigate } from "react-router-dom";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import MapComponent from "../../components/map/ITEMmap";
+import { db } from "../../firebase";
+import {
+ collection,
+ deleteDoc,
+ doc,
+ getDocs,
+ onSnapshot,
+} from "firebase/firestore";
+const WishList = () => {
+ const [wishlistItems, setWishlistItems] = useState([]);
+ const [error, setError] = useState(null);
+ const [totalPrice, setTotalPrice] = useState(0);
+ const context = useContext(MyContext);
+ const navigate = useNavigate();
+ const [uid, setUid] = useState(localStorage.getItem("uid"));
+
+ console.log(wishlistItems);
+ useEffect(() => {
+ try {
+ if (context.isLogin === "true") {
+ fetchWishlistProducts();
+ } else {
+ navigate("/signIn"); // Navigate to About Us page if not logged in
+ }
+
+ window.scrollTo(0, 0);
+ } catch (error) {
+ console.error("Error:", error);
+ setError("Failed to fetch data from the server"); // Set error state if there's an error with database connection
+ }
+ }, []);
+
+ useEffect(() => {
+ fetchWishlistProducts();
+ }, [db, uid]);
+
+ const fetchWishlistProducts = async () => {
+ try {
+ const wishlistsRef = doc(db, "wishlists", uid);
+ const productsCollectionRef = collection(wishlistsRef, "products");
+ const querySnapshot = await getDocs(productsCollectionRef);
+ let products = [];
+ let price = 0;
+ querySnapshot.forEach((doc) => {
+ products.push({ id: doc.id, ...doc.data() });
+ price += parseInt(doc.data()?.price) * doc.data()?.quantity;
+ });
+ context.setWishlistCount(products.length);
+ console.log(products);
+ setWishlistItems(products);
+ setTotalPrice(price);
+ } catch (error) {
+ console.error("Error fetching wishlist products:", error);
+ }
+ };
+
+ const deleteWishlistItem = async (uid, wishlistItemId) => {
+ const wishlistItemRef = doc(
+ db,
+ "wishlists",
+ uid,
+ "products",
+ wishlistItemId
+ );
+
+ try {
+ await deleteDoc(wishlistItemRef);
+ fetchWishlistProducts();
+ console.log("Wishlist item deleted successfully.");
+ } catch (error) {
+ console.error("Error deleting wishlist item:", error);
+ }
+ };
+
+ const deleteAllWishlistItems = async (uid) => {
+ const productsCollectionRef = collection(db, "wishlists", uid, "products");
+
+ try {
+ const querySnapshot = await getDocs(productsCollectionRef);
+ querySnapshot.forEach(async (doc) => {
+ await deleteDoc(doc.ref);
+ });
+ await fetchWishlistProducts();
+ console.log("All wishlist items deleted successfully.");
+ } catch (error) {
+ console.error("Error deleting wishlist items:", error);
+ }
+ };
+
+ const updateWishlist = (items) => {
+ setWishlistItems(items);
+ };
+
+ return (
+ <>
+ {wishlistItems.length > 0 ? (
+ // Render cart section if cartItems array is not empty
+ <>
+ {context.windowWidth > 992 && (
+
+
+
+ -
+ Home
+
+ - Shop
+ - Wishlist
+
+
+
+
+
+
+
+ Your Wishlist
+
+ There are{" "}
+ {wishlistItems.length}{" "}
+ products in your Wishlist
+
+
+
+ deleteAllWishlistItems(uid)}
+ >
+ Clear Wishlist
+
+
+
+
+
+
+
+
+ | Product |
+ Unit Price |
+ Quantity |
+ Subtotal |
+ Remove |
+
+
+
+
+ {wishlistItems.length !== 0 &&
+ wishlistItems.map((item, index) => {
+ return (
+
+
+
+
+
+ 
+
+
+
+
+
+ {item.productName}
+
+ {" "}
+
+ ({parseFloat(item.rating)})
+
+
+ |
+
+
+
+ Rs:{" "}
+ {parseInt(item.price.split(",").join(""))}
+
+ |
+
+
+
+ |
+
+
+
+ Rs.{" "}
+ {parseInt(
+ item.price.split(",").join("")
+ ) * parseInt(item.quantity)}
+
+ |
+
+
+
+ deleteWishlistItem(uid, `${item?.id}`)
+ }
+ >
+
+
+ |
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+
+ Subtotal
+
+
+ {wishlistItems.length !== 0 &&
+ wishlistItems
+ .map(
+ (item) =>
+ parseInt(item.price.split(",").join("")) *
+ item.quantity
+ )
+ .reduce((total, value) => total + value, 0)}
+
+
+
+
+
+ Shipping
+
+ Free
+
+
+
+
+ Estimate for
+
+ United Kingdom
+
+
+
+
+ Total
+
+
+ {wishlistItems.length !== 0 &&
+ wishlistItems
+ .map(
+ (item) =>
+ parseInt(item.price.split(",").join("")) *
+ item.quantity
+ )
+ .reduce((total, value) => total + value, 0)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your Wishlist is Empty
+ Please add some products to your wishlist
+
+
+
+
+
+
+ | 
}
+ {profile != "" ? (
+