feat(SW-325): added mapId as environment variables

.env.local.example

@@ -46,3 +46,5 @@ NEXTAUTH_URL="$PUBLIC_URL/api/web/auth"
 
 GOOGLE_STATIC_MAP_KEY=""
 GOOGLE_STATIC_MAP_SIGNATURE_SECRET=""
+GOOGLE_STATIC_MAP_ID=""
+GOOGLE_DYNAMIC_MAP_ID=""

.env.test

@@ -37,3 +37,7 @@ SEAMLESS_LOGOUT_NO="test"
 SEAMLESS_LOGOUT_SV="test"
 WEBVIEW_ENCRYPTION_KEY="test"
 BOOKING_ENCRYPTION_KEY="test"
+GOOGLE_STATIC_MAP_KEY="test"
+GOOGLE_STATIC_MAP_SIGNATURE_SECRET="test"
+GOOGLE_STATIC_MAP_ID="test"
+GOOGLE_DYNAMIC_MAP_ID="test"

components/ContentType/HotelPage/Map/DynamicMap/Map/index.tsx

@@ -26,6 +26,7 @@ export default function MapContent({
   coordinates,
   pointsOfInterest,
   activePoi,
+  mapId,
   onActivePoiChange,
 }: MapContentProps) {
   const intl = useIntl()
@@ -37,7 +38,7 @@ export default function MapContent({
     defaultCenter: coordinates,
     disableDefaultUI: true,
     clickableIcons: false,
-    mapId: "6b48ef228325ae84",
+    mapId,
   }
 
   function zoomIn() {

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -20,6 +20,7 @@ export default function DynamicMap({
   hotelName,
   coordinates,
   pointsOfInterest,
+  mapId,
 }: DynamicMapProps) {
   const intl = useIntl()
   const { isDynamicMapOpen, closeDynamicMap } = useHotelPageStore()
@@ -72,6 +73,7 @@ export default function DynamicMap({
             pointsOfInterest={pointsOfInterest}
             activePoi={activePoi}
             onActivePoiChange={setActivePoi}
+            mapId={mapId}
           />
         </Dialog>
       </Modal>

components/ContentType/HotelPage/Map/StaticMap/index.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 
+import { env } from "@/env/server"
+
 import ScandicMarker from "@/components/Maps/Markers/Scandic"
 import StaticMapComp from "@/components/Maps/StaticMap"
 import { getIntl } from "@/i18n"
@@ -15,6 +17,7 @@ export default async function StaticMap({
   zoomLevel = 14,
 }: StaticMapProps) {
   const intl = await getIntl()
+  const mapId = env.GOOGLE_STATIC_MAP_ID
   const mapHeight = 785
   const markerHeight = 100
   const mapLatitudeInPx = mapHeight * 0.2
@@ -31,6 +34,7 @@ export default async function StaticMap({
         height={mapHeight}
         zoomLevel={zoomLevel}
         altText={intl.formatMessage({ id: "Map of HOTEL_NAME" }, { hotelName })}
+        mapId={mapId}
       />
       <ScandicMarker
         className={styles.mapMarker}

components/ContentType/HotelPage/index.tsx

@@ -23,9 +23,10 @@ import TabNavigation from "./TabNavigation"
 import styles from "./hotelPage.module.css"
 
 export default async function HotelPage() {
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
   const intl = await getIntl()
   const lang = getLang()
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
   const hotelData = await serverClient().hotel.get({
     include: ["RoomCategories"],
   })
@@ -132,6 +133,7 @@ export default async function HotelPage() {
             hotelName={hotelName}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
+            mapId={googleMapId}
           />
         </>
       ) : null}

components/Maps/Markers/Poi/index.tsx

@@ -3,7 +3,7 @@ import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import { getCategoryIconName } from "../utils"
 import { poiVariants } from "./variants"
 
-import { PoiMarkerProps } from "@/types/components/maps/poiMarker"
+import type { PoiMarkerProps } from "@/types/components/maps/poiMarker"
 
 export default function PoiMarker({
   category,

components/Maps/Markers/utils.ts

@@ -1,5 +1,5 @@
 import { IconName } from "@/types/components/icon"
-import { PointOfInterestCategory } from "@/types/hotel"
+import type { PointOfInterestCategory } from "@/types/hotel"
 
 /* 2024-09-18: At the moment, the icons for the different categories is unknown.
 This will be handled later. */

components/Maps/StaticMap/index.tsx

@@ -13,6 +13,7 @@ export default function StaticMap({
   zoomLevel = 14,
   mapType = "roadmap",
   altText,
+  mapId,
 }: StaticMapProps) {
   const key = env.GOOGLE_STATIC_MAP_KEY
   const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
@@ -27,6 +28,11 @@ export default function StaticMap({
   const url = new URL(
     `${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
   )
+
+  if (mapId) {
+    url.searchParams.append("map_id", mapId)
+  }
+
   const src = getUrlWithSignature(url, secret)
 
   return <img src={src} alt={altText} />

env/server.ts

@@ -61,8 +61,10 @@ export const env = createEnv({
     SEAMLESS_LOGOUT_SV: z.string(),
     WEBVIEW_ENCRYPTION_KEY: z.string(),
     BOOKING_ENCRYPTION_KEY: z.string(),
-    GOOGLE_STATIC_MAP_KEY: z.string().optional(),
-    GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string().optional(),
+    GOOGLE_STATIC_MAP_KEY: z.string(),
+    GOOGLE_STATIC_MAP_SIGNATURE_SECRET: z.string(),
+    GOOGLE_DYNAMIC_MAP_ID: z.string(),
+    GOOGLE_STATIC_MAP_ID: z.string(),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -113,5 +115,7 @@ export const env = createEnv({
     GOOGLE_STATIC_MAP_KEY: process.env.GOOGLE_STATIC_MAP_KEY,
     GOOGLE_STATIC_MAP_SIGNATURE_SECRET:
       process.env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET,
+    GOOGLE_STATIC_MAP_ID: process.env.GOOGLE_STATIC_MAP_ID,
+    GOOGLE_DYNAMIC_MAP_ID: process.env.GOOGLE_DYNAMIC_MAP_ID,
   },
 })

types/components/hotelPage/map/dynamicMap.ts

@@ -6,4 +6,5 @@ export interface DynamicMapProps {
   hotelName: string
   coordinates: Coordinates
   pointsOfInterest: PointOfInterest[]
+  mapId: string
 }

types/components/hotelPage/map/mapCard.ts

@@ -1,4 +1,4 @@
-import { PointOfInterest } from "@/types/hotel"
+import type { PointOfInterest } from "@/types/hotel"
 
 export interface MapCardProps {
   hotelName: string

types/components/hotelPage/map/mapContent.ts

@@ -1,9 +1,10 @@
-import { PointOfInterest } from "@/types/hotel"
-import type { Coordinates } from "../../maps/coordinates"
+import type { Coordinates } from "@/types/components/maps/coordinates"
+import type { PointOfInterest } from "@/types/hotel"
 
 export interface MapContentProps {
   coordinates: Coordinates
   pointsOfInterest: PointOfInterest[]
   activePoi: PointOfInterest["name"] | null
+  mapId: string
   onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
 }

types/components/hotelPage/map/sidebar.ts

@@ -1,4 +1,4 @@
-import { PointOfInterest } from "@/types/hotel"
+import type { PointOfInterest } from "@/types/hotel"
 
 export interface SidebarProps {
   hotelName: string

types/components/hotelPage/roomCard.ts

@@ -1,4 +1,4 @@
-import { RoomData } from "@/types/hotel"
+import type { RoomData } from "@/types/hotel"
 
 export interface RoomCardProps {
   id: string

types/components/maps/poiMarker.ts

@@ -1,7 +1,7 @@
-import { VariantProps } from "class-variance-authority"
-
 import { poiVariants } from "@/components/Maps/Markers/Poi/variants"
 
+import type { VariantProps } from "class-variance-authority"
+
 export interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
   size?: number
   className?: string

types/components/maps/staticMap.ts

@@ -1,4 +1,4 @@
-import { Coordinates } from "./coordinates"
+import type { Coordinates } from "./coordinates"
 
 export type StaticMapProps = {
   city?: string
@@ -8,4 +8,5 @@ export type StaticMapProps = {
   zoomLevel?: number
   mapType?: "roadmap" | "satellite" | "terrain" | "hybrid"
   altText: string
+  mapId?: string
 }