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

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

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -7,7 +7,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import Popover from "@/components/TempDesignSystem/Popover"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { rateCardEqualHeightSelector } from "../utils"
+import { RATE_CARD_EQUAL_HEIGHT_CLASS } from "../utils"
 import PriceTable from "./PriceList"
 
 import styles from "./flexibilityOption.module.css"
@@ -27,7 +27,7 @@ export default function FlexibilityOption({
 
   if (!product) {
     return (
-      <div className={`${styles.noPricesCard} ${rateCardEqualHeightSelector}`}>
+      <div className={`${styles.noPricesCard} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
         <div className={styles.header}>
           <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
           <div className={styles.priceType}>
@@ -73,7 +73,7 @@ export default function FlexibilityOption({
         value={publicPrice?.rateCode}
         onClick={onClick}
       />
-      <div className={`${styles.card} ${rateCardEqualHeightSelector}`}>
+      <div className={`${styles.card} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
         <div className={styles.header}>
           <Popover
             placement="bottom left"

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -12,6 +12,10 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import { getIconForFeatureCode } from "../../utils"
+import {
+  RATE_CARDS_AVAILABLE_HEIGHT_CLASS,
+  RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS,
+} from "../utils"
 import { cardVariants } from "./cardVariants"
 
 import styles from "./roomCard.module.css"
@@ -182,7 +186,9 @@ export default function RoomCard({
             */}
         </div>
       </div>
-      <div className={styles.container}>
+      <div
+        className={`${styles.container}  ${roomConfiguration.status === "NotAvailable" ? RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS : RATE_CARDS_AVAILABLE_HEIGHT_CLASS}`}
+      >
         <Caption color="uiTextHighContrast" type="bold">
           {getBreakfastMessage(rates.flexRate)}
         </Caption>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -12,7 +12,6 @@
 }
 
 .card.noAvailability {
-  justify-content: flex-start;
   opacity: 0.6;
 }
 

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -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>(
+      const options = room.querySelectorAll<HTMLDivElement>(optionsSelector)
-        `.${rateCardEqualHeightSelector}`
+      options.forEach((option, i) => {
-      )
-      options.forEach((option) => {
         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.forEach((room) => {
-      roomRefs.current[0]?.querySelectorAll<HTMLDivElement>(
+      const options = room.querySelectorAll<HTMLDivElement>(optionsSelector)
-        `.${rateCardEqualHeightSelector}`
+      options.forEach((option, i) => {
-      ).length || 0
-
-    for (let i = 0; i < numOptions; i++) {
-      let maxHeight = 0
-
-      roomRefs.current.forEach((room) => {
-        const option = room.querySelectorAll<HTMLDivElement>(
-          `.${rateCardEqualHeightSelector}`
-        )[i]
         if (option) {
-          maxHeight = Math.max(maxHeight, option.offsetHeight)
+          option.style.height = `${maxOptionHeights[i]}px`
         }
       })
 
-      roomRefs.current.forEach((room) => {
+      const noPriceCard = room.querySelector(
-        const option = room.querySelectorAll<HTMLDivElement>(
+        notAvailableSelector
-          `.${rateCardEqualHeightSelector}`
+      ) as HTMLElement
-        )[i]
+      if (noPriceCard) {
-        if (option) {
+        noPriceCard.style.height = `${maxPriceCardHeight}px`
-          option.style.height = `${maxHeight}px`
+      }
-        }
+    })
-      })
-    }
   }, [])
 
   useEffect(() => {

components/HotelReservation/SelectRate/RoomSelection/utils.ts

@@ -102,4 +102,8 @@ export function createQueryParamsForEnterDetails(
   return searchParams
 }
 
-export const rateCardEqualHeightSelector = "rateCardEqualHeight"
+export const RATE_CARD_EQUAL_HEIGHT_CLASS = "rateCardEqualHeightSelector"
+export const RATE_CARDS_AVAILABLE_HEIGHT_CLASS =
+  "rateCardAvailableEqualHeightSelector"
+export const RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS =
+  "rateCardNotAvailableEqualHeightSelector"