fix(SW-3203): Added property id to pointOfInterestSchema to handle identical names

Approved-by: Matilda Landström
Approved-by: Chuma Mcphoy (We Ahead)

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({
                 </Typography>
                 <ul className={styles.poiList}>
                   {pois.map((poi) => (
-                    <li
-                      key={poi.name + poi.categoryName}
-                      className={styles.poiItem}
-                    >
+                    <li key={poi.id} className={styles.poiItem}>
                       <ButtonRAC
                         className={cx(styles.poiButton, {
-                          [styles.active]: activePoi === poi.name,
+                          [styles.active]: activePoi === poi.id,
                         })}
-                        onHoverStart={() => handleMouseEnter(poi.name)}
-                        onPress={() =>
-                          handlePoiClick(poi.name, poi.coordinates)
-                        }
+                        onHoverStart={() => handleMouseEnter(poi.id)}
+                        onPress={() => handlePoiClick(poi.id, poi.coordinates)}
                       >
                         <Typography variant="Body/Paragraph/mdRegular">
                           <span>{poi.name}</span>