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

Merged in fix/SW-1122-breakfast-text-equal-height (pull request #1098)

Browse Source 
fix(SW-1122): fix equal breakfast text height for non availability cards

* fix(SW-1122): fix equal breakfast text height for non availability cards


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2024-12-17 12:35:10 +00:00
parent 42bb71cf2f
commit 92bbfcf533
5 changed files with 47 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -8,7 +8,9 @@ import RateSummary from "./RateSummary"
import RoomCard from "./RoomCard"
import {
getHotelReservationQueryParams,
rateCardEqualHeightSelector,
RATE_CARD_EQUAL_HEIGHT_CLASS,
RATE_CARDS_AVAILABLE_HEIGHT_CLASS,
RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS,
} from "./utils"
import styles from "./roomSelection.module.css"
@@ -34,41 +36,44 @@ export default function RoomSelection({
const equalizePriceOptionHeights = useCallback(() => {
if (!roomRefs.current.length) return
const optionsSelector = `.${RATE_CARD_EQUAL_HEIGHT_CLASS}`
const availableSelector = `.${RATE_CARDS_AVAILABLE_HEIGHT_CLASS}`
const notAvailableSelector = `.${RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS}`
const DEFAULT_RATE_CARD_HEIGHT = 420
const maxOptionHeights: number[] = []
let maxPriceCardHeight = DEFAULT_RATE_CARD_HEIGHT
roomRefs.current.forEach((room) => {
const options = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)
options.forEach((option) => {
const options = room.querySelectorAll<HTMLDivElement>(optionsSelector)
options.forEach((option, i) => {
option.style.height = "auto"
const optionHeight = option.getBoundingClientRect().height
maxOptionHeights[i] = Math.max(maxOptionHeights[i] || 0, optionHeight)
})
const priceCard = room.querySelector(availableSelector) as HTMLElement
if (priceCard) {
const priceCardHeight = priceCard.getBoundingClientRect().height
maxPriceCardHeight = Math.max(maxPriceCardHeight, priceCardHeight)
}
})
const numOptions =
roomRefs.current[0]?.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
).length || 0
for (let i = 0; i < numOptions; i++) {
let maxHeight = 0
roomRefs.current.forEach((room) => {
const option = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)[i]
roomRefs.current.forEach((room) => {
const options = room.querySelectorAll<HTMLDivElement>(optionsSelector)
options.forEach((option, i) => {
if (option) {
maxHeight = Math.max(maxHeight, option.offsetHeight)
option.style.height = `${maxOptionHeights[i]}px`
}
})
roomRefs.current.forEach((room) => {
const option = room.querySelectorAll<HTMLDivElement>(
`.${rateCardEqualHeightSelector}`
)[i]
if (option) {
option.style.height = `${maxHeight}px`
}
})
}
const noPriceCard = room.querySelector(
notAvailableSelector
) as HTMLElement
if (noPriceCard) {
noPriceCard.style.height = `${maxPriceCardHeight}px`
}
})
}, [])
useEffect(() => {