modal + favorite page + video modal + fixes

client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -1,5 +1,6 @@
 import { IAparmentRes } from "../../../types/apartmentsRes";
 import VirtualTourIcon from "../../icons/VirtualTourIcon";
+import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";
 
 interface ApartmentDescriptionProps {
   isVisible: boolean;
@@ -48,16 +49,20 @@ const ApartmentDescription = ({
               {/* <p className="font-semibold  text-[#00BED7] text-subheadline-s">
             AED 1,668,888
           </p> */}
-              <div
-                className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg ${
-                  is3DTourAvailable ? "opacity-100" : "opacity-0"
-                }`}
-              >
-                <VirtualTourIcon />
-                <p className="text-caption-m font-semibold text-[#30B216]">
-                  3D-tour
-                </p>
-              </div>
+              {!apartmentsWithoutVirtualTour.some(
+                (aprt) => aprt.type === hoveredApartment.Unit_Type
+              ) && (
+                <div
+                  className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg ${
+                    is3DTourAvailable ? "opacity-100" : "opacity-0"
+                  }`}
+                >
+                  <VirtualTourIcon />
+                  <p className="text-caption-m font-semibold text-[#30B216]">
+                    3D-tour
+                  </p>
+                </div>
+              )}
             </div>
             <div className="w-0 h-0 border-transparent border-t-[14px] border-x-[6px] border-b-0 absolute left-6 -bottom-[13px] border-t-white"></div>
           </div>

client/src/components/complexWingPage/FloorSidebar/EastWingHighlighting.tsx

