Merge branch 'develop'

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

@@ -14,7 +14,10 @@ export default async function HotelHeader({
   if (!searchParams.hotel) {
     redirect(home)
   }
-  const hotel = await getHotelData(searchParams.hotel, params.lang)
+  const hotel = await getHotelData({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+  })
   if (!hotel?.data) {
     redirect(home)
   }

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

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

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

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

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

@@ -1,21 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { getHotelData } from "@/lib/trpc/memoizedRequests"
-
-import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function HotelSidePeek({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { hotel: string }>) {
-  if (!searchParams.hotel) {
-    redirect(`/${params.lang}`)
-  }
-  const hotel = await getHotelData(searchParams.hotel, params.lang)
-  if (!hotel?.data) {
-    redirect(`/${params.lang}`)
-  }
-  return <SidePeek hotel={hotel.data.attributes} />
-}

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

@@ -0,0 +1,75 @@
+import {
+  getProfileSafely,
+  getSelectedRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"
+
+import Summary from "@/components/HotelReservation/EnterDetails/Summary"
+import {
+  generateChildrenString,
+  getQueryParamsForEnterDetails,
+  mapChildrenFromString,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { LangParams, PageArgs, SearchParams } from "@/types/params"
+
+export default async function SummaryPage({
+  searchParams,
+}: PageArgs<LangParams, SearchParams<SelectRateSearchParams>>) {
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const { hotel, adults, children, roomTypeCode, rateCode, fromDate, toDate } =
+    getQueryParamsForEnterDetails(selectRoomParams)
+
+  const availability = await getSelectedRoomAvailability({
+    hotelId: hotel,
+    adults,
+    children: children ? generateChildrenString(children) : undefined,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    rateCode,
+    roomTypeCode,
+  })
+  const user = await getProfileSafely()
+
+  if (!availability) {
+    console.error("No hotel or availability data", availability)
+    // TODO: handle this case
+    return null
+  }
+
+  const prices = user
+    ? {
+        local: {
+          price: availability.memberRate?.localPrice.pricePerStay,
+          currency: availability.memberRate?.localPrice.currency,
+        },
+        euro: {
+          price: availability.memberRate?.requestedPrice?.pricePerStay,
+          currency: availability.memberRate?.requestedPrice?.currency,
+        },
+      }
+    : {
+        local: {
+          price: availability.publicRate?.localPrice.pricePerStay,
+          currency: availability.publicRate?.localPrice.currency,
+        },
+        euro: {
+          price: availability.publicRate?.requestedPrice?.pricePerStay,
+          currency: availability.publicRate?.requestedPrice?.currency,
+        },
+      }
+
+  return (
+    <Summary
+      isMember={!!user}
+      room={{
+        roomType: availability.selectedRoom.roomType,
+        localPrice: prices.local,
+        euroPrice: prices.euro,
+        adults,
+        children,
+        cancellationText: availability.cancellationText,
+      }}
+    />
+  )
+}

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

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

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

@@ -1,5 +1,4 @@
 .layout {
-  min-height: 100dvh;
   background-color: var(--Scandic-Brand-Warm-White);
 }
 
@@ -9,7 +8,6 @@
   grid-template-columns: 1fr 340px;
   grid-template-rows: auto 1fr;
   margin: var(--Spacing-x5) auto 0;
-  padding-top: var(--Spacing-x6);
   /* simulates padding on viewport smaller than --max-width-navigation */
   width: min(
     calc(100dvw - (var(--Spacing-x2) * 2)),
@@ -17,8 +15,81 @@
   );
 }
 
-.summary {
-  align-self: flex-start;
+.summaryContainer {
   grid-column: 2 / 3;
   grid-row: 1/-1;
 }
+
+.summary {
+  background-color: var(--Main-Grey-White);
+
+  border-color: var(--Primary-Light-On-Surface-Divider-subtle);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Large);
+
+  z-index: 1;
+}
+
+.hider {
+  display: none;
+}
+
+.shadow {
+  display: none;
+}
+
+@media screen and (min-width: 950px) {
+  .summaryContainer {
+    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(--booking-widget-desktop-height) + var(--Spacing-x-one-and-half)
+    );
+    margin-top: calc(0px - var(--Spacing-x9));
+    border-bottom: none;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+  }
+
+  .hider {
+    display: block;
+    background-color: var(--Scandic-Brand-Warm-White);
+    position: sticky;
+    margin-top: var(--Spacing-x4);
+    top: calc(
+      var(--booking-widget-desktop-height) +
+        var(--booking-widget-desktop-height) - 6px
+    );
+    height: 40px;
+  }
+
+  .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;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .summary {
+    top: calc(
+      var(--booking-widget-desktop-height) + var(--Spacing-x2) +
+        var(--Spacing-x-half)
+    );
+  }
+
+  .hider {
+    top: calc(var(--booking-widget-desktop-height) - 6px);
+  }
+}

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

@@ -1,40 +1,46 @@
+import {
+  getCreditCardsSafely,
+  getProfileSafely,
+} from "@/lib/trpc/memoizedRequests"
+
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
-import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import { setLang } from "@/i18n/serverContext"
 
-import { preload } from "./page"
+import { preload } from "./_preload"
 
 import styles from "./layout.module.css"
 
-import { StepEnum } from "@/types/components/enterDetails/step"
+import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function StepLayout({
+  summary,
   children,
   hotelHeader,
   params,
-  sidePeek,
 }: React.PropsWithChildren<
   LayoutArgs<LangParams & { step: StepEnum }> & {
     hotelHeader: React.ReactNode
-    sidePeek: React.ReactNode
+    summary: React.ReactNode
   }
 >) {
   setLang(params.lang)
   preload()
+
+  const user = await getProfileSafely()
+
   return (
-    <EnterDetailsProvider step={params.step}>
+    <EnterDetailsProvider step={params.step} isMember={!!user}>
       <main className={styles.layout}>
         {hotelHeader}
         <div className={styles.content}>
-          <SelectedRoom />
           {children}
-          <aside className={styles.summary}>
-            <Summary />
+          <aside className={styles.summaryContainer}>
+            <div className={styles.hider} />
+            <div className={styles.summary}>{summary}</div>
+            <div className={styles.shadow} />
           </aside>
         </div>
-        {sidePeek}
       </main>
     </EnterDetailsProvider>
   )

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

@@ -1,11 +1,11 @@
-import { notFound, redirect } from "next/navigation"
+import { notFound } from "next/navigation"
 
 import {
   getBreakfastPackages,
   getCreditCardsSafely,
   getHotelData,
   getProfileSafely,
-  getRoomAvailability,
+  getSelectedRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
@@ -14,16 +14,17 @@ import Details from "@/components/HotelReservation/EnterDetails/Details"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import {
+  generateChildrenString,
+  getQueryParamsForEnterDetails,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { getIntl } from "@/i18n"
 
-import { StepEnum } from "@/types/components/enterDetails/step"
+import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { LangParams, PageArgs } from "@/types/params"
 
-export function preload() {
-  void getProfileSafely()
-  void getCreditCardsSafely()
-}
-
 function isValidStep(step: string): step is StepEnum {
   return Object.values(StepEnum).includes(step as StepEnum)
 }
@@ -31,34 +32,53 @@ function isValidStep(step: string): step is StepEnum {
 export default async function StepPage({
   params,
   searchParams,
-}: PageArgs<LangParams & { step: StepEnum }, { hotel: string }>) {
-  if (!searchParams.hotel) {
-    redirect(`/${params.lang}`)
-  }
-  void getBreakfastPackages(searchParams.hotel)
-  void getRoomAvailability({
-    hotelId: searchParams.hotel,
-    adults: Number(searchParams.adults),
-    roomStayStartDate: searchParams.checkIn,
-    roomStayEndDate: searchParams.checkOut,
-  })
+}: PageArgs<LangParams & { step: StepEnum }, SelectRateSearchParams>) {
+  const { lang } = params
 
   const intl = await getIntl()
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const {
+    hotel: hotelId,
+    adults,
+    children,
+    roomTypeCode,
+    rateCode,
+    fromDate,
+    toDate,
+  } = getQueryParamsForEnterDetails(selectRoomParams)
 
-  const hotel = await getHotelData(searchParams.hotel, params.lang)
-  const user = await getProfileSafely()
-  const savedCreditCards = await getCreditCardsSafely()
-  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
+  const childrenAsString = children && generateChildrenString(children)
 
-  const roomAvailability = await getRoomAvailability({
-    hotelId: searchParams.hotel,
-    adults: Number(searchParams.adults),
-    roomStayStartDate: searchParams.checkIn,
-    roomStayEndDate: searchParams.checkOut,
-    rateCode: searchParams.rateCode,
+  const breakfastInput = { adults, fromDate, hotelId, toDate }
+  void getBreakfastPackages(breakfastInput)
+  void getSelectedRoomAvailability({
+    hotelId,
+    adults,
+    children: childrenAsString,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    rateCode,
+    roomTypeCode,
   })
 
-  if (!isValidStep(params.step) || !hotel || !roomAvailability) {
+  const hotelData = await getHotelData({
+    hotelId,
+    language: lang,
+  })
+  const roomAvailability = await getSelectedRoomAvailability({
+    hotelId,
+    adults,
+    children: childrenAsString,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    rateCode,
+    roomTypeCode,
+  })
+  const breakfastPackages = await getBreakfastPackages(breakfastInput)
+  const user = await getProfileSafely()
+  const savedCreditCards = await getCreditCardsSafely()
+
+  if (!isValidStep(params.step) || !hotelData || !roomAvailability) {
     return notFound()
   }
 
@@ -80,13 +100,20 @@ export default async function StepPage({
   return (
     <section>
       <HistoryStateManager />
-      <SectionAccordion
-        header={intl.formatMessage({ id: "Select bed" })}
-        step={StepEnum.selectBed}
-        label={intl.formatMessage({ id: "Request bedtype" })}
-      >
-        <BedType />
-      </SectionAccordion>
+
+      <SelectedRoom hotelId={hotelId} room={roomAvailability.selectedRoom} />
+
+      {/* TODO: How to handle no beds found? */}
+      {roomAvailability.bedTypes ? (
+        <SectionAccordion
+          header="Select bed"
+          step={StepEnum.selectBed}
+          label={intl.formatMessage({ id: "Request bedtype" })}
+        >
+          <BedType bedTypes={roomAvailability.bedTypes} />
+        </SectionAccordion>
+      ) : null}
+
       <SectionAccordion
         header={intl.formatMessage({ id: "Food options" })}
         step={StepEnum.breakfast}
@@ -109,7 +136,7 @@ export default async function StepPage({
         <Payment
           hotelId={searchParams.hotel}
           otherPaymentOptions={
-            hotel.data.attributes.merchantInformationData
+            hotelData.data.attributes.merchantInformationData
               .alternatePaymentOptions
           }
           savedCreditCards={savedCreditCards}