diff --git a/src/App.css b/src/App.css index c717171..33edc18 100644 --- a/src/App.css +++ b/src/App.css @@ -1,6 +1,6 @@ -@import url("https://fonts.googleapis.com/css2?family=Italiana&family=Lato:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap"); -@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"); -@import url("https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"); +@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Lato:wght@100;300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap'); +@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'); +@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'); * { margin: 0px; @@ -8,7 +8,7 @@ box-sizing: border-box; } body { - font-family: "Lato", sans-serif; + font-family: 'Lato', sans-serif; font-size: 22px; } #root { @@ -117,7 +117,7 @@ p { opacity: 0; } [tooltip]::before { - content: ""; + content: ''; border: 5px solid transparent; /* opinion 4 */ z-index: 1001; /* absurdity 1 */ } @@ -152,68 +152,68 @@ p { } /* don't show empty tooltips */ -[tooltip=""]::before, -[tooltip=""]::after { +[tooltip='']::before, +[tooltip='']::after { display: none !important; } /* FLOW: UP */ [tooltip]:not([flow])::before, -[tooltip][flow^="up"]::before { +[tooltip][flow^='up']::before { bottom: 100%; border-bottom-width: 0; border-top-color: #3bb77e; } [tooltip]:not([flow])::after, -[tooltip][flow^="up"]::after { +[tooltip][flow^='up']::after { bottom: calc(100% + 5px); } [tooltip]:not([flow])::before, [tooltip]:not([flow])::after, -[tooltip][flow^="up"]::before, -[tooltip][flow^="up"]::after { +[tooltip][flow^='up']::before, +[tooltip][flow^='up']::after { left: 50%; transform: translate(-50%, -0.5em); } /* FLOW: DOWN */ -[tooltip][flow^="down"]::before { +[tooltip][flow^='down']::before { top: 100%; border-top-width: 0; border-bottom-color: #333; } -[tooltip][flow^="down"]::after { +[tooltip][flow^='down']::after { top: calc(100% + 5px); } -[tooltip][flow^="down"]::before, -[tooltip][flow^="down"]::after { +[tooltip][flow^='down']::before, +[tooltip][flow^='down']::after { left: 50%; transform: translate(-50%, 0.5em); } /* FLOW: LEFT */ -[tooltip][flow^="left"]::before { +[tooltip][flow^='left']::before { top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-0.5em, -50%); } -[tooltip][flow^="left"]::after { +[tooltip][flow^='left']::after { top: 50%; right: calc(100% + 5px); transform: translate(-0.5em, -50%); } /* FLOW: RIGHT */ -[tooltip][flow^="right"]::before { +[tooltip][flow^='right']::before { top: 50%; border-left-width: 0; border-right-color: #3bb77e; right: calc(0em - 5px); transform: translate(0.5em, -50%); } -[tooltip][flow^="right"]::after { +[tooltip][flow^='right']::after { top: 50%; left: calc(100% + 5px); transform: translate(0.5em, -50%); @@ -237,17 +237,17 @@ p { /* FX All The Things */ [tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, -[tooltip][flow^="up"]:hover::before, -[tooltip][flow^="up"]:hover::after, -[tooltip][flow^="down"]:hover::before, -[tooltip][flow^="down"]:hover::after { +[tooltip][flow^='up']:hover::before, +[tooltip][flow^='up']:hover::after, +[tooltip][flow^='down']:hover::before, +[tooltip][flow^='down']:hover::after { animation: tooltips-vert 300ms ease-out forwards; } -[tooltip][flow^="left"]:hover::before, -[tooltip][flow^="left"]:hover::after, -[tooltip][flow^="right"]:hover::before, -[tooltip][flow^="right"]:hover::after { +[tooltip][flow^='left']:hover::before, +[tooltip][flow^='left']:hover::after, +[tooltip][flow^='right']:hover::before, +[tooltip][flow^='right']:hover::after { animation: tooltips-horz 300ms ease-out forwards; } @@ -307,7 +307,7 @@ p { margin-bottom: 30px; } .sidebarWrapper h3:after { - content: ""; + content: ''; width: 100%; height: 3px; background: #f0f0f0; @@ -317,7 +317,7 @@ p { } .sidebarWrapper h3:before { - content: ""; + content: ''; width: 20%; height: 3px; background: #b0e5c2; @@ -447,7 +447,7 @@ ul.breadcrumb li { ul.breadcrumb li + li:before { padding: 8px; color: black; - content: "/\00a0"; + content: '/\00a0'; } ul.breadcrumb li a { color: #3bb77e; @@ -560,7 +560,7 @@ input::-webkit-inner-spin-button { } /* Firefox */ -input[type="number"] { +input[type='number'] { -moz-appearance: textfield; } diff --git a/src/App.js b/src/App.js index c49d4a4..dc9fda7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,32 +1,28 @@ -import "bootstrap/dist/css/bootstrap.min.css"; -import { - getDatabase, - onValue, - ref -} from "firebase/database"; -import React, { createContext, useEffect, useState } from "react"; -import { HashRouter, Route, Routes } from "react-router-dom"; -import "./App.css"; -import Loader from "./assets/images/loading.gif"; -import Footer from "./components/footer/footer"; -import Header from "./components/header/header"; -import About from "./pages/About"; -import AddProductForm from "./pages/AddProd"; -import DetailsPage from "./pages/Details"; -import Home from "./pages/Home/index"; -import Listing from "./pages/Listing"; -import NotFound from "./pages/NotFound"; -import SignIn from "./pages/SignIn"; -import SignUp from "./pages/SignUp"; -import Cart from "./pages/cart"; -import Wishlist from "./pages/wishList"; -import "./responsive.css"; +import 'bootstrap/dist/css/bootstrap.min.css'; +import { getDatabase, onValue, ref } from 'firebase/database'; +import React, { createContext, useEffect, useState } from 'react'; +import { HashRouter, Route, Routes } from 'react-router-dom'; +import './App.css'; +import Loader from './assets/images/loading.gif'; +import Footer from './components/footer/footer'; +import Header from './components/header/header'; +import About from './pages/About'; +import AddProductForm from './pages/AddProd'; +import DetailsPage from './pages/Details'; +import Home from './pages/Home/index'; +import Listing from './pages/Listing'; +import NotFound from './pages/NotFound'; +import SignIn from './pages/SignIn'; +import SignUp from './pages/SignUp'; +import Cart from './pages/cart'; +import Wishlist from './pages/wishList'; +import './responsive.css'; // import data from './data'; -import { collection, doc, getDocs } from "firebase/firestore"; -import MapComponent from "./components/map/ITEMmap"; -import { db } from "./firebase"; -import SellerForm from "./pages/SellerRegistration"; +import { collection, doc, getDocs } from 'firebase/firestore'; +import MapComponent from './components/map/ITEMmap'; +import { db } from './firebase'; +import SellerForm from './pages/SellerRegistration'; const MyContext = createContext(); @@ -57,8 +53,8 @@ function App() { const fetchCartProducts = async () => { try { - const cartRef = doc(db, "carts", localStorage.getItem("uid")); - const productsCollectionRef = collection(cartRef, "products"); + const cartRef = doc(db, 'carts', localStorage.getItem('uid')); + const productsCollectionRef = collection(cartRef, 'products'); const querySnapshot = await getDocs(productsCollectionRef); const products = []; querySnapshot.forEach((doc) => { @@ -67,15 +63,15 @@ function App() { setCartItems(products); setCartCount(products.length); // Set the product count } catch (error) { - console.error("Error fetching cart products:", error); + console.error('Error fetching cart products:', error); } }; const fetchWishlistProducts = async () => { - console.log("fetchWishlistProducts"); + console.log('fetchWishlistProducts'); try { - const wishlistRef = doc(db, "wishlists", localStorage.getItem("uid")); - const productsCollectionRef = collection(wishlistRef, "products"); + const wishlistRef = doc(db, 'wishlists', localStorage.getItem('uid')); + const productsCollectionRef = collection(wishlistRef, 'products'); const querySnapshot = await getDocs(productsCollectionRef); console.log(querySnapshot); const products = []; @@ -86,7 +82,7 @@ function App() { setWishlistItems(products); setWishlistCount(products.length); // Set the product count } catch (error) { - console.error("Error fetching wishlist products:", error); + console.error('Error fetching wishlist products:', error); } }; @@ -94,16 +90,16 @@ function App() { const fetchData = async () => { try { const response = await fetch( - "https://mavrick-1.github.io/DataApi/data.json" + 'https://mavrick-1.github.io/DataApi/data.json' ); if (!response.ok) { - throw new Error("Network response was not ok"); + throw new Error('Network response was not ok'); } const data = await response.json(); // //console.log("fetced data", data) setData(data); } catch (error) { - console.error("Error fetching data:", error); + console.error('Error fetching data:', error); } }; @@ -113,7 +109,7 @@ function App() { useEffect(() => { getData(); - const is_Login = localStorage.getItem("isLogin"); + const is_Login = localStorage.getItem('isLogin'); setIsLogin(is_Login); setTimeout(() => { @@ -128,7 +124,7 @@ function App() { const db = getDatabase(); // Reference to the node or path you want to fetch data from - const dataRef = ref(db, localStorage.getItem("user")); + const dataRef = ref(db, localStorage.getItem('user')); // Fetch data from the specified path onValue( @@ -139,11 +135,11 @@ function App() { //console.log("Data fetched successfully:", data); }, (error) => { - console.error("Error fetching data:", error); + console.error('Error fetching data:', error); } ); } catch (error) { - console.error("Error:", error); + console.error('Error:', error); } }; @@ -153,7 +149,7 @@ function App() { const db = getDatabase(); // Reference to the node or path you want to fetch data from - const dataRef = ref(db, localStorage.getItem("user")); + const dataRef = ref(db, localStorage.getItem('user')); // Fetch data from the specified path onValue( @@ -164,17 +160,17 @@ function App() { //console.log("Data fetched successfully:", data); }, (error) => { - console.error("Error fetching data:", error); + console.error('Error fetching data:', error); } ); } catch (error) { - console.error("Error:", error); + console.error('Error:', error); } }; const addToCart = async (item) => { try { - const user = localStorage.getItem("user"); + const user = localStorage.getItem('user'); // Initialize Firebase database with the provided database URL const db = getDatabase(); const cartRef = ref(db, user); @@ -184,7 +180,7 @@ function App() { setCartItems([...cartItems, { ...item, quantity: 1 }]); //console.log('Item added to cart successfully'); } catch (error) { - console.error("Error adding item to cart:", error); + console.error('Error adding item to cart:', error); } }; @@ -198,12 +194,12 @@ function App() { }; const signIn = () => { - const is_Login = localStorage.getItem("isLogin"); + const is_Login = localStorage.getItem('isLogin'); setIsLogin(is_Login); }; const signOut = () => { - localStorage.removeItem("isLogin"); + localStorage.removeItem('isLogin'); setIsLogin(false); }; @@ -229,7 +225,7 @@ function App() { wishlistCount, setWishlistCount, fetchCartProducts, - fetchWishlistProducts, + fetchWishlistProducts }; return data && data.productData ? ( @@ -297,4 +293,3 @@ function App() { export default App; export { MyContext }; - diff --git a/src/Hooks/useLoggedInUserEmail.js b/src/Hooks/useLoggedInUserEmail.js index 1c513e6..c008cb5 100644 --- a/src/Hooks/useLoggedInUserEmail.js +++ b/src/Hooks/useLoggedInUserEmail.js @@ -1,13 +1,13 @@ import { useState } from 'react'; const useLoggedInUserEmail = () => { - const [loggedInUserEmail, setLoggedInUserEmail] = useState(''); + const [loggedInUserEmail, setLoggedInUserEmail] = useState(''); - const setLoggedInEmail = (email) => { - setLoggedInUserEmail(email); - }; + const setLoggedInEmail = (email) => { + setLoggedInUserEmail(email); + }; - return [loggedInUserEmail, setLoggedInEmail]; + return [loggedInUserEmail, setLoggedInEmail]; }; export default useLoggedInUserEmail; diff --git a/src/Redux/auth-slice.js b/src/Redux/auth-slice.js index ce6a177..278c414 100644 --- a/src/Redux/auth-slice.js +++ b/src/Redux/auth-slice.js @@ -1,29 +1,29 @@ -import { createSlice } from "@reduxjs/toolkit"; +import { createSlice } from '@reduxjs/toolkit'; const initialState = { - value:{ - isAuth:false, - email:"", - } -} + value: { + isAuth: false, + email: '' + } +}; export const auth = createSlice({ - name:"auth", - initialState, - reducers:{ - logOut:()=>{ - return initialState - }, - logIn:(state,action)=>{ - return { - value : { - isAuth:true, - email:action.payload.email - } - } + name: 'auth', + initialState, + reducers: { + logOut: () => { + return initialState; + }, + logIn: (state, action) => { + return { + value: { + isAuth: true, + email: action.payload.email } + }; } -}) + } +}); -export const {logIn,logOut} = auth.actions; -export default auth.reducer; \ No newline at end of file +export const { logIn, logOut } = auth.actions; +export default auth.reducer; diff --git a/src/Redux/store.js b/src/Redux/store.js index 59a1dce..92a67e4 100644 --- a/src/Redux/store.js +++ b/src/Redux/store.js @@ -1,9 +1,9 @@ -import { configureStore } from "@reduxjs/toolkit"; -import authReducer from "./auth-slice" +import { configureStore } from '@reduxjs/toolkit'; +import authReducer from './auth-slice'; export const store = configureStore({ - //Reducer is a function that takes an action and updates the previous state - reducer: { - authReducer - } -}) \ No newline at end of file + //Reducer is a function that takes an action and updates the previous state + reducer: { + authReducer + } +}); diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js index e3cb80f..2240fc7 100644 --- a/src/components/Sidebar/index.js +++ b/src/components/Sidebar/index.js @@ -17,202 +17,214 @@ import 'react-range-slider-input/dist/style.css'; import { MyContext } from '../../App'; function valuetext(value) { - return `${value}°C`; + return `${value}°C`; } const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; const Sidebar = (props) => { - const [value, setValue] = useState([100, 60000]); - const [value2, setValue2] = useState(0); - const [brandFilters, setBrandFilters] = React.useState([]); - const [ratingsArr, setRatings] = React.useState([]); - const [totalLength, setTotalLength] = useState([]); - - const context = useContext(MyContext); - - let { id } = useParams(); - - - var brands = []; - var ratings = []; - - - var catLength = 0; - var lengthArr = []; - useEffect(() => { - props.data.length !== 0 && - props.data.map((item, index) => { - item.items.length !== 0 && - item.items.map((item_) => { - catLength += item_.products.length - }) - lengthArr.push(catLength) - catLength = 0; - }) - - const list = lengthArr.filter((item, index) => lengthArr.indexOf(item) === index); - setTotalLength(list) - - - }, []); - - - - useEffect(() => { - brands = []; - ratings=[]; - props.currentCatData.length !== 0 && - props.currentCatData.map((item) => { - brands.push(item.brand); - ratings.push(parseFloat(item.rating)) - }) - - const brandList = brands.filter((item, index) => brands.indexOf(item) === index); - setBrandFilters(brandList); - - const ratings_ = ratings.filter((item, index) => ratings.indexOf(item) === index); - setRatings(ratings_) - - }, [id]) - - - - - useEffect(() => { - var price = 0; - props.currentCatData.length !== 0 && - props.currentCatData.map((item, index) => { - let prodPrice = parseInt(item.price.toString().replace(/,/g, "")); - if (prodPrice > price) { - price = prodPrice - } - }) - - - setValue2(price) - - //setValue(price); - //filterByPrice(price[0], price[1]); - - - - }, [props.currentCatData]); - - - const filterByBrand = (keyword) => { - props.filterByBrand(keyword) - } - - const filterByRating = (keyword) => { - props.filterByRating(parseFloat(keyword)) - } - - useEffect(() => { - filterByPrice(value[0], value[1]); - }, [value]); - - const filterByPrice = (minValue, maxValue) => { - props.filterByPrice(minValue, maxValue) - } - - - return ( - <> -
-
-

Category

-
- { - props.data.length !== 0 && props.data.map((item, index) => { - return ( - -
- -

{item.cat_name}

- - {totalLength[index]} -
- - ) - }) - - } - -
-
- - -
-

Fill by price

- - - - -
- From: Rs: {value[0]} - From: Rs: {value[1]} -
- - -
-
Filter By Brand
- -
    - - { - brandFilters.length !== 0 && - brandFilters.map((item, index) => { - return ( -
  • filterByBrand(item)} />} label={item} />
    • - ) - }) - - } -     - -
+ const [value, setValue] = useState([100, 60000]); + const [value2, setValue2] = useState(0); + const [brandFilters, setBrandFilters] = React.useState([]); + const [ratingsArr, setRatings] = React.useState([]); + const [totalLength, setTotalLength] = useState([]); + + const context = useContext(MyContext); + + let { id } = useParams(); + + var brands = []; + var ratings = []; + + var catLength = 0; + var lengthArr = []; + useEffect(() => { + props.data.length !== 0 && + props.data.map((item, index) => { + item.items.length !== 0 && + item.items.map((item_) => { + catLength += item_.products.length; + }); + lengthArr.push(catLength); + catLength = 0; + }); + + const list = lengthArr.filter( + (item, index) => lengthArr.indexOf(item) === index + ); + setTotalLength(list); + }, []); + + useEffect(() => { + brands = []; + ratings = []; + props.currentCatData.length !== 0 && + props.currentCatData.map((item) => { + brands.push(item.brand); + ratings.push(parseFloat(item.rating)); + }); + + const brandList = brands.filter( + (item, index) => brands.indexOf(item) === index + ); + setBrandFilters(brandList); + + const ratings_ = ratings.filter( + (item, index) => ratings.indexOf(item) === index + ); + setRatings(ratings_); + }, [id]); + + useEffect(() => { + var price = 0; + props.currentCatData.length !== 0 && + props.currentCatData.map((item, index) => { + let prodPrice = parseInt(item.price.toString().replace(/,/g, '')); + if (prodPrice > price) { + price = prodPrice; + } + }); + + setValue2(price); + + //setValue(price); + //filterByPrice(price[0], price[1]); + }, [props.currentCatData]); + + const filterByBrand = (keyword) => { + props.filterByBrand(keyword); + }; + + const filterByRating = (keyword) => { + props.filterByRating(parseFloat(keyword)); + }; + + useEffect(() => { + filterByPrice(value[0], value[1]); + }, [value]); + + const filterByPrice = (minValue, maxValue) => { + props.filterByPrice(minValue, maxValue); + }; + + return ( + <> +
+
+

Category

+
+ {props.data.length !== 0 && + props.data.map((item, index) => { + return ( + +
+ + + +

+ {item.cat_name} +

+ + {totalLength[index]} +
- - -
-
Filter By Ratings
-
    - - { - ratingsArr.length !== 0 && - ratingsArr.map((item, index) => { - return ( -
  • filterByRating(item)} />} label={item} />
    • - ) - }) - - } -     -
-
- - -
- -
- -
- - - - - -
- - ) -} - -export default Sidebar; \ No newline at end of file + + ); + })} +
+
+ +
+

