diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx index 320fccfc5..c2a4aab42 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from "react" import { useIntl } from "react-intl" import { dt } from "@/lib/dt" @@ -20,6 +21,13 @@ export default function RateSummary({ roomsAvailability, }: RateSummaryProps) { const intl = useIntl() + const [isVisible, setIsVisible] = useState(false) + + useEffect(() => { + const timer = setTimeout(() => setIsVisible(true), 0) + return () => clearTimeout(timer) + }, []) + const { member, public: publicRate, @@ -45,7 +53,9 @@ export default function RateSummary({ const nights = dt(checkOutDate).diff(dt(checkInDate), "days") return ( -
+
{roomType} {priceName} diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css index 5cb5a4229..79ced8039 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css @@ -1,7 +1,7 @@ .summary { position: fixed; z-index: 10; - bottom: 0; + bottom: -100%; left: 0; right: 0; background-color: var(--Base-Surface-Primary-light-Normal); @@ -9,6 +9,12 @@ display: flex; justify-content: space-between; align-items: center; + border-top: 1px solid var(--Base-Border-Subtle); + transition: bottom 300ms ease-in-out; +} + +.summaryVisible { + bottom: 0; } .summaryPrice { @@ -35,6 +41,7 @@ margin-left: auto; height: fit-content; width: 100%; + min-width: 140px; } .summaryPriceTextMobile {