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>