96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { EditIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./selectedRoomPanel.module.css"
|
|
|
|
import type { RoomParam } from "@/types/components/hotelReservation/selectRate/section"
|
|
import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
|
|
import type { RoomData } from "@/types/hotel"
|
|
|
|
export default function SelectedRoomPanel({
|
|
roomIndex,
|
|
room,
|
|
selectedRate,
|
|
roomCategories,
|
|
handleModify,
|
|
}: {
|
|
roomIndex: number
|
|
room: RoomParam
|
|
selectedRate: Rate | null
|
|
roomCategories: RoomData[]
|
|
handleModify: () => void
|
|
}) {
|
|
const intl = useIntl()
|
|
const images = roomCategories.find((roomCategory) =>
|
|
roomCategory.roomTypes.some(
|
|
(roomType) => roomType.code === selectedRate?.roomTypeCode
|
|
)
|
|
)?.images
|
|
|
|
return (
|
|
<div className={styles.selectedRoomPanel}>
|
|
<div>
|
|
<Caption type="bold">
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Room {roomIndex}",
|
|
},
|
|
{
|
|
roomIndex: roomIndex + 1,
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Subtitle>
|
|
{selectedRate?.roomType},{" "}
|
|
{intl.formatMessage(
|
|
{
|
|
id: room.children?.length
|
|
? "{adults} adults, {children} children"
|
|
: "{adults} adults",
|
|
},
|
|
{
|
|
adults: room.adults,
|
|
children: room.children?.length,
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
<Caption>
|
|
{selectedRate?.priceName}, {selectedRate?.priceTerm}
|
|
</Caption>
|
|
<Caption>
|
|
{selectedRate?.public.localPrice.pricePerNight}{" "}
|
|
{selectedRate?.public.localPrice.currency}/
|
|
{intl.formatMessage({
|
|
id: "night",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<div className={styles.imageAndModifyButtonContainer}>
|
|
{images && (
|
|
<div className={styles.imageContainer}>
|
|
<Image
|
|
src={images[0].imageSizes?.tiny ?? ""}
|
|
alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
|
|
fill
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className={styles.modifyButtonContainer}>
|
|
<Button variant="icon" size="small" onClick={handleModify}>
|
|
<EditIcon />
|
|
{intl.formatMessage({
|
|
id: "Modify",
|
|
})}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|