scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-2504): Fixed issue with marker getting active state after closing and clicking cluster marker

Browse Source 
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-05-21 12:41:17 +00:00
parent b3d5326adb
commit 139dd0ff17
2 changed files with 67 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client"
import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import Alert from "@/components/TempDesignSystem/Alert"
import HotelCardCarousel from "../../../HotelCardCarousel"
import HotelListItem from "../HotelListItem"
import styles from "./hotelList.module.css"
import { AlertTypeEnum } from "@/types/enums/alert"
import type { DestinationPagesHotelData } from "@/types/hotel"
interface HotelListContentProps {
hotelsCount: number
visibleHotels: DestinationPagesHotelData[]
}
export default function HotelListContent({
hotelsCount,
visibleHotels,
}: HotelListContentProps) {
const intl = useIntl()
const isMobile = useMediaQuery("(max-width: 949px)")
if (hotelsCount === 0) {
return (
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
defaultMessage: "No matching hotels found",
})}
text={intl.formatMessage({
defaultMessage:
"It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
})}
/>
)
}
if (isMobile) {
return <HotelCardCarousel visibleHotels={visibleHotels} />
}
return (
<ul className={styles.hotelList}>
{visibleHotels.map(({ hotel, url }) => (
<li key={hotel.id}>
<HotelListItem hotel={hotel} url={url} />
</li>
))}
</ul>
)
}

41
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx
View File

@@ -7,18 +7,15 @@ import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import Body from "@/components/TempDesignSystem/Text/Body"
import { debounce } from "@/utils/debounce"
import HotelCardCarousel from "../../../HotelCardCarousel"
import HotelListItem from "../HotelListItem"
import HotelListContent from "./Content"
import HotelListSkeleton from "./HotelListSkeleton"
import { getVisibleHotels } from "./utils"
import styles from "./hotelList.module.css"
import { AlertTypeEnum } from "@/types/enums/alert"
import type { DestinationPagesHotelData } from "@/types/hotel"
export default function HotelList() {
@@ -56,9 +53,11 @@ export default function HotelList() {
}
}, [map, coreLib, debouncedUpdateVisibleHotels])
return isLoading ? (
<HotelListSkeleton />
) : (
if (isLoading) {
return <HotelListSkeleton />
}
return (
<div className={styles.hotelListWrapper}>
<div className={styles.header}>
<Body>
@@ -71,29 +70,11 @@ export default function HotelList() {
</Body>
<DestinationFilterAndSort listType="hotel" />
</div>
{activeHotels.length === 0 ? (
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
defaultMessage: "No matching hotels found",
})}
text={intl.formatMessage({
defaultMessage:
"It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
})}
/>
) : (
<>
<HotelCardCarousel visibleHotels={visibleHotels} />
<ul className={styles.hotelList}>
{visibleHotels.map(({ hotel, url }) => (
<li key={hotel.id}>
<HotelListItem hotel={hotel} url={url} />
</li>
))}
</ul>
</>
)}
<HotelListContent
hotelsCount={activeHotels.length}
visibleHotels={visibleHotels}
/>
</div>
)
}