scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(589): Added animation to rate summary

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-08 16:59:40 +01:00
parent 61027acd0d
commit 73fc63b493
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
View File

@@ -1,3 +1,4 @@
import { useEffect, useState } from "react"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
@@ -20,6 +21,13 @@ export default function RateSummary({
roomsAvailability, roomsAvailability,
}: RateSummaryProps) { }: RateSummaryProps) {
const intl = useIntl() const intl = useIntl()
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {
const timer = setTimeout(() => setIsVisible(true), 0)
return () => clearTimeout(timer)
}, [])
const { const {
member, member,
public: publicRate, public: publicRate,
@@ -45,7 +53,9 @@ export default function RateSummary({
const nights = dt(checkOutDate).diff(dt(checkInDate), "days") const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
return ( return (
<div className={styles.summary}> <div
className={`${styles.summary} ${isVisible ? styles.summaryVisible : ""}`}
>
<div className={styles.summaryText}> <div className={styles.summaryText}>
<Subtitle color="uiTextHighContrast">{roomType}</Subtitle> <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
<Body color="uiTextMediumContrast">{priceName}</Body> <Body color="uiTextMediumContrast">{priceName}</Body>

9
components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
View File

@@ -1,7 +1,7 @@
.summary { .summary {
position: fixed; position: fixed;
z-index: 10; z-index: 10;
bottom: 0; bottom: -100%;
left: 0; left: 0;
right: 0; right: 0;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
@@ -9,6 +9,12 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-top: 1px solid var(--Base-Border-Subtle);
transition: bottom 300ms ease-in-out;
}
.summaryVisible {
bottom: 0;
} }
.summaryPrice { .summaryPrice {
@@ -35,6 +41,7 @@
margin-left: auto; margin-left: auto;
height: fit-content; height: fit-content;
width: 100%; width: 100%;
min-width: 140px;
} }
.summaryPriceTextMobile { .summaryPriceTextMobile {