78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { useState } from "react"
|
|
|
|
import RateSummary from "./RateSummary"
|
|
import RoomCard from "./RoomCard"
|
|
import getHotelReservationQueryParams from "./utils"
|
|
|
|
import styles from "./roomSelection.module.css"
|
|
|
|
import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
|
|
import { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
|
|
|
|
export default function RoomSelection({
|
|
roomConfigurations,
|
|
roomCategories,
|
|
user,
|
|
}: RoomSelectionProps) {
|
|
const [rateSummary, setRateSummary] = useState<Rate | null>(null)
|
|
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const isUserLoggedIn = !!user
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const searchParamsObject = getHotelReservationQueryParams(searchParams)
|
|
|
|
const queryParams = new URLSearchParams(searchParams)
|
|
|
|
searchParamsObject.room.forEach((item, index) => {
|
|
if (rateSummary?.roomTypeCode) {
|
|
queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
|
|
}
|
|
if (rateSummary?.public?.rateCode) {
|
|
queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
|
|
}
|
|
if (rateSummary?.member?.rateCode) {
|
|
queryParams.set(
|
|
`room[${index}].counterratecode`,
|
|
rateSummary.member.rateCode
|
|
)
|
|
}
|
|
})
|
|
|
|
router.push(`select-bed?${queryParams}`)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<form
|
|
method="GET"
|
|
action={`select-bed?${searchParams}`}
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<ul className={styles.roomList}>
|
|
{roomConfigurations.roomConfigurations.map((roomConfiguration) => (
|
|
<li key={roomConfiguration.roomType}>
|
|
<RoomCard
|
|
rateDefinitions={roomConfigurations.rateDefinitions}
|
|
roomConfiguration={roomConfiguration}
|
|
roomCategories={roomCategories}
|
|
handleSelectRate={setRateSummary}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{rateSummary && (
|
|
<RateSummary
|
|
rateSummary={rateSummary}
|
|
isUserLoggedIn={isUserLoggedIn}
|
|
/>
|
|
)}
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|