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/BreakfastSelection/index.tsx

@@ -1,56 +1,57 @@
-import Header from "@/components/Section/Header"
-import { getIntl } from "@/i18n"
+"use client"
+import { useRouter, useSearchParams } from "next/navigation"
 
 import SelectionCard from "../SelectionCard"
 
 import styles from "./breakfastSelection.module.css"
 
-const choices = [
-  {
-    value: "no",
-    name: "No breakfast",
-    payment: "Always cheeper to get it online",
-    pricePerNight: 0,
-    currency: "SEK",
-  },
-  {
-    value: "buffe",
-    name: "Breakfast buffé",
-    payment: "Always cheeper to get it online",
-    pricePerNight: 150,
-    currency: "SEK",
-  },
-]
+import { BreakfastSelectionProps } from "@/types/components/hotelReservation/selectRate/section"
 
-export default async function BreakfastSelection() {
-  const { formatMessage } = await getIntl()
+export default function BreakfastSelection({
+  alternatives,
+  nextPath,
+}: BreakfastSelectionProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const queryParams = new URLSearchParams(searchParams)
+    queryParams.set("breakfast", e.currentTarget.breakfast?.value)
+    router.push(`${nextPath}?${queryParams}`)
+  }
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.header}>
-        <Header
-          title={formatMessage({ id: "Breakfast" })}
-          subtitle={formatMessage({
-            id: "Do you want to start the day with Scandics famous breakfast buffé?",
-          })}
-        />
-      </div>
+      <form
+        method="GET"
+        action={`${nextPath}?${searchParams}`}
+        onSubmit={handleSubmit}
+      >
+        <ul className={styles.list}>
+          {alternatives.map((alternative) => (
+            <li key={alternative.value}>
+              <label>
+                <input
+                  type="radio"
+                  name="breakfast"
+                  value={alternative.value}
+                />
+                <SelectionCard
+                  title={alternative.name}
+                  subtext={alternative.payment}
+                  price={alternative.pricePerNight}
+                  currency={alternative.currency}
+                />
+              </label>
+            </li>
+          ))}
+        </ul>
 
-      <ul className={styles.list}>
-        {choices.map((choice) => (
-          <li key={choice.value}>
-            <label>
-              <input type="radio" name="breakfast" value={choice.value} />
-              <SelectionCard
-                title={choice.name}
-                subtext={choice.payment}
-                price={choice.pricePerNight}
-                currency={choice.currency}
-              />
-            </label>
-          </li>
-        ))}
-      </ul>
+        <button type="submit" hidden>
+          Submit
+        </button>
+      </form>
     </div>
   )
 }