unit slider completed

src/components/SliderWithTabs.tsx

@@ -1,10 +0,0 @@
-interface SliderWithTabsProps {
-  tabs: string[];
-  children: React.ReactNode;
-}
-
-function SliderWithTabs({ tabs, children }: SliderWithTabsProps) {
-  return <div></div>;
-}
-
-export default SliderWithTabs;

src/components/UnitCard.tsx

@@ -11,7 +11,8 @@ import { Link } from "react-router";
 import complexNameToSlug from "../utils/complexNameToSlug";
 import { projects } from "../data/projects";
 import { useEffect, useState } from "react";
-import getUnitTypeSlug from "../utils/getUnitTypeSlug";
+import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
+import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
 
 function UnitCard({ unit }: { unit: Unit }) {
   const { favoriteUnits, setFavoriteUnits } = useFavoritesUnitsStore();
@@ -75,10 +76,11 @@ function UnitCard({ unit }: { unit: Unit }) {
       </div>
       <div className="2xl:rounded-[0.556vw] rounded-xl 2xl:p-[0.556vw] p-2 overflow-hidden mx-auto">
         <img
-          src={`/images/unit-types/${complexSlug}/${getUnitTypeSlug(
-            complexSlug,
-            unit.unitType
-          )}.jpg`}
+          src={`/images/unit-types/${complexSlug}/${
+            complexSlug === "marasi-drive"
+              ? getUnitTypeVariantMarasiDrive(unit.unitNo)
+              : getUnitTypeVariantDubaiMarina(unit.unitNo)
+          }.jpg`}
           alt=""
           className="object-cover pointer-events-none"
         />

src/components/UnitSlider.tsx

@@ -0,0 +1,315 @@
+import { useEffect, useState } from "react";
+import { projects } from "../data/projects";
+import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
+import Button from "./ui/Button";
+import { AnimatePresence, motion } from "framer-motion";
+import ChevronLeftIcon from "./icons/ChevronLeftIcon";
+import ChevronRightIcon from "./icons/ChevronRightIcon";
+import { useSwipeable } from "react-swipeable";
+import clsx from "clsx";
+
+interface UnitSliderProps {
+  unitTypeVariant: string;
+  complexName: string;
+}
+// костыль: в Мараси 2 bedroom b ЕДИНСТВЕННАЯ НЕ ЗЕРКАЛЬНАЯ ХАТА среди всех
+function UnitSlider({ unitTypeVariant, complexName }: UnitSliderProps) {
+  const [hasSide, setHasSide] = useState(false);
+
+  const [selectedSide, setSelectedSide] = useState<"left" | "right">();
+
+  const [isLoft, setIsLoft] = useState(false);
+
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(
+    () =>
+      setSelectedSide(
+        hasSide || unitTypeVariant === "2-bedroom-b" ? undefined : "left"
+      ),
+    [hasSide, unitTypeVariant]
+  );
+
+  useEffect(() => {
+    setIsLoft(unitTypeVariant.includes("loft"));
+    setHasSide(
+      unitTypeVariant.endsWith("-left") || unitTypeVariant.endsWith("-right")
+    );
+  }, [unitTypeVariant]);
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () =>
+      setCurrentSlide(Math.min(currentSlide + 1, isLoft ? 2 : 1)),
+    onSwipedRight: () => setCurrentSlide(Math.max(currentSlide - 1, 0)),
+    preventScrollOnSwipe: true,
+    touchEventOptions: {
+      passive: false,
+    },
+    trackMouse: true,
+  });
+
+  return (
+    <div
+      className="relative w-full h-full overflow-hidden bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl group"
+      {...handlers}
+    >
+      <motion.div
+        animate={{
+          x: `calc(-${currentSlide} * 100%)`,
+        }}
+        transition={{
+          duration: 0.5,
+          ease: "easeInOut",
+        }}
+        className="flex h-full w-full relative top-0"
+      >
+        {isLoft ? (
+          <>
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={`${selectedSide}-lower`}
+                initial={{
+                  opacity: 0,
+                }}
+                animate={{
+                  opacity: 1,
+                }}
+                exit={{
+                  opacity: 0,
+                }}
+                className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
+              >
+                <UnitTypeImageWithMarkers
+                  complexName={complexName}
+                  unitTypeVariant={
+                    hasSide
+                      ? unitTypeVariant
+                      : `${unitTypeVariant}-lower-${selectedSide}`
+                  }
+                  floor={"lower"}
+                  legend={
+                    projects
+                      .find((project) => project.slug === complexName)
+                      ?.types.find(
+                        (type) =>
+                          type.slug ===
+                          (hasSide
+                            ? unitTypeVariant
+                                .split("-")
+                                .slice(0, isLoft ? -2 : -1)
+                                .join("-")
+                            : unitTypeVariant)
+                      )?.legend || []
+                  }
+                />
+              </motion.div>
+            </AnimatePresence>
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={`${selectedSide}-upper`}
+                initial={{
+                  opacity: 0,
+                }}
+                animate={{
+                  opacity: 1,
+                }}
+                exit={{
+                  opacity: 0,
+                }}
+                className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
+              >
+                <UnitTypeImageWithMarkers
+                  complexName={complexName}
+                  unitTypeVariant={
+                    hasSide
+                      ? unitTypeVariant.replace("lower", "upper")
+                      : `${unitTypeVariant}-upper-${selectedSide}`
+                  }
+                  floor={"upper"}
+                  legend={
+                    projects
+                      .find((project) => project.slug === complexName)
+                      ?.types.find(
+                        (type) =>
+                          type.slug ===
+                          (hasSide
+                            ? unitTypeVariant
+                                .split("-")
+                                .slice(0, isLoft ? -2 : -1)
+                                .join("-")
+                            : unitTypeVariant)
+                      )?.legend || []
+                  }
+                />
+              </motion.div>
+            </AnimatePresence>
+          </>
+        ) : (
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={`${selectedSide}`}
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+              }}
+              exit={{
+                opacity: 0,
+              }}
+              className="shrink-0 w-full 2xl:p-[2.222vw] p-6"
+            >
+              <UnitTypeImageWithMarkers
+                complexName={complexName}
+                unitTypeVariant={
+                  hasSide || unitTypeVariant === "2-bedroom-b"
+                    ? unitTypeVariant
+                    : `${unitTypeVariant}-${selectedSide}`
+                }
+                legend={
+                  projects
+                    .find((project) => project.slug === complexName)
+                    ?.types.find(
+                      (type) =>
+                        type.slug ===
+                        (hasSide
+                          ? unitTypeVariant.split("-").slice(0, -1).join("-")
+                          : unitTypeVariant)
+                    )?.legend || []
+                }
+              />
+            </motion.div>
+          </AnimatePresence>
+        )}
+        <div className="w-full shrink-0">
+          <img
+            src={`/images/interiors/${complexName}/${
+              complexName === "marasi-drive"
+                ? unitTypeVariant.split("-").slice(0, 2).join("-")
+                : hasSide && unitTypeVariant !== "2-bedroom-b"
+                ? unitTypeVariant
+                    .split("-")
+                    .slice(0, isLoft ? -2 : -1)
+                    .join("-")
+                : unitTypeVariant
+            }.png`}
+            alt=""
+            className="object-cover h-full pointer-events-none 2xl:rounded-[1.111vw] rounded-2xl"
+          />
+        </div>
+      </motion.div>
+      <AnimatePresence mode="wait">
+        {!hasSide &&
+          unitTypeVariant !== "2-bedroom-b" &&
+          currentSlide !== (isLoft ? 2 : 1) && (
+            <motion.div
+              initial={{
+                opacity: 0,
+              }}
+              animate={{
+                opacity: 1,
+              }}
+              exit={{
+                opacity: 0,
+              }}
+              className="flex 2xl:gap-[0.556vw] gap-2 items-center absolute 2xl:top-[2.222vw] top-6 left-1/2 -translate-x-1/2 max-md:hidden"
+            >
+              <p className="text-btn-m">Left</p>
+              <div
+                className="2xl:w-[2.778vw] w-10 2xl:p-[0.139vw] p-0.5 rounded-full cursor-pointer transition-colors bg-[#00BED7]"
+                onClick={() =>
+                  setSelectedSide(selectedSide === "left" ? "right" : "left")
+                }
+              >
+                <motion.div
+                  className="2xl:size-[1.389vw] size-5 rounded-full bg-white"
+                  initial={{
+                    x: selectedSide === "right" ? "80%" : 0,
+                  }}
+                  animate={{
+                    x: selectedSide === "right" ? "80%" : 0,
+                  }}
+                  transition={{ bounce: 0, duration: 0.3 }}
+                />
+              </div>
+              <p className="text-btn-m">Right</p>
+            </motion.div>
+          )}
+      </AnimatePresence>
+      <div className="absolute flex 2xl:gap-[0.278vw] gap-1 items-center 2xl:bottom-[1.667vw] md:max-2xl:bottom-6 bottom-4 left-1/2 -translate-x-1/2">
+        {isLoft ? (
+          <>
+            <Button
+              variant={currentSlide === 0 ? "cta" : "secondary"}
+              onClick={() => setCurrentSlide(0)}
+              className="max-md:hidden"
+            >
+              Lower
+            </Button>
+            <Button
+              variant={currentSlide === 1 ? "cta" : "secondary"}
+              onClick={() => setCurrentSlide(1)}
+              className="max-md:hidden"
+            >
+              Upper
+            </Button>
+          </>
+        ) : (
+          <Button
+            variant={currentSlide === 0 ? "cta" : "secondary"}
+            onClick={() => setCurrentSlide(0)}
+            className="max-md:hidden"
+          >
+            Layout
+          </Button>
+        )}
+        <Button
+          variant={currentSlide === (isLoft ? 2 : 1) ? "cta" : "secondary"}
+          onClick={() => setCurrentSlide(isLoft ? 2 : 1)}
+          className="max-md:hidden"
+        >
+          Interior
+        </Button>
+        {Array.from({ length: isLoft ? 3 : 2 }).map((_, index) => (
+          <div
+            key={index}
+            className={clsx(
+              "md:hidden size-2 rounded-full transition-colors",
+              currentSlide === index ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
+            )}
+          />
+        ))}
+      </div>
+      <Button
+        variant="secondary"
+        className="absolute top-1/2 -translate-y-1/2 2xl:left-[2.778vw] group-hover:opacity-100 opacity-0 transition-opacity duration-300 max-2xl:hidden"
+        onlyIcon
+        onClick={() =>
+          setCurrentSlide(currentSlide === 0 ? 0 : currentSlide - 1)
+        }
+        disabled={currentSlide === 0}
+      >
+        <div className="2xl:size-[1.389vw] size-5">
+          <ChevronLeftIcon />
+        </div>
+      </Button>
+      <Button
+        variant="secondary"
+        className="absolute top-1/2 -translate-y-1/2 2xl:right-[2.778vw] group-hover:opacity-100 opacity-0 transition-opacity duration-300 max-2xl:hidden"
+        onlyIcon
+        onClick={() =>
+          setCurrentSlide(
+            currentSlide === (isLoft ? 2 : 1) ? currentSlide : currentSlide + 1
+          )
+        }
+        disabled={currentSlide === (isLoft ? 2 : 1)}
+      >
+        <div className="2xl:size-[1.389vw] size-5">
+          <ChevronRightIcon />
+        </div>
+      </Button>
+    </div>
+  );
+}
+
+export default UnitSlider;