@@ -1,4 +1,4 @@
-interface FloorWestWingHighlightingProps {
+interface EastWingHighlightingProps {
   handleOnMouseOut:
     | (() => void)
     | ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
@@ -10,11 +10,11 @@ interface FloorWestWingHighlightingProps {
   ) => void;
 }
 
-const FloorWestWingHighlighting = ({
+const EastWingHighlighting = ({
   handleOnMouseOut,
   handleOnMouseOver,
   handleOnApartmentClick,
-}: FloorWestWingHighlightingProps) => {
+}: EastWingHighlightingProps) => {
   return (
     <>
       <svg
@@ -51,6 +51,7 @@ const FloorWestWingHighlighting = ({
         </svg>
 
         <svg
+          data-type="1 BR U1 Left"
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
@@ -388,6 +389,7 @@ const FloorWestWingHighlighting = ({
           ></path>
         </svg>
         <svg
+          data-type="1 BR U1 Left"
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
@@ -412,6 +414,7 @@ const FloorWestWingHighlighting = ({
           ></path>
         </svg>
         <svg
+          data-type="1 BR U1 Right"
           className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
           onMouseOut={handleOnMouseOut}
           onMouseOver={handleOnMouseOver}
@@ -440,4 +443,4 @@ const FloorWestWingHighlighting = ({
   );
 };
 
-export default FloorWestWingHighlighting;
+export default EastWingHighlighting;

client/src/components/complexWingPage/FloorSidebar/EastWingLayout.tsx

@@ -1,4 +1,4 @@
-function FloorWestWingLayout() {
+function EastWingLayout() {
   return (
     <>
       <path
@@ -441,4 +441,4 @@ function FloorWestWingLayout() {
   );
 }
 
-export default FloorWestWingLayout;
+export default EastWingLayout;

client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -1,19 +1,16 @@
 import { useState, useEffect, useRef } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import ApartmentDescription from "./ApartmentDescription";
-import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
-import FloorWestWingLayout from "./FloorWestWingLayout";
-import FloorEastWingHighlighting from "./FloorEastWingHighlighting";
-import FloorEastWingLayout from "./FloorEastWingLayout";
+import EastWingHighlighting from "./EastWingHighlighting";
+import EastWingLayout from "./EastWingLayout";
+import WestWingHighlighting from "./WestWingHighlighting";
+import WestWingLayout from "./WestWingLayout";
 import useModal from "../../../store/useModal";
 import AboutComplexModal from "../../modals/AboutComplexModal";
 import { IAparmentRes } from "../../../types/apartmentsRes";
-import FloorEastWingTopLayout from "./FloorEastWingTopLayout";
-import FloorEastWingTopHighlighting from "./FloorEastWingTopHighlighting";
-
-// import _appartment from "../../../data/appartments.json";
-// import { IAppartmentComplex } from "../../../types/apartmentSphere";
-// const appartments = _appartment as IAppartmentComplex[];
+import WestWingTopLevelsLayout from "./WestWingTopLevelsLayout";
+import WestWingTopLevelsHighlighting from "./WestWingTopLevelsHighlighting";
+import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutVirtualTour";
 
 interface IFloorSidebarProps {
   currentFloor: IDesctiptionFloor | null;
@@ -31,6 +28,9 @@ const FloorSidebar = ({
   const [hoveredApartment, setHoveredApartment] = useState<IAparmentRes | null>(
     null
   );
+  const [defaultApartments, setDefaultApartments] = useState<IAparmentRes[]>(
+    []
+  );
   const [is3DTourAvailable] = useState(true);
   const { setModal } = useModal();
   const descRef = useRef(null);
@@ -46,7 +46,7 @@ const FloorSidebar = ({
     event: React.MouseEvent<SVGSVGElement, MouseEvent>
   ) {
     const apartmentType = event.currentTarget.dataset.type;
-    const apartment = floorApartments.find(
+    const apartment = defaultApartments.find(
       (aprt) => aprt.Unit_Type === apartmentType
     );
     if (apartment) {
@@ -58,11 +58,12 @@ const FloorSidebar = ({
   function handleOnMouseOut(): void {
     setIsDescVisible(false);
   }
+
   function handleOnMouseOver(
     event: React.MouseEvent<SVGSVGElement, MouseEvent>
   ): void {
     const apartmentType = event.currentTarget.dataset.type;
-    const _hoveredApartment = floorApartments.find(
+    const _hoveredApartment = defaultApartments.find(
       (apart) => apart.Unit_Type === apartmentType
     );
     if (_hoveredApartment) {
@@ -81,6 +82,34 @@ const FloorSidebar = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (!currentFloor) return;
+    const _defaultApartment: IAparmentRes[] = apartmentsWithoutVirtualTour.map(
+      (aprt, index) => {
+        const unitNo = `${currentFloor?.wing.slice(1)}-${index}`;
+        return {
+          id: unitNo,
+          Floor: currentFloor.floor,
+          Property_Status: "Available",
+          Unit_Type: aprt.type,
+          Project_Name: "Rove Home Marasi Drive",
+          Suite_Area_Sqft: 0,
+          Balcony_Area_Sqft: 0,
+          No_Of_Bedrooms: 1,
+          Unit_No: unitNo,
+          Total_Area_Sqft: 0,
+          No_of_Bathrooms: 0,
+          Property_Name: "-",
+          Unit_View: "-",
+        };
+      }
+    );
+
+    setDefaultApartments([..._defaultApartment, ...floorApartments]);
+
+    return () => {};
+  }, [currentFloor, currentFloor?.floor, currentFloor?.wing, floorApartments]);
+
   return (
     <>
       <div
@@ -135,6 +164,54 @@ const FloorSidebar = ({
 
         <div className="px-10 bg-white flex gap-6 font-semibold text-caption-m rounded-2xl justify-center items-center flex-1 py-4">
           {currentFloor?.wing === "West Wing" ? (
+            currentFloor && currentFloor.floor <= 21 ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="204"
+                height="588"
+                fill="none"
+                viewBox="0 0 204 588"
+              >
+                <WestWingLayout />
+                <WestWingHighlighting
+                  handleOnApartmentClick={handleOnApartmentClick}
+                  handleOnMouseOut={handleOnMouseOut}
+                  handleOnMouseOver={handleOnMouseOver}
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="205"
+                height="588"
+                fill="none"
+                viewBox="0 0 205 588"
+              >
+                <WestWingTopLevelsLayout />
+                <WestWingTopLevelsHighlighting
+                  handleOnApartmentClick={handleOnApartmentClick}
+                  handleOnMouseOut={handleOnMouseOut}
+                  handleOnMouseOver={handleOnMouseOver}
+                />
+              </svg>
+            )
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              width="672"
+              height="280"
+              viewBox="0 0 672 280"
+            >
+              <EastWingLayout />
+              <EastWingHighlighting
+                handleOnApartmentClick={handleOnApartmentClick}
+                handleOnMouseOut={handleOnMouseOut}
+                handleOnMouseOver={handleOnMouseOver}
+              />
+            </svg>
+          )}
+          {/* {currentFloor?.wing === "West Wing" ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"
               fill="none"
@@ -149,37 +226,7 @@ const FloorSidebar = ({
                 handleOnMouseOver={handleOnMouseOver}
               />
             </svg>
-          ) : currentFloor && currentFloor.floor <= 21 ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="204"
-              height="588"
-              fill="none"
-              viewBox="0 0 204 588"
-            >
-              <FloorEastWingLayout />
-              <FloorEastWingHighlighting
-                handleOnApartmentClick={handleOnApartmentClick}
-                handleOnMouseOut={handleOnMouseOut}
-                handleOnMouseOver={handleOnMouseOver}
-              />
-            </svg>
-          ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="205"
-              height="588"
-              fill="none"
-              viewBox="0 0 205 588"
-            >
-              <FloorEastWingTopLayout />
-              <FloorEastWingTopHighlighting
-                handleOnApartmentClick={handleOnApartmentClick}
-                handleOnMouseOut={handleOnMouseOut}
-                handleOnMouseOver={handleOnMouseOver}
-              />
-            </svg>
-          )}
+          ) : } */}
         </div>
       </div>
     </>

client/src/components/complexWingPage/FloorSidebar/WestWingHighlighting.tsx

@@ -10,7 +10,7 @@ interface FloorEastWingHighlightingProps {
   ) => void;
 }
 
-function FloorEastWingHighlighting({
+function WestWingHighlighting({
   handleOnMouseOut,
   handleOnMouseOver,
   handleOnApartmentClick,
@@ -79,6 +79,7 @@ function FloorEastWingHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Left"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -153,6 +154,7 @@ function FloorEastWingHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Right"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -473,4 +475,4 @@ function FloorEastWingHighlighting({
   );
 }
 
-export default FloorEastWingHighlighting;
+export default WestWingHighlighting;

client/src/components/complexWingPage/FloorSidebar/WestWingLayout.tsx

@@ -1,4 +1,4 @@
-const FloorEastWingLayout = () => {
+const WestWingLayout = () => {
   return (
     <>
       <path
@@ -459,4 +459,4 @@ const FloorEastWingLayout = () => {
   );
 };
 
-export default FloorEastWingLayout;
+export default WestWingLayout;

client/src/components/complexWingPage/FloorSidebar/WestWingTopLevelsHighlighting.tsx

@@ -1,4 +1,4 @@
-interface FloorEastWingTopHighlightingProps {
+interface WestWingTopLevelsHighlightingProps {
   handleOnMouseOut:
     | (() => void)
     | ((event: React.MouseEvent<SVGSVGElement, MouseEvent>) => void);
@@ -10,11 +10,11 @@ interface FloorEastWingTopHighlightingProps {
   ) => void;
 }
 
-function FloorEastWingTopHighlighting({
+function WestWingTopLevelsHighlighting({
   handleOnMouseOut,
   handleOnMouseOver,
   handleOnApartmentClick,
-}: FloorEastWingTopHighlightingProps) {
+}: WestWingTopLevelsHighlightingProps) {
   return (
     <>
       <svg
@@ -72,6 +72,7 @@ function FloorEastWingTopHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Right"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -96,6 +97,7 @@ function FloorEastWingTopHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Left"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -220,6 +222,7 @@ function FloorEastWingTopHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Left"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -244,6 +247,7 @@ function FloorEastWingTopHighlighting({
         />
       </svg>
       <svg
+        data-type="1 BR U2 Right"
         onMouseOut={handleOnMouseOut}
         onMouseOver={handleOnMouseOver}
         onClick={handleOnApartmentClick}
@@ -379,8 +383,33 @@ function FloorEastWingTopHighlighting({
           fillOpacity="0.2"
         />
       </svg>
+      <svg
+        data-type="Studio Squared"
+        onMouseOut={handleOnMouseOut}
+        onMouseOver={handleOnMouseOver}
+        onClick={handleOnApartmentClick}
+        className="opacity-0 hover:opacity-100 ease-in-out duration-300 transition-opacity cursor-pointer"
+        x={99}
+        y={310}
+        width="78"
+        height="33"
+        viewBox="0 0 78 33"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.9351 32.593H59.7103V1.90207H19.0635V0.658203H4.00961V5.53797H0.624023V7.06293V16.1567V26.9562H5.9351V32.593Z"
+          fill="#00BED7"
+          fillOpacity="0.2"
+        />
+        <path
+          d="M77.4163 32.593V6.01846H60.0418V32.593H77.4163Z"
+          fill="#00BED7"
+          fillOpacity="0.2"
+        />
+      </svg>
     </>
   );
 }
 
-export default FloorEastWingTopHighlighting;
+export default WestWingTopLevelsHighlighting;

client/src/components/complexWingPage/FloorSidebar/WestWingTopLevelsLayout.tsx

@@ -1,4 +1,4 @@
-const FloorEastWingTopLayout = () => {
+const WestWingTopLevelsLayout = () => {
   return (
     <>
       <path
@@ -414,4 +414,4 @@ const FloorEastWingTopLayout = () => {
   );
 };
 
-export default FloorEastWingTopLayout;
+export default WestWingTopLevelsLayout;

client/src/components/complexWingPage/SequenceWing.tsx

@@ -12,9 +12,14 @@ import {
   mobileWidht,
   descriptions,
 } from "../../consts/masterplan";
-import { getApartments } from "../../api/apartments";
 import { updateAccessToken } from "../../api/updateAccessToken";
-import { IAparmentRes, IApartmentsRes } from "../../types/apartmentsRes";
+import { IAparmentRes } from "../../types/apartmentsRes";
+import useMasterplanFilters from "../../store/useMasterplanFilters";
+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";
 
 const skyGardenFloor = 22;
 
@@ -27,6 +32,7 @@ const SequenceWing = () => {
   const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
   const [currentHoveredFloor, setHoverCurrentFloor] =
     useState<null | IDesctiptionFloor>(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [currentFloor, setCurrentFloor] = useState<IDesctiptionFloor | null>(
     null
   );
@@ -41,6 +47,14 @@ const SequenceWing = () => {
   const [selectedApartments, setSelectedApartments] = useState<IAparmentRes[]>(
     []
   );
+  const {
+    apartmentTypeCheckboxes,
+    switchers,
+    multirangeSliders,
+    viewCheckboxes,
+    sortList,
+  } = useMasterplanFilters();
+  const debouncedSliders = useDebounce(multirangeSliders, 300);
 
   function handleResize() {
     const screenWidth = window.innerWidth;
@@ -149,25 +163,60 @@ const SequenceWing = () => {
 
   useEffect(() => {
     const zohoToken = localStorage.getItem("ACCESS_TOKEN");
+    setIsLoading(true);
 
-    getApartments(zohoToken)
+    getFilteredApartments(
+      zohoToken,
+      setApartments,
+      initialRoveHomeCheckboxes,
+      apartmentTypeCheckboxes,
+      debouncedSliders,
+      switchers,
+      viewCheckboxes,
+      sortList,
+      pageInitial,
+      1000
+    )
       .catch((error) => {
         const errorStatus = error.response.status;
 
         if (errorStatus === 401) {
           updateAccessToken().then((token) => {
             if (token) {
-              getApartments(token);
+              getFilteredApartments(
+                token,
+                setApartments,
+                initialRoveHomeCheckboxes,
+                apartmentTypeCheckboxes,
+                debouncedSliders,
+                switchers,
+                viewCheckboxes,
+                sortList,
+                pageInitial,
+                1000
+              );
             }
           });
         }
       })
-      .then((data) => {
-        const apartmentsData = (data as IApartmentsRes).apartments;
-        const updatedApartments = [...apartmentsData];
-        setApartments(updatedApartments);
+      .finally(() => {
+        setIsLoading(false);
       });
-  }, []);
+  }, [
+    apartmentTypeCheckboxes,
+    debouncedSliders,
+    sortList,
+    switchers,
+    viewCheckboxes,
+  ]);
+
+  useEffect(() => {
+    if (isLoading) {
+      setModal(<MasterplanLoaderModal />);
+    } else {
+      setModal(null);
+    }
+  }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">