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

Merged in fix/SW-589-ui-fixes (pull request #866)

Browse Source 
fix(589): Added animation to rate summary

Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2024-11-10 20:00:18 +00:00
parent 61027acd0d 3c128f4879
commit 5e176185b9
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,7 @@ export default function RateSummary({
const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
return (
<div className={styles.summary}>
<div className={styles.summary} data-visible={isVisible}>
<div className={styles.summaryText}>
<Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
<Body color="uiTextMediumContrast">{priceName}</Body>

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

@@ -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;
}
.summary[data-visible="true"] {
bottom: 0;
}
.summaryPrice {
@@ -35,6 +41,7 @@
margin-left: auto;
height: fit-content;
width: 100%;
min-width: 140px;
}
.summaryPriceTextMobile {