src/components/UnitTypeCard.tsx

@@ -23,7 +23,9 @@ function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
       </div>
       <div className="2xl:p-[1.111vw] 2xl:rounded-[0.556vw]">
         <img
-          src={`/images/unit-types/${project.slug}/${type.slug}-left.jpg`}
+          src={`/images/unit-types/${project.slug}/${type.slug}${
+            type.slug.includes("loft") ? "-lower" : ""
+          }-left.jpg`}
           alt=""
         />
       </div>

src/components/UnitTypeImageWithMarkers.tsx

@@ -1,13 +1,12 @@
-import { useEffect, useRef, useState } from "react";
-import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
-import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
+import { useRef, useState } from "react";
 
 function UnitTypeImageWithMarkers({
   complexName,
   legend,
   floor,
-  unitNumber,
-}: {
+  unitTypeVariant,
+}: // unitNumber,
+{
   complexName: string;
   legend: {
     name: string;
@@ -16,7 +15,8 @@ function UnitTypeImageWithMarkers({
     floor?: "lower" | "upper";
   }[];
   floor?: "lower" | "upper";
-  unitNumber: string;
+  unitTypeVariant: string;
+  // unitNumber: string;
 }) {
   const refRect = useRef<SVGRectElement>(null);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -29,17 +29,15 @@ function UnitTypeImageWithMarkers({
     return item.floor === floor;
   });
 
-  console.log(legend, floor);
+  // const [unitTypeVariant, setUnitTypeVariant] = useState<string>();
 
-  const [unitTypeVariant, setUnitTypeVariant] = useState<string>();
-
-  useEffect(() => {
-    setUnitTypeVariant(
-      complexName === "dubai-marina"
-        ? getUnitTypeVariantDubaiMarina(unitNumber)
-        : getUnitTypeVariantMarasiDrive(unitNumber)
-    );
-  }, [complexName, unitNumber]);
+  // useEffect(() => {
+  //   setUnitTypeVariant(
+  //     complexName === "dubai-marina"
+  //       ? getUnitTypeVariantDubaiMarina(unitNumber, floor)
+  //       : getUnitTypeVariantMarasiDrive(unitNumber)
+  //   );
+  // }, [complexName, unitNumber, floor]);
 
   return (
     <svg
@@ -69,7 +67,6 @@ function UnitTypeImageWithMarkers({
         width={1312}
         height={1312}
         transform="scale(.5)"
-        // xlinkHref={`/images/unit-types/${complexName}/${unitType}.png`}
         xlinkHref={`/images/unit-types/${complexName}/${unitTypeVariant}.jpg`}
         style={{
           isolation: "isolate",

src/components/UnitTypeItem.tsx

@@ -1,14 +1,12 @@
-// import PlayIcon from "./icons/PlayIcon";
 import ShareIcon from "./icons/ShareIcon";
 import Button from "./ui/Button";
 import Project from "../types/Project";
 import UnitType from "../types/UnitType";
 import { useNavigate } from "react-router";
-import { useEffect, useState } from "react";
-import UnitTypeImageWithMarkers from "./UnitTypeImageWithMarkers";
 import PlayIcon from "./icons/PlayIcon";
 import VideoModal from "./VideoModal";
 import useModalStore from "../stores/useModalStore";
+import UnitSlider from "./UnitSlider";
 
 interface UnitTypeItemProps {
   project: Project;
@@ -25,76 +23,11 @@ function UnitTypeItem({ project, type }: UnitTypeItemProps) {
     });
   }
 
-  const [selectedFloor, setSelectedFloor] = useState<"lower" | "upper">();
-
-  useEffect(() => {
-    if (type.slug.includes("loft")) {
-      setSelectedFloor("lower");
-    }
-  }, [type.slug]);
-
   const { setModal } = useModalStore();
 
   return (
     <div className="2xl:p-[2.222vw] md:max-2xl:p-[3.125vw] p-4 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
-      <div className="relative 2xl:w-full flex flex-col items-center justify-center bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl 2xl:p-[2.222vw] p-6 2xl:gap-[1.111vw] gap-4">
-        {/* {type.legend && (
-          <div className="absolute 2xl:top-[1.111vw] 2xl:left-[1.111vw] 2xl:space-y-[0.556vw] space-y-2 2xl:block hidden">
-            {type.legend.map((item, index) => (
-              <div
-                key={index}
-                className="flex items-center 2xl:gap-[0.556vw] gap-2"
-              >
-                <div className="bg-[#00BED7] flex-shrink-0 2xl:w-[1.111vw] w-4 2xl:h-[1.111vw] h-4 flex items-center justify-center rounded-full">
-                  <p className="text-caption-s font-mono text-white">
-                    {index + 1}
-                  </p>
-                </div>
-                <p className="text-caption-m">{item.name}</p>
-              </div>
-            ))}
-          </div>
-        )} */}
-        {/* <img
-          src={`/images/unit-types/${project.slug}/${type.slug}${
-            selectedFloor ? `-${selectedFloor}` : ""
-          }-markers.jpg`}
-          alt=""
-          className="2xl:w-[40.625vw] 2xl:h-[37.778vw] object-cover 2xl:block hidden"
-        />
-        <img
-          src={`/images/unit-types/${project.slug}/${type.slug}${
-            selectedFloor ? `-${selectedFloor}` : ""
-          }.jpg`}
-          alt=""
-          className="2xl:w-[40.625vw] 2xl:h-[37.778vw] object-cover 2xl:hidden block"
-        /> */}
-
-        <UnitTypeImageWithMarkers
-          complexName={project.slug}
-          // unitType={type.slug}
-          legend={type.legend || []}
-          floor={selectedFloor}
-          unitNumber={type.slug}
-        />
-
-        {type.slug.includes("loft") && (
-          <div className="flex gap-2">
-            <Button
-              variant={selectedFloor === "lower" ? "cta" : "secondary"}
-              onClick={() => setSelectedFloor("lower")}
-            >
-              Lower
-            </Button>
-            <Button
-              variant={selectedFloor === "upper" ? "cta" : "secondary"}
-              onClick={() => setSelectedFloor("upper")}
-            >
-              Upper
-            </Button>
-          </div>
-        )}
-      </div>
+      <UnitSlider unitTypeVariant={type.slug} complexName={project.slug} />
       <div className="flex flex-col justify-between 2xl:w-[21.944vw] flex-shrink-0">
         <div className="2xl:space-y-[1.667vw] space-y-6">
           <div className="flex items-start justify-between">

src/pages/UnitPage.tsx

@@ -10,12 +10,14 @@ import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
 import HeartIcon from "../components/icons/HeartIcon";
 import slugToComplexName from "../utils/slugToComplexName";
 import getUnitTypeSlug from "../utils/getUnitTypeSlug";
-import { projects } from "../data/projects";
+// import { projects } from "../data/projects";
 import { useEffect, useState } from "react";
-import UnitTypeImageWithMarkers from "../components/UnitTypeImageWithMarkers";
+// import UnitTypeImageWithMarkers from "../components/UnitTypeImageWithMarkers";
 import { getUnitTypeVariantMarasiDrive } from "../utils/getUnitTypeVariantMarasiDrive";
 import { formattedUnitTypes } from "../data/formattedUnitTypes";
+import UnitSlider from "../components/UnitSlider";
 import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
+// import { getUnitTypeVariantDubaiMarina } from "../utils/getUnitTypeVariantDubaiMarina";
 // import { useEffect } from "react";
 // import PlayIcon from "../components/icons/PlayIcon";
 // import { useRef } from "react";
@@ -69,8 +71,6 @@ function UnitPage() {
     else setFavoriteUnits([...favoriteUnits, unit]);
   }
 
-  // const videoButtonRef = useRef<HTMLButtonElement>(null);
-
   if (!unit) return null;
 
   function handleShare() {
@@ -87,63 +87,22 @@ function UnitPage() {
       </head>
       <body>
         <div className="2xl:p-[2.222vw] md:max-2xl:p-6 p-4 max-2xl:pb-0 bg-white flex 2xl:gap-[2.222vw] md:max-2xl:gap-8 gap-6 max-2xl:flex-col">
-          <div className="relative 2xl:w-full flex flex-col items-center justify-center bg-[#F3F3F2] 2xl:rounded-[1.111vw] rounded-xl 2xl:p-[2.222vw] p-6 2xl:gap-[1.111vw] gap-4">
-            <UnitTypeImageWithMarkers
-              complexName={params.complexName!}
-              floor={selectedFloor}
-              legend={
-                projects
-                  .find((project) => project.slug === params.complexName)
-                  ?.types.find(
-                    (type) =>
-                      type.slug ===
-                      (params.complexName === "marasi-drive"
-                        ? getUnitTypeVariantMarasiDrive(unit.unitNo)
-                        : getUnitTypeVariantDubaiMarina(unit.unitNo)
-                      )
-                        .split("-")
-                        .slice(0, -1)
-                        .join("-")
-                  )?.legend || []
-              }
-              unitNumber={unit.unitNo}
-            />
-
-            {/* <img
-          src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(
-            params.complexName!,
-            unit.unitType
-          )}${selectedFloor ? `-${selectedFloor}` : ""}-markers.jpg`}
-          alt=""
-          className="2xl:w-[40.625vw] 2xl:h-[37.778vw] object-cover 2xl:block hidden"
-        />
-        <img
-          src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(
-            params.complexName!,
-            unit.unitType
-          )}${selectedFloor ? `-${selectedFloor}` : ""}.jpg`}
-          alt=""
-          className="2xl:w-[40.625vw] 2xl:h-[37.778vw] object-cover 2xl:hidden block"
-        /> */}
-            {getUnitTypeSlug(params.complexName!, unit.unitType).includes(
-              "loft"
-            ) && (
-              <div className="flex gap-2">
-                <Button
-                  variant={selectedFloor === "lower" ? "cta" : "secondary"}
-                  onClick={() => setSelectedFloor("lower")}
-                >
-                  Lower
-                </Button>
-                <Button
-                  variant={selectedFloor === "upper" ? "cta" : "secondary"}
-                  onClick={() => setSelectedFloor("upper")}
-                >
-                  Upper
-                </Button>
-              </div>
-            )}
-          </div>
+          <UnitSlider
+            unitTypeVariant={
+              params.complexName === "marasi-drive"
+                ? getUnitTypeVariantMarasiDrive(unit.unitNo)
+                : getUnitTypeVariantDubaiMarina(unit.unitNo, selectedFloor)
+            }
+            complexName={params.complexName!}
+          />
+          <img
+            src={`/images/unit-types/${params.complexName}/${getUnitTypeSlug(
+              params.complexName!,
+              unit.unitType
+            )}${selectedFloor ? `-${selectedFloor}` : ""}.jpg`}
+            alt=""
+            className="2xl:w-[40.625vw] 2xl:h-[37.778vw] object-cover 2xl:hidden block"
+          />
           <div className="flex flex-col justify-between md:max-2xl:gap-6 gap-4 2xl:w-[21.944vw] flex-shrink-0">
             <div className="2xl:space-y-[1.667vw] space-y-6">
               <div className="flex justify-between items-start">

src/pages/UnitTypeItemPage.tsx

@@ -19,6 +19,10 @@ function UnitTypeItemPage() {
     setUnitType(unitType);
   }, [unitTypeSlug]);
 
+  useEffect(() => {
+    console.log(unitType);
+  }, [unitType]);
+
   if (unitType) {
     return (
       <div>

src/utils/getUnitTypeVariantDubaiMarina.ts

@@ -1,9 +1,20 @@
 export function getUnitTypeVariantDubaiMarina(
-    unitNumber: string
+    unitNumber: string,
+    loftFloor?: 'lower' | 'upper'
 ) {
     const isCombinable = unitNumber.endsWith('C')
     const formattedUnitNumber = isCombinable ? +unitNumber.slice(-4, -2) : +unitNumber.slice(-2);
-    const floor = +unitNumber.slice(0, isCombinable ? -4 : -2)
+    // const floor = +unitNumber.slice(0, isCombinable ? -4 : -2)
+
+    if (loftFloor) {
+        if ([1, 7, 8, 14].includes(formattedUnitNumber)) return `1-bedroom-loft-c-${loftFloor}-${formattedUnitNumber % 7 === 0 ? 'left' : "right"}`
+        else if ([2, 9].includes(formattedUnitNumber)) return `1-bedroom-loft-b-${loftFloor}-right`
+        else if ([6, 13].includes(formattedUnitNumber)) return `1-bedroom-loft-b-${loftFloor}-left`
+        else if ([3, 5].includes(formattedUnitNumber)) return `2-bedroom-loft-${loftFloor}-right`
+        else if ([10, 12].includes(formattedUnitNumber)) return `2-bedroom-loft-${loftFloor}-left`
+        else if (formattedUnitNumber === 4) return `1-bedroom-loft-a-${loftFloor}-left`
+        return `1-bedroom-loft-a-${loftFloor}-right`
+    }
 
     if (isCombinable) {
         if ([2, 10, 13, 21].includes(formattedUnitNumber))
@@ -17,29 +28,19 @@ export function getUnitTypeVariantDubaiMarina(
         return '1-bedroom-b-left'
     }
 
-    if (floor >= 7 && floor <= 38) {
-        if ([4, 5, 7, 8].includes(formattedUnitNumber))
-            return 'studio-2-a-right'
-        else if ([15, 16, 18, 19].includes(formattedUnitNumber))
-            return 'studio-2-a-left'
-        else if ([3, 6, 9].includes(formattedUnitNumber))
-            return '1-bedroom-a-right'
-        else if ([14, 17, 20].includes(formattedUnitNumber))
-            return '1-bedroom-a-left'
-        else if ([2, 13].includes(formattedUnitNumber))
-            return 'studio-2-b-left'
-        else if ([10, 21].includes(formattedUnitNumber))
-            return 'studio-2-b-right'
-        else if ([11, 12].includes(formattedUnitNumber))
-            return `studio-2-c-${formattedUnitNumber % 2 === 0 ? "left" : "right"}`
-        return '1-bedroom-b-left'
-    }
-
-    if ([1, 7, 8, 14].includes(formattedUnitNumber)) return `1-bedroom-loft-c-${formattedUnitNumber % 7 === 0 ? 'left' : "right"}`
-    else if ([2, 9].includes(formattedUnitNumber)) return '1-bedroom-loft-b-right'
-    else if ([6, 13].includes(formattedUnitNumber)) return '1-bedroom-loft-b-left'
-    else if ([3, 5].includes(formattedUnitNumber)) return '2-bedroom-loft-right'
-    else if ([10, 12].includes(formattedUnitNumber)) return '2-bedroom-loft-left'
-    else if (formattedUnitNumber === 4) return '1-bedroom-loft-a-left'
-    return '1-bedroom-loft-a-right'
+    if ([4, 5, 7, 8].includes(formattedUnitNumber))
+        return 'studio-2-a-right'
+    else if ([15, 16, 18, 19].includes(formattedUnitNumber))
+        return 'studio-2-a-left'
+    else if ([3, 6, 9].includes(formattedUnitNumber))
+        return '1-bedroom-a-right'
+    else if ([14, 17, 20].includes(formattedUnitNumber))
+        return '1-bedroom-a-left'
+    else if ([2, 13].includes(formattedUnitNumber))
+        return 'studio-2-b-left'
+    else if ([10, 21].includes(formattedUnitNumber))
+        return 'studio-2-b-right'
+    else if ([11, 12].includes(formattedUnitNumber))
+        return `studio-2-c-${formattedUnitNumber % 2 === 0 ? "left" : "right"}`
+    return '1-bedroom-b-left'
 }

src/utils/getUnitTypeVariantMarasiDrive.ts

@@ -14,7 +14,7 @@ export const getUnitTypeVariantMarasiDrive = (
       else if ([3, 6].includes(formattedUnitNumber))
         return `1-bedroom-d-${formattedUnitNumber === 6 ? "left" : "right"}`;
       else if (formattedUnitNumber === 17)
-        return "2-bedroom-b-left";
+        return "2-bedroom-b";
       else if (formattedUnitNumber === 7) return '1-bedroom-a-right'
       else if (formattedUnitNumber === 8) return '1-bedroom-a-left'
       else if (formattedUnitNumber === 1) return '2-bedroom-a-left'