55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
|
|
import RoomCard from "./RoomCard"
|
|
|
|
import styles from "./roomSelection.module.css"
|
|
|
|
import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
|
|
|
|
export default function RoomSelection({
|
|
roomConfigurations,
|
|
}: RoomSelectionProps) {
|
|
const router = useRouter()
|
|
const searchParams = useSearchParams()
|
|
const intl = useIntl()
|
|
|
|
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault()
|
|
const queryParams = new URLSearchParams(searchParams)
|
|
queryParams.set("roomClass", e.currentTarget.roomClass?.value)
|
|
queryParams.set("flexibility", e.currentTarget.flexibility?.value)
|
|
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}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<div className={styles.summary}>
|
|
This is summary
|
|
<Button type="submit" size="small" theme="primaryDark">
|
|
{intl.formatMessage({ id: "Choose room" })}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|