From 8706c705b66406c22d1dad87fa9706d459145f09 Mon Sep 17 00:00:00 2001
From: Rishi Mondal <146999057+MAVRICK-1@users.noreply.github.com>
Date: Thu, 23 May 2024 18:37:24 +0530
Subject: [PATCH] =?UTF-8?q?Revert=20"Revert=20"feat=20#199=20:=20implement?=
 =?UTF-8?q?=20the=20shipping=20Addresses=20feature=20(#209)"=20=E2=80=A6"?=
 =?UTF-8?q?=20(#217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit a983b908c06a1e70176943302689846d54f789a1.
---
 package.json                                  |   1 +
 src/App.js                                    |  16 +-
 src/components/AccountDetails/Account.js      | 137 +++++++++--
 .../ShippingAddress/AddressData.jsx           |  49 ++++
 src/components/ShippingAddress/Shipping.css   | 113 +++++++++
 .../ShippingAddress/ShippingForm.jsx          | 216 ++++++++++++++++++
 src/components/footer/footer.js               |   2 +-
 src/components/header/header.js               |  10 +-
 src/components/header/nav/nav.css             |   2 +-
 src/components/header/nav/nav.js              |   2 +-
 src/components/search/SearchResults.jsx       | 150 ++++++------
 src/pages/About/about.css                     |   4 +-
 src/pages/About/index.js                      |   2 +-
 src/pages/Compare/index.js                    | 127 +++++-----
 src/pages/Compare/style.css                   | 152 ++++++------
 src/pages/Details/index.js                    |  14 +-
 src/pages/Home/style.css                      |   2 +-
 src/pages/ResetPassword/index.js              |   2 +-
 src/pages/ResetPassword/style.css             |   2 +-
 src/pages/SignIn/index.js                     |   2 +-
 src/pages/wishList/index.js                   |   2 +-
 src/useFetchData.js                           |   2 +-
 22 files changed, 749 insertions(+), 260 deletions(-)
 create mode 100644 src/components/ShippingAddress/AddressData.jsx
 create mode 100644 src/components/ShippingAddress/Shipping.css
 create mode 100644 src/components/ShippingAddress/ShippingForm.jsx

diff --git a/package.json b/package.json
index 6a50fcd..f664376 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.5.1",
     "bootstrap": "^4.6.2",
+    "country-state-city": "^3.2.1",
     "custom-react-inner-image-zoom": "^3.0.6",
     "firebase": "^10.8.0",
     "leaflet": "^1.9.4",
diff --git a/src/App.js b/src/App.js
index 8c718ab..c6d4429 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,6 +24,8 @@ import MapComponent from './components/map/ITEMmap';
 import { db } from './firebase';
 import SellerForm from './pages/SellerRegistration';
 import SearchResults from './components/search/SearchResults';
+import Shipping from './components/ShippingAddress/ShippingForm';
+import { Account } from './components/AccountDetails/Account';
 
 const MyContext = createContext();
 
@@ -291,6 +293,18 @@ function App() {
           <Route exact={true} path="*" element={<NotFound />} />
           {/* search route */}
           <Route exact={true} path="/search" element={<SearchResults />} />
+
+          <Route
+            exact={true}
+            path="/update-shipping-address/:addressId"
+            element={<Shipping />}
+          />
+          <Route
+            exact={true}
+            path="/add-shipping-address"
+            element={<Shipping />}
+          />
+          <Route exact={true} path="/my-account" element={<Account />} />
         </Routes>
         <Footer />
       </MyContext.Provider>
@@ -304,4 +318,4 @@ function App() {
 
 export default App;
 
-export { MyContext };
\ No newline at end of file
+export { MyContext };
diff --git a/src/components/AccountDetails/Account.js b/src/components/AccountDetails/Account.js
index 88eed45..940ddc7 100644
--- a/src/components/AccountDetails/Account.js
+++ b/src/components/AccountDetails/Account.js
@@ -21,23 +21,20 @@ import {
   uploadBytes,
   updateMetadata
 } from 'firebase/storage';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import {
-  addDoc,
   collection,
   doc,
   getDoc,
-  onSnapshot,
   setDoc,
   updateDoc,
-  query,
-  where,
-  documentId,
-  getDocs
+  getDocs,
+  deleteDoc
 } from 'firebase/firestore';
 import { db, storage } from '../../firebase';
 import { nanoid } from 'nanoid';
-
+import AddressData from '../ShippingAddress/AddressData';
+import Loader from '../../assets/images/loading.gif';
 export function Account() {
   const {
     register,
@@ -49,27 +46,48 @@ export function Account() {
   const userImage = localStorage.getItem('userImage');
   const userName = localStorage.getItem('uname');
   const userEmail = localStorage.getItem('uemail');
-
+  const [loading, setLoadding] = useState(false);
   const [name, setName] = useState(userName);
   const [email, setEmail] = useState(userEmail);
   const [address, setAddress] = useState('');
   const [file, setFile] = useState(pfp);
   const navigate = useNavigate();
+  const [shippingAddresses, setShippingAddresses] = useState([]);
 
-  useEffect(() => {
-    (async () => {
-      const docref = doc(db, 'users', `${user_uid ? user_uid : nanoid()}`);
-      const docSnap = await getDoc(docref);
-      if (docSnap.exists()) {
-        setName(docSnap.data().Name);
-        setEmail(docSnap.data().Email);
-        setAddress(docSnap.data().Address);
-        setFile(docSnap.data().photo);
-      } else {
-        console.log(null);
-      }
-    })();
-  }, []);
+  async function FetchTheData() {
+    setLoadding(true);
+    const docref = doc(db, 'users', `${user_uid ? user_uid : nanoid()}`);
+    const docSnap = await getDoc(docref);
+    if (docSnap.exists()) {
+      setName(docSnap.data().Name);
+      setEmail(docSnap.data().Email);
+      setAddress(docSnap.data().Address);
+      setFile(docSnap.data().photo);
+
+      // Fetch the shipping address subcollection
+      const shippingAddressCollectionRef = collection(
+        docref,
+        'shippingaddress'
+      );
+      const shippingAddressQuerySnapshot = await getDocs(
+        shippingAddressCollectionRef
+      );
+
+      const shippingAddresses = shippingAddressQuerySnapshot.docs.map(
+        (doc) => ({
+          id: doc.id,
+          ...doc.data()
+        })
+      );
+
+      // Print the array of shipping address documents
+      console.log('Shipping Address Documents:', shippingAddresses);
+      setShippingAddresses(shippingAddresses);
+    } else {
+      console.log(null);
+    }
+    setLoadding(false);
+  }
 
   function handlehistory() {
     navigate('/');
@@ -139,6 +157,38 @@ export function Account() {
     }
   };
 
+  // shipping Address delete
+  const deleteShippingAddress = async (id) => {
+    try {
+      const userId = user_uid ? user_uid : nanoid();
+      const userDocRef = doc(db, 'users', userId);
+      const shippingAddressDocRef = doc(userDocRef, 'shippingaddress', id);
+
+      // Delete the shipping address document
+      await deleteDoc(shippingAddressDocRef);
+
+      // Update the local state to remove the deleted address
+      setShippingAddresses((prevAddresses) =>
+        prevAddresses.filter((address) => address.id !== id)
+      );
+
+      console.log('Shipping address deleted successfully');
+    } catch (error) {
+      console.error('Error deleting shipping address: ', error);
+    }
+  };
+  useEffect(() => {
+    FetchTheData();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="loader">
+        <img src={Loader} />
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="container-fluid d-flex flex-column justify-content-center align-items-center p-5">
@@ -274,6 +324,47 @@ export function Account() {
           </CardFooter>
         </Card>
       </div>
+      <div className="container-fluid d-flex flex-column justify-content-center align-items-center ">
+        <h1 class="h1 font-weight-bold mt-0 mb-4">Manage Addresses</h1>
+
+        <div className="container-fluid d-flex justify-content-center align-items-stretch flex-wrap p-2  ">
+          {shippingAddresses.length > 0 ? (
+            <>
+              {shippingAddresses.map((add, i) => {
+                return (
+                  <AddressData
+                    key={i}
+                    address={add}
+                    deleteShippingAddress={deleteShippingAddress}
+                  />
+                );
+              })}
+              <Link to={'/add-shipping-address'} className="align-self-center">
+                <button
+                  type="button"
+                  class="btn btn-success py-4 px-5 mx-5 font-weight-bold btn-lg text-uppercase "
+                >
+                  Add New Address
+                </button>
+              </Link>
+            </>
+          ) : (
+            <>
+              <div className="my-5 d-flex flex-column align-items-center justify-content-center">
+                <h3 className="text-capitalize">No Any Address Found </h3>
+                <Link to={'/add-shipping-address'}>
+                  <button
+                    type="button"
+                    class="btn btn-success py-4 px-5 my-5 font-weight-bold btn-lg text-uppercase"
+                  >
+                    Add New Address
+                  </button>
+                </Link>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
     </>
   );
 }
diff --git a/src/components/ShippingAddress/AddressData.jsx b/src/components/ShippingAddress/AddressData.jsx
new file mode 100644
index 0000000..8912406
--- /dev/null
+++ b/src/components/ShippingAddress/AddressData.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function AddressData({ address, deleteShippingAddress }) {
+  const Navigate = useNavigate();
+  return (
+    <div class="col-md-3 h-100">
+      <div class="bg-white card addresses-item mb-4 border border-primary shadow">
+        <div class="gold-members p-4">
+          <div class="media">
+            <div class="mr-3">
+              <i class="icofo1nt-ui-home icofont-3x"></i>
+            </div>
+            <div class="media-body">
+              <h4 class="mb-1 text-secondary font-weight-bold text-capitalize font-weight-bold">
+                {address?.addressType}
+              </h4>
+              <p style={{ fontSize: '29px' }}>
+                {address?.address} , {address?.city}, {address?.state}{' '}
+                {address?.pinCode} , {address?.country}
+              </p>
+              <p class="text-black font-weight-bold my-3">
+                Contact : {address?.phoneNo}
+              </p>
+              <p class="mb-0 text-black font-weight-bold">
+                <button
+                  onClick={() => {
+                    Navigate(`/update-shipping-address/${address.id}`);
+                  }}
+                  type="button"
+                  className="btn btn-primary  mr-4"
+                >
+                  <i class="icofont-ui-edit"></i> EDIT
+                </button>
+                <button
+                  onClick={() => deleteShippingAddress(address.id)}
+                  type="button"
+                  className="btn btn-danger "
+                >
+                  <i class="icofont-ui-delete"></i> DELETE
+                </button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ShippingAddress/Shipping.css b/src/components/ShippingAddress/Shipping.css
new file mode 100644
index 0000000..aa6de9b
--- /dev/null
+++ b/src/components/ShippingAddress/Shipping.css
@@ -0,0 +1,113 @@
+.shippingContainer {
+  width: 100%;
+  padding: 30px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.shippingBox {
+  background-color: white;
+  width: 30%;
+  /* height: 90vh; */
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.shippingHeading {
+  text-align: center;
+  color: rgba(0, 0, 0, 0.664);
+  font: 400 3vmax 'Roboto';
+  padding: 1.3vmax;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.205);
+  width: 70%;
+  font-weight: 700;
+  margin: auto;
+}
+
+.shippingForm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+  gap: 20px;
+  padding: 2vmax;
+  justify-content: space-evenly;
+  height: 100%;
+  transition: all 0.5s;
+}
+
+.shippingForm > div {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.shippingForm > div > input,
+.shippingForm > div > select {
+  padding: 1vmax 4vmax;
+  padding-right: 1vmax;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, 0.267);
+  border-radius: 4px;
+  font: 300 2vmax cursive;
+  outline: none;
+}
+
+.shippingForm > div > svg {
+  position: absolute;
+  transform: translateX(1vmax);
+  font-size: 2vmax;
+  color: rgba(0, 0, 0, 0.623);
+}
+
+.shippingBtn {
+  border: none;
+  background-color: rgb(0, 150, 57);
+  color: rgb(255, 255, 255);
+  font: 300 1.6vmax 'Roboto';
+  padding: 1vmax;
+  cursor: pointer;
+  transition: all 0.5s;
+  outline: none;
+  text-transform: uppercase;
+  font-weight: bold;
+  margin: 2vmax;
+}
+
+@media screen and (max-width: 600px) {
+  .shippingBox {
+    width: 100vw;
+    /* height: 100vh; */
+  }
+
+  .shippingHeading {
+    font: 400 6vw 'Roboto';
+    padding: 5vw;
+  }
+
+  .shippingForm {
+    display: flex;
+    gap: 20px;
+    padding: 11vw 14vw;
+  }
+
+  .shippingForm > div > input,
+  .shippingForm > div > select {
+    padding: 3vw 6vw;
+    font: 300 5vw cursive;
+    padding-left: 50px;
+  }
+
+  .shippingForm > div > svg {
+    font-size: 4vw;
+    transform: translateX(3vw);
+  }
+
+  .shippingBtn {
+    font: 300 4vw 'Roboto';
+    padding: 4vw;
+  }
+}
diff --git a/src/components/ShippingAddress/ShippingForm.jsx b/src/components/ShippingAddress/ShippingForm.jsx
new file mode 100644
index 0000000..0a95f44
--- /dev/null
+++ b/src/components/ShippingAddress/ShippingForm.jsx
@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { nanoid } from 'nanoid';
+import { collection, doc, getDoc, addDoc, updateDoc } from 'firebase/firestore';
+import { db } from '../../firebase';
+import HomeIcon from '@mui/icons-material/Home';
+import { Country, State } from 'country-state-city';
+import LocationCityIcon from '@mui/icons-material/LocationCityRounded';
+import PinDropIcon from '@mui/icons-material/PinDrop';
+import PhoneIcon from '@mui/icons-material/Phone';
+import PublicIcon from '@mui/icons-material/Public';
+import TransferWithinAStationIcon from '@mui/icons-material/TransferWithinAStation';
+import './Shipping.css';
+import Loader from '../../assets/images/loading.gif';
+export default function Shipping() {
+  const { addressId } = useParams(); // Get the addressId from URL parameters
+  const navigate = useNavigate();
+  const [isUpdate, setIsUpdate] = useState(!!addressId);
+  const [currentDocId, setCurrentDocId] = useState(addressId || null);
+  const [loading, setLoading] = useState(false);
+  const [addressType, setAddressType] = useState('other');
+  const [address, setAddress] = useState('');
+  const [city, setCity] = useState('');
+  const [state, setState] = useState('');
+  const [country, setCountry] = useState('');
+  const [pinCode, setPinCode] = useState('');
+  const [phoneNo, setPhoneNo] = useState('');
+
+  const user_uid = localStorage.getItem('uid');
+
+  // Fetch the Update Address Data
+  const fetchAddress = async () => {
+    setLoading(true);
+    const userId = user_uid ? user_uid : nanoid();
+    const userDocRef = doc(db, 'users', userId);
+    const addressDocRef = doc(userDocRef, 'shippingaddress', addressId);
+    const addressDocSnap = await getDoc(addressDocRef);
+
+    if (addressDocSnap.exists()) {
+      const addressData = addressDocSnap.data();
+      setAddressType(addressData.addressType || 'other');
+      setAddress(addressData.address);
+      setCity(addressData.city);
+      setState(addressData.state);
+      setCountry(addressData.country);
+      setPinCode(addressData.pinCode);
+      setPhoneNo(addressData.phoneNo);
+    } else {
+      console.log('No address found with the given ID.');
+      navigate('/');
+    }
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (addressId) {
+      fetchAddress();
+    }
+  }, [addressId, user_uid]);
+
+  // Update And Add New Address
+  const submitShipping = async (e) => {
+    e.preventDefault();
+
+    if (phoneNo.length !== 10) {
+      alert('Phone number must be 10 digits long');
+      return;
+    }
+
+    try {
+      const userId = user_uid ? user_uid : nanoid();
+      const userDocRef = doc(db, 'users', userId);
+
+      if (isUpdate && currentDocId) {
+        const addressDocRef = doc(userDocRef, 'shippingaddress', currentDocId);
+        await updateDoc(addressDocRef, {
+          addressType,
+          address,
+          city,
+          state,
+          country,
+          pinCode,
+          phoneNo
+        });
+
+        console.log('Shipping address updated successfully');
+      } else {
+        await addDoc(collection(userDocRef, 'shippingaddress'), {
+          addressType,
+          address,
+          city,
+          state,
+          country,
+          pinCode,
+          phoneNo
+        });
+
+        console.log('Shipping address added successfully');
+      }
+
+      navigate('/my-account');
+    } catch (error) {
+      console.error('Error adding/updating shipping address: ', error);
+    }
+  };
+  if (loading) {
+    return (
+      <div className="loader">
+        <img src={Loader} />
+      </div>
+    );
+  }
+  return (
+    <div className="shippingContainer">
+      <div className="shippingBox">
+        <h2 className="shippingHeading">
+          {isUpdate ? 'Update Shipping Details' : 'Add Shipping Details'}
+        </h2>
+        <form
+          className="shippingForm"
+          encType="multipart/form-data"
+          onSubmit={submitShipping}
+        >
+          <div>
+            <LocationCityIcon />
+            <input
+              type="text"
+              placeholder="Home, Office, other..."
+              required
+              value={addressType}
+              onChange={(e) => setAddressType(e.target.value)}
+            />
+          </div>
+          <div>
+            <HomeIcon />
+            <input
+              type="text"
+              placeholder="Address"
+              required
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+            />
+          </div>
+          <div>
+            <LocationCityIcon />
+            <input
+              type="text"
+              placeholder="City"
+              required
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+            />
+          </div>
+          <div>
+            <PinDropIcon />
+            <input
+              type="number"
+              placeholder="Pin Code"
+              required
+              value={pinCode}
+              onChange={(e) => setPinCode(e.target.value)}
+            />
+          </div>
+          <div>
+            <PhoneIcon />
+            <input
+              type="tel"
+              placeholder="Phone Number"
+              required
+              value={phoneNo}
+              onChange={(e) => setPhoneNo(e.target.value)}
+              pattern="^[789]\d{9}$"
+            />
+          </div>
+          <div>
+            <PublicIcon />
+            <select
+              required
+              value={country}
+              onChange={(e) => setCountry(e.target.value)}
+            >
+              <option value="">Country</option>
+              {Country.getAllCountries().map((item) => (
+                <option key={item.isoCode} value={item.isoCode}>
+                  {item.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          {country && (
+            <div>
+              <TransferWithinAStationIcon />
+              <select
+                required
+                value={state}
+                onChange={(e) => setState(e.target.value)}
+              >
+                <option value="">State</option>
+                {State.getStatesOfCountry(country).map((item) => (
+                  <option key={item.isoCode} value={item.isoCode}>
+                    {item.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <input
+            type="submit"
+            value={isUpdate ? 'Update Details' : 'Add Details'}
+            className="shippingBtn"
+          />
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 2e644b5..fc0ba3f 100644
--- a/src/components/footer/footer.js
+++ b/src/components/footer/footer.js
@@ -317,4 +317,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/src/components/header/header.js b/src/components/header/header.js
index a806a70..da9c408 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -342,9 +342,11 @@ const Header = (props) => {
                           {isOpenDropDown !== false && (
                             <ul className="dropdownMenu">
                               <li>
-                                <Button className="align-items-center">
-                                  <Person2OutlinedIcon /> My Account
-                                </Button>
+                               <Link to={'/my-account'}>
+                                  <Button className="align-items-center">
+                                    <Person2OutlinedIcon /> My Account
+                                  </Button>
+                                </Link>
                               </li>
                               <li>
                                 <Button>
@@ -465,4 +467,4 @@ const Header = (props) => {
   );
 };
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/components/header/nav/nav.css b/src/components/header/nav/nav.css
index bbb11d6..6640ce3 100644
--- a/src/components/header/nav/nav.css
+++ b/src/components/header/nav/nav.css
@@ -105,4 +105,4 @@ nav .dropdown_menu li button:hover {
     height: 20px;
 } */
 @media (max-width: 586px) {
-}
\ No newline at end of file
+}
diff --git a/src/components/header/nav/nav.js b/src/components/header/nav/nav.js
index 0a2a2bd..3b280cc 100644
--- a/src/components/header/nav/nav.js
+++ b/src/components/header/nav/nav.js
@@ -272,4 +272,4 @@ const Nav = (props) => {
   );
 };
 
-export default Nav;
\ No newline at end of file
+export default Nav;
diff --git a/src/components/search/SearchResults.jsx b/src/components/search/SearchResults.jsx
index 832b44b..91fd3d5 100644
--- a/src/components/search/SearchResults.jsx
+++ b/src/components/search/SearchResults.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { useLocation } from "react-router-dom";
+import React from 'react';
+import { useLocation } from 'react-router-dom';
 import {
   Card,
   CardContent,
@@ -10,42 +10,41 @@ import {
   Alert,
   Container,
   Rating,
-  IconButton,
-} from "@mui/material";
-import FavoriteIcon from "@mui/icons-material/Favorite";
-import StarIcon from "@mui/icons-material/Star";
-import useFetchData from "../../useFetchData";
+  IconButton
+} from '@mui/material';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import StarIcon from '@mui/icons-material/Star';
+import useFetchData from '../../useFetchData';
 
 const SearchResults = () => {
   const location = useLocation();
-  const query = new URLSearchParams(location.search).get("query");
+  const query = new URLSearchParams(location.search).get('query');
   const { data, loading, error } = useFetchData(
-    "https://mavrick-1.github.io/DataApi/data.json"
+    'https://mavrick-1.github.io/DataApi/data.json'
   );
 
   if (loading)
     return (
-      <Container sx={{ textAlign: "center", marginTop: 4 }}>
+      <Container sx={{ textAlign: 'center', marginTop: 4 }}>
         <CircularProgress />
       </Container>
     );
   if (error)
     return (
-      <Container sx={{ textAlign: "center", marginTop: 4 }}>
+      <Container sx={{ textAlign: 'center', marginTop: 4 }}>
         <Alert severity="error">Error loading data</Alert>
       </Container>
     );
 
-  const filteredProducts = data.productData
-    .flatMap((category) =>
-      category.cat_name.toLowerCase().includes(query.toLowerCase())
-        ? category.items.flatMap((item) => item.products)
-        : category.items.flatMap((item) =>
+  const filteredProducts = data.productData.flatMap((category) =>
+    category.cat_name.toLowerCase().includes(query.toLowerCase())
+      ? category.items.flatMap((item) => item.products)
+      : category.items.flatMap((item) =>
           item.products.filter((product) =>
             product.productName.toLowerCase().includes(query.toLowerCase())
           )
         )
-    );
+  );
 
   return (
     <Container sx={{ marginTop: 10, marginBottom: 10 }} maxWidth="xl">
@@ -55,25 +54,25 @@ const SearchResults = () => {
             <Grid item key={product.id} xs={12} sm={6} md={4}>
               <Card
                 sx={{
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                  transition: "transform 0.3s, box-shadow 0.3s",
-                  position: "relative", // Add this for positioning the heart icon
+                  height: '100%',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  transition: 'transform 0.3s, box-shadow 0.3s',
+                  position: 'relative', // Add this for positioning the heart icon
                   '&:hover': {
-                    transform: "translateY(-8px)",
-                    boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
-                    cursor: "pointer",
-                  },
+                    transform: 'translateY(-8px)',
+                    boxShadow: '0 4px 20px rgba(0,0,0,0.2)',
+                    cursor: 'pointer'
+                  }
                 }}
               >
                 <IconButton
                   sx={{
-                    position: "absolute",
+                    position: 'absolute',
                     top: 8,
                     right: 8,
                     zIndex: 1,
-                    color: "red",
+                    color: 'red'
                   }}
                 >
                   <FavoriteIcon />
@@ -83,7 +82,7 @@ const SearchResults = () => {
                   height="100%"
                   image={product.productImages[0]}
                   alt={product.productName}
-                  sx={{ objectFit: "cover" }}
+                  sx={{ objectFit: 'cover' }}
                 />
                 <CardContent sx={{ flexGrow: 1 }}>
                   {/* Product Name */}
@@ -92,10 +91,10 @@ const SearchResults = () => {
                     variant="h6"
                     component="div"
                     sx={{
-                      transition: "color 0.3s",
+                      transition: 'color 0.3s',
                       '&:hover': {
-                        color: "blue",
-                      },
+                        color: 'blue'
+                      }
                     }}
                   >
                     {product.productName}
@@ -105,9 +104,9 @@ const SearchResults = () => {
                     variant="body2"
                     color="text.secondary"
                     sx={{
-                      display: "flex",
-                      alignItems: "center",
-                      marginBottom: "8px",
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginBottom: '8px'
                     }}
                   >
                     <Rating
@@ -115,18 +114,22 @@ const SearchResults = () => {
                       value={product.rating}
                       readOnly
                       precision={0.5}
-                      emptyIcon={<StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />}
+                      emptyIcon={
+                        <StarIcon
+                          style={{ opacity: 0.55 }}
+                          fontSize="inherit"
+                        />
+                      }
                     />
                     <Typography
-                      
                       sx={{
-                        marginLeft: "8px",
-                        fontWeight: "bold",
-                        fontSize: "16px", 
-                        backgroundColor: "green", // Background color
-                        padding: "8px 30px",
-                        borderRadius: "4px",
-                        color: "#fff",
+                        marginLeft: '8px',
+                        fontWeight: 'bold',
+                        fontSize: '16px',
+                        backgroundColor: 'green', // Background color
+                        padding: '8px 30px',
+                        borderRadius: '4px',
+                        color: '#fff'
                       }}
                     >
                       {product.brand}
@@ -134,51 +137,60 @@ const SearchResults = () => {
                   </Typography>
                   {/* Price, Old Price, Discount */}
                   <Typography
-
-                    sx={{ display: "flex", alignItems: "center", marginTop: "8px", }}
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      marginTop: '8px'
+                    }}
                   >
                     <h1
                       style={{
                         color: 'black',
-                        fontSize: "22px",
-                        fontWeight: "bold",
-                        marginRight: "8px",
+                        fontSize: '22px',
+                        fontWeight: 'bold',
+                        marginRight: '8px'
                       }}
                     >
                       ₹{product.price}
                     </h1>
                     <Typography
-
                       sx={{
-                        color: "gray", fontSize: "22px",
-                        textDecoration: "line-through",
-                        marginRight: "8px",
+                        color: 'gray',
+                        fontSize: '22px',
+                        textDecoration: 'line-through',
+                        marginRight: '8px'
                       }}
                     >
                       ₹{product.oldPrice}
                     </Typography>
-                    <p style={{
-                      color: 'green',
-                      fontSize: '22px',
-                      letterSpacing: '-.2px',
-                      fontWeight: '500'
-                    }}>
+                    <p
+                      style={{
+                        color: 'green',
+                        fontSize: '22px',
+                        letterSpacing: '-.2px',
+                        fontWeight: '500'
+                      }}
+                    >
                       {product.discount}% off
                     </p>
                   </Typography>
                   {/* Additional Info */}
-                  <p style={{
-                    color: 'black',
-                    fontSize: '18px',
-                    fontWeight: 700
-                  }}>
+                  <p
+                    style={{
+                      color: 'black',
+                      fontSize: '18px',
+                      fontWeight: 700
+                    }}
+                  >
                     Free delivery
                   </p>
-                  <p style={{
-                    color: 'red',
-                    fontSize: '18px',
-                    fontWeight: 700
-                  }}>
+                  <p
+                    style={{
+                      color: 'red',
+                      fontSize: '18px',
+                      fontWeight: 700
+                    }}
+                  >
                     Only Few Left
                   </p>
                 </CardContent>
diff --git a/src/pages/About/about.css b/src/pages/About/about.css
index 56403e4..256f23f 100644
--- a/src/pages/About/about.css
+++ b/src/pages/About/about.css
@@ -38,7 +38,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 400px; 
+  width: 400px;
   height: 350px;
   border: 0.5px solid #008080;
   transition: box-shadow 1s;
@@ -184,4 +184,4 @@
     width: 120px;
     height: 120px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/About/index.js b/src/pages/About/index.js
index 77a81f8..03d42d4 100644
--- a/src/pages/About/index.js
+++ b/src/pages/About/index.js
@@ -75,4 +75,4 @@ function Tes() {
   );
 }
 
-export default Tes;
\ No newline at end of file
+export default Tes;
diff --git a/src/pages/Compare/index.js b/src/pages/Compare/index.js
index 3d3ffb2..280f286 100644
--- a/src/pages/Compare/index.js
+++ b/src/pages/Compare/index.js
@@ -24,7 +24,7 @@ import {
   getDocs,
   onSnapshot
 } from 'firebase/firestore';
-const Compare = ({data}) => {
+const Compare = ({ data }) => {
   const [compareItems, setCompareItems] = useState([]);
   const [error, setError] = useState(null);
   const context = useContext(MyContext);
@@ -65,13 +65,7 @@ const Compare = ({data}) => {
     }
   };
   const deleteCompareItem = async (uid, compareItemId) => {
-    const compareItemRef = doc(
-      db,
-      'compare',
-      uid,
-      'products',
-      compareItemId
-    );
+    const compareItemRef = doc(db, 'compare', uid, 'products', compareItemId);
 
     try {
       await deleteDoc(compareItemRef);
@@ -159,71 +153,69 @@ const Compare = ({data}) => {
                             compareItems.map((item, index) => {
                               return (
                                 <>
-                                <tr>
-                                  <td width={'50%'}>
-                                    <div className="d-flex align-items-center">
-                                      <div className="img">
-                                        <Link to={`/product/${item.id}`}>
-                                          <img
-                                            src={
-                                              item.catImg +
-                                              '?im=Resize=(100,100)'
-                                            }
-                                            className="w-100"
-                                          />
-                                        </Link>
-                                      </div>
+                                  <tr>
+                                    <td width={'50%'}>
+                                      <div className="d-flex align-items-center">
+                                        <div className="img">
+                                          <Link to={`/product/${item.id}`}>
+                                            <img
+                                              src={
+                                                item.catImg +
+                                                '?im=Resize=(100,100)'
+                                              }
+                                              className="w-100"
+                                            />
+                                          </Link>
+                                        </div>
 
-                                      <div className="info pl-4">
-                                        <Link to={`/product/${item.id}`}>
-                                          <h4>{item.productName}</h4>
-                                        </Link>
-                                        <Rating
-                                          name="half-rating-read"
-                                          value={parseFloat(item.rating)}
-                                          precision={0.5}
-                                          readOnly
-                                        />{' '}
-                                        <span className="text-light">
-                                          ({parseFloat(item.rating)})
-                                        </span>
+                                        <div className="info pl-4">
+                                          <Link to={`/product/${item.id}`}>
+                                            <h4>{item.productName}</h4>
+                                          </Link>
+                                          <Rating
+                                            name="half-rating-read"
+                                            value={parseFloat(item.rating)}
+                                            precision={0.5}
+                                            readOnly
+                                          />{' '}
+                                          <span className="text-light">
+                                            ({parseFloat(item.rating)})
+                                          </span>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </td>
-
-                                  <td width="20%">
-                                    <span>
-                                      Rs:{' '}
-                                      {parseInt(item.price.split(',').join(''))}
-                                    </span>
-                                  </td>
+                                    </td>
 
-                                  <td width="20%">
-                                    <span>{item.brand}</span>
-                                  </td>
+                                    <td width="20%">
+                                      <span>
+                                        Rs:{' '}
+                                        {parseInt(
+                                          item.price.split(',').join('')
+                                        )}
+                                      </span>
+                                    </td>
 
-                                  <td>
-                                    <span width="20%">
-                                      {item.shop_name}
-                                    </span>
-                                  </td>
+                                    <td width="20%">
+                                      <span>{item.brand}</span>
+                                    </td>
 
-                                  <td align="center">
-                                    <span
-                                      className="cursor"
-                                      onClick={() =>
-                                        deleteCompareItem(uid, `${item?.id}`)
-                                      }
-                                    >
-                                      <DeleteOutlineOutlinedIcon />
-                                    </span>
-                                  </td>
-                                </tr>
-                                <tr>
-                                  <div style={{display:"flex"}}>
+                                    <td>
+                                      <span width="20%">{item.shop_name}</span>
+                                    </td>
 
-                                  </div>
-                                </tr>
+                                    <td align="center">
+                                      <span
+                                        className="cursor"
+                                        onClick={() =>
+                                          deleteCompareItem(uid, `${item?.id}`)
+                                        }
+                                      >
+                                        <DeleteOutlineOutlinedIcon />
+                                      </span>
+                                    </td>
+                                  </tr>
+                                  <tr>
+                                    <div style={{ display: 'flex' }}></div>
+                                  </tr>
                                 </>
                               );
                             })}
@@ -244,7 +236,6 @@ const Compare = ({data}) => {
                     <RefreshIcon /> Update Cart</Button> */}
                   </div>
                 </div>
-
               </div>
             </div>
           </section>{' '}
diff --git a/src/pages/Compare/style.css b/src/pages/Compare/style.css
index 9ff9509..f79c664 100644
--- a/src/pages/Compare/style.css
+++ b/src/pages/Compare/style.css
@@ -1,78 +1,78 @@
 .cartSection {
-    width: 100%;
-    height: auto;
-    padding: 10px 0px;
-    display: flex;
-    justify-content: center;
-  }
-  .cartSection .clearCart {
-    font-weight: 600;
-    font-size: 18px;
-  }
-  .cartSection .clearCart svg {
-    font-size: 25px !important;
-  }
-  
-  .cartWrapper table thead {
-    background: #f1f1f1;
-    overflow: hidden;
-  }
-  .cartWrapper table thead th:first-child {
-    border-top-left-radius: 15px;
-    border-bottom-left-radius: 15px;
-  }
-  .cartWrapper table thead th:last-child {
-    border-top-right-radius: 15px;
-    border-bottom-right-radius: 15px;
-  }
-  
-  .cartWrapper table tbody td {
-    vertical-align: middle;
-  }
-  .cartWrapper table tbody td .img {
-    width: 30%;
-    height: 150px;
-    padding: 5px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-  }
-  .cartWrapper table tbody td .img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .cartWrapper table tbody td .info {
-    width: 70%;
-  }
-  .cartWrapper table tbody td .info a {
-    color: rgba(0, 0, 0, 0.7);
-  }
-  .cartWrapper table tbody td .info a:hover {
-    text-decoration: none;
-  }
-  
-  .cartWrapper table tbody td span {
-    font-weight: 600;
-    font-size: 28px;
-  }
-  .cartWrapper table tbody td span.text-g {
-    font-weight: bold;
-  }
-  
-  .cartRightBox {
-    padding-left: 100px;
-    padding-bottom: 30px;
-    height: auto;
-  }
-  .cartRightBox .card {
-    position: sticky;
-    top: 150px;
-    height: auto;
-    margin: auto;
-    max-width: 430px;
-  }
+  width: 100%;
+  height: auto;
+  padding: 10px 0px;
+  display: flex;
+  justify-content: center;
+}
+.cartSection .clearCart {
+  font-weight: 600;
+  font-size: 18px;
+}
+.cartSection .clearCart svg {
+  font-size: 25px !important;
+}
 
-  .cartSection > div > div{
-    display: flex;
-    justify-content: center;
-  }
\ No newline at end of file
+.cartWrapper table thead {
+  background: #f1f1f1;
+  overflow: hidden;
+}
+.cartWrapper table thead th:first-child {
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+}
+.cartWrapper table thead th:last-child {
+  border-top-right-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
+
+.cartWrapper table tbody td {
+  vertical-align: middle;
+}
+.cartWrapper table tbody td .img {
+  width: 30%;
+  height: 150px;
+  padding: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+}
+.cartWrapper table tbody td .img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cartWrapper table tbody td .info {
+  width: 70%;
+}
+.cartWrapper table tbody td .info a {
+  color: rgba(0, 0, 0, 0.7);
+}
+.cartWrapper table tbody td .info a:hover {
+  text-decoration: none;
+}
+
+.cartWrapper table tbody td span {
+  font-weight: 600;
+  font-size: 28px;
+}
+.cartWrapper table tbody td span.text-g {
+  font-weight: bold;
+}
+
+.cartRightBox {
+  padding-left: 100px;
+  padding-bottom: 30px;
+  height: auto;
+}
+.cartRightBox .card {
+  position: sticky;
+  top: 150px;
+  height: auto;
+  margin: auto;
+  max-width: 430px;
+}
+
+.cartSection > div > div {
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/pages/Details/index.js b/src/pages/Details/index.js
index d202694..f274b2b 100644
--- a/src/pages/Details/index.js
+++ b/src/pages/Details/index.js
@@ -73,8 +73,7 @@ const DetailsPage = (props) => {
   const [isAlreadyAddedInCart, setisAlreadyAddedInCart] = useState(false);
   const [isAlreadyAddedInWishlist, setisAlreadyAddedInWishlist] =
     useState(false);
-    const [isAlreadyAddedInCompare, setIsAlreadyAddedInCompare] =
-    useState(false);
+  const [isAlreadyAddedInCompare, setIsAlreadyAddedInCompare] = useState(false);
 
   const [reviewFields, setReviewFields] = useState({
     review: '',
@@ -271,7 +270,6 @@ const DetailsPage = (props) => {
   };
 
   const toggleWishlistItem = async (item) => {
-
     if (!isAlreadyAddedInWishlist) {
       try {
         const user = localStorage.getItem('uid');
@@ -375,7 +373,6 @@ const DetailsPage = (props) => {
     }
   };
 
-
   return (
     <>
       {context.windowWidth < 992 && (
@@ -606,11 +603,14 @@ const DetailsPage = (props) => {
                   >
                     <FavoriteBorderOutlinedIcon />{' '}
                   </Button>
-                  <Button onClick={() => toggleCompareItem(currentProduct)}  className={`btn-lg addtocartbtn ml-3 ${
+                  <Button
+                    onClick={() => toggleCompareItem(currentProduct)}
+                    className={`btn-lg addtocartbtn ml-3 ${
                       isAlreadyAddedInCompare === true
                         ? 'btn-borderWishlistAlreadyAdded'
                         : 'btn-border'
-                    }`}>
+                    }`}
+                  >
                     <CompareArrowsIcon />
                   </Button>
                 </div>
@@ -974,4 +974,4 @@ const DetailsPage = (props) => {
   );
 };
 
-export default DetailsPage;
\ No newline at end of file
+export default DetailsPage;
diff --git a/src/pages/Home/style.css b/src/pages/Home/style.css
index d67d3fe..d6de113 100644
--- a/src/pages/Home/style.css
+++ b/src/pages/Home/style.css
@@ -85,4 +85,4 @@
   position: relative !important;
   left: 0px !important;
   bottom: inherit !important;
-}
\ No newline at end of file
+}
diff --git a/src/pages/ResetPassword/index.js b/src/pages/ResetPassword/index.js
index 9d23787..f0b5e09 100644
--- a/src/pages/ResetPassword/index.js
+++ b/src/pages/ResetPassword/index.js
@@ -192,4 +192,4 @@ const SignIn = () => {
   );
 };
 
-export default SignIn;
\ No newline at end of file
+export default SignIn;
diff --git a/src/pages/ResetPassword/style.css b/src/pages/ResetPassword/style.css
index 84ad738..337fd0d 100644
--- a/src/pages/ResetPassword/style.css
+++ b/src/pages/ResetPassword/style.css
@@ -79,4 +79,4 @@
     border: 0px !important;
     height: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
index a8e8559..d84cf75 100644
--- a/src/pages/SignIn/index.js
+++ b/src/pages/SignIn/index.js
@@ -288,4 +288,4 @@ const SignIn = () => {
   );
 };
 
-export default SignIn;
\ No newline at end of file
+export default SignIn;
diff --git a/src/pages/wishList/index.js b/src/pages/wishList/index.js
index 646b255..7af0948 100644
--- a/src/pages/wishList/index.js
+++ b/src/pages/wishList/index.js
@@ -338,4 +338,4 @@ const WishList = () => {
   );
 };
 
-export default WishList;
\ No newline at end of file
+export default WishList;
diff --git a/src/useFetchData.js b/src/useFetchData.js
index 5c5b837..da458c5 100644
--- a/src/useFetchData.js
+++ b/src/useFetchData.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
 const useFetchData = (url) => {
   const [data, setData] = useState(null);