feat(SW-68): add static map component

.env.local.example

@@ -42,3 +42,5 @@ OPENSSL_MODULES="/var/lang/lib/ossl-modules"
 PUBLIC_URL="http://localhost:3000"
 AUTH_URL="$PUBLIC_URL/api/web/auth"
 NEXTAUTH_URL="$PUBLIC_URL/api/web/auth"
+
+NEXT_PUBLIC_GOOGLE_STATIC_MAP_KEY=""

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css

@@ -1,12 +1,23 @@
 .main {
   display: grid;
-  grid-template-columns: repeat(3, minmax(min-content, max-content));
+  grid-template-columns: repeat(2, minmax(min-content, max-content));
+  gap: var(--Spacing-x4);
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   height: 100dvh;
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
+.button {
+  padding-left: var(--Spacing-x0);
+}
+
 .section {
   display: grid;
   gap: var(--Spacing-x4);
 }
+
+.link {
+  display: flex;
+  align-items: center;
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+}

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -2,6 +2,10 @@ import { serverClient } from "@/lib/trpc/server"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import { ChevronRightIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Link from "@/components/TempDesignSystem/Link"
+import { getIntl } from "@/i18n"
 
 import styles from "./page.module.css"
 
@@ -10,6 +14,8 @@ import { LangParams, PageArgs } from "@/types/params"
 export default async function SelectHotelPage({
   params,
 }: PageArgs<LangParams>) {
+  const { formatMessage } = await getIntl()
+
   const { attributes } = await serverClient().hotel.getHotel({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
     language: params.lang,
@@ -20,14 +26,36 @@ export default async function SelectHotelPage({
     hotelId: "d98c7ab1-ebaa-4102-b351-758daf1ddf55",
   })
 
+  const tempSearchTerm = "Stockholm"
+
   return (
-    <main className={styles.main}>
+    <>
-      <HotelFilter filters={hotelFilters} />
+      <main className={styles.main}>
-      <section className={styles.section}>
+        <nav className={styles.nav}>
-        {hotels.map((hotel) => (
+          <StaticMap
-          <HotelCard key={hotel.name} hotel={hotel} />
+            city={tempSearchTerm}
-        ))}
+            width={340}
-      </section>
+            height={180}
-    </main>
+            zoomLevel={11}
+            mapType="roadmap"
+          />
+          <Link
+            className={styles.link}
+            color="burgundy"
+            variant="underscored"
+            href="#"
+          >
+            {formatMessage({ id: "Show map" })}
+            <ChevronRightIcon color="burgundy" className={styles.icon} />
+          </Link>
+          <HotelFilter filters={hotelFilters} />
+        </nav>
+        <section className={styles.section}>
+          {hotels.map((hotel) => (
+            <HotelCard key={hotel.name} hotel={hotel} />
+          ))}
+        </section>
+      </main>
+    </>
   )
 }

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -3,6 +3,7 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
+  overflow: hidden;
   height: 460px;
   width: 480px;
 }
@@ -11,7 +12,7 @@
   height: auto;
   max-height: 180px;
   object-fit: cover;
-  overflow: hidden;
+
   width: 100%;
 }
 

components/Maps/StaticMap/index.tsx

@@ -0,0 +1,24 @@
+import Image from "@/components/Image"
+
+import { StaticMapProps } from "@/types/components/maps/staticMap/staticMap"
+
+export default function StaticMap({
+  city,
+  width,
+  height,
+  zoomLevel,
+  mapType,
+}: StaticMapProps) {
+  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_STATIC_MAP_KEY
+  const mapUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${city}&zoom=${zoomLevel}&size=${width}x${height}&maptype=${mapType}&key=${apiKey}`
+
+  return (
+    <Image
+      src=""
+      overrideSrc={mapUrl}
+      alt={`Map of ${city} city center`}
+      width={width}
+      height={height}
+    />
+  )
+}

i18n/dictionaries/da.json

@@ -126,5 +126,6 @@
   "Zip code": "Postnummer",
   "Room facilities": "Værelsesfaciliteter",
   "Hotel facilities": "Hotel faciliteter",
-  "Hotel surroundings": "Hotel omgivelser"
+  "Hotel surroundings": "Hotel omgivelser",
+  "Show map": "Vis kort"
 }

i18n/dictionaries/de.json

@@ -126,5 +126,6 @@
   "Zip code": "PLZ",
   "Room facilities": "Zimmerausstattung",
   "Hotel facilities": "Hotel-Infos",
-  "Hotel surroundings": "Umgebung des Hotels"
+  "Hotel surroundings": "Umgebung des Hotels",
+  "Show map": "Karte anzeigen"
 }

i18n/dictionaries/en.json

@@ -131,5 +131,6 @@
   "Zip code": "Zip code",
   "Room facilities": "Room facilities",
   "Hotel facilities": "Hotel facilities",
-  "Hotel surroundings": "Hotel surroundings"
+  "Hotel surroundings": "Hotel surroundings",
+  "Show map": "Show map"
 }

i18n/dictionaries/fi.json

@@ -126,5 +126,6 @@
   "Zip code": "Postinumero",
   "Room facilities": "Huoneen varustelu",
   "Hotel facilities": "Hotellin palvelut",
-  "Hotel surroundings": "Hotellin ympäristö"
+  "Hotel surroundings": "Hotellin ympäristö",
+  "Show map": "Näytä kartta"
 }

i18n/dictionaries/no.json

@@ -126,5 +126,6 @@
   "Zip code": "Post kode",
   "Room facilities": "Romfasiliteter",
   "Hotel facilities": "Hotelfaciliteter",
-  "Hotel surroundings": "Hotellomgivelser"
+  "Hotel surroundings": "Hotellomgivelser",
+  "Show map": "Vis kart"
 }

i18n/dictionaries/sv.json

@@ -129,5 +129,6 @@
   "Zip code": "Postnummer",
   "Room facilities": "Rumlfaciliteter",
   "Hotel facilities": "Hotellfaciliteter",
-  "Hotel surroundings": "Hotellomgivning"
+  "Hotel surroundings": "Hotellomgivning",
+  "Show map": "Visa karta"
 }

next.config.js

@@ -41,6 +41,11 @@ const nextConfig = {
         protocol: "https",
         hostname: "imagevault.scandichotels.com",
       },
+      {
+        protocol: "https",
+        hostname: "maps.googleapis.com",
+        pathname: "/maps/api/staticmap?**",
+      },
     ],
   },
 

types/components/maps/staticMap/staticMap.ts

@@ -0,0 +1,7 @@
+export type StaticMapProps = {
+  city: string
+  width: number
+  height: number
+  zoomLevel: number
+  mapType: "roadmap" | "satellite" | "terrain" | "hybrid"
+}