114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { useRouter } from "next/navigation"
|
|
import { useTransition } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { RoomDetailsSidePeek } from "@scandic-hotels/booking-flow/components/RoomDetailsSidePeek"
|
|
import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import Footnote from "@scandic-hotels/design-system/Footnote"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
|
import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
|
|
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
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, idx } = useRoomContext()
|
|
const { hotelId, roomCategories, searchParamsStr } = useEnterDetailsStore(
|
|
(state) => ({
|
|
hotelId: state.booking.hotelId,
|
|
roomCategories: state.roomCategories,
|
|
searchParamsStr: state.searchParamString,
|
|
})
|
|
)
|
|
|
|
function changeRoom() {
|
|
const searchParams = new URLSearchParams(searchParamsStr)
|
|
|
|
searchParams.set("activeRoomIndex", `${idx}`)
|
|
startTransition(() => {
|
|
router.push(`${selectRate(lang)}?${searchParams.toString()}`)
|
|
})
|
|
}
|
|
|
|
const selectedRoom = getHotelRoom(roomCategories, room.roomTypeCode)
|
|
|
|
return (
|
|
<div className={styles.wrapper} data-available={room.isAvailable}>
|
|
<div className={styles.main}>
|
|
<div className={styles.headerContainer}>
|
|
<Footnote
|
|
className={styles.title}
|
|
asChild
|
|
textTransform="uppercase"
|
|
type="label"
|
|
color="uiTextHighContrast"
|
|
>
|
|
<h2>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Room",
|
|
})}
|
|
</h2>
|
|
</Footnote>
|
|
<Subtitle
|
|
type="two"
|
|
className={styles.description}
|
|
color="uiTextHighContrast"
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
|
|
},
|
|
{
|
|
roomType: room.roomType,
|
|
rateDescription: room.cancellationText,
|
|
rate: ([str]) => {
|
|
return str ? <span className={styles.rate}>{str}</span> : null
|
|
},
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
<Button
|
|
variant="Text"
|
|
size="Small"
|
|
onPress={changeRoom}
|
|
isDisabled={isPending}
|
|
wrapping={false}
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
>
|
|
<MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
|
|
{intl.formatMessage({
|
|
defaultMessage: "Change",
|
|
})}
|
|
</Button>
|
|
</div>
|
|
{room.roomTypeCode && selectedRoom && (
|
|
<div className={styles.details}>
|
|
<RoomDetailsSidePeek
|
|
hotelId={hotelId}
|
|
roomTypeCode={room.roomTypeCode}
|
|
room={selectedRoom}
|
|
buttonVariant="primary"
|
|
triggerLabel={intl.formatMessage({
|
|
defaultMessage: "See room details",
|
|
})}
|
|
wrapping={false}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|