Revert "Revert "feat #199 : implement the shipping Addresses feature (#…

…209)" …" (#217)

This reverts commit a983b90.

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",

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 };
+export { MyContext };

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

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

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