Fill by price

+ + + +
+ + From: Rs: {value[0]} + + + From: Rs: {value[1]} + +
+ +
+
Filter By Brand
+ +
    + + {brandFilters.length !== 0 && + brandFilters.map((item, index) => { + return ( +
  • + {' '} + filterByBrand(item)} /> + } + label={item} + /> +
    • + ); + })} +     +
+
+ +
+
Filter By Ratings
+
    + + {ratingsArr.length !== 0 && + ratingsArr.map((item, index) => { + return ( +
  • + {' '} + filterByRating(item)} /> + } + label={item} + /> +
    • + ); + })} +     +
+
+ +
+ +
+
+ + +
+ + ); +}; + +export default Sidebar; diff --git a/src/components/banners/index.js b/src/components/banners/index.js index bfda5ea..c116853 100644 --- a/src/components/banners/index.js +++ b/src/components/banners/index.js @@ -5,34 +5,32 @@ import Banner3 from '../../assets/images/banner3.jpg'; import './style.css'; -const Banners = ()=>{ - return( -
-
-
-
-
- -
-
- -
-
- -
-
+const Banners = () => { + return ( +
+
+
+
+
+ +
+
-
-
- -
-
+
+
+ +
+
- -
+
+
+
+
- ) -} +
+
+ ); +}; -export default Banners; \ No newline at end of file +export default Banners; diff --git a/src/components/banners/style.css b/src/components/banners/style.css index e90d80c..c6bd1fd 100644 --- a/src/components/banners/style.css +++ b/src/components/banners/style.css @@ -1,4 +1,12 @@ -.bannerSection{padding: 25px 0px; } +.bannerSection { + padding: 25px 0px; +} -.bannerSection .box{overflow: hidden; border-radius: 15px; cursor: pointer;} -.bannerSection .box:hover img{transform: scale(1.1)} \ No newline at end of file +.bannerSection .box { + overflow: hidden; + border-radius: 15px; + cursor: pointer; +} +.bannerSection .box:hover img { + transform: scale(1.1); +} diff --git a/src/components/catSlider/index.js b/src/components/catSlider/index.js index 3d61a28..e6088a0 100644 --- a/src/components/catSlider/index.js +++ b/src/components/catSlider/index.js @@ -1,120 +1,113 @@ -import React, { useEffect, useRef, useState,useContext } from 'react'; -import Slider from "react-slick"; +import React, { useEffect, useRef, useState, useContext } from 'react'; +import Slider from 'react-slick'; import './style.css'; import { Link } from 'react-router-dom'; import { MyContext } from '../../App'; const CatSlider = (props) => { - - const [allData, setAllData] = useState(props.data); - const [totalLength, setTotalLength] = useState([]); - const context = useContext(MyContext); - - const [itemBg, setItemBg] = useState([ - '#fffceb', - '#ecffec', - '#feefea', - '#fff3eb', - '#fff3ff', - '#f2fce4', - '#feefea', - '#fffceb', - '#feefea', - '#ecffec', - '#feefea', - '#fff3eb', - '#fff3ff', - '#f2fce4', - '#feefea', - '#fffceb', - '#feefea', - '#ecffec' - ]); - - const slider = useRef(); - - - var settings = { - dots: false, - infinite: false, - speed: 500, - slidesToShow: 10, - slidesToScroll: 1, - fade: false, - arrows: context.windowWidth>992 ? true : false, - autoplay: context.windowWidth>992 ? 2000 : false, - centerMode: context.windowWidth>992 ? true : false - }; - - - var catLength = 0; - var lengthArr = []; - useEffect(() => { - allData.length !== 0 && - allData.map((item, index) => { - item.items.length !== 0 && - item.items.map((item_) => { - catLength += item_.products.length - }) - lengthArr.push(catLength) - catLength = 0; - }) - - const list = lengthArr.filter((item, index) => lengthArr.indexOf(item) === index); - setTotalLength(list) - - - }, []); - - - return ( - <> -
-
-

Featured Categories

- - - - { - allData.length !== 0 && - allData.map((item, index) => { - return ( -
- -
- -
{item.cat_name}
-

{totalLength[index]} items

-
- - -
- ) - }) - } - - - - - - - - { - // itemBg.length!==0 && itemBg.map((item,index)=>{ - // return( - //
- //
- // - //
Cake & Milk
- //

26 items

- //
- //
- // ) - // }) - } - - - {/*
+ const [allData, setAllData] = useState(props.data); + const [totalLength, setTotalLength] = useState([]); + const context = useContext(MyContext); + + const [itemBg, setItemBg] = useState([ + '#fffceb', + '#ecffec', + '#feefea', + '#fff3eb', + '#fff3ff', + '#f2fce4', + '#feefea', + '#fffceb', + '#feefea', + '#ecffec', + '#feefea', + '#fff3eb', + '#fff3ff', + '#f2fce4', + '#feefea', + '#fffceb', + '#feefea', + '#ecffec' + ]); + + const slider = useRef(); + + var settings = { + dots: false, + infinite: false, + speed: 500, + slidesToShow: 10, + slidesToScroll: 1, + fade: false, + arrows: context.windowWidth > 992 ? true : false, + autoplay: context.windowWidth > 992 ? 2000 : false, + centerMode: context.windowWidth > 992 ? true : false + }; + + var catLength = 0; + var lengthArr = []; + useEffect(() => { + allData.length !== 0 && + allData.map((item, index) => { + item.items.length !== 0 && + item.items.map((item_) => { + catLength += item_.products.length; + }); + lengthArr.push(catLength); + catLength = 0; + }); + + const list = lengthArr.filter( + (item, index) => lengthArr.indexOf(item) === index + ); + setTotalLength(list); + }, []); + + return ( + <> +
+
+

Featured Categories

+ + {allData.length !== 0 && + allData.map((item, index) => { + return ( +
+ +
+ +
+ {item.cat_name} +
+

{totalLength[index]} items

+
+ +
+ ); + })} + + { + // itemBg.length!==0 && itemBg.map((item,index)=>{ + // return( + //
+ //
+ // + //
Cake & Milk
+ //

26 items

+ //
+ //
+ // ) + // }) + } + + {/*
Cake & Milk
@@ -228,16 +221,11 @@ const CatSlider = (props) => {

26 items

*/} - - - -
-
- - - - - ) -} - -export default CatSlider; \ No newline at end of file + +
+
+ + ); +}; + +export default CatSlider; diff --git a/src/components/catSlider/style.css b/src/components/catSlider/style.css index ded9971..648079c 100644 --- a/src/components/catSlider/style.css +++ b/src/components/catSlider/style.css @@ -1,17 +1,66 @@ -.catSliderSection{width: 100%; height: auto; padding: 30px 0px;} -.cat_slider_Main .slick-slide{padding-right: 20px !important;} -.cat_slider_Main .slick-list{padding-left: 25px !important;} -.cat_slider_Main .item{ height: auto; display: flex; align-items: center; justify-content: center; cursor: pointer;padding: 15px 0px; } +.catSliderSection { + width: 100%; + height: auto; + padding: 30px 0px; +} +.cat_slider_Main .slick-slide { + padding-right: 20px !important; +} +.cat_slider_Main .slick-list { + padding-left: 25px !important; +} +.cat_slider_Main .item { + height: auto; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 15px 0px; +} -.cat_slider_Main .item .info{margin: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 15px; transition: all 0.3s ease-in-out; position: relative;} +.cat_slider_Main .item .info { + margin: auto; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 15px; + transition: all 0.3s ease-in-out; + position: relative; +} -.cat_slider_Main .item a{text-decoration: none;} -.cat_slider_Main .item .info h5{font-weight: 600 !important; color: #000 !important; } -.cat_slider_Main .item .info p{font-size: 14px; opacity: 0.8; color: #000 !important; margin-bottom: 0px;} +.cat_slider_Main .item a { + text-decoration: none; +} +.cat_slider_Main .item .info h5 { + font-weight: 600 !important; + color: #000 !important; +} +.cat_slider_Main .item .info p { + font-size: 14px; + opacity: 0.8; + color: #000 !important; + margin-bottom: 0px; +} -.cat_slider_Main .slick-arrow{zoom: 80%;} -.cat_slider_Main .slick-arrow.slick-next{top: -50px !important; right: 15px !important;} +.cat_slider_Main .slick-arrow { + zoom: 80%; +} +.cat_slider_Main .slick-arrow.slick-next { + top: -50px !important; + right: 15px !important; +} -.cat_slider_Main .slick-arrow.slick-prev{top: -50px !important; right: 100px !important; left: inherit !important;} +.cat_slider_Main .slick-arrow.slick-prev { + top: -50px !important; + right: 100px !important; + left: inherit !important; +} -.cat_slider_Main .item:hover .info, .cat_slider_Main .slick-current .info{box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transform: scale(1.1);} +.cat_slider_Main .item:hover .info, +.cat_slider_Main .slick-current .info { + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + transform: scale(1.1); +} diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css index fa6d86a..7978062 100644 --- a/src/components/footer/footer.css +++ b/src/components/footer/footer.css @@ -1,30 +1,105 @@ -.footerWrapper{padding: 45px 0px; width: 100%;} -.footerWrapper .footerBoxes .box{background: #F4F6FA; padding: 25px 25px; border-radius: 15px; } -.footerWrapper .footerBoxes .box .info{padding-left: 25px;} -.footerWrapper .footerBoxes .box img{position: relative; transition: all 0.2s ease-in-out;} -.footerWrapper .footerBoxes .box .info h4{font-size: 25px; font-weight: 600;} -.footerWrapper .footerBoxes .box .info p{margin-bottom: 0px; font-size: 20px; opacity: 0.8; } -.footerWrapper .footerBoxes .box:hover img{transform: translateY(-5px);} +.footerWrapper { + padding: 45px 0px; + width: 100%; +} +.footerWrapper .footerBoxes .box { + background: #f4f6fa; + padding: 25px 25px; + border-radius: 15px; +} +.footerWrapper .footerBoxes .box .info { + padding-left: 25px; +} +.footerWrapper .footerBoxes .box img { + position: relative; + transition: all 0.2s ease-in-out; +} +.footerWrapper .footerBoxes .box .info h4 { + font-size: 25px; + font-weight: 600; +} +.footerWrapper .footerBoxes .box .info p { + margin-bottom: 0px; + font-size: 20px; + opacity: 0.8; +} +.footerWrapper .footerBoxes .box:hover img { + transform: translateY(-5px); +} -footer p, footer a{font-size: 18px;} +footer p, +footer a { + font-size: 18px; +} -footer{padding: 60px 0px; padding-bottom: 0px;} +footer { + padding: 60px 0px; + padding-bottom: 0px; +} -footer .part1 svg{color: #3bb77e !important;} +footer .part1 svg { + color: #3bb77e !important; +} -footer h3{color: #000; font-weight: 600; margin-bottom: 20px;} -footer .part2 ul li{list-style: none; margin-bottom: 13px;} -footer .part2 ul li a{color:#000; opacity: 0.8; font-size: 500; transition: all 0.2s ease-in-out;} -footer .part2 ul li a:hover{text-decoration: none;color: #3bb77e !important; opacity: 1; padding-left: 5px;} +footer h3 { + color: #000; + font-weight: 600; + margin-bottom: 20px; +} +footer .part2 ul li { + list-style: none; + margin-bottom: 13px; +} +footer .part2 ul li a { + color: #000; + opacity: 0.8; + font-size: 500; + transition: all 0.2s ease-in-out; +} +footer .part2 ul li a:hover { + text-decoration: none; + color: #3bb77e !important; + opacity: 1; + padding-left: 5px; +} -footer .lastStrip{padding: 15px 0px;} +footer .lastStrip { + padding: 15px 0px; +} -.phNo svg{ font-size: 45px !important; opacity: 0.8;} -.phNo h3{ font-size:32px !important; line-height: 35px !important;} -.phNo p{ font-size: 16px !important; opacity: 0.8;} +.phNo svg { + font-size: 45px !important; + opacity: 0.8; +} +.phNo h3 { + font-size: 32px !important; + line-height: 35px !important; +} +.phNo p { + font-size: 16px !important; + opacity: 0.8; +} -footer .lastStrip .part3 h5{margin-bottom: 0px;} -footer .lastStrip .part3 ul{margin-bottom: 0px; padding-left: 25px;} -footer .lastStrip .part3 ul li a{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #3bb77e; border-radius: 50%; transition: all 0.2s ease-in-out !important;} -footer .lastStrip .part3 ul li a svg{color: #fff !important;} -footer .lastStrip .part3 ul li a:hover{background:rgb(51, 51, 51);} \ No newline at end of file +footer .lastStrip .part3 h5 { + margin-bottom: 0px; +} +footer .lastStrip .part3 ul { + margin-bottom: 0px; + padding-left: 25px; +} +footer .lastStrip .part3 ul li a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: #3bb77e; + border-radius: 50%; + transition: all 0.2s ease-in-out !important; +} +footer .lastStrip .part3 ul li a svg { + color: #fff !important; +} +footer .lastStrip .part3 ul li a:hover { + background: rgb(51, 51, 51); +} diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js index 47277e5..2405137 100644 --- a/src/components/footer/footer.js +++ b/src/components/footer/footer.js @@ -2,10 +2,10 @@ import React from 'react'; import './footer.css'; import Icon1 from '../../assets/images/icon-1.svg'; -import Icon2 from '../../assets/images/icon-2.svg' -import Icon3 from '../../assets/images/icon-3.svg' -import Icon4 from '../../assets/images/icon-4.svg' -import Icon5 from '../../assets/images/icon-5.svg' +import Icon2 from '../../assets/images/icon-2.svg'; +import Icon3 from '../../assets/images/icon-3.svg'; +import Icon4 from '../../assets/images/icon-4.svg'; +import Icon5 from '../../assets/images/icon-5.svg'; import Logo from '../../assets/images/logo.svg'; import { Link } from 'react-router-dom'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; @@ -24,243 +24,326 @@ import Newsletter from '../../components/newsletter/index'; import NewsletterImg from '../../assets/images/newsletter.png'; const Footer = () => { - const currentYear = new Date().getFullYear(); - return ( - <> - -
-
-
-
-

Stay home & get your daily
needs from our shop

-

Start You'r Daily Shopping with Nest Mart

-

- -
+ const currentYear = new Date().getFullYear(); + return ( + <> +
+
+
+
+

+ Stay home & get your daily
+ needs from our shop +

+

Start You'r Daily Shopping with Nest Mart

+
+
+ +
-
- -
-
+
+ +
+
+
+
+ +
+
+
+
+
+
+ + + +
+

Best prices & offers

+

Orders $50 or more

+
- - -
-
-
-
-
-
- -
-

Best prices & offers

-

Orders $50 or more

-
-
-
- -
-
- -
-

Free delivery

-

Orders $50 or more

-
-
-
- -
-
- -
-

Great daily deal

-

Orders $50 or more

-
-
-
- - -
-
- -
-

Wide assortment

-

Orders $50 or more

-
-
-
- - -
-
- -
-

Easy returns

-

Orders $50 or more

-
-
-
- -
-
+
+ +
+
+ + + +
+

Free delivery

+

Orders $50 or more

+
+
+
+ +
+
+ + + +
+

Great daily deal

+

Orders $50 or more

+
+
+
+ +
+
+ + + +
+

Wide assortment

+

Orders $50 or more

+
+
+
+ +
+
+ + + +
+

Easy returns

+

Orders $50 or more

+
+
+
+
+
+
+ +
+
+
+
+ + + +
+
+

Awesome grocery store website template

+
+ +

+ Address: 5171 W + Campbell Ave undefined Kent, Utah 53127 United States +

+

+ Call Us: (+91) - + 540-025-124553{' '} +

+

+ Email: sale@Nest.com +

+

+ Hours: 10:00 - + 18:00, Mon - Sat +

+
+ +
+
+
+

Company

+
    +
  • + About Us +
    • +
  • + Delivery Information +
    • +
  • + Privacy Policy +
    • +
  • + Terms & Conditions +
    • +
  • + Contact Us +
    • +
  • + Support Center +
    • +
  • + Careers +
    • +
+
+ +
+

Company

+
    +
  • + Account +
    • +
  • + Delivery Information +
    • +
  • + Privacy Policy +
    • +
  • + Terms & Conditions +
    • +
  • + Contact Us +
    • +
  • + Support Center +
    • +
  • + Careers +
    • +
+
+ +
+

Corporate

+
    +
  • + About Us +
    • +
  • + Delivery Information +
    • +
  • + Privacy Policy +
    • +
  • + Terms & Conditions +
    • +
  • + Contact Us +
    • +
  • + Support Center +
    • +
  • + Careers +
    • +
+
+ +
+

Popular

+
    +
  • + About Us +
    • +
  • + Delivery Information +
    • +
  • + Privacy Policy +
    • +
  • + Terms & Conditions +
    • +
  • + Contact Us +
    • +
  • + Support Center +
    • +
  • + Careers +
    • +
+
+
+
+ +
+

Install App

+
+

From App Store or Google Play

+ +
+ + + + + +
+
-
-
-
-
- -

-

Awesome grocery store website template

-
- -

Address: 5171 W Campbell Ave undefined Kent, Utah 53127 United States

-

Call Us: (+91) - 540-025-124553

-

Email: sale@Nest.com

-

Hours: 10:00 - 18:00, Mon - Sat

- -
- - -
-
-
-

Company

-
    -
  • About Us
    • -
  • Delivery Information
    • -
  • Privacy Policy
    • -
  • Terms & Conditions
    • -
  • Contact Us
    • -
  • Support Center
    • -
  • Careers
    • -
-
- -
-

Company

-
    -
  • Account
    • -
  • Delivery Information
    • -
  • Privacy Policy
    • -
  • Terms & Conditions
    • -
  • Contact Us
    • -
  • Support Center
    • -
  • Careers
    • -
-
- - -
-

Corporate

-
    -
  • About Us
    • -
  • Delivery Information
    • -
  • Privacy Policy
    • -
  • Terms & Conditions
    • -
  • Contact Us
    • -
  • Support Center
    • -
  • Careers
    • -
-
- - -
-

Popular

-
    -
  • About Us
    • -
  • Delivery Information
    • -
  • Privacy Policy
    • -
  • Terms & Conditions
    • -
  • Contact Us
    • -
  • Support Center
    • -
  • Careers
    • -
-
-
-
- - -
-

Install App

-
-

From App Store or Google Play

- -
- - -
- -
- -

Secured Payment Gateways

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

© {currentYear}, Nest - HTML Ecommerce Template - All rights reserved

-
- -
-
-
- -
-

1900 - 888

-

24/7 Support Center

-
-
- -
- -
-

1900 - 888

-

24/7 Support Center

-
-
-
-
- - -
-
-
Follow Us
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • - -
-
-
-
+

Secured Payment Gateways

+ +
+
+
+ +
+
+

+ © {currentYear}, Nest - HTML Ecommerce Template All rights + reserved +

+
+ +
+
+
+ + + +
+

1900 - 888

+

24/7 Support Center

-
- - +
+ +
+ + + +
+

1900 - 888

+

24/7 Support Center

+
+
+
+
+ +
+
+
Follow Us
+
    +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
  • + + + +
    • +
+
+
- - ) -} +
+ +
+ + ); +}; export default Footer; diff --git a/src/components/header/header.css b/src/components/header/header.css index de38c34..8554482 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -1,35 +1,156 @@ -header{width: 100%; height:auto; margin: auto; padding: 30px 0px; background: #fff;} -.headerWrapper{transition: all 0.3s ease-in-out; background: #fff; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000;} -.headerWrapper.fixed{ top: -126px; } -header .headerSearch{width: 100%; height: 60px; border: 1px solid #bce3c9; padding: 10px 20px; border-radius: 4px; } -header .headerSearch .selectDropWrapper{width: 23%; font-size: 16px; font-weight: 500; position: relative;} -header .headerSearch .selectDropWrapper:after{content: ''; width: 1px; height: 30px; background: rgba(0,0,0,0.2); position: absolute; top: 5px; right: 0px;} -header .headerSearch .search{width:87%; padding-left: 30px; position: relative;} -header .headerSearch .search input{width: 100%; height: 50px; border: 0px; outline: none !important; font-size: 18px;} -header .headerSearch .search .searchIcon{position: absolute; top: 12px; right:0px; opacity: 0.5; font-size: 30px !important;} +header { + width: 100%; + height: auto; + margin: auto; + padding: 30px 0px; + background: #fff; +} +.headerWrapper { + transition: all 0.3s ease-in-out; + background: #fff; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 1000; +} +.headerWrapper.fixed { + top: -126px; +} +header .headerSearch { + width: 100%; + height: 60px; + border: 1px solid #bce3c9; + padding: 10px 20px; + border-radius: 4px; +} +header .headerSearch .selectDropWrapper { + width: 23%; + font-size: 16px; + font-weight: 500; + position: relative; +} +header .headerSearch .selectDropWrapper:after { + content: ''; + width: 1px; + height: 30px; + background: rgba(0, 0, 0, 0.2); + position: absolute; + top: 5px; + right: 0px; +} +header .headerSearch .search { + width: 87%; + padding-left: 30px; + position: relative; +} +header .headerSearch .search input { + width: 100%; + height: 50px; + border: 0px; + outline: none !important; + font-size: 18px; +} +header .headerSearch .search .searchIcon { + position: absolute; + top: 12px; + right: 0px; + opacity: 0.5; + font-size: 30px !important; +} -.afterHeader{margin-top: 210px;} +.afterHeader { + margin-top: 210px; +} +header .countryWrapper .selectDropWrapper { + width: 200px !important; + height: 50px; + padding-left: 10px; + display: flex; + align-items: center; + border: 1px solid #ececec; + -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05); + box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05); +} +header .countryWrapper .selectDropWrapper .openSelect { + width: 100%; + font-weight: 600; +} +header .countryWrapper .selectDropWrapper .selectDrop { + left: 0px !important; +} +header .countryWrapper .openSelect { + color: #279a65 !important ; +} -header .countryWrapper .selectDropWrapper{width: 200px !important; height: 50px; padding-left: 10px; display: flex; align-items: center; border: 1px solid #ececec; - -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05); - box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);} -header .countryWrapper .selectDropWrapper .openSelect{width: 100%; font-weight: 600;} -header .countryWrapper .selectDropWrapper .selectDrop{left:0px !important;} -header .countryWrapper .openSelect{color:#279a65 !important ;} +header .headerTabs { + padding-left: 40px; +} +header .headerTabs li { + position: relative; + margin-left: 20px; +} +header .headerTabs li span { + font-size: 20px; + cursor: pointer; + text-decoration: none; +} +header .headerTabs li span:hover { + text-decoration: none; +} +header .headerTabs li span * { + color: #000; +} +header .headerTabs li span img { + margin-right: 10px; +} +header .headerTabs li span.badge { + width: 28px; + height: 28px; + color: #fff; + font-weight: 400; + position: absolute; + top: -16px; + left: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px !important; +} +.dropdownMenu { + position: absolute; + top: 40px; + right: 0px; + width: 200px; + height: auto; + background: #fff; + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + padding: 10px 0px; + z-index: 100; +} +.dropdownMenu li { + width: 100% !important; + list-style: none; + margin: 0px !important; +} +.dropdownMenu li button { + width: 100% !important; + text-align: left !important; + justify-content: flex-start !important; + color: rgba(0, 0, 0, 0.7) !important; + text-transform: capitalize !important; + font-size: 18px !important; + padding: 12px 15px !important; +} -header .headerTabs{padding-left: 40px;} -header .headerTabs li{position: relative; margin-left: 20px;} -header .headerTabs li span{font-size: 20px; cursor: pointer; text-decoration: none;} -header .headerTabs li span:hover{text-decoration: none;} -header .headerTabs li span *{color: #000;} -header .headerTabs li span img{margin-right: 10px;} -header .headerTabs li span.badge{width: 28px; height:28px; color: #fff; font-weight: 400; position: absolute; top:-16px; left: 10px; display: flex; align-items: center; justify-content: center; font-size: 12px !important;} - -.dropdownMenu{position: absolute; top: 40px; right: 0px; width: 200px; height: auto; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); padding: 10px 0px; z-index: 100;} -.dropdownMenu li{width: 100% !important; list-style: none; margin: 0px !important;} -.dropdownMenu li button{width: 100% !important; text-align: left !important; justify-content: flex-start !important; color: rgba(0,0,0,0.7) !important; text-transform: capitalize !important; font-size: 18px !important; padding: 12px 15px !important;} - -.dropdownMenu li button svg{opacity: 0.7; margin-right: 8px !important;} -.dropdownMenu li button:hover{background: #f1f1f1 !important;} \ No newline at end of file +.dropdownMenu li button svg { + opacity: 0.7; + margin-right: 8px !important; +} +.dropdownMenu li button:hover { + background: #f1f1f1 !important; +} diff --git a/src/components/header/header.js b/src/components/header/header.js index 05e58de..94a6a44 100644 --- a/src/components/header/header.js +++ b/src/components/header/header.js @@ -1,35 +1,35 @@ -import React, { useState, useEffect, useRef } from "react"; -import "../header/header.css"; -import Logo from "../../assets/images/logo.svg"; -import SearchIcon from "@mui/icons-material/Search"; -import Select from "../selectDrop/select"; -import axios from "axios"; -import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined"; -import IconCompare from "../../assets/images/icon-compare.svg"; -import IconHeart from "../../assets/images/icon-heart.svg"; -import IconCart from "../../assets/images/icon-cart.svg"; -import IconUser from "../../assets/images/icon-user.svg"; +import React, { useState, useEffect, useRef } from 'react'; +import '../header/header.css'; +import Logo from '../../assets/images/logo.svg'; +import SearchIcon from '@mui/icons-material/Search'; +import Select from '../selectDrop/select'; +import axios from 'axios'; +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import IconCompare from '../../assets/images/icon-compare.svg'; +import IconHeart from '../../assets/images/icon-heart.svg'; +import IconCart from '../../assets/images/icon-cart.svg'; +import IconUser from '../../assets/images/icon-user.svg'; -import Button from "@mui/material/Button"; -import Person2OutlinedIcon from "@mui/icons-material/Person2Outlined"; -import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined"; -import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; -import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined"; +import Button from '@mui/material/Button'; +import Person2OutlinedIcon from '@mui/icons-material/Person2Outlined'; +import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'; +import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'; +import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined'; -import { ClickAwayListener } from "@mui/base/ClickAwayListener"; +import { ClickAwayListener } from '@mui/base/ClickAwayListener'; -import Nav from "./nav/nav"; -import { Link } from "react-router-dom"; -import { useContext } from "react"; +import Nav from './nav/nav'; +import { Link } from 'react-router-dom'; +import { useContext } from 'react'; -import { MyContext } from "../../App"; -import { useNavigate } from "react-router-dom"; -import MenuIcon from "@mui/icons-material/Menu"; -import FmdGoodOutlinedIcon from "@mui/icons-material/FmdGoodOutlined"; -import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"; -import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined"; -import { Satellite } from "@mui/icons-material"; -import { getDatabase, ref, onValue } from "firebase/database"; +import { MyContext } from '../../App'; +import { useNavigate } from 'react-router-dom'; +import MenuIcon from '@mui/icons-material/Menu'; +import FmdGoodOutlinedIcon from '@mui/icons-material/FmdGoodOutlined'; +import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'; +import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'; +import { Satellite } from '@mui/icons-material'; +import { getDatabase, ref, onValue } from 'firebase/database'; const Header = (props) => { const [isOpenDropDown, setisOpenDropDown] = useState(false); @@ -43,34 +43,34 @@ const Header = (props) => { const headerRef = useRef(); const searchInput = useRef(); - const [profile, setProfile] = useState(""); + const [profile, setProfile] = useState(''); const context = useContext(MyContext); const history = useNavigate(); const [categories, setcategories] = useState([ - "Clothing & beauty", - "Fresh Seafood", - "Pet Foods & Toy", - "Fast food", - "Baking material", - "Vegetables", - "Fresh Fruit", - "Bread and Juice", - "Milks and Dairies", - "Wines & Drinks", - "Clothing & beauty", - "Fresh Seafood", + 'Clothing & beauty', + 'Fresh Seafood', + 'Pet Foods & Toy', + 'Fast food', + 'Baking material', + 'Vegetables', + 'Fresh Fruit', + 'Bread and Juice', + 'Milks and Dairies', + 'Wines & Drinks', + 'Clothing & beauty', + 'Fresh Seafood' ]); const countryList = []; useEffect(() => { - getCountry("https://countriesnow.space/api/v0.1/countries/"); + getCountry('https://countriesnow.space/api/v0.1/countries/'); }, []); useEffect(() => { - setProfile(localStorage.getItem("userImage")); + setProfile(localStorage.getItem('userImage')); }, [context.isLogin]); const getCountry = async (url) => { try { @@ -103,8 +103,8 @@ const Header = (props) => { const signOut = () => { context.signOut(); - localStorage.setItem("userImage", ""); - history("/"); + localStorage.setItem('userImage', ''); + history('/'); }; const openSearch = () => { @@ -115,7 +115,7 @@ const Header = (props) => { const closeSearch = () => { setOpenSearch(false); searchInput.current.blur(); - searchInput.current.value = ""; + searchInput.current.value = ''; }; const openNav = () => { @@ -147,8 +147,8 @@ const Header = (props) => { - -
+ {windowWidth < 992 && ( + <> + {context.isLogin !== 'true' && ( +
+
+ + + +
+ )} + + )} + + -
-
- -
-

1900 - 888

-

24/7 Support Center

-
-
-
- +
+
+ + + +
+

1900 - 888

+

24/7 Support Center

+
- - ) -} + + + + + ); +}; -export default Nav; \ No newline at end of file +export default Nav; diff --git a/src/components/map/Cartmap.js b/src/components/map/Cartmap.js index 3bda433..93c6e95 100644 --- a/src/components/map/Cartmap.js +++ b/src/components/map/Cartmap.js @@ -1,96 +1,96 @@ -import React, { useState, useEffect, useMemo } from "react"; -import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; -import L from "leaflet"; -import "./map.css"; -import Button from "@mui/material/Button"; -import { green } from "@mui/material/colors"; +import React, { useState, useEffect, useMemo } from 'react'; +import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; +import L from 'leaflet'; +import './map.css'; +import Button from '@mui/material/Button'; +import { green } from '@mui/material/colors'; import { useNavigate } from 'react-router-dom'; -const CartMapComponent = ({data }) => { - let navigate = useNavigate(); - const [loading, setLoading] = useState(true); - const [userLocation, setUserLocation] = useState(null); - const [mapBounds, setMapBounds] = useState(null); +const CartMapComponent = ({ data }) => { + let navigate = useNavigate(); + const [loading, setLoading] = useState(true); + const [userLocation, setUserLocation] = useState(null); + const [mapBounds, setMapBounds] = useState(null); - useEffect(() => { - navigator.geolocation.getCurrentPosition( - (position) => { - setUserLocation([position.coords.latitude, position.coords.longitude]); - }, - (error) => { - console.error("Error getting user location:", error); - setLoading(false); - } - ); - }, []); + useEffect(() => { + navigator.geolocation.getCurrentPosition( + (position) => { + setUserLocation([position.coords.latitude, position.coords.longitude]); + }, + (error) => { + console.error('Error getting user location:', error); + setLoading(false); + } + ); + }, []); - useEffect(() => { - if (data) { - // Extracting coordinates from data - const coordinates = data.map(item => item.coordinates); - // Creating LatLngBounds object to include all coordinates - const bounds = L.latLngBounds(coordinates); - setMapBounds(bounds); - setLoading(false); - } - }, [data]); + useEffect(() => { + if (data) { + // Extracting coordinates from data + const coordinates = data.map((item) => item.coordinates); + // Creating LatLngBounds object to include all coordinates + const bounds = L.latLngBounds(coordinates); + setMapBounds(bounds); + setLoading(false); + } + }, [data]); - const handleViewProduct = (productId) => { - navigate(`/product/${productId}`); - }; + const handleViewProduct = (productId) => { + navigate(`/product/${productId}`); + }; - return ( -
- {loading ? ( -
Loading...
- ) : ( - - - {userLocation && ( - - You are here - - )} - {data.map((product) => ( - - -
- Product -

{product.productName}

-

{product.address}

-

Shop: {product.shop_name}

- -
- - - ))} - - )} -
- ); + return ( +
+ {loading ? ( +
Loading...
+ ) : ( + + + {userLocation && ( + + You are here + + )} + {data.map((product) => ( + + +
+ Product +

{product.productName}

+

{product.address}

+

Shop: {product.shop_name}

+ +
+ + + ))} + + )} +
+ ); }; export default CartMapComponent; diff --git a/src/components/map/ITEMmap.js b/src/components/map/ITEMmap.js index f019809..5a5c16f 100644 --- a/src/components/map/ITEMmap.js +++ b/src/components/map/ITEMmap.js @@ -1,13 +1,13 @@ -import React, { useState, useEffect, useMemo } from "react"; -import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; -import L from "leaflet"; -import "./map.css"; -import Button from "@mui/material/Button"; -import { green } from "@mui/material/colors"; +import React, { useState, useEffect, useMemo } from 'react'; +import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; +import L from 'leaflet'; +import './map.css'; +import Button from '@mui/material/Button'; +import { green } from '@mui/material/colors'; import { useNavigate } from 'react-router-dom'; const MapComponent = (props) => { - let navigate = useNavigate(); + let navigate = useNavigate(); const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [userLocation, setUserLocation] = useState(null); @@ -20,7 +20,7 @@ const MapComponent = (props) => { setUserLocation([position.coords.latitude, position.coords.longitude]); }, (error) => { - console.error("Error getting user location:", error); + console.error('Error getting user location:', error); setLoading(false); } ); @@ -42,7 +42,7 @@ const MapComponent = (props) => { const data = await props.data; ////console.log(data.length , data) // only when there is one item or viewing the product details - if (typeof props.data === "object" && !Array.isArray(props.data)) { + if (typeof props.data === 'object' && !Array.isArray(props.data)) { // //console.log("one item") setProducts([props.data]); // Wrap the single object in an array setLoading(false); @@ -52,9 +52,9 @@ const MapComponent = (props) => { const groceriesProducts = data.filter( (item) => - item.parentCatName === "Electronics" || - item.parentCatName === "groceries" || - item.parentCatName === "Fashion" + item.parentCatName === 'Electronics' || + item.parentCatName === 'groceries' || + item.parentCatName === 'Fashion' ); if (groceriesProducts.length > 0) { @@ -80,11 +80,11 @@ const MapComponent = (props) => { setLoading(false); calculateBounds(top50Products); } else { - console.error("No groceries products found"); + console.error('No groceries products found'); setLoading(false); } } catch (error) { - console.error("Error fetching data:", error); + console.error('Error fetching data:', error); setLoading(false); } }; @@ -105,7 +105,7 @@ const MapComponent = (props) => { scrollWheelZoom={false} key={key} zoom={4} - style={{ height: "100vh", width: "100%" }} + style={{ height: '100vh', width: '100%' }} center={userLocation} bounds={mapBounds} > @@ -115,9 +115,9 @@ const MapComponent = (props) => { position={userLocation} icon={L.icon({ iconUrl: - "https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png", + 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', iconSize: [25, 41], - iconAnchor: [12, 41], + iconAnchor: [12, 41] })} > You are here @@ -125,41 +125,43 @@ const MapComponent = (props) => { )} {products.map((product) => { const [lat, lng] = product.coordinates; - const distance = L.latLng(lat, lng).distanceTo(L.latLng(userLocation)); + const distance = L.latLng(lat, lng).distanceTo( + L.latLng(userLocation) + ); const distanceInKm = (distance / 1000).toFixed(2); - return( - - -
- Product -

{product.productName}

-

{product.address}

-

Shop: {product.shop_name}

-

Distance from you: {distanceInKm} km

- -
- - - )})} + return ( + + +
+ Product +

{product.productName}

+

{product.address}

+

Shop: {product.shop_name}

+

Distance from you: {distanceInKm} km

+ +
+ + + ); + })} ), [key, userLocation, mapBounds, products] ); - -const handleViewProduct = (productId) => { + const handleViewProduct = (productId) => { navigate(`/product/${productId}`); -}; + }; return (
@@ -172,4 +174,4 @@ const handleViewProduct = (productId) => { ); }; -export default MapComponent; \ No newline at end of file +export default MapComponent; diff --git a/src/components/map/map.css b/src/components/map/map.css index 92afff7..b85cee8 100644 --- a/src/components/map/map.css +++ b/src/components/map/map.css @@ -1,19 +1,19 @@ .map-container { - position: relative; + position: relative; } .loading-screen { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - color: #333; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + color: #333; } /* Adjust map size for smaller screens */ @media screen and (max-width: 768px) { - .map-container { - height: 90vh; - } -} \ No newline at end of file + .map-container { + height: 90vh; + } +} diff --git a/src/components/newsletter/index.js b/src/components/newsletter/index.js index 7f52dba..2fd2e90 100644 --- a/src/components/newsletter/index.js +++ b/src/components/newsletter/index.js @@ -4,13 +4,13 @@ import SendOutlinedIcon from '@mui/icons-material/SendOutlined'; import { Button } from '@mui/material'; const Newsletter = () => { - return ( -
- - - -
- ) -} + return ( +
+ + + +
+ ); +}; -export default Newsletter; \ No newline at end of file +export default Newsletter; diff --git a/src/components/newsletter/style.css b/src/components/newsletter/style.css index 5b01519..efbd4c0 100644 --- a/src/components/newsletter/style.css +++ b/src/components/newsletter/style.css @@ -1,13 +1,43 @@ - .newsLetterBanner{width: 600px; height: 80px; position: absolute; bottom: 150px; left:9%; z-index: 10;} +.newsLetterBanner { + width: 600px; + height: 80px; + position: absolute; + bottom: 150px; + left: 9%; + z-index: 10; +} - .newsLetterBanner input{width: 100%; height: 100%; background: #fff; border-radius:60px ; border: 0px; outline: none !important; padding-left: 80px; font-size: 20px; padding-right: 200px;} +.newsLetterBanner input { + width: 100%; + height: 100%; + background: #fff; + border-radius: 60px; + border: 0px; + outline: none !important; + padding-left: 80px; + font-size: 20px; + padding-right: 200px; +} -.newsLetterBanner button{padding: 10px 50px !important; border-radius: 50px !important; color: #fff !important; position: absolute; top: 0px; right: 0px; height: 80px !important; font-size: 20px !important; text-transform: capitalize !important; font-weight: 400 !important;} - - .newsLetterBanner svg{position: absolute; - top: 27px; - left: 35px; - z-index: 10; - font-size: 30px !important; - transform: rotate(-21deg); opacity: 0.5;} +.newsLetterBanner button { + padding: 10px 50px !important; + border-radius: 50px !important; + color: #fff !important; + position: absolute; + top: 0px; + right: 0px; + height: 80px !important; + font-size: 20px !important; + text-transform: capitalize !important; + font-weight: 400 !important; +} +.newsLetterBanner svg { + position: absolute; + top: 27px; + left: 35px; + z-index: 10; + font-size: 30px !important; + transform: rotate(-21deg); + opacity: 0.5; +} diff --git a/src/components/product/index.js b/src/components/product/index.js index 2b820f6..f211884 100644 --- a/src/components/product/index.js +++ b/src/components/product/index.js @@ -1,12 +1,12 @@ -import React, { useEffect, useState, useContext } from "react"; -import "./style.css"; -import Rating from "@mui/material/Rating"; -import { Button } from "@mui/material"; -import { Link } from "react-router-dom"; -import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined"; -import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined"; -import CompareArrowsOutlinedIcon from "@mui/icons-material/CompareArrowsOutlined"; -import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined"; +import React, { useEffect, useState, useContext } from 'react'; +import './style.css'; +import Rating from '@mui/material/Rating'; +import { Button } from '@mui/material'; +import { Link } from 'react-router-dom'; +import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'; +import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'; +import CompareArrowsOutlinedIcon from '@mui/icons-material/CompareArrowsOutlined'; +import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined'; import { getDatabase, ref, @@ -14,12 +14,12 @@ import { set, push, child, - remove, -} from "firebase/database"; + remove +} from 'firebase/database'; -import { MyContext } from "../../App"; -import { db } from "../../firebase"; -import { doc, setDoc } from "firebase/firestore"; +import { MyContext } from '../../App'; +import { db } from '../../firebase'; +import { doc, setDoc } from 'firebase/firestore'; const Product = (props) => { const [productData, setProductData] = useState(); @@ -34,8 +34,8 @@ const Product = (props) => { }, [props.item]); const setProductCat = () => { - sessionStorage.setItem("parentCat", productData.parentCatName); - sessionStorage.setItem("subCatName", productData.subCatName); + sessionStorage.setItem('parentCat', productData.parentCatName); + sessionStorage.setItem('subCatName', productData.subCatName); }; ////console.log(productData); //printing1000 data @@ -46,7 +46,7 @@ const Product = (props) => { setUserLocation([position.coords.latitude, position.coords.longitude]); }, (error) => { - console.error("Error getting user location:", error); + console.error('Error getting user location:', error); } ); }, [context.isLogin]); @@ -100,28 +100,28 @@ const Product = (props) => { const addToCart = async (item) => { try { - const user = localStorage.getItem("uid"); - const cartRef = doc(db, "carts", user); - const productRef = doc(cartRef, "products", `${item.id}`); + const user = localStorage.getItem('uid'); + const cartRef = doc(db, 'carts', user); + const productRef = doc(cartRef, 'products', `${item.id}`); await setDoc(productRef, { ...item, quantity: 1 }); setIsadded(true); context.fetchCartProducts(); } catch (error) { - console.error("Error adding item to cart:", error); + console.error('Error adding item to cart:', error); } }; const addToWishlist = async (item) => { - console.log("addToWishlist"); + console.log('addToWishlist'); try { - const user = localStorage.getItem("uid"); - const wishlistRef = doc(db, "wishlists", user); - const productRef = doc(wishlistRef, "products", `${item.id}`); + const user = localStorage.getItem('uid'); + const wishlistRef = doc(db, 'wishlists', user); + const productRef = doc(wishlistRef, 'products', `${item.id}`); await setDoc(productRef, { ...item, quantity: 1 }); setIsadded(true); context.fetchWishlistProducts(); } catch (error) { - console.error("Error adding item to wishlist:", error); + console.error('Error adding item to wishlist:', error); } }; @@ -141,7 +141,7 @@ const Product = (props) => {
@@ -174,7 +174,7 @@ const Product = (props) => {
{productData.brand}

- {productData.productName.substr(0, 50) + "..."} + {productData.productName.substr(0, 50) + '...'}

{
Rs {productData.price} - {" "} + {' '} Rs {productData.oldPrice} @@ -204,7 +204,7 @@ const Product = (props) => { onClick={() => addToCart(productData)} > - {isAdded === true ? "Added" : "Add"} + {isAdded === true ? 'Added' : 'Add'}
diff --git a/src/components/product/style.css b/src/components/product/style.css index 8a4c23e..52cfa9e 100644 --- a/src/components/product/style.css +++ b/src/components/product/style.css @@ -1,40 +1,137 @@ -.productThumb{width: 100%; height: auto; border: 1px solid rgba(0,0,0,0.1); overflow: hidden; border-radius: 15px; padding:25px; transition: all 0.3s ease-in-out; position: relative;} +.productThumb { + width: 100%; + height: auto; + border: 1px solid rgba(0, 0, 0, 0.1); + overflow: hidden; + border-radius: 15px; + padding: 25px; + transition: all 0.3s ease-in-out; + position: relative; +} -.productThumb .badge{position: absolute; top: 0px; left: 0px; display: inline-block; -background: red; z-index: 10; color: #fff; padding: 10px 25px; font-size: 16px; -border-bottom-right-radius: 50px; border-top-left-radius: 5px; text-transform: capitalize;} +.productThumb .badge { + position: absolute; + top: 0px; + left: 0px; + display: inline-block; + background: red; + z-index: 10; + color: #fff; + padding: 10px 25px; + font-size: 16px; + border-bottom-right-radius: 50px; + border-top-left-radius: 5px; + text-transform: capitalize; +} -.productThumb .badge.hot{background: #f74b81 !important;} -.productThumb .badge.sale{background: #67bcee !important;} -.productThumb .badge.new{background: #3BB77E !important;} -.productThumb .badge.best{background: #f59758 !important;} +.productThumb .badge.hot { + background: #f74b81 !important; +} +.productThumb .badge.sale { + background: #67bcee !important; +} +.productThumb .badge.new { + background: #3bb77e !important; +} +.productThumb .badge.best { + background: #f59758 !important; +} -.productThumb:hover{box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);} +.productThumb:hover { + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); +} -.productThumb .imgWrapper{width: 100%; overflow: hidden; position: relative;} -.productThumb .imgWrapper .wrapper{height: 350px; overflow: hidden;} -.productThumb .imgWrapper img{ transition: all 0.3s ease-in-out; } +.productThumb .imgWrapper { + width: 100%; + overflow: hidden; + position: relative; +} +.productThumb .imgWrapper .wrapper { + height: 350px; + overflow: hidden; +} +.productThumb .imgWrapper img { + transition: all 0.3s ease-in-out; +} -.productThumb .imgWrapper .overlay{position: absolute; top:0px; left: 0px; width: 100%; height: 100%; padding: 25px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.8); } +.productThumb .imgWrapper .overlay { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + padding: 25px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transform: scale(0.8); +} -.productThumb:hover .imgWrapper .overlay{opacity: 1; transform: scale(1); } +.productThumb:hover .imgWrapper .overlay { + opacity: 1; + transform: scale(1); +} -.productThumb .imgWrapper .overlay ul{background: #fff; width: 140px; height: auto; border-radius: 10px; border: 1px solid #BCE3C9; } -.productThumb .imgWrapper .overlay ul li{margin-right: 0px !important;} -.productThumb .imgWrapper .overlay ul li a{display: block; padding: 10px; border-right: 1px solid #BCE3C9;} -.productThumb .imgWrapper .overlay ul li a svg{color: #3bb77e !important;} -.productThumb .imgWrapper .overlay ul li a:hover svg{color: #000 !important; opacity: 0.7;} - +.productThumb .imgWrapper .overlay ul { + background: #fff; + width: 140px; + height: auto; + border-radius: 10px; + border: 1px solid #bce3c9; +} +.productThumb .imgWrapper .overlay ul li { + margin-right: 0px !important; +} +.productThumb .imgWrapper .overlay ul li a { + display: block; + padding: 10px; + border-right: 1px solid #bce3c9; +} +.productThumb .imgWrapper .overlay ul li a svg { + color: #3bb77e !important; +} +.productThumb .imgWrapper .overlay ul li a:hover svg { + color: #000 !important; + opacity: 0.7; +} -.productThumb:hover .imgWrapper img{transform: scale(1.1);} +.productThumb:hover .imgWrapper img { + transform: scale(1.1); +} -.productThumb .catName{color: #000; opacity: 0.8; font-size: 14px;} -.productThumb .title{margin: 10px 0px;} -.productThumb .title a{color: #000; font-weight: 600; font-size: 22px; text-decoration: none; line-height: 22px;} -.productThumb .brand{color: rgba(0,0,0,0.6);} -.productThumb .brand a{text-decoration: none;} - -.productThumb button{font-size: 20px !important; color: #3bb77e !important; padding: 5px 25px !important; background: #def9ec !important; text-transform: capitalize !important;} -.productThumb button:hover{background: #3bb77e !important; - color: #fff !important;} +.productThumb .catName { + color: #000; + opacity: 0.8; + font-size: 14px; +} +.productThumb .title { + margin: 10px 0px; +} +.productThumb .title a { + color: #000; + font-weight: 600; + font-size: 22px; + text-decoration: none; + line-height: 22px; +} +.productThumb .brand { + color: rgba(0, 0, 0, 0.6); +} +.productThumb .brand a { + text-decoration: none; +} +.productThumb button { + font-size: 20px !important; + color: #3bb77e !important; + padding: 5px 25px !important; + background: #def9ec !important; + text-transform: capitalize !important; +} +.productThumb button:hover { + background: #3bb77e !important; + color: #fff !important; +} diff --git a/src/components/quantityBox/index.js b/src/components/quantityBox/index.js index 7183768..bbc1901 100644 --- a/src/components/quantityBox/index.js +++ b/src/components/quantityBox/index.js @@ -1,14 +1,14 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect } from 'react'; -import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import { db } from "../../firebase"; -import { doc, updateDoc } from "firebase/firestore"; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import { db } from '../../firebase'; +import { doc, updateDoc } from 'firebase/firestore'; const QuantityBox = (props) => { const [inputValue, setinputValue] = useState(props.quantity); const [inputItems, setInputItems] = useState([]); - const uid = localStorage.getItem("uid"); + const uid = localStorage.getItem('uid'); useEffect(() => { setInputItems(props.inputItems); //setinputValue(props.item.quantity) @@ -18,13 +18,13 @@ const QuantityBox = (props) => { props.updateInfo(items); }; const updateDb = async (uid, itemId, newData) => { - const itemRef = doc(db, props.name, uid, "products", itemId); + const itemRef = doc(db, props.name, uid, 'products', itemId); try { await updateDoc(itemRef, newData); - console.log("item updated successfully."); + console.log('item updated successfully.'); } catch (error) { - console.error("Error updating item:", error); + console.error('Error updating item:', error); } }; @@ -73,7 +73,7 @@ const QuantityBox = (props) => { quantity: eachItem.quantity !== 1 ? inputValue - 1 - : eachItem.quantity, + : eachItem.quantity } : { ...eachItem }; }); diff --git a/src/components/selectDrop/select.css b/src/components/selectDrop/select.css index 8842fc5..d8c3e84 100644 --- a/src/components/selectDrop/select.css +++ b/src/components/selectDrop/select.css @@ -1,12 +1,63 @@ -.selectDropWrapper .openSelect{display: block; padding: 10px 0px; position: relative; font-weight: 600; font-size: 18px !important;} -.selectDropWrapper .openSelect .arrow{position: absolute; top: 8px; right: 5px; font-size: 25px;} -.selectDrop{width: 300px; height: auto; background: #fff; position: absolute; top:110%; left: -20px; z-index: 100; - box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - padding: 15px; } -.searchField input{ width: 100%; height: 50px; border: 1px solid #bce3c9; outline: none; padding: 0px 15px;} -.selectDrop .searchResults{width: 100%; margin: 0px; margin-top: 10px; padding: 10px 0px; max-height: 300px; overflow-y: scroll;} -.selectDrop .searchResults::-webkit-scrollbar{width: 10px !important;} -.selectDrop .searchResults::-webkit-scrollbar-thumb{background: #ccc !important;} -.selectDrop .searchResults li{list-style: none; font-size: 17px; width: 100%; padding: 10px; color: rgba(0,0,0,0.7); border-radius: 7px;} -.selectDrop .searchResults li:hover{background: #3bb77e; color: #fff;} -.selectDrop .searchResults li.active{background: #f1f1f1; color: #000 !important;} +.selectDropWrapper .openSelect { + display: block; + padding: 10px 0px; + position: relative; + font-weight: 600; + font-size: 18px !important; +} +.selectDropWrapper .openSelect .arrow { + position: absolute; + top: 8px; + right: 5px; + font-size: 25px; +} +.selectDrop { + width: 300px; + height: auto; + background: #fff; + position: absolute; + top: 110%; + left: -20px; + z-index: 100; + box-shadow: + 0 3px 6px rgba(0, 0, 0, 0.16), + 0 3px 6px rgba(0, 0, 0, 0.23); + padding: 15px; +} +.searchField input { + width: 100%; + height: 50px; + border: 1px solid #bce3c9; + outline: none; + padding: 0px 15px; +} +.selectDrop .searchResults { + width: 100%; + margin: 0px; + margin-top: 10px; + padding: 10px 0px; + max-height: 300px; + overflow-y: scroll; +} +.selectDrop .searchResults::-webkit-scrollbar { + width: 10px !important; +} +.selectDrop .searchResults::-webkit-scrollbar-thumb { + background: #ccc !important; +} +.selectDrop .searchResults li { + list-style: none; + font-size: 17px; + width: 100%; + padding: 10px; + color: rgba(0, 0, 0, 0.7); + border-radius: 7px; +} +.selectDrop .searchResults li:hover { + background: #3bb77e; + color: #fff; +} +.selectDrop .searchResults li.active { + background: #f1f1f1; + color: #000 !important; +} diff --git a/src/components/selectDrop/select.js b/src/components/selectDrop/select.js index a76efd6..1ee2d66 100644 --- a/src/components/selectDrop/select.js +++ b/src/components/selectDrop/select.js @@ -4,72 +4,80 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import { ClickAwayListener } from '@mui/base/ClickAwayListener'; import { FamilyRestroomTwoTone } from '@mui/icons-material'; +const Select = ({ data, placeholder, icon }) => { + const [isOpenSelect, setisOpenSelect] = useState(false); + const [selectedIndex, setselectedIndex] = useState(0); + const [selectedItem, setselectedItem] = useState(placeholder); -const Select = ({data,placeholder, icon}) => { + const [listData, setListData] = useState(data); + const [listData2, setListData2] = useState(data); - const [isOpenSelect, setisOpenSelect] = useState(false); - const [selectedIndex, setselectedIndex] = useState(0); - const [selectedItem, setselectedItem] = useState(placeholder); + const openSelect = () => { + setisOpenSelect(!isOpenSelect); + }; - const [listData, setListData] = useState(data); - const [listData2, setListData2] = useState(data); + const closeSelect = (index, name) => { + setselectedIndex(index); + setisOpenSelect(false); + setselectedItem(name); + }; - const openSelect = () => { - setisOpenSelect(!isOpenSelect); - } + const filterList = (e) => { + const keyword = e.target.value.toLowerCase(); - const closeSelect = (index, name) => { - setselectedIndex(index); - setisOpenSelect(false); - setselectedItem(name); - } + const list = listData2.filter((item) => { + return item.toLowerCase().includes(keyword); + }); - const filterList=(e)=>{ - const keyword = e.target.value.toLowerCase(); - - const list = listData2.filter((item)=>{ - return item.toLowerCase().includes(keyword); - }) + const list2 = list.filter((item, index) => list.indexOf(item) === index); - const list2 = list.filter((item, index) => list.indexOf(item) === index); - - setListData(list2) - - } - - return ( - setisOpenSelect(false)}> -
- {icon} - {selectedItem.length>14 ? selectedItem.substr(0,14)+'...' : selectedItem} - - { - isOpenSelect === true && -
-
- -
-
    -
  • closeSelect(0, placeholder)} className={`${selectedIndex === 0 ? 'active' : ''}`}>{placeholder}
    • - { - - listData.map((item,index)=>{ - - return( -
  • closeSelect(index+1, item)} className={`${selectedIndex === index+1 ? 'active' : ''}`}>{item}
    • - ) - }) - } - - -
-
- } + setListData(list2); + }; + return ( + setisOpenSelect(false)}> +
+ {icon} + + {selectedItem.length > 14 + ? selectedItem.substr(0, 14) + '...' + : selectedItem} + + + {isOpenSelect === true && ( +
+
+
- - - ) -} +
    +
  • closeSelect(0, placeholder)} + className={`${selectedIndex === 0 ? 'active' : ''}`} + > + {placeholder} +
    • + {listData.map((item, index) => { + return ( +
  • closeSelect(index + 1, item)} + className={`${selectedIndex === index + 1 ? 'active' : ''}`} + > + {item} +
    • + ); + })} +
