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

Fix/SW-2429 map view

Browse Source 
* feat(SW-2429): Removed [contentType]>[uid] and use app router based structure for content types

* feat(SW-2429): Added breadcrumbs to follow contenttype folder structure

* feat(SW-2429): Removed modal/dialog functionality from map views on hotel and destination pages

* fix(SW-2429): Fixed issue with booking widget on meeting pages. Also used same structure for content types

Approved-by: Arvid Norlin
This commit is contained in:
Erik Tiekstra
2025-04-25 05:36:44 +00:00
parent 6d7fbe0894
commit b75177ad98
55 changed files with 705 additions and 730 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
View File

@@ -1,3 +1,7 @@
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 949px) {
.title {
display: none;

17
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useDestinationDataStore } from "@/stores/destination-data"
import Map from "../../Map"
import { getHeadingText } from "../../utils"
@@ -44,14 +44,11 @@ export default function CityMap({
pageType="city"
defaultLocation={defaultLocation}
>
<Title
level="h2"
as="h3"
textTransform="regular"
className={styles.title}
>
{getHeadingText(intl, city.name, allFilters, activeFilters[0])}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{getHeadingText(intl, city.name, allFilters, activeFilters[0])}
</h1>
</Typography>
<HotelList />
</Map>
)

87
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
View File

@@ -21,7 +21,13 @@ import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton"
import styles from "./destinationCityPage.module.css"
export default async function DestinationCityPage() {
interface DestinationCityPageProps {
isMapView: boolean
}
export default async function DestinationCityPage({
isMapView,
}: DestinationCityPageProps) {
const pageData = await getDestinationCityPage()
if (!pageData) {
@@ -46,45 +52,48 @@ export default async function DestinationCityPage() {
<>
<Suspense fallback={<DestinationCityPageSkeleton />}>
<HotelDataContainer cityIdentifier={cityIdentifier}>
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages images={images} destinationName={city.name} />
) : null}
</header>
<main className={styles.mainContent}>
<HotelListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={city.name} preamble={preamble}>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={city.name}
/>
)}
{isMapView ? (
<CityMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
city={city}
defaultLocation={destination_settings.location}
/>
) : (
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages images={images} destinationName={city.name} />
) : null}
</header>
<main className={styles.mainContent}>
<HotelListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={city.name} preamble={preamble}>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={city.name}
/>
)}
{destination_settings.city && (
<StaticMap
city={destination_settings.city}
location={destination_settings.location}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
<CityMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
city={city}
defaultLocation={destination_settings.location}
/>
{destination_settings.city && (
<StaticMap
city={destination_settings.city}
location={destination_settings.location}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
)}
</HotelDataContainer>
</Suspense>
<DestinationTracking pageData={tracking} />

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/countryMap.module.css
View File

@@ -1,3 +1,7 @@
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 949px) {
.title {
display: none;

17
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/index.tsx
View File

@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Title from "@/components/TempDesignSystem/Text/Title"
import { useDestinationDataStore } from "@/stores/destination-data"
import Map from "../../Map"
import { getHeadingText } from "../../utils"
@@ -44,14 +44,11 @@ export default function CountryMap({
pageType="country"
defaultLocation={defaultLocation}
>
<Title
level="h2"
as="h3"
textTransform="regular"
className={styles.title}
>
{getHeadingText(intl, country, allFilters, activeFilters[0])}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{getHeadingText(intl, country, allFilters, activeFilters[0])}
</h1>
</Typography>
<CityList />
</Map>
)

81
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
View File

@@ -1,6 +1,7 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
import Breadcrumbs from "@/components/Breadcrumbs"
@@ -14,11 +15,18 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek"
import TopImages from "../TopImages"
import DestinationTracking from "../Tracking"
import CountryMap from "./CountryMap"
import DestinationCountryPageSkeleton from "./DestinationCountryPageSkeleton"
import styles from "./destinationCountryPage.module.css"
export default async function DestinationCountryPage() {
interface DestinationCountryPageProps {
isMapView: boolean
}
export default async function DestinationCountryPage({
isMapView,
}: DestinationCountryPageProps) {
const pageData = await getDestinationCountryPage()
if (!pageData) {
@@ -43,38 +51,47 @@ export default async function DestinationCountryPage() {
<>
<Suspense fallback={<DestinationCountryPageSkeleton />}>
<CityDataContainer country={destination_settings.country}>
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages
images={images}
destinationName={translatedCountry}
/>
) : null}
</header>
<main className={styles.mainContent}>
<CityListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper
location={translatedCountry}
preamble={preamble}
>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={translatedCountry}
{isMapView ? (
<CountryMap
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
apiKey={env.GOOGLE_STATIC_MAP_KEY}
country={translatedCountry}
defaultLocation={destination_settings.location}
/>
) : (
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages
images={images}
destinationName={translatedCountry}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
) : null}
</header>
<main className={styles.mainContent}>
<CityListing />
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper
location={translatedCountry}
preamble={preamble}
>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek
buttonText={sidepeek_button_text}
sidePeekContent={sidepeek_content}
location={translatedCountry}
/>
)}
</SidebarContentWrapper>
</aside>
</div>
)}
</CityDataContainer>
</Suspense>
<DestinationTracking pageData={tracking} />

2
apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
View File

@@ -51,7 +51,7 @@ export default function DynamicMap({
const pageType = usePageType()
const { activeMarker } = useDestinationPageHotelsMapStore()
const ref = useRef<HTMLDivElement>(null)
const [hasFittedBounds, setHasFittedBounds] = useState(false)
const [hasFittedBounds, setHasFittedBounds] = useState(!!activeMarker)
useEffect(() => {
if (ref.current && activeMarker && pageType === "overview") {

115
apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx
View File

@@ -1,15 +1,13 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useRouter } from "next/navigation"
import {
type PropsWithChildren,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -48,17 +46,11 @@ export default function Map({
children,
}: PropsWithChildren<MapProps>) {
const router = useRouter()
const searchParams = useSearchParams()
const { activeMarker: activeHotelId, setActiveMarker } =
useDestinationPageHotelsMapStore()
const isMapView = useMemo(
() => searchParams.get("view") === "map",
[searchParams]
)
const activeHotel = hotels.find(({ hotel }) => hotel.id === activeHotelId)
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("0px")
const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
const [mapHeight, setMapHeight] = useState("100dvh")
const intl = useIntl()
@@ -92,25 +84,6 @@ export default function Map({
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
// Making sure the map is always opened at the top of the page,
// just below the header and booking widget as these should stay visible.
// When closing, the page should scroll back to the position it was before opening the map.
useEffect(() => {
// Skip the first render
if (!rootDiv.current) {
return
}
if (isMapView && scrollHeightWhenOpened === 0) {
const scrollY = window.scrollY
setScrollHeightWhenOpened(scrollY)
window.scrollTo({ top: 0, behavior: "instant" })
} else if (!isMapView && scrollHeightWhenOpened !== 0) {
window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
setScrollHeightWhenOpened(0)
}
}, [isMapView, scrollHeightWhenOpened, rootDiv])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
@@ -125,7 +98,7 @@ export default function Map({
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, isMapView, handleMapHeight])
}, [rootDiv, handleMapHeight])
function handleClose() {
const url = new URL(window.location.href)
@@ -136,57 +109,39 @@ export default function Map({
return (
<MapProvider apiKey={apiKey} pageType={pageType}>
<div className={styles.wrapper} ref={rootDiv}>
<Modal
isOpen={isMapView}
UNSTABLE_portalContainer={rootDiv.current || undefined}
>
<Dialog
className={styles.dialog}
style={
{ "--destination-map-height": mapHeight } as React.CSSProperties
}
aria-label={intl.formatMessage({
defaultMessage: "Map view",
})}
<div
className={styles.mapWrapper}
style={{ height: mapHeight }}
ref={rootDiv}
>
<div className={styles.mobileNavigation}>
<Button
intent="text"
theme="base"
variant="icon"
onClick={handleClose}
>
<div className={styles.mobileNavigation}>
<Button
intent="text"
theme="base"
variant="icon"
onClick={handleClose}
>
<MaterialIcon
icon="chevron_left"
size={20}
color="CurrentColor"
/>
{intl.formatMessage({
defaultMessage: "Back",
})}
</Button>
<DestinationFilterAndSort
listType={pageType === "city" ? "hotel" : "city"}
/>
</div>
<aside className={styles.sidebar}>{children}</aside>
<DynamicMap
markers={markers}
mapId={mapId}
onClose={handleClose}
defaultCenter={defaultCenter}
defaultZoom={defaultZoom}
fitBounds={!activeHotel}
gestureHandling="greedy"
>
<MapContent
geojson={geoJson}
hasActiveFilters={hasActiveFilters}
/>
</DynamicMap>
</Dialog>
</Modal>
<MaterialIcon icon="chevron_left" size={20} color="CurrentColor" />
{intl.formatMessage({
defaultMessage: "Back",
})}
</Button>
<DestinationFilterAndSort
listType={pageType === "city" ? "hotel" : "city"}
/>
</div>
<aside className={styles.sidebar}>{children}</aside>
<DynamicMap
markers={markers}
mapId={mapId}
onClose={handleClose}
defaultCenter={defaultCenter}
defaultZoom={defaultZoom}
fitBounds={!activeHotel}
gestureHandling="greedy"
>
<MapContent geojson={geoJson} hasActiveFilters={hasActiveFilters} />
</DynamicMap>
</div>
</MapProvider>
)

22
apps/scandic-web/components/ContentType/DestinationPage/Map/map.module.css
View File

@@ -1,14 +1,10 @@
.dialog {
--destination-map-height: 100dvh;
position: absolute;
top: 0;
left: 0;
height: var(--destination-map-height);
width: 100dvw;
z-index: var(--hotel-dynamic-map-z-index);
.mapWrapper {
position: fixed;
display: flex;
height: 100dvh;
width: 100dvw;
background-color: var(--Base-Surface-Primary-light-Normal);
z-index: 1;
}
.sidebar {
@@ -22,12 +18,6 @@
gap: var(--Spacing-x4);
}
.wrapper {
position: absolute;
top: 0;
left: 0;
}
.closeButton {
pointer-events: initial;
box-shadow: var(--button-box-shadow);
@@ -39,7 +29,7 @@
}
@media screen and (max-width: 949px) {
.dialog {
.mapWrapper {
flex-direction: column;
}

2
apps/scandic-web/components/ContentType/DestinationPage/Map/utils.ts
View File

@@ -42,7 +42,7 @@ export function getHotelMapMarkers(hotels: DestinationPagesHotelData[]) {
: null,
url: url,
tripadvisor: hotel.tripadvisor,
amenities: hotel.detailedFacilities,
amenities: hotel.detailedFacilities.slice(0, 3),
image: getImage({ hotel, url }),
}))

113
apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx Normal file
View File

@@ -0,0 +1,113 @@
"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useRouter } from "next/navigation"
import { useCallback, useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import { debounce } from "@/utils/debounce"
import Sidebar from "./Sidebar"
import styles from "./hotelMapPage.module.css"
import type { Coordinates } from "@/types/components/maps/coordinates"
import type { PointOfInterest } from "@/types/hotel"
interface HotelMapPageClientProps {
apiKey: string
hotelName: string
coordinates: Coordinates
pointsOfInterest: PointOfInterest[]
mapId: string
}
export default function HotelMapPageClient({
apiKey,
hotelName,
coordinates,
pointsOfInterest,
mapId,
}: HotelMapPageClientProps) {
const intl = useIntl()
const router = useRouter()
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("100dvh")
const [activePoi, setActivePoi] = useState<string | null>(null)
// Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
const handleMapHeight = useCallback(() => {
const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
const scrollY = window.scrollY
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
function handleClose() {
const url = new URL(window.location.href)
url.searchParams.delete("view")
router.push(url.toString())
}
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, handleMapHeight])
const closeButton = (
<Button
variant="Primary"
color="Inverted"
size="Small"
className={styles.closeButton}
onPress={handleClose}
typography="Body/Supporting text (caption)/smBold"
>
<MaterialIcon icon="close" size={20} color="CurrentColor" />
<span>
{intl.formatMessage({
defaultMessage: "Close the map",
})}
</span>
</Button>
)
return (
<APIProvider apiKey={apiKey}>
<div
className={styles.mapWrapper}
ref={rootDiv}
style={{ "--hotel-map-height": mapHeight } as React.CSSProperties}
>
<Sidebar
activePoi={activePoi}
hotelName={hotelName}
pointsOfInterest={pointsOfInterest}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
coordinates={coordinates}
/>
<InteractiveMap
closeButton={closeButton}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
activePoi={activePoi}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
mapId={mapId}
/>
</div>
</APIProvider>
)
}

98
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx → apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx
View File

@@ -1,13 +1,14 @@
"use client"
import { useMap } from "@vis.gl/react-google-maps"
import { cx } from "class-variance-authority"
import { useState } from "react"
import { Button as AriaButton } from "react-aria-components"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import PoiMarker from "@/components/Maps/Markers/Poi"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./sidebar.module.css"
@@ -134,64 +135,61 @@ export default function Sidebar({
isFullScreenSidebar ? styles.fullscreen : ""
}`}
>
<Button
theme="base"
intent="text"
wrapping
fullWidth
className={styles.sidebarToggle}
onClick={toggleFullScreenSidebar}
>
<Body textTransform="bold" color="textMediumContrast" asChild>
<span>{isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}</span>
</Body>
</Button>
<Typography variant="Body/Paragraph/mdBold">
<AriaButton
className={styles.sidebarToggle}
onPress={toggleFullScreenSidebar}
>
{isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}
</AriaButton>
</Typography>
<div className={styles.sidebarContent}>
<Title as="h4" level="h2" textTransform="regular">
{intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
</Title>
<Typography variant="Title/sm">
<h1 className={styles.title}>
{intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
</h1>
</Typography>
{poisInGroups.map(({ group, pois }) =>
pois.length ? (
<div key={group} className={styles.poiGroup}>
<Body
color="black"
textTransform="bold"
className={styles.poiHeading}
asChild
>
<h3>
<Typography variant="Body/Paragraph/mdBold">
<h3 className={styles.poiHeading}>
<PoiMarker group={group} />
{translatePOIGroup(group)}
</h3>
</Body>
</Typography>
<ul className={styles.poiList}>
{pois.map((poi) => (
<li key={poi.name} className={styles.poiItem}>
<button
className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
onMouseEnter={() => handleMouseEnter(poi.name)}
onClick={() =>
handlePoiClick(poi.name, poi.coordinates)
}
>
<span>{poi.name}</span>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</button>
<Typography variant="Body/Paragraph/mdRegular">
<AriaButton
className={cx(styles.poiButton, {
[styles.active]: activePoi === poi.name,
})}
onHoverStart={() => handleMouseEnter(poi.name)}
onPress={() =>
handlePoiClick(poi.name, poi.coordinates)
}
>
<span>{poi.name}</span>
<span>
{intl.formatMessage(
{
defaultMessage: "{distanceInKm} km",
},
{
distanceInKm: poi.distance,
}
)}
</span>
</AriaButton>
</Typography>
</li>
))}
</ul>

51
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css → apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css
View File

@@ -5,20 +5,21 @@
.sidebarContent {
display: grid;
gap: var(--Spacing-x5);
gap: var(--Space-x5);
align-content: start;
overflow-y: auto;
}
.poiGroup {
display: grid;
gap: var(--Spacing-x2);
gap: var(--Space-x2);
}
.poiHeading {
display: flex;
align-items: center;
gap: var(--Spacing-x1);
gap: var(--Space-x1);
color: var(--Text-Default);
}
.poiList {
@@ -26,23 +27,20 @@
}
.poiItem {
padding: var(--Spacing-x1) 0;
border-bottom: 1px solid var(--Base-Border-Subtle);
padding: var(--Space-x1) 0;
border-bottom: 1px solid var(--Border-Default);
}
.poiButton {
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: var(--typography-Body-Regular-fontWeight);
color: var(--UI-Text-High-contrast);
width: 100%;
display: grid;
grid-template-columns: 1fr max-content;
gap: var(--Spacing-x2);
align-items: center;
padding: var(--Spacing-x-half) var(--Spacing-x1);
gap: var(--Space-x2);
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
color: var(--Text-Default);
width: 100%;
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-Medium);
cursor: pointer;
text-align: left;
@@ -52,6 +50,10 @@
background-color: var(--Base-Surface-Primary-light-Hover);
}
.title {
color: var(--Text-Heading);
}
@media screen and (max-width: 767px) {
.sidebar {
--sidebar-mobile-toggle-height: 84px;
@@ -84,24 +86,27 @@
bottom: 0;
}
button.sidebarToggle {
.sidebarToggle {
position: relative;
margin-top: var(--Spacing-x4);
padding: var(--Spacing-x2) !important;
color: var(--Text-Secondary);
background-color: var(--Base-Surface-Primary-light-Normal);
border-width: 0;
margin-top: var(--Space-x4);
padding: var(--Space-x2);
}
button.sidebarToggle::before {
.sidebarToggle::before {
content: "";
position: absolute;
display: block;
top: -0.5rem;
width: 100px;
width: 46px;
height: 3px;
background-color: var(--UI-Text-High-contrast);
background-color: var(--Icon-Interactive-Disabled);
}
.sidebarContent {
padding: var(--Spacing-x3) var(--Spacing-x2);
padding: var(--Space-x3) var(--Space-x2);
height: var(--sidebar-mobile-content-height);
}
}
@@ -115,12 +120,12 @@
background-color: var(--Base-Surface-Primary-light-Normal);
}
button.sidebarToggle {
.sidebarToggle {
display: none;
}
.sidebarContent {
padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x9);
padding: var(--Space-x4) var(--Space-x5) var(--Space-x8);
height: 100%;
position: relative;
}

20
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css → apps/scandic-web/components/ContentType/HotelMapPage/hotelMapPage.module.css
View File

@@ -1,23 +1,17 @@
.dynamicMap {
.mapWrapper {
--hotel-map-height: 100dvh;
position: absolute;
top: 0;
left: 0;
position: fixed;
display: flex;
height: var(--hotel-map-height);
width: 100dvw;
z-index: var(--hotel-dynamic-map-z-index);
display: flex;
background-color: var(--Base-Surface-Primary-light-Normal);
}
.wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.closeButton {
pointer-events: initial;
box-shadow: var(--button-box-shadow);
gap: var(--Spacing-x-half);
color: var(--Component-Button-Inverted-On-fill-Default);
pointer-events: initial;
gap: var(--Space-x05);
}

42
apps/scandic-web/components/ContentType/HotelMapPage/index.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
import { getLang } from "@/i18n/serverContext"
import HotelMapPageClient from "./Client"
interface HotelMapPageProps {
hotelId: string
}
export default async function HotelMapPage({ hotelId }: HotelMapPageProps) {
const lang = getLang()
const hotelPageData = await getHotelPage()
const hotelData = await getHotel({
hotelId,
isCardOnlyPayment: false,
language: lang,
})
if (!hotelPageData || !hotelData) {
notFound()
}
const { name, location, pointsOfInterest } = hotelData.hotel
const coordinates = {
lat: location.latitude,
lng: location.longitude,
}
return (
<HotelMapPageClient
apiKey={env.GOOGLE_STATIC_MAP_KEY}
mapId={env.GOOGLE_DYNAMIC_MAP_ID}
hotelName={name}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
/>
)
}

142
apps/scandic-web/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
View File

@@ -1,142 +0,0 @@
"use client"
import { APIProvider } from "@vis.gl/react-google-maps"
import { useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import { Dialog, Modal } from "react-aria-components"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import InteractiveMap from "@/components/Maps/InteractiveMap"
import Button from "@/components/TempDesignSystem/Button"
import { debounce } from "@/utils/debounce"
import Sidebar from "./Sidebar"
import styles from "./dynamicMap.module.css"
import type { DynamicMapProps } from "@/types/components/hotelPage/map/dynamicMap"
export default function DynamicMap({
apiKey,
hotelName,
coordinates,
pointsOfInterest,
mapId,
}: DynamicMapProps) {
const intl = useIntl()
const router = useRouter()
const searchParams = useSearchParams()
const isMapView = useMemo(
() => searchParams.get("view") === "map",
[searchParams]
)
const rootDiv = useRef<HTMLDivElement | null>(null)
const [mapHeight, setMapHeight] = useState("0px")
const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
const [activePoi, setActivePoi] = useState<string | null>(null)
// Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
const handleMapHeight = useCallback(() => {
const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
const scrollY = window.scrollY
setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
}, [])
function handleClose() {
const url = new URL(window.location.href)
url.searchParams.delete("view")
router.push(url.toString())
}
// Making sure the map is always opened at the top of the page,
// just below the header and booking widget as these should stay visible.
// When closing, the page should scroll back to the position it was before opening the map.
useEffect(() => {
// Skip the first render
if (!rootDiv.current) {
return
}
if (isMapView && scrollHeightWhenOpened === 0) {
const scrollY = window.scrollY
setScrollHeightWhenOpened(scrollY)
window.scrollTo({ top: 0, behavior: "instant" })
} else if (!isMapView && scrollHeightWhenOpened !== 0) {
window.scrollTo({ top: scrollHeightWhenOpened, behavior: "instant" })
setScrollHeightWhenOpened(0)
}
}, [isMapView, scrollHeightWhenOpened, rootDiv])
useEffect(() => {
const debouncedResizeHandler = debounce(function () {
handleMapHeight()
})
const observer = new ResizeObserver(debouncedResizeHandler)
observer.observe(document.documentElement)
return () => {
if (observer) {
observer.unobserve(document.documentElement)
}
}
}, [rootDiv, isMapView, handleMapHeight])
const closeButton = (
<Button
theme="base"
intent="inverted"
variant="icon"
size="small"
className={styles.closeButton}
onClick={handleClose}
>
<MaterialIcon icon="close" color="CurrentColor" />
<span>
{intl.formatMessage({
defaultMessage: "Close the map",
})}
</span>
</Button>
)
return (
<APIProvider apiKey={apiKey}>
<div className={styles.wrapper} ref={rootDiv}>
<Modal
isOpen={isMapView}
UNSTABLE_portalContainer={rootDiv.current || undefined}
>
<Dialog
className={styles.dynamicMap}
style={{ "--hotel-map-height": mapHeight } as React.CSSProperties}
aria-label={intl.formatMessage(
{
defaultMessage: "Things nearby {hotelName}",
},
{ hotelName }
)}
>
<Sidebar
activePoi={activePoi}
hotelName={hotelName}
pointsOfInterest={pointsOfInterest}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
coordinates={coordinates}
/>
<InteractiveMap
closeButton={closeButton}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
activePoi={activePoi}
onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
mapId={mapId}
/>
</Dialog>
</Modal>
</div>
</APIProvider>
)
}

30
apps/scandic-web/components/ContentType/HotelPage/index.tsx
View File

@@ -1,7 +1,6 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { env } from "@/env/server"
import {
getHotel,
getHotelPage,
@@ -18,7 +17,6 @@ import { setFacilityCards } from "@/utils/facilityCards"
import { generateHotelSchema } from "@/utils/jsonSchemas"
import { safeTry } from "@/utils/safeTry"
import DynamicMap from "./Map/DynamicMap"
import MapCard from "./Map/MapCard"
import MapWithCardWrapper from "./Map/MapWithCard"
import MobileMapToggle from "./Map/MobileMapToggle"
@@ -65,9 +63,6 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
getMeetingRooms({ hotelId, language: lang })
)
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
if (!hotelData?.hotel || !hotelPageData) {
return notFound()
}
@@ -203,24 +198,13 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
<AccordionSection accordion={faq.accordions} title={faq.title} />
)}
</main>
{googleMapsApiKey ? (
<>
<aside className={styles.mapContainer}>
<MapWithCardWrapper>
<StaticMap coordinates={coordinates} hotelName={name} />
<MapCard hotelName={name} pois={topThreePois} />
</MapWithCardWrapper>
</aside>
<MobileMapToggle />
<DynamicMap
apiKey={googleMapsApiKey}
hotelName={name}
coordinates={coordinates}
pointsOfInterest={pointsOfInterest}
mapId={googleMapId}
/>
</>
) : null}
<aside className={styles.mapContainer}>
<MapWithCardWrapper>
<StaticMap coordinates={coordinates} hotelName={name} />
<MapCard hotelName={name} pois={topThreePois} />
</MapWithCardWrapper>
</aside>
<MobileMapToggle />
<SidePeeks hotelId={hotelId}>
<AmenitiesSidePeek
amenitiesList={detailedFacilities}

4
apps/scandic-web/components/Maps/InteractiveMap/index.tsx
View File

@@ -90,7 +90,7 @@ export default function InteractiveMap({
defaultMessage: "Zoom in",
})}
>
<MaterialIcon icon="remove" color="CurrentColor" size={20} />
<MaterialIcon icon="remove" color="CurrentColor" />
</Button>
<Button
theme="base"
@@ -103,7 +103,7 @@ export default function InteractiveMap({
defaultMessage: "Zoom out",
})}
>
<MaterialIcon icon="add" color="CurrentColor" size={20} />
<MaterialIcon icon="add" color="CurrentColor" />
</Button>
</div>
</div>

6
apps/scandic-web/components/Maps/Markers/Poi/poi.module.css
View File

@@ -1,11 +1,9 @@
/* 2024-09-18: At the moment, the background-colors for the poi marker is unknown.
This will be handled later. */
.icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
padding: var(--Spacing-x-half);
border-radius: var(--Corner-radius-Rounded);
background-color: var(--UI-Text-Placeholder);
}