Merge branch 'develop' into feature/sw-561-design-fixes

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

@@ -0,0 +1,20 @@
+.layout {
+  min-height: 100dvh;
+  background-color: var(--Scandic-Brand-Warm-White);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x3) var(--Spacing-x9);
+  grid-template-columns: 1fr 340px;
+  grid-template-rows: auto 1fr;
+  margin: var(--Spacing-x5) auto 0;
+  max-width: var(--max-width-navigation);
+  padding: var(--Spacing-x6) var(--Spacing-x2) 0;
+}
+
+.summary {
+  align-self: flex-start;
+  grid-column: 2 / 3;
+  grid-row: 1/-1;
+}

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

@@ -0,0 +1,38 @@
+import { redirect } from "next/navigation"
+
+import { serverClient } from "@/lib/trpc/server"
+
+import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+import Summary from "@/components/HotelReservation/SelectRate/Summary"
+
+import styles from "./layout.module.css"
+
+import type { LangParams, LayoutArgs } from "@/types/params"
+
+export default async function StepLayout({
+  children,
+  params,
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  const hotel = await serverClient().hotel.hotelData.get({
+    hotelId: "811",
+    language: params.lang,
+  })
+
+  if (!hotel?.data) {
+    redirect(`/${params.lang}`)
+  }
+
+  return (
+    <main className={styles.layout}>
+      <HotelSelectionHeader hotel={hotel.data.attributes} />
+      <div className={styles.content}>
+        <SelectedRoom />
+        {children}
+        <aside className={styles.summary}>
+          <Summary />
+        </aside>
+      </div>
+    </main>
+  )
+}

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

@@ -1,30 +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: 1134px;
-  margin-top: var(--Spacing-x5);
-  margin-left: auto;
-  margin-right: auto;
-  display: flex;
-  justify-content: space-between;
-  gap: var(--Spacing-x7);
-}
-
-.section {
-  flex-grow: 1;
-}
-
-.summary {
-  max-width: 340px;
-}
-
-.form {
-  display: grid;
-  gap: var(--Spacing-x2);
-}

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

@@ -9,15 +9,11 @@ import { trpc } from "@/lib/trpc/client"
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
-import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
-import Summary from "@/components/HotelReservation/SelectRate/Summary"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
-import styles from "./page.module.css"
-
-import { LangParams, PageArgs } from "@/types/params"
+import type { LangParams, PageArgs } from "@/types/params"
 
 enum StepEnum {
   selectBed = "select-bed",
@@ -75,51 +71,43 @@ export default function StepPage({
   }
 
   return (
-    <main className={styles.page}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-      <div className={styles.content}>
-        <section className={styles.section}>
-          <SectionAccordion
-            header="Select bed"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.selectBed}
-            label={intl.formatMessage({ id: "Request bedtype" })}
-            path="/select-bed"
-          >
-            <BedType />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Food options"
-            isCompleted={true}
-            isOpen={activeStep === StepEnum.breakfast}
-            label={intl.formatMessage({ id: "Select breakfast options" })}
-            path="/breakfast"
-          >
-            <Breakfast />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Details"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.details}
-            label={intl.formatMessage({ id: "Enter your details" })}
-            path="/details"
-          >
-            <Details user={null} />
-          </SectionAccordion>
-          <SectionAccordion
-            header="Payment"
-            isCompleted={false}
-            isOpen={activeStep === StepEnum.payment}
-            label={intl.formatMessage({ id: "Select payment method" })}
-            path="/hotelreservation/select-bed"
-          >
-            <Payment hotel={hotel.data.attributes} />
-          </SectionAccordion>
-        </section>
-        <aside className={styles.summary}>
-          <Summary />
-        </aside>
-      </div>
-    </main>
+    <section>
+      <SectionAccordion
+        header="Select bed"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.selectBed}
+        label={intl.formatMessage({ id: "Request bedtype" })}
+        path="/select-bed"
+      >
+        <BedType />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Food options"
+        isCompleted={true}
+        isOpen={activeStep === StepEnum.breakfast}
+        label={intl.formatMessage({ id: "Select breakfast options" })}
+        path="/breakfast"
+      >
+        <Breakfast />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Details"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.details}
+        label={intl.formatMessage({ id: "Enter your details" })}
+        path="/details"
+      >
+        <Details user={null} />
+      </SectionAccordion>
+      <SectionAccordion
+        header="Payment"
+        isCompleted={false}
+        isOpen={activeStep === StepEnum.payment}
+        label={intl.formatMessage({ id: "Select payment method" })}
+        path="/hotelreservation/select-bed"
+      >
+        <Payment hotel={hotel.data.attributes} />
+      </SectionAccordion>
+    </section>
   )
 }

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

@@ -2,7 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
-import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
@@ -19,18 +18,15 @@ export default async function SelectRatePage({
   // TODO: Use real endpoint.
   const hotel = tempHotelData.data.attributes
 
-  const rates = await serverClient().hotel.rates.get({
-    // TODO: pass the correct hotel ID and all other parameters that should be included in the search
-    hotelId: searchParams.hotel,
+  const roomConfigurations = await serverClient().hotel.availability.rooms({
+    hotelId: parseInt(searchParams.hotel, 10),
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
   })
-
-  // const rates = await serverClient().hotel.availability.getForHotel({
-  // hotelId: 811,
-  // roomStayStartDate: "2024-11-02",
-  // roomStayEndDate: "2024-11-03",
-  // adults: 1,
-  // })
-  const intl = await getIntl()
+  if (!roomConfigurations) {
+    return "No rooms found"
+  }
 
   return (
     <div>
@@ -39,13 +35,7 @@ export default async function SelectRatePage({
 
       <div className={styles.content}>
         <div className={styles.main}>
-          <RoomSelection
-            rates={rates}
-            // TODO: Get real value
-            nrOfNights={1}
-            // TODO: Get real value
-            nrOfAdults={1}
-          />
+          <RoomSelection roomConfigurations={roomConfigurations} />
         </div>
       </div>
     </div>