+
+ )} +
+ + ); +}; -export default Select; \ No newline at end of file +export default Select; diff --git a/src/firebase.js b/src/firebase.js index c5aae96..b0b8408 100644 --- a/src/firebase.js +++ b/src/firebase.js @@ -1,21 +1,20 @@ // Import the functions you need from the SDKs you need -import firebase from 'firebase/compat/app' -import { initializeApp } from "firebase/app" +import firebase from 'firebase/compat/app'; +import { initializeApp } from 'firebase/app'; import { getFirestore } from 'firebase/firestore'; -import {getStorage} from "firebase/storage" +import { getStorage } from 'firebase/storage'; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { - apiKey: "AIzaSyAk6hLddPbZ5R7j_LBsFDDSZT64MVHrQjI", - authDomain: "nest-ondc.firebaseapp.com", - projectId: "nest-ondc", - storageBucket: "nest-ondc.appspot.com", - messagingSenderId: "318997633599", - appId: "1:318997633599:web:41937faa0dda917365b68a", - measurementId: "G-26EE7FZZZE" - + apiKey: 'AIzaSyAk6hLddPbZ5R7j_LBsFDDSZT64MVHrQjI', + authDomain: 'nest-ondc.firebaseapp.com', + projectId: 'nest-ondc', + storageBucket: 'nest-ondc.appspot.com', + messagingSenderId: '318997633599', + appId: '1:318997633599:web:41937faa0dda917365b68a', + measurementId: 'G-26EE7FZZZE' }; // Initialize Firebase export const app = initializeApp(firebaseConfig); @@ -24,4 +23,4 @@ export const app = initializeApp(firebaseConfig); const db = getFirestore(app); const storage = getStorage(app); -export {db,storage} +export { db, storage }; diff --git a/src/pages/About/about.css b/src/pages/About/about.css index aa204b5..3684ebb 100644 --- a/src/pages/About/about.css +++ b/src/pages/About/about.css @@ -58,25 +58,43 @@ object-fit: cover !important; } -.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-name { +.container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-name { font-size: 20px; color: #008080; text-align: center; } -.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom { +.container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; } -.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color { +.container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom + > .text-color { font-size: 1.2vw; color: #008080; } -.container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .temp { +.container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom + > .temp { margin-left: 5px; margin-right: 5px; font-size: 30px; @@ -96,7 +114,12 @@ margin: auto; } - .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color { + .container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom + > .text-color { font-size: 20px; } @@ -124,7 +147,12 @@ font-size: 50px; } - .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color { + .container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom + > .text-color { font-size: 24px; } @@ -150,7 +178,12 @@ font-size: 40px; } - .container-grid > .MuiGrid-item-root > .card > .MuiCardContent-root > .card-bottom > .text-color { + .container-grid + > .MuiGrid-item-root + > .card + > .MuiCardContent-root + > .card-bottom + > .text-color { font-size: 20px; } diff --git a/src/pages/About/index.js b/src/pages/About/index.js index 342b7f1..03d42d4 100644 --- a/src/pages/About/index.js +++ b/src/pages/About/index.js @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from "react"; -import "./about.css"; -import axios from "axios"; -import { Card, CardContent, CardMedia, Grid, Typography } from "@mui/material"; +import React, { useEffect, useState } from 'react'; +import './about.css'; +import axios from 'axios'; +import { Card, CardContent, CardMedia, Grid, Typography } from '@mui/material'; function Tes() { const [contributors, setContributors] = useState([]); @@ -10,11 +10,11 @@ function Tes() { async function fetchContributors() { try { const response = await axios.get( - "https://api.github.com/repos/MAVRICK-1/e-commerce_website/contributors" + 'https://api.github.com/repos/MAVRICK-1/e-commerce_website/contributors' ); setContributors(response.data); } catch (error) { - console.error("Error fetching contributors:", error); + console.error('Error fetching contributors:', error); } } diff --git a/src/pages/AddProd/index.js b/src/pages/AddProd/index.js index 65c2ac4..12ba11d 100644 --- a/src/pages/AddProd/index.js +++ b/src/pages/AddProd/index.js @@ -1,9 +1,8 @@ -import React, { useState } from "react"; -import { Typography, Container, Grid, TextField, Button } from "@mui/material"; -import { addDoc, collection } from "firebase/firestore"; -import { db, storage } from "../../firebase"; -import {uploadBytes,getDownloadURL,ref} from "firebase/storage" - +import React, { useState } from 'react'; +import { Typography, Container, Grid, TextField, Button } from '@mui/material'; +import { addDoc, collection } from 'firebase/firestore'; +import { db, storage } from '../../firebase'; +import { uploadBytes, getDownloadURL, ref } from 'firebase/storage'; export default function AddProductForm() { const [formData, setFormData] = useState({ @@ -14,9 +13,9 @@ export default function AddProductForm() { mainImage: '', subsidiaryImages: [], brand: '', - quantityAvailable: '', + quantityAvailable: '' }); - const [isSubmit,setIsSubmit] = useState(false) + const [isSubmit, setIsSubmit] = useState(false); const handleChange = (e) => { setFormData({ ...formData, [e.target.id]: e.target.value }); }; @@ -25,7 +24,7 @@ export default function AddProductForm() { const file = e.target.files[0]; setFormData((prevFields) => ({ ...prevFields, - mainImage: file, + mainImage: file })); }; @@ -33,55 +32,69 @@ export default function AddProductForm() { const file = e.target.files[0]; setFormData((prevFields) => ({ ...prevFields, - subsidiaryImages: file, + subsidiaryImages: file })); }; - const addProd = async (main,sub) => { // funtion to add products data to firestore + const addProd = async (main, sub) => { + // funtion to add products data to firestore try { - await addDoc(collection(db, 'sellers', localStorage.getItem("uid"), 'products'), { - productName: formData.productName, - price: formData.price, - discountPrice: formData.discountPrice, - weightsAvailable: formData.weightsAvailable, - mainImage: main, - subsidiaryImages: sub, - brand: formData.brand, - quantityAvailable: formData.quantityAvailable, - }); + await addDoc( + collection(db, 'sellers', localStorage.getItem('uid'), 'products'), + { + productName: formData.productName, + price: formData.price, + discountPrice: formData.discountPrice, + weightsAvailable: formData.weightsAvailable, + mainImage: main, + subsidiaryImages: sub, + brand: formData.brand, + quantityAvailable: formData.quantityAvailable + } + ); - console.log("product added successfully"); + console.log('product added successfully'); setFormData({ - productName: "", - price: "", - discountPrice: "", - weightsAvailable: "", - mainImage: "", + productName: '', + price: '', + discountPrice: '', + weightsAvailable: '', + mainImage: '', subsidiaryImages: [], - brand: "", - quantityAvailable: "", - }) - alert("Product Added successfully!") + brand: '', + quantityAvailable: '' + }); + alert('Product Added successfully!'); } catch (error) { - console.error("Error adding user: ", error); + console.error('Error adding user: ', error); } }; - const handleSubmit = async () => { - setIsSubmit(true) + const handleSubmit = async () => { + setIsSubmit(true); //Upload the main image to firebase storage and get url - const imageRef = ref(storage, `productImages/${localStorage.getItem("uid")}/${formData.productName}/mainImage`); + const imageRef = ref( + storage, + `productImages/${localStorage.getItem('uid')}/${ + formData.productName + }/mainImage` + ); await uploadBytes(imageRef, formData.mainImage); const imageUrl = await getDownloadURL(imageRef); - + //Upload the subsidiary image to firebase storage and get url - const imageRef1 = ref(storage, `productImages/${localStorage.getItem("uid")}/${formData.productName}/subsidiaryImages`); + const imageRef1 = ref( + storage, + `productImages/${localStorage.getItem('uid')}/${ + formData.productName + }/subsidiaryImages` + ); await uploadBytes(imageRef1, formData.subsidiaryImages); const imageUrl1 = await getDownloadURL(imageRef1); - + //Adding products data to firebase firestore - addProd(imageUrl,imageUrl1) - setIsSubmit(false) + addProd(imageUrl, imageUrl1); + setIsSubmit(false); }; return ( @@ -186,7 +199,7 @@ export default function AddProductForm() { fullWidth placeholder="Enter quantity available" type="number" - inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} + inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} color="success" value={formData.quantityAvailable} onChange={handleChange} @@ -200,7 +213,7 @@ export default function AddProductForm() { fullWidth onClick={handleSubmit} > - {isSubmit?"adding...":"Add Product"} + {isSubmit ? 'adding...' : 'Add Product'} diff --git a/src/pages/Details/index.js b/src/pages/Details/index.js index 838981b..ba9e46f 100644 --- a/src/pages/Details/index.js +++ b/src/pages/Details/index.js @@ -1,18 +1,18 @@ -import React, { useContext } from "react"; -import { Link, useParams } from "react-router-dom"; -import Rating from "@mui/material/Rating"; -import InnerImageZoom from "react-inner-image-zoom"; -import "react-inner-image-zoom/lib/InnerImageZoom/styles.css"; -import Slider from "react-slick"; -import { useRef } from "react"; -import { useState } from "react"; -import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; -import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import { useEffect } from "react"; -import { Button } from "@mui/material"; -import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined"; -import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined"; -import CompareArrowsIcon from "@mui/icons-material/CompareArrows"; +import React, { useContext } from 'react'; +import { Link, useParams } from 'react-router-dom'; +import Rating from '@mui/material/Rating'; +import InnerImageZoom from 'react-inner-image-zoom'; +import 'react-inner-image-zoom/lib/InnerImageZoom/styles.css'; +import Slider from 'react-slick'; +import { useRef } from 'react'; +import { useState } from 'react'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import { useEffect } from 'react'; +import { Button } from '@mui/material'; +import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'; +import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined'; +import CompareArrowsIcon from '@mui/icons-material/CompareArrows'; import { getDatabase, ref, @@ -20,26 +20,26 @@ import { set, push, child, - remove, -} from "firebase/database"; -import Product from "../../components/product"; -import axios from "axios"; -import { MyContext } from "../../App"; -import MapComponent from "../../components/map/ITEMmap"; -import { Email } from "@mui/icons-material"; -import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail"; -import { db } from "../../firebase"; + remove +} from 'firebase/database'; +import Product from '../../components/product'; +import axios from 'axios'; +import { MyContext } from '../../App'; +import MapComponent from '../../components/map/ITEMmap'; +import { Email } from '@mui/icons-material'; +import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail'; +import { db } from '../../firebase'; import { collection, doc, getDocs, setDoc, - deleteDoc, -} from "firebase/firestore"; + deleteDoc +} from 'firebase/firestore'; const DetailsPage = (props) => { const [zoomInage, setZoomImage] = useState( - "https://www.jiomart.com/images/product/original/490000363/maggi-2-minute-masala-noodles-70-g-product-images-o490000363-p490000363-0-202305292130.jpg" + 'https://www.jiomart.com/images/product/original/490000363/maggi-2-minute-masala-noodles-70-g-product-images-o490000363-p490000363-0-202305292130.jpg' ); const [bigImageSize, setBigImageSize] = useState([1500, 1500]); @@ -60,8 +60,8 @@ const DetailsPage = (props) => { const context = useContext(MyContext); const [prodCat, setProdCat] = useState({ - parentCat: sessionStorage.getItem("parentCat"), - subCatName: sessionStorage.getItem("subCatName"), + parentCat: sessionStorage.getItem('parentCat'), + subCatName: sessionStorage.getItem('subCatName') }); const [relatedProducts, setRelatedProducts] = useState([]); @@ -75,11 +75,11 @@ const DetailsPage = (props) => { useState(false); const [reviewFields, setReviewFields] = useState({ - review: "", - userName: "", + review: '', + userName: '', rating: 0.0, productId: 0, - date: "", + date: '' }); const zoomSliderBig = useRef(); @@ -94,7 +94,7 @@ const DetailsPage = (props) => { slidesToShow: 1, slidesToScroll: 1, fade: false, - arrows: false, + arrows: false }; var settings = { @@ -104,7 +104,7 @@ const DetailsPage = (props) => { slidesToShow: 5, slidesToScroll: 1, fade: false, - arrows: context.windowWidth > 992 ? true : false, + arrows: context.windowWidth > 992 ? true : false }; var related = { @@ -114,7 +114,7 @@ const DetailsPage = (props) => { slidesToShow: 4, slidesToScroll: 1, fade: false, - arrows: context.windowWidth > 992 ? true : false, + arrows: context.windowWidth > 992 ? true : false }; const goto = (index) => { @@ -194,14 +194,14 @@ const DetailsPage = (props) => { }, [currentProduct]); const changeInput = (name, value) => { - if (name === "rating") { + if (name === 'rating') { setRating(value); } setReviewFields(() => ({ ...reviewFields, [name]: value, productId: id, - date: new Date().toLocaleString(), + date: new Date().toLocaleString() })); }; @@ -212,15 +212,15 @@ const DetailsPage = (props) => { try { await axios - .post("http://localhost:5000/productReviews", reviewFields) + .post('http://localhost:5000/productReviews', reviewFields) .then((response) => { reviews_Arr.push(response.data); setReviewFields(() => ({ - review: "", - userName: "", + review: '', + userName: '', rating: 0.0, productId: 0, - date: "", + date: '' })); }); } catch (error) { @@ -234,7 +234,7 @@ const DetailsPage = (props) => { const showReviews = async () => { try { await axios - .get("https://mavrick-1.github.io/DataApi/data.json") + .get('https://mavrick-1.github.io/DataApi/data.json') .then((response) => { if (response.data.productReviews.length !== 0) { response.data.productReviews.map((item) => { @@ -255,37 +255,37 @@ const DetailsPage = (props) => { const addToCart = async (item) => { try { - const user = localStorage.getItem("uid"); - const cartRef = doc(db, "carts", user); - const productRef = doc(cartRef, "products", `${item.id}`); + const user = localStorage.getItem('uid'); + const cartRef = doc(db, 'carts', user); + const productRef = doc(cartRef, 'products', `${item.id}`); await setDoc(productRef, { ...item, quantity: 1 }); setIsadded(true); context.setCartCount(context.cartCount + 1); } catch (error) { - console.error("Error adding item to cart:", error); + console.error('Error adding item to cart:', error); } }; const toggleWishlistItem = async (item) => { - console.log("addToWishlist"); + console.log('addToWishlist'); if (!isAlreadyAddedInWishlist) { - console.log("Not isAlreadyAddedInWishlist"); + console.log('Not isAlreadyAddedInWishlist'); try { - const user = localStorage.getItem("uid"); - const wishlistRef = doc(db, "wishlists", user); - const productRef = doc(wishlistRef, "products", `${item.id}`); + const user = localStorage.getItem('uid'); + const wishlistRef = doc(db, 'wishlists', user); + const productRef = doc(wishlistRef, 'products', `${item.id}`); await setDoc(productRef, { ...item, quantity: 1 }); setIsWishlistItemAdded(true); setisAlreadyAddedInWishlist(true); context.setWishlistCount(context.wishlistCount + 1); } catch (error) { - console.error("Error adding item to wishlist:", error); + console.error('Error adding item to wishlist:', error); } } else { - console.log("isAlreadyAddedInWishlist"); + console.log('isAlreadyAddedInWishlist'); - const user = localStorage.getItem("uid"); + const user = localStorage.getItem('uid'); const wishlistItemRef = doc(db, `wishlists/${user}/products/${item.id}`); @@ -293,17 +293,17 @@ const DetailsPage = (props) => { await deleteDoc(wishlistItemRef); setisAlreadyAddedInWishlist(false); context.setWishlistCount(context.wishlistCount - 1); - console.log("Wishlist item deleted successfully."); + console.log('Wishlist item deleted successfully.'); } catch (error) { - console.error("Error deleting wishlist item:", error); + console.error('Error deleting wishlist item:', error); } } }; const fetchCartProducts = async () => { try { - const cartRef = doc(db, "carts", localStorage.getItem("uid")); - const productsCollectionRef = collection(cartRef, "products"); + const cartRef = doc(db, 'carts', localStorage.getItem('uid')); + const productsCollectionRef = collection(cartRef, 'products'); const querySnapshot = await getDocs(productsCollectionRef); querySnapshot.forEach((doc) => { if (parseInt(doc.data()?.id) === parseInt(id)) { @@ -311,14 +311,14 @@ const DetailsPage = (props) => { } }); } catch (error) { - console.error("Error fetching cart products:", error); + console.error('Error fetching cart products:', error); } }; const fetchWishlistProducts = async () => { try { - const wishlistRef = doc(db, "wishlists", localStorage.getItem("uid")); - const productsCollectionRef = collection(wishlistRef, "products"); + const wishlistRef = doc(db, 'wishlists', localStorage.getItem('uid')); + const productsCollectionRef = collection(wishlistRef, 'products'); const querySnapshot = await getDocs(productsCollectionRef); querySnapshot.forEach((doc) => { if (parseInt(doc.data()?.id) === parseInt(id)) { @@ -326,25 +326,25 @@ const DetailsPage = (props) => { } }); } catch (error) { - console.error("Error fetching wishlist products:", error); + console.error('Error fetching wishlist products:', error); } }; const deleteWishlistItem = async (uid, wishlistItemId) => { const wishlistItemRef = doc( db, - "wishlists", + 'wishlists', uid, - "products", + 'products', wishlistItemId ); try { await deleteDoc(wishlistItemRef); fetchWishlistProducts(); - console.log("Wishlist item deleted successfully."); + console.log('Wishlist item deleted successfully.'); } catch (error) { - console.error("Error deleting wishlist item:", error); + console.error('Error deleting wishlist item:', error); } }; @@ -357,8 +357,8 @@ const DetailsPage = (props) => { > {isAdded === true || isAlreadyAddedInCart === true - ? "Added" - : "Add To Cart"} + ? 'Added' + : 'Add To Cart'} )}
@@ -371,41 +371,41 @@ const DetailsPage = (props) => {
  • - Home{" "} + Home{' '}
  • sessionStorage.setItem( - "cat", - prodCat.parentCat.split(" ").join("-").toLowerCase() + 'cat', + prodCat.parentCat.split(' ').join('-').toLowerCase() ) } className="text-capitalize" > {prodCat.parentCat} - {" "} + {' '}
  • sessionStorage.setItem( - "cat", + 'cat', prodCat.subCatName.toLowerCase() ) } className="text-capitalize" > {prodCat.subCatName} - {" "} + {' '}
  • {currentProduct.productName}
