Merged in feat/sw-610-summary (pull request #774)

Feat/SW-610 summary

Approved-by: Tobias Johansson
Approved-by: Simon.Emanuelsson

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/page.tsx

@@ -13,7 +13,10 @@ export default async function HotelSidePeek({
   if (!searchParams.hotel) {
     redirect(`/${params.lang}`)
   }
-  const hotel = await getHotelData(searchParams.hotel, params.lang)
+  const hotel = await getHotelData({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+  })
   if (!hotel?.data) {
     redirect(`/${params.lang}`)
   }

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

@@ -0,0 +1,78 @@
+import { notFound } from "next/navigation"
+
+import {
+  getProfileSafely,
+  getSelectedRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"
+
+import Summary from "@/components/HotelReservation/EnterDetails/Summary"
+import { getQueryParamsForEnterDetails } 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({
+  params,
+  searchParams,
+}: PageArgs<LangParams, SearchParams<SelectRateSearchParams>>) {
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const { hotel, adults, children, roomTypeCode, rateCode, fromDate, toDate } =
+    getQueryParamsForEnterDetails(selectRoomParams)
+
+  if (!roomTypeCode || !rateCode) {
+    console.log("No roomTypeCode or rateCode")
+    return notFound()
+  }
+
+  const availability = await getSelectedRoomAvailability({
+    hotelId: parseInt(hotel),
+    adults,
+    children,
+    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,
+        cancellationText: availability.cancellationText,
+      }}
+    />
+  )
+}

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,16 +1,16 @@
 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 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,
@@ -19,19 +19,21 @@ export default async function StepLayout({
   LayoutArgs<LangParams & { step: StepEnum }> & {
     hotelHeader: React.ReactNode
     sidePeek: React.ReactNode
-  }
->) {
+    summary: React.ReactNode
+  }>) {
   setLang(params.lang)
   preload()
   return (
-    <EnterDetailsProvider step={params.step}>
+    <EnterDetailsProvider step={params.step} >
       <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}

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

@@ -6,7 +6,9 @@ import {
   getHotelData,
   getProfileSafely,
   getRoomAvailability,
+  getSelectedRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
+import { HotelIncludeEnum } from "@/server/routers/hotels/input"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
@@ -14,10 +16,11 @@ 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 getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { 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() {
@@ -32,35 +35,56 @@ 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)
-  const stepParams = new URLSearchParams(searchParams)
-  const paramsObject = getHotelReservationQueryParams(stepParams)
-  void getRoomAvailability({
-    hotelId: paramsObject.hotel,
-    adults: paramsObject.room[0].adults,
-    roomStayStartDate: paramsObject.fromDate,
-    roomStayEndDate: paramsObject.toDate,
-  })
-  const intl = await getIntl()
+}: PageArgs<LangParams & { step: StepEnum }, SelectRateSearchParams>) {
+  const { lang } = params
 
-  const hotel = await getHotelData(searchParams.hotel, params.lang)
+  void getBreakfastPackages(searchParams.hotel)
+
+  const intl = await getIntl()
+  const selectRoomParams = new URLSearchParams(searchParams)
+  const {
+    hotel: hotelId,
+    adults,
+    children,
+    roomTypeCode,
+    rateCode,
+    fromDate,
+    toDate,
+  } = getQueryParamsForEnterDetails(selectRoomParams)
+
+  if (!rateCode || !roomTypeCode) {
+    return notFound()
+  }
+
+  void getSelectedRoomAvailability({
+    hotelId: parseInt(searchParams.hotel),
+    adults,
+    children,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    rateCode,
+    roomTypeCode,
+  })
+
+  const hotelData = await getHotelData({
+    hotelId,
+    language: lang,
+    include: [HotelIncludeEnum.RoomCategories],
+  })
+  const roomAvailability = await getSelectedRoomAvailability({
+    hotelId: parseInt(searchParams.hotel),
+    adults,
+    children,
+    roomStayStartDate: fromDate,
+    roomStayEndDate: toDate,
+    rateCode,
+    roomTypeCode,
+  })
+  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
-  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
 
-  const roomAvailability = await getRoomAvailability({
-    hotelId: paramsObject.hotel,
-    adults: paramsObject.room[0].adults,
-    roomStayStartDate: paramsObject.fromDate,
-    roomStayEndDate: paramsObject.toDate,
-    rateCode: paramsObject.room[0].ratecode,
-  })
-
-  if (!isValidStep(params.step) || !hotel || !roomAvailability) {
+  if (!isValidStep(params.step) || !hotelData || !roomAvailability) {
     return notFound()
   }
 
@@ -79,16 +103,30 @@ export default async function StepPage({
     id: "Select payment method",
   })
 
+  const availableRoom = roomAvailability.selectedRoom?.roomType
+  const bedTypes = hotelData.included
+    ?.find((room) => room.name === availableRoom)
+    ?.roomTypes.map((room) => ({
+      description: room.mainBed.description,
+      size: room.mainBed.widthRange,
+      value: room.code,
+    }))
+
   return (
     <section>
       <HistoryStateManager />
-      <SectionAccordion
-        header={intl.formatMessage({ id: "Select bed" })}
-        step={StepEnum.selectBed}
-        label={intl.formatMessage({ id: "Request bedtype" })}
-      >
-        <BedType />
-      </SectionAccordion>
+
+      {/* TODO: How to handle no beds found? */}
+      {bedTypes ? (
+        <SectionAccordion
+          header="Select bed"
+          step={StepEnum.selectBed}
+          label={intl.formatMessage({ id: "Request bedtype" })}
+        >
+          <BedType bedTypes={bedTypes} />
+        </SectionAccordion>
+      ) : null}
+
       <SectionAccordion
         header={intl.formatMessage({ id: "Food options" })}
         step={StepEnum.breakfast}
@@ -111,7 +149,7 @@ export default async function StepPage({
         <Payment
           hotelId={searchParams.hotel}
           otherPaymentOptions={
-            hotel.data.attributes.merchantInformationData
+            hotelData.data.attributes.merchantInformationData
               .alternatePaymentOptions
           }
           savedCreditCards={savedCreditCards}

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

@@ -1,4 +1,3 @@
 .layout {
-  min-height: 100dvh;
   background-color: var(--Base-Background-Primary-Normal);
 }

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

@@ -10,7 +10,7 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
-import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"

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

@@ -2,10 +2,11 @@ import { notFound } from "next/navigation"
 
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
+import { HotelIncludeEnum } from "@/server/routers/hotels/input"
 
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
 import Rooms from "@/components/HotelReservation/SelectRate/Rooms"
-import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { getHotelReservationQueryParams } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
 
 import { generateChildrenString } from "../select-hotel/utils"
@@ -38,7 +39,7 @@ export default async function SelectRatePage({
     serverClient().hotel.hotelData.get({
       hotelId: searchParams.hotel,
       language: params.lang,
-      include: ["RoomCategories"],
+      include: [HotelIncludeEnum.RoomCategories],
     }),
     serverClient().hotel.availability.rooms({
       hotelId: parseInt(searchParams.hotel, 10),