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 { useDestinationDataStore } from "@/stores/destination-data"
import DestinationFilterAndSort from "@/components/DestinationFilterAndSort" import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
import Alert from "@/components/TempDesignSystem/Alert"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import { debounce } from "@/utils/debounce" import { debounce } from "@/utils/debounce"
import HotelCardCarousel from "../../../HotelCardCarousel" import HotelListContent from "./Content"
import HotelListItem from "../HotelListItem"
import HotelListSkeleton from "./HotelListSkeleton" import HotelListSkeleton from "./HotelListSkeleton"
import { getVisibleHotels } from "./utils" import { getVisibleHotels } from "./utils"
import styles from "./hotelList.module.css" import styles from "./hotelList.module.css"
import { AlertTypeEnum } from "@/types/enums/alert"
import type { DestinationPagesHotelData } from "@/types/hotel" import type { DestinationPagesHotelData } from "@/types/hotel"
export default function HotelList() { export default function HotelList() {
@@ -56,9 +53,11 @@ export default function HotelList() {
} }
}, [map, coreLib, debouncedUpdateVisibleHotels]) }, [map, coreLib, debouncedUpdateVisibleHotels])
return isLoading ? ( if (isLoading) {
<HotelListSkeleton /> return <HotelListSkeleton />
) : ( }
return (
<div className={styles.hotelListWrapper}> <div className={styles.hotelListWrapper}>
<div className={styles.header}> <div className={styles.header}>
<Body> <Body>
@@ -71,29 +70,11 @@ export default function HotelList() {
</Body> </Body>
<DestinationFilterAndSort listType="hotel" /> <DestinationFilterAndSort listType="hotel" />
</div> </div>
{activeHotels.length === 0 ? (
<Alert <HotelListContent
type={AlertTypeEnum.Info} hotelsCount={activeHotels.length}
heading={intl.formatMessage({ visibleHotels={visibleHotels}
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>
</>
)}
</div> </div>
) )
} }