@@ -494,7 +494,7 @@ const DetailsPage = (props) => {
  • isActive(index)} > @@ -517,7 +517,7 @@ const DetailsPage = (props) => {
  • isActive(index)} > @@ -540,7 +540,7 @@ const DetailsPage = (props) => {
  • isActive(index)} > @@ -558,25 +558,25 @@ const DetailsPage = (props) => { {context.windowWidth > 992 && ( )}
  • - } - - - } - -
    - -
    - - { -
    -

    {id.split('-').join(' ')}

    -
      -
    • - Home -
      • -
    • - {sessionStorage.getItem('cat')} -
      • - { - props.single === false && -
    • - {id.split('-').join(' ')} -
      • - } -
    -
    - - } - - - -
    -
    -
    - - { - data.length !== 0 && - } - -
    - - -
    - - -
    -

    We found {data.length} items for you!

    -
    -
    - - { - isOpenDropDown !== false && -
      -
    • - -
      • -
    • - -
      • - -
    • - -
      • - -
    • - -
      • -
    - } -
    -
    - - { - isOpenDropDown2 !== false && -
      -
      • -
      • -
      • -
      • -
      • -
    - } -
    -
    -
    - - {/* the map component will go here */} -
    - -
    - -
    - - { - data.length !== 0 && - data.map((item, index) => { - return ( -
    - -
    - ) - }) - } - - -
    - - -
    - -
    + {context.isopenNavigation === false && ( + + )} + + )} + +
    +
    + { +
    +

    {id.split('-').join(' ')}

    +
      +
    • + Home +
      • +
    • + + {sessionStorage.getItem('cat')}{' '} + +
      • + {props.single === false && ( +
    • + + {id.split('-').join(' ')} + +
      • + )} +
    +
    + } + +
    +
    +
    + {data.length !== 0 && ( + + )} +
    + +
    +
    +

    + We found {data.length}{' '} + items for you! +

    +
    +
    + + {isOpenDropDown !== false && ( +
      +
    • + +
      • +
    • + +
      • + +
    • + +
      • + +
    • + +
      • +
    + )}
    - - +
    + + {isOpenDropDown2 !== false && ( +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    + )} +
    +
    -
    - - - ) -} + {/* the map component will go here */} +
    + +
    -export default Listing; \ No newline at end of file +
    + {data.length !== 0 && + data.map((item, index) => { + return ( +
    + +
    + ); + })} +
    +
    +
    +
    • +
    + + + ); +}; + +export default Listing; diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js index 80cea51..64c0873 100644 --- a/src/pages/NotFound/index.js +++ b/src/pages/NotFound/index.js @@ -5,27 +5,29 @@ import { Button } from '@mui/material'; import { Link } from 'react-router-dom'; const NotFound = () => { - return ( -
    -
    -
    - -

    -

    Page Not Found

    -

    The link you clicked may be broken or the page may have been removed. - visit the Homepage or Contact us about the problem

    -
    + return ( +
    +
    +
    + +
    +
    +

    Page Not Found

    +

    + The link you clicked may be broken or the page may have been + removed. visit the Homepage or Contact us about the problem +

    +
    +
    + +
    +
    +
    +
    + ); +}; -
    - -
    - -
    -
    -
    - ) -} - - -export default NotFound; \ No newline at end of file +export default NotFound; diff --git a/src/pages/NotFound/style.css b/src/pages/NotFound/style.css index e21adca..79ee294 100644 --- a/src/pages/NotFound/style.css +++ b/src/pages/NotFound/style.css @@ -1,5 +1,24 @@ -.notFound{width: 100%; height: auto; padding: 45px 0px;} -.notFound .box{width: 50%; height: auto; padding: 100px 30px; text-align: center; margin: auto;} +.notFound { + width: 100%; + height: auto; + padding: 45px 0px; +} +.notFound .box { + width: 50%; + height: auto; + padding: 100px 30px; + text-align: center; + margin: auto; +} -.notFound .box h1{font-size: 60px; font-weight: bold; color: #000; opacity: 0.7;} -.notFound .box p{color: #000; font-size: 20px; margin-top: 25px;} +.notFound .box h1 { + font-size: 60px; + font-weight: bold; + color: #000; + opacity: 0.7; +} +.notFound .box p { + color: #000; + font-size: 20px; + margin-top: 25px; +} diff --git a/src/pages/SellerRegistration/index.js b/src/pages/SellerRegistration/index.js index a1000c1..b5aad55 100644 --- a/src/pages/SellerRegistration/index.js +++ b/src/pages/SellerRegistration/index.js @@ -1,31 +1,31 @@ -import React, { useEffect, useState } from "react"; -import { Typography, Container, Grid, TextField, Button } from "@mui/material"; +import React, { useEffect, useState } from 'react'; +import { Typography, Container, Grid, TextField, Button } from '@mui/material'; //import { getDatabase, ref, push, set, child } from "firebase/database"; -import { useNavigate } from "react-router-dom"; -import { db, storage } from "../../firebase"; -import { doc, getDoc, setDoc } from "firebase/firestore"; -import {uploadBytes,getDownloadURL, ref} from "firebase/storage" +import { useNavigate } from 'react-router-dom'; +import { db, storage } from '../../firebase'; +import { doc, getDoc, setDoc } from 'firebase/firestore'; +import { uploadBytes, getDownloadURL, ref } from 'firebase/storage'; const SellerForm = () => { const navigate = useNavigate(); const [formFields, setFormFields] = useState({ - ownerName: "", - phoneNumber: "", - location: "", - pincode: "", - shopName: "", + ownerName: '', + phoneNumber: '', + location: '', + pincode: '', + shopName: '', shopPhoto: null, - coordinate: [], + coordinate: [] }); - const [isSubmit,setIsSubmit] = useState(false); + const [isSubmit, setIsSubmit] = useState(false); const onChangeField = (e) => { const { name, value } = e.target; setFormFields((prevFields) => ({ ...prevFields, - [name]: value, + [name]: value })); }; @@ -33,7 +33,7 @@ const SellerForm = () => { const file = e.target.files[0]; setFormFields((prevFields) => ({ ...prevFields, - shopPhoto: file, + shopPhoto: file })); }; let postion = []; @@ -47,24 +47,25 @@ const SellerForm = () => { postion = [latitude, longitude]; //console.log("Current latitude:", latitude); //console.log("Current longitude:", longitude); - + // Optionally, you can set the latitude and longitude in the formFields state setFormFields((prevFields) => ({ ...prevFields, - coordinate:postion + coordinate: postion })); }, (error) => { - console.error("Error getting current location:", error.message); + console.error('Error getting current location:', error.message); } ); } else { - console.error("Geolocation is not supported by this browser."); + console.error('Geolocation is not supported by this browser.'); } }; - const addUser = async (userId,photo) => { // funtion to add sellers data to firestore + const addUser = async (userId, photo) => { + // funtion to add sellers data to firestore try { - await setDoc(doc(db, "sellers", userId), { + await setDoc(doc(db, 'sellers', userId), { uid: userId, ownerName: formFields.ownerName, phoneNumber: formFields.phoneNumber, @@ -72,22 +73,23 @@ const SellerForm = () => { pincode: formFields.pincode, shopName: formFields.shopName, shopPhoto: photo, - coordinate: formFields.coordinate , + coordinate: formFields.coordinate }); - console.log("User added successfully"); - navigate("/addProduct"); + console.log('User added successfully'); + navigate('/addProduct'); } catch (error) { - console.error("Error adding user: ", error); + console.error('Error adding user: ', error); } }; - const checkUserInSellers = async (userId) => { // funtion to check seller is already exists or not in firestore + const checkUserInSellers = async (userId) => { + // funtion to check seller is already exists or not in firestore try { const sellerDocRef = doc(db, 'sellers', userId); const sellerDocSnapshot = await getDoc(sellerDocRef); if (sellerDocSnapshot.exists()) { console.log('User data exists in sellers collection'); - navigate("/addProduct") + navigate('/addProduct'); } else { console.log('User data does not exist in sellers collection'); } @@ -97,28 +99,31 @@ const SellerForm = () => { }; const handleSubmit = async (e) => { e.preventDefault(); - setIsSubmit(true) + setIsSubmit(true); // Generate a unique key - const uniqueKey = localStorage.getItem("uid"); - + const uniqueKey = localStorage.getItem('uid'); + //Upload the shop photo image to firebase storage and get url - const imageRef = ref(storage, `sellerImages/${localStorage.getItem("uid")}/shopPhoto`); + const imageRef = ref( + storage, + `sellerImages/${localStorage.getItem('uid')}/shopPhoto` + ); await uploadBytes(imageRef, formFields.shopPhoto); const imageUrl = await getDownloadURL(imageRef); //Adding seller data to firebase firestore - addUser(uniqueKey,imageUrl); + addUser(uniqueKey, imageUrl); - setIsSubmit(false) + setIsSubmit(false); }; - useEffect(()=>{ - checkUserInSellers(localStorage.getItem("uid")) - },[]) + useEffect(() => { + checkUserInSellers(localStorage.getItem('uid')); + }, []); return ( @@ -203,7 +208,7 @@ const SellerForm = () => { color="success" // Change color to success fullWidth > - {isSubmit?"Registering...":"Register"} + {isSubmit ? 'Registering...' : 'Register'} diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js index 02b5dcf..fcf80e5 100644 --- a/src/pages/SignIn/index.js +++ b/src/pages/SignIn/index.js @@ -1,26 +1,26 @@ -import React, { useState, useContext } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import "./style.css"; -import Box from "@mui/material/Box"; -import TextField from "@mui/material/TextField"; -import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined"; -import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined"; -import { Button, Snackbar, Typography } from "@mui/material"; +import React, { useState, useContext } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import './style.css'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; +import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; +import { Button, Snackbar, Typography } from '@mui/material'; import { getAuth, signInWithEmailAndPassword, GoogleAuthProvider, signInWithPopup, - sendPasswordResetEmail, -} from "firebase/auth"; -import { app } from "../../firebase"; -import Backdrop from "@mui/material/Backdrop"; -import CircularProgress from "@mui/material/CircularProgress"; -import { MyContext } from "../../App"; -import GoogleImg from "../../assets/images/google.png"; -import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail"; -import { useDispatch } from "react-redux"; -import { logIn } from "../../Redux/auth-slice"; + sendPasswordResetEmail +} from 'firebase/auth'; +import { app } from '../../firebase'; +import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; +import { MyContext } from '../../App'; +import GoogleImg from '../../assets/images/google.png'; +import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail'; +import { useDispatch } from 'react-redux'; +import { logIn } from '../../Redux/auth-slice'; const auth = getAuth(app); const googleProvider = new GoogleAuthProvider(); @@ -28,10 +28,10 @@ const SignIn = () => { const [showPassword, setShowPassword] = useState(false); const [showLoader, setShowLoader] = useState(false); const [formFields, setFormFields] = useState({ - email: "", - password: "", + email: '', + password: '' }); - const [error, setError] = useState(""); + const [error, setError] = useState(''); const context = useContext(MyContext); const history = useNavigate(); const [snackbarOpen, setSnackbarOpen] = useState(false); @@ -39,25 +39,23 @@ const SignIn = () => { const [isDisabled, setIsDisabled] = useState(true); const [inputErrors, setInputErrors] = useState({ - email: "", - password: "", + email: '', + password: '' }); - const checkInputs = (email, password) => { - if (email.trim() !== '' && password.trim() !== ''){ + if (email.trim() !== '' && password.trim() !== '') { setIsDisabled(false); - }else { + } else { setIsDisabled(true); } }; - const dispatch = useDispatch() - + const dispatch = useDispatch(); function replaceSpecialCharacters(inputString) { // Use a regular expression to replace special characters with underscore _ - const replacedString = inputString.replace(/[#$\[\].]/g, "_"); + const replacedString = inputString.replace(/[#$\[\].]/g, '_'); return replacedString; } @@ -79,23 +77,21 @@ const SignIn = () => { let errors = { ...inputErrors }; // Validate email - if (name === "email") { - errors.email = !validateEmail(value) ? "Invalid email address" : ""; + if (name === 'email') { + errors.email = !validateEmail(value) ? 'Invalid email address' : ''; } // Validate password - if (name === "password") { - errors.password = !validatePassword(value) ? "Password is required" : ""; + if (name === 'password') { + errors.password = !validatePassword(value) ? 'Password is required' : ''; } setInputErrors(errors); setFormFields((prevFormFields) => ({ ...prevFormFields, - [name]: value, + [name]: value })); - checkInputs(formFields.email, formFields.password,value); - - + checkInputs(formFields.email, formFields.password, value); }; const signIn = () => { @@ -105,19 +101,19 @@ const SignIn = () => { const user = userCredential.user; setShowLoader(false); setFormFields({ - email: "", - password: "", + email: '', + password: '' }); - localStorage.setItem("isLogin", true); + localStorage.setItem('isLogin', true); const udata = replaceSpecialCharacters(user.email); - localStorage.setItem("user", udata); + localStorage.setItem('user', udata); context.signIn(); - dispatch(logIn({email:user.email})) + dispatch(logIn({ email: user.email })); setLoggedInUseEmail(user.email); - localStorage.setItem("uid", userCredential.user.uid); - localStorage.setItem("userImage","") + localStorage.setItem('uid', userCredential.user.uid); + localStorage.setItem('userImage', ''); //console.log(loggedInUserEmail); - history("/"); + history('/'); }) .catch((error) => { setShowLoader(false); @@ -131,15 +127,15 @@ const SignIn = () => { signInWithPopup(auth, googleProvider) .then((result) => { setShowLoader(false); - localStorage.setItem("isLogin", true); + localStorage.setItem('isLogin', true); const udata = replaceSpecialCharacters(result.user.email); - localStorage.setItem("user", udata); - localStorage.setItem("uid", result.user.uid); + localStorage.setItem('user', udata); + localStorage.setItem('uid', result.user.uid); context.signIn(); setLoggedInUseEmail(udata); - localStorage.setItem("userImage",result.user.photoURL) + localStorage.setItem('userImage', result.user.photoURL); //console.log(loggedInUserEmail); - history("/"); + history('/'); }) .catch((error) => { setShowLoader(false); @@ -178,7 +174,7 @@ const SignIn = () => {
    theme.zIndex.drawer + 1 }} + sx={{ color: '#000', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={showLoader} className="formLoader" > @@ -202,7 +198,7 @@ const SignIn = () => { {inputErrors.email && ( {inputErrors.email} @@ -212,7 +208,7 @@ const SignIn = () => {
    { {inputErrors.password && ( {inputErrors.password} @@ -276,7 +272,7 @@ const SignIn = () => {

    - Don't have an account?{" "} + Don't have an account?{' '} Sign Up diff --git a/src/pages/SignIn/style.css b/src/pages/SignIn/style.css index 774c120..337fd0d 100644 --- a/src/pages/SignIn/style.css +++ b/src/pages/SignIn/style.css @@ -1,4 +1,4 @@ -*{ +* { box-sizing: border-box; } .loginWrapper { @@ -66,17 +66,17 @@ } @media (max-width: 586px) { - .loginWrapper { - padding: 75px 0px; - background: #f1f1f1; - height: auto; - } - .loginWrapper .card { - width: 650px; - margin: auto; - height: auto; - padding: 40px; - border: 0px !important; - height: auto; - } -} \ No newline at end of file + .loginWrapper { + padding: 75px 0px; + background: #f1f1f1; + height: auto; + } + .loginWrapper .card { + width: 650px; + margin: auto; + height: auto; + padding: 40px; + border: 0px !important; + height: auto; + } +} diff --git a/src/pages/SignUp/index.js b/src/pages/SignUp/index.js index 93a7f3d..4240753 100644 --- a/src/pages/SignUp/index.js +++ b/src/pages/SignUp/index.js @@ -1,10 +1,10 @@ -import React, { useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import "../SignIn/style.css"; -import Box from "@mui/material/Box"; -import TextField from "@mui/material/TextField"; -import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined"; -import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined"; +import React, { useState } from 'react'; +import { Link, useNavigate } from 'react-router-dom'; +import '../SignIn/style.css'; +import Box from '@mui/material/Box'; +import TextField from '@mui/material/TextField'; +import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; import { Button, Snackbar, @@ -13,12 +13,12 @@ import { DialogContentText, DialogTitle, DialogActions, - Typography, -} from "@mui/material"; -import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"; -import { app } from "../../firebase"; -import Backdrop from "@mui/material/Backdrop"; -import CircularProgress from "@mui/material/CircularProgress"; + Typography +} from '@mui/material'; +import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'; +import { app } from '../../firebase'; +import Backdrop from '@mui/material/Backdrop'; +import CircularProgress from '@mui/material/CircularProgress'; const auth = getAuth(app); @@ -31,31 +31,33 @@ const SignUp = () => { const [showPassword1, setShowPassword1] = useState(false); const [showLoader, setShowLoader] = useState(false); - const [formFields, setFormFields] = useState({ - email: "", - password: "", - confirmPassword: "", + email: '', + password: '', + confirmPassword: '' }); const [snackbarOpen, setSnackbarOpen] = useState(false); - const [snackbarMessage, setSnackbarMessage] = useState(""); + const [snackbarMessage, setSnackbarMessage] = useState(''); const [isDisabled, setIsDisabled] = useState(true); const [InputErrors, setInputErrors] = useState({ - email: "", - password: "", - confirmPassword: "", + email: '', + password: '', + confirmPassword: '' }); const checkInputs = (email, password, confirmPassword) => { - if (email.trim() !== '' && password.trim() !== '' && confirmPassword.trim() !== '') { + if ( + email.trim() !== '' && + password.trim() !== '' && + confirmPassword.trim() !== '' + ) { setIsDisabled(false); } else { setIsDisabled(true); } }; - const signUp = () => { setShowLoader(true); @@ -63,7 +65,7 @@ const SignUp = () => { if (formFields.password.length < 6) { setShowLoader(false); setSnackbarMessage( - "Password is too weak. It must be at least 6 characters long." + 'Password is too weak. It must be at least 6 characters long.' ); setSnackbarOpen(true); return; @@ -73,9 +75,9 @@ const SignUp = () => { //console.log("User signed up successfully:", userCredential.user); setShowLoader(false); setFormFields({ - email: "", - password: "", - confirmPassword: "", + email: '', + password: '', + confirmPassword: '' }); setOpenDialog(true); }) @@ -83,7 +85,7 @@ const SignUp = () => { setShowLoader(false); const errorCode = error.code; const errorMessage = error.message; - console.error("Error signing up:", errorMessage); + console.error('Error signing up:', errorMessage); setSnackbarMessage(errorMessage); setSnackbarOpen(true); }); @@ -97,7 +99,7 @@ const SignUp = () => { //Password Validation const validatePassword = (password, error) => { if (password.length < 6) { - error.password = "Password must be at least 6 characters long"; + error.password = 'Password must be at least 6 characters long'; return false; } @@ -108,26 +110,26 @@ const SignUp = () => { const hasDigit = /[0-9]+/; if (!hasSpecialSymbol.test(password)) { - error.password = "Password must contain at least one special symbol"; + error.password = 'Password must contain at least one special symbol'; return false; } if (!hasUppercase.test(password)) { - error.password = "Password must contain at least one uppercase letter"; + error.password = 'Password must contain at least one uppercase letter'; return false; } if (!hasLowercase.test(password)) { - error.password = "Password must contain at least one lowercase letter"; + error.password = 'Password must contain at least one lowercase letter'; return false; } if (!hasDigit.test(password)) { - error.password = "Password must contain at least one digit"; + error.password = 'Password must contain at least one digit'; return false; } - error.password = ""; + error.password = ''; }; const onChangeField = (e) => { @@ -135,30 +137,25 @@ const SignUp = () => { const value = e.target.value; let errors = { ...InputErrors }; - - - - if (name == "email") { - errors.email = !validateEmail(value) ? "Invalid email address" : ""; + if (name == 'email') { + errors.email = !validateEmail(value) ? 'Invalid email address' : ''; } - if (name === "password") { + if (name === 'password') { validatePassword(value, errors); } - if (name === "confirmPassword") { + if (name === 'confirmPassword') { errors.confirmPassword = - formFields.password !== value ? "Password Not Matched!" : ""; + formFields.password !== value ? 'Password Not Matched!' : ''; } setInputErrors(errors); setFormFields((prevFormFields) => ({ ...prevFormFields, - [name]: value, + [name]: value })); - checkInputs(formFields.email, formFields.password,value); - - + checkInputs(formFields.email, formFields.password, value); }; const handleCloseSnackbar = () => { @@ -167,7 +164,7 @@ const SignUp = () => { const handleClose = () => { setOpenDialog(false); // Close the dialog - navigate("/signIn"); // Redirect to sign-in page + navigate('/signIn'); // Redirect to sign-in page }; return ( @@ -179,7 +176,7 @@ const SignUp = () => { aria-describedby="alert-dialog-description" > - {"Account Created Successfully!"} + {'Account Created Successfully!'} @@ -207,8 +204,8 @@ const SignUp = () => {

    - theme.zIndex.drawer + 1 }} + theme.zIndex.drawer + 1 }} open={showLoader} className="formLoader" > @@ -231,7 +228,7 @@ const SignUp = () => { {InputErrors.email && ( {InputErrors.email} @@ -241,7 +238,7 @@ const SignUp = () => {
    { {InputErrors.password && ( {InputErrors.password} @@ -274,7 +271,7 @@ const SignUp = () => {
    { {InputErrors.confirmPassword && ( {InputErrors.confirmPassword} @@ -326,8 +323,8 @@ const SignUp = () => { { 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") { + if (context.isLogin === 'true') { fetchCartProducts(); } else { - navigate("/signIn"); // Navigate to About Us page if not logged in + 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 + console.error('Error:', error); + setError('Failed to fetch data from the server'); // Set error state if there's an error with database connection } }, []); @@ -52,8 +52,8 @@ const Cart = () => { 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; @@ -65,24 +65,24 @@ const Cart = () => { setCartItems(products); 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."); + 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); @@ -90,9 +90,9 @@ const Cart = () => { await deleteDoc(doc.ref); }); await fetchCartProducts(); - console.log("All cart items deleted successfully."); + console.log('All cart items deleted successfully.'); } catch (error) { - console.error("Error deleting cart items:", error); + console.error('Error deleting cart items:', error); } }; @@ -110,7 +110,7 @@ const Cart = () => {
    • - Home + Home
    • Shop
    • Cart
      • @@ -120,14 +120,18 @@ const Cart = () => { )}
      -
      770 && "row"} > -
      +
      770 && 'row'}> +

      Your Cart

      - There are{" "} - {cartItems.length}{" "} + There are{' '} + {cartItems.length}{' '} products in your cart

      @@ -158,14 +162,14 @@ const Cart = () => { cartItems.map((item, index) => { return ( - +
      @@ -181,7 +185,7 @@ const Cart = () => { value={parseFloat(item.rating)} precision={0.5} readOnly - />{" "} + />{' '} ({parseFloat(item.rating)}) @@ -191,8 +195,8 @@ const Cart = () => { - Rs:{" "} - {parseInt(item.price.split(",").join(""))} + Rs:{' '} + {parseInt(item.price.split(',').join(''))} @@ -203,7 +207,7 @@ const Cart = () => { index={index} quantity={item?.quantity} updateInfo={updateCart} - name={"carts"} + name={'carts'} /> {/* { - Rs.{" "} + Rs.{' '} {parseInt( - item.price.split(",").join("") + item.price.split(',').join('') ) * parseInt(item.quantity)} @@ -264,7 +268,7 @@ const Cart = () => { cartItems .map( (item) => - parseInt(item.price.split(",").join("")) * + parseInt(item.price.split(',').join('')) * item.quantity ) .reduce((total, value) => total + value, 0)} @@ -294,7 +298,7 @@ const Cart = () => { cartItems .map( (item) => - parseInt(item.price.split(",").join("")) * + parseInt(item.price.split(',').join('')) * item.quantity ) .reduce((total, value) => total + value, 0)} @@ -310,7 +314,7 @@ const Cart = () => {
      -
      {" "} + {' '} ) : ( // Render message indicating cart is empty if cartItems array is empty diff --git a/src/pages/wishList/index.js b/src/pages/wishList/index.js index 0c05e12..fd5f59b 100644 --- a/src/pages/wishList/index.js +++ b/src/pages/wishList/index.js @@ -1,50 +1,50 @@ -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 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"; + 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"; + 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")); + const [uid, setUid] = useState(localStorage.getItem('uid')); console.log(wishlistItems); useEffect(() => { try { - if (context.isLogin === "true") { + if (context.isLogin === 'true') { fetchWishlistProducts(); } else { - navigate("/signIn"); // Navigate to About Us page if not logged in + 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 + console.error('Error:', error); + setError('Failed to fetch data from the server'); // Set error state if there's an error with database connection } }, []); @@ -54,8 +54,8 @@ const WishList = () => { const fetchWishlistProducts = async () => { try { - const wishlistsRef = doc(db, "wishlists", uid); - const productsCollectionRef = collection(wishlistsRef, "products"); + const wishlistsRef = doc(db, 'wishlists', uid); + const productsCollectionRef = collection(wishlistsRef, 'products'); const querySnapshot = await getDocs(productsCollectionRef); let products = []; let price = 0; @@ -68,30 +68,30 @@ const WishList = () => { setWishlistItems(products); setTotalPrice(price); } catch (error) { - console.error("Error fetching wishlist products:", error); + console.error('Error fetching wishlist products:', error); } }; const deleteWishlistItem = async (uid, wishlistItemId) => { const wishlistItemRef = doc( db, - "wishlists", + 'wishlists', uid, - "products", + 'products', wishlistItemId ); try { await deleteDoc(wishlistItemRef); fetchWishlistProducts(); - console.log("Wishlist item deleted successfully."); + console.log('Wishlist item deleted successfully.'); } catch (error) { - console.error("Error deleting wishlist item:", error); + console.error('Error deleting wishlist item:', error); } }; const deleteAllWishlistItems = async (uid) => { - const productsCollectionRef = collection(db, "wishlists", uid, "products"); + const productsCollectionRef = collection(db, 'wishlists', uid, 'products'); try { const querySnapshot = await getDocs(productsCollectionRef); @@ -99,9 +99,9 @@ const WishList = () => { await deleteDoc(doc.ref); }); await fetchWishlistProducts(); - console.log("All wishlist items deleted successfully."); + console.log('All wishlist items deleted successfully.'); } catch (error) { - console.error("Error deleting wishlist items:", error); + console.error('Error deleting wishlist items:', error); } }; @@ -119,7 +119,7 @@ const WishList = () => {
      • - Home + Home
      • Shop
      • Wishlist
        • @@ -129,14 +129,18 @@ const WishList = () => { )}
        -
        770 && "row"}> -
        +
        770 && 'row'}> +

        Your Wishlist

        - There are{" "} - {wishlistItems.length}{" "} + There are{' '} + {wishlistItems.length}{' '} products in your Wishlist

        @@ -167,14 +171,14 @@ const WishList = () => { wishlistItems.map((item, index) => { return ( - +
        @@ -190,7 +194,7 @@ const WishList = () => { value={parseFloat(item.rating)} precision={0.5} readOnly - />{" "} + />{' '} ({parseFloat(item.rating)}) @@ -200,8 +204,8 @@ const WishList = () => { - Rs:{" "} - {parseInt(item.price.split(",").join(""))} + Rs:{' '} + {parseInt(item.price.split(',').join(''))} @@ -212,15 +216,15 @@ const WishList = () => { index={index} quantity={item?.quantity} updateInfo={updateWishlist} - name={"wishlists"} + name={'wishlists'} /> - Rs.{" "} + Rs.{' '} {parseInt( - item.price.split(",").join("") + item.price.split(',').join('') ) * parseInt(item.quantity)} @@ -266,7 +270,7 @@ const WishList = () => { wishlistItems .map( (item) => - parseInt(item.price.split(",").join("")) * + parseInt(item.price.split(',').join('')) * item.quantity ) .reduce((total, value) => total + value, 0)} @@ -296,7 +300,7 @@ const WishList = () => { wishlistItems .map( (item) => - parseInt(item.price.split(",").join("")) * + parseInt(item.price.split(',').join('')) * item.quantity ) .reduce((total, value) => total + value, 0)} @@ -312,7 +316,7 @@ const WishList = () => {
        -
        {" "} + {' '} ) : ( // Render message indicating cart is empty if cartItems array is empty diff --git a/src/responsive.css b/src/responsive.css index fdfc76d..bf94aae 100644 --- a/src/responsive.css +++ b/src/responsive.css @@ -1,247 +1,725 @@ -@media only screen and (min-width:320px) and (max-width:575px){ - nav,.dropdownMenuAcc{width: 80% !important;} - .home_slider_Main .item .info h2{font-size: 8vw !important;} - .home_slider_Main .item .info p{font-size: 6vw !important;} - .hd{font-size: 28px !important;} - .home_slider_Main .item img{height: 45vh !important; object-fit: cover !important;} - .rightContent .topStrip{flex-direction: column;} - .rightContent .topStrip p{width: 100%; margin-bottom: 10px !important;} - .rightContent .topStrip div.ml-auto{width: 100%;} - - .detailsPage .productInfo h1{font-size: 40px !important;} - .detailsPage .productInfo .priceSec .priceLarge{font-size: 50px !important;} - .detailsPageTabs{padding: 25px !important;} - .customTabs ul{white-space: nowrap !important; overflow: scroll; overflow-y: hidden; display: block !important; margin-bottom: 0px !important;} - .customTabs ul::-webkit-scrollbar{display: none !important;} - .customTabs ul li{display: inline-block !important; width: max-content !important;} - - .loginWrapper{padding: 60px 20px !important;} - .loginWrapper .card{width:100% !important;} - - +@media only screen and (min-width: 320px) and (max-width: 575px) { + nav, + .dropdownMenuAcc { + width: 80% !important; + } + .home_slider_Main .item .info h2 { + font-size: 8vw !important; + } + .home_slider_Main .item .info p { + font-size: 6vw !important; + } + .hd { + font-size: 28px !important; + } + .home_slider_Main .item img { + height: 45vh !important; + object-fit: cover !important; + } + .rightContent .topStrip { + flex-direction: column; + } + .rightContent .topStrip p { + width: 100%; + margin-bottom: 10px !important; + } + .rightContent .topStrip div.ml-auto { + width: 100%; + } + + .detailsPage .productInfo h1 { + font-size: 40px !important; + } + .detailsPage .productInfo .priceSec .priceLarge { + font-size: 50px !important; + } + .detailsPageTabs { + padding: 25px !important; + } + .customTabs ul { + white-space: nowrap !important; + overflow: scroll; + overflow-y: hidden; + display: block !important; + margin-bottom: 0px !important; + } + .customTabs ul::-webkit-scrollbar { + display: none !important; + } + .customTabs ul li { + display: inline-block !important; + width: max-content !important; + } + + .loginWrapper { + padding: 60px 20px !important; + } + .loginWrapper .card { + width: 100% !important; + } } -@media only screen and (min-width:320px) and (max-width:400px){ - .homeProducts .productRow .item{width: 100% !important;} - .productThumb .imgWrapper .wrapper{height: auto !important;} - - .progressBarBox {flex-direction: column;} - .progressBarBox span.mr-3{display: block !important; width: 100%;} - .progress{width: 100% !important;} - - .productSize {flex-direction: column;} - .productSize span{width: 100%; display: block;} - .productSize ul{padding-left: 0px !important; margin-top: 10px !important; display: block; white-space: nowrap; overflow: scroll; overflow-y: hidden; width: 100% !important;} - .productSize ul::-webkit-scrollbar{display: none !important;} - .productSize ul li{vertical-align: top; width: max-content; display: inline-block !important;} - +@media only screen and (min-width: 320px) and (max-width: 400px) { + .homeProducts .productRow .item { + width: 100% !important; + } + .productThumb .imgWrapper .wrapper { + height: auto !important; + } + + .progressBarBox { + flex-direction: column; + } + .progressBarBox span.mr-3 { + display: block !important; + width: 100%; + } + .progress { + width: 100% !important; + } + + .productSize { + flex-direction: column; + } + .productSize span { + width: 100%; + display: block; + } + .productSize ul { + padding-left: 0px !important; + margin-top: 10px !important; + display: block; + white-space: nowrap; + overflow: scroll; + overflow-y: hidden; + width: 100% !important; + } + .productSize ul::-webkit-scrollbar { + display: none !important; + } + .productSize ul li { + vertical-align: top; + width: max-content; + display: inline-block !important; + } } -@media only screen and (min-width:400px) and (max-width:550px){ - .homeProducts .productRow .item{width: 50% !important;} - .productThumb .imgWrapper .wrapper{height: auto !important;} +@media only screen and (min-width: 400px) and (max-width: 550px) { + .homeProducts .productRow .item { + width: 50% !important; + } + .productThumb .imgWrapper .wrapper { + height: auto !important; + } } -@media only screen and (min-width:550px) and (max-width:767px){ - .homeProducts .productRow .item{width: 33.3333333333% !important;} - .productThumb .imgWrapper .wrapper{height: auto !important;} +@media only screen and (min-width: 550px) and (max-width: 767px) { + .homeProducts .productRow .item { + width: 33.3333333333% !important; + } + .productThumb .imgWrapper .wrapper { + height: auto !important; + } } -@media only screen and (min-width:575px) and (max-width:767px){ - nav,.dropdownMenuAcc{width: 50% !important;} - - .home_slider_Main .item .info h2{font-size: 8vw !important;} - .home_slider_Main .item .info p{font-size: 6vw !important;} - +@media only screen and (min-width: 575px) and (max-width: 767px) { + nav, + .dropdownMenuAcc { + width: 50% !important; + } + + .home_slider_Main .item .info h2 { + font-size: 8vw !important; + } + .home_slider_Main .item .info p { + font-size: 6vw !important; + } } -@media only screen and (min-width:320px) and (max-width:767px){ - .footerWrapper{padding-bottom: 0px !important;} - .lastStrip{padding: 0px 15px !important;} - .lastStrip .part_1, .lastStrip .part_2, .lastStrip .part_3{padding: 15px 0px !important;} - .lastStrip .part_1 p{margin-bottom: 0px;} - .lastStrip {justify-content: left;} - .lastStrip .col-md-3{text-align: left;} - .lastStrip .part3 .d-flex{justify-content: left;} - - .lastStrip .part_2{padding: 0px !important;} - .phWrap{flex-direction: column; width: 100% !important;} - .phWrap .phNo{padding: 10px 0px; width: 100% !important;} +@media only screen and (min-width: 320px) and (max-width: 767px) { + .footerWrapper { + padding-bottom: 0px !important; + } + .lastStrip { + padding: 0px 15px !important; + } + .lastStrip .part_1, + .lastStrip .part_2, + .lastStrip .part_3 { + padding: 15px 0px !important; + } + .lastStrip .part_1 p { + margin-bottom: 0px; + } + .lastStrip { + justify-content: left; + } + .lastStrip .col-md-3 { + text-align: left; + } + .lastStrip .part3 .d-flex { + justify-content: left; + } + + .lastStrip .part_2 { + padding: 0px !important; + } + .phWrap { + flex-direction: column; + width: 100% !important; + } + .phWrap .phNo { + padding: 10px 0px; + width: 100% !important; + } } -@media only screen and (min-width:767px) and (max-width:992px){ - nav,.dropdownMenuAcc{width: 30% !important;} - - .home_slider_Main .item .info h2{font-size: 7vw !important;} - .home_slider_Main .item .info p{font-size: 5vw !important;} +@media only screen and (min-width: 767px) and (max-width: 992px) { + nav, + .dropdownMenuAcc { + width: 30% !important; + } + + .home_slider_Main .item .info h2 { + font-size: 7vw !important; + } + .home_slider_Main .item .info p { + font-size: 5vw !important; + } } - -@media only screen and (min-width:320px) and (max-width:992px){ - - body,html{overflow-x: hidden !important;} - - .container-fluid{padding: 0px 25px !important;} - .res-hide{display: none !important;} - .res-full{width: 100%;} - - .headerWrapper .part1{max-width: 100%; flex:0 0 100%;} - .headerWrapper .part1 .navbarToggle{width:45px;} - .headerWrapper .part1 .navbarToggle svg{font-size: 35px !important;} - - - .headerWrapper .d-flex.part3{display: none !important;} - header .logo{width: 160px;} - - .headerWrapper.fixed header{ box-shadow: 0px 1px 5px #0000001a;} - .headerWrapper.fixed{top: 0px !important;} - - .nav{position: absolute; border: 0px !important; pointer-events: none;} - .nav.click{pointer-events: inherit !important;} - .afterHeader{margin-top: 85px !important;} - - .headerSearch{position: fixed !important; top: 0px; right: -100%; opacity: 0; z-index: 100; width: 100%; height: 100% !important; background: #fff; align-items: flex-start !important; flex-direction: column !important; padding: 70px !important; padding-top: 90px !important; border: 0px !important; transition: all 0.5s ease-in-out;} - - - .headerSearch.open{opacity: 1; right: 0px;} - - header .headerSearch .selectDropWrapper{width: 100% !important;} - header .headerSearch .search{padding-left: 0px !important; width: 100% !important; border: 1px solid rgba(0,0,0,0.1) !important; padding: 10px !important; margin-top: 15px !important;} - - header .headerSearch .search .searchIcon{top: 22px !important; right: 10px !important;} - - .closeSearch{position: absolute; top: 25px !important; left: 35px !important; z-index: 100; cursor: pointer; width: 40px; height: 30px; } - .closeSearch svg{font-size: 35px !important;} - - .myAccDrop{display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; background: #3bb77e; border-radius: 50%;} - .myAccDrop svg{color: #fff !important; font-size: 35px !important;} - - - nav,.dropdownMenuAcc{height: 100% !important; position: fixed !important; top: 0px; right: -100%; background: #fff; z-index: 1000000; transition: all 0.3s; opacity: 0; height: 100% !important; overflow: scroll !important; - padding-bottom: 50px !important;} - nav.open{opacity: 1; right: 0px;} - nav ul li,.dropdownMenuAcc li{width: 100%; margin: 0px !important;} - nav ul li button,.dropdownMenuAcc li button.MuiButtonBase-root{width: 100% !important; text-align: left !important; justify-content: flex-start !important;} - .nav nav ul li button a {display: flex !important; align-items: center; justify-content: space-between; width: 100%; font-size: 24px !important; color: rgba(0,0,0,0.8) !important;} - nav ul li button a svg{margin-left: auto !important; font-size: 30px !important; } - .rotateIcon{transform: rotate(180deg) !important;} - - .navbarOverlay{width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,0.5); z-index: 100000;} - - .nav nav .dropdown_menu{display: none !important; position: static !important; width: 100% !important; box-shadow: none !important; padding-left: 30px !important;} - .nav nav .dropdown_menu.open{display: block !important; opacity: 1 !important; visibility: inherit !important;} - - .dropdownMenuAcc{right: 0px !important; opacity: 1 !important; top: 0px !important; z-index: 1000000 !important;} - .dropdownMenuAcc li button.MuiButtonBase-root a{display: flex !important; align-items: center; width: 100%; font-size: 24px !important; color: rgba(0,0,0,0.8) !important;} - - .dropdownMenuAcc li button.MuiButtonBase-root svg{ font-size: 30px !important;display: block !important;} - .dropdownMenuAcc li button.MuiButtonBase-root img{margin-right: 8px;} - - div.megaMenu {padding-top:10px !important ;padding-bottom:10px !important ;} - .megaMenu .row{flex-direction: column !important;} - .megaMenu .row .col{max-width: 100% !important; width: 100% !important; margin-bottom: 20px !important;} - - .catSliderSection{padding-top: 0px !important; padding-bottom: 0px !important;} - .cat_slider_Main .slick-track{white-space: nowrap !important; overflow-x: scroll !important; display: block !important; width: 100% !important;} - - .cat_slider_Main .slick-track::-webkit-scrollbar{display: none !important;} - - .cat_slider_Main .slick-track .slick-slide{display: inline-block !important; width:200px !important; float: none !important;} - - .cat_slider_Main .item:hover .info, .cat_slider_Main .slick-current .info{transform: scale(1) !important; box-shadow: none !important;} - - .cat_slider_Main.slick-initialized .slick-list{padding-left:0px !important ;} - - - .hd{margin-bottom: 15px !important;} - - .bannerSection .row{display: block !important; white-space: nowrap !important; overflow-x: scroll !important; - transition: all 0.4s !important;} - .bannerSection .row::-webkit-scrollbar{display: none !important;} - .bannerSection .row .col{width: 400px !important; float: none !important; display: inline-block !important; - padding-right: 0px !important;} - - - .homeProductsTitleWrap{flex-direction: column;} - .homeProductsTitleWrap h2{width: 100%;} - .homeProductWrapper .filterTab {white-space: nowrap; overflow-x: scroll; width: 100%; display: block !important; margin-top: 10px !important;} - .homeProductWrapper .filterTab::-webkit-scrollbar{display: none !important;} - .homeProductWrapper .filterTab li{display: inline-block !important; vertical-align: top; width: max-content; margin-left: 0px !important; margin-right: 20px !important;} - - .homeProductWrapper .productRow{white-space: nowrap; overflow-x: scroll; width: 100%; display: block !important;} - .homeProductWrapper .productRow::-webkit-scrollbar{display: none !important;} - .homeProductWrapper .productRow .item{width:400px !important; vertical-align: top !important; display: inline-block !important;} - .homeProductWrapper .productRow .item *{white-space: normal !important;} - - - -.homeProductsRow2 .slick-track{white-space: nowrap; overflow-x: scroll; display: block !important;} -.homeProductsRow2 .slick-track::-webkit-scrollbar{display: none !important;} -.homeProductsRow2 .slick-track .slick-slide{width:400px !important; vertical-align: top !important; display: inline-block !important; float: none !important;} -.homeProductsRow2 .slick-track .slick-slide *{white-space: normal !important;} - - -.topProductsSection .row{white-space: nowrap; overflow-x: scroll; display: block !important; width: 100% !important;} -.topProductsSection .row::-webkit-scrollbar{display: none !important;} -.topProductsSection .row .col{width:400px !important; vertical-align: top !important; display: inline-block !important; float: none !important;} - -.topProductsSection .row .col *{white-space: normal !important;} - -.newsLetterSection .box{padding: 40px !important; flex-direction: column;} -.newsLetterSection .box .info{width: 100% !important;} -.newsLetterSection .box .info h2{font-size: 50px !important;} - -.newsLetterBanner {width: 100% !important;} -.newsLetterSection .box .img{width: 70% !important;} - - -.footerBoxes .row{white-space: nowrap; overflow-x: scroll; display: block !important; width: 100% !important;} -.footerBoxes .row::-webkit-scrollbar{display: none !important;} -.footerBoxes .row .col{width:400px !important; vertical-align: top !important; display: inline-block !important; float: none !important; padding-right: 0px !important;} - - -footer .part2{padding-top: 25px; padding-bottom: 30px !important;} -footer .part2 .row{white-space: nowrap; overflow-x: scroll; display: block !important; width: 100% !important;} -footer .part2 .row .col{width:250px !important; vertical-align: top !important; display: inline-block !important; float: none !important; padding-right: 0px !important;} -footer .part2 .row::-webkit-scrollbar{display: none !important;} - -.breadcrumb{padding: 25px !important;} -.breadcrumb h1{font-size: 35px !important;} - -.sidebarWrapper{pointer-events: none;} -.sidebarWrapper.click{pointer-events: inherit !important;} -.sidebar{position: fixed !important; top: 0px !important; bottom: -100%; opacity: 0; left: 0px; width: 100%; height: 100% !important; z-index: 1000000; background: #fff; max-width: 100%; flex: 0 0 100%; padding: 0px !important; transition: all 0.3s ease-in-out; } -.sidebar.open{bottom: 0px; opacity: 1;} -.listingData .rightContent {max-width: 100% !important; flex: 0 0 100% !important;} -.sidebarWrapper .sidebar .card{margin-bottom: 0px !important; position: absolute; width: 100%; height: 100%;} - -.productThumb .imgWrapper .wrapper{height: auto !important;} - -.filterWrapper{display: flex !important;} - -.filterBtn{position: fixed !important; bottom: 5px; left:2.5%; width: 95% !important; z-index: 1000;} - -.breadcrumbWrapper{margin-bottom: 0px !important; padding-bottom: 0px !important;} - -.detailsPage {padding-top: 35px !important; padding-bottom: 0px !important; margin-bottom: 0px !important;} -.detailsContainer{max-width: 100%; padding: 0px 25px !important;} - -.detailsPage .productInfo{padding-left: 15px !important; margin-top: 35px !important;} - -.zoomSlider .slick-track{white-space: nowrap; overflow: scroll; overflow-y: hidden; display: block !important;} -.zoomSlider .slick-track::-webkit-scrollbar{display: none !important;} -.zoomSlider .slick-track .slick-slide{display: inline-block !important; float: none !important; width: 120px !important; height: 120px !important; vertical-align: top !important;} - -.reviewBox{padding-left: 15px !important;} -.wishlist{margin-left: 0px !important;} - -.cartSection{margin-top: 125px !important;} - -.cartWrapper table tbody td .img{width: 100px !important; height: 100px !important;} -.cartWrapper table tbody td .info{width: 400px !important;} -.cartWrapper table tbody td .info h4{font-size: 20px !important; font-weight: 600 !important;} -.cartWrapper table tbody td span{white-space: nowrap;} - -.cartRightBox{padding-left: 15px !important; padding-top: 50px !important;} - -} \ No newline at end of file +@media only screen and (min-width: 320px) and (max-width: 992px) { + body, + html { + overflow-x: hidden !important; + } + + .container-fluid { + padding: 0px 25px !important; + } + .res-hide { + display: none !important; + } + .res-full { + width: 100%; + } + + .headerWrapper .part1 { + max-width: 100%; + flex: 0 0 100%; + } + .headerWrapper .part1 .navbarToggle { + width: 45px; + } + .headerWrapper .part1 .navbarToggle svg { + font-size: 35px !important; + } + + .headerWrapper .d-flex.part3 { + display: none !important; + } + header .logo { + width: 160px; + } + + .headerWrapper.fixed header { + box-shadow: 0px 1px 5px #0000001a; + } + .headerWrapper.fixed { + top: 0px !important; + } + + .nav { + position: absolute; + border: 0px !important; + pointer-events: none; + } + .nav.click { + pointer-events: inherit !important; + } + .afterHeader { + margin-top: 85px !important; + } + + .headerSearch { + position: fixed !important; + top: 0px; + right: -100%; + opacity: 0; + z-index: 100; + width: 100%; + height: 100% !important; + background: #fff; + align-items: flex-start !important; + flex-direction: column !important; + padding: 70px !important; + padding-top: 90px !important; + border: 0px !important; + transition: all 0.5s ease-in-out; + } + + .headerSearch.open { + opacity: 1; + right: 0px; + } + + header .headerSearch .selectDropWrapper { + width: 100% !important; + } + header .headerSearch .search { + padding-left: 0px !important; + width: 100% !important; + border: 1px solid rgba(0, 0, 0, 0.1) !important; + padding: 10px !important; + margin-top: 15px !important; + } + + header .headerSearch .search .searchIcon { + top: 22px !important; + right: 10px !important; + } + + .closeSearch { + position: absolute; + top: 25px !important; + left: 35px !important; + z-index: 100; + cursor: pointer; + width: 40px; + height: 30px; + } + .closeSearch svg { + font-size: 35px !important; + } + + .myAccDrop { + display: flex; + align-items: center; + justify-content: center; + width: 55px; + height: 55px; + background: #3bb77e; + border-radius: 50%; + } + .myAccDrop svg { + color: #fff !important; + font-size: 35px !important; + } + + nav, + .dropdownMenuAcc { + height: 100% !important; + position: fixed !important; + top: 0px; + right: -100%; + background: #fff; + z-index: 1000000; + transition: all 0.3s; + opacity: 0; + height: 100% !important; + overflow: scroll !important; + padding-bottom: 50px !important; + } + nav.open { + opacity: 1; + right: 0px; + } + nav ul li, + .dropdownMenuAcc li { + width: 100%; + margin: 0px !important; + } + nav ul li button, + .dropdownMenuAcc li button.MuiButtonBase-root { + width: 100% !important; + text-align: left !important; + justify-content: flex-start !important; + } + .nav nav ul li button a { + display: flex !important; + align-items: center; + justify-content: space-between; + width: 100%; + font-size: 24px !important; + color: rgba(0, 0, 0, 0.8) !important; + } + nav ul li button a svg { + margin-left: auto !important; + font-size: 30px !important; + } + .rotateIcon { + transform: rotate(180deg) !important; + } + + .navbarOverlay { + width: 100%; + height: 100%; + position: fixed; + top: 0px; + left: 0px; + background: rgba(0, 0, 0, 0.5); + z-index: 100000; + } + + .nav nav .dropdown_menu { + display: none !important; + position: static !important; + width: 100% !important; + box-shadow: none !important; + padding-left: 30px !important; + } + .nav nav .dropdown_menu.open { + display: block !important; + opacity: 1 !important; + visibility: inherit !important; + } + + .dropdownMenuAcc { + right: 0px !important; + opacity: 1 !important; + top: 0px !important; + z-index: 1000000 !important; + } + .dropdownMenuAcc li button.MuiButtonBase-root a { + display: flex !important; + align-items: center; + width: 100%; + font-size: 24px !important; + color: rgba(0, 0, 0, 0.8) !important; + } + + .dropdownMenuAcc li button.MuiButtonBase-root svg { + font-size: 30px !important; + display: block !important; + } + .dropdownMenuAcc li button.MuiButtonBase-root img { + margin-right: 8px; + } + + div.megaMenu { + padding-top: 10px !important ; + padding-bottom: 10px !important ; + } + .megaMenu .row { + flex-direction: column !important; + } + .megaMenu .row .col { + max-width: 100% !important; + width: 100% !important; + margin-bottom: 20px !important; + } + + .catSliderSection { + padding-top: 0px !important; + padding-bottom: 0px !important; + } + .cat_slider_Main .slick-track { + white-space: nowrap !important; + overflow-x: scroll !important; + display: block !important; + width: 100% !important; + } + + .cat_slider_Main .slick-track::-webkit-scrollbar { + display: none !important; + } + + .cat_slider_Main .slick-track .slick-slide { + display: inline-block !important; + width: 200px !important; + float: none !important; + } + + .cat_slider_Main .item:hover .info, + .cat_slider_Main .slick-current .info { + transform: scale(1) !important; + box-shadow: none !important; + } + + .cat_slider_Main.slick-initialized .slick-list { + padding-left: 0px !important ; + } + + .hd { + margin-bottom: 15px !important; + } + + .bannerSection .row { + display: block !important; + white-space: nowrap !important; + overflow-x: scroll !important; + transition: all 0.4s !important; + } + .bannerSection .row::-webkit-scrollbar { + display: none !important; + } + .bannerSection .row .col { + width: 400px !important; + float: none !important; + display: inline-block !important; + padding-right: 0px !important; + } + + .homeProductsTitleWrap { + flex-direction: column; + } + .homeProductsTitleWrap h2 { + width: 100%; + } + .homeProductWrapper .filterTab { + white-space: nowrap; + overflow-x: scroll; + width: 100%; + display: block !important; + margin-top: 10px !important; + } + .homeProductWrapper .filterTab::-webkit-scrollbar { + display: none !important; + } + .homeProductWrapper .filterTab li { + display: inline-block !important; + vertical-align: top; + width: max-content; + margin-left: 0px !important; + margin-right: 20px !important; + } + + .homeProductWrapper .productRow { + white-space: nowrap; + overflow-x: scroll; + width: 100%; + display: block !important; + } + .homeProductWrapper .productRow::-webkit-scrollbar { + display: none !important; + } + .homeProductWrapper .productRow .item { + width: 400px !important; + vertical-align: top !important; + display: inline-block !important; + } + .homeProductWrapper .productRow .item * { + white-space: normal !important; + } + + .homeProductsRow2 .slick-track { + white-space: nowrap; + overflow-x: scroll; + display: block !important; + } + .homeProductsRow2 .slick-track::-webkit-scrollbar { + display: none !important; + } + .homeProductsRow2 .slick-track .slick-slide { + width: 400px !important; + vertical-align: top !important; + display: inline-block !important; + float: none !important; + } + .homeProductsRow2 .slick-track .slick-slide * { + white-space: normal !important; + } + + .topProductsSection .row { + white-space: nowrap; + overflow-x: scroll; + display: block !important; + width: 100% !important; + } + .topProductsSection .row::-webkit-scrollbar { + display: none !important; + } + .topProductsSection .row .col { + width: 400px !important; + vertical-align: top !important; + display: inline-block !important; + float: none !important; + } + + .topProductsSection .row .col * { + white-space: normal !important; + } + + .newsLetterSection .box { + padding: 40px !important; + flex-direction: column; + } + .newsLetterSection .box .info { + width: 100% !important; + } + .newsLetterSection .box .info h2 { + font-size: 50px !important; + } + + .newsLetterBanner { + width: 100% !important; + } + .newsLetterSection .box .img { + width: 70% !important; + } + + .footerBoxes .row { + white-space: nowrap; + overflow-x: scroll; + display: block !important; + width: 100% !important; + } + .footerBoxes .row::-webkit-scrollbar { + display: none !important; + } + .footerBoxes .row .col { + width: 400px !important; + vertical-align: top !important; + display: inline-block !important; + float: none !important; + padding-right: 0px !important; + } + + footer .part2 { + padding-top: 25px; + padding-bottom: 30px !important; + } + footer .part2 .row { + white-space: nowrap; + overflow-x: scroll; + display: block !important; + width: 100% !important; + } + footer .part2 .row .col { + width: 250px !important; + vertical-align: top !important; + display: inline-block !important; + float: none !important; + padding-right: 0px !important; + } + footer .part2 .row::-webkit-scrollbar { + display: none !important; + } + + .breadcrumb { + padding: 25px !important; + } + .breadcrumb h1 { + font-size: 35px !important; + } + + .sidebarWrapper { + pointer-events: none; + } + .sidebarWrapper.click { + pointer-events: inherit !important; + } + .sidebar { + position: fixed !important; + top: 0px !important; + bottom: -100%; + opacity: 0; + left: 0px; + width: 100%; + height: 100% !important; + z-index: 1000000; + background: #fff; + max-width: 100%; + flex: 0 0 100%; + padding: 0px !important; + transition: all 0.3s ease-in-out; + } + .sidebar.open { + bottom: 0px; + opacity: 1; + } + .listingData .rightContent { + max-width: 100% !important; + flex: 0 0 100% !important; + } + .sidebarWrapper .sidebar .card { + margin-bottom: 0px !important; + position: absolute; + width: 100%; + height: 100%; + } + + .productThumb .imgWrapper .wrapper { + height: auto !important; + } + + .filterWrapper { + display: flex !important; + } + + .filterBtn { + position: fixed !important; + bottom: 5px; + left: 2.5%; + width: 95% !important; + z-index: 1000; + } + + .breadcrumbWrapper { + margin-bottom: 0px !important; + padding-bottom: 0px !important; + } + + .detailsPage { + padding-top: 35px !important; + padding-bottom: 0px !important; + margin-bottom: 0px !important; + } + .detailsContainer { + max-width: 100%; + padding: 0px 25px !important; + } + + .detailsPage .productInfo { + padding-left: 15px !important; + margin-top: 35px !important; + } + + .zoomSlider .slick-track { + white-space: nowrap; + overflow: scroll; + overflow-y: hidden; + display: block !important; + } + .zoomSlider .slick-track::-webkit-scrollbar { + display: none !important; + } + .zoomSlider .slick-track .slick-slide { + display: inline-block !important; + float: none !important; + width: 120px !important; + height: 120px !important; + vertical-align: top !important; + } + + .reviewBox { + padding-left: 15px !important; + } + .wishlist { + margin-left: 0px !important; + } + + .cartSection { + margin-top: 125px !important; + } + + .cartWrapper table tbody td .img { + width: 100px !important; + height: 100px !important; + } + .cartWrapper table tbody td .info { + width: 400px !important; + } + .cartWrapper table tbody td .info h4 { + font-size: 20px !important; + font-weight: 600 !important; + } + .cartWrapper table tbody td span { + white-space: nowrap; + } + + .cartRightBox { + padding-left: 15px !important; + padding-top: 50px !important; + } +}