feat(SW-718) Fixed filtering with multirooms

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

@@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
-import { CheckCircleIcon, CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Label from "@/components/TempDesignSystem/Form/Label"
@@ -25,9 +25,15 @@ export default function FlexibilityOption({
   roomTypeCode,
   petRoomPackage,
   handleSelectRate,
+  roomListIndex,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
   const inputElementRef = useRef<HTMLInputElement>(null)
+  const handleSelectRateRef = useRef(handleSelectRate)
+
+  useEffect(() => {
+    handleSelectRateRef.current = handleSelectRate
+  }, [handleSelectRate])
 
   const searchParams = useSearchParams()
 
@@ -35,8 +41,12 @@ export default function FlexibilityOption({
   // want to preselect the selection. This happens e.g. when you do a selection,
   // go to the enter details page and then want to change the room.
   useEffect(() => {
-    const ratecodeSearchParam = searchParams.get("room[0].ratecode")
-    const roomtypeSearchParam = searchParams.get("room[0].roomtype")
+    const ratecodeSearchParam = searchParams.get(
+      `room[${roomListIndex}].ratecode`
+    )
+    const roomtypeSearchParam = searchParams.get(
+      `room[${roomListIndex}].roomtype`
+    )
 
     // If this is not the room and rate we want to preselect, abort
     if (
@@ -47,7 +57,7 @@ export default function FlexibilityOption({
       return
     }
 
-    handleSelectRate((prev) => {
+    handleSelectRateRef.current((prev) => {
       // If the user already has made a new selection we respect that and don't do anything else
       if (prev) {
         return prev
@@ -64,7 +74,7 @@ export default function FlexibilityOption({
         paymentTerm: paymentTerm,
       }
     })
-  }, [handleSelectRate, name, paymentTerm, product, roomTypeCode, searchParams])
+  }, [searchParams, roomListIndex, product, roomTypeCode, name, paymentTerm])
 
   if (!product) {
     return (
@@ -88,7 +98,7 @@ export default function FlexibilityOption({
   const { public: publicPrice, member: memberPrice } = product.productType
 
   const onClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
-    handleSelectRate((prev) => {
+    handleSelectRateRef.current((prev) => {
       if (
         prev &&
         prev.publicRateCode === publicPrice.rateCode &&
@@ -110,7 +120,7 @@ export default function FlexibilityOption({
     <label>
       <input
         type="radio"
-        name="rateCode"
+        name={`rateCode-${roomListIndex}`}
         value={publicPrice?.rateCode}
         onClick={onClick}
         ref={inputElementRef}