From 73fc63b4931dde1764a7e106baf2f8d79420e192 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 8 Nov 2024 16:59:40 +0100 Subject: [PATCH 1/2] fix(589): Added animation to rate summary --- .../SelectRate/RoomSelection/RateSummary/index.tsx | 12 +++++++++++- .../RoomSelection/RateSummary/rateSummary.module.css | 9 ++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) 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 { From 3c128f487951164dbd50d270762270c79e42c5f4 Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Fri, 8 Nov 2024 17:04:04 +0100 Subject: [PATCH 2/2] fix(SW-589): Change to data-visible --- .../SelectRate/RoomSelection/RateSummary/index.tsx | 4 +--- .../RoomSelection/RateSummary/rateSummary.module.css | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx index c2a4aab42..f3ead2161 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx @@ -53,9 +53,7 @@ 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 79ced8039..3152b5cf6 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css @@ -13,7 +13,7 @@ transition: bottom 300ms ease-in-out; } -.summaryVisible { +.summary[data-visible="true"] { bottom: 0; }