Fix/SW-2429 map view

* 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

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/collection_page/[uid]/page.tsx

@@ -0,0 +1,19 @@
+import { Suspense } from "react"
+
+import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
+export default function CollectionPageBreadcrumbs() {
+  const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
+    color: "Surface/Secondary/Default",
+    size: "contentWidth",
+  }
+
+  return (
+    <Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
+      <Breadcrumbs {...variants} />
+    </Suspense>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/content_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default function ContentPageBreadcrumbs() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/destination_city_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default function DestinationCityPageBreadcrumbs() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/destination_country_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default function DestinationCountryPageBreadcrumbs() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/hotel_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default function HotelPageBreadcrumbs() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react"
+
+import Breadcrumbs from "@/components/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+
+export default function LoyaltyPageBreadcrumbs() {
+  return (
+    <Suspense fallback={<BreadcrumbsSkeleton />}>
+      <Breadcrumbs />
+    </Suspense>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/start_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default function StartPageBreadcrumbs() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@preview/default.tsx

@@ -0,0 +1 @@
+export { default } from "./page"

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/collection_page/[uid]/page.tsx

@@ -0,0 +1,7 @@
+import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default function CollectionPagePage() {
+  return <CollectionPage />
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/content_page/[uid]/page.tsx

@@ -0,0 +1,32 @@
+import { headers } from "next/headers"
+import { notFound, redirect } from "next/navigation"
+
+import { overview } from "@/constants/routes/myPages"
+import { isSignupPage } from "@/constants/routes/signup"
+import { env } from "@/env/server"
+
+import { auth } from "@/auth"
+import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
+import { getLang } from "@/i18n/serverContext"
+import { isValidSession } from "@/utils/session"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default async function ContentPagePage() {
+  const lang = getLang()
+  const pathname = headers().get("x-pathname") || ""
+  const isSignupRoute = isSignupPage(pathname)
+
+  if (isSignupRoute) {
+    if (!env.SHOW_SIGNUP_FLOW) {
+      notFound()
+    }
+
+    const session = await auth()
+    if (isValidSession(session)) {
+      redirect(overview[lang])
+    }
+  }
+
+  return <ContentPage />
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_city_page/[uid]/page.tsx

@@ -0,0 +1,25 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { env } from "@/env/server"
+
+import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
+import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
+
+import type { PageArgs } from "@/types/params"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default function DestinationCityPagePage({
+  searchParams,
+}: PageArgs<{}, { view?: "map" }>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    notFound()
+  }
+
+  return (
+    <Suspense fallback={<DestinationCityPageSkeleton />}>
+      <DestinationCityPage isMapView={searchParams.view === "map"} />
+    </Suspense>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/destination_country_page/[uid]/page.tsx

@@ -0,0 +1,29 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { env } from "@/env/server"
+
+import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
+import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
+
+import type { PageArgs } from "@/types/params"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default function DestinationCountryPagePage({}: PageArgs<
+  {},
+  { view?: "map" }
+>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    notFound()
+  }
+
+  return (
+    <Suspense fallback={<DestinationCountryPageSkeleton />}>
+      <DestinationCountryPage
+        // isMapView={searchParams.view === "map"} // Disabled until further notice
+        isMapView={false}
+      />
+    </Suspense>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/hotel_page/[uid]/page.tsx

@@ -0,0 +1,38 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+import { getHotelPage } from "@/lib/trpc/memoizedRequests"
+
+import HotelMapPage from "@/components/ContentType/HotelMapPage"
+import HotelPage from "@/components/ContentType/HotelPage"
+import HotelSubpage from "@/components/ContentType/HotelSubpage"
+
+import type { PageArgs } from "@/types/params"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default async function HotelPagePage({
+  searchParams,
+}: PageArgs<{}, { subpage?: string; view?: "map" }>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  const hotelPageData = await getHotelPage()
+
+  if (!hotelPageData) {
+    notFound()
+  }
+
+  if (searchParams.subpage) {
+    return (
+      <HotelSubpage
+        hotelId={hotelPageData.hotel_page_id}
+        subpage={searchParams.subpage}
+      />
+    )
+  }
+  if (searchParams.view === "map") {
+    return <HotelMapPage hotelId={hotelPageData.hotel_page_id} />
+  }
+  return <HotelPage hotelId={hotelPageData.hotel_page_id} />
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.tsx

@@ -0,0 +1,24 @@
+import styles from "./layout.module.css"
+
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+export default function ContentTypeLayout({
+  breadcrumbs,
+  preview,
+  children,
+}: React.PropsWithChildren<
+  LayoutArgs<LangParams> & {
+    breadcrumbs: React.ReactNode
+    preview: React.ReactNode
+  }
+>) {
+  return (
+    <div className={styles.container}>
+      <section className={styles.layout}>
+        {preview}
+        {breadcrumbs}
+        {children}
+      </section>
+    </div>
+  )
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/loyalty_page/[uid]/page.tsx

@@ -0,0 +1,7 @@
+import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default function LoyaltyPagePage() {
+  return <LoyaltyPage />
+}

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/start_page/[uid]/page.tsx

@@ -0,0 +1,19 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import StartPage from "@/components/ContentType/StartPage"
+
+import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
+import type { PageArgs } from "@/types/params"
+
+export { generateMetadata } from "@/utils/generateMetadata"
+
+export default function StartPagePage({
+  searchParams,
+}: PageArgs<{}, BookingWidgetSearchData>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    notFound()
+  }
+  return <StartPage searchParams={searchParams} />
+}

apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -1,55 +0,0 @@
-import { Suspense } from "react"
-
-import Breadcrumbs from "@/components/Breadcrumbs"
-import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
-
-import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
-import { PageContentTypeEnum } from "@/types/requests/contentType"
-import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
-
-// This is a temporary solution to avoid showing breadcrumbs on certain content types.
-// This should be refactored in the future to handle content types differently, similar to `destination_overview_page`.
-const IGNORED_CONTENT_TYPES = [
-  PageContentTypeEnum.hotelPage,
-  PageContentTypeEnum.contentPage,
-  PageContentTypeEnum.destinationCityPage,
-  PageContentTypeEnum.destinationCountryPage,
-  PageContentTypeEnum.destinationOverviewPage,
-  PageContentTypeEnum.startPage,
-]
-
-// This function is temporary until the content types are refactored and handled differently, similar to `destination_overview_page`.
-function getBreadcrumbsVariantsByContentType(
-  contentType: PageContentTypeEnum
-): Pick<BreadcrumbsProps, "color" | "size"> | null {
-  switch (contentType) {
-    case PageContentTypeEnum.collectionPage:
-      return { color: "Surface/Secondary/Default", size: "contentWidth" }
-    default:
-      return null
-  }
-}
-
-// We need to return null for both ignored content types and non-existent content types
-// In order to no having to maintain an explicit array of all content types besides the PageContentTypeEnum we convert it here.
-const allowedContentTypes = Object.keys(PageContentTypeEnum)
-  .map((key) => {
-    return PageContentTypeEnum[key as keyof typeof PageContentTypeEnum]
-  })
-  .filter((c) => !IGNORED_CONTENT_TYPES.includes(c))
-
-export default function PageBreadcrumbs({
-  params,
-}: PageArgs<LangParams & ContentTypeParams>) {
-  if (!allowedContentTypes.includes(params.contentType)) {
-    return null
-  }
-
-  const variants = getBreadcrumbsVariantsByContentType(params.contentType)
-
-  return (
-    <Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
-      <Breadcrumbs {...variants} />
-    </Suspense>
-  )
-}

apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/layout.tsx

@@ -1,35 +0,0 @@
-import styles from "./layout.module.css"
-
-import type {
-  ContentTypeParams,
-  LangParams,
-  LayoutArgs,
-  UIDParams,
-} from "@/types/params"
-
-export default function ContentTypeLayout({
-  breadcrumbs,
-  preview,
-  children,
-  //params,
-}: React.PropsWithChildren<
-  LayoutArgs<LangParams & ContentTypeParams & UIDParams> & {
-    breadcrumbs: React.ReactNode
-    preview: React.ReactNode
-  }
->) {
-  // Would like a better way to check if the contentType is valid.
-  // Perhaps a case for using an `{} as const` object for PageContentTypes instead?
-  // if (!Object.values(PageContentTypeEnum).includes(params.contentType)) {
-  //   notFound()
-  // }
-  return (
-    <div className={styles.container}>
-      <section className={styles.layout}>
-        {preview}
-        {breadcrumbs}
-        {children}
-      </section>
-    </div>
-  )
-}

apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -1,111 +0,0 @@
-import { headers } from "next/headers"
-import { notFound, redirect } from "next/navigation"
-import { Suspense } from "react"
-
-import { overview } from "@/constants/routes/myPages"
-import { isSignupPage } from "@/constants/routes/signup"
-import { env } from "@/env/server"
-import { getHotelPage } from "@/lib/trpc/memoizedRequests"
-
-import { auth } from "@/auth"
-import DestinationCityPage from "@/components/ContentType/DestinationPage/DestinationCityPage"
-import DestinationCityPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton"
-import DestinationCountryPage from "@/components/ContentType/DestinationPage/DestinationCountryPage"
-import DestinationCountryPageSkeleton from "@/components/ContentType/DestinationPage/DestinationCountryPage/DestinationCountryPageSkeleton"
-import HotelPage from "@/components/ContentType/HotelPage"
-import HotelSubpage from "@/components/ContentType/HotelSubpage"
-import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
-import StartPage from "@/components/ContentType/StartPage"
-import CollectionPage from "@/components/ContentType/StaticPages/CollectionPage"
-import ContentPage from "@/components/ContentType/StaticPages/ContentPage"
-import { getLang } from "@/i18n/serverContext"
-import { isValidSession } from "@/utils/session"
-
-import type {
-  LangParams,
-  NonAppRouterContentTypeParams,
-  PageArgs,
-  UIDParams,
-} from "@/types/params"
-import { PageContentTypeEnum } from "@/types/requests/contentType"
-
-export { generateMetadata } from "@/utils/generateMetadata"
-
-export default async function ContentTypePage({
-  params,
-  searchParams,
-}: PageArgs<
-  LangParams & NonAppRouterContentTypeParams & UIDParams,
-  { subpage?: string; filterFromUrl?: string }
->) {
-  const pathname = headers().get("x-pathname") || ""
-
-  switch (params.contentType) {
-    case PageContentTypeEnum.collectionPage:
-      return <CollectionPage />
-    case PageContentTypeEnum.contentPage: {
-      const isSignupRoute = isSignupPage(pathname)
-
-      if (isSignupRoute) {
-        if (!env.SHOW_SIGNUP_FLOW) {
-          return notFound()
-        }
-
-        const session = await auth()
-        if (isValidSession(session)) {
-          redirect(overview[getLang()])
-        }
-      }
-
-      return <ContentPage />
-    }
-    case PageContentTypeEnum.loyaltyPage:
-      return <LoyaltyPage />
-    case PageContentTypeEnum.destinationCountryPage:
-      if (env.HIDE_FOR_NEXT_RELEASE) {
-        return notFound()
-      }
-      return (
-        <Suspense fallback={<DestinationCountryPageSkeleton />}>
-          <DestinationCountryPage />
-        </Suspense>
-      )
-    case PageContentTypeEnum.destinationCityPage:
-      if (env.HIDE_FOR_NEXT_RELEASE) {
-        return notFound()
-      }
-      return (
-        <Suspense fallback={<DestinationCityPageSkeleton />}>
-          <DestinationCityPage />
-        </Suspense>
-      )
-    case PageContentTypeEnum.hotelPage:
-      if (env.HIDE_FOR_NEXT_RELEASE) {
-        return notFound()
-      }
-      const hotelPageData = await getHotelPage()
-
-      if (hotelPageData) {
-        if (searchParams.subpage) {
-          return (
-            <HotelSubpage
-              hotelId={hotelPageData.hotel_page_id}
-              subpage={searchParams.subpage}
-            />
-          )
-        }
-        return <HotelPage hotelId={hotelPageData.hotel_page_id} />
-      }
-
-      notFound()
-    case PageContentTypeEnum.startPage:
-      if (env.HIDE_FOR_NEXT_RELEASE) {
-        return notFound()
-      }
-      return <StartPage searchParams={searchParams} />
-    default:
-      const type: never = params.contentType
-      console.error(`Unsupported content type given: ${type}`)
-      notFound()
-  }
-}

apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/@preview/loading.tsx

@@ -1 +0,0 @@
-export { default } from "../../../[contentType]/[uid]/@preview/loading"

apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/@preview/page.tsx

@@ -1 +0,0 @@
-export { default } from "../../../[contentType]/[uid]/@preview/page"

apps/scandic-web/app/[lang]/(live)/(public)/destination_overview_page/[uid]/layout.tsx

@@ -1 +0,0 @@
-export { default } from "../../[contentType]/[uid]/layout"

apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/destination_city_page/[uid]/page.tsx

@@ -0,0 +1,24 @@
+import { env } from "@/env/server"
+import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
+
+import BookingWidget from "@/components/BookingWidget"
+
+import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
+import type { PageArgs } from "@/types/params"
+
+export default async function BookingWidgetDestinationCityPage({
+  searchParams,
+}: PageArgs<{}, BookingWidgetSearchData>) {
+  if (!env.ENABLE_BOOKING_WIDGET) {
+    return null
+  }
+  const { bookingCode } = searchParams
+  const pageData = await getDestinationCityPage()
+
+  const bookingWidgetSearchParams = {
+    bookingCode: bookingCode ?? "",
+    city: pageData?.city.name ?? "",
+  }
+
+  return <BookingWidget bookingWidgetSearchParams={bookingWidgetSearchParams} />
+}

apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/hotel_page/[uid]/page.tsx

@@ -0,0 +1,39 @@
+import { env } from "@/env/server"
+import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
+
+import BookingWidget from "@/components/BookingWidget"
+import { getLang } from "@/i18n/serverContext"
+
+import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
+import type { PageArgs } from "@/types/params"
+
+export default async function BookingWidgetHotelPage({
+  searchParams,
+}: PageArgs<{}, BookingWidgetSearchData & { subpage?: string }>) {
+  if (!env.ENABLE_BOOKING_WIDGET) {
+    return null
+  }
+  const { bookingCode, subpage } = searchParams
+
+  const hotelPageData = await getHotelPage()
+  const hotelData = await getHotel({
+    hotelId: hotelPageData?.hotel_page_id || "",
+    language: getLang(),
+    isCardOnlyPayment: false,
+  })
+
+  const isMeetingSubpage =
+    subpage && hotelData?.additionalData.meetingRooms.nameInUrl === subpage
+
+  if (isMeetingSubpage) {
+    return null
+  }
+
+  const bookingWidgetSearchParams = {
+    bookingCode: bookingCode ?? "",
+    hotel: hotelData?.hotel.id ?? "",
+    city: hotelData?.hotel.cityName ?? "",
+  }
+
+  return <BookingWidget bookingWidgetSearchParams={bookingWidgetSearchParams} />
+}

apps/scandic-web/app/[lang]/(live)/@bookingwidget/(contentTypes)/start_page/[uid]/page.tsx

@@ -0,0 +1,3 @@
+export default async function BookingWidgetStartPage() {
+  return null
+}

apps/scandic-web/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/[...paths]/page.tsx

@@ -1 +0,0 @@
-export { default } from "../page"

apps/scandic-web/app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx

@@ -1,64 +0,0 @@
-import { env } from "@/env/server"
-import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
-
-import BookingWidget from "@/components/BookingWidget"
-import { getLang } from "@/i18n/serverContext"
-
-import type { BookingWidgetSearchData } from "@/types/components/bookingWidget"
-import type { ContentTypeParams, PageArgs } from "@/types/params"
-import { PageContentTypeEnum } from "@/types/requests/contentType"
-
-export default async function BookingWidgetPage({
-  params,
-  searchParams,
-}: PageArgs<ContentTypeParams, BookingWidgetSearchData>) {
-  if (!env.ENABLE_BOOKING_WIDGET) {
-    return null
-  }
-
-  if (params.contentType === PageContentTypeEnum.startPage) {
-    return null
-  }
-
-  if (params.contentType === PageContentTypeEnum.hotelPage) {
-    return (
-      <BookingWidgetOnHotelPage
-        bookingCode={searchParams.bookingCode}
-        subpage={searchParams.subpage}
-      />
-    )
-  }
-
-  return <BookingWidget bookingWidgetSearchParams={searchParams} />
-}
-
-async function BookingWidgetOnHotelPage({
-  bookingCode,
-  subpage,
-}: {
-  bookingCode?: string
-  subpage: string
-}) {
-  const hotelPageData = await getHotelPage()
-
-  const hotelData = await getHotel({
-    hotelId: hotelPageData?.hotel_page_id || "",
-    language: getLang(),
-    isCardOnlyPayment: false,
-  })
-
-  const isMeetingSubpage =
-    hotelData?.additionalData.meetingRooms.nameInUrl === subpage
-
-  if (isMeetingSubpage) {
-    return null
-  }
-
-  const hotelPageParams = {
-    bookingCode: bookingCode ?? "",
-    hotel: hotelData?.hotel.id ?? "",
-    city: hotelData?.hotel.cityName ?? "",
-  }
-
-  return <BookingWidget bookingWidgetSearchParams={hotelPageParams} />
-}

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

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

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

@@ -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
+      <Typography variant="Title/sm">
-        level="h2"
+        <h1 className={styles.title}>
-        as="h3"
+          {getHeadingText(intl, city.name, allFilters, activeFilters[0])}
-        textTransform="regular"
+        </h1>
-        className={styles.title}
+      </Typography>
-      >
-        {getHeadingText(intl, city.name, allFilters, activeFilters[0])}
-      </Title>
       <HotelList />
     </Map>
   )

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

@@ -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}>
+          {isMapView ? (
-            <header className={styles.header}>
+            <CityMap
-              <Suspense fallback={<BreadcrumbsSkeleton />}>
+              mapId={env.GOOGLE_DYNAMIC_MAP_ID}
-                <Breadcrumbs />
+              apiKey={env.GOOGLE_STATIC_MAP_KEY}
-              </Suspense>
+              city={city}
-              {images?.length ? (
+              defaultLocation={destination_settings.location}
-                <TopImages images={images} destinationName={city.name} />
+            />
-              ) : null}
+          ) : (
-            </header>
+            <div className={styles.pageContainer}>
-            <main className={styles.mainContent}>
+              <header className={styles.header}>
-              <HotelListing />
+                <Suspense fallback={<BreadcrumbsSkeleton />}>
-              {blocks && <Blocks blocks={blocks} />}
+                  <Breadcrumbs />
-            </main>
+                </Suspense>
-            <aside className={styles.sidebar}>
+                {images?.length ? (
-              <SidebarContentWrapper location={city.name} preamble={preamble}>
+                  <TopImages images={images} destinationName={city.name} />
-                <ExperienceList experiences={experiences} />
+                ) : null}
-                {has_sidepeek && sidepeek_content && (
+              </header>
-                  <DestinationPageSidePeek
+              <main className={styles.mainContent}>
-                    buttonText={sidepeek_button_text}
+                <HotelListing />
-                    sidePeekContent={sidepeek_content}
+                {blocks && <Blocks blocks={blocks} />}
-                    location={city.name}
+              </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 && (
+                  {destination_settings.city && (
-                  <StaticMap
+                    <StaticMap
-                    city={destination_settings.city}
+                      city={destination_settings.city}
-                    location={destination_settings.location}
+                      location={destination_settings.location}
-                  />
+                    />
-                )}
+                  )}
-              </SidebarContentWrapper>
+                </SidebarContentWrapper>
-            </aside>
+              </aside>
-          </div>
+            </div>
-          <CityMap
+          )}
-            mapId={env.GOOGLE_DYNAMIC_MAP_ID}
-            apiKey={env.GOOGLE_STATIC_MAP_KEY}
-            city={city}
-            defaultLocation={destination_settings.location}
-          />
         </HotelDataContainer>
       </Suspense>
       <DestinationTracking pageData={tracking} />

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

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

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

@@ -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
+      <Typography variant="Title/sm">
-        level="h2"
+        <h1 className={styles.title}>
-        as="h3"
+          {getHeadingText(intl, country, allFilters, activeFilters[0])}
-        textTransform="regular"
+        </h1>
-        className={styles.title}
+      </Typography>
-      >
-        {getHeadingText(intl, country, allFilters, activeFilters[0])}
-      </Title>
       <CityList />
     </Map>
   )

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

@@ -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}>
+          {isMapView ? (
-            <header className={styles.header}>
+            <CountryMap
-              <Suspense fallback={<BreadcrumbsSkeleton />}>
+              mapId={env.GOOGLE_DYNAMIC_MAP_ID}
-                <Breadcrumbs />
+              apiKey={env.GOOGLE_STATIC_MAP_KEY}
-              </Suspense>
+              country={translatedCountry}
-              {images?.length ? (
+              defaultLocation={destination_settings.location}
-                <TopImages
+            />
-                  images={images}
+          ) : (
-                  destinationName={translatedCountry}
+            <div className={styles.pageContainer}>
-                />
+              <header className={styles.header}>
-              ) : null}
+                <Suspense fallback={<BreadcrumbsSkeleton />}>
-            </header>
+                  <Breadcrumbs />
-            <main className={styles.mainContent}>
+                </Suspense>
-              <CityListing />
+                {images?.length ? (
-              {blocks && <Blocks blocks={blocks} />}
+                  <TopImages
-            </main>
+                    images={images}
-            <aside className={styles.sidebar}>
+                    destinationName={translatedCountry}
-              <SidebarContentWrapper
-                location={translatedCountry}
-                preamble={preamble}
-              >
-                <ExperienceList experiences={experiences} />
-                {has_sidepeek && sidepeek_content && (
-                  <DestinationPageSidePeek
-                    buttonText={sidepeek_button_text}
-                    sidePeekContent={sidepeek_content}
-                    location={translatedCountry}
                   />
-                )}
+                ) : null}
-              </SidebarContentWrapper>
+              </header>
-            </aside>
+              <main className={styles.mainContent}>
-          </div>
+                <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} />

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

@@ -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") {

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

@@ -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 [mapHeight, setMapHeight] = useState("100dvh")
-  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
 
   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}>
+      <div
-        <Modal
+        className={styles.mapWrapper}
-          isOpen={isMapView}
+        style={{ height: mapHeight }}
-          UNSTABLE_portalContainer={rootDiv.current || undefined}
+        ref={rootDiv}
-        >
+      >
-          <Dialog
+        <div className={styles.mobileNavigation}>
-            className={styles.dialog}
+          <Button
-            style={
+            intent="text"
-              { "--destination-map-height": mapHeight } as React.CSSProperties
+            theme="base"
-            }
+            variant="icon"
-            aria-label={intl.formatMessage({
+            onClick={handleClose}
-              defaultMessage: "Map view",
-            })}
           >
-            <div className={styles.mobileNavigation}>
+            <MaterialIcon icon="chevron_left" size={20} color="CurrentColor" />
-              <Button
+            {intl.formatMessage({
-                intent="text"
+              defaultMessage: "Back",
-                theme="base"
+            })}
-                variant="icon"
+          </Button>
-                onClick={handleClose}
+          <DestinationFilterAndSort
-              >
+            listType={pageType === "city" ? "hotel" : "city"}
-                <MaterialIcon
+          />
-                  icon="chevron_left"
+        </div>
-                  size={20}
+        <aside className={styles.sidebar}>{children}</aside>
-                  color="CurrentColor"
+        <DynamicMap
-                />
+          markers={markers}
-                {intl.formatMessage({
+          mapId={mapId}
-                  defaultMessage: "Back",
+          onClose={handleClose}
-                })}
+          defaultCenter={defaultCenter}
-              </Button>
+          defaultZoom={defaultZoom}
-              <DestinationFilterAndSort
+          fitBounds={!activeHotel}
-                listType={pageType === "city" ? "hotel" : "city"}
+          gestureHandling="greedy"
-              />
+        >
-            </div>
+          <MapContent geojson={geoJson} hasActiveFilters={hasActiveFilters} />
-            <aside className={styles.sidebar}>{children}</aside>
+        </DynamicMap>
-            <DynamicMap
-              markers={markers}
-              mapId={mapId}
-              onClose={handleClose}
-              defaultCenter={defaultCenter}
-              defaultZoom={defaultZoom}
-              fitBounds={!activeHotel}
-              gestureHandling="greedy"
-            >
-              <MapContent
-                geojson={geoJson}
-                hasActiveFilters={hasActiveFilters}
-              />
-            </DynamicMap>
-          </Dialog>
-        </Modal>
       </div>
     </MapProvider>
   )

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

@@ -1,14 +1,10 @@
-.dialog {
+.mapWrapper {
-  --destination-map-height: 100dvh;
+  position: fixed;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: var(--destination-map-height);
-  width: 100dvw;
-  z-index: var(--hotel-dynamic-map-z-index);
   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;
   }
 

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

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

apps/scandic-web/components/ContentType/HotelMapPage/Client.tsx

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

apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/index.tsx

@@ -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
+        <Typography variant="Body/Paragraph/mdBold">
-          theme="base"
+          <AriaButton
-          intent="text"
+            className={styles.sidebarToggle}
-          wrapping
+            onPress={toggleFullScreenSidebar}
-          fullWidth
+          >
-          className={styles.sidebarToggle}
+            {isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}
-          onClick={toggleFullScreenSidebar}
+          </AriaButton>
-        >
+        </Typography>
-          <Body textTransform="bold" color="textMediumContrast" asChild>
-            <span>{isFullScreenSidebar ? viewAsMapMsg : viewAsListMsg}</span>
-          </Body>
-        </Button>
         <div className={styles.sidebarContent}>
-          <Title as="h4" level="h2" textTransform="regular">
+          <Typography variant="Title/sm">
-            {intl.formatMessage(
+            <h1 className={styles.title}>
-              {
+              {intl.formatMessage(
-                defaultMessage: "Things nearby {hotelName}",
+                {
-              },
+                  defaultMessage: "Things nearby {hotelName}",
-              { hotelName }
+                },
-            )}
+                { hotelName }
-          </Title>
+              )}
+            </h1>
+          </Typography>
 
           {poisInGroups.map(({ group, pois }) =>
             pois.length ? (
               <div key={group} className={styles.poiGroup}>
-                <Body
+                <Typography variant="Body/Paragraph/mdBold">
-                  color="black"
+                  <h3 className={styles.poiHeading}>
-                  textTransform="bold"
-                  className={styles.poiHeading}
-                  asChild
-                >
-                  <h3>
                     <PoiMarker group={group} />
                     {translatePOIGroup(group)}
                   </h3>
-                </Body>
+                </Typography>
                 <ul className={styles.poiList}>
                   {pois.map((poi) => (
                     <li key={poi.name} className={styles.poiItem}>
-                      <button
+                      <Typography variant="Body/Paragraph/mdRegular">
-                        className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
+                        <AriaButton
-                        onMouseEnter={() => handleMouseEnter(poi.name)}
+                          className={cx(styles.poiButton, {
-                        onClick={() =>
+                            [styles.active]: activePoi === poi.name,
-                          handlePoiClick(poi.name, poi.coordinates)
+                          })}
-                        }
+                          onHoverStart={() => handleMouseEnter(poi.name)}
-                      >
+                          onPress={() =>
-                        <span>{poi.name}</span>
+                            handlePoiClick(poi.name, poi.coordinates)
-                        <span>
+                          }
-                          {intl.formatMessage(
+                        >
-                            {
+                          <span>{poi.name}</span>
-                              defaultMessage: "{distanceInKm} km",
+                          <span>
-                            },
+                            {intl.formatMessage(
-                            {
+                              {
-                              distanceInKm: poi.distance,
+                                defaultMessage: "{distanceInKm} km",
-                            }
+                              },
-                          )}
+                              {
-                        </span>
+                                distanceInKm: poi.distance,
-                      </button>
+                              }
+                            )}
+                          </span>
+                        </AriaButton>
+                      </Typography>
                     </li>
                   ))}
                 </ul>

apps/scandic-web/components/ContentType/HotelMapPage/Sidebar/sidebar.module.css

@@ -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;
+  padding: var(--Space-x1) 0;
-  border-bottom: 1px solid var(--Base-Border-Subtle);
+  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);
+    color: var(--Text-Secondary);
-    padding: var(--Spacing-x2) !important;
+    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;
   }

apps/scandic-web/components/ContentType/HotelMapPage/hotelMapPage.module.css

@@ -1,23 +1,17 @@
-.dynamicMap {
+.mapWrapper {
   --hotel-map-height: 100dvh;
 
-  position: absolute;
+  position: fixed;
-  top: 0;
+  display: flex;
-  left: 0;
   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);
-}
+  z-index: 1;
-.wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 .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);
 }

apps/scandic-web/components/ContentType/HotelMapPage/index.tsx

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

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

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

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -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>
-          <aside className={styles.mapContainer}>
+          <StaticMap coordinates={coordinates} hotelName={name} />
-            <MapWithCardWrapper>
+          <MapCard hotelName={name} pois={topThreePois} />
-              <StaticMap coordinates={coordinates} hotelName={name} />
+        </MapWithCardWrapper>
-              <MapCard hotelName={name} pois={topThreePois} />
+      </aside>
-            </MapWithCardWrapper>
+      <MobileMapToggle />
-          </aside>
-          <MobileMapToggle />
-          <DynamicMap
-            apiKey={googleMapsApiKey}
-            hotelName={name}
-            coordinates={coordinates}
-            pointsOfInterest={pointsOfInterest}
-            mapId={googleMapId}
-          />
-        </>
-      ) : null}
       <SidePeeks hotelId={hotelId}>
         <AmenitiesSidePeek
           amenitiesList={detailedFacilities}

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

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

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

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

apps/scandic-web/types/params.ts

@@ -29,21 +29,6 @@ export type ContentTypeParams = {
     | PageContentTypeEnum.startPage
 }
 
-// This is purely for use in `apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx`
-// It is meant as an interim solution while we move away from the switch-case
-// approach into routing these based on App router.
-// Folders in `apps/scandic-web/app/[lang]/(live)/(public)` should not be in this type.
-export type NonAppRouterContentTypeParams = {
-  contentType:
-    | PageContentTypeEnum.loyaltyPage
-    | PageContentTypeEnum.contentPage
-    | PageContentTypeEnum.hotelPage
-    | PageContentTypeEnum.collectionPage
-    | PageContentTypeEnum.destinationCountryPage
-    | PageContentTypeEnum.destinationCityPage
-    | PageContentTypeEnum.startPage
-}
-
 export type ContentTypeWebviewParams = {
   contentType: "loyalty-page" | "account-page"
 }