Merged in feat/SW-2901-hotel-pins (pull request #2206)

feat(SW-2901): add dynamic hotel markers

* feat(SW-2901): add dynamic hotel markers

* fix(SW-2901): update type


Approved-by: Christian Andolf
Approved-by: Erik Tiekstra

apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx

@@ -7,8 +7,8 @@ import { useIntl } from "react-intl"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import HotelMarkerByType from "../../Markers"
 import PoiMarker from "../../Markers/Poi"
-import ScandicMarker from "../../Markers/Scandic"
 
 import styles from "./poiMapMarkers.module.css"
 
@@ -19,6 +19,7 @@ export default function PoiMapMarkers({
   pointsOfInterest,
   onActivePoiChange,
   activePoi,
+  markerInfo,
 }: PoiMapMarkersProps) {
   const intl = useIntl()
 
@@ -28,7 +29,10 @@ export default function PoiMapMarkers({
   return (
     <>
       <AdvancedMarker position={coordinates} zIndex={1}>
-        <ScandicMarker />
+        <HotelMarkerByType
+          hotelId={markerInfo.hotelId}
+          hotelType={markerInfo.hotelType}
+        />
       </AdvancedMarker>
 
       {pointsOfInterest.map((poi) => (

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

@@ -22,6 +22,7 @@ export default function InteractiveMap({
   hotelPins,
   mapId,
   closeButton,
+  markerInfo,
   fitBounds = true,
   onTilesLoaded,
   onActivePoiChange,
@@ -67,12 +68,13 @@ export default function InteractiveMap({
     <div className={styles.mapContainer}>
       <Map {...mapOptions} onTilesLoaded={onTilesLoaded}>
         {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
-        {pointsOfInterest && (
+        {pointsOfInterest && markerInfo && (
           <PoiMapMarkers
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={onActivePoiChange}
             activePoi={activePoi}
+            markerInfo={markerInfo}
           />
         )}
       </Map>

apps/scandic-web/components/Maps/Markers/index.tsx

@@ -13,40 +13,66 @@ import ScandicGoMarker from "./ScandicGo"
 import ScandicGoSmallMarker from "./ScandicGoSmall"
 import ScandicSmallMarker from "./ScandicSmall"
 
+import type { MarkerInfo } from "@/types/components/maps/marker"
 import { HotelTypeEnum } from "@/types/enums/hotelType"
 import { SignatureHotelEnum } from "@/types/enums/signatureHotel"
 
-interface HotelMarkerByTypeProps {
-  hotelId: string
-  hotelType: string
-  smallSize?: boolean
+interface HotelMarkerByTypeProps
+  extends MarkerInfo,
+    React.SVGAttributes<HTMLOrSVGElement> {
+  size?: "large" | "small"
 }
 
 export default function HotelMarkerByType({
   hotelId,
   hotelType,
-  smallSize = true,
+  size = "large",
+  ...props
 }: HotelMarkerByTypeProps) {
   if (hotelType === HotelTypeEnum.ScandicGo) {
-    return smallSize ? <ScandicGoSmallMarker /> : <ScandicGoMarker />
+    return size === "small" ? (
+      <ScandicGoSmallMarker {...props} />
+    ) : (
+      <ScandicGoMarker {...props} />
+    )
   }
 
   switch (hotelId) {
     case SignatureHotelEnum.Haymarket:
-      return smallSize ? <HaymarketSmallMarker /> : <HaymarketMarker />
-    case SignatureHotelEnum.HotelNorge:
-      return smallSize ? <HotelNorgeSmallMarker /> : <HotelNorgeMarker />
-    case SignatureHotelEnum.DowntownCamper:
-      return smallSize ? (
-        <DowntownCamperSmallMarker />
+      return size === "small" ? (
+        <HaymarketSmallMarker {...props} />
       ) : (
-        <DowntownCamperMarker />
+        <HaymarketMarker {...props} />
+      )
+    case SignatureHotelEnum.HotelNorge:
+      return size === "small" ? (
+        <HotelNorgeSmallMarker {...props} />
+      ) : (
+        <HotelNorgeMarker {...props} />
+      )
+    case SignatureHotelEnum.DowntownCamper:
+      return size === "small" ? (
+        <DowntownCamperSmallMarker {...props} />
+      ) : (
+        <DowntownCamperMarker {...props} />
       )
     case SignatureHotelEnum.GrandHotelOslo:
-      return smallSize ? <GrandHotelSmallMarker /> : <GrandHotelMarker />
+      return size === "small" ? (
+        <GrandHotelSmallMarker {...props} />
+      ) : (
+        <GrandHotelMarker {...props} />
+      )
     case SignatureHotelEnum.Marski:
-      return smallSize ? <MarskiSmallMarker /> : <MarskiMarker />
+      return size === "small" ? (
+        <MarskiSmallMarker {...props} />
+      ) : (
+        <MarskiMarker {...props} />
+      )
     default:
-      return smallSize ? <ScandicSmallMarker /> : <ScandicMarker />
+      return size === "small" ? (
+        <ScandicSmallMarker {...props} />
+      ) : (
+        <ScandicMarker {...props} />
+      )
   }
 }