Merged in fix/sw-1144-prefill-rate (pull request #1121)

fix(SW-1144): preselect room and rate from URL

* fix(SW-1144): preselect room and rate from URL

* Add brackets

components/Header/MainMenu/MobileMenu/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Suspense, useEffect } from "react"
+import { useEffect } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useSearchParams } from "next/navigation"
+import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
@@ -24,6 +26,44 @@ export default function FlexibilityOption({
   handleSelectRate,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
+  const inputElementRef = useRef<HTMLInputElement>(null)
+
+  const searchParams = useSearchParams()
+
+  // When entering the page with a room and rate selection already in the URL we
+  // want to preselect the selection. This happens e.g. when you do a selection,
+  // go to the enter details page and then want to change the room.
+  useEffect(() => {
+    const ratecodeSearchParam = searchParams.get("room[0].ratecode")
+    const roomtypeSearchParam = searchParams.get("room[0].roomtype")
+
+    // If this is not the room and rate we want to preselect, abort
+    if (
+      !product ||
+      ratecodeSearchParam !== product.productType.public.rateCode ||
+      roomtypeSearchParam !== roomTypeCode
+    ) {
+      return
+    }
+
+    handleSelectRate((prev) => {
+      // If the user already has made a new selection we respect that and don't do anything else
+      if (prev) {
+        return prev
+      }
+
+      if (inputElementRef.current) {
+        inputElementRef.current.checked = true
+      }
+
+      return {
+        publicRateCode: product.productType.public.rateCode,
+        roomTypeCode: roomTypeCode,
+        name: name,
+        paymentTerm: paymentTerm,
+      }
+    })
+  }, [handleSelectRate, name, paymentTerm, product, roomTypeCode, searchParams])
 
   if (!product) {
     return (
@@ -72,6 +112,7 @@ export default function FlexibilityOption({
         name="rateCode"
         value={publicPrice?.rateCode}
         onClick={onClick}
+        ref={inputElementRef}
       />
       <div className={`${styles.card} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
         <div className={styles.header}>