feat(SW-189): added translations and some minor changes

components/Maps/StaticMap/index.tsx

@@ -1,46 +1,33 @@
 /* eslint-disable @next/next/no-img-element */
-import crypto from "node:crypto"
-
 import { env } from "@/env/server"
 
-import { StaticMapProps } from "@/types/components/maps/staticMap/staticMap"
+import { getUrlWithSignature } from "@/utils/map"
 
-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")
-}
+import { StaticMapProps } from "@/types/components/maps/staticMap"
 
 export default function StaticMap({
   city,
+  coordinates,
   width,
   height,
-  zoomLevel,
-  mapType,
+  zoomLevel = 14,
+  mapType = "roadmap",
+  altText,
 }: StaticMapProps) {
   const key = env.GOOGLE_STATIC_MAP_KEY
   const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
-  const safeSecret = decodeBase64Hash(removeWebSafe(secret ?? ""))
+  const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
+  const center = coordinates ? `${coordinates.lat},${coordinates.lng}` : city
 
+  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(
-    `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
+    `${baseUrl}?center=${center}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${key}`
   )
+  const src = getUrlWithSignature(url, secret)
 
-  const hashedSignature = makeWebSafe(
-    encodeBase64Hash(safeSecret, url.pathname + url.search)
-  )
-
-  const src = url.toString() + "&signature=" + hashedSignature
-
-  return <img src={src} alt={`Map of ${city} city center`} />
+  return <img src={src} alt={altText} />
 }