fix: wrong prop name

components/ContentType/HotelPage/StaticMap/ReadMe.md

@@ -0,0 +1,30 @@
+# Google Map Static API
+
+### About
+
+The Google Maps Static API lets you embed a Google Maps image on your web page. The Google Maps Static API service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. Due to regulations from Google we are not allowed to store and serve copies of images generated using the Google Maps Static API. All web pages that require static images must link the src attribute of an HTML img tag or as a background-image using CSS.
+
+### API Key Restrictions
+
+You can restrict your API key on websites, IP addresses, Android apps and iOS apps. For now (12/8-24) the API key is restricted by IP address, hence the request will only work at Scandic HQ network. This will be changed to a referrer website in the future.
+[Read more about API key restrictions](https://developers.google.com/maps/api-security-best-practices#restricting-api-keys)
+
+### Digital Signature
+
+Requests exceeding 25,000 requests per day require an API key and a digital signature. However, it is strongly recommended by Google to use both an API key and digital signature, regardless of the usage.
+
+The digital signature is set on the Google Maps Platform. For dynamically generated requests, the signature is handled through server side signing appending the signature as base64 on the request url.
+[Read more about digital signature](https://developers.google.com/maps/documentation/maps-static/digital-signature)
+
+### Generating new API keys
+
+Regenerating an API key creates a new key that has all the old key's restrictions. This process also starts a 24-hour timer after which the old API key is deleted. During this time window, both the old and new key are accepted, giving you a chance to migrate your apps to use the new key. However, after this time period elapses, any apps still using the old API key stop working.
+
+**Caution:** Only regenerate an API key if you absolutely must to avoid unauthorized use. This process can shut down legitimate traffic and prevent your apps from functioning properly.
+[Read more about regenerating keys](https://developers.google.com/maps/api-security-best-practices#regenerate-apikey)
+
+### Version history
+
+| Description         | Version | Date    | Author           |
+| ------------------- | ------- | ------- | ---------------- |
+| Create ReadMe file. | 1.0.0   | 12/8-24 | Fredrik Thorsson |

components/ContentType/HotelPage/StaticMap/index.tsx

@@ -0,0 +1,45 @@
+import { env } from "@/env/server"
+import { getIntl } from "@/i18n"
+import { StaticMapProps } from "@/types/components/hotelPage/staticMap"
+import crypto from "node:crypto"
+
+function removeWebSafe(safeEncodedString: string) {
+  return safeEncodedString.replace(/-/g, "+").replace(/_/g, "/")
+}
+
+function makeWebSafe(encodedString: string) {
+  return encodedString.replace(/\+/g, "-").replace(/\//g, "_")
+}
+
+function decodeBase64Hash(code: string) {
+  return Buffer.from(code, "base64")
+}
+
+function encodeBase64Hash(key: Buffer, data: string) {
+  return crypto.createHmac("sha1", key).update(data).digest("base64")
+}
+
+// Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
+export default async function StaticMap({
+  coordinates,
+  hotelName,
+  zoomLevel = 14,
+}: StaticMapProps) {
+  const intl = await getIntl()
+  const key = env.GOOGLE_STATIC_MAP_KEY
+  const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
+  const safeSecret = decodeBase64Hash(removeWebSafe(secret ?? ""))
+  const alt = intl.formatMessage({ id: "Map of HOTEL_NAME" }, { hotelName })
+
+  const url = new URL(
+    `https://maps.googleapis.com/maps/api/staticmap?center=${coordinates.latitude},${coordinates.longitude}&zoom=${zoomLevel}&size=380x640&key=${key}`
+  )
+
+  const hashedSignature = makeWebSafe(
+    encodeBase64Hash(safeSecret, url.pathname + url.search)
+  )
+
+  const src = url.toString() + "&signature=" + hashedSignature
+
+  return <img src={src} alt={alt} />
+}

components/ContentType/HotelPage/index.tsx

@@ -1,7 +1,10 @@
 import { serverClient } from "@/lib/trpc/server"
 
+<<<<<<< HEAD
 import { MOCK_FACILITIES } from "./Facilities/mockData"
 import { setActivityCard } from "./Facilities/utils"
+=======
+>>>>>>> 491f385b (fix: wrong prop name)
 import AmenitiesList from "./AmenitiesList"
 import Facilities from "./Facilities"
 import IntroSection from "./IntroSection"
@@ -11,6 +14,7 @@ import SidePeeks from "./SidePeeks"
 import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
+import StaticMap from "./StaticMap"
 
 export default async function HotelPage() {
   const hotelData = await serverClient().hotel.get({
@@ -34,6 +38,11 @@ export default async function HotelPage() {
 
   const facilities = [...MOCK_FACILITIES]
   activitiesCard && facilities.push(setActivityCard(activitiesCard))
+  
+  const coordinates = {
+    latitude: hotelLocation.latitude,
+    longitude: hotelLocation.longitude,
+  }
 
   return (
     <div className={styles.pageContainer}>
@@ -55,7 +64,9 @@ export default async function HotelPage() {
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} />
       </main>
-      <aside className={styles.mapContainer}></aside>
+      <aside className={styles.mapContainer}>
+        <StaticMap coordinates={coordinates} hotelName={hotelName} />
+      </aside>
       <SidePeeks />
     </div>
   )

types/components/hotelPage/staticMap.ts

@@ -0,0 +1,10 @@
+type Coordinates = {
+  latitude: number
+  longitude: number
+}
+
+export type StaticMapProps = {
+  coordinates: Coordinates
+  hotelName: string
+  zoomLevel?: number
+}