Merged in feat/sw-3240-move-staticmap-to-design-system (pull request #2654)

feat(SW-3240): Move StaticMap to design-system

* Move StaticMap to design-system


Approved-by: Joakim Jäderberg

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

@@ -1,61 +1,22 @@
-/* eslint-disable @next/next/no-img-element */
+import StaticMapPrimitive from "@scandic-hotels/design-system/StaticMap"
+
 import { env } from "@/env/server"
 
-import { getUrlWithSignature } from "@/utils/map"
+import type { ComponentProps } from "react"
 
-import type { StaticMapProps } from "@/types/components/maps/staticMap"
-
-function getCenter({
-  coordinates,
-  city,
-  country,
-}: {
-  coordinates?: { lat: number; lng: number }
-  city?: string
-  country?: string
-}): string | undefined {
-  if (coordinates) {
-    return `${coordinates.lat},${coordinates.lng}`
-  }
-  if (city && country) {
-    return `${city}, ${country}`
-  }
-  if (country) {
-    return country
-  }
-  return city
-}
-
-export default function StaticMap({
-  city,
-  country,
-  coordinates,
-  width,
-  height,
-  zoomLevel = 14,
-  mapType = "roadmap",
-  altText,
-  mapId,
-}: StaticMapProps) {
+type Props = Omit<
+  ComponentProps<typeof StaticMapPrimitive>,
+  "googleMapKey" | "googleMapSecret"
+>
+export default async function StaticMap(props: Props) {
   const key = env.GOOGLE_STATIC_MAP_KEY
   const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
-  const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
-  const center = getCenter({ coordinates, city, country })
 
-  if (!center) {
-    return null
-  }
-
-  // Google Maps Static API only supports images smaller than 640x640px. Read: https://developers.google.com/maps/documentation/maps-static/start#Largerimagesizes
-  const url = new URL(
-    `${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
+  return (
+    <StaticMapPrimitive
+      {...props}
+      googleMapKey={key}
+      googleMapSecret={secret}
+    />
   )
-
-  if (mapId) {
-    url.searchParams.append("map_id", mapId)
-  }
-
-  const src = getUrlWithSignature(url, secret)
-
-  return <img src={src} alt={altText} />
 }