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) {
+  function handleMouseEnter(poiId: string | undefined) {
-    if (!poiName) return
+    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
+                    <li key={poi.id} className={styles.poiItem}>
-                      key={poi.name + poi.categoryName}
-                      className={styles.poiItem}
-                    >
                       <ButtonRAC
                         className={cx(styles.poiButton, {
-                          [styles.active]: activePoi === poi.name,
+                          [styles.active]: activePoi === poi.id,
                         })}
-                        onHoverStart={() => handleMouseEnter(poi.name)}
+                        onHoverStart={() => handleMouseEnter(poi.id)}
-                        onPress={() =>
+                        onPress={() => handlePoiClick(poi.id, poi.coordinates)}
-                          handlePoiClick(poi.name, poi.coordinates)
-                        }
                       >
                         <Typography variant="Body/Paragraph/mdRegular">
                           <span>{poi.name}</span>

apps/scandic-web/types/components/hotelPage/map/sidebar.ts

@@ -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
-}

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) {
+  function toggleActivePoi(poiId: string) {
-    onActivePoiChange?.(activePoi === poiName ? null : poiName)
+    onActivePoiChange?.(activePoi === poiId ? null : poiId)
   }
   return (
     <>
@@ -45,22 +45,22 @@ export default function PoiMapMarkers({
 
       {pointsOfInterest.map((poi) => (
         <AdvancedMarker
-          key={poi.name + poi.categoryName}
+          key={poi.id}
           className={styles.advancedMarker}
           position={poi.coordinates}
           anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
-          zIndex={activePoi === poi.name ? 2 : 0}
+          zIndex={activePoi === poi.id ? 2 : 0}
-          onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
+          onMouseEnter={() => onActivePoiChange?.(poi.id ?? null)}
           onMouseLeave={() => onActivePoiChange?.(null)}
-          onClick={() => toggleActivePoi(poi.name ?? '')}
+          onClick={() => toggleActivePoi(poi.id ?? '')}
         >
           <span
-            className={`${styles.poi} ${activePoi === poi.name ? styles.active : ''}`}
+            className={`${styles.poi} ${activePoi === poi.id ? styles.active : ''}`}
           >
             <PoiMarker
               group={poi.group}
               categoryName={poi.categoryName}
-              size={activePoi === poi.name ? 'large' : 'small'}
+              size={activePoi === poi.id ? 'large' : 'small'}
             />
             <span className={styles.poiLabel}>
               <Typography variant="Body/Paragraph/mdRegular">

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,