Merged in feature/select-room-ux-one-page (pull request #523)

This updates the select room page according to the new UX. It has different sections on the same page, but with specific URLs per section. Since neither UX, UI nor API is completely done both design and data structures are a bit temporary.

Approved-by: Simon.Emanuelsson

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,42 +1,52 @@
-import Header from "@/components/Section/Header"
-import { getIntl } from "@/i18n"
+"use client"
+import { useRouter, useSearchParams } from "next/navigation"
 
 import RoomCard from "./RoomCard"
 
 import styles from "./roomSelection.module.css"
 
-import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/section"
 
-export default async function RoomSelection({ rooms }: RoomSelectionProps) {
-  const { formatMessage } = await getIntl()
+export default function RoomSelection({
+  alternatives,
+  nextPath,
+  nrOfNights,
+  nrOfAdults,
+}: RoomSelectionProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const queryParams = new URLSearchParams(searchParams)
+    queryParams.set("roomClass", e.currentTarget.roomClass?.value)
+    queryParams.set("flexibility", e.currentTarget.flexibility?.value)
+    router.push(`${nextPath}?${queryParams}`)
+  }
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.header}>
-        <Header
-          title={formatMessage({ id: "Choose room" })}
-          subtitle={formatMessage({
-            id: "Which room class suits you the best?",
-          })}
-          link={{
-            href: "#",
-            text: formatMessage({
-              id: "All rooms comes with standard amenities",
-            }),
-          }}
-        />
-      </div>
-
       <ul className={styles.roomList}>
-        {rooms.map((room) => (
+        {alternatives.map((room) => (
           <li key={room.id}>
-            <input
-              type="radio"
-              name="room"
-              value={room.id}
-              id={`room-${room.id}`}
-            />
-            <RoomCard room={room} />
+            <form
+              method="GET"
+              action={`${nextPath}?${searchParams}`}
+              onSubmit={handleSubmit}
+            >
+              <input
+                type="hidden"
+                name="roomClass"
+                value={room.id}
+                id={`room-${room.id}`}
+              />
+              <RoomCard
+                room={room}
+                nrOfAdults={nrOfAdults}
+                nrOfNights={nrOfNights}
+                breakfastIncluded={room.breakfastIncluded}
+              />
+            </form>
           </li>
         ))}
       </ul>