346 lines
12 KiB
TypeScript
346 lines
12 KiB
TypeScript
// import { useState } from "react";
|
|
// import ChevronDownIcon from "../components/icons/ChevronDownIcon";
|
|
import useFavoritesStore from "../store/useFavoritesStore";
|
|
import useModal from "../store/useModal";
|
|
import HeartIcon from "../components/icons/HeartIcon";
|
|
import UnitModalForSearchPage from "../components/modals/UnitModalForSearchPage";
|
|
import unitTypes from "../data/unitTypes.json";
|
|
import HeartFilledIcon from "../components/icons/HeartFilledIcon";
|
|
import Button from "../components/Button";
|
|
import BookingIcon from "../components/icons/BookingIcon";
|
|
import IUnit from "../types/IUnit";
|
|
import Button2 from "../components/Button2";
|
|
import SearchIcon from "../components/icons/SearchIcon";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
function FavoritesPage() {
|
|
const { favoriteUnits, setFavoriteUnits } = useFavoritesStore();
|
|
// const [isSortPriceAsc, setIsSortPriceAsc] = useState(false);
|
|
const { setModal } = useModal();
|
|
const navigate = useNavigate();
|
|
|
|
function getTypeByUnitNo(unitNo: string) {
|
|
const side = unitNo[0] === "E" ? "East" : "West";
|
|
const floor = Number(unitNo.split("-")[1].slice(0, -2));
|
|
const number = Number(unitNo.split("-")[1].slice(-2));
|
|
|
|
console.log(side, floor, number);
|
|
|
|
if (side === "East") {
|
|
if ([1].includes(number)) {
|
|
return "2br-type-a";
|
|
} else if ([2, 4, 5, 11, 12, 13, 14].includes(number)) {
|
|
return "studio-2";
|
|
} else if ([3].includes(number)) {
|
|
return "1br-type-d";
|
|
} else if ([6, 7, 10, 15, 16].includes(number)) {
|
|
return "1br-type-c";
|
|
} else if ([8, 9].includes(number)) {
|
|
return "1br-type-b";
|
|
}
|
|
} else if (side === "West") {
|
|
if (floor <= 21) {
|
|
// Floors 5-21
|
|
if ([1].includes(number)) {
|
|
return "2br-type-a";
|
|
} else if ([2, 4, 5].includes(number)) {
|
|
return "studio-2";
|
|
} else if ([3, 6].includes(number)) {
|
|
return "1br-type-d";
|
|
} else if ([7, 8].includes(number)) {
|
|
return "1br-type-a";
|
|
} else if ([9, 10, 11, 12, 13, 14].includes(number)) {
|
|
return "studio-flex";
|
|
} else if ([15, 16].includes(number)) {
|
|
return "1br-type-c";
|
|
} else if ([17].includes(number)) {
|
|
return "2br-type-b";
|
|
}
|
|
} else {
|
|
// Floors 24-31
|
|
if ([1].includes(number)) {
|
|
return "2br-type-a";
|
|
} else if ([2, 4, 5, 10, 11].includes(number)) {
|
|
return "studio-2";
|
|
} else if ([3, 6, 9, 12].includes(number)) {
|
|
return "1br-type-d";
|
|
} else if ([7, 8].includes(number)) {
|
|
return "1br-type-a";
|
|
} else if ([13, 14].includes(number)) {
|
|
return "1br-type-c";
|
|
} else if ([15].includes(number)) {
|
|
return "2br-type-b";
|
|
}
|
|
}
|
|
}
|
|
|
|
// TODO Connect to DB
|
|
|
|
return "";
|
|
}
|
|
|
|
function getImageSrc(unitNo: string): string {
|
|
const side = unitNo[0];
|
|
const floor = Number(unitNo.split("-")[1].slice(0, -2));
|
|
const unitNumber = Number(unitNo.split("-")[1].slice(-2));
|
|
|
|
if (side === "W") {
|
|
// Side "W"
|
|
if (floor < 24) {
|
|
switch (unitNumber) {
|
|
case 1:
|
|
return "/images/layouts/2br_a_left.png";
|
|
case 2:
|
|
return "/images/layouts/studio_left.png";
|
|
case 3:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 4:
|
|
return "/images/layouts/studio_left.png";
|
|
case 5:
|
|
return "/images/layouts/studio_left.png";
|
|
case 6:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 7:
|
|
return "/images/layouts/1br_a_left.png";
|
|
case 8:
|
|
return "/images/layouts/1br_a_left.png";
|
|
case 9:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 10:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 11:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 12:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 13:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 14:
|
|
return "/images/layouts/studio_flex_left.png";
|
|
case 15:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 16:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 17:
|
|
return "/images/layouts/2br_b_left.png";
|
|
}
|
|
} else {
|
|
switch (unitNumber) {
|
|
case 1:
|
|
return "/images/layouts/2br_a_left.png";
|
|
case 2:
|
|
return "/images/layouts/studio_left.png";
|
|
case 3:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 4:
|
|
return "/images/layouts/studio_left.png";
|
|
case 5:
|
|
return "/images/layouts/studio_left.png";
|
|
case 6:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 7:
|
|
return "/images/layouts/1br_a_left.png";
|
|
case 8:
|
|
return "/images/layouts/1br_a_left.png";
|
|
case 9:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 10:
|
|
return "/images/layouts/studio_left.png";
|
|
case 11:
|
|
return "/images/layouts/studio_left.png";
|
|
case 12:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 13:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 14:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 15:
|
|
return "/images/layouts/2br_b_left.png";
|
|
}
|
|
}
|
|
} else {
|
|
// Side "E"
|
|
switch (unitNumber) {
|
|
case 1:
|
|
return "/images/layouts/2br_a_left.png";
|
|
case 2:
|
|
return "/images/layouts/studio_left.png";
|
|
case 3:
|
|
return "/images/layouts/1br_d_left.png";
|
|
case 4:
|
|
return "/images/layouts/studio_left.png";
|
|
case 5:
|
|
return "/images/layouts/studio_left.png";
|
|
case 6:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 7:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 8:
|
|
return "/images/layouts/1br_b_left.png";
|
|
case 9:
|
|
return "/images/layouts/1br_b_left.png";
|
|
case 10:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 11:
|
|
return "/images/layouts/studio_left.png";
|
|
case 12:
|
|
return "/images/layouts/studio_left.png";
|
|
case 13:
|
|
return "/images/layouts/studio_left.png";
|
|
case 14:
|
|
return "/images/layouts/studio_left.png";
|
|
case 15:
|
|
return "/images/layouts/1br_c_left.png";
|
|
case 16:
|
|
return "/images/layouts/1br_c_left.png";
|
|
}
|
|
}
|
|
|
|
console.log(side, floor, unitNumber);
|
|
|
|
return "";
|
|
}
|
|
|
|
function addOrRemoveFromFavorites(unit: IUnit) {
|
|
if (!favoriteUnits.some((favoriteUnit) => favoriteUnit.id === unit.id)) {
|
|
setFavoriteUnits([...favoriteUnits, unit]);
|
|
} else {
|
|
setFavoriteUnits(
|
|
favoriteUnits.filter((favoriteUnit) => favoriteUnit.id !== unit.id)
|
|
);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex-1 mt-14">
|
|
<div className="sm:p-6 p-4">
|
|
<div className="pb-4 border-b border-[#E2E2DC] flex justify-between">
|
|
<p className="sm:text-2xl text-xl font-semibold">
|
|
<span className="text-[#0D1922]">Favorites</span>{" "}
|
|
{favoriteUnits.length}
|
|
</p>
|
|
</div>
|
|
{favoriteUnits.length > 0 ? (
|
|
<div className="pt-4 grid xl:grid-cols-4 lg:grid-cols-3 sm:grid-cols-2 gap-4">
|
|
{favoriteUnits.map((unit) => (
|
|
<div
|
|
key={unit.id}
|
|
className="bg-white rounded-2xl p-4 space-y-4 flex flex-col justify-between"
|
|
>
|
|
<div className="flex justify-between">
|
|
<div className="space-y-1">
|
|
<p className="text-sm text-[#00BED7]">{unit.projectName}</p>
|
|
<div className="flex items-center gap-2 text-xs font-semibold text-[#73787C]">
|
|
<p className="">
|
|
{unit.unitNo[0] === "E" ? "East" : "West"} Wing
|
|
</p>
|
|
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
|
<p>{unit.floor}</p>
|
|
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
|
<p>{unit.unitNo}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="w-10 h-10 flex items-center justify-center border border-[#E2E2DC] rounded-full bg-[#FFFFFF] bg-opacity-80 hover:text-[#0D1922] hover:bg-opacity-100 hover:border-[#00BED7] transition-all"
|
|
onClick={() => addOrRemoveFromFavorites(unit)}
|
|
>
|
|
{favoriteUnits.some(
|
|
(favoriteUnit) => favoriteUnit.id === unit.id
|
|
) ? (
|
|
<HeartFilledIcon className="w-5 h-5" />
|
|
) : (
|
|
<HeartIcon className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
<div
|
|
className="flex justify-center cursor-pointer"
|
|
onClick={() =>
|
|
setModal(
|
|
<UnitModalForSearchPage
|
|
unit={unit}
|
|
type={
|
|
unitTypes.find(
|
|
(unitType) =>
|
|
unitType.type === getTypeByUnitNo(unit.unitNo)
|
|
)?.type || ""
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
>
|
|
<img
|
|
src={getImageSrc(unit.unitNo)}
|
|
alt=""
|
|
className="max-h-[240px] pointer-events-none"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="space-y-1 cursor-pointer"
|
|
onClick={() =>
|
|
setModal(
|
|
<UnitModalForSearchPage
|
|
unit={unit}
|
|
type={
|
|
unitTypes.find(
|
|
(unitType) =>
|
|
unitType.type === getTypeByUnitNo(unit.unitNo)
|
|
)?.type || ""
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
>
|
|
<p className="text-sm text-[#0D1922]">
|
|
{unit.unitType}, {unit.totalArea} Sqft
|
|
</p>
|
|
<p className="text-xl text-[#00BED7] font-semibold">
|
|
{(unit.unitPrice &&
|
|
`AED ${unit.unitPrice.toLocaleString()}`) ||
|
|
"Unavailable"}
|
|
</p>
|
|
</div>
|
|
<div className="">
|
|
<Button
|
|
buttonType="cta"
|
|
icon={<BookingIcon />}
|
|
text="Send Enquiry"
|
|
className="justify-center text-sm disabled:hover:bg-[#ECEDEE] w-full"
|
|
disabled
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="lg:py-[140px] sm:py-[120px] py-8 mx-auto w-fit flex flex-col items-center sm:gap-8 gap-10">
|
|
<div className="text-center space-y-6">
|
|
<p className="text-[#0D1922] sm:text-[40px] text-xl font-bold sm:leading-[54px] leading-[27px]">
|
|
We couldn't find any apartments
|
|
<br />
|
|
<span className="text-[#00BED7]">in your favorites</span>
|
|
</p>
|
|
<div className="space-y-2 sm:text-base text-sm sm:px-16 px-8">
|
|
<p>
|
|
Use the search function and add the ones you like to your
|
|
favorites.
|
|
</p>
|
|
<p>Apartments added from the 3D model will also appear here.</p>
|
|
</div>
|
|
</div>
|
|
<Button2
|
|
icon={<SearchIcon className="w-6 h-6" />}
|
|
size="large"
|
|
className="max-sm:w-full"
|
|
onClick={() => navigate("/search")}
|
|
>
|
|
Search
|
|
</Button2>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FavoritesPage;
|