fix: handle card grids in css instead of js

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,19 +1,10 @@
 "use client"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { useSession } from "next-auth/react"
-import { useCallback, useEffect, useMemo, useRef } from "react"
-
-import { debounce } from "@/utils/debounce"
-import { isValidSession } from "@/utils/session"
+import { useMemo } from "react"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
-import {
-  getHotelReservationQueryParams,
-  RATE_CARD_EQUAL_HEIGHT_CLASS,
-  RATE_CARDS_AVAILABLE_HEIGHT_CLASS,
-  RATE_CARDS_NOT_AVAILABLE_HEIGHT_CLASS,
-} from "./utils"
+import { getHotelReservationQueryParams } from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -32,68 +23,8 @@ export default function RoomSelection({
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const roomRefs = useRef<HTMLLIElement[]>([])
   const { roomConfigurations, rateDefinitions } = roomsAvailability
 
-  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 = 380
-
-    const maxOptionHeights: number[] = []
-    let maxPriceCardHeight = DEFAULT_RATE_CARD_HEIGHT
-
-    roomRefs.current.forEach((room) => {
-      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)
-      }
-    })
-
-    roomRefs.current.forEach((room) => {
-      const options = room.querySelectorAll<HTMLDivElement>(optionsSelector)
-      options.forEach((option, i) => {
-        if (option) {
-          option.style.height = `${maxOptionHeights[i]}px`
-        }
-      })
-
-      const noPriceCard = room.querySelector(
-        notAvailableSelector
-      ) as HTMLElement
-      if (noPriceCard) {
-        noPriceCard.style.height = `${maxPriceCardHeight}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)
@@ -139,23 +70,17 @@ export default function RoomSelection({
       >
         <ul className={styles.roomList}>
           {roomConfigurations.map((roomConfiguration, index) => (
-            <li
+            <RoomCard
+              hotelId={roomsAvailability.hotelId.toString()}
+              hotelType={hotelType}
+              rateDefinitions={rateDefinitions}
+              roomConfiguration={roomConfiguration}
+              roomCategories={roomCategories}
+              handleSelectRate={setRateCode}
+              selectedPackages={selectedPackages}
+              packages={availablePackages}
               key={roomConfiguration.roomTypeCode}
-              ref={(el) => {
-                if (el) roomRefs.current[index] = el
-              }}
-            >
-              <RoomCard
-                hotelId={roomsAvailability.hotelId.toString()}
-                hotelType={hotelType}
-                rateDefinitions={rateDefinitions}
-                roomConfiguration={roomConfiguration}
-                roomCategories={roomCategories}
-                handleSelectRate={setRateCode}
-                selectedPackages={selectedPackages}
-                packages={availablePackages}
-              />
-            </li>
+            />
           ))}
         </ul>
         {rateSummary && (