fix(589): Added animation to rate summary

2024-11-08 16:59:40 +01:00
parent 61027acd0d
commit 73fc63b493
2 changed files with 19 additions and 2 deletions
--- 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 (
-    <div className={styles.summary}>
+    <div
+      className={`${styles.summary} ${isVisible ? styles.summaryVisible : ""}`}
+    >
      <div className={styles.summaryText}>
        <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
        <Body color="uiTextMediumContrast">{priceName}</Body>
--- 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 {