Merge branch 'develop' into feature/tracking

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

@@ -1,5 +1,3 @@
-import { env } from "@/env/server"
-
 import Divider from "@/components/TempDesignSystem/Divider"
 
 import type { ProfileLayoutProps } from "@/types/components/myPages/myProfile/layout"
@@ -17,7 +15,7 @@ export default function ProfileLayout({
         {profile}
         <Divider color="burgundy" opacity={8} />
         {creditCards}
-        {env.HIDE_FOR_NEXT_RELEASE ? null : communication}
+        {communication}
       </section>
     </main>
   )

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { redirect } from "next/navigation"
+
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+
+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 hotel = await getHotelData(searchParams.hotel, params.lang)
+  if (!hotel?.data) {
+    redirect(home)
+  }
+  return <HotelSelectionHeader hotel={hotel.data.attributes} />
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+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]/layout.tsx

@@ -1,46 +1,32 @@
-import { redirect } from "next/navigation"
-
-import {
-  getCreditCardsSafely,
-  getHotelData,
-  getProfileSafely,
-} from "@/lib/trpc/memoizedRequests"
-
 import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
 import Summary from "@/components/HotelReservation/EnterDetails/Summary"
-import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import { setLang } from "@/i18n/serverContext"
 
+import { preload } from "./page"
+
 import styles from "./layout.module.css"
 
 import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
-function preload(id: string, lang: string) {
-  void getHotelData(id, lang)
-  void getProfileSafely()
-  void getCreditCardsSafely()
-}
-
 export default async function StepLayout({
   children,
+  hotelHeader,
   params,
-}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
-  setLang(params.lang)
-  preload("811", params.lang)
-
-  const hotel = await getHotelData("811", params.lang)
-
-  if (!hotel?.data) {
-    redirect(`/${params.lang}`)
+  sidePeek,
+}: React.PropsWithChildren<
+  LayoutArgs<LangParams & { step: StepEnum }> & {
+    hotelHeader: React.ReactNode
+    sidePeek: React.ReactNode
   }
-
+>) {
+  setLang(params.lang)
+  preload()
   return (
     <EnterDetailsProvider step={params.step}>
       <main className={styles.layout}>
-        <HotelSelectionHeader hotel={hotel.data.attributes} />
+        {hotelHeader}
         <div className={styles.content}>
           <SelectedRoom />
           {children}
@@ -48,7 +34,7 @@ export default async function StepLayout({
             <Summary />
           </aside>
         </div>
-        <SidePeek hotel={hotel.data.attributes} />
+        {sidePeek}
       </main>
     </EnterDetailsProvider>
   )

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

@@ -1,9 +1,11 @@
-import { notFound } from "next/navigation"
+import { notFound, redirect } from "next/navigation"
 
 import {
+  getBreakfastPackages,
   getCreditCardsSafely,
   getHotelData,
   getProfileSafely,
+  getRoomAvailability,
 } from "@/lib/trpc/memoizedRequests"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
@@ -17,61 +19,101 @@ import { getIntl } from "@/i18n"
 import { StepEnum } from "@/types/components/enterDetails/step"
 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)
 }
 
 export default async function StepPage({
   params,
-}: PageArgs<LangParams & { step: StepEnum }>) {
-  const { step, lang } = 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,
+  })
 
   const intl = await getIntl()
 
-  const hotel = await getHotelData("811", lang)
+  const hotel = await getHotelData(searchParams.hotel, params.lang)
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
+  const breakfastPackages = await getBreakfastPackages(searchParams.hotel)
 
