favorite page

client/.env

@@ -1,3 +1,3 @@
 VITE_TEST_VAR=123
-# VITE_SERVER_API=http://192.168.1.158:3002
-VITE_SERVER_API=https://irth.graff.tech/api
+VITE_SERVER_API=http://192.168.1.158:3002
+# VITE_SERVER_API=https://irth.graff.tech/api

client/src/components/SwitchToggle.tsx

@@ -4,17 +4,25 @@ interface ISwitchToggleProps {
   labels: ISwitchLabel[];
   currentLabel: ISwitchLabel;
   onClick: (label: ISwitchLabel) => void;
+  isDisabled?: boolean;
 }
 
-function SwitchToggle({ labels, currentLabel, onClick }: ISwitchToggleProps) {
+function SwitchToggle({
+  labels,
+  currentLabel,
+  onClick,
+  isDisabled = false,
+}: ISwitchToggleProps) {
   return (
     <div className="flex bg-white rounded-lg border border-[#E2E2DC] p-1 select-none text-s w-fit">
       {labels.map((lab) => (
         <div
           key={lab.id}
-          onClick={() => onClick(lab)}
+          onClick={() => !isDisabled && onClick(lab)}
           className={`${
-            lab.id === currentLabel.id ? "bg-[#00BED7] text-white" : ""
+            lab.id === currentLabel.id
+              ? "bg-[#00BED7] text-white"
+              : `${isDisabled ? "text-[#0D192266]" : ""}`
           } rounded-lg px-6 py-[10px] cursor-pointer transition-all duration-300 ease-in-out`}
         >
           {lab.label}

client/src/components/apartmentPage/StudioDescriptionSection.tsx

@@ -1,11 +1,11 @@
-import { formatNumber } from "../../calc/formatNumber";
+// import { formatNumber } from "../../calc/formatNumber";
 
 const StudioDescriptionSection = () => {
   return (
     <section className="grid grid-cols-12 lg:gap-4 gap-3">
       <div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
         <div className="flex flex-col">
-          <h2 className="text-[#0D1922] text-subheadline-l font-bold">
+          <h2 className="text-[#0D1922] text-subheadline-l font-semibold">
             Studio flex
           </h2>
           <p className="text-[#00BED7] text-subheadline-s font-semibold">

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

@@ -4,21 +4,28 @@ import { apartmentsWithoutVirtualTour } from "../../../consts/apartmentsWithoutV
 
 interface ApartmentDescriptionProps {
   isVisible: boolean;
-  is3DTourAvailable: boolean;
   descRef: React.LegacyRef<HTMLDivElement>;
   hoveredApartment: IAparmentRes | null;
+  apartmentDataType: string | null;
 }
 
 const ApartmentDescription = ({
   isVisible,
-  is3DTourAvailable,
   descRef,
   hoveredApartment,
+  apartmentDataType,
 }: ApartmentDescriptionProps) => {
   const wing =
     hoveredApartment && hoveredApartment.Unit_No.split("-")[0] === "E"
       ? "East Wing"
       : "West Wing";
+  const isVirtualTourAvailiable =
+    hoveredApartment &&
+    !apartmentsWithoutVirtualTour.some(
+      (aprt) =>
+        aprt.type === hoveredApartment.Unit_Type ||
+        aprt.type === apartmentDataType
+    );
 
   return (
     <>
@@ -49,13 +56,9 @@ const ApartmentDescription = ({
               {/* <p className="font-semibold  text-[#00BED7] text-subheadline-s">
             AED 1,668,888
           </p> */}
-              {!apartmentsWithoutVirtualTour.some(
-                (aprt) => aprt.type === hoveredApartment.Unit_Type
-              ) && (
+              {isVirtualTourAvailiable && (
                 <div
-                  className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg ${
-                    is3DTourAvailable ? "opacity-100" : "opacity-0"
-                  }`}
+                  className={`bg-[#30B21614] text-[#30B216] px-2 py-[6px] flex gap-1 items-center rounded-lg opacity-100`}
                 >
                   <VirtualTourIcon />
                   <p className="text-caption-m font-semibold text-[#30B216]">

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

@@ -33,7 +33,6 @@ const FloorSidebar = ({
     string | null
   >(null);
   const [apartments, setApartments] = useState<IAparmentRes[]>([]);
-  const [is3DTourAvailable] = useState(true);
   const { setModal } = useModal();
   const descRef = useRef(null);
 
@@ -134,7 +133,7 @@ const FloorSidebar = ({
           hoveredApartment={hoveredApartment}
           descRef={descRef}
           isVisible={isDescVisible}
-          is3DTourAvailable={is3DTourAvailable}
+          apartmentDataType={hoveredApartmentType}
         />
       </div>
       <div

client/src/components/favoritesPage/FavoriteApartmentCard.tsx

@@ -21,11 +21,12 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
   const { Floor, Unit_Type, Total_Area_Sqft, Unit_No } = card;
   const wing = Unit_No.split("-")[0] === "E" ? "East" : "West";
   const navigate = useNavigate();
-  const isLayoutType = unitTypeWithLayouts.some((type) => type === Unit_Type);
   const { setFavorites } = useFavorites();
+  const isLayoutType = unitTypeWithLayouts.some((type) => type === Unit_Type);
   const layoutImage = isLayoutType
     ? apartmentLayoutImages[Unit_Type]
     : apartmentRoutes.find((apr) => apr.type === card.Unit_Type)?.layout;
+  console.log("card", card);
 
   const { setModal } = useModal();
 
@@ -113,7 +114,7 @@ const FavoriteAppartmentCard = ({ card }: FavoriteAppartmentCardProps) => {
             <p className="text[#0D1922] text-s">
               {Unit_Type}, {Total_Area_Sqft} Sqft
             </p>
-            <p className="text-[#00BED7] text-m font-bold">
+            <p className="text-[#00BED7] text-m font-semibold">
               {/* AED {formatNumber(cost, ",", 3, 1)} */}
               Unavailiable
             </p>

client/src/components/favoritesPage/FavoriteSliderCard.tsx

@@ -1,5 +1,7 @@
 // import { formatNumber } from "../../calc/formatNumber";
+import { apartmentLayoutImages } from "../../consts/apartmentLayoutsImages";
 import { apartmentRoutes } from "../../consts/apartmentsRoutes";
+import { unitTypeWithLayouts } from "../../consts/defaultApartmentTypes";
 import useFavorites from "../../store/useFavorites";
 import { IAparmentRes } from "../../types/apartmentsRes";
 import Button from "../Button";
@@ -14,9 +16,12 @@ interface FavoriteSliderCardProps {
 const FavoriteSliderCard = ({ card, elementRef }: FavoriteSliderCardProps) => {
   const wing = card.Unit_No.split("-")[0] === "E" ? "East" : "West";
   const { setFavorites } = useFavorites();
-  const layoutImage = apartmentRoutes.find(
-    (apr) => apr.type === card.Unit_Type
-  )?.layout;
+  const isLayoutType = unitTypeWithLayouts.some(
+    (type) => type === card.Unit_Type
+  );
+  const layoutImage = isLayoutType
+    ? apartmentLayoutImages[card.Unit_Type]
+    : apartmentRoutes.find((apr) => apr.type === card.Unit_Type)?.layout;
 
   const handleOnAddFavoriteClick = (
     e: React.MouseEvent<HTMLButtonElement, MouseEvent>

client/src/components/modals/AboutComplexModal.tsx

@@ -28,7 +28,7 @@ const AboutComplexModal = ({
   const unitNo = apartment.Unit_No;
   const wing = unitNo.split("-")[0] === "E" ? "East" : "West";
   const isVirtualTourAvailialbe = !apartmentsWithoutVirtualTour.some(
-    (aprt) => aprt.type === apartment.Unit_Type
+    (aprt) => aprt.type === apartment.Unit_Type || aprt.type === apartmentType
   );
   const [isFavorite, setIsFavorite] = useState(false);
   const { setFavorites } = useFavorites();
@@ -141,6 +141,7 @@ const AboutComplexModal = ({
               className="absolute right-10 bottom-10"
             />
             <SwitchToggle
+              isDisabled
               labels={apartmentLayouts}
               currentLabel={currentLabel}
               onClick={handleOnSwitchClick}

client/src/components/modals/SendEnquryModal.tsx

@@ -3,7 +3,7 @@ import Button from "../Button";
 import CrossIcon from "../icons/CrossIcon";
 import MasterInput from "../MasterInput";
 import MasterSelector from "../MasterSelector";
-import { formatNumber } from "../../calc/formatNumber";
+// import { formatNumber } from "../../calc/formatNumber";
 import SuccessSentEnquiry from "./SuccessSentEnquiry";
 
 const SendEnquiryModal = () => {

client/src/consts/apartmentsRoutes.ts

@@ -23,7 +23,7 @@ const apartmentRoutes: IApartmentRoute[] = [
     type: "Studio Flex",
     virtualTour: "apartments-studio-1",
     id: "4",
-    layout: "/images/layouts/studio_flex_left.jpg",
+    layout: "/images/layouts/studio_flex_left.png",
   },
 ];
 

client/src/consts/apartmentsWithoutVirtualTour.ts

@@ -9,6 +9,26 @@ const apartmentsWithoutVirtualTour: IApartmentWithoutVirtualTour[] = [
   { type: "1 BR U1 Right", layout: "/images/layouts/layout-6.jpg", id: "2" },
   { type: "1 BR U2 Left", layout: "/images/layouts/layout-7.jpg", id: "3" },
   { type: "1 BR U2 Right", layout: "/images/layouts/layout-8.jpg", id: "4" },
+  {
+    type: "1 BR Squared-A Left",
+    layout: "/images/layouts/1br_a_left.png",
+    id: "5",
+  },
+  {
+    type: "1 BR Squared-A Right",
+    layout: "/images/layouts/1br_a_right.png",
+    id: "6",
+  },
+  {
+    type: "2 BR Squared-A Right",
+    layout: "/images/layouts/2br_a_right.png",
+    id: "7",
+  },
+  {
+    type: "2 BR Squared-A Left",
+    layout: "/images/layouts/2br_a_left.png",
+    id: "8",
+  },
 ];
 
 export { apartmentsWithoutVirtualTour };

client/src/index.css

@@ -26,6 +26,14 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "Usual";
+  src: url("/fonts/Usual/Medium.otf") format("opentype");
+
+  font-weight: 600;
+  font-style: normal;
+}
+
 body {
   background-color: #f3f3f2;
 }

client/src/pages/AboutComplex.tsx

@@ -130,7 +130,7 @@ const AboutComplex = () => {
       <section
         className={`xl:pt-16 sm:pt-10 font-usual ${
           isMobile ? "pt-16" : ""
-        } grid grid-cols-12`}
+        } grid grid-cols-12 select-none`}
       >
         <div className="flex px-6 py-4 col-span-full h-16 relative">
           <div className="fixed z-[100]">
@@ -287,9 +287,7 @@ const AboutComplex = () => {
                 </div>
                 <div>
                   <p className="text-s text-[#0D1922]">341 Sqft</p>
-                  <p className="font-bold text-m text-[#00BED7]">
-                    AED 2,408,888
-                  </p>
+                  <p className="font-bold text-m text-[#00BED7]">Unvailiable</p>
                 </div>
               </div>
               <img

client/src/pages/Company.tsx

@@ -6,7 +6,11 @@ import Footer from "../components/Footer";
 
 const Company = () => {
   return (
-    <section className={`xl:pt-16 pt-10 font-usual ${isMobile ? "pt-24" : ""}`}>
+    <section
+      className={`xl:pt-16 pt-10 font-usual ${
+        isMobile ? "pt-24" : ""
+      } select-none `}
+    >
       <h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:pb-16 pb-10 xl:px-6 px-4 pt-10 xl:pt-16">
         IRTH is a privately held real estate investment platform part of a large
         local family conglomerate from Dubai

client/src/pages/ComplexWing.tsx

@@ -4,7 +4,7 @@ import SequenceWing from "../components/complexWingPage/SequenceWing";
 
 const ComplexWing = () => {
   return (
-    <div className="overflow-hidden h-screen w-screen ">
+    <div className="overflow-hidden h-screen w-screen select-none">
       <ComplexTopPanel />
       <SequenceWing />
       <ButtomPanelCompass />

client/src/pages/Favorites.tsx

@@ -186,7 +186,7 @@ const Favorites = () => {
   }, [setFavorites, sortList]);
 
   return (
-    <div className="overflow-scroll h-screen w-screen pt-14">
+    <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="p-6 pb-16">
         <div className="pb-6">
           <div className="flex justify-between w-full items-center border-b pb-[11px]">

client/src/pages/Search.tsx

@@ -4,7 +4,7 @@ import SidebarFilters from "../components/searchPage/SidebarFilters";
 
 const Search = () => {
   return (
-    <div className="overflow-scroll h-screen w-screen pt-14">
+    <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="flex">
         <SidebarFilters />
         <LayoutOptions />

client/src/pages/SearchApartment.tsx

@@ -2,7 +2,6 @@ import Footer from "../components/Footer";
 import ButtonPanel from "../components/apartmentPage/ButtonPanel";
 import ApartmentLayout from "../components/apartmentPage/ApartmentLayout";
 import ApartmentSidebar from "../components/ApartmentSidebar";
-// import SimilarSlider from "../components/searchApartment/SimilarSlider";
 import StudioDescriptionSection from "../components/apartmentPage/StudioDescriptionSection";
 import { useEffect, useState } from "react";
 import { getApartments } from "../api/apartments";
@@ -77,7 +76,7 @@ const ApartmentPage = () => {
   }, [isLoading, setModal]);
 
   return (
-    <div className="overflow-scroll h-screen w-screen pt-14">
+    <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="grid grid-cols-9 px-4 pt-6 pb-16 gap-4">
         <div className="flex flex-col lg:col-span-7 col-span-full ">
           {currentApartment && (

client/src/pages/VirtualTour.tsx

@@ -29,7 +29,7 @@ const VirtualTour = () => {
   }, [appartmentTypeId]);
 
   return (
-    <div className="overflow-hidden h-screen w-screen">
+    <div className="overflow-hidden h-screen w-screen select-none">
       <VirtualTourTopPanel />
       <VirtualTourSidebar currentAppartment={currentAppartment} />
       <Canvas camera={{ fov: 90 }}>