diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx index ca81791cd..702f5c692 100644 --- a/components/Header/MainMenu/MobileMenu/index.tsx +++ b/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" diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx index 32e1b3d7f..6002b686f 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx +++ b/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(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} />