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

@@ -1,70 +1,54 @@
-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 "./bedSelection.module.css"
 
-const choices = [
-  {
-    value: "queen",
-    name: "Queen bed",
-    payment: "160 cm",
-    pricePerNight: 0,
-    membersPricePerNight: 0,
-    currency: "SEK",
-  },
-  {
-    value: "king",
-    name: "King bed",
-    payment: "160 cm",
-    pricePerNight: 0,
-    membersPricePerNight: 0,
-    currency: "SEK",
-  },
-  {
-    value: "twin",
-    name: "Twin bed",
-    payment: "90 cm + 90 cm",
-    pricePerNight: 82,
-    membersPricePerNight: 67,
-    currency: "SEK",
-  },
-]
+import { BedSelectionProps } from "@/types/components/hotelReservation/selectRate/section"
 
-export default async function BedSelection() {
-  const { formatMessage } = await getIntl()
+export default function BedSelection({
+  alternatives,
+  nextPath,
+}: BedSelectionProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    const queryParams = new URLSearchParams(searchParams)
+    queryParams.set("bed", e.currentTarget.bed?.value)
+    router.push(`${nextPath}?${queryParams}`)
+  }
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.header}>
-        <Header
-          title={formatMessage({ id: "Choose type of bed" })}
-          subtitle={formatMessage({ id: "How do you want to sleep?" })}
-        />
-        <p>
-          {formatMessage({
-            id: "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.",
-          })}
-        </p>
-      </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="bed" value={alternative.value} />
+                <SelectionCard
+                  title={alternative.name}
+                  subtext={`(${alternative.payment})`}
+                  price={alternative.pricePerNight}
+                  membersPrice={alternative.membersPricePerNight}
+                  currency={alternative.currency}
+                />
+              </label>
+            </li>
+          ))}
+        </ul>
 
-      <ul className={styles.list}>
-        {choices.map((choice) => (
-          <li key={choice.value}>
-            <label>
-              <input type="radio" name="bed" value={choice.value} />
-              <SelectionCard
-                title={choice.name}
-                subtext={`(${choice.payment})`}
-                price={choice.pricePerNight}
-                membersPrice={choice.membersPricePerNight}
-                currency={choice.currency}
-              />
-            </label>
-          </li>
-        ))}
-      </ul>
+        <button type="submit" hidden>
+          Submit
+        </button>
+      </form>
     </div>
   )
 }