Merged in fix/SW-1119-select-room-same-currency (pull request #1075)

fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): remove approx currency if same and synchronize price option height

* fix(SW-1119): use debounce and observer for performance

* fix(SW-1119): export selector variable to utils


Approved-by: Pontus Dreij
Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,10 +1,15 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useMemo } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
+
+import { debounce } from "@/utils/debounce"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
-import { getHotelReservationQueryParams } from "./utils"
+import {
+  getHotelReservationQueryParams,
+  rateCardEqualHeightSelector,
+} from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -23,9 +28,65 @@ export default function RoomSelection({
   const router = useRouter()
   const searchParams = useSearchParams()
   const isUserLoggedIn = !!user
-
+  const roomRefs = useRef<HTMLLIElement[]>([])
   const { roomConfigurations, rateDefinitions } = roomsAvailability
 
+  const equalizePriceOptionHeights = useCallback(() => {
+    if (!roomRefs.current.length) return
+
+    roomRefs.current.forEach((room) => {
+      const options = room.querySelectorAll<HTMLDivElement>(
+        `.${rateCardEqualHeightSelector}`
+      )
+      options.forEach((option) => {
+        option.style.height = "auto"
+      })
+    })
+
+    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]
+        if (option) {
+          maxHeight = Math.max(maxHeight, option.offsetHeight)
+        }
+      })
+
+      roomRefs.current.forEach((room) => {
+        const option = room.querySelectorAll<HTMLDivElement>(
+          `.${rateCardEqualHeightSelector}`
+        )[i]
+        if (option) {
+          option.style.height = `${maxHeight}px`
+        }
+      })
+    }
+  }, [])
+
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(function () {
+      equalizePriceOptionHeights()
+    })
+
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    observer.observe(document.documentElement)
+
+    return () => {
+      if (observer) {
+        observer.unobserve(document.documentElement)
+      }
+    }
+  }, [roomRefs, equalizePriceOptionHeights])
+
   const queryParams = useMemo(() => {
     const params = new URLSearchParams(searchParams)
     const searchParamsObject = getHotelReservationQueryParams(searchParams)
@@ -64,8 +125,13 @@ export default function RoomSelection({
         onSubmit={handleSubmit}
       >
         <ul className={styles.roomList}>
-          {roomConfigurations.map((roomConfiguration) => (
-            <li key={roomConfiguration.roomTypeCode}>
+          {roomConfigurations.map((roomConfiguration, index) => (
+            <li
+              key={roomConfiguration.roomTypeCode}
+              ref={(el) => {
+                if (el) roomRefs.current[index] = el
+              }}
+            >
               <RoomCard
                 hotelId={roomsAvailability.hotelId.toString()}
                 hotelType={hotelType}