diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx index dda4d39ae..56e71f6d4 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx +++ b/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} > diff --git a/apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx b/apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx index 7c2c43cea..4d40e8e29 100644 --- a/apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx +++ b/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} /> diff --git a/apps/scandic-web/components/ContentType/HotelMapPage/index.tsx b/apps/scandic-web/components/ContentType/HotelMapPage/index.tsx index cdf549d28..ea65b140b 100644 --- a/apps/scandic-web/components/ContentType/HotelMapPage/index.tsx +++ b/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} /> diff --git a/apps/scandic-web/components/ContentType/HotelPage/Map/StaticMap/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/Map/StaticMap/index.tsx index 8ded39998..e666866c7 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/Map/StaticMap/index.tsx +++ b/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} /> - diff --git a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx index e1af9c781..233f4ca8f 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx +++ b/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 ( <> - + {pointsOfInterest.map((poi) => ( diff --git a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/index.tsx index a1067086f..7f57a5ab3 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/index.tsx +++ b/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({
{hotelPins && } - {pointsOfInterest && ( + {pointsOfInterest && markerInfo && ( )} diff --git a/apps/scandic-web/components/Maps/Markers/index.tsx b/apps/scandic-web/components/Maps/Markers/index.tsx index 587b06870..838e169c6 100644 --- a/apps/scandic-web/components/Maps/Markers/index.tsx +++ b/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 { + size?: "large" | "small" } export default function HotelMarkerByType({ hotelId, hotelType, - smallSize = true, + size = "large", + ...props }: HotelMarkerByTypeProps) { if (hotelType === HotelTypeEnum.ScandicGo) { - return smallSize ? : + return size === "small" ? ( + + ) : ( + + ) } switch (hotelId) { case SignatureHotelEnum.Haymarket: - return smallSize ? : - case SignatureHotelEnum.HotelNorge: - return smallSize ? : - case SignatureHotelEnum.DowntownCamper: - return smallSize ? ( - + return size === "small" ? ( + ) : ( - + + ) + case SignatureHotelEnum.HotelNorge: + return size === "small" ? ( + + ) : ( + + ) + case SignatureHotelEnum.DowntownCamper: + return size === "small" ? ( + + ) : ( + ) case SignatureHotelEnum.GrandHotelOslo: - return smallSize ? : + return size === "small" ? ( + + ) : ( + + ) case SignatureHotelEnum.Marski: - return smallSize ? : + return size === "small" ? ( + + ) : ( + + ) default: - return smallSize ? : + return size === "small" ? ( + + ) : ( + + ) } } diff --git a/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts b/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts index 5b56392d4..77d3706e0 100644 --- a/apps/scandic-web/types/components/hotelPage/map/interactiveMap.ts +++ b/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 diff --git a/apps/scandic-web/types/components/hotelPage/map/staticMap.ts b/apps/scandic-web/types/components/hotelPage/map/staticMap.ts index 800d06218..80bd15dd7 100644 --- a/apps/scandic-web/types/components/hotelPage/map/staticMap.ts +++ b/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 } diff --git a/apps/scandic-web/types/components/maps/marker.ts b/apps/scandic-web/types/components/maps/marker.ts new file mode 100644 index 000000000..37e38c456 --- /dev/null +++ b/apps/scandic-web/types/components/maps/marker.ts @@ -0,0 +1,4 @@ +export type MarkerInfo = { + hotelId: string + hotelType: string +} diff --git a/apps/scandic-web/types/hotel.ts b/apps/scandic-web/types/hotel.ts index 79b3e6643..7ba265fc8 100644 --- a/apps/scandic-web/types/hotel.ts +++ b/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["tripAdvisor"]