Merge branch 'develop' into feat/performance-improvements

2024-11-06 13:48:26 +01:00
parent 4f7b9d24d9 0cbffc7904
commit a76857a62b
70 changed files with 1149 additions and 519 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/[...paths]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/[...paths]/page.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/loading.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/loading.tsx
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/@sidePeek/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/@sidePeek/page.tsx
@@ -0,0 +1,25 @@
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import { getQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import SidePeek from "@/components/HotelReservation/SidePeek"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function HotelSidePeek({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { hotel: string }>) {
+  const search = new URLSearchParams(searchParams)
+  const { hotel: hotelId } = getQueryParamsForEnterDetails(search)
+
+  if (!hotelId) {
+    return <SidePeek hotel={null} />
+  }
+
+  const hotel = await getHotelData({
+    hotelId: hotelId,
+    language: params.lang,
+  })
+
+  return <SidePeek hotel={hotel} />
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/@sidePeek/page.tsx
@@ -1,24 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { getHotelData } from "@/lib/trpc/memoizedRequests"
-
-import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function HotelSidePeek({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { hotel: string }>) {
-  if (!searchParams.hotel) {
-    redirect(`/${params.lang}`)
-  }
-  const hotel = await getHotelData({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-  })
-  if (!hotel?.data) {
-    redirect(`/${params.lang}`)
-  }
-  return <SidePeek hotel={hotel.data.attributes} />
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/_preload.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/_preload.ts
@@ -0,0 +1,9 @@
+import {
+  getCreditCardsSafely,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+export function preload() {
+  void getProfileSafely()
+  void getCreditCardsSafely()
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx
@@ -1,10 +1,12 @@
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+import {
+  getCreditCardsSafely,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"

 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
-import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import { setLang } from "@/i18n/serverContext"

-import { preload } from "./page"
+import { preload } from "./_preload"

 import styles from "./layout.module.css"

@@ -16,11 +18,9 @@ export default async function StepLayout({
  children,
  hotelHeader,
  params,
-  sidePeek,
 }: React.PropsWithChildren<
  LayoutArgs<LangParams & { step: StepEnum }> & {
    hotelHeader: React.ReactNode
-    sidePeek: React.ReactNode
    summary: React.ReactNode
  }
 >) {
@@ -34,7 +34,6 @@ export default async function StepLayout({
      <main className={styles.layout}>
        {hotelHeader}
        <div className={styles.content}>
-          <SelectedRoom />
          {children}
          <aside className={styles.summaryContainer}>
            <div className={styles.hider} />
@@ -42,7 +41,6 @@ export default async function StepLayout({
            <div className={styles.shadow} />
          </aside>
        </div>
-        {sidePeek}
      </main>
    </EnterDetailsProvider>
  )
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx
@@ -14,6 +14,7 @@ import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import {
  generateChildrenString,
  getQueryParamsForEnterDetails,
@@ -24,11 +25,6 @@ import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"

-export function preload() {
-  void getProfileSafely()
-  void getCreditCardsSafely()
-}
-
 function isValidStep(step: string): step is StepEnum {
  return Object.values(StepEnum).includes(step as StepEnum)
 }
@@ -104,6 +100,9 @@ export default async function StepPage({
  return (
    <section>
      <HistoryStateManager />
+
+      <SelectedRoom hotelId={hotelId} room={roomAvailability.selectedRoom} />
+
      {/* TODO: How to handle no beds found? */}
      {roomAvailability.bedTypes ? (
        <SectionAccordion
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx
@@ -8,9 +8,17 @@ import { LangParams, LayoutArgs } from "@/types/params"

 export default function HotelReservationLayout({
  children,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  sidePeek,
+}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+  sidePeek: React.ReactNode
+}) {
  if (env.HIDE_FOR_NEXT_RELEASE) {
    return notFound()
  }
-  return <div className={styles.layout}>{children}</div>
+  return (
+    <div className={styles.layout}>
+      {children}
+      {sidePeek}
+    </div>
+  )
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
@@ -0,0 +1,75 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+import { getLocations } from "@/lib/trpc/memoizedRequests"
+
+import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { MapModal } from "@/components/MapModal"
+import { setLang } from "@/i18n/serverContext"
+
+import {
+  fetchAvailableHotels,
+  generateChildrenString,
+  getCentralCoordinates,
+  getPointOfInterests,
+} from "../../utils"
+
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, SelectHotelSearchParams>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+
+  setLang(params.lang)
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) {
+    return null
+  }
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city.toLowerCase()
+  )
+  if (!city) return notFound()
+
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const selectHotelParams = new URLSearchParams(searchParams)
+  const selectHotelParamsObject =
+    getHotelReservationQueryParams(selectHotelParams)
+  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const children = selectHotelParamsObject.room[0].child
+    ? generateChildrenString(selectHotelParamsObject.room[0].child)
+    : undefined // TODO: Handle multiple rooms
+
+  const hotels = await fetchAvailableHotels({
+    cityId: city.id,
+    roomStayStartDate: searchParams.fromDate,
+    roomStayEndDate: searchParams.toDate,
+    adults,
+    children,
+  })
+
+  const pointOfInterests = getPointOfInterests(hotels)
+
+  const centralCoordinates = getCentralCoordinates(pointOfInterests)
+
+  return (
+    <MapModal>
+      <SelectHotelMap
+        apiKey={googleMapsApiKey}
+        coordinates={centralCoordinates}
+        pointsOfInterest={pointOfInterests}
+        mapId={googleMapId}
+        isModal={true}
+      />
+    </MapModal>
+  )
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/default.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+  return null
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css
@@ -0,0 +1,5 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
+  position: relative;
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx
@@ -0,0 +1,24 @@
+import { notFound } from "next/navigation"
+
+import { env } from "@/env/server"
+
+import styles from "./layout.module.css"
+
+import { LangParams, LayoutArgs } from "@/types/params"
+
+export default function HotelReservationLayout({
+  children,
+  modal,
+}: React.PropsWithChildren<
+  LayoutArgs<LangParams> & { modal: React.ReactNode }
+>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return (
+    <div className={styles.layout}>
+      {children}
+      {modal}
+    </div>
+  )
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css
@@ -2,5 +2,5 @@
  display: grid;
  background-color: var(--Scandic-Brand-Warm-White);
  min-height: 100dvh;
-  grid-template-columns: 420px 1fr;
+  position: relative;
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -1,58 +1 @@
-import { env } from "@/env/server"
-
-import {
-  fetchAvailableHotels,
-  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
-import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
-import { setLang } from "@/i18n/serverContext"
-
-import styles from "./page.module.css"
-
-import {
-  PointOfInterest,
-  PointOfInterestCategoryNameEnum,
-  PointOfInterestGroupEnum,
-} from "@/types/hotel"
-import { LangParams, PageArgs } from "@/types/params"
-
-export default async function SelectHotelMapPage({
-  params,
-}: PageArgs<LangParams, {}>) {
-  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
-  setLang(params.lang)
-
-  const hotels = await fetchAvailableHotels({
-    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
-  })
-
-  const filters = getFiltersFromHotels(hotels)
-
-  // TODO: this is just a quick transformation to get something there. May need rework
-  const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
-    coordinates: {
-      lat: hotel.hotelData.location.latitude,
-      lng: hotel.hotelData.location.longitude,
-    },
-    name: hotel.hotelData.name,
-    distance: hotel.hotelData.location.distanceToCentre,
-    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
-    group: PointOfInterestGroupEnum.LOCATION,
-  }))
-
-  return (
-    <main className={styles.main}>
-      <SelectHotelMap
-        apiKey={googleMapsApiKey}
-        // TODO: use correct coordinates. The city center?
-        coordinates={{ lat: 59.32, lng: 18.01 }}
-        pointsOfInterest={pointOfInterests}
-        mapId={googleMapId}
-      />
-    </main>
-  )
-}
+export { default } from "../@modal/(.)map/page"
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
@@ -1,6 +1,6 @@
 .main {
  display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
  padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
  background-color: var(--Scandic-Brand-Warm-White);
  min-height: 100dvh;
@@ -19,8 +19,28 @@
  padding: var(--Spacing-x2) var(--Spacing-x0);
 }

+.mapContainer {
+  display: none;
+}
+
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
+.button {
+  flex: 1;
+}
+
@media (min-width: 768px) {
+  .mapContainer {
+    display: block;
+  }
  .main {
    flex-direction: row;
  }
+  .buttonContainer {
+    display: none;
+  }
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
 import {
  generateChildrenString,
  getHotelReservationQueryParams,
@@ -62,25 +63,28 @@ export default async function SelectHotelPage({
  return (
    <main className={styles.main}>
      <section className={styles.section}>
-        <Link href={selectHotelMap[params.lang]} keepSearchParams>
-          <StaticMap
-            city={searchParams.city}
-            width={340}
-            height={180}
-            zoomLevel={11}
-            mapType="roadmap"
-            altText={`Map of ${searchParams.city} city center`}
-          />
-        </Link>
-        <Link
-          className={styles.link}
-          color="burgundy"
-          href={selectHotelMap[params.lang]}
-          keepSearchParams
-        >
-          {intl.formatMessage({ id: "Show map" })}
-          <ChevronRightIcon color="burgundy" />
-        </Link>
+        <div className={styles.mapContainer}>
+          <Link href={selectHotelMap[params.lang]} keepSearchParams>
+            <StaticMap
+              city={searchParams.city}
+              width={340}
+              height={180}
+              zoomLevel={11}
+              mapType="roadmap"
+              altText={`Map of ${searchParams.city} city center`}
+            />
+          </Link>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={selectHotelMap[params.lang]}
+            keepSearchParams
+          >
+            {intl.formatMessage({ id: "Show map" })}
+            <ChevronRightIcon color="burgundy" />
+          </Link>
+        </div>
+        <MobileMapButtonContainer city={searchParams.city} />
        <HotelFilter filters={filterList} />
      </section>
      <HotelCardListing hotelData={hotels} />
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
@@ -3,9 +3,16 @@ import { serverClient } from "@/lib/trpc/server"

 import { getLang } from "@/i18n/serverContext"

-import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
-import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
+import type { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+import {
+  type PointOfInterest,
+  PointOfInterestCategoryNameEnum,
+  PointOfInterestGroupEnum,
+} from "@/types/hotel"

 export async function fetchAvailableHotels(
  input: AvailabilityInput
@@ -42,3 +49,49 @@ export function getFiltersFromHotels(hotels: HotelData[]) {

  return filterList
 }
+
+const bedTypeMap: Record<number, string> = {
+  [BedTypeEnum.IN_ADULTS_BED]: "ParentsBed",
+  [BedTypeEnum.IN_CRIB]: "Crib",
+  [BedTypeEnum.IN_EXTRA_BED]: "ExtraBed",
+}
+
+export function generateChildrenString(children: Child[]): string {
+  return `[${children
+    ?.map((child) => {
+      const age = child.age
+      const bedType = bedTypeMap[+child.bed]
+      return `${age}:${bedType}`
+    })
+    .join(",")}]`
+}
+
+export function getPointOfInterests(hotels: HotelData[]): PointOfInterest[] {
+  // TODO: this is just a quick transformation to get something there. May need rework
+  return hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    distance: hotel.hotelData.location.distanceToCentre,
+    categoryName: PointOfInterestCategoryNameEnum.HOTEL,
+    group: PointOfInterestGroupEnum.LOCATION,
+  }))
+}
+
+export function getCentralCoordinates(pointOfInterests: PointOfInterest[]) {
+  const centralCoordinates = pointOfInterests.reduce(
+    (acc, poi) => {
+      acc.lat += poi.coordinates.lat
+      acc.lng += poi.coordinates.lng
+      return acc
+    },
+    { lat: 0, lng: 0 }
+  )
+
+  centralCoordinates.lat /= pointOfInterests.length
+  centralCoordinates.lng /= pointOfInterests.length
+
+  return centralCoordinates
+}
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
@@ -37,21 +37,26 @@ export default function Sidebar({

  function moveToPoi(poiCoordinates: Coordinates) {
    if (map) {
+      const hotelLatLng = new google.maps.LatLng(
+        coordinates.lat,
+        coordinates.lng
+      )
+      const poiLatLng = new google.maps.LatLng(
+        poiCoordinates.lat,
+        poiCoordinates.lng
+      )
+
      const bounds = new google.maps.LatLngBounds()
-      const boundPadding = 0.02
+      bounds.extend(hotelLatLng)
+      bounds.extend(poiLatLng)

-      const minLat = Math.min(coordinates.lat, poiCoordinates.lat)
-      const maxLat = Math.max(coordinates.lat, poiCoordinates.lat)
-      const minLng = Math.min(coordinates.lng, poiCoordinates.lng)
-      const maxLng = Math.max(coordinates.lng, poiCoordinates.lng)
-
-      bounds.extend(
-        new google.maps.LatLng(minLat - boundPadding, minLng - boundPadding)
-      )
-      bounds.extend(
-        new google.maps.LatLng(maxLat + boundPadding, maxLng + boundPadding)
-      )
      map.fitBounds(bounds)
+
+      const currentZoomLevel = map.getZoom()
+
+      if (currentZoomLevel) {
+        map.setZoom(currentZoomLevel - 1)
+      }
    }
  }

@@ -61,12 +66,6 @@ export default function Sidebar({
    }
  }

-  function handleMouseLeave() {
-    if (!isClicking) {
-      onActivePoiChange(null)
-    }
-  }
-
  function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
    setIsClicking(true)
    toggleFullScreenSidebar()
@@ -127,7 +126,6 @@ export default function Sidebar({
                      <button
                        className={`${styles.poiButton} ${activePoi === poi.name ? styles.active : ""}`}
                        onMouseEnter={() => handleMouseEnter(poi.name)}
-                        onMouseLeave={handleMouseLeave}
                        onClick={() =>
                          handlePoiClick(poi.name, poi.coordinates)
                        }
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -4,15 +4,16 @@ import { useIntl } from "react-intl"

 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
-import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

+import RoomDetailsButton from "../RoomDetailsButton"
+
 import styles from "./roomCard.module.css"

 import type { RoomCardProps } from "@/types/components/hotelPage/room"

-export function RoomCard({ room }: RoomCardProps) {
+export function RoomCard({ hotelId, room }: RoomCardProps) {
  const { images, name, roomSize, occupancy, id } = room
  const intl = useIntl()
  const mainImage = images[0]
@@ -70,7 +71,10 @@ export function RoomCard({ room }: RoomCardProps) {
          </Subtitle>
          <Body color="grey">{subtitle}</Body>
        </div>
-        <RoomSidePeek room={room} buttonSize="medium" />
+        <RoomDetailsButton
+          hotelId={hotelId}
+          roomTypeCode={room.roomTypes[0].code}
+        />
      </div>
    </article>
  )
--- a/components/ContentType/HotelPage/Rooms/RoomDetailsButton/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomDetailsButton/index.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function RoomDetailsButton({
+  hotelId,
+  roomTypeCode,
+}: ToggleSidePeekProps) {
+  const intl = useIntl()
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      intent="text"
+      type="button"
+      size="medium"
+      theme="base"
+      onClick={() =>
+        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
+      }
+    >
+      {intl.formatMessage({ id: "See room details" })}
+      <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+    </Button>
+  )
+}
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -15,7 +15,7 @@ import styles from "./rooms.module.css"
 import type { RoomsProps } from "@/types/components/hotelPage/room"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"

-export function Rooms({ rooms }: RoomsProps) {
+export function Rooms({ hotelId, rooms }: RoomsProps) {
  const intl = useIntl()
  const showToggleButton = rooms.length > 3
  const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -45,7 +45,7 @@ export function Rooms({ rooms }: RoomsProps) {
      >
        {rooms.map((room) => (
          <div key={room.id}>
-            <RoomCard room={room} />
+            <RoomCard hotelId={hotelId} room={room} />
          </div>
        ))}
      </Grids.Stackable>
--- a/components/ContentType/HotelPage/index.tsx
+++ b/components/ContentType/HotelPage/index.tsx
@@ -3,6 +3,7 @@ import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"

 import AccordionSection from "@/components/Blocks/Accordion"
+import HotelReservationSidePeek from "@/components/HotelReservation/SidePeek"
 import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
 import Alert from "@/components/TempDesignSystem/Alert"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
@@ -37,6 +38,7 @@ export default async function HotelPage() {
  }

  const {
+    hotelId,
    hotelName,
    hotelDescription,
    hotelLocation,
@@ -97,7 +99,7 @@ export default async function HotelPage() {
            </div>
          ) : null}
        </div>
-        <Rooms rooms={roomCategories} />
+        <Rooms hotelId={hotelId} rooms={roomCategories} />
        <Facilities facilities={facilities} activitiesCard={activitiesCard} />
        {faq.accordions.length > 0 && (
          <AccordionSection accordion={faq.accordions} title={faq.title} />
@@ -166,6 +168,7 @@ export default async function HotelPage() {
        </SidePeek>
        {/* eslint-enable import/no-named-as-default-member */}
      </SidePeekProvider>
+      <HotelReservationSidePeek hotel={null} />
    </div>
  )
 }
--- a/components/Forms/Signup/schema.ts
+++ b/components/Forms/Signup/schema.ts
@@ -16,7 +16,9 @@ export const signUpSchema = z.object({
    "Phone is required",
    "Please enter a valid phone number"
  ),
-  dateOfBirth: z.string().min(1),
+  dateOfBirth: z.string().min(1, {
+    message: "Date of birth is required",
+  }),
  address: z.object({
    countryCode: z
      .string({
--- a/components/HotelReservation/EnterDetails/Details/schema.ts
+++ b/components/HotelReservation/EnterDetails/Details/schema.ts
@@ -23,7 +23,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
  z.object({
    join: z.literal(true),
    zipCode: z.string().min(1, { message: "Zip code is required" }),
-    dateOfBirth: z.string(),
+    dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
    termsAccepted: z.literal(true, {
      errorMap: (err, ctx) => {
        switch (err.code) {
--- a/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import Button from "@/components/TempDesignSystem/Button"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function ToggleSidePeek({
+  hotelId,
+  roomTypeCode,
+}: ToggleSidePeekProps) {
+  const intl = useIntl()
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() =>
+        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
+      }
+      theme="base"
+      size="small"
+      variant="icon"
+      intent="text"
+      wrapping
+    >
+      {intl.formatMessage({ id: "See room details" })}{" "}
+    </Button>
+  )
+}
--- a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -2,15 +2,25 @@

 import { useIntl } from "react-intl"

+import { RoomConfiguration } from "@/server/routers/hotels/output"
+
 import { EditIcon, ImageIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

+import ToggleSidePeek from "./ToggleSidePeek"
+
 import styles from "./selectedRoom.module.css"

-export default function SelectedRoom() {
+export default function SelectedRoom({
+  hotelId,
+  room,
+}: {
+  hotelId: string
+  room: RoomConfiguration
+}) {
  const intl = useIntl()
  return (
    <article className={styles.container}>
@@ -22,42 +32,50 @@ export default function SelectedRoom() {
        />
      </div>
      <div className={styles.content}>
-        <div className={styles.textContainer}>
-          <Footnote
-            className={styles.label}
-            color="uiTextPlaceholder"
-            textTransform="uppercase"
-          >
-            {intl.formatMessage({ id: "Your room" })}
-          </Footnote>
-          <div className={styles.text}>
-            {/**
-             * [TEMP]
-             * No translation on Subtitles as they will be derived
-             * from Room selection.
-             */}
-            <Subtitle
-              className={styles.room}
-              color="uiTextHighContrast"
-              type="two"
+        <div>
+          <div className={styles.textContainer}>
+            <Footnote
+              className={styles.label}
+              color="uiTextPlaceholder"
+              textTransform="uppercase"
            >
-              Cozy cabin
-            </Subtitle>
-            <Subtitle
-              className={styles.invertFontWeight}
-              color="uiTextMediumContrast"
-              type="two"
-            >
-              Free rebooking
-            </Subtitle>
-            <Subtitle
-              className={styles.invertFontWeight}
-              color="uiTextMediumContrast"
-              type="two"
-            >
-              Pay now
-            </Subtitle>
+              {intl.formatMessage({ id: "Your room" })}
+            </Footnote>
+            <div className={styles.text}>
+              {/**
+               * [TEMP]
+               * No translation on Subtitles as they will be derived
+               * from Room selection.
+               */}
+              <Subtitle
+                className={styles.room}
+                color="uiTextHighContrast"
+                type="two"
+              >
+                {room.roomType}
+              </Subtitle>
+              <Subtitle
+                className={styles.invertFontWeight}
+                color="uiTextMediumContrast"
+                type="two"
+              >
+                Free rebooking
+              </Subtitle>
+              <Subtitle
+                className={styles.invertFontWeight}
+                color="uiTextMediumContrast"
+                type="two"
+              >
+                Pay now
+              </Subtitle>
+            </div>
          </div>
+          {room?.roomTypeCode && (
+            <ToggleSidePeek
+              hotelId={hotelId}
+              roomTypeCode={room.roomTypeCode}
+            />
+          )}
        </div>
        <Button
          asChild
--- a/components/HotelReservation/EnterDetails/SidePeek/index.tsx
+++ b/components/HotelReservation/EnterDetails/SidePeek/index.tsx
@@ -1,46 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { useEnterDetailsStore } from "@/stores/enter-details"
-
-import Contact from "@/components/HotelReservation/Contact"
-import Divider from "@/components/TempDesignSystem/Divider"
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import styles from "./enterDetailsSidePeek.module.css"
-
-import {
-  SidePeekEnum,
-  SidePeekProps,
-} from "@/types/components/hotelReservation/enterDetails/sidePeek"
-
-export default function EnterDetailsSidePeek({ hotel }: SidePeekProps) {
-  const activeSidePeek = useEnterDetailsStore((state) => state.activeSidePeek)
-  const close = useEnterDetailsStore((state) => state.closeSidePeek)
-
-  const intl = useIntl()
-  return (
-    <SidePeek
-      contentKey={SidePeekEnum.hotelDetails}
-      title={intl.formatMessage({ id: "About the hotel" })}
-      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
-      handleClose={close}
-    >
-      <article className={styles.spacing}>
-        <Contact hotel={hotel} />
-        <Divider />
-        <section className={styles.spacing}>
-          <Body>{hotel.hotelContent.texts.descriptions.medium}</Body>
-          {hotel.hotelContent.texts.facilityInformation
-            .split(/[\n\r]/g)
-            .filter((p) => p)
-            .map((paragraph, idx) => (
-              <Body key={`facilityInfo-${idx}`}>{paragraph}</Body>
-            ))}
-        </section>
-      </article>
-    </SidePeek>
-  )
-}
--- a/components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx
+++ b/components/HotelReservation/EnterDetails/Summary/ToggleSidePeek.tsx
@@ -1,35 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { useEnterDetailsStore } from "@/stores/enter-details"
-
-import { ChevronRightSmallIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-
-import { SidePeekEnum } from "@/types/components/hotelReservation/enterDetails/sidePeek"
-
-export default function ToggleSidePeek() {
-  const intl = useIntl()
-  const openSidePeek = useEnterDetailsStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      onClick={() => {
-        openSidePeek(SidePeekEnum.hotelDetails)
-      }}
-      theme="base"
-      size="small"
-      variant="icon"
-      intent="text"
-      wrapping
-    >
-      {intl.formatMessage({ id: "See room details" })}{" "}
-      <ChevronRightSmallIcon
-        color="baseButtonTextOnFillNormal"
-        height={20}
-        width={20}
-      />
-    </Button>
-  )
-}
--- a/components/HotelReservation/ReadMore/index.tsx
+++ b/components/HotelReservation/ReadMore/index.tsx
@@ -1,111 +1,29 @@
 "use client"

-import { useState } from "react"
-import { useIntl } from "react-intl"
+import useSidePeekStore from "@/stores/sidepeek"

 import { ChevronRightIcon } from "@/components/Icons"
-import Accordion from "@/components/TempDesignSystem/Accordion"
-import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import Button from "@/components/TempDesignSystem/Button"
-import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-
-import Contact from "../Contact"

 import styles from "./readMore.module.css"

-import {
-  ParkingProps,
-  ReadMoreProps,
-} from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import type { Amenities, Hotel } from "@/types/hotel"
+import { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"

-function getAmenitiesList(hotel: Hotel) {
-  const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
-    // Remove Parking facilities since parking accordion is based on hotel.parking
-    (facility) => !facility.name.startsWith("Parking") && facility.public
-  )
-  return detailedAmenities
-}
-
-export default function ReadMore({ label, hotel, hotelId }: ReadMoreProps) {
-  const intl = useIntl()
-
-  const [sidePeekOpen, setSidePeekOpen] = useState(false)
-
-  const amenitiesList = getAmenitiesList(hotel)
+export default function ReadMore({ label, hotelId }: ReadMoreProps) {
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
  return (
-    <>
-      <Button
-        onPress={() => {
-          setSidePeekOpen(true)
-        }}
-        intent="text"
-        theme="base"
-        wrapping
-        className={styles.detailsButton}
-      >
-        {label}
-        <ChevronRightIcon color="burgundy" />
-      </Button>
-      <SidePeek
-        title={hotel.name}
-        isOpen={sidePeekOpen}
-        contentKey={`${hotelId}`}
-        handleClose={() => {
-          setSidePeekOpen(false)
-        }}
-      >
-        <div className={styles.content}>
-          <Subtitle>
-            {intl.formatMessage({ id: "Practical information" })}
-          </Subtitle>
-          <Contact hotel={hotel} />
-          <Accordion>
-            {/* parking */}
-            {hotel.parking.length ? (
-              <AccordionItem title={intl.formatMessage({ id: "Parking" })}>
-                {hotel.parking.map((p) => (
-                  <Parking key={p.name} parking={p} />
-                ))}
-              </AccordionItem>
-            ) : null}
-            <AccordionItem title={intl.formatMessage({ id: "Accessibility" })}>
-              TODO: What content should be in the accessibility section?
-            </AccordionItem>
-            {amenitiesList.map((amenity) => {
-              return (
-                <div key={amenity.id} className={styles.amenity}>
-                  {amenity.name}
-                </div>
-              )
-            })}
-          </Accordion>
-          {/* TODO: handle linking to Hotel Page */}
-          <Button theme={"base"}>To the hotel</Button>
-        </div>
-      </SidePeek>
-    </>
-  )
-}
-
-function Parking({ parking }: ParkingProps) {
-  const intl = useIntl()
-  return (
-    <div>
-      <Body>{`${intl.formatMessage({ id: parking.type })} (${parking.name})`}</Body>
-      <ul className={styles.list}>
-        <li>
-          {`${intl.formatMessage({
-            id: "Number of charging points for electric cars",
-          })}: ${parking.numberOfChargingSpaces}`}
-        </li>
-        <li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
-        <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${parking.numberOfParkingSpots}`}</li>
-        <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${parking.distanceToHotel} m`}</li>
-        <li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
-      </ul>
-    </div>
+    <Button
+      onPress={() => {
+        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })
+      }}
+      intent="text"
+      theme="base"
+      wrapping
+      className={styles.detailsButton}
+    >
+      {label}
+      <ChevronRightIcon color="burgundy" />
+    </Button>
  )
 }
--- a/components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css
+++ b/components/HotelReservation/SelectHotel/HotelFilter/hotelFilter.module.css
@@ -1,5 +1,6 @@
 .container {
  min-width: 272px;
+  display: none;
 }

 .facilities {
@@ -24,3 +25,9 @@
  height: 1.25rem;
  margin: 0;
 }
+
+@media (min-width: 768px) {
+  .container {
+    display: block;
+  }
+}
--- a/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx
+++ b/components/HotelReservation/SelectHotel/MobileMapButtonContainer/index.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
+import { FilterIcon, MapIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import styles from "./mobileMapButtonContainer.module.css"
+
+export default function MobileMapButtonContainer({ city }: { city: string }) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  return (
+    <div className={styles.buttonContainer}>
+      <Button
+        asChild
+        variant="icon"
+        intent="secondary"
+        size="small"
+        className={styles.button}
+      >
+        <Link
+          href={`${selectHotelMap[lang]}`}
+          keepSearchParams
+          color="burgundy"
+        >
+          <MapIcon color="burgundy" />
+          {intl.formatMessage({ id: "See on map" })}
+        </Link>
+      </Button>
+      {/* TODO: Add filter toggle */}
+      <Button
+        variant="icon"
+        intent="secondary"
+        size="small"
+        className={styles.button}
+      >
+        <FilterIcon color="burgundy" />
+        {intl.formatMessage({ id: "Filter and sort" })}
+      </Button>
+    </div>
+  )
+}
--- a/components/HotelReservation/SelectHotel/MobileMapButtonContainer/mobileMapButtonContainer.module.css
+++ b/components/HotelReservation/SelectHotel/MobileMapButtonContainer/mobileMapButtonContainer.module.css
@@ -0,0 +1,15 @@
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x2);
+  margin-bottom: var(--Spacing-x3);
+}
+
+.button {
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .buttonContainer {
+    display: none;
+  }
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
@@ -0,0 +1,9 @@
+.hotelListing {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .hotelListing {
+    display: block;
+  }
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -1,5 +1,7 @@
 "use client"

+import styles from "./hotelListing.module.css"
+
 import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"

 // TODO: This component is copied from
@@ -7,5 +9,5 @@ import { HotelListingProps } from "@/types/components/hotelReservation/selectHot
 // Look at that for inspiration on how to do the interaction with the map.

 export default function HotelListing({}: HotelListingProps) {
-  return <section>Hotel listing TBI</section>
+  return <section className={styles.hotelListing}>Hotel listing TBI</section>
 }
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -1,14 +1,14 @@
 "use client"
 import { APIProvider } from "@vis.gl/react-google-maps"
+import { useRouter, useSearchParams } from "next/navigation"
 import { useState } from "react"
 import { useIntl } from "react-intl"

 import { selectHotel } from "@/constants/routes/hotelReservation"

-import { CloseIcon } from "@/components/Icons"
+import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"

 import HotelListing from "./HotelListing"
@@ -22,36 +22,60 @@ export default function SelectHotelMap({
  coordinates,
  pointsOfInterest,
  mapId,
+  isModal,
 }: SelectHotelMapProps) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
  const [activePoi, setActivePoi] = useState<string | null>(null)

+  function handleModalDismiss() {
+    router.back()
+  }
+
+  function handlePageRedirect() {
+    router.push(`${selectHotel[lang]}?${searchParams.toString()}`)
+  }
+
  const closeButton = (
    <Button
-      asChild
      intent="inverted"
      size="small"
      theme="base"
      className={styles.closeButton}
+      onClick={isModal ? handleModalDismiss : handlePageRedirect}
    >
-      <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
-        <CloseIcon color="burgundy" />
-        {intl.formatMessage({ id: "Close the map" })}
-      </Link>
+      <CloseIcon color="burgundy" />
+      {intl.formatMessage({ id: "Close the map" })}
    </Button>
  )
  return (
    <APIProvider apiKey={apiKey}>
-      <HotelListing />
-      <InteractiveMap
-        closeButton={closeButton}
-        coordinates={coordinates}
-        pointsOfInterest={pointsOfInterest}
-        activePoi={activePoi}
-        onActivePoiChange={setActivePoi}
-        mapId={mapId}
-      />
+      <div className={styles.container}>
+        <div className={styles.filterContainer}>
+          <Button
+            intent="text"
+            size="small"
+            variant="icon"
+            wrapping
+            onClick={isModal ? handleModalDismiss : handlePageRedirect}
+          >
+            <CloseLargeIcon />
+          </Button>
+          <span>Filter and sort</span>
+          {/* TODO: Add filter and sort button */}
+        </div>
+        <HotelListing />
+        <InteractiveMap
+          closeButton={closeButton}
+          coordinates={coordinates}
+          pointsOfInterest={pointsOfInterest}
+          activePoi={activePoi}
+          onActivePoiChange={setActivePoi}
+          mapId={mapId}
+        />
+      </div>
    </APIProvider>
  )
 }
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
@@ -2,4 +2,39 @@
  pointer-events: initial;
  box-shadow: var(--button-box-shadow);
  gap: var(--Spacing-x-half);
+  display: none !important;
+}
+
+.container {
+  height: 100%;
+}
+
+.filterContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: 0 var(--Spacing-x2);
+  height: 44px;
+}
+
+.filterContainer .closeButton {
+  color: var(--UI-Text-High-Contrast);
+}
+
+@media (min-width: 768px) {
+  .closeButton {
+    display: flex !important;
+  }
+  .filterContainer {
+    display: none;
+  }
+  .container {
+    display: flex;
+  }
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -5,13 +5,13 @@ import { useIntl } from "react-intl"

 import { RateDefinition } from "@/server/routers/hotels/output"

+import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

-import RoomSidePeek from "../../../../SidePeeks/RoomSidePeek"
 import ImageGallery from "../../ImageGallery"
 import { getIconForFeatureCode } from "../../utils"

@@ -21,6 +21,7 @@ import type { RoomCardProps } from "@/types/components/hotelReservation/selectRa
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"

 export default function RoomCard({
+  hotelId,
  rateDefinitions,
  roomConfiguration,
  roomCategories,
@@ -57,9 +58,10 @@ export default function RoomCard({
      ?.generalTerms
  }

-  const petRoomPackage = packages.find(
-    (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
-  )
+  const petRoomPackage =
+    (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
+      packages.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
+    undefined

  const selectedRoom = roomCategories.find(
    (room) => room.name === roomConfiguration.roomType
@@ -86,8 +88,11 @@ export default function RoomCard({
              : `${roomSize?.min}-${roomSize?.max}`}
            m²
          </Caption>
-          {selectedRoom && (
-            <RoomSidePeek room={selectedRoom} buttonSize="small" />
+          {roomConfiguration.roomTypeCode && (
+            <ToggleSidePeek
+              hotelId={hotelId}
+              roomTypeCode={roomConfiguration.roomTypeCode}
+            />
          )}
        </div>
        <div className={styles.container}>
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -67,6 +67,7 @@ export default function RoomSelection({
          {roomConfigurations.map((roomConfiguration) => (
            <li key={roomConfiguration.roomTypeCode}>
              <RoomCard
+                hotelId={roomsAvailability.hotelId.toString()}
                rateDefinitions={rateDefinitions}
                roomConfiguration={roomConfiguration}
                roomCategories={roomCategories}
--- a/components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css
+++ b/components/HotelReservation/EnterDetails/SidePeek/enterDetailsSidePeek.module.css
--- a/components/HotelReservation/SidePeek/index.tsx
+++ b/components/HotelReservation/SidePeek/index.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+import useSidePeekStore from "@/stores/sidepeek"
+
+import HotelSidePeek from "@/components/SidePeeks/HotelSidePeek"
+import RoomSidePeek from "@/components/SidePeeks/RoomSidePeek"
+import useLang from "@/hooks/useLang"
+
+import { HotelData } from "@/types/hotel"
+
+export default function HotelReservationSidePeek({
+  hotel,
+}: {
+  hotel: HotelData | null
+}) {
+  const activeSidePeek = useSidePeekStore((state) => state.activeSidePeek)
+  const hotelId = useSidePeekStore((state) => state.hotelId)
+  const roomTypeCode = useSidePeekStore((state) => state.roomTypeCode)
+  const close = useSidePeekStore((state) => state.closeSidePeek)
+  const lang = useLang()
+
+  const { data: hotelData } = trpc.hotel.hotelData.get.useQuery(
+    {
+      hotelId: hotelId ?? "",
+      language: lang,
+    },
+    {
+      enabled: !!hotelId,
+      initialData: hotel ?? undefined,
+    }
+  )
+
+  const selectedRoom = hotelData?.included?.find((room) =>
+    room.roomTypes.some((type) => type.code === roomTypeCode)
+  )
+
+  if (activeSidePeek) {
+    return (
+      <>
+        {hotelData && (
+          <HotelSidePeek
+            hotel={hotelData.data?.attributes}
+            activeSidePeek={activeSidePeek}
+            close={close}
+          />
+        )}
+        {selectedRoom && (
+          <RoomSidePeek
+            room={selectedRoom}
+            activeSidePeek={activeSidePeek}
+            close={close}
+          />
+        )}
+      </>
+    )
+  }
+
+  return null
+}
--- a/components/Icons/Filter.tsx
+++ b/components/Icons/Filter.tsx
@@ -0,0 +1,23 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function FilterIcon({ className, color, ...props }: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M9.58789 15.8125C9.46046 15.8125 9.34813 15.7681 9.25091 15.6792C9.15368 15.5903 9.10507 15.4819 9.10507 15.3542V10.7292L4.33424 4.9375C4.21618 4.78472 4.19886 4.62153 4.28226 4.44792C4.36568 4.27431 4.508 4.1875 4.70924 4.1875H15.2926C15.4938 4.1875 15.6361 4.27431 15.7196 4.44792C15.803 4.62153 15.7856 4.78472 15.6676 4.9375L10.8967 10.7292V15.3542C10.8967 15.4819 10.8489 15.5903 10.7533 15.6792C10.6577 15.7681 10.5462 15.8125 10.4188 15.8125H9.58789ZM10.0009 9.625L13.3134 5.58333H6.66757L10.0009 9.625Z"
+        fill="#4D001B"
+      />
+    </svg>
+  )
+}
--- a/components/Icons/index.tsx
+++ b/components/Icons/index.tsx
@@ -45,6 +45,7 @@ export { default as ErrorCircleIcon } from "./ErrorCircle"
 export { default as EyeHideIcon } from "./EyeHide"
 export { default as EyeShowIcon } from "./EyeShow"
 export { default as FanIcon } from "./Fan"
+export { default as FilterIcon } from "./Filter"
 export { default as FitnessIcon } from "./Fitness"
 export { default as FootstoolIcon } from "./Footstool"
 export { default as GalleryIcon } from "./Gallery"
--- a/components/MapModal/index.tsx
+++ b/components/MapModal/index.tsx
@@ -0,0 +1,85 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { Dialog, Modal } from "react-aria-components"
+
+import { debounce } from "@/utils/debounce"
+
+import styles from "./mapModal.module.css"
+
+export function MapModal({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const [mapHeight, setMapHeight] = useState("0px")
+  const [mapTop, setMapTop] = useState("0px")
+  const [isOpen, setOpen] = useState(true)
+
+  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
+
+  const rootDiv = useRef<HTMLDivElement | null>(null)
+
+  const handleOnOpenChange = (open: boolean) => {
+    setOpen(open)
+    if (!open) {
+      router.back()
+    }
+  }
+
+  // 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)`)
+    setMapTop(`${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 (scrollHeightWhenOpened === 0) {
+      const scrollY = window.scrollY
+      setScrollHeightWhenOpened(scrollY)
+      window.scrollTo({ top: 0, behavior: "instant" })
+    }
+  }, [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, handleMapHeight])
+
+  return (
+    <div className={styles.wrapper} ref={rootDiv}>
+      <Modal isDismissable isOpen={isOpen} onOpenChange={handleOnOpenChange}>
+        <Dialog
+          style={
+            {
+              "--hotel-map-height": mapHeight,
+              "--hotel-map-top": mapTop,
+            } as React.CSSProperties
+          }
+          className={styles.dynamicMap}
+        >
+          {children}
+        </Dialog>
+      </Modal>
+    </div>
+  )
+}
--- a/components/MapModal/mapModal.module.css
+++ b/components/MapModal/mapModal.module.css
@@ -0,0 +1,18 @@
+.dynamicMap {
+  --hotel-map-height: 100dvh;
+  --hotel-map-top: 0px;
+  position: absolute;
+  top: var(--hotel-map-top);
+  left: 0;
+  height: var(--hotel-map-height);
+  width: 100dvw;
+  z-index: var(--hotel-dynamic-map-z-index);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
--- a/components/Maps/InteractiveMap/index.tsx
+++ b/components/Maps/InteractiveMap/index.tsx
@@ -70,7 +70,6 @@ export default function InteractiveMap({
            anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
            zIndex={activePoi === poi.name ? 2 : 0}
            onMouseEnter={() => onActivePoiChange(poi.name)}
-            onMouseLeave={() => onActivePoiChange(null)}
            onClick={() => toggleActivePoi(poi.name)}
          >
            <span
--- a/components/Maps/InteractiveMap/interactiveMap.module.css
+++ b/components/Maps/InteractiveMap/interactiveMap.module.css
@@ -1,6 +1,7 @@
 .mapContainer {
  --button-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
+  height: 100%;
  position: relative;
  z-index: 0;
 }
--- a/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
+++ b/components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
@@ -0,0 +1,23 @@
+.spacing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.amenity {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+  /* padding set to align with AccordionItem which has a different composition */
+  padding: var(--Spacing-x2)
+    calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half));
+}
+
+.list {
+  font-family: var(--typography-Body-Regular-fontFamily);
+  list-style: inside;
+}
--- a/components/SidePeeks/HotelSidePeek/index.tsx
+++ b/components/SidePeeks/HotelSidePeek/index.tsx
@@ -0,0 +1,90 @@
+import { useIntl } from "react-intl"
+
+import Contact from "@/components/HotelReservation/Contact"
+import Accordion from "@/components/TempDesignSystem/Accordion"
+import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
+import Button from "@/components/TempDesignSystem/Button"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./hotelSidePeek.module.css"
+
+import { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
+import { ParkingProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { Amenities, Hotel } from "@/types/hotel"
+
+function getAmenitiesList(hotel: Hotel) {
+  const detailedAmenities: Amenities = hotel.detailedFacilities.filter(
+    // Remove Parking facilities since parking accordion is based on hotel.parking
+    (facility) => !facility.name.startsWith("Parking") && facility.public
+  )
+  return detailedAmenities
+}
+
+export default function HotelSidePeek({
+  hotel,
+  activeSidePeek,
+  close,
+}: HotelSidePeekProps) {
+  const intl = useIntl()
+  const amenitiesList = getAmenitiesList(hotel)
+
+  return (
+    <SidePeek
+      title={hotel.name}
+      isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
+      handleClose={close}
+    >
+      <div className={styles.content}>
+        <Subtitle>
+          {intl.formatMessage({ id: "Practical information" })}
+        </Subtitle>
+        <Contact hotel={hotel} />
+        <Accordion>
+          {/* parking */}
+          {hotel.parking.length ? (
+            <AccordionItem title={intl.formatMessage({ id: "Parking" })}>
+              {hotel.parking.map((p) => (
+                <Parking key={p.name} parking={p} />
+              ))}
+            </AccordionItem>
+          ) : null}
+          <AccordionItem title={intl.formatMessage({ id: "Accessibility" })}>
+            TODO: What content should be in the accessibility section?
+          </AccordionItem>
+          {amenitiesList.map((amenity) => {
+            return (
+              <div key={amenity.id} className={styles.amenity}>
+                {amenity.name}
+              </div>
+            )
+          })}
+        </Accordion>
+        {/* TODO: handle linking to Hotel Page */}
+        <Button theme={"base"}>To the hotel</Button>
+      </div>
+    </SidePeek>
+  )
+}
+
+function Parking({ parking }: ParkingProps) {
+  const intl = useIntl()
+  return (
+    <div>
+      <Body>{`${intl.formatMessage({ id: parking.type })} (${parking.name})`}</Body>
+      <ul className={styles.list}>
+        <li>
+          {`${intl.formatMessage({
+            id: "Number of charging points for electric cars",
+          })}: ${parking.numberOfChargingSpaces}`}
+        </li>
+        <li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${parking.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
+        <li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${parking.numberOfParkingSpots}`}</li>
+        <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${parking.distanceToHotel} m`}</li>
+        <li>{`${intl.formatMessage({ id: "Address" })}: ${parking.address}`}</li>
+      </ul>
+    </div>
+  )
+}
--- a/components/SidePeeks/RoomSidePeek/index.tsx
+++ b/components/SidePeeks/RoomSidePeek/index.tsx
@@ -1,7 +1,5 @@
-import { useState } from "react"
 import { useIntl } from "react-intl"

-import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -12,10 +10,14 @@ import { getFacilityIcon } from "./facilityIcon"

 import styles from "./roomSidePeek.module.css"

+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"

-export default function RoomSidePeek({ room, buttonSize }: RoomSidePeekProps) {
-  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
+export default function RoomSidePeek({
+  room,
+  activeSidePeek,
+  close,
+}: RoomSidePeekProps) {
  const intl = useIntl()

  const roomSize = room.roomSize
@@ -24,84 +26,70 @@ export default function RoomSidePeek({ room, buttonSize }: RoomSidePeekProps) {
  const images = room.images

  return (
-    <div>
-      <Button
-        intent="text"
-        type="button"
-        size={buttonSize}
-        theme="base"
-        className={styles.button}
-        onClick={() => setIsSidePeekOpen(true)}
-      >
-        {intl.formatMessage({ id: "See room details" })}
-        <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
-      </Button>
-
-      <SidePeek
-        title={room.name}
-        isOpen={isSidePeekOpen}
-        handleClose={() => setIsSidePeekOpen(false)}
-      >
-        <div className={styles.wrapper}>
-          <div className={styles.mainContent}>
-            <Body color="baseTextMediumContrast">
-              {roomSize.min === roomSize.max
-                ? roomSize.min
-                : `${roomSize.min} - ${roomSize.max}`}
-              m².{" "}
-              {intl.formatMessage(
-                { id: "booking.accommodatesUpTo" },
-                { nrOfGuests: occupancy }
-              )}
-            </Body>
-            {images && (
-              <div className={styles.imageContainer}>
-                <ImageGallery images={images} title={room.name} />
-              </div>
+    <SidePeek
+      title={room.name}
+      isOpen={activeSidePeek === SidePeekEnum.roomDetails}
+      handleClose={close}
+    >
+      <div className={styles.wrapper}>
+        <div className={styles.mainContent}>
+          <Body color="baseTextMediumContrast">
+            {roomSize.min === roomSize.max
+              ? roomSize.min
+              : `${roomSize.min} - ${roomSize.max}`}
+            m².{" "}
+            {intl.formatMessage(
+              { id: "booking.accommodatesUpTo" },
+              { nrOfGuests: occupancy }
            )}
-            <Body color="uiTextHighContrast">{roomDescription}</Body>
-          </div>
-          <div className={styles.listContainer}>
-            <Subtitle type="two" color="uiTextHighContrast">
-              {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
-            </Subtitle>
-            <ul className={styles.facilityList}>
-              {room.roomFacilities
-                .sort((a, b) => a.sortOrder - b.sortOrder)
-                .map((facility) => {
-                  const Icon = getFacilityIcon(facility.name)
-                  return (
-                    <li key={facility.name}>
-                      {Icon && <Icon color="uiTextMediumContrast" />}
-                      <Body
-                        asChild
-                        className={!Icon ? styles.noIcon : undefined}
-                        color="uiTextMediumContrast"
-                      >
-                        <span>{facility.name}</span>
-                      </Body>
-                    </li>
-                  )
-                })}
-            </ul>
-          </div>
-          <div className={styles.listContainer}>
-            <Subtitle type="two" color="uiTextHighContrast">
-              {intl.formatMessage({ id: "booking.bedOptions" })}
-            </Subtitle>
-            <Body color="grey">
-              {intl.formatMessage({ id: "booking.basedOnAvailability" })}
-            </Body>
-            {/* TODO: Get data for bed options */}
-          </div>
+          </Body>
+          {images && (
+            <div className={styles.imageContainer}>
+              <ImageGallery images={images} title={room.name} />
+            </div>
+          )}
+          <Body color="uiTextHighContrast">{roomDescription}</Body>
        </div>
-        <div className={styles.buttonContainer}>
-          <Button fullWidth theme="base" intent="primary">
-            {intl.formatMessage({ id: "booking.selectRoom" })}
-            {/* TODO: Implement logic for select room */}
-          </Button>
+        <div className={styles.listContainer}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
+          </Subtitle>
+          <ul className={styles.facilityList}>
+            {room.roomFacilities
+              .sort((a, b) => a.sortOrder - b.sortOrder)
+              .map((facility) => {
+                const Icon = getFacilityIcon(facility.name)
+                return (
+                  <li key={facility.name}>
+                    {Icon && <Icon color="uiTextMediumContrast" />}
+                    <Body
+                      asChild
+                      className={!Icon ? styles.noIcon : undefined}
+                      color="uiTextMediumContrast"
+                    >
+                      <span>{facility.name}</span>
+                    </Body>
+                  </li>
+                )
+              })}
+          </ul>
        </div>
-      </SidePeek>
-    </div>
+        <div className={styles.listContainer}>
+          <Subtitle type="two" color="uiTextHighContrast">
+            {intl.formatMessage({ id: "booking.bedOptions" })}
+          </Subtitle>
+          <Body color="grey">
+            {intl.formatMessage({ id: "booking.basedOnAvailability" })}
+          </Body>
+          {/* TODO: Get data for bed options */}
+        </div>
+      </div>
+      <div className={styles.buttonContainer}>
+        <Button fullWidth theme="base" intent="primary">
+          {intl.formatMessage({ id: "booking.selectRoom" })}
+          {/* TODO: Implement logic for select room */}
+        </Button>
+      </div>
+    </SidePeek>
  )
 }
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/components/TempDesignSystem/Card/card.module.css
@@ -15,6 +15,7 @@

 .imageWrapper {
  display: flex;
+  width: 100%;
 }

 .imageWrapper::after {
--- a/components/TempDesignSystem/Form/Date/date.module.css
+++ b/components/TempDesignSystem/Form/Date/date.module.css
@@ -18,3 +18,12 @@
 .year {
  grid-area: year;
 }
+
+/* TODO: Handle this in Select component.
+   - out of scope for now.
+*/
+.day.invalid > div > div,
+.month.invalid > div > div,
+.year.invalid > div > div {
+  border-color: var(--Scandic-Red-60);
+}
--- a/components/TempDesignSystem/Form/Date/date.ts
+++ b/components/TempDesignSystem/Form/Date/date.ts
@@ -2,6 +2,7 @@ import type { RegisterOptions } from "react-hook-form"

 export const enum DateName {
  date = "date",
+  day = "day",
  month = "month",
  year = "year",
 }
--- a/components/TempDesignSystem/Form/Date/index.tsx
+++ b/components/TempDesignSystem/Form/Date/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { parseDate } from "@internationalized/date"
-import { useState } from "react"
+import { useEffect } from "react"
 import { DateInput, DatePicker, Group } from "react-aria-components"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -8,8 +8,11 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"

 import Select from "@/components/TempDesignSystem/Select"
+import useLang from "@/hooks/useLang"
+import { getLocalizedMonthName } from "@/utils/dateFormatting"
 import { rangeArray } from "@/utils/rangeArray"

+import ErrorMessage from "../ErrorMessage"
 import { DateName } from "./date"

 import styles from "./date.module.css"
@@ -20,51 +23,75 @@ import type { DateProps } from "./date"

 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
  const intl = useIntl()
-  const currentValue = useWatch({ name })
-  const { control, setValue, trigger } = useFormContext()
-  const { field } = useController({
+  const { control, setValue, formState, watch } = useFormContext()
+  const { field, fieldState } = useController({
    control,
    name,
    rules: registerOptions,
  })

-  const currentYear = new Date().getFullYear()
+  const currentDateValue = useWatch({ name })
+  const year = watch(DateName.year)
+  const month = watch(DateName.month)
+  const day = watch(DateName.day)

+  const lang = useLang()
  const months = rangeArray(1, 12).map((month) => ({
    value: month,
-    label: `${month}`,
+    label: getLocalizedMonthName(month, lang),
  }))

+  const currentYear = new Date().getFullYear()
  const years = rangeArray(1900, currentYear - 18)
    .reverse()
    .map((year) => ({ value: year, label: year.toString() }))

-  // Ensure the user can't select a date that doesn't exist.
-  const daysInMonth = dt(currentValue).daysInMonth()
+  // Calculate available days based on selected year and month
+  const daysInMonth = getDaysInMonth(
+    year ? Number(year) : null,
+    month ? Number(month) - 1 : null
+  )
+
  const days = rangeArray(1, daysInMonth).map((day) => ({
    value: day,
    label: `${day}`,
  }))

-  function createOnSelect(selector: DateName) {
-    /**
-     * Months are 0 index based and therefore we
-     * must subtract by 1 to get the selected month
-     */
-    return (select: Key) => {
-      if (selector === DateName.month) {
-        select = Number(select) - 1
-      }
-      const newDate = dt(currentValue).set(selector, Number(select))
-      setValue(name, newDate.format("YYYY-MM-DD"))
-      trigger(name)
-    }
-  }
-
  const dayLabel = intl.formatMessage({ id: "Day" })
  const monthLabel = intl.formatMessage({ id: "Month" })
  const yearLabel = intl.formatMessage({ id: "Year" })

+  useEffect(() => {
+    if (formState.isSubmitting) return
+
+    if (month && day) {
+      const maxDays = getDaysInMonth(
+        year ? Number(year) : null,
+        Number(month) - 1
+      )
+      const adjustedDay = Number(day) > maxDays ? maxDays : Number(day)
+
+      if (adjustedDay !== Number(day)) {
+        setValue(DateName.day, adjustedDay)
+      }
+    }
+
+    if (year && month && day) {
+      const newDate = dt()
+        .year(Number(year))
+        .month(Number(month) - 1)
+        .date(Number(day))
+
+      if (newDate.isValid()) {
+        setValue(name, newDate.format("YYYY-MM-DD"), {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        })
+      }
+    }
+  }, [year, month, day, setValue, name, formState.isSubmitting])
+
  let dateValue = null
  try {
    /**
@@ -72,7 +99,9 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
     * date, but we can't check isNan since
     * we recieve the date as "1999-01-01"
     */
-    dateValue = dt(currentValue).isValid() ? parseDate(currentValue) : null
+    dateValue = dt(currentDateValue).isValid()
+      ? parseDate(currentDateValue)
+      : null
  } catch (error) {
    console.warn("Known error for parse date in DateSelect: ", error)
  }
@@ -81,6 +110,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
    <DatePicker
      aria-label={intl.formatMessage({ id: "Select date of birth" })}
      isRequired={!!registerOptions.required}
+      isInvalid={!formState.isValid}
      name={name}
      ref={field.ref}
      value={dateValue}
@@ -92,57 +122,60 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
            switch (segment.type) {
              case "day":
                return (
-                  <div className={styles.day}>
+                  <div
+                    className={`${styles.day} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                    <Select
                      aria-label={dayLabel}
                      items={days}
                      label={dayLabel}
-                      name={DateName.date}
-                      onSelect={createOnSelect(DateName.date)}
-                      placeholder="DD"
+                      name={DateName.day}
+                      onSelect={(key: Key) =>
+                        setValue(DateName.day, Number(key))
+                      }
+                      placeholder={dayLabel}
                      required
                      tabIndex={3}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                      value={segment.isPlaceholder ? undefined : segment.value}
                    />
                  </div>
                )
              case "month":
                return (
-                  <div className={styles.month}>
+                  <div
+                    className={`${styles.month} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                    <Select
                      aria-label={monthLabel}
                      items={months}
                      label={monthLabel}
                      name={DateName.month}
-                      onSelect={createOnSelect(DateName.month)}
-                      placeholder="MM"
+                      onSelect={(key: Key) =>
+                        setValue(DateName.month, Number(key))
+                      }
+                      placeholder={monthLabel}
                      required
                      tabIndex={2}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                      value={segment.isPlaceholder ? undefined : segment.value}
                    />
                  </div>
                )
              case "year":
                return (
-                  <div className={styles.year}>
+                  <div
+                    className={`${styles.year} ${fieldState.invalid ? styles.invalid : ""}`}
+                  >
                    <Select
                      aria-label={yearLabel}
                      items={years}
                      label={yearLabel}
                      name={DateName.year}
-                      onSelect={createOnSelect(DateName.year)}
-                      placeholder="YYYY"
+                      onSelect={(key: Key) =>
+                        setValue(DateName.year, Number(key))
+                      }
+                      placeholder={yearLabel}
                      required
                      tabIndex={1}
-                      defaultSelectedKey={
-                        segment.isPlaceholder ? undefined : segment.value
-                      }
                      value={segment.isPlaceholder ? undefined : segment.value}
                    />
                  </div>
@@ -154,6 +187,21 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
          }}
        </DateInput>
      </Group>
+      <ErrorMessage errors={formState.errors} name={field.name} />
    </DatePicker>
  )
 }
+
+function getDaysInMonth(year: number | null, month: number | null): number {
+  if (month === null) {
+    return 31
+  }
+
+  // If month is February and no year selected, return minimum.
+  if (month === 1 && !year) {
+    return 28
+  }
+
+  const yearToUse = year ?? new Date().getFullYear()
+  return dt(`${yearToUse}-${month + 1}-01`).daysInMonth()
+}
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -286,6 +286,7 @@
  "See all photos": "Se alle billeder",
  "See hotel details": "Se hoteloplysninger",
  "See less FAQ": "Se mindre FAQ",
+  "See on map": "Se på kort",
  "See room details": "Se værelsesdetaljer",
  "See rooms": "Se værelser",
  "Select a country": "Vælg et land",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -285,6 +285,7 @@
  "See all photos": "Alle Fotos ansehen",
  "See hotel details": "Hotelinformationen ansehen",
  "See less FAQ": "Weniger anzeigen FAQ",
+  "See on map": "Karte ansehen",
  "See room details": "Zimmerdetails ansehen",
  "See rooms": "Zimmer ansehen",
  "Select a country": "Wähle ein Land",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -299,6 +299,7 @@
  "See all photos": "See all photos",
  "See hotel details": "See hotel details",
  "See less FAQ": "See less FAQ",
+  "See on map": "See on map",
  "See room details": "See room details",
  "See rooms": "See rooms",
  "Select a country": "Select a country",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -287,6 +287,7 @@
  "See all photos": "Katso kaikki kuvat",
  "See hotel details": "Katso hotellin tiedot",
  "See less FAQ": "Katso vähemmän UKK",
+  "See on map": "Näytä kartalla",
  "See room details": "Katso huoneen tiedot",
  "See rooms": "Katso huoneet",
  "Select a country": "Valitse maa",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -284,6 +284,7 @@
  "See all photos": "Se alle bilder",
  "See hotel details": "Se hotellinformasjon",
  "See less FAQ": "Se mindre FAQ",
+  "See on map": "Se på kart",
  "See room details": "Se detaljer om rommet",
  "See rooms": "Se rom",
  "Select a country": "Velg et land",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -284,6 +284,7 @@
  "See all photos": "Se alla foton",
  "See hotel details": "Se hotellinformation",
  "See less FAQ": "See färre FAQ",
+  "See on map": "Se på karta",
  "See room details": "Se rumsdetaljer",
  "See rooms": "Se rum",
  "Select a country": "Välj ett land",
--- a/server/routers/hotels/query.ts
+++ b/server/routers/hotels/query.ts
@@ -332,6 +332,7 @@ export const hotelQueryRouter = router({
    ]

    return {
+      hotelId,
      hotelName: hotelAttributes.name,
      hotelDescription: hotelAttributes.hotelContent.texts.descriptions.short,
      hotelLocation: hotelAttributes.location,
--- a/stores/enter-details.ts
+++ b/stores/enter-details.ts
@@ -11,10 +11,9 @@ import {
 } from "@/components/HotelReservation/EnterDetails/Details/schema"
 import { getQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"

-import type { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
+import { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
 import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
-import type { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
-import { SidePeekEnum } from "@/types/components/hotelReservation/enterDetails/sidePeek"
+import { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
 import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"

@@ -28,7 +27,6 @@ interface EnterDetailsState {
  roomData: BookingData
  steps: StepEnum[]
  currentStep: StepEnum
-  activeSidePeek: SidePeekEnum | null
  isValid: Record<StepEnum, boolean>
  completeStep: (updatedData: Partial<EnterDetailsState["userData"]>) => void
  navigate: (
@@ -36,8 +34,6 @@ interface EnterDetailsState {
    updatedData?: Record<string, string | boolean | BreakfastPackage>
  ) => void
  setCurrentStep: (step: StepEnum) => void
-  openSidePeek: (key: SidePeekEnum | null) => void
-  closeSidePeek: () => void
 }

 export function initEditDetailsState(
@@ -139,10 +135,7 @@ export function initEditDetailsState(
          window.history.pushState({ step }, "", step + window.location.search)
        })
      ),
-    openSidePeek: (key) => set({ activeSidePeek: key }),
-    closeSidePeek: () => set({ activeSidePeek: null }),
    currentStep,
-    activeSidePeek: null,
    isValid,
    completeStep: (updatedData) =>
      set(
--- a/stores/sidepeek.ts
+++ b/stores/sidepeek.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+
+interface SidePeekState {
+  activeSidePeek: SidePeekEnum | null
+  hotelId: string | null
+  roomTypeCode: string | null
+  openSidePeek: ({
+    key,
+    hotelId,
+    roomTypeCode,
+  }: {
+    key: SidePeekEnum | null
+    hotelId: string
+    roomTypeCode?: string
+  }) => void
+  closeSidePeek: () => void
+}
+
+const useSidePeekStore = create<SidePeekState>((set) => ({
+  activeSidePeek: null,
+  hotelId: null,
+  roomTypeCode: null,
+  openSidePeek: ({ key, hotelId, roomTypeCode }) =>
+    set({ activeSidePeek: key, hotelId, roomTypeCode }),
+  closeSidePeek: () =>
+    set({ activeSidePeek: null, hotelId: null, roomTypeCode: null }),
+}))
+
+export default useSidePeekStore
--- a/types/components/hotelPage/room.ts
+++ b/types/components/hotelPage/room.ts
@@ -1,9 +1,11 @@
 import type { RoomData } from "@/types/hotel"

 export interface RoomCardProps {
+  hotelId: string
  room: RoomData
 }

 export type RoomsProps = {
+  hotelId: string
  rooms: RoomData[]
 }
--- a/types/components/hotelReservation/hotelSidePeek.ts
+++ b/types/components/hotelReservation/hotelSidePeek.ts
@@ -0,0 +1,8 @@
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { Hotel } from "@/types/hotel"
+
+export type HotelSidePeekProps = {
+  hotel: Hotel
+  activeSidePeek: SidePeekEnum
+  close: () => void
+}
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -12,4 +12,5 @@ export interface SelectHotelMapProps {
  coordinates: Coordinates
  pointsOfInterest: PointOfInterest[]
  mapId: string
+  isModal: boolean
 }
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/types/components/hotelReservation/selectRate/roomCard.ts
@@ -13,6 +13,7 @@ import type { RoomData } from "@/types/hotel"
 import type { RoomPackageCodes, RoomPackageData } from "./roomFilter"

 export type RoomCardProps = {
+  hotelId: string
  roomConfiguration: RoomConfiguration
  rateDefinitions: RateDefinition[]
  roomCategories: RoomData[]
--- a/types/components/hotelReservation/enterDetails/sidePeek.ts
+++ b/types/components/hotelReservation/enterDetails/sidePeek.ts
@@ -2,6 +2,7 @@ import { Hotel } from "@/types/hotel"

 export enum SidePeekEnum {
  hotelDetails = "hotel-detail-side-peek",
+  roomDetails = "room-detail-side-peek",
 }

 export type SidePeekProps = {
--- a/types/components/hotelReservation/toggleSidePeekProps.ts
+++ b/types/components/hotelReservation/toggleSidePeekProps.ts
@@ -0,0 +1,4 @@
+export type ToggleSidePeekProps = {
+  hotelId: string
+  roomTypeCode: string
+}
--- a/types/components/sidePeeks/roomSidePeek.ts
+++ b/types/components/sidePeeks/roomSidePeek.ts
@@ -1,6 +1,9 @@
+import { SidePeekEnum } from "../hotelReservation/sidePeek"
+
 import type { RoomData } from "@/types/hotel"

 export type RoomSidePeekProps = {
  room: RoomData
-  buttonSize: "small" | "medium"
+  activeSidePeek: SidePeekEnum | null
+  close: () => void
 }
--- a/utils/dateFormatting.ts
+++ b/utils/dateFormatting.ts
@@ -0,0 +1,15 @@
+import { Lang } from "@/constants/languages"
+
+/**
+ * Get the localized month name for a given month index and language
+ * @param monthIndex - The month index (1-12)
+ * @param lang - the language to use, Lang enum
+ * @returns The localized month name
+ */
+export function getLocalizedMonthName(monthIndex: number, lang: Lang) {
+  const monthName = new Date(2024, monthIndex - 1).toLocaleString(lang, {
+    month: "long",
+  })
+
+  return monthName.charAt(0).toUpperCase() + monthName.slice(1)
+}