feat(sw-453): fixed mobile view and some improvements

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useMemo,useState } from "react"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
@@ -23,27 +23,32 @@ export default function RoomSelection({
   const searchParams = useSearchParams()
   const isUserLoggedIn = !!user
 
-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+  const { roomConfigurations, rateDefinitions } = roomsAvailability
 
-    const queryParams = new URLSearchParams(searchParams)
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams(searchParams)
+    const searchParamsObject = getHotelReservationQueryParams(searchParams)
 
     searchParamsObject.room.forEach((item, index) => {
       if (rateSummary?.roomTypeCode) {
-        queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
+        params.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
       }
       if (rateSummary?.public?.rateCode) {
-        queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
+        params.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
       }
       if (rateSummary?.member?.rateCode) {
-        queryParams.set(
+        params.set(
           `room[${index}].counterratecode`,
           rateSummary.member.rateCode
         )
       }
     })
 
+    return params
+  }, [searchParams, rateSummary])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
     router.push(`select-bed?${queryParams}`)
   }
 
@@ -55,10 +60,10 @@ export default function RoomSelection({
         onSubmit={handleSubmit}
       >
         <ul className={styles.roomList}>
-          {roomsAvailability.roomConfigurations.map((roomConfiguration) => (
+          {roomConfigurations.map((roomConfiguration) => (
             <li key={roomConfiguration.roomType}>
               <RoomCard
-                rateDefinitions={roomsAvailability.rateDefinitions}
+                rateDefinitions={rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
                 handleSelectRate={setRateSummary}
@@ -71,6 +76,7 @@ export default function RoomSelection({
             rateSummary={rateSummary}
             isUserLoggedIn={isUserLoggedIn}
             packages={packages}
+            roomsAvailability={roomsAvailability}
           />
         )}
       </form>