diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx index 05a05973b..15962dd25 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx @@ -19,7 +19,9 @@ import styles from "./mobileSummary.module.css" export function MobileSummary() { const intl = useIntl() const scrollY = useRef(0) - const [isSummaryOpen, setIsSummaryOpen] = useState(false) + const [isSummaryOpen, setIsSummaryOpen] = useState( + undefined + ) const isUserLoggedIn = useIsLoggedIn() const { selectedRates } = useSelectRateContext() @@ -29,6 +31,10 @@ export function MobileSummary() { } useEffect(() => { + if (isSummaryOpen === undefined) { + return + } + if (isSummaryOpen) { scrollY.current = window.scrollY document.body.style.position = "fixed" diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx deleted file mode 100644 index a56723287..000000000 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx +++ /dev/null @@ -1,54 +0,0 @@ -"use client" -import { useEffect } from "react" - -import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext" - -import styles from "./rooms.module.css" - -export default function ScrollToList() { - const { - input: { isMultiRoom }, - selectedRates, - } = useSelectRateContext() - const selectedRateCode = selectedRates.rates[0] - ? `${selectedRates.rates[0].rateDefinition.rateCode}${selectedRates.rates[0].roomInfo.roomTypeCode}` - : null - - useEffect(() => { - if (isMultiRoom) { - return - } - - if (!selectedRateCode) { - return - } - - // Required to prevent the history.pushState on the first selection - // to scroll user back to top - requestAnimationFrame(() => { - const SCROLL_OFFSET = 173 // summary on mobile is 163px - - const checkedRadio = document.querySelector( - `.${styles.roomList} input[type="radio"]:checked` - ) - - const selectedRateCard = checkedRadio?.closest("label") ?? null - - if (selectedRateCard) { - const elementPosition = selectedRateCard.getBoundingClientRect().top - const windowHeight = window.innerHeight - const offsetPosition = - elementPosition + - window.scrollY - - (windowHeight - selectedRateCard.offsetHeight - SCROLL_OFFSET) - - window.scrollTo({ - top: offsetPosition, - behavior: "instant", - }) - } - }) - }, [isMultiRoom, selectedRateCode]) - - return null -} diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx index 89fc72904..cb6b4e8f4 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx +++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx @@ -3,7 +3,6 @@ import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext" import { RoomListItem } from "./RoomListItem" import { RoomsListSkeleton } from "./RoomsListSkeleton" -import ScrollToList from "./ScrollToList" import styles from "./rooms.module.css" @@ -22,7 +21,6 @@ export default function RoomsList({ roomIndex }: { roomIndex: number }) { return ( <> -