99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { useTransition } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { selectRate } from "@/constants/routes/hotelReservation"
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import { CheckIcon, EditIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import ToggleSidePeek from "./ToggleSidePeek"
|
|
|
|
import styles from "./selectedRoom.module.css"
|
|
|
|
export default function SelectedRoom() {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const router = useRouter()
|
|
const [isPending, startTransition] = useTransition()
|
|
const { room, roomNr } = useRoomContext()
|
|
const { hotelId, searchParamsStr } = useEnterDetailsStore((state) => ({
|
|
hotelId: state.booking.hotelId,
|
|
searchParamsStr: state.searchParamString,
|
|
}))
|
|
|
|
function changeRoom() {
|
|
const searchParams = new URLSearchParams(searchParamsStr)
|
|
// rooms are index based, thus need for subtraction
|
|
searchParams.set("modifyRateIndex", `${roomNr - 1}`)
|
|
startTransition(() => {
|
|
router.push(`${selectRate(lang)}?${searchParams.toString()}`)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.iconWrapper}>
|
|
<div className={styles.circle}>
|
|
<CheckIcon color="white" height="16" width="16" />
|
|
</div>
|
|
</div>
|
|
<div className={styles.main}>
|
|
<div className={styles.headerContainer}>
|
|
<Footnote
|
|
className={styles.title}
|
|
asChild
|
|
textTransform="uppercase"
|
|
type="label"
|
|
color="uiTextHighContrast"
|
|
>
|
|
<h2>{intl.formatMessage({ id: "Your room" })}</h2>
|
|
</Footnote>
|
|
<Subtitle
|
|
type="two"
|
|
className={styles.description}
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage(
|
|
{ id: "{roomType} <rate>{rateDescription}</rate>" },
|
|
{
|
|
roomType: room.roomType,
|
|
rateDescription: room.cancellationText,
|
|
rate: (str) => {
|
|
return <span className={styles.rate}>{str}</span>
|
|
},
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
<Button
|
|
variant="icon"
|
|
size="small"
|
|
color="burgundy"
|
|
onClick={changeRoom}
|
|
disabled={isPending}
|
|
>
|
|
<EditIcon color="burgundy" />
|
|
{intl.formatMessage({ id: "Change room" })}
|
|
</Button>
|
|
</div>
|
|
{room.roomTypeCode && (
|
|
<div className={styles.details}>
|
|
<ToggleSidePeek
|
|
hotelId={hotelId}
|
|
intent="text"
|
|
roomTypeCode={room.roomTypeCode}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|