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}

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

@@ -30,6 +30,7 @@ export default function RoomCard({
   selectedPackages,
   packages,
   handleSelectRate,
+  roomListIndex,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -71,7 +72,7 @@ export default function RoomCard({
   }
 
   const petRoomPackage =
-    (selectedPackages.includes(RoomPackageCodeEnum.PET_ROOM) &&
+    (selectedPackages?.includes(RoomPackageCodeEnum.PET_ROOM) &&
       packages?.find((pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM)) ||
     undefined
 
@@ -127,7 +128,7 @@ export default function RoomCard({
                 </span>
               )}
             {roomConfiguration.features
-              .filter((feature) => selectedPackages.includes(feature.code))
+              .filter((feature) => selectedPackages?.includes(feature.code))
               .map((feature) => (
                 <span className={styles.chip} key={feature.code}>
                   {createElement(getIconForFeatureCode(feature.code), {
@@ -223,6 +224,7 @@ export default function RoomCard({
               handleSelectRate={handleSelectRate}
               roomTypeCode={roomConfiguration.roomTypeCode}
               petRoomPackage={petRoomPackage}
+              roomListIndex={roomListIndex}
             />
           ))
         )}

components/HotelReservation/SelectRate/RoomList/index.tsx

@@ -13,6 +13,7 @@ export default function RoomList({
   selectedPackages,
   setRateCode,
   hotelType,
+  roomListIndex,
 }: RoomListProps) {
   const { roomConfigurations, rateDefinitions } = roomsAvailability
 
@@ -30,6 +31,7 @@ export default function RoomList({
             selectedPackages={selectedPackages}
             packages={availablePackages}
             key={roomConfiguration.roomTypeCode}
+            roomListIndex={roomListIndex}
           />
         ))}
       </ul>