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/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx

@@ -57,7 +57,7 @@ export default function Marker({ position, properties }: MarkerProps) {
       zIndex={isActive ? 300 : 0}
     >
       <HotelMarkerByType
-        smallSize={!isHovered && !isActive}
+        size={isHovered || isActive ? "large" : "small"}
         hotelId={properties.id}
         hotelType={properties.type}
       />

apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx

@@ -21,6 +21,7 @@ import Sidebar from "./Sidebar"
 import styles from "./hotelMapPage.module.css"
 
 import type { Coordinates } from "@/types/components/maps/coordinates"
+import type { MarkerInfo } from "@/types/components/maps/marker"
 import type { PointOfInterest } from "@/types/hotel"
 
 interface HotelMapPageClientProps {
@@ -29,11 +30,13 @@ interface HotelMapPageClientProps {
   coordinates: Coordinates
   pointsOfInterest: PointOfInterest[]
   mapId: string
+  markerInfo: MarkerInfo
 }
 
 export default function HotelMapPageClient({
   apiKey,
   hotelName,
+  markerInfo,
   coordinates,
   pointsOfInterest,
   mapId,
@@ -127,6 +130,7 @@ export default function HotelMapPageClient({
           activePoi={activePoi}
           onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
           mapId={mapId}
+          markerInfo={markerInfo}
         />
       </div>
     </APIProvider>

apps/scandic-web/components/ContentType/HotelMapPage/index.tsx

@@ -24,7 +24,7 @@ export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
     notFound()
   }
 
-  const { name, location, pointsOfInterest } = hotelData.hotel
+  const { name, location, pointsOfInterest, hotelType } = hotelData.hotel
 
   const coordinates = {
     lat: location.latitude,
@@ -35,6 +35,7 @@ export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
       apiKey={env.GOOGLE_STATIC_MAP_KEY}
       mapId={env.GOOGLE_DYNAMIC_MAP_ID}
       hotelName={name}
+      markerInfo={{ hotelId, hotelType }}
       coordinates={coordinates}
       pointsOfInterest={pointsOfInterest}
     />

apps/scandic-web/components/ContentType/HotelPage/Map/StaticMap/index.tsx

@@ -2,7 +2,7 @@
 
 import { env } from "@/env/server"
 
-import ScandicMarker from "@/components/Maps/Markers/Scandic"
+import HotelMarkerByType from "@/components/Maps/Markers"
 import StaticMapComp from "@/components/Maps/StaticMap"
 import { getIntl } from "@/i18n"
 import { calculateLatWithOffset } from "@/utils/map"
@@ -14,6 +14,7 @@ import type { StaticMapProps } from "@/types/components/hotelPage/map/staticMap"
 export default async function StaticMap({
   coordinates,
   hotelName,
+  markerInfo,
   zoomLevel = 14,
 }: StaticMapProps) {
   const intl = await getIntl()
@@ -41,7 +42,9 @@ export default async function StaticMap({
         )}
         mapId={mapId}
       />
-      <ScandicMarker
+      <HotelMarkerByType
+        hotelId={markerInfo.hotelId}
+        hotelType={markerInfo.hotelType}
         className={styles.mapMarker}
         height={markerHeight}
         style={{ top: `${mapLatitudeInPx - markerHeight}px` }}

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -200,7 +200,11 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
       </main>
       <aside className={styles.mapContainer}>
         <MapWithCardWrapper>
-          <StaticMap coordinates={coordinates} hotelName={name} />
+          <StaticMap
+            coordinates={coordinates}
+            hotelName={name}
+            markerInfo={{ hotelType, hotelId }}
+          />
           <MapCard hotelName={name} pois={topThreePois} />
         </MapWithCardWrapper>
       </aside>

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} />
+      )
   }
 }

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

@@ -2,13 +2,15 @@ import type { ReactElement } from "react"
 
 import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
 import type { Coordinates } from "@/types/components/maps/coordinates"
+import type { MarkerInfo } from "@/types/components/maps/marker"
 import type { PointOfInterest } from "@/types/hotel"
 
 export interface InteractiveMapProps {
   coordinates: Coordinates
-  pointsOfInterest?: PointOfInterest[]
   activePoi?: PointOfInterest["name"] | null
   hotelPins?: HotelPin[]
+  pointsOfInterest?: PointOfInterest[]
+  markerInfo?: MarkerInfo
   mapId: string
   closeButton: ReactElement
   fitBounds?: boolean

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

@@ -1,7 +1,9 @@
+import type { MarkerInfo } from "@/types/components/maps/marker"
 import type { Coordinates } from "../../maps/coordinates"
 
 export type StaticMapProps = {
   coordinates: Coordinates
   hotelName: string
   zoomLevel?: number
+  markerInfo: MarkerInfo
 }

apps/scandic-web/types/components/maps/marker.ts

@@ -0,0 +1,4 @@
+export type MarkerInfo = {
+  hotelId: string
+  hotelType: string
+}

apps/scandic-web/types/hotel.ts

@@ -1,5 +1,6 @@
 import type { z } from "zod"
 
+import type { MarkerInfo } from "@/types/components/maps/marker"
 import type {
   destinationPagesHotelDataSchema,
   hotelSchema,
@@ -70,6 +71,7 @@ export type PoiMapMarkersProps = {
   coordinates: { lat: number; lng: number }
   onActivePoiChange?: (poiName: string | null) => void
   pointsOfInterest: PointOfInterest[]
+  markerInfo: MarkerInfo
 }
 export type HotelTripAdvisor =
   | NonNullable<HotelRatings>["tripAdvisor"]