feat(sw-452): Implement select room form submit

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -4,6 +4,7 @@ import { useState } from "react"
 
 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
+import { getHotelReservationQueryParams } from "./utils"
 
 import styles from "./roomSelection.module.css"
 
@@ -19,12 +20,43 @@ export default function RoomSelection({
 
   const router = useRouter()
   const searchParams = useSearchParams()
+  const isUserLoggedIn = !!user
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
+    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+
+    /**
+     * These are the query params that are used on current web and should come from the Booking Widget Search Submit.
+     * Might need to be changed when Search Submit in the Booking Widget is implemented.
+     */
     const queryParams = new URLSearchParams(searchParams)
-    queryParams.set("roomClass", e.currentTarget.roomClass?.value)
-    queryParams.set("flexibility", e.currentTarget.flexibility?.value)
+
+    searchParamsObject.room.forEach((item, index) => {
+      queryParams.set(`room[${index}].adults`, item.adults.toString())
+
+      if (Array.isArray(item.child)) {
+        item.child.forEach((child, childIndex) => {
+          queryParams.set(
+            `room[${index}].child[${childIndex}].age`,
+            child.age.toString()
+          )
+          queryParams.set(`room[${index}].child[${childIndex}].bed`, child.bed)
+        })
+      }
+
+      queryParams.set(
+        `room[${index}].roomtypecode`,
+        rateSummary?.roomTypeCode || ""
+      )
+      queryParams.set(
+        `room[${index}].ratecode`,
+        isUserLoggedIn
+          ? rateSummary?.member?.rateCode || ""
+          : rateSummary?.public?.rateCode || ""
+      )
+    })
+
     router.push(`select-bed?${queryParams}`)
   }
 
@@ -48,7 +80,10 @@ export default function RoomSelection({
           ))}
         </ul>
         {rateSummary && (
-          <RateSummary rateSummary={rateSummary} isUserLoggedIn={!!user} />
+          <RateSummary
+            rateSummary={rateSummary}
+            isUserLoggedIn={isUserLoggedIn}
+          />
         )}
       </form>
     </div>