diff --git a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
index a60865ce5..64e8d29ac 100644
--- a/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
@@ -13,9 +13,18 @@ import { translatePOIGroup } from "./util"
import styles from "./sidebar.module.css"
-import type { SidebarProps } from "@/types/components/hotelPage/map/sidebar"
+import type { PointOfInterest } from "@scandic-hotels/trpc/types/hotel"
+
import type { Coordinates } from "@/types/components/maps/coordinates"
+interface SidebarProps {
+ hotelName: string
+ pointsOfInterest: PointOfInterest[]
+ activePoi: PointOfInterest["name"] | null
+ onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
+ coordinates: Coordinates
+}
+
export default function Sidebar({
activePoi,
hotelName,
@@ -62,23 +71,23 @@ export default function Sidebar({
}
}
- function handleMouseEnter(poiName: string | undefined) {
- if (!poiName) return
+ function handleMouseEnter(poiId: string | undefined) {
+ if (!poiId) return
if (!isClicking) {
- onActivePoiChange(poiName)
+ onActivePoiChange(poiId)
}
}
function handlePoiClick(
- poiName: string | undefined,
+ poiId: string | undefined,
poiCoordinates: Coordinates
) {
- if (!poiName || !poiCoordinates) return
+ if (!poiId || !poiCoordinates) return
setIsClicking(true)
toggleFullScreenSidebar()
- onActivePoiChange(poiName)
+ onActivePoiChange(poiId)
moveToPoi(poiCoordinates)
setTimeout(() => {
setIsClicking(false)
@@ -130,18 +139,13 @@ export default function Sidebar({
{pois.map((poi) => (
- -
+
-
handleMouseEnter(poi.name)}
- onPress={() =>
- handlePoiClick(poi.name, poi.coordinates)
- }
+ onHoverStart={() => handleMouseEnter(poi.id)}
+ onPress={() => handlePoiClick(poi.id, poi.coordinates)}
>
{poi.name}
diff --git a/apps/scandic-web/types/components/hotelPage/map/sidebar.ts b/apps/scandic-web/types/components/hotelPage/map/sidebar.ts
deleted file mode 100644
index 3649aeebc..000000000
--- a/apps/scandic-web/types/components/hotelPage/map/sidebar.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { PointOfInterest } from "@scandic-hotels/trpc/types/hotel"
-import type { Coordinates } from "../../maps/coordinates"
-
-export interface SidebarProps {
- hotelName: string
- pointsOfInterest: PointOfInterest[]
- activePoi: PointOfInterest["name"] | null
- onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
- coordinates: Coordinates
-}
diff --git a/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/index.tsx b/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/index.tsx
index fdf83c3b3..c8a6d26a7 100644
--- a/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/index.tsx
+++ b/packages/design-system/lib/components/Map/InteractiveMap/PoiMapMarkers/index.tsx
@@ -31,8 +31,8 @@ export default function PoiMapMarkers({
}: PoiMapMarkersProps) {
const intl = useIntl()
- function toggleActivePoi(poiName: string) {
- onActivePoiChange?.(activePoi === poiName ? null : poiName)
+ function toggleActivePoi(poiId: string) {
+ onActivePoiChange?.(activePoi === poiId ? null : poiId)
}
return (
<>
@@ -45,22 +45,22 @@ export default function PoiMapMarkers({
{pointsOfInterest.map((poi) => (
onActivePoiChange?.(poi.name ?? null)}
+ zIndex={activePoi === poi.id ? 2 : 0}
+ onMouseEnter={() => onActivePoiChange?.(poi.id ?? null)}
onMouseLeave={() => onActivePoiChange?.(null)}
- onClick={() => toggleActivePoi(poi.name ?? '')}
+ onClick={() => toggleActivePoi(poi.id ?? '')}
>
diff --git a/packages/trpc/lib/routers/hotels/schemas/hotel/poi.ts b/packages/trpc/lib/routers/hotels/schemas/hotel/poi.ts
index 5d184ee69..e8f1670b9 100644
--- a/packages/trpc/lib/routers/hotels/schemas/hotel/poi.ts
+++ b/packages/trpc/lib/routers/hotels/schemas/hotel/poi.ts
@@ -16,6 +16,7 @@ export const pointOfInterestSchema = z
name: nullableStringValidator,
})
.transform((poi) => ({
+ id: `${poi.name}-${poi.location.latitude}-${poi.location.longitude}`,
categoryName: poi.category.name,
coordinates: {
lat: poi.location.latitude,