Merged in feat/SW-1445-destination-page-overview-dynamic-map (pull request #1201)

feat/SW-1445 destination page overview dynamic map

* feat(SW-1445): add dynamic map to destination overview page

* feat(SW-1445): fix typo

* feat(SW-1445): refactor form


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

components/ContentType/DestinationOverviewPage/OverviewMapContainer/InputForm/index.tsx

@@ -0,0 +1,19 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import styles from "./inputFrom.module.css"
+
+export default function InputForm() {
+  const intl = useIntl()
+  return (
+    <form className={styles.form}>
+      <input
+        type="text"
+        placeholder={intl.formatMessage({
+          id: "Find hotels and destinations",
+        })}
+        className={styles.formInput}
+      />
+    </form>
+  )
+}

components/ContentType/DestinationOverviewPage/OverviewMapContainer/InputForm/inputFrom.module.css

@@ -0,0 +1,14 @@
+.form {
+  position: absolute;
+  top: 25px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  background-color: var(--Base-Background-Primary-Normal);
+}
+
+.formInput {
+  padding: var(--Spacing-x-one-and-half);
+  border: none;
+  width: 250px;
+}

components/ContentType/DestinationOverviewPage/OverviewMapContainer/OverviewMap/index.tsx

@@ -0,0 +1,62 @@
+"use client"
+import { Map, type MapProps, useMap } from "@vis.gl/react-google-maps"
+import { useIntl } from "react-intl"
+
+import { MinusIcon, PlusIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./overviewMap.module.css"
+
+import type { OverviewMapProps } from "@/types/components/destinationOverviewPage/overviewMap/overviewMap"
+
+export default function OverviewMap({ mapId }: OverviewMapProps) {
+  const map = useMap()
+  const intl = useIntl()
+
+  // Placeholder value, currently these coordinates are Stockholm
+  const defaultCenter = {
+    lat: 59.3293,
+    lng: 18.0686,
+  }
+
+  const mapOptions: MapProps = {
+    defaultZoom: 4,
+    minZoom: 3,
+    defaultCenter: defaultCenter,
+    disableDefaultUI: true,
+    clickableIcons: false,
+    mapId: mapId,
+  }
+
+  function zoomIn() {
+    const currentZoom = map && map.getZoom()
+    if (currentZoom) {
+      map.setZoom(currentZoom + 1)
+    }
+  }
+
+  function zoomOut() {
+    const currentZoom = map && map.getZoom()
+    if (currentZoom) {
+      map.setZoom(currentZoom - 1)
+    }
+  }
+
+  const zoomControls = (
+    <div className={styles.buttonContainer}>
+      <Button theme="base" intent="inverted" onClick={zoomOut}>
+        <MinusIcon width={12} height={12} color="black" />
+      </Button>
+      <Button theme="base" intent="inverted" onClick={zoomIn}>
+        <PlusIcon width={12} height={12} color="black" />
+      </Button>
+    </div>
+  )
+
+  return (
+    <div className={styles.mapContainer}>
+      <Map {...mapOptions}></Map>
+      {zoomControls}
+    </div>
+  )
+}

components/ContentType/DestinationOverviewPage/OverviewMapContainer/OverviewMap/overviewMap.module.css

@@ -0,0 +1,13 @@
+.mapContainer {
+  position: relative;
+  min-width: var(--max-width-page);
+  min-height: 700px; /* Placeholder value */
+}
+
+.buttonContainer {
+  position: absolute;
+  display: flex;
+  gap: var(--Spacing-x1);
+  right: 25px;
+  bottom: 25px;
+}

components/ContentType/DestinationOverviewPage/OverviewMapContainer/index.tsx

@@ -0,0 +1,19 @@
+"use client"
+import { APIProvider } from "@vis.gl/react-google-maps"
+
+import InputForm from "./InputForm"
+import OverviewMap from "./OverviewMap"
+
+import type { OverviewMapContainerProps } from "@/types/components/destinationOverviewPage/overviewMap/overviewMapContainer"
+
+export default function OverviewMapContainer({
+  apiKey,
+  mapId,
+}: OverviewMapContainerProps) {
+  return (
+    <APIProvider apiKey={apiKey}>
+      <InputForm />
+      <OverviewMap mapId={mapId} />
+    </APIProvider>
+  )
+}

components/ContentType/DestinationOverviewPage/destinationOverviewPage.module.css

@@ -1,4 +1,5 @@
 .pageContainer {
+  position: relative;
   display: grid;
   max-width: var(--max-width);
 }

components/ContentType/DestinationOverviewPage/index.tsx

@@ -1,9 +1,12 @@
 import { Suspense } from "react"
 
+import { env } from "@/env/server"
 import { getDestinationOverviewPage } from "@/lib/trpc/memoizedRequests"
 
 import TrackingSDK from "@/components/TrackingSDK"
 
+import OverviewMapContainer from "./OverviewMapContainer"
+
 import styles from "./destinationOverviewPage.module.css"
 
 export default async function DestinationOverviewPage() {
@@ -15,9 +18,15 @@ export default async function DestinationOverviewPage() {
 
   const { tracking, destinationOverviewPage } = pageData
 
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+
   return (
     <>
       <div className={styles.pageContainer}>
+        {googleMapsApiKey ? (
+          <OverviewMapContainer apiKey={googleMapsApiKey} mapId={googleMapId} />
+        ) : null}
         <h1>Destination Overview Page</h1>
       </div>
       <Suspense fallback={null}>

i18n/dictionaries/da.json

@@ -164,6 +164,7 @@
   "Filter by": "Filtrer efter",
   "Find booking": "Find booking",
   "Find hotels": "Find hotel",
+  "Find hotels and destinations": "Find hoteller og destinationer",
   "First name": "Fornavn",
   "First name can't contain any special characters": "Fornavn kan ikke indeholde specielle tegn",
   "First name is required": "Fornavn er påkrævet",

i18n/dictionaries/de.json

@@ -163,6 +163,7 @@
   "Filter by": "Filtern nach",
   "Find booking": "Buchung finden",
   "Find hotels": "Hotels finden",
+  "Find hotels and destinations": "Finden Sie Hotels und Reiseziele",
   "First name": "Vorname",
   "First name can't contain any special characters": "Der Vorname darf keine Sonderzeichen enthalten",
   "First name is required": "Vorname ist erforderlich",

i18n/dictionaries/en.json

@@ -175,6 +175,7 @@
   "Filter by": "Filter by",
   "Find booking": "Find booking",
   "Find hotels": "Find hotels",
+  "Find hotels and destinations": "Find hotels and destinations",
   "First name": "First name",
   "First name can't contain any special characters": "First name can't contain any special characters",
   "First name is required": "First name is required",

i18n/dictionaries/fi.json

@@ -164,6 +164,7 @@
   "Filter by": "Suodatusperuste",
   "Find booking": "Etsi varaus",
   "Find hotels": "Etsi hotelleja",
+  "Find hotels and destinations": "Etsi hotelleja ja kohteita",
   "First name": "Etunimi",
   "First name can't contain any special characters": "Etunimi ei voi sisältää erikoismerkkejä",
   "First name is required": "Etunimi vaaditaan",

i18n/dictionaries/no.json

@@ -163,6 +163,7 @@
   "Filter by": "Filtrer etter",
   "Find booking": "Finn booking",
   "Find hotels": "Finn hotell",
+  "Find hotels and destinations": "Finn hoteller og destinasjoner",
   "First name": "Fornavn",
   "First name can't contain any special characters": "Fornavn kan ikke inneholde spesielle tegn",
   "First name is required": "Fornavn kreves",

i18n/dictionaries/sv.json

@@ -163,6 +163,7 @@
   "Filter by": "Filtrera på",
   "Find booking": "Hitta bokning",
   "Find hotels": "Hitta hotell",
+  "Find hotels and destinations": "Hitta hotell och destinationer",
   "First name": "Förnamn",
   "First name can't contain any special characters": "Förnamn får inte innehålla några specialtecken",
   "First name is required": "Förnamn är obligatoriskt",

types/components/destinationOverviewPage/overviewMap/overviewMap.ts

@@ -0,0 +1,3 @@
+export type OverviewMapProps = {
+  mapId: string
+}

types/components/destinationOverviewPage/overviewMap/overviewMapContainer.ts

@@ -0,0 +1,4 @@
+export type OverviewMapContainerProps = {
+  apiKey: string
+  mapId: string
+}