Merged in feat/SW-454-select-room-api (pull request #648)

Feat/SW-454 Create select rate page foundation

* Extract select-rate page to its own, fixed route

* Rename availability to hotelsAvailability

* Update availability hotels response

* Number to string


Approved-by: Pontus Dreij

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

@@ -8,7 +8,6 @@ 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 RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
 import Summary from "@/components/HotelReservation/SelectRate/Summary"
 import { getIntl } from "@/i18n"
@@ -138,18 +137,7 @@ export default async function SectionsPage({
                 : undefined
             }
             path={`select-rate?${currentSearchParams}`}
-          >
-            {params.section === "select-rate" && (
-              <RoomSelection
-                alternatives={rooms}
-                nextPath="select-bed"
-                // TODO: Get real value
-                nrOfNights={1}
-                // TODO: Get real value
-                nrOfAdults={1}
-              />
-            )}
-          </SectionAccordion>
+          ></SectionAccordion>
           <SectionAccordion
             header={intl.formatMessage({ id: "Bed type" })}
             selection={selectedBed}

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

@@ -9,7 +9,7 @@ import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFil
 export async function fetchAvailableHotels(
   input: AvailabilityInput
 ): Promise<HotelData[]> {
-  const availableHotels = await serverClient().hotel.availability.get(input)
+  const availableHotels = await serverClient().hotel.availability.hotels(input)
 
   if (!availableHotels) throw new Error()
 

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

@@ -0,0 +1,25 @@
+.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);
+}
+
+.main {
+  flex-grow: 1;
+}
+
+.summary {
+  max-width: 340px;
+}

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

@@ -0,0 +1,53 @@
+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"
+
+import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectRatePage({
+  params,
+  searchParams,
+}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
+  setLang(params.lang)
+
+  // 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 rates = await serverClient().hotel.availability.getForHotel({
+  // hotelId: 811,
+  // roomStayStartDate: "2024-11-02",
+  // roomStayEndDate: "2024-11-03",
+  // adults: 1,
+  // })
+  const intl = await getIntl()
+
+  return (
+    <div>
+      {/* TODO: Add Hotel Listing Card */}
+      <div>Hotel Listing Card TBI</div>
+
+      <div className={styles.content}>
+        <div className={styles.main}>
+          <RoomSelection
+            rates={rates}
+            // TODO: Get real value
+            nrOfNights={1}
+            // TODO: Get real value
+            nrOfAdults={1}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}