scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Fredrik Thorsson
2025-01-24 09:06:35 +00:00
parent cea4e3f3fe
commit 879a2e9cfd
15 changed files with 150 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/ContentType/DestinationOverviewPage/OverviewMapContainer/InputForm/index.tsx Normal file
View File

@@ -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>
)
}

14
components/ContentType/DestinationOverviewPage/OverviewMapContainer/InputForm/inputFrom.module.css Normal file
View File

@@ -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;
}

62
components/ContentType/DestinationOverviewPage/OverviewMapContainer/OverviewMap/index.tsx Normal file
View File

@@ -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>
)
}

13
components/ContentType/DestinationOverviewPage/OverviewMapContainer/OverviewMap/overviewMap.module.css Normal file
View File

@@ -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;
}

19
components/ContentType/DestinationOverviewPage/OverviewMapContainer/index.tsx Normal file
View File

@@ -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>
)
}

1
components/ContentType/DestinationOverviewPage/destinationOverviewPage.module.css
View File

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

9
components/ContentType/DestinationOverviewPage/index.tsx
View File

@@ -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}>

1
i18n/dictionaries/da.json
View File

@@ -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",

1
i18n/dictionaries/de.json
View File

@@ -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",

1
i18n/dictionaries/en.json
View File

@@ -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",

1
i18n/dictionaries/fi.json
View File

@@ -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",

1
i18n/dictionaries/no.json
View File

@@ -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",

1
i18n/dictionaries/sv.json
View File

@@ -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",

3
types/components/destinationOverviewPage/overviewMap/overviewMap.ts Normal file
View File

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

4
types/components/destinationOverviewPage/overviewMap/overviewMapContainer.ts Normal file
View File

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