Merge branch 'master' into feat/sw-929-release-preps

.env.test

@@ -44,6 +44,8 @@ GOOGLE_DYNAMIC_MAP_ID="test"
 HIDE_FOR_NEXT_RELEASE="true"
 SALESFORCE_PREFERENCE_BASE_URL="test"
 USE_NEW_REWARDS_ENDPOINT="true"
+
+TZ=UTC
 ENABLE_BOOKING_FLOW="false"
 ENABLE_BOOKING_WIDGET="false"
 ENABLE_BOOKING_WIDGET_HOTELRESERVATION_PATH="false"

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -10,7 +10,7 @@ import styles from "./page.module.css"
 
 import type { LangParams, PageArgs } from "@/types/params"
 
-export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadata } from "@/utils/generateMetadata"
 
 export default async function MyPages({
   params,

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -2,8 +2,8 @@ import { Suspense } from "react"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Sidebar from "@/components/MyPages/Sidebar"
+import Surprises from "@/components/MyPages/Surprises"
 
-// import Surprises from "@/components/MyPages/Surprises"
 import styles from "./layout.module.css"
 
 export default async function MyPagesLayout({
@@ -24,9 +24,7 @@ export default async function MyPagesLayout({
         </section>
       </section>
 
-      {/* TODO: Waiting on new API stuff
-        <Surprises />
-      */}
+      <Surprises />
     </div>
   )
 }

app/[lang]/(live)/(protected)/my-pages/profile/edit/page.tsx

@@ -1,5 +1,5 @@
 import ProfilePage from "../page"
 
-export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadata } from "@/utils/generateMetadata"
 
 export default ProfilePage

app/[lang]/(live)/(protected)/my-pages/profile/page.tsx

@@ -7,7 +7,7 @@ import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"
 
-export { generateMetadataAccountPage as generateMetadata } from "@/utils/generateMetadata"
+export { generateMetadata } from "@/utils/generateMetadata"
 
 export default async function ProfilePage({ params }: PageArgs<LangParams>) {
   setLang(params.lang)

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

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
-import BreadcrumbsSkeleton from "@/components/Breadcrumbs/BreadcrumbsSkeleton"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
 import { LangParams, PageArgs } from "@/types/params"

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 
 import { isSignupPage } from "@/constants/routes/signup"
 import { env } from "@/env/server"
+import { getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 import HotelPage from "@/components/ContentType/HotelPage"
 import LoyaltyPage from "@/components/ContentType/LoyaltyPage"
@@ -19,7 +20,7 @@ import {
 
 export { generateMetadata } from "@/utils/generateMetadata"
 
-export default function ContentTypePage({
+export default async function ContentTypePage({
   params,
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   setLang(params.lang)
@@ -57,7 +58,12 @@ export default function ContentTypePage({
       if (env.HIDE_FOR_NEXT_RELEASE) {
         return notFound()
       }
-      return <HotelPage />
+      const hotelPageData = await getHotelPage()
+      return hotelPageData ? (
+        <HotelPage hotelId={hotelPageData.hotel_page_id} />
+      ) : (
+        notFound()
+      )
     default:
       const type: never = params.contentType
       console.error(`Unsupported content type given: ${type}`)

app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx

@@ -1,6 +1,8 @@
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
-import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
+import Header from "@/components/HotelReservation/BookingConfirmation/Header"
+import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
+import Summary from "@/components/HotelReservation/BookingConfirmation/Summary"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -12,11 +14,12 @@ export default async function BookingConfirmationPage({
   searchParams,
 }: PageArgs<LangParams, { confirmationNumber: string }>) {
   setLang(params.lang)
-  const confirmationNumber = searchParams.confirmationNumber
-  void getBookingConfirmation(confirmationNumber)
+  void getBookingConfirmation(searchParams.confirmationNumber)
   return (
-    <main className={styles.main}>
-      <BookingConfirmation confirmationNumber={confirmationNumber} />
-    </main>
+    <div className={styles.main}>
+      <Header confirmationNumber={searchParams.confirmationNumber} />
+      <Rooms />
+      <Summary />
+    </div>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/layout.module.css

@@ -0,0 +1,3 @@
+.layout {
+  background-color: var(--Base-Background-Primary-Normal);
+}

app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/layout.tsx

@@ -0,0 +1,16 @@
+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 PaymentCallbackLayout({
+  children,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  if (env.HIDE_FOR_NEXT_RELEASE) {
+    return notFound()
+  }
+  return <div className={styles.layout}>{children}</div>
+}

app/[lang]/(live)/(public)/hotelreservation/(payment-callback)/payment-callback/page.tsx

@@ -0,0 +1,70 @@
+import { redirect } from "next/navigation"
+
+import {
+  BOOKING_CONFIRMATION_NUMBER,
+  PaymentErrorCodeEnum,
+} from "@/constants/booking"
+import { Lang } from "@/constants/languages"
+import {
+  bookingConfirmation,
+  payment,
+} from "@/constants/routes/hotelReservation"
+import { serverClient } from "@/lib/trpc/server"
+
+import PaymentCallback from "@/components/HotelReservation/EnterDetails/Payment/PaymentCallback"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function PaymentCallbackPage({
+  params,
+  searchParams,
+}: PageArgs<
+  LangParams,
+  { status: "error" | "success" | "cancel"; confirmationNumber?: string }
+>) {
+  console.log(`[payment-callback] callback started`)
+  const lang = params.lang
+  const status = searchParams.status
+  const confirmationNumber = searchParams.confirmationNumber
+
+  if (status === "success" && confirmationNumber) {
+    const confirmationUrl = `${bookingConfirmation(lang)}?${BOOKING_CONFIRMATION_NUMBER}=${confirmationNumber}`
+
+    console.log(`[payment-callback] redirecting to: ${confirmationUrl}`)
+    redirect(confirmationUrl)
+  }
+
+  const returnUrl = payment(lang)
+  const searchObject = new URLSearchParams()
+
+  if (confirmationNumber) {
+    try {
+      const bookingStatus = await serverClient().booking.status({
+        confirmationNumber,
+      })
+      if (bookingStatus.metadata) {
+        searchObject.set(
+          "errorCode",
+          bookingStatus.metadata.errorCode?.toString() ?? ""
+        )
+      }
+    } catch (error) {
+      console.error(
+        `[payment-callback] failed to get booking status for ${confirmationNumber}, status: ${status}`
+      )
+      if (status === "cancel") {
+        searchObject.set("errorCode", PaymentErrorCodeEnum.Cancelled.toString())
+      }
+      if (status === "error") {
+        searchObject.set("errorCode", PaymentErrorCodeEnum.Failed.toString())
+      }
+    }
+  }
+
+  return (
+    <PaymentCallback
+      returnUrl={returnUrl.toString()}
+      searchObject={searchObject}
+    />
+  )
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/@sidePeek/[...paths]/page.tsx

@@ -1 +1,21 @@
-export { default } from "../page"
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import SidePeek from "@/components/HotelReservation/SidePeek"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function HotelSidePeek({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { hotel: string }>) {
+  if (!searchParams.hotel) {
+    return <SidePeek hotel={null} />
+  }
+
+  const hotel = await getHotelData({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+  })
+
+  return <SidePeek hotel={hotel} />
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/@sidePeek/page.tsx

@@ -1,25 +1,3 @@
-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} />
+export default function HotelSidePeekSlot() {
+  return null
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation"
 
 import { env } from "@/env/server"
-import { getLocations } from "@/lib/trpc/memoizedRequests"
+import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
 
 import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
@@ -58,6 +58,10 @@ export default async function SelectHotelMapPage({
 
   const hotelPins = getHotelPins(hotels)
   const filterList = getFiltersFromHotels(hotels)
+  const cityCoordinates = await getCityCoordinates({
+    city: city.name,
+    hotel: { address: hotels[0].hotelData.address.streetAddress },
+  })
 
   return (
     <MapModal>
@@ -67,6 +71,7 @@ export default async function SelectHotelMapPage({
         mapId={googleMapId}
         hotels={hotels}
         filterList={filterList}
+        cityCoordinates={cityCoordinates}
       />
     </MapModal>
   )

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css

@@ -14,6 +14,10 @@
   padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
+.header nav {
+  display: none;
+}
+
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
@@ -65,13 +69,19 @@
       var(--Spacing-x5);
   }
 
+  .header nav {
+    display: block;
+    max-width: var(--max-width-navigation);
+    padding-left: 0;
+  }
+
   .sorter {
     display: block;
     width: 339px;
   }
 
   .title {
-    margin: 0 auto;
+    margin: var(--Spacing-x3) auto 0;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -1,6 +1,10 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import {
+  selectHotel,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
@@ -19,6 +23,8 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -45,8 +51,12 @@ export default async function SelectHotelPage({
     (location) =>
       location.name.toLowerCase() === searchParams.city.toLowerCase()
   )
+
   if (!city) return notFound()
 
+  const isCityWithCountry = (city: any): city is { country: string } =>
+    "country" in city
+
   const intl = await getIntl()
   const selectHotelParams = new URLSearchParams(searchParams)
   const selectHotelParamsObject =
@@ -65,12 +75,36 @@ export default async function SelectHotelPage({
   })
 
   const filterList = getFiltersFromHotels(hotels)
+  const breadcrumbs = [
+    {
+      title: intl.formatMessage({ id: "Home" }),
+      href: `/${params.lang}`,
+      uid: "home-page",
+    },
+    {
+      title: intl.formatMessage({ id: "Hotel reservation" }),
+      href: `/${params.lang}/hotelreservation`,
+      uid: "hotel-reservation",
+    },
+    {
+      title: intl.formatMessage({ id: "Select hotel" }),
+      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+      uid: "select-hotel",
+    },
+    {
+      title: city.name,
+      uid: city.id,
+    },
+  ]
 
   const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)
 
   return (
     <>
       <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </Suspense>
         <div className={styles.title}>
           <div className={styles.cityInformation}>
             <Subtitle>{city.name}</Subtitle>
@@ -94,6 +128,7 @@ export default async function SelectHotelPage({
               <div className={styles.mapContainer}>
                 <StaticMap
                   city={searchParams.city}
+                  country={isCityWithCountry(city) ? city.country : undefined}
                   width={340}
                   height={180}
                   zoomLevel={11}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/getValidDates.test.ts

@@ -0,0 +1,55 @@
+import { beforeAll, describe, expect, it } from "@jest/globals"
+
+import { getValidFromDate, getValidToDate } from "./getValidDates"
+
+const NOW = new Date("2020-10-01T00:00:00Z")
+let originalTz: string | undefined
+
+describe("getValidFromDate", () => {
+  beforeAll(() => {
+    jest.useFakeTimers({ now: NOW })
+  })
+
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  describe("getValidFromDate", () => {
+    it("returns today when empty string is provided", () => {
+      const actual = getValidFromDate("")
+      expect(actual.toISOString()).toBe("2020-10-01T00:00:00.000Z")
+    })
+
+    it("returns today when undefined is provided", () => {
+      const actual = getValidFromDate(undefined)
+      expect(actual.toISOString()).toBe("2020-10-01T00:00:00.000Z")
+    })
+
+    it("returns given date in utc", () => {
+      const actual = getValidFromDate("2024-01-01")
+      expect(actual.toISOString()).toBe("2024-01-01T00:00:00.000Z")
+    })
+  })
+
+  describe("getValidToDate", () => {
+    it("returns day after fromDate when empty string is provided", () => {
+      const actual = getValidToDate("", NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+
+    it("returns day after fromDate when undefined is provided", () => {
+      const actual = getValidToDate(undefined, NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+
+    it("returns given date in utc", () => {
+      const actual = getValidToDate("2024-01-01", NOW)
+      expect(actual.toISOString()).toBe("2024-01-01T00:00:00.000Z")
+    })
+
+    it("fallsback to day after fromDate when given date is before fromDate", () => {
+      const actual = getValidToDate("2020-09-30", NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+  })
+})

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/getValidDates.ts

@@ -0,0 +1,55 @@
+import { Dayjs } from "dayjs"
+
+import { dt } from "@/lib/dt"
+
+/**
+ * Get valid dates from stringFromDate and stringToDate making sure that they are not in the past and chronologically correct
+ * @example const { fromDate, toDate} = getValidDates("2021-01-01", "2021-01-02")
+ */
+export function getValidDates(
+  stringFromDate: string | undefined,
+  stringToDate: string | undefined
+): { fromDate: Dayjs; toDate: Dayjs } {
+  const fromDate = getValidFromDate(stringFromDate)
+  const toDate = getValidToDate(stringToDate, fromDate)
+
+  return { fromDate, toDate }
+}
+
+/**
+ * Get valid fromDate from stringFromDate making sure that it is not in the past
+ */
+export function getValidFromDate(stringFromDate: string | undefined): Dayjs {
+  const now = dt().utc()
+  if (!stringFromDate) {
+    return now
+  }
+  const toDate = dt(stringFromDate)
+
+  const yesterday = now.subtract(1, "day")
+  if (!toDate.isAfter(yesterday)) {
+    return now
+  }
+
+  return toDate
+}
+
+/**
+ * Get valid toDate from stringToDate making sure that it is after fromDate
+ */
+export function getValidToDate(
+  stringToDate: string | undefined,
+  fromDate: Dayjs | Date
+): Dayjs {
+  const tomorrow = dt().utc().add(1, "day")
+  if (!stringToDate) {
+    return tomorrow
+  }
+
+  const toDate = dt(stringToDate)
+  if (toDate.isAfter(fromDate)) {
+    return toDate
+  }
+
+  return tomorrow
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -1,22 +1,17 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
-import { dt } from "@/lib/dt"
-import {
-  getHotelData,
-  getLocations,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import { getHotelData, getLocations } from "@/lib/trpc/memoizedRequests"
 
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import Rooms from "@/components/HotelReservation/SelectRate/Rooms"
-import {
-  generateChildrenString,
-  getHotelReservationQueryParams,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { RoomsContainer } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainer"
+import { RoomsContainerSkeleton } from "@/components/HotelReservation/SelectRate/Rooms/RoomsContainerSkeleton"
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
+import { safeTry } from "@/utils/safeTry"
+
+import { getValidDates } from "./getValidDates"
 
-import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -45,71 +40,44 @@ export default async function SelectRatePage({
     return notFound()
   }
 
-  const validFromDate =
-    searchParams.fromDate &&
-    dt(searchParams.fromDate).isAfter(dt().subtract(1, "day"))
-      ? searchParams.fromDate
-      : dt().utc().format("YYYY-MM-DD")
-  const validToDate =
-    searchParams.toDate && dt(searchParams.toDate).isAfter(validFromDate)
-      ? searchParams.toDate
-      : dt().utc().add(1, "day").format("YYYY-MM-DD")
-  const adults = selectRoomParamsObject.room[0].adults || 1 // TODO: Handle multiple rooms
-  const childrenCount = selectRoomParamsObject.room[0].child?.length
-  const children = selectRoomParamsObject.room[0].child
-    ? generateChildrenString(selectRoomParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
-
-  const [hotelData, roomsAvailability, packages, user] = await Promise.all([
-    getHotelData({ hotelId: searchParams.hotel, language: params.lang }),
-    serverClient().hotel.availability.rooms({
-      hotelId: parseInt(searchParams.hotel, 10),
-      roomStayStartDate: validFromDate,
-      roomStayEndDate: validToDate,
-      adults,
-      children,
-    }),
-    serverClient().hotel.packages.get({
-      hotelId: searchParams.hotel,
-      startDate: searchParams.fromDate,
-      endDate: searchParams.toDate,
-      adults,
-      children: childrenCount,
-      packageCodes: [
-        RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-        RoomPackageCodeEnum.PET_ROOM,
-        RoomPackageCodeEnum.ALLERGY_ROOM,
-      ],
-    }),
-    getProfileSafely(),
-  ])
-
-  if (!roomsAvailability) {
-    return "No rooms found" // TODO: Add a proper error message
-  }
-
-  if (!hotelData) {
-    return "No hotel data found" // TODO: Add a proper error message
-  }
-
-  const roomCategories = hotelData?.included
-
-  const noRoomsAvailable = roomsAvailability.roomConfigurations.reduce(
-    (acc, room) => {
-      return acc && room.status === "NotAvailable"
-    },
-    true
+  const { fromDate, toDate } = getValidDates(
+    searchParams.fromDate,
+    searchParams.toDate
   )
 
+  const adults = selectRoomParamsObject.room[0].adults || 1 // TODO: Handle multiple rooms
+  const children = selectRoomParamsObject.room[0].child // TODO: Handle multiple rooms
+
+  const [hotelData, hotelDataError] = await safeTry(
+    getHotelData({ hotelId: searchParams.hotel, language: params.lang })
+  )
+
+  if (!hotelData && !hotelDataError) {
+    return notFound()
+  }
+
+  const hotelId = +searchParams.hotel
   return (
     <>
-      <HotelInfoCard hotelData={hotelData} noAvailability={noRoomsAvailable} />
-      <Rooms
-        roomsAvailability={roomsAvailability}
-        roomCategories={roomCategories ?? []}
-        user={user}
-        packages={packages ?? []}
+      <HotelInfoCard
+        hotelId={hotelId}
+        lang={params.lang}
+        fromDate={fromDate.toDate()}
+        toDate={toDate.toDate()}
+        adultCount={adults}
+        childArray={children}
       />
+
+      <Suspense key={hotelId} fallback={<RoomsContainerSkeleton />}>
+        <RoomsContainer
+          hotelId={hotelId}
+          lang={params.lang}
+          fromDate={fromDate.toDate()}
+          toDate={toDate.toDate()}
+          adultCount={adults}
+          childArray={children}
+        />
+      </Suspense>
     </>
   )
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/loading.tsx

@@ -1,5 +0,0 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
-
-export default function LoadingHotelHeader() {
-  return <LoadingSpinner />
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.module.css

@@ -1,64 +0,0 @@
-.header {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
-}
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x3);
-  justify-content: center;
-}
-
-.titleContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--Spacing-x1);
-}
-
-.descriptionContainer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.address {
-  display: flex;
-  gap: var(--Spacing-x-one-and-half);
-  font-style: normal;
-}
-
-.dividerContainer {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .header {
-    padding: var(--Spacing-x4) 0;
-  }
-
-  .wrapper {
-    flex-direction: row;
-    gap: var(--Spacing-x6);
-    margin: 0 auto;
-    /* simulates padding on viewport smaller than --max-width-navigation */
-    width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
-      var(--max-width-navigation)
-    );
-  }
-
-  .titleContainer > h1 {
-    white-space: nowrap;
-  }
-
-  .dividerContainer {
-    display: block;
-  }
-
-  .address {
-    gap: var(--Spacing-x3);
-  }
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.tsx

@@ -1,66 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { getHotelData } from "@/lib/trpc/memoizedRequests"
-
-import Divider from "@/components/TempDesignSystem/Divider"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
-
-import styles from "./page.module.css"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function HotelHeader({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { hotel: string }>) {
-  const home = `/${params.lang}`
-  if (!searchParams.hotel) {
-    redirect(home)
-  }
-  const hotelData = await getHotelData({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-  })
-  if (!hotelData?.data) {
-    redirect(home)
-  }
-
-  const intl = await getIntl()
-  const hotel = hotelData.data.attributes
-  return (
-    <header className={styles.header}>
-      <div className={styles.wrapper}>
-        <div className={styles.titleContainer}>
-          <Title as="h3" level="h1">
-            {hotel.name}
-          </Title>
-          <address className={styles.address}>
-            <Caption color="textMediumContrast">
-              {hotel.address.streetAddress}, {hotel.address.city}
-            </Caption>
-            <div>
-              <Divider variant="vertical" color="subtle" />
-            </div>
-            <Caption color="textMediumContrast">
-              {intl.formatMessage(
-                { id: "Distance in km to city centre" },
-                { number: hotel.location.distanceToCentre }
-              )}
-            </Caption>
-          </address>
-        </div>
-        <div className={styles.dividerContainer}>
-          <Divider variant="vertical" color="subtle" />
-        </div>
-        <div className={styles.descriptionContainer}>
-          <Body color="baseTextHighContrast">
-            {hotel.hotelContent.texts.descriptions.short}
-          </Body>
-        </div>
-      </div>
-    </header>
-  )
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/loading.tsx

@@ -1,5 +0,0 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
-
-export default function LoadingSummaryHeader() {
-  return <LoadingSpinner />
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.module.css

@@ -1,68 +0,0 @@
-.mobileSummary {
-  display: block;
-}
-
-.desktopSummary {
-  display: none;
-}
-
-.summary {
-  background-color: var(--Main-Grey-White);
-
-  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
-  border-style: solid;
-  border-width: 1px;
-  border-bottom: none;
-  z-index: 10;
-}
-
-.hider {
-  display: none;
-}
-
-.shadow {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .mobileSummary {
-    display: none;
-  }
-
-  .desktopSummary {
-    display: grid;
-    grid-template-rows: auto auto 1fr;
-    margin-top: calc(0px - var(--Spacing-x9));
-  }
-
-  .summary {
-    position: sticky;
-    top: calc(
-      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
-        var(--Spacing-x-half)
-    );
-    z-index: 10;
-    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
-    margin-top: calc(0px - var(--Spacing-x9));
-  }
-
-  .shadow {
-    display: block;
-    background-color: var(--Main-Grey-White);
-    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
-    border-style: solid;
-    border-left-width: 1px;
-    border-right-width: 1px;
-    border-top: none;
-    border-bottom: none;
-  }
-
-  .hider {
-    display: block;
-    background-color: var(--Scandic-Brand-Warm-White);
-    position: sticky;
-    top: calc(var(--booking-widget-desktop-height) - 6px);
-    margin-top: var(--Spacing-x4);
-    height: 40px;
-  }
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.tsx

@@ -1,136 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { selectRate } from "@/constants/routes/hotelReservation"
-import {
-  getPackages,
-  getProfileSafely,
-  getSelectedRoomAvailability,
-} from "@/lib/trpc/memoizedRequests"
-
-import Summary from "@/components/HotelReservation/EnterDetails/Summary"
-import { SummaryBottomSheet } from "@/components/HotelReservation/EnterDetails/Summary/BottomSheet"
-import {
-  generateChildrenString,
-  getQueryParamsForEnterDetails,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-
-import styles from "./page.module.css"
-
-import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
-import { LangParams, PageArgs, SearchParams } from "@/types/params"
-
-export default async function SummaryPage({
-  params,
-  searchParams,
-}: PageArgs<LangParams, SearchParams<SelectRateSearchParams>>) {
-  const selectRoomParams = new URLSearchParams(searchParams)
-  const { hotel, rooms, fromDate, toDate } =
-    getQueryParamsForEnterDetails(selectRoomParams)
-
-  const {
-    adults,
-    children,
-    roomTypeCode,
-    rateCode,
-    packages: packageCodes,
-  } = rooms[0] // TODO: Handle multiple rooms
-
-  const availability = await getSelectedRoomAvailability({
-    hotelId: hotel,
-    adults,
-    children: children ? generateChildrenString(children) : undefined,
-    roomStayStartDate: fromDate,
-    roomStayEndDate: toDate,
-    rateCode,
-    roomTypeCode,
-    packageCodes,
-  })
-  const user = await getProfileSafely()
-
-  const packages = packageCodes
-    ? await getPackages({
-        hotelId: hotel,
-        startDate: fromDate,
-        endDate: toDate,
-        adults,
-        children: children?.length,
-        packageCodes,
-      })
-    : null
-
-  if (!availability || !availability.selectedRoom) {
-    console.error("No hotel or availability data", availability)
-    // TODO: handle this case
-    redirect(selectRate(params.lang))
-  }
-
-  const prices =
-    user && availability.memberRate
-      ? {
-          local: {
-            price: availability.memberRate.localPrice.pricePerStay,
-            currency: availability.memberRate.localPrice.currency,
-          },
-          euro: availability.memberRate.requestedPrice
-            ? {
-                price: availability.memberRate.requestedPrice.pricePerStay,
-                currency: availability.memberRate.requestedPrice.currency,
-              }
-            : undefined,
-        }
-      : {
-          local: {
-            price: availability.publicRate.localPrice.pricePerStay,
-            currency: availability.publicRate.localPrice.currency,
-          },
-          euro: availability.publicRate?.requestedPrice
-            ? {
-                price: availability.publicRate?.requestedPrice.pricePerStay,
-                currency: availability.publicRate?.requestedPrice.currency,
-              }
-            : undefined,
-        }
-
-  return (
-    <>
-      <div className={styles.mobileSummary}>
-        <SummaryBottomSheet>
-          <div className={styles.summary}>
-            <Summary
-              showMemberPrice={!!(user && availability.memberRate)}
-              room={{
-                roomType: availability.selectedRoom.roomType,
-                localPrice: prices.local,
-                euroPrice: prices.euro,
-                adults,
-                children,
-                rateDetails: availability.rateDetails,
-                cancellationText: availability.cancellationText,
-                packages,
-              }}
-            />
-          </div>
-        </SummaryBottomSheet>
-      </div>
-      <div className={styles.desktopSummary}>
-        <div className={styles.hider} />
-        <div className={styles.summary}>
-          <Summary
-            showMemberPrice={!!(user && availability.memberRate)}
-            room={{
-              roomType: availability.selectedRoom.roomType,
-              localPrice: prices.local,
-              euroPrice: prices.euro,
-              adults,
-              children,
-              rateDetails: availability.rateDetails,
-              cancellationText: availability.cancellationText,
-              packages,
-            }}
-          />
-        </div>
-        <div className={styles.shadow} />
-      </div>
-    </>
-  )
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/_preload.ts

@@ -1,9 +0,0 @@
-import {
-  getCreditCardsSafely,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-
-export function preload() {
-  void getProfileSafely()
-  void getCreditCardsSafely()
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsLayout.css

@@ -1,45 +0,0 @@
-/** 
-  * Due to css import issues with parallel routes we are forced to 
-  * use a regular css file and import it in the page.tsx
-  * This is addressed in Next 15: https://github.com/vercel/next.js/pull/66300
-  */
-
-.enter-details-layout {
-  background-color: var(--Scandic-Brand-Warm-White);
-}
-
-.enter-details-layout__container {
-  display: grid;
-  gap: var(--Spacing-x3) var(--Spacing-x9);
-  /* simulates padding on viewport smaller than --max-width-navigation */
-}
-
-.enter-details-layout__content {
-  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
-}
-
-.enter-details-layout__summaryContainer {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-@media screen and (min-width: 1367px) {
-  .enter-details-layout__container {
-    grid-template-columns: 1fr 340px;
-    grid-template-rows: auto 1fr;
-    margin: var(--Spacing-x5) auto 0;
-    width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
-      var(--max-width-navigation)
-    );
-  }
-
-  .enter-details-layout__summaryContainer {
-    position: static;
-    display: grid;
-    grid-column: 2/3;
-    grid-row: 1/-1;
-  }
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/layout.tsx

@@ -1,39 +0,0 @@
-import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
-
-import { setLang } from "@/i18n/serverContext"
-import DetailsProvider from "@/providers/DetailsProvider"
-
-import { preload } from "./_preload"
-
-import type { LangParams, LayoutArgs } from "@/types/params"
-
-export default async function StepLayout({
-  children,
-  hotelHeader,
-  params,
-  summary,
-}: React.PropsWithChildren<
-  LayoutArgs<LangParams> & {
-    hotelHeader: React.ReactNode
-    summary: React.ReactNode
-  }
->) {
-  setLang(params.lang)
-  preload()
-
-  const user = await getProfileSafely()
-
-  return (
-    <DetailsProvider isMember={!!user}>
-      <main className="enter-details-layout__layout">
-        {hotelHeader}
-        <div className={"enter-details-layout__container"}>
-          <div className={"enter-details-layout__content"}>{children}</div>
-          <aside className={"enter-details-layout__summaryContainer"}>
-            {summary}
-          </aside>
-        </div>
-      </main>
-    </DetailsProvider>
-  )
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css

@@ -0,0 +1,35 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x3) var(--Spacing-x9);
+}
+
+.content {
+  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
+}
+
+.summary {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    grid-template-columns: 1fr 340px;
+    grid-template-rows: auto 1fr;
+    margin: var(--Spacing-x5) auto 0;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
+  .summary {
+    position: static;
+    display: grid;
+    grid-column: 2/3;
+    grid-row: 1/-1;
+  }
+}

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx

@@ -1,11 +1,11 @@
-import "./enterDetailsLayout.css"
-
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import {
   getBreakfastPackages,
   getCreditCardsSafely,
   getHotelData,
+  getPackages,
   getProfileSafely,
   getSelectedRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
@@ -13,16 +13,21 @@ import {
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HotelHeader from "@/components/HotelReservation/EnterDetails/Header"
 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 Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import {
   generateChildrenString,
   getQueryParamsForEnterDetails,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { getIntl } from "@/i18n"
-import StepsProvider from "@/providers/StepsProvider"
+import { setLang } from "@/i18n/serverContext"
+import EnterDetailsProvider from "@/providers/EnterDetailsProvider"
+
+import styles from "./page.module.css"
 
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { StepEnum } from "@/types/enums/step"
@@ -36,60 +41,78 @@ export default async function StepPage({
   params: { lang },
   searchParams,
 }: PageArgs<LangParams, SelectRateSearchParams & { step: StepEnum }>) {
+  if (!isValidStep(searchParams.step)) {
+    return notFound()
+  }
+  setLang(lang)
+
   const intl = await getIntl()
   const selectRoomParams = new URLSearchParams(searchParams)
+  // Deleting step to avoid double searchparams after rewrite
   selectRoomParams.delete("step")
-  const searchParamsString = selectRoomParams.toString()
+  const booking = getQueryParamsForEnterDetails(selectRoomParams)
+
   const {
     hotel: hotelId,
-    rooms,
+    rooms: [
+      { adults, children, roomTypeCode, rateCode, packages: packageCodes },
+    ], // TODO: Handle multiple rooms
     fromDate,
     toDate,
-  } = getQueryParamsForEnterDetails(selectRoomParams)
-
-  const {
-    adults,
-    children,
-    roomTypeCode,
-    rateCode,
-    packages: packageCodes,
-  } = rooms[0] // TODO: Handle multiple rooms
+  } = booking
 
   const childrenAsString = children && generateChildrenString(children)
-
   const breakfastInput = { adults, fromDate, hotelId, toDate }
-  void getBreakfastPackages(breakfastInput)
-  void getSelectedRoomAvailability({
-    hotelId,
+  const selectedRoomAvailabilityInput = {
     adults,
     children: childrenAsString,
+    hotelId,
+    packageCodes,
+    rateCode,
     roomStayStartDate: fromDate,
     roomStayEndDate: toDate,
-    rateCode,
     roomTypeCode,
-    packageCodes,
-  })
+  }
 
-  const roomAvailability = await getSelectedRoomAvailability({
-    hotelId,
-    adults,
-    children: childrenAsString,
-    roomStayStartDate: fromDate,
-    roomStayEndDate: toDate,
-    rateCode,
-    roomTypeCode,
-    packageCodes,
-  })
+  void getProfileSafely()
+  void getCreditCardsSafely()
+  void getBreakfastPackages(breakfastInput)
+  void getSelectedRoomAvailability(selectedRoomAvailabilityInput)
+  if (packageCodes?.length) {
+    void getPackages({
+      adults,
+      children: children?.length,
+      endDate: toDate,
+      hotelId,
+      packageCodes,
+      startDate: fromDate,
+    })
+  }
+
+  const packages = packageCodes
+    ? await getPackages({
+        adults,
+        children: children?.length,
+        endDate: toDate,
+        hotelId,
+        packageCodes,
+        startDate: fromDate,
+      })
+    : null
+
+  const roomAvailability = await getSelectedRoomAvailability(
+    selectedRoomAvailabilityInput
+  )
   const hotelData = await getHotelData({
     hotelId,
-    language: lang,
     isCardOnlyPayment: roomAvailability?.mustBeGuaranteed,
+    language: lang,
   })
   const breakfastPackages = await getBreakfastPackages(breakfastInput)
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
 
-  if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
+  if (!hotelData || !roomAvailability) {
     return notFound()
   }
 
@@ -121,66 +144,96 @@ export default async function StepPage({
     : undefined
 
   return (
-    <StepsProvider
+    <EnterDetailsProvider
       bedTypes={roomAvailability.bedTypes}
+      booking={booking}
       breakfastPackages={breakfastPackages}
-      isMember={!!user}
-      searchParams={searchParamsString}
+      packages={packages}
+      roomRate={{
+        memberRate: roomAvailability.memberRate,
+        publicRate: roomAvailability.publicRate,
+      }}
+      searchParamsStr={selectRoomParams.toString()}
       step={searchParams.step}
+      user={user}
     >
-      <section>
-        <HistoryStateManager />
-        <SelectedRoom
-          hotelId={hotelId}
-          room={roomAvailability.selectedRoom}
-          rateDescription={roomAvailability.cancellationText}
-        />
+      <main>
+        <HotelHeader hotelData={hotelData} />
+        <div className={styles.container}>
+          <div className={styles.content}>
+            <section>
+              <HistoryStateManager />
+              <SelectedRoom
+                hotelId={hotelId}
+                room={roomAvailability.selectedRoom}
+                rateDescription={roomAvailability.cancellationText}
+              />
 
-        {/* TODO: How to handle no beds found? */}
-        {roomAvailability.bedTypes ? (
-          <SectionAccordion
-            header={intl.formatMessage({ id: "Select bed" })}
-            step={StepEnum.selectBed}
-            label={intl.formatMessage({ id: "Request bedtype" })}
-          >
-            <BedType bedTypes={roomAvailability.bedTypes} />
-          </SectionAccordion>
-        ) : null}
+              {/* TODO: How to handle no beds found? */}
+              {roomAvailability.bedTypes ? (
+                <SectionAccordion
+                  header={intl.formatMessage({ id: "Select bed" })}
+                  label={intl.formatMessage({ id: "Request bedtype" })}
+                  step={StepEnum.selectBed}
+                >
+                  <BedType bedTypes={roomAvailability.bedTypes} />
+                </SectionAccordion>
+              ) : null}
 
-        {breakfastPackages?.length ? (
-          <SectionAccordion
-            header={intl.formatMessage({ id: "Food options" })}
-            step={StepEnum.breakfast}
-            label={intl.formatMessage({ id: "Select breakfast options" })}
-          >
-            <Breakfast packages={breakfastPackages} />
-          </SectionAccordion>
-        ) : null}
+              {breakfastPackages?.length ? (
+                <SectionAccordion
+                  header={intl.formatMessage({ id: "Food options" })}
+                  label={intl.formatMessage({ id: "Select breakfast options" })}
+                  step={StepEnum.breakfast}
+                >
+                  <Breakfast packages={breakfastPackages} />
+                </SectionAccordion>
+              ) : null}
 
-        <SectionAccordion
-          header={intl.formatMessage({ id: "Details" })}
-          step={StepEnum.details}
-          label={intl.formatMessage({ id: "Enter your details" })}
-        >
-          <Details user={user} memberPrice={memberPrice} />
-        </SectionAccordion>
+              <SectionAccordion
+                header={intl.formatMessage({ id: "Details" })}
+                step={StepEnum.details}
+                label={intl.formatMessage({ id: "Enter your details" })}
+              >
+                <Details user={user} memberPrice={memberPrice} />
+              </SectionAccordion>
 
-        <SectionAccordion
-          header={mustBeGuaranteed ? paymentGuarantee : payment}
-          step={StepEnum.payment}
-          label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
-        >
-          <Payment
-            roomPrice={roomPrice}
-            otherPaymentOptions={
-              hotelData.data.attributes.merchantInformationData
-                .alternatePaymentOptions
-            }
-            savedCreditCards={savedCreditCards}
-            mustBeGuaranteed={mustBeGuaranteed}
-          />
-        </SectionAccordion>
-      </section>
-    </StepsProvider>
+              <SectionAccordion
+                header={mustBeGuaranteed ? paymentGuarantee : payment}
+                step={StepEnum.payment}
+                label={
+                  mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod
+                }
+              >
+                <Suspense>
+                  <Payment
+                    user={user}
+                    roomPrice={roomPrice}
+                    otherPaymentOptions={
+                      hotelData.data.attributes.merchantInformationData
+                        .alternatePaymentOptions
+                    }
+                    savedCreditCards={savedCreditCards}
+                    mustBeGuaranteed={mustBeGuaranteed}
+                  />
+                </Suspense>
+              </SectionAccordion>
+            </section>
+          </div>
+          <aside className={styles.summary}>
+            <Summary
+              adults={adults}
+              fromDate={fromDate}
+              hotelId={hotelId}
+              kids={children}
+              packageCodes={packageCodes}
+              rateCode={rateCode}
+              roomTypeCode={roomTypeCode}
+              toDate={toDate}
+            />
+          </aside>
+        </div>
+      </main>
+    </EnterDetailsProvider>
   )
 }

app/[lang]/(live)/layout.tsx

@@ -9,6 +9,7 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import TokenRefresher from "@/components/Auth/TokenRefresher"
 import AdobeSDKScript from "@/components/Current/AdobeSDKScript"
 import VwoScript from "@/components/Current/VwoScript"
+import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import { preloadUserTracking } from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -64,6 +65,7 @@ export default async function RootLayout({
             {footer}
             <ToastHandler />
             <TokenRefresher />
+            <StorageCleaner />
           </TrpcProvider>
         </ServerIntlProvider>
       </body>

app/api/web/payment-callback/[lang]/[status]/route.ts

@@ -1,75 +0,0 @@
-import { NextRequest, NextResponse } from "next/server"
-
-import {
-  BOOKING_CONFIRMATION_NUMBER,
-  PaymentErrorCodeEnum,
-} from "@/constants/booking"
-import { Lang } from "@/constants/languages"
-import {
-  bookingConfirmation,
-  payment,
-} from "@/constants/routes/hotelReservation"
-import { serverClient } from "@/lib/trpc/server"
-import { getPublicURL } from "@/server/utils"
-
-export async function GET(
-  request: NextRequest,
-  { params }: { params: { lang: string; status: string } }
-): Promise<NextResponse> {
-  const publicURL = getPublicURL(request)
-
-  console.log(`[payment-callback] callback started`)
-  const lang = params.lang as Lang
-  const status = params.status
-
-  const queryParams = request.nextUrl.searchParams
-  const confirmationNumber = queryParams.get(BOOKING_CONFIRMATION_NUMBER)
-
-  if (status === "success" && confirmationNumber) {
-    const confirmationUrl = new URL(`${publicURL}/${bookingConfirmation(lang)}`)
-    confirmationUrl.searchParams.set(
-      BOOKING_CONFIRMATION_NUMBER,
-      confirmationNumber
-    )
-
-    console.log(`[payment-callback] redirecting to: ${confirmationUrl}`)
-    return NextResponse.redirect(confirmationUrl)
-  }
-
-  const returnUrl = new URL(`${publicURL}/${payment(lang)}`)
-  returnUrl.search = queryParams.toString()
-
-  if (confirmationNumber) {
-    try {
-      const bookingStatus = await serverClient().booking.status({
-        confirmationNumber,
-      })
-      if (bookingStatus.metadata) {
-        returnUrl.searchParams.set(
-          "errorCode",
-          bookingStatus.metadata.errorCode?.toString() ?? ""
-        )
-      }
-    } catch (error) {
-      console.error(
-        `[payment-callback] failed to get booking status for ${confirmationNumber}, status: ${status}`
-      )
-
-      if (status === "cancel") {
-        returnUrl.searchParams.set(
-          "errorCode",
-          PaymentErrorCodeEnum.Cancelled.toString()
-        )
-      }
-      if (status === "error") {
-        returnUrl.searchParams.set(
-          "errorCode",
-          PaymentErrorCodeEnum.Failed.toString()
-        )
-      }
-    }
-  }
-
-  console.log(`[payment-callback] redirecting to: ${returnUrl}`)
-  return NextResponse.redirect(returnUrl)
-}

app/api/web/revalidate/route.ts

@@ -29,6 +29,7 @@ const validateJsonBody = z.object({
         })
         .optional(),
       locale: z.nativeEnum(Lang),
+      publish_details: z.object({ locale: z.nativeEnum(Lang) }).optional(),
       uid: z.string(),
       url: z.string().optional(),
       page_settings: z
@@ -67,15 +68,19 @@ export async function POST(request: NextRequest) {
         data: { content_type, entry },
       },
     } = validatedData
-    const refsTag = generateRefsResponseTag(entry.locale, entry.uid)
-    const refTag = generateRefTag(entry.locale, content_type.uid, entry.uid)
-    const tag = generateTag(entry.locale, entry.uid)
+
+    // The publish_details.locale is the locale that the entry is published in, regardless if it is "localized" or not
+    const entryLocale = entry.publish_details?.locale ?? entry.locale
+
+    const refsTag = generateRefsResponseTag(entryLocale, entry.uid)
+    const refTag = generateRefTag(entryLocale, content_type.uid, entry.uid)
+    const tag = generateTag(entryLocale, entry.uid)
     const languageSwitcherTag = generateTag(
-      entry.locale,
+      entryLocale,
       entry.uid,
       languageSwitcherAffix
     )
-    const metadataTag = generateTag(entry.locale, entry.uid, metadataAffix)
+    const metadataTag = generateTag(entryLocale, entry.uid, metadataAffix)
 
     console.info(`Revalidating refsTag: ${refsTag}`)
     revalidateTag(refsTag)
@@ -94,12 +99,12 @@ export async function POST(request: NextRequest) {
 
     if (entry.breadcrumbs) {
       const breadcrumbsRefsTag = generateRefsResponseTag(
-        entry.locale,
+        entryLocale,
         entry.uid,
         breadcrumbsAffix
       )
       const breadcrumbsTag = generateTag(
-        entry.locale,
+        entryLocale,
         entry.uid,
         breadcrumbsAffix
       )
@@ -113,7 +118,7 @@ export async function POST(request: NextRequest) {
 
     if (entry.page_settings?.hide_booking_widget) {
       const bookingwidgetTag = generateTag(
-        entry.locale,
+        entryLocale,
         entry.uid,
         bookingwidgetAffix
       )

components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -14,7 +14,13 @@ export default async function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <div className={styles.titleContainer}>
-        <Title as="h4" level="h3" color="red" className={styles.title}>
+        <Title
+          as="h4"
+          level="h3"
+          color="red"
+          className={styles.title}
+          textAlign="center"
+        >
           {intl.formatMessage({ id: "You have no upcoming stays." })}
           <span className={styles.burgundyTitle}>
             {intl.formatMessage({ id: "Where should you go next?" })}

components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -14,7 +14,13 @@ export default async function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <div className={styles.titleContainer}>
-        <Title as="h4" level="h3" color="red" className={styles.title}>
+        <Title
+          as="h4"
+          level="h3"
+          color="red"
+          className={styles.title}
+          textAlign="center"
+        >
           {intl.formatMessage({ id: "You have no upcoming stays." })}
           <span className={styles.burgundyTitle}>
             {intl.formatMessage({ id: "Where should you go next?" })}

components/Breadcrumbs/index.tsx

@@ -1,60 +1,25 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import { ChevronRightSmallIcon,HouseIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
-
-import styles from "./breadcrumbs.module.css"
+import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs"
+import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
 
 export default async function Breadcrumbs() {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
+
   if (!breadcrumbs?.length) {
     return null
   }
+  const jsonSchema = generateBreadcrumbsSchema(breadcrumbs)
 
-  const homeBreadcrumb = breadcrumbs.shift()
   return (
-    <nav className={styles.breadcrumbs}>
-      <ul className={styles.list}>
-        {homeBreadcrumb ? (
-          <li className={styles.listItem}>
-            <Link
-              className={styles.homeLink}
-              color="peach80"
-              href={homeBreadcrumb.href!}
-              variant="breadcrumb"
-            >
-              <HouseIcon width={16} height={16} color="peach80" />
-            </Link>
-            <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
-          </li>
-        ) : null}
-
-        {breadcrumbs.map((breadcrumb) => {
-          if (breadcrumb.href) {
-            return (
-              <li key={breadcrumb.uid} className={styles.listItem}>
-                <Link
-                  color="peach80"
-                  href={breadcrumb.href}
-                  variant="breadcrumb"
-                >
-                  {breadcrumb.title}
-                </Link>
-                <ChevronRightSmallIcon aria-hidden="true" color="peach80" />
-              </li>
-            )
-          }
-
-          return (
-            <li key={breadcrumb.uid} className={styles.listItem}>
-              <Footnote color="burgundy" type="bold">
-                {breadcrumb.title}
-              </Footnote>
-            </li>
-          )
-        })}
-      </ul>
-    </nav>
+    <>
+      <script
+        type={jsonSchema.type}
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(jsonSchema.jsonLd),
+        }}
+      />
+      <BreadcrumbsComp breadcrumbs={breadcrumbs} />
+    </>
   )
 }

components/ContentType/ContentPage/HotelListingItem/index.tsx

@@ -8,6 +8,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 
@@ -47,7 +48,7 @@ export default async function HotelListingItem({
             <Caption color="uiTextPlaceholder">
               {intl.formatMessage(
                 { id: "Distance in km to city centre" },
-                { number: distanceToCentre }
+                { number: getSingleDecimal(distanceToCentre / 1000) }
               )}
             </Caption>
           </div>

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,7 +1,6 @@
 import { about } from "@/constants/routes/hotelPageParams"
 
-import { ChevronRightSmallIcon } from "@/components/Icons"
-import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -9,6 +8,7 @@ import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import getSingleDecimal from "@/utils/numberFormatting"
 
 import styles from "./introSection.module.css"
 
@@ -26,7 +26,7 @@ export default async function IntroSection({
   const { distanceToCentre } = location
   const formattedDistanceText = intl.formatMessage(
     { id: "Distance in km to city centre" },
-    { number: distanceToCentre }
+    { number: getSingleDecimal(distanceToCentre / 1000) }
   )
   const lang = getLang()
   const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`

components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx

@@ -60,13 +60,20 @@ export default function Sidebar({
     }
   }
 
-  function handleMouseEnter(poiName: string) {
+  function handleMouseEnter(poiName: string | undefined) {
+    if (!poiName) return
+
     if (!isClicking) {
       onActivePoiChange(poiName)
     }
   }
 
-  function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
+  function handlePoiClick(
+    poiName: string | undefined,
+    poiCoordinates: Coordinates
+  ) {
+    if (!poiName || !poiCoordinates) return
+
     setIsClicking(true)
     toggleFullScreenSidebar()
     onActivePoiChange(poiName)

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -113,7 +113,7 @@ export default function DynamicMap({
               activePoi={activePoi}
               hotelName={hotelName}
               pointsOfInterest={pointsOfInterest}
-              onActivePoiChange={setActivePoi}
+              onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
               coordinates={coordinates}
             />
             <InteractiveMap
@@ -121,7 +121,7 @@ export default function DynamicMap({
               coordinates={coordinates}
               pointsOfInterest={pointsOfInterest}
               activePoi={activePoi}
-              onActivePoiChange={setActivePoi}
+              onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
               mapId={mapId}
             />
           </Dialog>

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -1,24 +1,23 @@
 "use client"
 
+import Link from "next/link"
 import { useIntl } from "react-intl"
 
-import useSidePeekStore from "@/stores/sidepeek"
-
 import { ChevronRightSmallIcon } from "@/components/Icons"
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
+import { getRoomNameAsParam } from "../../utils"
+
 import styles from "./roomCard.module.css"
 
 import type { RoomCardProps } from "@/types/components/hotelPage/room"
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export function RoomCard({ hotelId, room }: RoomCardProps) {
+export function RoomCard({ room }: RoomCardProps) {
   const { images, name, roomSize, occupancy } = room
   const intl = useIntl()
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
 
   const size =
     roomSize?.min === roomSize?.max
@@ -51,21 +50,11 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
             )}
           </Body>
         </div>
-        <Button
-          intent="text"
-          type="button"
-          size="medium"
-          theme="base"
-          onClick={() =>
-            openSidePeek({
-              key: SidePeekEnum.roomDetails,
-              hotelId,
-              roomTypeCode: room.roomTypes[0].code,
-            })
-          }
-        >
-          {intl.formatMessage({ id: "See room details" })}
-          <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+        <Button intent="text" type="button" size="medium" theme="base" asChild>
+          <Link scroll={false} href={`?s=${getRoomNameAsParam(name)}`}>
+            {intl.formatMessage({ id: "See room details" })}
+            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+          </Link>
         </Button>
       </div>
     </article>

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({ hotelId, rooms }: RoomsProps) {
+export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
   const showToggleButton = rooms.length > 3
   const [allRoomsVisible, setAllRoomsVisible] = useState(!showToggleButton)
@@ -45,7 +45,7 @@ export function Rooms({ hotelId, rooms }: RoomsProps) {
       >
         {rooms.map((room) => (
           <div key={room.id}>
-            <RoomCard hotelId={hotelId} room={room} />
+            <RoomCard room={room} />
           </div>
         ))}
       </Grids.Stackable>

components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/contactInformation.module.css

@@ -0,0 +1,48 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.information {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--Spacing-x2);
+  grid-template-areas:
+    "address drivingDirections"
+    "contact socials"
+    "email email"
+    "ecoLabel ecoLabel";
+}
+
+.address {
+  grid-area: address;
+}
+
+.drivingDirections {
+  grid-area: drivingDirections;
+}
+
+.contact {
+  grid-area: contact;
+}
+
+.socials {
+  grid-area: socials;
+}
+
+.socialIcons {
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}
+
+.email {
+  grid-area: email;
+}
+
+.ecoLabel {
+  grid-area: ecoLabel;
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+}

components/ContentType/HotelPage/SidePeeks/AboutTheHotel/ContactInformation/index.tsx

@@ -0,0 +1,120 @@
+import { FacebookIcon, InstagramIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./contactInformation.module.css"
+
+import type { ContactInformationProps } from "@/types/components/hotelPage/sidepeek/contactInformation"
+
+export default async function ContactInformation({
+  hotelAddress,
+  coordinates,
+  contact,
+  socials,
+  ecoLabels,
+}: ContactInformationProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+
+  const { latitude, longitude } = coordinates
+  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`
+
+  return (
+    <div className={styles.wrapper}>
+      <Subtitle color="burgundy" asChild>
+        <Title level="h3">
+          {intl.formatMessage({ id: "Practical information" })}
+        </Title>
+      </Subtitle>
+      <div className={styles.information}>
+        <div className={styles.address}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Address" })}
+          </Body>
+          <Body color="uiTextHighContrast">{hotelAddress.streetAddress}</Body>
+          <Body color="uiTextHighContrast">{hotelAddress.city}</Body>
+        </div>
+        <div className={styles.drivingDirections}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Driving directions" })}
+          </Body>
+          <Link
+            href={directionsUrl}
+            target="_blank"
+            color="peach80"
+            textDecoration="underline"
+          >
+            Google Maps
+          </Link>
+        </div>
+        <div className={styles.contact}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Contact us" })}
+          </Body>
+          <Body>
+            <Link
+              href={`tel:+${contact.phoneNumber}`}
+              color="peach80"
+              textDecoration="underline"
+            >
+              {contact.phoneNumber}
+            </Link>
+          </Body>
+        </div>
+        <div className={styles.socials}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Follow us" })}
+          </Body>
+          <div className={styles.socialIcons}>
+            {socials.instagram && (
+              <Link href={socials.instagram}>
+                <InstagramIcon color="burgundy" />
+              </Link>
+            )}
+            {socials.facebook && (
+              <Link href={socials.facebook}>
+                <FacebookIcon color="burgundy" />
+              </Link>
+            )}
+          </div>
+        </div>
+        <div className={styles.email}>
+          <Body textTransform="bold">
+            {intl.formatMessage({ id: "Email" })}
+          </Body>
+          <Link
+            href={`mailto:${contact.email}`}
+            color="peach80"
+            textDecoration="underline"
+          >
+            {contact.email}
+          </Link>
+        </div>
+        {ecoLabels.nordicEcoLabel && (
+          <div className={styles.ecoLabel}>
+            <Image
+              height={38}
+              width={38}
+              alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+              src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
+            />
+            <div>
+              <Caption color="uiTextPlaceholder">
+                {intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
+              </Caption>
+              <Caption color="uiTextPlaceholder">
+                {ecoLabels.svanenEcoLabelCertificateNumber}
+              </Caption>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

components/ContentType/HotelPage/SidePeeks/AboutTheHotel/aboutTheHotel.module.css

@@ -0,0 +1,5 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+}

components/ContentType/HotelPage/SidePeeks/AboutTheHotel/index.tsx

@@ -0,0 +1,46 @@
+import { about } from "@/constants/routes/hotelPageParams"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import ContactInformation from "./ContactInformation"
+
+import styles from "./aboutTheHotel.module.css"
+
+import type { AboutTheHotelSidePeekProps } from "@/types/components/hotelPage/sidepeek/aboutTheHotel"
+
+export default async function AboutTheHotelSidePeek({
+  hotelAddress,
+  coordinates,
+  contact,
+  socials,
+  ecoLabels,
+  descriptions,
+}: AboutTheHotelSidePeekProps) {
+  const lang = getLang()
+  const intl = await getIntl()
+
+  return (
+    <SidePeek
+      contentKey={about[lang]}
+      title={intl.formatMessage({ id: "About the hotel" })}
+    >
+      <section className={styles.wrapper}>
+        <ContactInformation
+          hotelAddress={hotelAddress}
+          coordinates={coordinates}
+          contact={contact}
+          socials={socials}
+          ecoLabels={ecoLabels}
+        />
+        <Divider color="baseSurfaceSutbleHover" />
+        <Preamble>{descriptions.descriptions.medium}</Preamble>
+        <Body>{descriptions.facilityInformation}</Body>
+      </section>
+    </SidePeek>
+  )
+}

components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -0,0 +1,118 @@
+import Link from "next/link"
+
+import ImageGallery from "@/components/ImageGallery"
+import { getBedIcon } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
+import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
+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 { getIntl } from "@/i18n"
+
+import { getRoomNameAsParam } from "../../utils"
+
+import styles from "./room.module.css"
+
+import type { RoomSidePeekProps } from "@/types/components/hotelPage/sidepeek/room"
+
+export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
+  const intl = await getIntl()
+  const { roomSize, occupancy, descriptions, images } = room
+  const roomDescription = descriptions.medium
+  const totalOccupancy = occupancy.total
+  // TODO: Not defined where this should lead.
+  const ctaUrl = ""
+
+  return (
+    <SidePeek contentKey={getRoomNameAsParam(room.name)} title={room.name}>
+      <div className={styles.content}>
+        <div className={styles.innerContent}>
+          <Body color="baseTextMediumContrast">
+            {roomSize.min === roomSize.max
+              ? roomSize.min
+              : `${roomSize.min} - ${roomSize.max}`}
+            m².{" "}
+            {intl.formatMessage(
+              { id: "booking.accommodatesUpTo" },
+              { nrOfGuests: totalOccupancy }
+            )}
+          </Body>
+          <div className={styles.imageContainer}>
+            <ImageGallery images={images} title={room.name} height={280} />
+          </div>
+          <Body color="uiTextHighContrast">{roomDescription}</Body>
+        </div>
+
+        <div className={styles.innerContent}>
+          <Subtitle type="two" color="uiTextHighContrast" asChild>
+            <h3>
+              {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })}
+            </h3>
+          </Subtitle>
+          <ul className={styles.facilityList}>
+            {room.roomFacilities
+              .sort((a, b) => a.sortOrder - b.sortOrder)
+              .map((facility) => {
+                const Icon = getFacilityIcon(facility.icon)
+                return (
+                  <li className={styles.listItem} key={facility.name}>
+                    {Icon && (
+                      <Icon
+                        width={24}
+                        height={24}
+                        color="uiTextMediumContrast"
+                      />
+                    )}
+                    <Body
+                      asChild
+                      className={!Icon ? styles.noIcon : undefined}
+                      color="uiTextMediumContrast"
+                    >
+                      <span>{facility.name}</span>
+                    </Body>
+                  </li>
+                )
+              })}
+          </ul>
+        </div>
+
+        <div className={styles.innerContent}>
+          <Subtitle type="two" color="uiTextHighContrast" asChild>
+            <h3>{intl.formatMessage({ id: "booking.bedOptions" })}</h3>
+          </Subtitle>
+          <Body color="grey">
+            {intl.formatMessage({ id: "booking.basedOnAvailability" })}
+          </Body>
+          <ul className={styles.bedOptions}>
+            {room.roomTypes.map((roomType) => {
+              const BedIcon = getBedIcon(roomType.mainBed.type)
+              return (
+                <li className={styles.listItem} key={roomType.code}>
+                  {BedIcon && (
+                    <BedIcon
+                      color="uiTextMediumContrast"
+                      width={24}
+                      height={24}
+                    />
+                  )}
+                  <Body color="uiTextMediumContrast" asChild>
+                    <span>{roomType.mainBed.description}</span>
+                  </Body>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+      {ctaUrl && (
+        <div className={styles.buttonContainer}>
+          <Button fullWidth theme="base" intent="primary" asChild>
+            <Link href={ctaUrl}>
+              {intl.formatMessage({ id: "booking.selectRoom" })}
+            </Link>
+          </Button>
+        </div>
+      )}
+    </SidePeek>
+  )
+}

components/ContentType/HotelPage/SidePeeks/Room/room.module.css

@@ -0,0 +1,48 @@
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+  position: relative;
+  margin-bottom: calc(
+    var(--Spacing-x4) * 2 + 80px
+  ); /* Creates space between the wrapper and buttonContainer */
+}
+.innerContent {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.imageContainer {
+  position: relative;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+}
+
+.facilityList {
+  column-count: 2;
+  column-gap: var(--Spacing-x2);
+}
+
+.bedOptions {
+  display: flex;
+  flex-direction: column;
+}
+
+.listItem {
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin-bottom: var(--Spacing-x-half);
+}
+
+.noIcon {
+  margin-left: var(--Spacing-x4);
+}
+
+.buttonContainer {
+  background-color: var(--Base-Background-Primary-Normal);
+  border-top: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}

components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx

@@ -16,7 +16,7 @@ export default async function Facility({ data }: FacilityProps) {
 
   return (
     <div className={styles.content}>
-      {image.imageSizes.medium && (
+      {image?.imageSizes.medium && (
         <Image
           src={image.imageSizes.medium}
           alt={image.metaData.altText || ""}

components/ContentType/HotelPage/SidePeeks/index.ts

@@ -0,0 +1,3 @@
+export { default as AboutTheHotelSidePeek } from "./AboutTheHotel"
+export { default as RoomSidePeek } from "./Room"
+export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise"

components/ContentType/HotelPage/data.ts

@@ -14,8 +14,8 @@ const facilityToIconMap: Record<FacilityEnum, IconName> = {
   [FacilityEnum.GymTrainingFacilities]: IconName.Fitness,
   [FacilityEnum.KeyAccessOnlyToHealthClubGym]: IconName.Fitness,
   [FacilityEnum.FreeWiFi]: IconName.Wifi,
-  [FacilityEnum.MeetingRooms]: IconName.People2,
-  [FacilityEnum.MeetingConferenceFacilities]: IconName.People2,
+  [FacilityEnum.MeetingRooms]: IconName.Business,
+  [FacilityEnum.MeetingConferenceFacilities]: IconName.Business,
   [FacilityEnum.PetFriendlyRooms]: IconName.Pets,
   [FacilityEnum.Sauna]: IconName.Sauna,
   [FacilityEnum.Restaurant]: IconName.Restaurant,

components/ContentType/HotelPage/index.tsx

@@ -1,77 +1,128 @@
-import hotelPageParams from "@/constants/routes/hotelPageParams"
+import { notFound } from "next/navigation"
+
+import {
+  activities,
+  amenities,
+  meetingsAndConferences,
+  restaurantAndBar,
+} from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
-import { serverClient } from "@/lib/trpc/server"
+import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 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"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { getRestaurantHeading } from "@/utils/facilityCards"
+import { generateHotelSchema } from "@/utils/jsonSchemas"
 
 import DynamicMap from "./Map/DynamicMap"
 import MapCard from "./Map/MapCard"
 import MapWithCardWrapper from "./Map/MapWithCard"
 import MobileMapToggle from "./Map/MobileMapToggle"
 import StaticMap from "./Map/StaticMap"
-import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise"
 import AmenitiesList from "./AmenitiesList"
 import Facilities from "./Facilities"
 import IntroSection from "./IntroSection"
 import PreviewImages from "./PreviewImages"
 import { Rooms } from "./Rooms"
+import {
+  AboutTheHotelSidePeek,
+  RoomSidePeek,
+  WellnessAndExerciseSidePeek,
+} from "./SidePeeks"
 import TabNavigation from "./TabNavigation"
 
 import styles from "./hotelPage.module.css"
 
+import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
+import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
+import type { Facility } from "@/types/hotel"
 
-export default async function HotelPage() {
-  const intl = await getIntl()
+export default async function HotelPage({ hotelId }: HotelPageProps) {
   const lang = getLang()
+  const [intl, hotelPageData, hotelData] = await Promise.all([
+    getIntl(),
+    getHotelPage(),
+    getHotelData({ hotelId, language: lang }),
+  ])
   const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
   const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const hotelData = await serverClient().hotel.get()
-  if (!hotelData) {
-    return null
+
+  if (!hotelData?.data || !hotelPageData) {
+    return notFound()
   }
 
+  const jsonSchema = generateHotelSchema(hotelData.data.attributes)
+  const { faq, content } = hotelPageData
   const {
-    hotelId,
-    hotelName,
-    hotelDescription,
-    hotelLocation,
-    hotelAddress,
-    hotelRatings,
-    hotelDetailedFacilities,
-    hotelImages,
-    roomCategories,
-    activitiesCard,
+    name,
+    address,
     pointsOfInterest,
-    facilities,
-    faq,
-    alerts,
+    gallery,
+    specialAlerts,
+    healthAndWellness,
+    restaurantImages,
+    conferencesAndMeetings,
+    hotelContent,
+    detailedFacilities,
     healthFacilities,
-  } = hotelData
+    contactInformation,
+    socialMedia,
+    hotelFacts,
+    location,
+    ratings,
+  } = hotelData.data.attributes
+  const roomCategories =
+    hotelData.included?.filter((item) => item.type === "roomcategories") || []
+  const images = gallery?.smallerImages
+  const description = hotelContent.texts.descriptions.short
+  const activitiesCard = content?.[0]?.upcoming_activities_card || null
+
+  const facilities: Facility[] = [
+    {
+      ...restaurantImages,
+      id: FacilityCardTypeEnum.restaurant,
+      headingText: restaurantImages?.headingText ?? "",
+      heroImages: restaurantImages?.heroImages ?? [],
+    },
+    {
+      ...conferencesAndMeetings,
+      id: FacilityCardTypeEnum.conference,
+      headingText: conferencesAndMeetings?.headingText ?? "",
+      heroImages: conferencesAndMeetings?.heroImages ?? [],
+    },
+    {
+      ...healthAndWellness,
+      id: FacilityCardTypeEnum.wellness,
+      headingText: healthAndWellness?.headingText ?? "",
+      heroImages: healthAndWellness?.heroImages ?? [],
+    },
+  ]
 
   const topThreePois = pointsOfInterest.slice(0, 3)
 
   const coordinates = {
-    lat: hotelLocation.latitude,
-    lng: hotelLocation.longitude,
+    lat: location.latitude,
+    lng: location.longitude,
   }
 
   return (
     <div className={styles.pageContainer}>
+      <script
+        type={jsonSchema.type}
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(jsonSchema.jsonLd),
+        }}
+      />
       <div className={styles.hotelImages}>
-        {hotelImages?.length && (
-          <PreviewImages images={hotelImages} hotelName={hotelName} />
-        )}
+        {images?.length && <PreviewImages images={images} hotelName={name} />}
       </div>
       <TabNavigation
-        restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
+        restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={!!activitiesCard}
         hasFAQ={!!faq.accordions.length}
       />
@@ -79,18 +130,18 @@ export default async function HotelPage() {
         <div id={HotelHashValues.overview} className={styles.overview}>
           <div className={styles.introContainer}>
             <IntroSection
-              hotelName={hotelName}
-              hotelDescription={hotelDescription}
-              location={hotelLocation}
-              address={hotelAddress}
-              tripAdvisor={hotelRatings?.tripAdvisor}
+              hotelName={name}
+              hotelDescription={description}
+              location={location}
+              address={address}
+              tripAdvisor={ratings?.tripAdvisor}
             />
 
-            <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+            <AmenitiesList detailedFacilities={detailedFacilities} />
           </div>
-          {alerts.length ? (
+          {specialAlerts.length ? (
             <div className={styles.alertsContainer}>
-              {alerts.map((alert) => (
+              {specialAlerts.map((alert) => (
                 <Alert
                   key={alert.id}
                   type={alert.type}
@@ -101,7 +152,7 @@ export default async function HotelPage() {
             </div>
           ) : null}
         </div>
-        <Rooms hotelId={hotelId} rooms={roomCategories} />
+        <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} activitiesCard={activitiesCard} />
         {faq.accordions.length > 0 && (
           <AccordionSection accordion={faq.accordions} title={faq.title} />
@@ -111,14 +162,14 @@ export default async function HotelPage() {
         <>
           <aside className={styles.mapContainer}>
             <MapWithCardWrapper>
-              <StaticMap coordinates={coordinates} hotelName={hotelName} />
-              <MapCard hotelName={hotelName} pois={topThreePois} />
+              <StaticMap coordinates={coordinates} hotelName={name} />
+              <MapCard hotelName={name} pois={topThreePois} />
             </MapWithCardWrapper>
           </aside>
           <MobileMapToggle />
           <DynamicMap
             apiKey={googleMapsApiKey}
-            hotelName={hotelName}
+            hotelName={name}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             mapId={googleMapId}
@@ -126,22 +177,23 @@ export default async function HotelPage() {
         </>
       ) : null}
       <SidePeekProvider>
-        {/* eslint-disable import/no-named-as-default-member */}
         <SidePeek
-          contentKey={hotelPageParams.amenities[lang]}
+          contentKey={amenities[lang]}
           title={intl.formatMessage({ id: "Amenities" })}
         >
           {/* TODO: Render amenities as per the design. */}
           Read more about the amenities here
         </SidePeek>
+        <AboutTheHotelSidePeek
+          hotelAddress={address}
+          coordinates={location}
+          contact={contactInformation}
+          socials={socialMedia}
+          ecoLabels={hotelFacts.ecoLabels}
+          descriptions={hotelContent.texts}
+        />
         <SidePeek
-          contentKey={hotelPageParams.about[lang]}
-          title={intl.formatMessage({ id: "Read more about the hotel" })}
-        >
-          Some additional information about the hotel
-        </SidePeek>
-        <SidePeek
-          contentKey={hotelPageParams.restaurantAndBar[lang]}
+          contentKey={restaurantAndBar[lang]}
           title={intl.formatMessage({ id: "Restaurant & Bar" })}
         >
           {/* TODO */}
@@ -152,22 +204,23 @@ export default async function HotelPage() {
           buttonUrl="#"
         />
         <SidePeek
-          contentKey={hotelPageParams.activities[lang]}
+          contentKey={activities[lang]}
           title={intl.formatMessage({ id: "Activities" })}
         >
           {/* TODO */}
           Activities
         </SidePeek>
         <SidePeek
-          contentKey={hotelPageParams.meetingsAndConferences[lang]}
+          contentKey={meetingsAndConferences[lang]}
           title={intl.formatMessage({ id: "Meetings & Conferences" })}
         >
           {/* TODO */}
           Meetings & Conferences
         </SidePeek>
-        {/* eslint-enable import/no-named-as-default-member */}
+        {roomCategories.map((room) => (
+          <RoomSidePeek key={room.name} room={room} />
+        ))}
       </SidePeekProvider>
-      <HotelReservationSidePeek hotel={null} />
     </div>
   )
 }

components/ContentType/HotelPage/utils.ts

@@ -0,0 +1,3 @@
+export function getRoomNameAsParam(roomName: string) {
+  return roomName.replace(/[()]/g, "").replaceAll(" ", "-").toLowerCase()
+}

components/DatePicker/index.tsx

@@ -33,9 +33,18 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
 
   const [isSelectingFrom, setIsSelectingFrom] = useState(true)
 
-  function close() {
+  const close = useCallback(() => {
+    if (!selectedDate.toDate) {
+      setValue(name, {
+        fromDate: selectedDate.fromDate,
+        toDate: dt(selectedDate.fromDate).add(1, "day").format("YYYY-MM-DD"),
+      })
+
+      setIsSelectingFrom(true)
+    }
+
     setIsOpen(false)
-  }
+  }, [name, setValue, selectedDate])
 
   function showOnFocus() {
     setIsOpen(true)
@@ -72,19 +81,10 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const closeIfOutside = useCallback(
     (target: HTMLElement) => {
       if (ref.current && target && !ref.current.contains(target)) {
-        if (!selectedDate.toDate) {
-          setValue(name, {
-            fromDate: selectedDate.fromDate,
-            toDate: dt(selectedDate.fromDate)
-              .add(1, "day")
-              .format("YYYY-MM-DD"),
-          })
-          setIsSelectingFrom(true)
-        }
-        setIsOpen(false)
+        close()
       }
     },
-    [setIsOpen, setValue, setIsSelectingFrom, selectedDate, name, ref]
+    [close, ref]
   )
 
   function closeOnBlur(evt: FocusEvent) {

components/Footer/Details/details.module.css

@@ -40,6 +40,7 @@
     content: "·";
     margin-left: var(--Spacing-x1);
   }
+
   &:last-child {
     &::after {
       content: "";
@@ -56,12 +57,14 @@
   .details {
     padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4);
   }
+
   .bottomContainer {
     border-top: 1px solid var(--Base-Text-Medium-contrast);
     padding-top: var(--Spacing-x2);
     flex-direction: row;
     align-items: center;
   }
+
   .navigationContainer {
     border-bottom: 0;
     padding-bottom: 0;

components/Footer/Navigation/MainNav/mainnav.module.css

@@ -9,9 +9,11 @@
 .mainNavigationItem {
   padding: var(--Spacing-x3) 0;
   border-bottom: 1px solid var(--Base-Border-Normal);
+
   &:first-child {
     padding-top: 0;
   }
+
   &:last-child {
     border-bottom: 0;
   }

components/Forms/Signup/index.tsx

@@ -66,11 +66,13 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
         zipCode: "",
       },
       password: "",
+      termsAccepted: false,
     },
     mode: "all",
     criteriaMode: "all",
     resolver: zodResolver(signUpSchema),
     reValidateMode: "onChange",
+    shouldFocusError: true,
   })
 
   async function onSubmit(data: SignUpSchema) {
@@ -145,7 +147,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
             </header>
             <NewPassword
               name="password"
-              placeholder="Password"
               label={intl.formatMessage({ id: "Password" })}
             />
           </section>
@@ -157,17 +158,21 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
             </header>
             <Checkbox name="termsAccepted" registerOptions={{ required: true }}>
               <Body>
-                {intl.formatMessage({
-                  id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
-                })}{" "}
-                <Link
-                  variant="underscored"
-                  color="peach80"
-                  target="_blank"
-                  href={privacyPolicy[lang]}
-                >
-                  {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
-                </Link>
+                {intl.formatMessage<React.ReactNode>(
+                  { id: "signupPage.terms" },
+                  {
+                    termsLink: (str) => (
+                      <Link
+                        variant="underscored"
+                        color="peach80"
+                        target="_blank"
+                        href={privacyPolicy[lang]}
+                      >
+                        {str}
+                      </Link>
+                    ),
+                  }
+                )}
               </Body>
             </Checkbox>
           </section>
@@ -181,7 +186,7 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
           {!methods.formState.isValid ? (
             <Button
               className={styles.signUpButton}
-              type="button"
+              type="submit"
               theme="base"
               intent="primary"
               onClick={() => methods.trigger()}

components/HotelReservation/BookingConfirmation/Actions/actions.module.css

@@ -1,34 +0,0 @@
-.actions {
-  background-color: var(--Base-Surface-Subtle-Normal);
-  border-radius: var(--Corner-radius-Medium);
-  display: grid;
-  grid-area: actions;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-}
-
-@media screen and (max-width: 767px) {
-  .actions {
-    & > button[class*="btn"][class*="icon"][class*="small"] {
-      border-bottom: 1px solid var(--Base-Border-Subtle);
-      border-radius: 0;
-      justify-content: space-between;
-
-      &:last-of-type {
-        border-bottom: none;
-      }
-
-      & > svg {
-        order: 2;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .actions {
-    gap: var(--Spacing-x1);
-    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
-    justify-content: center;
-    padding: var(--Spacing-x1) var(--Spacing-x3);
-  }
-}

components/HotelReservation/BookingConfirmation/Header/Actions/actions.module.css

@@ -0,0 +1,15 @@
+.actions {
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  grid-area: actions;
+}
+
+@media screen and (min-width: 768px) {
+  .actions {
+    gap: var(--Spacing-x3);
+    grid-auto-columns: auto;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    justify-content: flex-start;
+  }
+}

components/HotelReservation/BookingConfirmation/Header/Actions/index.tsx

@@ -1,11 +1,5 @@
-import {
-  CalendarIcon,
-  ContractIcon,
-  DownloadIcon,
-  PrinterIcon,
-} from "@/components/Icons"
+import { CalendarAddIcon, DownloadIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import styles from "./actions.module.css"
@@ -15,20 +9,13 @@ export default async function Actions() {
   return (
     <div className={styles.actions}>
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <CalendarIcon />
+        <CalendarAddIcon />
         {intl.formatMessage({ id: "Add to calendar" })}
       </Button>
-      <Divider color="subtle" variant="vertical" />
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <ContractIcon />
-        {intl.formatMessage({ id: "View terms" })}
+        <EditIcon />
+        {intl.formatMessage({ id: "Manage booking" })}
       </Button>
-      <Divider color="subtle" variant="vertical" />
-      <Button intent="text" size="small" theme="base" variant="icon" wrapping>
-        <PrinterIcon />
-        {intl.formatMessage({ id: "Print confirmation" })}
-      </Button>
-      <Divider color="subtle" variant="vertical" />
       <Button intent="text" size="small" theme="base" variant="icon" wrapping>
         <DownloadIcon />
         {intl.formatMessage({ id: "Download invoice" })}

components/HotelReservation/BookingConfirmation/Header/header.module.css

@@ -1,12 +1,12 @@
 .header,
 .hgroup {
-  align-items: center;
   display: flex;
   flex-direction: column;
 }
 
 .header {
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x2);
+  grid-area: header;
 }
 
 .hgroup {
@@ -14,5 +14,5 @@
 }
 
 .body {
-  max-width: 560px;
+  max-width: 720px;
 }

components/HotelReservation/BookingConfirmation/Header/index.tsx

@@ -1,11 +1,12 @@
 import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
 
 import Link from "@/components/TempDesignSystem/Link"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 
+import Actions from "./Actions"
+
 import styles from "./header.module.css"
 
 import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
@@ -30,31 +31,15 @@ export default async function Header({
   return (
     <header className={styles.header}>
       <hgroup className={styles.hgroup}>
-        <BiroScript color="red" tilted="small" type="two">
-          {intl.formatMessage({ id: "See you soon!" })}
-        </BiroScript>
-        <Title
-          as="h4"
-          color="red"
-          textAlign="center"
-          textTransform="regular"
-          type="h2"
-        >
+        <Title as="h2" color="red" textTransform="uppercase" type="h2">
           {intl.formatMessage({ id: "booking.confirmation.title" })}
         </Title>
-        <Title
-          as="h4"
-          color="burgundy"
-          textAlign="center"
-          textTransform="regular"
-          type="h1"
-        >
+        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
           {hotel.name}
         </Title>
       </hgroup>
-      <Body className={styles.body} textAlign="center">
-        {text}
-      </Body>
+      <Body className={styles.body}>{text}</Body>
+      <Actions />
     </header>
   )
 }

components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./room.module.css"
+
+export default function Room() {
+  return <article className={styles.room}></article>
+}

components/HotelReservation/BookingConfirmation/Rooms/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./rooms.module.css"
+
+export default function Rooms() {
+  return <section className={styles.rooms}></section>
+}

components/HotelReservation/BookingConfirmation/Rooms/rooms.module.css

@@ -0,0 +1,6 @@
+.rooms {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x9);
+  grid-area: booking;
+}

components/HotelReservation/BookingConfirmation/Summary/index.tsx

@@ -1,154 +1,5 @@
-import { profile } from "@/constants/routes/myPages"
-import { dt } from "@/lib/dt"
-import {
-  getBookingConfirmation,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-
-import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
-import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
-
 import styles from "./summary.module.css"
 
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-import { BreakfastPackageEnum } from "@/types/enums/breakfast"
-
-export default async function Summary({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  const intl = await getIntl()
-  const lang = getLang()
-  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
-  const user = await getProfileSafely()
-  const { firstName, lastName } = booking.guest
-  const membershipNumber = user?.membership?.membershipNumber
-  const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
-    dt(booking.checkInDate.setHours(0, 0, 0)),
-    "days"
-  )
-
-  const breakfastPackage = booking.packages.find(
-    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
-  )
-  return (
-    <div className={styles.summary}>
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Guest" })}
-          </Body>
-          <Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
-          {membershipNumber ? (
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage(
-                { id: "membership.no" },
-                { membershipNumber }
-              )}
-            </Body>
-          ) : null}
-          <Body color="uiTextHighContrast">{booking.guest.email}</Body>
-          <Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
-        </div>
-        {user ? (
-          <Link className={styles.link} href={profile[lang]} variant="icon">
-            <PersonIcon color="baseButtonTextOnFillNormal" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({ id: "Go to profile" })}
-            </Caption>
-          </Link>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Payment" })}
-          </Body>
-          <Body color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "guest.paid" },
-              {
-                amount: intl.formatNumber(booking.totalPrice),
-                currency: booking.currencyCode,
-              }
-            )}
-          </Body>
-          <Body color="uiTextHighContrast">Date information N/A</Body>
-          <Body color="uiTextHighContrast">Card information N/A</Body>
-        </div>
-        {/* # href until more info */}
-        {user ? (
-          <Link className={styles.link} href="#" variant="icon">
-            <CreditCardAddIcon color="baseButtonTextOnFillNormal" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({ id: "Save card to profile" })}
-            </Caption>
-          </Link>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Booking" })}
-          </Body>
-          <Body color="uiTextHighContrast">
-            N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
-            ,{" "}
-            {intl.formatMessage(
-              { id: "booking.adults" },
-              { totalAdults: booking.adults }
-            )}
-          </Body>
-          {breakfastPackage ? (
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "Breakfast added" })}
-            </Body>
-          ) : null}
-          <Body color="uiTextHighContrast">Bedtype N/A</Body>
-        </div>
-        {/* # href until more info */}
-        <Link className={styles.link} href="#" variant="icon">
-          <EditIcon color="baseButtonTextOnFillNormal" />
-          <Caption color="burgundy" type="bold">
-            {intl.formatMessage({ id: "Manage booking" })}
-          </Caption>
-        </Link>
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.container}>
-        <div className={styles.textContainer}>
-          <Body color="uiTextPlaceholder">
-            {intl.formatMessage({ id: "Hotel" })}
-          </Body>
-          <Body color="uiTextHighContrast">{hotel.name}</Body>
-          <Body color="uiTextHighContrast">
-            {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
-          </Body>
-          <Body color="uiTextHighContrast">
-            {hotel.contactInformation.phoneNumber}
-          </Body>
-          <Caption color="uiTextMediumContrast" className={styles.latLong}>
-            {`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
-          </Caption>
-        </div>
-        <div className={styles.hotelLinks}>
-          <Link color="peach80" href={hotel.contactInformation.websiteUrl}>
-            {hotel.contactInformation.websiteUrl}
-          </Link>
-          <Link
-            color="peach80"
-            href={`mailto:${hotel.contactInformation.email}`}
-          >
-            {hotel.contactInformation.email}
-          </Link>
-        </div>
-      </div>
-    </div>
-  )
+export default function Summary() {
+  return <aside className={styles.summary}>SUMMARY</aside>
 }

components/HotelReservation/BookingConfirmation/Summary/summary.module.css

@@ -1,31 +1,4 @@
 .summary {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
-.container,
-.textContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.container {
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.textContainer {
-  gap: var(--Spacing-x-half);
-}
-
-.container .textContainer .latLong {
-  padding-top: var(--Spacing-x1);
-}
-
-.hotelLinks {
-  display: flex;
-  flex-direction: column;
-}
-
-.summary .container .link {
-  gap: var(--Spacing-x1);
+  background-color: hotpink;
+  grid-area: summary;
 }

components/HotelReservation/BookingConfirmation/_Summary/index.tsx

@@ -0,0 +1,154 @@
+import { profile } from "@/constants/routes/myPages"
+import { dt } from "@/lib/dt"
+import {
+  getBookingConfirmation,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
+import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
+import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./summary.module.css"
+
+import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+
+export default async function Summary({
+  confirmationNumber,
+}: BookingConfirmationProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+  const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
+  const user = await getProfileSafely()
+  const { firstName, lastName } = booking.guest
+  const membershipNumber = user?.membership?.membershipNumber
+  const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
+    dt(booking.checkInDate.setHours(0, 0, 0)),
+    "days"
+  )
+
+  const breakfastPackage = booking.packages.find(
+    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
+  )
+  return (
+    <div className={styles.summary}>
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Guest" })}
+          </Body>
+          <Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
+          {membershipNumber ? (
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "membership.no" },
+                { membershipNumber }
+              )}
+            </Body>
+          ) : null}
+          <Body color="uiTextHighContrast">{booking.guest.email}</Body>
+          <Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
+        </div>
+        {user ? (
+          <Link className={styles.link} href={profile[lang]} variant="icon">
+            <PersonIcon color="baseButtonTextOnFillNormal" />
+            <Caption color="burgundy" type="bold">
+              {intl.formatMessage({ id: "Go to profile" })}
+            </Caption>
+          </Link>
+        ) : null}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Payment" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "guest.paid" },
+              {
+                amount: intl.formatNumber(booking.totalPrice),
+                currency: booking.currencyCode,
+              }
+            )}
+          </Body>
+          <Body color="uiTextHighContrast">Date information N/A</Body>
+          <Body color="uiTextHighContrast">Card information N/A</Body>
+        </div>
+        {/* # href until more info */}
+        {user ? (
+          <Link className={styles.link} href="#" variant="icon">
+            <CreditCardAddIcon color="baseButtonTextOnFillNormal" />
+            <Caption color="burgundy" type="bold">
+              {intl.formatMessage({ id: "Save card to profile" })}
+            </Caption>
+          </Link>
+        ) : null}
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Booking" })}
+          </Body>
+          <Body color="uiTextHighContrast">
+            N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
+            ,{" "}
+            {intl.formatMessage(
+              { id: "booking.adults" },
+              { totalAdults: booking.adults }
+            )}
+          </Body>
+          {breakfastPackage ? (
+            <Body color="uiTextHighContrast">
+              {intl.formatMessage({ id: "Breakfast added" })}
+            </Body>
+          ) : null}
+          <Body color="uiTextHighContrast">Bedtype N/A</Body>
+        </div>
+        {/* # href until more info */}
+        <Link className={styles.link} href="#" variant="icon">
+          <EditIcon color="baseButtonTextOnFillNormal" />
+          <Caption color="burgundy" type="bold">
+            {intl.formatMessage({ id: "Manage booking" })}
+          </Caption>
+        </Link>
+      </div>
+      <Divider color="primaryLightSubtle" />
+      <div className={styles.container}>
+        <div className={styles.textContainer}>
+          <Body color="uiTextPlaceholder">
+            {intl.formatMessage({ id: "Hotel" })}
+          </Body>
+          <Body color="uiTextHighContrast">{hotel.name}</Body>
+          <Body color="uiTextHighContrast">
+            {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
+          </Body>
+          <Body color="uiTextHighContrast">
+            {hotel.contactInformation.phoneNumber}
+          </Body>
+          <Caption color="uiTextMediumContrast" className={styles.latLong}>
+            {`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
+          </Caption>
+        </div>
+        <div className={styles.hotelLinks}>
+          <Link color="peach80" href={hotel.contactInformation.websiteUrl}>
+            {hotel.contactInformation.websiteUrl}
+          </Link>
+          <Link
+            color="peach80"
+            href={`mailto:${hotel.contactInformation.email}`}
+          >
+            {hotel.contactInformation.email}
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

components/HotelReservation/BookingConfirmation/_Summary/summary.module.css

@@ -0,0 +1,31 @@
+.summary {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.container,
+.textContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.textContainer {
+  gap: var(--Spacing-x-half);
+}
+
+.container .textContainer .latLong {
+  padding-top: var(--Spacing-x1);
+}
+
+.hotelLinks {
+  display: flex;
+  flex-direction: column;
+}
+
+.summary .container .link {
+  gap: var(--Spacing-x1);
+}

components/HotelReservation/BookingConfirmation/bookingConfirmation.module.css

@@ -1,23 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x9);
-}
-
-.booking {
-  display: grid;
-  gap: var(--Spacing-x-one-and-half);
-  grid-template-areas:
-    "image"
-    "details"
-    "actions";
-}
-
-@media screen and (min-width: 768px) {
-  .booking {
-    grid-template-areas:
-      "details image"
-      "actions actions";
-    grid-template-columns: 1fr minmax(256px, min(256px, 100%));
-  }
-}

components/HotelReservation/BookingConfirmation/index.tsx

@@ -1,31 +0,0 @@
-import Actions from "./Actions"
-import Details from "./Details"
-import Header from "./Header"
-import HotelImage from "./HotelImage"
-import Summary from "./Summary"
-import TotalPrice from "./TotalPrice"
-
-import styles from "./bookingConfirmation.module.css"
-
-import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
-
-export default function BookingConfirmation({
-  confirmationNumber,
-}: BookingConfirmationProps) {
-  return (
-    <>
-      <Header confirmationNumber={confirmationNumber} />
-      <section className={styles.section}>
-        <div className={styles.booking}>
-          <Details confirmationNumber={confirmationNumber} />
-          <HotelImage confirmationNumber={confirmationNumber} />
-          <Actions />
-        </div>
-        {/* Supposed Ancillaries */}
-        <Summary confirmationNumber={confirmationNumber} />
-        <TotalPrice confirmationNumber={confirmationNumber} />
-        {/* Supposed Info Card - Where should it come from?? */}
-      </section>
-    </>
-  )
-}

components/HotelReservation/Contact/index.tsx

@@ -2,8 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import FacebookIcon from "@/components/Icons/Facebook"
-import InstagramIcon from "@/components/Icons/Instagram"
+import { FacebookIcon, InstagramIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -4,8 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -20,12 +19,19 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/bedType"
 
 export default function BedType({ bedTypes }: BedTypeProps) {
-  const bedType = useDetailsStore((state) => state.data.bedType?.roomTypeCode)
-  const completeStep = useStepsStore((state) => state.completeStep)
-  const updateBedType = useDetailsStore((state) => state.actions.updateBedType)
+  const initialBedType = useEnterDetailsStore(
+    (state) => state.formValues?.bedType?.roomTypeCode
+  )
+  const bedType = useEnterDetailsStore((state) => state.bedType?.roomTypeCode)
+  const completeStep = useEnterDetailsStore(
+    (state) => state.actions.completeStep
+  )
+  const updateBedType = useEnterDetailsStore(
+    (state) => state.actions.updateBedType
+  )
 
   const methods = useForm<BedTypeFormSchema>({
-    defaultValues: bedType ? { bedType } : undefined,
+    defaultValues: initialBedType ? { bedType: initialBedType } : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(bedTypeFormSchema),
@@ -43,10 +49,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
           roomTypeCode: matchingRoom.value,
         }
         updateBedType(bedType)
-        completeStep()
       }
     },
-    [bedTypes, completeStep, updateBedType]
+    [bedTypes, updateBedType]
   )
 
   useEffect(() => {
@@ -76,6 +81,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               subtitle={width}
               title={roomType.description}
               value={roomType.value}
+              handleSelectedOnClick={
+                bedType === roomType.value ? completeStep : undefined
+              }
             />
           )
         })}

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -5,8 +5,7 @@ import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -24,20 +23,30 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 export default function Breakfast({ packages }: BreakfastProps) {
   const intl = useIntl()
 
-  const breakfast = useDetailsStore(({ data }) =>
-    data.breakfast
-      ? data.breakfast.code
-      : data.breakfast === false
+  const formValuesBreakfast = useEnterDetailsStore(({ formValues }) =>
+    formValues?.breakfast
+      ? formValues.breakfast.code
+      : formValues?.breakfast === false
         ? "false"
-        : data.breakfast
+        : undefined
   )
-  const updateBreakfast = useDetailsStore(
+  const breakfast = useEnterDetailsStore((state) =>
+    state.breakfast
+      ? state.breakfast.code
+      : state.breakfast === false
+        ? "false"
+        : undefined
+  )
+  const completeStep = useEnterDetailsStore(
+    (state) => state.actions.completeStep
+  )
+  const updateBreakfast = useEnterDetailsStore(
     (state) => state.actions.updateBreakfast
   )
-  const completeStep = useStepsStore((state) => state.completeStep)
-
   const methods = useForm<BreakfastFormSchema>({
-    defaultValues: breakfast ? { breakfast } : undefined,
+    defaultValues: formValuesBreakfast
+      ? { breakfast: formValuesBreakfast }
+      : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(breakfastFormSchema),
@@ -52,9 +61,8 @@ export default function Breakfast({ packages }: BreakfastProps) {
       } else {
         updateBreakfast(false)
       }
-      completeStep()
     },
-    [completeStep, packages, updateBreakfast]
+    [packages, updateBreakfast]
   )
 
   useEffect(() => {
@@ -97,6 +105,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
             })}
             title={intl.formatMessage({ id: "Breakfast buffet" })}
             value={pkg.code}
+            handleSelectedOnClick={
+              breakfast === pkg.code ? completeStep : undefined
+            }
           />
         ))}
         <RadioCard
@@ -113,6 +124,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
           })}
           title={intl.formatMessage({ id: "No breakfast" })}
           value="false"
+          handleSelectedOnClick={
+            breakfast === "false" ? completeStep : undefined
+          }
         />
       </form>
     </FormProvider>

components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx

@@ -14,7 +14,7 @@ import useLang from "@/hooks/useLang"
 
 import styles from "./joinScandicFriendsCard.module.css"
 
-import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
 
 export default function JoinScandicFriendsCard({
   name,
@@ -65,7 +65,6 @@ export default function JoinScandicFriendsCard({
           position="enter details"
           trackingId="join-scandic-friends-enter-details"
           variant="breadcrumb"
-          target="_blank"
         >
           {intl.formatMessage({ id: "Log in" })}
         </LoginButton>

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -4,8 +4,7 @@ import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -27,45 +26,35 @@ import type {
 const formID = "enter-details"
 export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
-  const initialData = useDetailsStore((state) => ({
-    countryCode: state.data.countryCode,
-    email: state.data.email,
-    firstName: state.data.firstName,
-    lastName: state.data.lastName,
-    phoneNumber: state.data.phoneNumber,
-    join: state.data.join,
-    dateOfBirth: state.data.dateOfBirth,
-    zipCode: state.data.zipCode,
-    membershipNo: state.data.membershipNo,
-  }))
-
-  const updateDetails = useDetailsStore((state) => state.actions.updateDetails)
-  const completeStep = useStepsStore((state) => state.completeStep)
+  const initialData = useEnterDetailsStore((state) => state.formValues.guest)
+  const join = useEnterDetailsStore((state) => state.guest.join)
+  const updateDetails = useEnterDetailsStore(
+    (state) => state.actions.updateDetails
+  )
 
   const methods = useForm<DetailsSchema>({
-    defaultValues: {
-      countryCode: user?.address?.countryCode ?? initialData.countryCode,
-      email: user?.email ?? initialData.email,
-      firstName: user?.firstName ?? initialData.firstName,
-      lastName: user?.lastName ?? initialData.lastName,
-      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
-      join: initialData.join,
-      dateOfBirth: initialData.dateOfBirth,
-      zipCode: initialData.zipCode,
-      membershipNo: initialData.membershipNo,
-    },
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(user ? signedInDetailsSchema : guestDetailsSchema),
     reValidateMode: "onChange",
+    values: {
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+      dateOfBirth: initialData.dateOfBirth,
+      email: user?.email ?? initialData.email,
+      firstName: user?.firstName ?? initialData.firstName,
+      join,
+      lastName: user?.lastName ?? initialData.lastName,
+      membershipNo: initialData.membershipNo,
+      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
+      zipCode: initialData.zipCode,
+    },
   })
 
   const onSubmit = useCallback(
     (values: DetailsSchema) => {
       updateDetails(values)
-      completeStep()
     },
-    [completeStep, updateDetails]
+    [updateDetails]
   )
 
   return (

components/HotelReservation/EnterDetails/Details/schema.ts

@@ -38,7 +38,7 @@ export const joinDetailsSchema = baseDetailsSchema.merge(
     join: z.literal<boolean>(true),
     zipCode: z.string().min(1, { message: "Zip code is required" }),
     dateOfBirth: z.string().min(1, { message: "Date of birth is required" }),
-    membershipNo: z.string().optional(),
+    membershipNo: z.string().default(""),
   })
 )
 
@@ -50,9 +50,16 @@ export const guestDetailsSchema = z.discriminatedUnion("join", [
 // For signed in users we accept partial or invalid data. Users cannot
 // change their info in this flow, so we don't want to validate it.
 export const signedInDetailsSchema = z.object({
-  countryCode: z.string().optional(),
-  email: z.string().optional(),
-  firstName: z.string().optional(),
-  lastName: z.string().optional(),
-  phoneNumber: z.string().optional(),
+  countryCode: z.string().default(""),
+  email: z.string().default(""),
+  firstName: z.string().default(""),
+  lastName: z.string().default(""),
+  membershipNo: z.string().default(""),
+  phoneNumber: z.string().default(""),
+  join: z
+    .boolean()
+    .optional()
+    .transform((_) => false),
+  dateOfBirth: z.string().default(""),
+  zipCode: z.string().default(""),
 })

components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx

@@ -0,0 +1,32 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import ChevronRight from "@/components/Icons/ChevronRight"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./header.module.css"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
+  const intl = useIntl()
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
+      theme="base"
+      size="small"
+      variant="icon"
+      intent="textInverted"
+      wrapping
+      className={styles.toggle}
+    >
+      {intl.formatMessage({ id: "See hotel details" })}
+      <ChevronRight height="14" color="white" />
+    </Button>
+  )
+}

components/HotelReservation/EnterDetails/Header/header.module.css

@@ -0,0 +1,53 @@
+.header {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  position: relative;
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  background-color: rgba(57, 57, 57, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: var(--Spacing-x2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.toggle {
+  padding: 0px !important;
+}
+
+@media (min-width: 768px) {
+  .wrapper {
+    padding: var(--Spacing-x3) var(--Spacing-x3);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    padding: var(--Spacing-x6) var(--Spacing-x5);
+  }
+}

components/HotelReservation/EnterDetails/Header/index.tsx

@@ -0,0 +1,53 @@
+import Image from "@/components/Image"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import getSingleDecimal from "@/utils/numberFormatting"
+
+import ToggleSidePeek from "./ToggleSidePeek"
+
+import styles from "./header.module.css"
+
+import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
+
+export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
+  const intl = await getIntl()
+  const hotel = hotelData.data.attributes
+
+  const image = hotel.hotelContent?.images
+  return (
+    <header className={styles.header}>
+      <Image
+        className={styles.hero}
+        alt={image.metaData.altText || image.metaData.altText_En || ""}
+        src={image.imageSizes.large}
+        height={200}
+        width={1196}
+      />
+      <div className={styles.wrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h1" level="h1" color="white">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="white">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <Caption color="white">∙</Caption>
+            <Caption color="white">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                {
+                  number: getSingleDecimal(
+                    hotel.location.distanceToCentre / 1000
+                  ),
+                }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <ToggleSidePeek hotelId={hotel.operaId} />
+      </div>
+    </header>
+  )
+}

components/HotelReservation/EnterDetails/HistoryStateManager/index.tsx

@@ -2,11 +2,11 @@
 
 import { useCallback, useEffect } from "react"
 
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 export default function HistoryStateManager() {
-  const setCurrentStep = useStepsStore((state) => state.setStep)
-  const currentStep = useStepsStore((state) => state.currentStep)
+  const setCurrentStep = useEnterDetailsStore((state) => state.actions.setStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
 
   const handleBackButton = useCallback(
     (event: PopStateEvent) => {

components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+import { detailsStorageName } from "@/stores/enter-details"
+
+import { createQueryParamsForEnterDetails } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import LoadingSpinner from "@/components/LoadingSpinner"
+
+import type { DetailsState } from "@/types/stores/enter-details"
+
+export default function PaymentCallback({
+  returnUrl,
+  searchObject,
+}: {
+  returnUrl: string
+  searchObject: URLSearchParams
+}) {
+  const router = useRouter()
+
+  useEffect(() => {
+    const bookingData = window.sessionStorage.getItem(detailsStorageName)
+
+    if (bookingData) {
+      const detailsStorage: Record<
+        "state",
+        Pick<DetailsState, "booking">
+      > = JSON.parse(bookingData)
+      const searchParams = createQueryParamsForEnterDetails(
+        detailsStorage.state.booking,
+        searchObject
+      )
+
+      if (searchParams.size > 0) {
+        router.replace(`${returnUrl}?${searchParams.toString()}`)
+      }
+    }
+  }, [returnUrl, router, searchObject])
+
+  return <LoadingSpinner />
+}

components/HotelReservation/EnterDetails/Payment/index.tsx

@@ -2,8 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
-import { Label as AriaLabel } from "react-aria-components"
+import { useCallback, useEffect, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -16,9 +15,10 @@ import {
   bookingTermsAndConditions,
   privacyPolicy,
 } from "@/constants/currentWebHrefs"
+import { selectRate } from "@/constants/routes/hotelReservation"
 import { env } from "@/env/client"
 import { trpc } from "@/lib/trpc/client"
-import { useDetailsStore } from "@/stores/details"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Button from "@/components/TempDesignSystem/Button"
@@ -27,11 +27,13 @@ import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { toast } from "@/components/TempDesignSystem/Toasts"
+import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentOptions"
 import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
 import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast"
 import useLang from "@/hooks/useLang"
 
 import { bedTypeMap } from "../../SelectRate/RoomSelection/utils"
+import PriceChangeDialog from "../PriceChangeDialog"
 import GuaranteeDetails from "./GuaranteeDetails"
 import PaymentOption from "./PaymentOption"
 import { PaymentFormData, paymentSchema } from "./schema"
@@ -39,7 +41,7 @@ import { PaymentFormData, paymentSchema } from "./schema"
 import styles from "./payment.module.css"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
+import type { PaymentProps } from "@/types/components/hotelReservation/selectRate/section"
 
 const maxRetries = 4
 const retryInterval = 2000
@@ -51,6 +53,7 @@ function isPaymentMethodEnum(value: string): value is PaymentMethodEnum {
 }
 
 export default function Payment({
+  user,
   roomPrice,
   otherPaymentOptions,
   savedCreditCards,
@@ -59,30 +62,28 @@ export default function Payment({
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
-  const queryParams = useSearchParams()
-  const { booking, ...userData } = useDetailsStore((state) => state.data)
-  const setIsSubmittingDisabled = useDetailsStore(
+  const searchParams = useSearchParams()
+  const totalPrice = useEnterDetailsStore((state) => state.totalPrice)
+  const { bedType, booking, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    booking: state.booking,
+    breakfast: state.breakfast,
+  }))
+  const userData = useEnterDetailsStore((state) => state.guest)
+  const setIsSubmittingDisabled = useEnterDetailsStore(
     (state) => state.actions.setIsSubmittingDisabled
   )
 
-  const {
-    firstName,
-    lastName,
-    email,
-    phoneNumber,
-    countryCode,
-    breakfast,
-    bedType,
-    membershipNo,
-    join,
-    dateOfBirth,
-    zipCode,
-  } = userData
-  const { toDate, fromDate, rooms, hotel } = booking
-
   const [confirmationNumber, setConfirmationNumber] = useState<string>("")
-  const [availablePaymentOptions, setAvailablePaymentOptions] =
-    useState(otherPaymentOptions)
+  const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
+    useState(false)
+
+  const availablePaymentOptions =
+    useAvailablePaymentOptions(otherPaymentOptions)
+  const [priceChangeData, setPriceChangeData] = useState<{
+    oldPrice: number
+    newPrice: number
+  } | null>()
 
   usePaymentFailedToast()
 
@@ -103,6 +104,15 @@ export default function Payment({
     onSuccess: (result) => {
       if (result?.confirmationNumber) {
         setConfirmationNumber(result.confirmationNumber)
+
+        if (result.metadata?.priceChangedMetadata) {
+          setPriceChangeData({
+            oldPrice: roomPrice.publicPrice,
+            newPrice: result.metadata.priceChangedMetadata.totalPrice,
+          })
+        } else {
+          setIsPollingForBookingStatus(true)
+        }
       } else {
         toast.error(
           intl.formatMessage({
@@ -121,25 +131,31 @@ export default function Payment({
     },
   })
 
+  const priceChange = trpc.booking.priceChange.useMutation({
+    onSuccess: (result) => {
+      if (result?.confirmationNumber) {
+        setIsPollingForBookingStatus(true)
+      } else {
+        toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+      }
+
+      setPriceChangeData(null)
+    },
+    onError: (error) => {
+      console.error("Error", error)
+      setPriceChangeData(null)
+      toast.error(intl.formatMessage({ id: "payment.error.failed" }))
+    },
+  })
+
   const bookingStatus = useHandleBookingStatus({
     confirmationNumber,
     expectedStatus: BookingStatusEnum.BookingCompleted,
     maxRetries,
     retryInterval,
+    enabled: isPollingForBookingStatus,
   })
 
-  useEffect(() => {
-    if (window.ApplePaySession) {
-      setAvailablePaymentOptions(otherPaymentOptions)
-    } else {
-      setAvailablePaymentOptions(
-        otherPaymentOptions.filter(
-          (option) => option !== PaymentMethodEnum.applePay
-        )
-      )
-    }
-  }, [otherPaymentOptions, setAvailablePaymentOptions])
-
   useEffect(() => {
     if (bookingStatus?.data?.paymentUrl) {
       router.push(bookingStatus.data.paymentUrl)
@@ -162,76 +178,102 @@ export default function Payment({
     setIsSubmittingDisabled,
   ])
 
-  function handleSubmit(data: PaymentFormData) {
-    const allQueryParams =
-      queryParams.size > 0 ? `?${queryParams.toString()}` : ""
+  const handleSubmit = useCallback(
+    (data: PaymentFormData) => {
+      const {
+        firstName,
+        lastName,
+        email,
+        phoneNumber,
+        countryCode,
+        membershipNo,
+        join,
+        dateOfBirth,
+        zipCode,
+      } = userData
+      const { toDate, fromDate, rooms, hotel } = booking
 
-    // set payment method to card if saved card is submitted
-    const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
-      ? data.paymentMethod
-      : PaymentMethodEnum.card
+      // set payment method to card if saved card is submitted
+      const paymentMethod = isPaymentMethodEnum(data.paymentMethod)
+        ? data.paymentMethod
+        : PaymentMethodEnum.card
 
-    const savedCreditCard = savedCreditCards?.find(
-      (card) => card.id === data.paymentMethod
-    )
+      const savedCreditCard = savedCreditCards?.find(
+        (card) => card.id === data.paymentMethod
+      )
 
-    initiateBooking.mutate({
-      hotelId: hotel,
-      checkInDate: fromDate,
-      checkOutDate: toDate,
-      rooms: rooms.map((room) => ({
-        adults: room.adults,
-        childrenAges: room.children?.map((child) => ({
-          age: child.age,
-          bedType: bedTypeMap[parseInt(child.bed.toString())],
+      const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback`
+
+      initiateBooking.mutate({
+        hotelId: hotel,
+        checkInDate: fromDate,
+        checkOutDate: toDate,
+        rooms: rooms.map((room) => ({
+          adults: room.adults,
+          childrenAges: room.children?.map((child) => ({
+            age: child.age,
+            bedType: bedTypeMap[parseInt(child.bed.toString())],
+          })),
+          rateCode:
+            user || join || membershipNo ? room.counterRateCode : room.rateCode,
+          roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
+          guest: {
+            firstName,
+            lastName,
+            email,
+            phoneNumber,
+            countryCode,
+            membershipNumber: membershipNo,
+            becomeMember: join,
+            dateOfBirth,
+            postalCode: zipCode,
+          },
+          packages: {
+            breakfast: !!(breakfast && breakfast.code),
+            allergyFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ??
+              false,
+            petFriendly:
+              room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
+            accessibility:
+              room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
+              false,
+          },
+          smsConfirmationRequested: data.smsConfirmation,
+          roomPrice,
         })),
-        rateCode: room.rateCode,
-        roomTypeCode: bedType!.roomTypeCode, // A selection has been made in order to get to this step.
-        guest: {
-          title: "",
-          firstName,
-          lastName,
-          email,
-          phoneNumber,
-          countryCode,
-          membershipNumber: membershipNo,
-          becomeMember: join,
-          dateOfBirth,
-          postalCode: zipCode,
-        },
-        packages: {
-          breakfast: !!(breakfast && breakfast.code),
-          allergyFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.ALLERGY_ROOM) ?? false,
-          petFriendly:
-            room.packages?.includes(RoomPackageCodeEnum.PET_ROOM) ?? false,
-          accessibility:
-            room.packages?.includes(RoomPackageCodeEnum.ACCESSIBILITY_ROOM) ??
-            false,
-        },
-        smsConfirmationRequested: data.smsConfirmation,
-        roomPrice,
-      })),
-      payment: {
-        paymentMethod,
-        card: savedCreditCard
-          ? {
-              alias: savedCreditCard.alias,
-              expiryDate: savedCreditCard.expirationDate,
-              cardType: savedCreditCard.cardType,
-            }
-          : undefined,
+        payment: {
+          paymentMethod,
+          card: savedCreditCard
+            ? {
+                alias: savedCreditCard.alias,
+                expiryDate: savedCreditCard.expirationDate,
+                cardType: savedCreditCard.cardType,
+              }
+            : undefined,
 
-        success: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/success`,
-        error: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/error${allQueryParams}`,
-        cancel: `${env.NEXT_PUBLIC_PAYMENT_CALLBACK_URL}/${lang}/cancel${allQueryParams}`,
-      },
-    })
-  }
+          success: `${paymentRedirectUrl}/success`,
+          error: `${paymentRedirectUrl}/error`,
+          cancel: `${paymentRedirectUrl}/cancel`,
+        },
+      })
+    },
+    [
+      breakfast,
+      bedType,
+      userData,
+      booking,
+      roomPrice,
+      savedCreditCards,
+      lang,
+      user,
+      initiateBooking,
+    ]
+  )
 
   if (
     initiateBooking.isPending ||
-    (confirmationNumber && !bookingStatus.data?.paymentUrl)
+    (isPollingForBookingStatus && !bookingStatus.data?.paymentUrl)
   ) {
     return <LoadingSpinner />
   }
@@ -241,79 +283,70 @@ export default function Payment({
   const paymentVerb = mustBeGuaranteed ? guaranteeing : paying
 
   return (
-    <FormProvider {...methods}>
-      <form
-        className={styles.paymentContainer}
-        onSubmit={methods.handleSubmit(handleSubmit)}
-        id={formId}
-      >
-        {mustBeGuaranteed ? (
+    <>
+      <FormProvider {...methods}>
+        <form
+          className={styles.paymentContainer}
+          onSubmit={methods.handleSubmit(handleSubmit)}
+          id={formId}
+        >
+          {mustBeGuaranteed ? (
+            <section className={styles.section}>
+              <Body>
+                {intl.formatMessage({
+                  id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
+                })}
+              </Body>
+              <GuaranteeDetails />
+            </section>
+          ) : null}
+          {savedCreditCards?.length ? (
+            <section className={styles.section}>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "MY SAVED CARDS" })}
+              </Body>
+              <div className={styles.paymentOptionContainer}>
+                {savedCreditCards?.map((savedCreditCard) => (
+                  <PaymentOption
+                    key={savedCreditCard.id}
+                    name="paymentMethod"
+                    value={savedCreditCard.id}
+                    label={
+                      PAYMENT_METHOD_TITLES[
+                        savedCreditCard.cardType as PaymentMethodEnum
+                      ]
+                    }
+                    cardNumber={savedCreditCard.truncatedNumber}
+                  />
+                ))}
+              </div>
+            </section>
+          ) : null}
           <section className={styles.section}>
-            <Body>
-              {intl.formatMessage({
-                id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
-              })}
-            </Body>
-            <GuaranteeDetails />
-          </section>
-        ) : null}
-        {savedCreditCards?.length ? (
-          <section className={styles.section}>
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "MY SAVED CARDS" })}
-            </Body>
+            {savedCreditCards?.length ? (
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
+              </Body>
+            ) : null}
             <div className={styles.paymentOptionContainer}>
-              {savedCreditCards?.map((savedCreditCard) => (
+              <PaymentOption
+                name="paymentMethod"
+                value={PaymentMethodEnum.card}
+                label={intl.formatMessage({ id: "Credit card" })}
+              />
+              {availablePaymentOptions.map((paymentMethod) => (
                 <PaymentOption
-                  key={savedCreditCard.id}
+                  key={paymentMethod}
                   name="paymentMethod"
-                  value={savedCreditCard.id}
+                  value={paymentMethod}
                   label={
-                    PAYMENT_METHOD_TITLES[
-                      savedCreditCard.cardType as PaymentMethodEnum
-                    ]
+                    PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
                   }
-                  cardNumber={savedCreditCard.truncatedNumber}
                 />
               ))}
             </div>
           </section>
-        ) : null}
-        <section className={styles.section}>
-          {savedCreditCards?.length ? (
-            <Body color="uiTextHighContrast" textTransform="bold">
-              {intl.formatMessage({ id: "OTHER PAYMENT METHODS" })}
-            </Body>
-          ) : null}
-          <div className={styles.paymentOptionContainer}>
-            <PaymentOption
-              name="paymentMethod"
-              value={PaymentMethodEnum.card}
-              label={intl.formatMessage({ id: "Credit card" })}
-            />
-            {availablePaymentOptions.map((paymentMethod) => (
-              <PaymentOption
-                key={paymentMethod}
-                name="paymentMethod"
-                value={paymentMethod}
-                label={
-                  PAYMENT_METHOD_TITLES[paymentMethod as PaymentMethodEnum]
-                }
-              />
-            ))}
-          </div>
-        </section>
-        <section className={styles.section}>
-          <Checkbox name="smsConfirmation">
-            <Caption>
-              {intl.formatMessage({
-                id: "I would like to get my booking confirmation via sms",
-              })}
-            </Caption>
-          </Checkbox>
-
-          <AriaLabel className={styles.terms}>
-            <Checkbox name="termsAndConditions" />
+          <section className={styles.section}>
             <Caption>
               {intl.formatMessage<React.ReactNode>(
                 {
@@ -344,19 +377,48 @@ export default function Payment({
                 }
               )}
             </Caption>
-          </AriaLabel>
-        </section>
-        <div className={styles.submitButton}>
-          <Button
-            type="submit"
-            disabled={
-              !methods.formState.isValid || methods.formState.isSubmitting
-            }
-          >
-            {intl.formatMessage({ id: "Complete booking" })}
-          </Button>
-        </div>
-      </form>
-    </FormProvider>
+            <Checkbox name="termsAndConditions">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I accept the terms and conditions",
+                })}
+              </Caption>
+            </Checkbox>
+            <Checkbox name="smsConfirmation">
+              <Caption>
+                {intl.formatMessage({
+                  id: "I would like to get my booking confirmation via sms",
+                })}
+              </Caption>
+            </Checkbox>
+          </section>
+          <div className={styles.submitButton}>
+            <Button
+              type="submit"
+              disabled={
+                !methods.formState.isValid || methods.formState.isSubmitting
+              }
+            >
+              {intl.formatMessage({ id: "Complete booking" })}
+            </Button>
+          </div>
+        </form>
+      </FormProvider>
+      {priceChangeData ? (
+        <PriceChangeDialog
+          isOpen={!!priceChangeData}
+          oldPrice={priceChangeData.oldPrice}
+          newPrice={priceChangeData.newPrice}
+          currency={totalPrice.local.currency}
+          onCancel={() => {
+            const allSearchParams = searchParams.size
+              ? `?${searchParams.toString()}`
+              : ""
+            router.push(`${selectRate(lang)}${allSearchParams}`)
+          }}
+          onAccept={() => priceChange.mutate({ confirmationNumber })}
+        />
+      ) : null}
+    </>
   )
 }

components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -0,0 +1,73 @@
+import { Dialog, Modal, ModalOverlay } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { InfoCircleIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import styles from "./priceChangeDialog.module.css"
+
+import { PriceChangeDialogProps } from "@/types/components/hotelReservation/enterDetails/priceChangeDialog"
+
+export default function PriceChangeDialog({
+  isOpen,
+  oldPrice,
+  newPrice,
+  currency,
+  onCancel,
+  onAccept,
+}: PriceChangeDialogProps) {
+  const intl = useIntl()
+  const title = intl.formatMessage({ id: "The price has increased" })
+
+  return (
+    <ModalOverlay
+      className={styles.overlay}
+      isOpen={isOpen}
+      isKeyboardDismissDisabled
+    >
+      <Modal className={styles.modal}>
+        <Dialog aria-label={title} className={styles.dialog}>
+          <header className={styles.header}>
+            <div className={styles.titleContainer}>
+              <InfoCircleIcon height={48} width={48} color="burgundy" />
+              <Title
+                level="h1"
+                as="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {title}
+              </Title>
+            </div>
+            <Body textAlign="center">
+              {intl.formatMessage({
+                id: "The price has increased since you selected your room.",
+              })}
+              <br />
+              {intl.formatMessage({
+                id: "You can still book the room but you need to confirm that you accept the new price",
+              })}
+              <br />
+              <span className={styles.oldPrice}>
+                {intl.formatNumber(oldPrice, { style: "currency", currency })}
+              </span>{" "}
+              <strong className={styles.newPrice}>
+                {intl.formatNumber(newPrice, { style: "currency", currency })}
+              </strong>
+            </Body>
+          </header>
+          <footer className={styles.footer}>
+            <Button intent="secondary" onClick={onCancel}>
+              {intl.formatMessage({ id: "Cancel" })}
+            </Button>
+            <Button onClick={onAccept}>
+              {intl.formatMessage({ id: "Accept new price" })}
+            </Button>
+          </footer>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}

components/HotelReservation/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -0,0 +1,85 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+.overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: var(--visual-viewport-height);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  &[data-entering] {
+    animation: slide-up 200ms;
+  }
+  &[data-exiting] {
+    animation: slide-up 200ms reverse ease-in-out;
+  }
+}
+
+.dialog {
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x5) var(--Spacing-x4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: var(--Spacing-x2);
+}
+
+.oldPrice {
+  text-decoration: line-through;
+}
+
+.newPrice {
+  font-size: 1.2em;
+}

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -2,8 +2,7 @@
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useDetailsStore } from "@/stores/details"
-import { useStepsStore } from "@/stores/steps"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -11,53 +10,50 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./sectionAccordion.module.css"
 
-import { StepStoreKeys } from "@/types/components/hotelReservation/enterDetails/step"
-import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
+import type { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
 import { StepEnum } from "@/types/enums/step"
 
 export default function SectionAccordion({
+  children,
   header,
   label,
   step,
-  children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
-  const currentStep = useStepsStore((state) => state.currentStep)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
   const [isComplete, setIsComplete] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
-  const isValid = useDetailsStore((state) => state.isValid[step])
-  const navigate = useStepsStore((state) => state.navigate)
-  const stepData = useDetailsStore((state) => state.data)
-  const stepStoreKey = StepStoreKeys[step]
+  const isValid = useEnterDetailsStore((state) => state.isValid[step])
+  const navigate = useEnterDetailsStore((state) => state.actions.navigate)
+  const { bedType, breakfast } = useEnterDetailsStore((state) => ({
+    bedType: state.bedType,
+    breakfast: state.breakfast,
+  }))
   const [title, setTitle] = useState(label)
 
+  const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
+  const breakfastTitle = intl.formatMessage({ id: "Breakfast buffet" })
   useEffect(() => {
-    if (step === StepEnum.selectBed) {
-      const value = stepData.bedType
-      value && setTitle(value.description)
+    if (step === StepEnum.selectBed && bedType) {
+      setTitle(bedType.description)
     }
     // If breakfast step, check if an option has been selected
-    if (
-      step === StepEnum.breakfast &&
-      (stepData.breakfast || stepData.breakfast === false)
-    ) {
-      const value = stepData.breakfast
-      if (value === false) {
-        setTitle(intl.formatMessage({ id: "No breakfast" }))
+    if (step === StepEnum.breakfast && breakfast !== undefined) {
+      if (breakfast === false) {
+        setTitle(noBreakfastTitle)
       } else {
-        setTitle(intl.formatMessage({ id: "Breakfast buffet" }))
+        setTitle(breakfastTitle)
       }
     }
-  }, [stepData, stepStoreKey, step, intl])
+  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])
 
   useEffect(() => {
-    // We need to set the state on mount because of hydration errors
     setIsComplete(isValid)
-  }, [isValid])
+  }, [isValid, setIsComplete])
 
   useEffect(() => {
     setIsOpen(currentStep === step)
-  }, [currentStep, step])
+  }, [currentStep, setIsOpen, step])
 
   function onModify() {
     navigate(step)

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -48,8 +48,6 @@
 }
 
 .selection {
-  font-weight: 450;
-  font-size: var(--typography-Title-4-fontSize);
   grid-area: selection;
 }
 

components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx

@@ -8,7 +8,7 @@ import ChevronRight from "@/components/Icons/ChevronRight"
 import Button from "@/components/TempDesignSystem/Button"
 
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
 export default function ToggleSidePeek({
   hotelId,

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -14,7 +14,7 @@ import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./selectedRoom.module.css"
 
-import { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"
+import type { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"
 
 export default function SelectedRoom({
   hotelId,

components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -16,7 +16,7 @@
   justify-content: space-between;
   align-items: center;
   grid-template-areas:
-    "title button"
+    "title title"
     "description button";
 }
 
@@ -25,14 +25,13 @@
 }
 
 .description {
-  font-weight: 450;
-  font-size: var(--typography-Title-4-fontSize);
   grid-area: description;
 }
 
 .button {
   grid-area: button;
   justify-self: flex-end;
+  align-self: flex-start;
 }
 
 .iconWrapper {

components/HotelReservation/EnterDetails/StorageCleaner.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import { hotelreservation } from "@/constants/routes/hotelReservation"
+import { detailsStorageName } from "@/stores/enter-details"
+
+import useLang from "@/hooks/useLang"
+
+/**
+ * Cleanup component to make sure no stale data is left
+ * from previous booking when user is not in the booking
+ * flow anymore
+ */
+export default function StorageCleaner() {
+  const lang = useLang()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!pathname.startsWith(hotelreservation(lang))) {
+      sessionStorage.removeItem(detailsStorageName)
+    }
+  }, [lang, pathname])
+
+  return null
+}

components/HotelReservation/EnterDetails/Summary/Client.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import Summary from "@/components/HotelReservation/Summary"
+import { SummaryBottomSheet } from "@/components/HotelReservation/Summary/BottomSheet"
+
+import styles from "./summary.module.css"
+
+import type { ClientSummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
+import type { DetailsState } from "@/types/stores/enter-details"
+
+function storeSelector(state: DetailsState) {
+  return {
+    bedType: state.bedType,
+    breakfast: state.breakfast,
+    fromDate: state.booking.fromDate,
+    join: state.guest.join,
+    membershipNo: state.guest.membershipNo,
+    packages: state.packages,
+    roomRate: state.roomRate,
+    roomPrice: state.roomPrice,
+    toDate: state.booking.toDate,
+    toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    totalPrice: state.totalPrice,
+  }
+}
+
+export default function ClientSummary({
+  adults,
+  cancellationText,
+  isMember,
+  kids,
+  memberRate,
+  rateDetails,
+  roomType,
+}: ClientSummaryProps) {
+  const {
+    bedType,
+    breakfast,
+    fromDate,
+    join,
+    membershipNo,
+    packages,
+    roomPrice,
+    toDate,
+    toggleSummaryOpen,
+    totalPrice,
+  } = useEnterDetailsStore(storeSelector)
+
+  const showMemberPrice = !!(isMember && memberRate) || join || !!membershipNo
+  const room = {
+    adults,
+    cancellationText,
+    children: kids,
+    packages,
+    rateDetails,
+    roomPrice,
+    roomType,
+  }
+
+  return (
+    <>
+      <div className={styles.mobileSummary}>
+        <SummaryBottomSheet>
+          <div className={styles.summary}>
+            <Summary
+              bedType={bedType}
+              breakfast={breakfast}
+              fromDate={fromDate}
+              showMemberPrice={showMemberPrice}
+              room={room}
+              toDate={toDate}
+              toggleSummaryOpen={toggleSummaryOpen}
+              totalPrice={totalPrice}
+            />
+          </div>
+        </SummaryBottomSheet>
+      </div>
+      <div className={styles.desktopSummary}>
+        <div className={styles.hider} />
+        <div className={styles.summary}>
+          <Summary
+            bedType={bedType}
+            breakfast={breakfast}
+            fromDate={fromDate}
+            showMemberPrice={showMemberPrice}
+            room={room}
+            toDate={toDate}
+            totalPrice={totalPrice}
+          />
+        </div>
+        <div className={styles.shadow} />
+      </div>
+    </>
+  )
+}

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -1,309 +1,57 @@
-"use client"
+import { redirect } from "next/navigation"
 
-import { useEffect, useState } from "react"
-import { ChevronDown } from "react-feather"
-import { useIntl } from "react-intl"
+import { selectRate } from "@/constants/routes/hotelReservation"
+import {
+  getProfileSafely,
+  getSelectedRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"
 
-import { dt } from "@/lib/dt"
-import { useDetailsStore } from "@/stores/details"
+import { generateChildrenString } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { getLang } from "@/i18n/serverContext"
 
-import { ArrowRightIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
-import Link from "@/components/TempDesignSystem/Link"
-import Popover from "@/components/TempDesignSystem/Popover"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import useLang from "@/hooks/useLang"
+import ClientSummary from "./Client"
 
-import styles from "./summary.module.css"
+import type { SummaryPageProps } from "@/types/components/hotelReservation/summary"
 
-import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
-import type { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
-import type { SummaryProps } from "@/types/components/hotelReservation/enterDetails/summary"
-import type { DetailsState } from "@/types/stores/details"
+export default async function Summary({
+  adults,
+  fromDate,
+  hotelId,
+  kids,
+  packageCodes,
+  rateCode,
+  roomTypeCode,
+  toDate,
+}: SummaryPageProps) {
+  const lang = getLang()
 
-function storeSelector(state: DetailsState) {
-  return {
-    fromDate: state.data.booking.fromDate,
-    toDate: state.data.booking.toDate,
-    bedType: state.data.bedType,
-    breakfast: state.data.breakfast,
-    toggleSummaryOpen: state.actions.toggleSummaryOpen,
-    setTotalPrice: state.actions.setTotalPrice,
-    totalPrice: state.totalPrice,
+  const availability = await getSelectedRoomAvailability({
+    adults,
+    children: kids ? generateChildrenString(kids) : undefined,
+    hotelId,
+    packageCodes,
+    rateCode,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    roomTypeCode,
+  })
+  const user = await getProfileSafely()
+
+  if (!availability || !availability.selectedRoom) {
+    console.error("No hotel or availability data", availability)
+    // TODO: handle this case
+    redirect(selectRate(lang))
   }
-}
-
-export default function Summary({ showMemberPrice, room }: SummaryProps) {
-  const [chosenBed, setChosenBed] = useState<BedTypeSchema>()
-  const [chosenBreakfast, setChosenBreakfast] = useState<
-    BreakfastPackage | false
-  >()
-  const intl = useIntl()
-  const lang = useLang()
-  const {
-    bedType,
-    breakfast,
-    fromDate,
-    setTotalPrice,
-    toDate,
-    toggleSummaryOpen,
-    totalPrice,
-  } = useDetailsStore(storeSelector)
-
-  const diff = dt(toDate).diff(fromDate, "days")
-
-  const nights = intl.formatMessage(
-    { id: "booking.nights" },
-    { totalNights: diff }
-  )
-
-  let color: "uiTextHighContrast" | "red" = "uiTextHighContrast"
-  if (showMemberPrice) {
-    color = "red"
-  }
-
-  const additionalPackageCost = room.packages?.reduce(
-    (acc, curr) => {
-      acc.local = acc.local + parseInt(curr.localPrice.totalPrice)
-      acc.euro = acc.euro + parseInt(curr.requestedPrice.totalPrice)
-      return acc
-    },
-    { local: 0, euro: 0 }
-  ) || { local: 0, euro: 0 }
-
-  const roomsPriceLocal = room.localPrice.price + additionalPackageCost.local
-  const roomsPriceEuro = room.euroPrice
-    ? room.euroPrice.price + additionalPackageCost.euro
-    : undefined
-
-  useEffect(() => {
-    setChosenBed(bedType)
-
-    if (breakfast || breakfast === false) {
-      setChosenBreakfast(breakfast)
-      if (breakfast === false) {
-        setTotalPrice({
-          local: {
-            price: roomsPriceLocal,
-            currency: room.localPrice.currency,
-          },
-          euro:
-            room.euroPrice && roomsPriceEuro
-              ? {
-                  price: roomsPriceEuro,
-                  currency: room.euroPrice.currency,
-                }
-              : undefined,
-        })
-      } else {
-        setTotalPrice({
-          local: {
-            price: roomsPriceLocal + parseInt(breakfast.localPrice.totalPrice),
-            currency: room.localPrice.currency,
-          },
-          euro:
-            room.euroPrice && roomsPriceEuro
-              ? {
-                  price:
-                    roomsPriceEuro +
-                    parseInt(breakfast.requestedPrice.totalPrice),
-                  currency: room.euroPrice.currency,
-                }
-              : undefined,
-        })
-      }
-    }
-  }, [
-    bedType,
-    breakfast,
-    roomsPriceLocal,
-    room.localPrice.currency,
-    room.euroPrice,
-    roomsPriceEuro,
-    setTotalPrice,
-  ])
 
   return (
-    <section className={styles.summary}>
-      <header className={styles.header}>
-        <Subtitle className={styles.title} type="two">
-          {intl.formatMessage({ id: "Summary" })}
-        </Subtitle>
-        <Body className={styles.date} color="baseTextMediumContrast">
-          {dt(fromDate).locale(lang).format("ddd, D MMM")}
-          <ArrowRightIcon color="peach80" height={15} width={15} />
-          {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
-        </Body>
-        <Button
-          intent="text"
-          size="small"
-          className={styles.chevronButton}
-          onClick={toggleSummaryOpen}
-        >
-          <ChevronDown height="20" width="20" />
-        </Button>
-      </header>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.addOns}>
-        <div>
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">{room.roomType}</Body>
-            <Caption color={color}>
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: intl.formatNumber(room.localPrice.price),
-                  currency: room.localPrice.currency,
-                }
-              )}
-            </Caption>
-          </div>
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage(
-              { id: "booking.adults" },
-              { totalAdults: room.adults }
-            )}
-          </Caption>
-          {room.children?.length ? (
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "booking.children" },
-                { totalChildren: room.children.length }
-              )}
-            </Caption>
-          ) : null}
-          <Caption color="uiTextMediumContrast">
-            {room.cancellationText}
-          </Caption>
-          <Popover
-            placement="bottom left"
-            triggerContent={
-              <Caption color="burgundy" type="underline">
-                {intl.formatMessage({ id: "Rate details" })}
-              </Caption>
-            }
-          >
-            <aside className={styles.rateDetailsPopover}>
-              <header>
-                <Caption type="bold">{room.cancellationText}</Caption>
-              </header>
-              {room.rateDetails?.map((detail, idx) => (
-                <Caption key={`rateDetails-${idx}`}>{detail}</Caption>
-              ))}
-            </aside>
-          </Popover>
-        </div>
-        {room.packages
-          ? room.packages.map((roomPackage) => (
-              <div className={styles.entry} key={roomPackage.code}>
-                <div>
-                  <Body color="uiTextHighContrast">
-                    {roomPackage.description}
-                  </Body>
-                </div>
-
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage(
-                    { id: "{amount} {currency}" },
-                    {
-                      amount: roomPackage.localPrice.price,
-                      currency: roomPackage.localPrice.currency,
-                    }
-                  )}
-                </Caption>
-              </div>
-            ))
-          : null}
-        {chosenBed ? (
-          <div className={styles.entry}>
-            <div>
-              <Body color="uiTextHighContrast">{chosenBed.description}</Body>
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage({ id: "Based on availability" })}
-              </Caption>
-            </div>
-
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                { amount: "0", currency: room.localPrice.currency }
-              )}
-            </Caption>
-          </div>
-        ) : null}
-
-        {chosenBreakfast === false ? (
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "No breakfast" })}
-            </Body>
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                { amount: "0", currency: room.localPrice.currency }
-              )}
-            </Caption>
-          </div>
-        ) : chosenBreakfast?.code ? (
-          <div className={styles.entry}>
-            <Body color="uiTextHighContrast">
-              {intl.formatMessage({ id: "Breakfast buffet" })}
-            </Body>
-            <Caption color="uiTextMediumContrast">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: chosenBreakfast.localPrice.totalPrice,
-                  currency: chosenBreakfast.localPrice.currency,
-                }
-              )}
-            </Caption>
-          </div>
-        ) : null}
-      </div>
-      <Divider color="primaryLightSubtle" />
-      <div className={styles.total}>
-        <div className={styles.entry}>
-          <div>
-            <Body>
-              {intl.formatMessage<React.ReactNode>(
-                { id: "<b>Total price</b> (incl VAT)" },
-                { b: (str) => <b>{str}</b> }
-              )}
-            </Body>
-            <Link color="burgundy" href="#" variant="underscored" size="small">
-              {intl.formatMessage({ id: "Price details" })}
-            </Link>
-          </div>
-          <div>
-            <Body textTransform="bold">
-              {intl.formatMessage(
-                { id: "{amount} {currency}" },
-                {
-                  amount: intl.formatNumber(totalPrice.local.price),
-                  currency: totalPrice.local.currency,
-                }
-              )}
-            </Body>
-            {totalPrice.euro && (
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage({ id: "Approx." })}{" "}
-                {intl.formatMessage(
-                  { id: "{amount} {currency}" },
-                  {
-                    amount: intl.formatNumber(totalPrice.euro.price),
-                    currency: totalPrice.euro.currency,
-                  }
-                )}
-              </Caption>
-            )}
-          </div>
-        </div>
-        <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
-      </div>
-    </section>
+    <ClientSummary
+      adults={adults}
+      cancellationText={availability.cancellationText}
+      isMember={!!user}
+      kids={kids}
+      memberRate={availability.memberRate}
+      rateDetails={availability.rateDetails}
+      roomType={availability.selectedRoom.roomType}
+    />
   )
 }

components/HotelReservation/EnterDetails/Summary/summary.module.css

@@ -1,83 +1,68 @@
+.mobileSummary {
+  display: block;
+}
+
+.desktopSummary {
+  display: none;
+}
+
 .summary {
-  border-radius: var(--Corner-radius-Large);
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3);
-  height: 100%;
+  background-color: var(--Main-Grey-White);
+
+  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+  border-style: solid;
+  border-width: 1px;
+  border-bottom: none;
+  z-index: 10;
 }
 
-.header {
-  display: grid;
-  grid-template-areas: "title button" "date button";
+.hider {
+  display: none;
 }
 
-.title {
-  grid-area: title;
-}
-
-.chevronButton {
-  grid-area: button;
-  justify-self: end;
-  align-items: center;
-  margin-right: calc(0px - var(--Spacing-x2));
-}
-
-.date {
-  align-items: center;
-  display: flex;
-  gap: var(--Spacing-x1);
-  justify-content: flex-start;
-  grid-area: date;
-}
-
-.link {
-  margin-top: var(--Spacing-x1);
-}
-
-.addOns {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
-.rateDetailsPopover {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-  max-width: 360px;
-}
-
-.entry {
-  display: flex;
-  gap: var(--Spacing-x-half);
-  justify-content: space-between;
-}
-
-.entry > :last-child {
-  justify-items: flex-end;
-}
-
-.total {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-}
-
-.bottomDivider {
+.shadow {
   display: none;
 }
 
 @media screen and (min-width: 1367px) {
-  .bottomDivider {
-    display: block;
-  }
-
-  .header {
-    display: block;
-  }
-
-  .chevronButton {
+  .mobileSummary {
     display: none;
   }
+
+  .desktopSummary {
+    display: grid;
+    grid-template-rows: auto auto 1fr;
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .summary {
+    position: sticky;
+    top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
+        var(--Spacing-x-half)
+    );
+    z-index: 9;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    margin-top: calc(0px - var(--Spacing-x9));
+  }
+
+  .shadow {
+    display: block;
+    background-color: var(--Main-Grey-White);
+    border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+    border-style: solid;
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top: none;
+    border-bottom: none;
+  }
+
+  .hider {
+    display: block;
+    background-color: var(--Scandic-Brand-Warm-White);
+    position: sticky;
+    top: calc(var(--booking-widget-desktop-height) - 6px);
+    margin-top: var(--Spacing-x4);
+    height: 40px;
+  }
 }

components/HotelReservation/HotelCard/HotelPriceCard/hotelPriceCard.module.css

@@ -5,18 +5,6 @@
   margin: 0;
   width: 100%;
 }
-
-.noRooms {
-  display: flex;
-  gap: var(--Spacing-x1);
-}
-
-.prices {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
-}
-
 .divider {
   margin: var(--Spacing-x-half) 0;
 }
@@ -37,9 +25,3 @@
   font-weight: 400;
   font-size: var(--typography-Caption-Regular-fontSize);
 }
-
-@media screen and (min-width: 1367px) {
-  .prices {
-    max-width: 260px;
-  }
-}

components/HotelReservation/HotelCard/HotelPriceCard/index.tsx

@@ -5,7 +5,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import styles from "../hotelPriceList.module.css"
+import styles from "./hotelPriceCard.module.css"
 
 import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps"
 

components/HotelReservation/HotelCard/HotelPriceList/index.tsx

@@ -1,66 +0,0 @@
-import { useParams } from "next/dist/client/components/navigation"
-import { useIntl } from "react-intl"
-
-import { Lang } from "@/constants/languages"
-import { selectRate } from "@/constants/routes/hotelReservation"
-
-import { ErrorCircleIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-
-import HotelPriceCard from "./HotelPriceCard"
-
-import styles from "./hotelPriceList.module.css"
-
-import { HotelPriceListProps } from "@/types/components/hotelReservation/selectHotel/hotePriceListProps"
-
-export default function HotelPriceList({
-  price,
-  hotelId,
-}: HotelPriceListProps) {
-  const intl = useIntl()
-  const params = useParams()
-  const lang = params.lang as Lang
-
-  return (
-    <div className={styles.prices}>
-      {price ? (
-        <>
-          {price.public && <HotelPriceCard productTypePrices={price.public} />}
-          {price.member && (
-            <HotelPriceCard productTypePrices={price.member} isMemberPrice />
-          )}
-          <Button
-            asChild
-            theme="base"
-            intent="primary"
-            size="small"
-            className={styles.button}
-          >
-            <Link
-              href={`${selectRate(lang)}?hotel=${hotelId}`}
-              color="none"
-              keepSearchParams
-            >
-              {intl.formatMessage({ id: "See rooms" })}
-            </Link>
-          </Button>
-        </>
-      ) : (
-        <div className={styles.priceCard}>
-          <div className={styles.noRooms}>
-            <div>
-              <ErrorCircleIcon color="red" />
-            </div>
-            <Body>
-              {intl.formatMessage({
-                id: "There are no rooms available that match your request.",
-              })}
-            </Body>
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}