virtual tour sidebar info

client/src/components/ApartmentSidebar.tsx

@@ -2,7 +2,6 @@ import { useNavigate } from "react-router-dom";
 import Button from "./Button";
 // import { formatNumber } from "../calc/formatNumber";
 import { IAparmentRes } from "../types/apartmentsRes";
-import { apartmentRoutes } from "../consts/apartmentsRoutes";
 
 interface ApartmentSidebarProps {
   currentApartment: IAparmentRes;
@@ -10,15 +9,12 @@ interface ApartmentSidebarProps {
 
 const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
   const navigate = useNavigate();
-  const route = apartmentRoutes.find(
-    (aprt) => aprt.type === currentApartment.Unit_Type
-  )?.virtualTour;
   const unitNo = currentApartment.Unit_No.split("-")[1];
   const wing =
     currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
 
   const handleOn3DTourClick = () => {
-    navigate(`../virtual-tour/${route ? route : "apartments-studio-1"}`);
+    navigate(`../virtual-tour/${currentApartment.id}`);
   };
 
   return (

client/src/components/apartmentPage/ButtonPanel.tsx

@@ -3,6 +3,8 @@ import Button from "../Button";
 import HeartIcon from "../icons/Heart";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import { IAparmentRes } from "../../types/apartmentsRes";
+import useFavorites from "../../store/useFavorites";
+import { useEffect, useState } from "react";
 
 interface ButtonPanelProps {
   currentApartment: IAparmentRes;
@@ -11,11 +13,55 @@ interface ButtonPanelProps {
 const ButtonPanel = ({ currentApartment }: ButtonPanelProps) => {
   const navigate = useNavigate();
   const unitNo = currentApartment.Unit_No.split("-")[1];
+  const [isFavorite, setIsFavorite] = useState(false);
+  const { setFavorites } = useFavorites();
 
   const handleOnBackClick = () => {
-    navigate(-1);
+    navigate("../search");
   };
 
+  const handleOnFavoriteClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.stopPropagation();
+    const favorites = localStorage.getItem("Favorites");
+
+    if (!favorites) {
+      setIsFavorite(true);
+      const updatedFavorites = JSON.stringify([currentApartment]);
+
+      localStorage.setItem("Favorites", updatedFavorites);
+    } else {
+      const _favorites = JSON.parse(favorites) as IAparmentRes[];
+
+      if (_favorites.some((apart) => apart.id === currentApartment.id)) {
+        setIsFavorite(false);
+        const updatedFavorites = [..._favorites].filter(
+          (apart) => apart.id !== currentApartment.id
+        );
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        setFavorites(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      } else {
+        setIsFavorite(true);
+        const updatedFavorites = [..._favorites, currentApartment];
+        setFavorites(updatedFavorites);
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      }
+    }
+  };
+
+  useEffect(() => {
+    const favorites = localStorage.getItem("Favorites");
+    if (favorites) {
+      const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
+        (apart) => apart.id === currentApartment.id
+      );
+      setIsFavorite(_isFavorite);
+    }
+  }, [currentApartment.id]);
+
   return (
     <div className="flex justify-between w-full gap-4 items-center pb-3">
       <div className="flex gap-4 items-center ">
@@ -33,7 +79,12 @@ const ButtonPanel = ({ currentApartment }: ButtonPanelProps) => {
           </h2>
         </div>
       </div>
-      <Button buttonType="favorite" icon={<HeartIcon />} isCircleRounded />
+      <Button
+        buttonType="favorite"
+        icon={<HeartIcon isFilled={isFavorite} />}
+        isCircleRounded
+        onClick={handleOnFavoriteClick}
+      />
     </div>
   );
 };

client/src/components/complexWingPage/SequenceWing.tsx

@@ -19,7 +19,7 @@ import { initialRoveHomeCheckboxes } from "../../consts/initialMasterplanFilters
 import { pageInitial } from "../../consts/initialMasterplanFilters";
 import { useDebounce } from "@uidotdev/usehooks";
 import { getFilteredApartments } from "../../calc/getFilteredApartments";
-import MasterplanLoaderModal from "../modals/MasterplanLoaderModal";
+import LoaderModal from "../modals/LoaderModal";
 
 const skyGardenFloor = 22;
 
@@ -219,7 +219,7 @@ const SequenceWing = () => {
 
   useEffect(() => {
     if (isLoading) {
-      setModal(<MasterplanLoaderModal />);
+      setModal(<LoaderModal />);
     } else {
       setModal(null);
     }

client/src/components/favoritesPage/FavoriteApartmentCard.tsx

@@ -26,7 +26,6 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
   const layoutImage = isLayoutType
     ? apartmentLayoutImages[Unit_Type]
     : apartmentRoutes.find((apr) => apr.type === card.Unit_Type)?.layout;
-  console.log("card", card);
 
   const { setModal } = useModal();
 

client/src/components/modals/LoaderModal.tsx

@@ -1,4 +1,4 @@
-const MasterplanLoaderModal = () => {
+const LoaderModal = () => {
   return (
     <div className="absolute z-[99999] top-0 left-0 w-screen bg-[#F3F3F2] h-screen flex justify-center items-center">
       <div className="animate-spin">
@@ -8,4 +8,4 @@ const MasterplanLoaderModal = () => {
   );
 };
 
-export default MasterplanLoaderModal;
+export default LoaderModal;

client/src/components/searchPage/LayoutOptions.tsx

@@ -82,8 +82,7 @@ const LayoutOptions = () => {
     setIsLoading(true);
 
     getApartments(localStorageToken)
-      .then((res) => {
-        console.log("first2", res);
+      .then(() => {
         setIsLoading(false);
       })
       .catch((error) => {

client/src/components/virtualTour/VirtualTourSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useSphere from "../../store/useSphere";
 import { IAppartmentComplex, ISphere } from "../../types/apartmentSphere";
 import Button from "../Button";
@@ -12,17 +12,28 @@ import InfoIcon from "../icons/InfoIcon";
 import { useNavigate } from "react-router-dom";
 import useModal from "../../store/useModal";
 import { SendEnquiryModal } from "../modals/SendEnquryModal";
+import { IAparmentRes } from "../../types/apartmentsRes";
+import useFavorites from "../../store/useFavorites";
 
 interface VirtualTourSidebarProps {
-  currentAppartment: null | IAppartmentComplex;
+  appartmentSphere: null | IAppartmentComplex;
+  apartment: null | IAparmentRes;
 }
 
-const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
+const VirtualTourSidebar = ({
+  appartmentSphere,
+  apartment,
+}: VirtualTourSidebarProps) => {
   const { currentCompassRotate } = useCompass();
   const [isActive, setIsActive] = useState(false);
   const { setSelectedSphere, selectedSphere } = useSphere();
   const { setModal } = useModal();
   const navigate = useNavigate();
+  const wing =
+    apartment?.Unit_No.split("-")[0] === "W" ? "West Wing" : "East Wing";
+
+  const [isFavorite, setIsFavorite] = useState(false);
+  const { setFavorites } = useFavorites();
 
   const handleOnShowClick = () => {
     setIsActive((prev) => !prev);
@@ -37,13 +48,59 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
   };
 
   const handleAboutComplexClick = () => {
-    navigate(`../aboutComplex`);
+    if (!apartment) return;
+    navigate(`../search/${apartment?.id}`);
   };
 
   const handleOnSendEnquiryClick = () => {
     setModal(<SendEnquiryModal />);
   };
 
+  const handleOnFavoriteClick = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    e.stopPropagation();
+    console.log("apartment", apartment);
+    if (!apartment) return;
+    const favorites = localStorage.getItem("Favorites");
+
+    if (!favorites) {
+      setIsFavorite(true);
+      const updatedFavorites = JSON.stringify([apartment]);
+
+      localStorage.setItem("Favorites", updatedFavorites);
+    } else {
+      const _favorites = JSON.parse(favorites) as IAparmentRes[];
+
+      if (_favorites.some((apart) => apart.id === apartment.id)) {
+        setIsFavorite(false);
+        const updatedFavorites = [..._favorites].filter(
+          (apart) => apart.id !== apartment.id
+        );
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        setFavorites(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      } else {
+        setIsFavorite(true);
+        const updatedFavorites = [..._favorites, apartment];
+        setFavorites(updatedFavorites);
+        const convertedFavorites = JSON.stringify(updatedFavorites);
+        localStorage.setItem("Favorites", convertedFavorites);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!apartment) return;
+    const favorites = localStorage.getItem("Favorites");
+    if (favorites) {
+      const _isFavorite = (JSON.parse(favorites) as IAparmentRes[]).some(
+        (apart) => apart.id === apartment.id
+      );
+      setIsFavorite(_isFavorite);
+    }
+  }, [apartment, apartment?.id]);
+
   return (
     <div className="absolute w-screen h-screen grid z-[99999997] pointer-events-none select-none">
       <div className="h-screen py-[72px] px-3 w-[360px]">
@@ -55,27 +112,32 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
               className="w-fit"
               onClick={handleOnBackClick}
             />
+            {/* <p className="text-[#0D1922] font-semibold leading-6 text-left text-xl"> */}
             <p className="text-[#0D1922] font-semibold text-subheadline-s leading-6 text-left">
-              1 BR Squared, 609 Sqft
+              {apartment
+                ? `${apartment?.Unit_Type}, ${Math.round(
+                    apartment?.Total_Area_Sqft
+                  )} Sqft`
+                : "1 BR Squared, 609 Sqft"}
             </p>
           </div>
           <div className="pt-3">
             <div className="flex gap-2 items-center">
               <div className="flex flex-col">
                 <p className="text-[#00BED7] text-caption-m font-medium">
-                  Rove Home Marasi Drive{" "}
+                  {apartment?.Project_Name || "Rove Home Marasi Drive"}
                 </p>
                 <div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
                   <p className="text-caption-m font-semibold leading-4">
-                    East Wing
+                    {wing}
                   </p>
                   <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                   <p className="text-caption-m font-semibold leading-4">
-                    Floor 11
+                    Floor {apartment?.Floor || 11}
                   </p>
                   <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
                   <p className="text-caption-m font-semibold leading-4">
-                    № 213
+                    № {apartment?.Unit_No || 213}
                   </p>
                 </div>
               </div>
@@ -91,7 +153,7 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                 } relative flex justify-center`}
               >
                 <img
-                  src={currentAppartment?.map}
+                  src={appartmentSphere?.map}
                   alt=""
                   className="max-h-[300px]"
                 />
@@ -110,11 +172,15 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                 <div className="flex flex-col gap-3">
                   <div className="flex justify-between text-m">
                     <p className="text-[#73787C]">Size</p>
-                    <p className="text-[#0D1922]">609 Sqft</p>
+                    <p className="text-[#0D1922]">
+                      {apartment?.Total_Area_Sqft || 609} Sqft
+                    </p>
                   </div>
                   <div className="flex justify-between text-m">
                     <p className="text-[#73787C]">Status</p>
-                    <p className="text-[#0D1922]">Available</p>
+                    <p className="text-[#0D1922]">
+                      {apartment?.Property_Status || "Available"}
+                    </p>
                   </div>
                 </div>
               </div>
@@ -136,14 +202,18 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                   buttonType="secondary"
                   onClick={handleAboutComplexClick}
                 />
-                <Button icon={<HeartIcon />} buttonType="secondary" />
+                <Button
+                  icon={<HeartIcon isFilled={isFavorite} />}
+                  buttonType="secondary"
+                  onClick={handleOnFavoriteClick}
+                />
               </div>
             </div>
           </div>
           <div className="h-14 absolute -bottom-14 left-0 w-full  flex justify-between">
             <div className="flex gap-1 py-2 items-start flex-wrap pr-[9px]">
-              {currentAppartment &&
-                currentAppartment.spheres.map((sphere) => {
+              {appartmentSphere &&
+                appartmentSphere.spheres.map((sphere) => {
                   return (
                     <div
                       onClick={() => handleOnLabelClick(sphere)}

client/src/components/virtualTour/VirtualTourTopPanel.tsx

@@ -1,18 +1,18 @@
-import useModal from "../../store/useModal";
+// import useModal from "../../store/useModal";
 import Button from "../Button";
 import HintIcon from "../icons/HintIcon";
 import ResizeIcon from "../icons/ResizeIcon";
-import HelpModal from "../modals/HelpModal";
+// import HelpModal from "../modals/HelpModal";
 import useFullScreen from "../../store/useFullScreen";
 import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 
 const VirtualTourTopPanel = () => {
-  const { setModal } = useModal();
+  // const { setModal } = useModal();
   const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
 
-  const handleOnHelpClick = () => {
-    setModal(<HelpModal />);
-  };
+  // const handleOnHelpClick = () => {
+  //   setModal(<HelpModal />);
+  // };
 
   const handleOnFullScreenClick = () => {
     if (!onFullscreen) return;
@@ -47,7 +47,7 @@ const VirtualTourTopPanel = () => {
           <Button
             buttonType="fab"
             icon={<HintIcon />}
-            onClick={handleOnHelpClick}
+            // onClick={handleOnHelpClick}
           />
         </div>
       </div>