-  if (!isValidStep(step) || !hotel) {
+  const roomAvailability = await getRoomAvailability({
+    hotelId: searchParams.hotel,
+    adults: Number(searchParams.adults),
+    roomStayStartDate: searchParams.checkIn,
+    roomStayEndDate: searchParams.checkOut,
+    rateCode: searchParams.rateCode,
+  })
+
+  if (!isValidStep(params.step) || !hotel || !roomAvailability) {
     return notFound()
   }
 
+  const mustBeGuaranteed = roomAvailability?.mustBeGuaranteed ?? false
+
+  const paymentGuarantee = intl.formatMessage({
+    id: "Payment Guarantee",
+  })
+  const payment = intl.formatMessage({
+    id: "Payment",
+  })
+  const guaranteeWithCard = intl.formatMessage({
+    id: "Guarantee booking with credit card",
+  })
+  const selectPaymentMethod = intl.formatMessage({
+    id: "Select payment method",
+  })
+
   return (
     <section>
       <HistoryStateManager />
       <SectionAccordion
-        header="Select bed"
+        header={intl.formatMessage({ id: "Select bed" })}
         step={StepEnum.selectBed}
         label={intl.formatMessage({ id: "Request bedtype" })}
       >
         <BedType />
       </SectionAccordion>
       <SectionAccordion
-        header="Food options"
+        header={intl.formatMessage({ id: "Food options" })}
         step={StepEnum.breakfast}
         label={intl.formatMessage({ id: "Select breakfast options" })}
       >
-        <Breakfast />
+        <Breakfast packages={breakfastPackages} />
       </SectionAccordion>
       <SectionAccordion
-        header="Details"
+        header={intl.formatMessage({ id: "Details" })}
         step={StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
       >
         <Details user={user} />
       </SectionAccordion>
       <SectionAccordion
-        header="Payment"
+        header={mustBeGuaranteed ? paymentGuarantee : payment}
         step={StepEnum.payment}
-        label={intl.formatMessage({ id: "Select payment method" })}
+        label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
       >
         <Payment
-          hotelId={hotel.data.attributes.operaId}
+          hotelId={searchParams.hotel}
           otherPaymentOptions={
             hotel.data.attributes.merchantInformationData
               .alternatePaymentOptions
           }
           savedCreditCards={savedCreditCards}
+          mustBeGuaranteed={mustBeGuaranteed}
         />
       </SectionAccordion>
     </section>

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

@@ -7,6 +7,7 @@ import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
   fetchAvailableHotels,
+  generateChildrenString,
   getFiltersFromHotels,
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
@@ -50,7 +51,8 @@ export default async function SelectHotelPage({
   const selectHotelParamsObject =
     getHotelReservationQueryParams(selectHotelParams)
   const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selectHotelParamsObject.room[0].child?.length // TODO: Handle multiple rooms
+  const child = selectHotelParamsObject.room[0].child
+  const children = child ? generateChildrenString(child) : undefined // TODO: Handle multiple rooms
 
   const hotels = await fetchAvailableHotels({
     cityId: city.id,
@@ -80,7 +82,7 @@ export default async function SelectHotelPage({
     arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
     departureDate: format(departureDate, "yyyy-MM-dd"),
     noOfAdults: adults,
-    noOfChildren: children,
+    noOfChildren: child?.length,
     noOfRooms: 1, // // TODO: Handle multiple rooms
     duration: differenceInCalendarDays(departureDate, arrivalDate),
     leadTime: differenceInCalendarDays(arrivalDate, new Date()),

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -2,9 +2,11 @@ import { serverClient } from "@/lib/trpc/server"
 
 import { getLang } from "@/i18n/serverContext"
 
+import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
 import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
 import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export async function fetchAvailableHotels(
   input: AvailabilityInput
@@ -41,3 +43,19 @@ export function getFiltersFromHotels(hotels: HotelData[]) {
 
   return filterList
 }
+
+const bedTypeMap: Record<number, string> = {
+  [BedTypeEnum.IN_ADULTS_BED]: "ParentsBed",
+  [BedTypeEnum.IN_CRIB]: "Crib",
+  [BedTypeEnum.IN_EXTRA_BED]: "ExtraBed",
+}
+
+export function generateChildrenString(children: Child[]): string {
+  return `[${children
+    ?.map((child) => {
+      const age = child.age
+      const bedType = bedTypeMap[+child.bed]
+      return `${age}:${bedType}`
+    })
+    .join(",")}]`
+}

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

@@ -1,24 +0,0 @@
-.page {
-  min-height: 100dvh;
-  padding-top: var(--Spacing-x6);
-  padding-left: var(--Spacing-x2);
-  padding-right: var(--Spacing-x2);
-  background-color: var(--Scandic-Brand-Warm-White);
-}
-
-.content {
-  max-width: var(--max-width);
-  margin: 0 auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x7);
-  padding: var(--Spacing-x2);
-}
-
-.main {
-  flex-grow: 1;
-}
-
-.summary {
-  max-width: 340px;
-}

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

@@ -1,14 +1,17 @@
+import { notFound } from "next/navigation"
+
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
-import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
+import Rooms from "@/components/HotelReservation/SelectRate/Rooms"
 import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { setLang } from "@/i18n/serverContext"
 
-import styles from "./page.module.css"
+import { generateChildrenString } from "../select-hotel/utils"
 
-import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { LangParams, PageArgs } from "@/types/params"
 
 export default async function SelectRatePage({
@@ -20,10 +23,18 @@ export default async function SelectRatePage({
   const selectRoomParams = new URLSearchParams(searchParams)
   const selectRoomParamsObject =
     getHotelReservationQueryParams(selectRoomParams)
-  const adults = selectRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selectRoomParamsObject.room[0].child?.length // TODO: Handle multiple rooms
 
-  const [hotelData, roomConfigurations, user] = await Promise.all([
+  if (!selectRoomParamsObject.room) {
+    return notFound()
+  }
+
+  const adults = selectRoomParamsObject.room[0].adults // 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([
     serverClient().hotel.hotelData.get({
       hotelId: searchParams.hotel,
       language: params.lang,
@@ -36,10 +47,22 @@ export default async function SelectRatePage({
       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 (!roomConfigurations) {
+  if (!roomsAvailability) {
     return "No rooms found" // TODO: Add a proper error message
   }
 
@@ -50,17 +73,14 @@ export default async function SelectRatePage({
   const roomCategories = hotelData?.included
 
   return (
-    <div>
+    <>
       <HotelInfoCard hotelData={hotelData} />
-      <div className={styles.content}>
-        <div className={styles.main}>
-          <RoomSelection
-            roomConfigurations={roomConfigurations}
-            roomCategories={roomCategories ?? []}
-            user={user}
-          />
-        </div>
-      </div>
-    </div>
+      <Rooms
+        roomsAvailability={roomsAvailability}
+        roomCategories={roomCategories ?? []}
+        user={user}
+        packages={packages ?? []}
+      />
+    </>
   )
 }

app/[lang]/(live)/@bookingwidget/page.tsx

@@ -3,13 +3,11 @@ import { serverClient } from "@/lib/trpc/server"
 
 import BookingWidget, { preload } from "@/components/BookingWidget"
 
-import { BookingWidgetSearchParams } from "@/types/components/bookingWidget"
-import { LangParams, PageArgs } from "@/types/params"
+import { PageArgs } from "@/types/params"
 
 export default async function BookingWidgetPage({
-  params,
   searchParams,
-}: PageArgs<LangParams, BookingWidgetSearchParams>) {
+}: PageArgs<{}, URLSearchParams>) {
   if (env.HIDE_FOR_NEXT_RELEASE) {
     return null
   }