53b6628b25
Feat/SW-965 select rate modify room * feat(SW-965): added new state for modify room and smaller fixes * feat(SW-965): update state handling of modifyRateIndex * fix: adjust scroll animation to handle modifyRateIndex * fix: room state logic and removed unused css class Approved-by: Pontus Dreij Approved-by: Arvid Norlin
108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
"use client"
|
|
import { useCallback } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
|
|
|
|
import { EditIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./selectedRoomPanel.module.css"
|
|
|
|
import type { Room as SelectedRateRoom } from "@/types/components/hotelReservation/selectRate/selectRate"
|
|
import type { Room } from "@/types/hotel"
|
|
|
|
interface SelectedRoomPanelProps {
|
|
roomIndex: number
|
|
room: SelectedRateRoom
|
|
roomCategories: Room[]
|
|
}
|
|
|
|
export default function SelectedRoomPanel({
|
|
roomIndex,
|
|
room,
|
|
roomCategories,
|
|
}: SelectedRoomPanelProps) {
|
|
const intl = useIntl()
|
|
const { rateSummary, modifyRate } = useRateSelectionStore()
|
|
|
|
const selectedRate = rateSummary[roomIndex]
|
|
const images = roomCategories.find((roomCategory) =>
|
|
roomCategory.roomTypes.some(
|
|
(roomType) => roomType.code === selectedRate?.roomTypeCode
|
|
)
|
|
)?.images
|
|
|
|
const handleModify = useCallback(() => {
|
|
modifyRate(roomIndex)
|
|
}, [modifyRate, roomIndex])
|
|
|
|
return (
|
|
<div className={styles.selectedRoomPanel}>
|
|
<div className={styles.titleContainer}>
|
|
<div>
|
|
<Caption type="regular">
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Room {roomIndex}",
|
|
},
|
|
{
|
|
roomIndex: roomIndex + 1,
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Subtitle color="uiTextHighContrast">
|
|
{selectedRate?.roomType},{" "}
|
|
{intl.formatMessage(
|
|
{
|
|
id: room.childrenInRoom?.length
|
|
? "{adults} adults, {children} children"
|
|
: "{adults} adults",
|
|
},
|
|
{
|
|
adults: room.adults,
|
|
children: room.childrenInRoom?.length,
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
</div>
|
|
<div>
|
|
<Body>
|
|
{selectedRate?.priceName}, {selectedRate?.priceTerm}
|
|
</Body>
|
|
<Body>
|
|
{selectedRate?.public.localPrice.pricePerNight}{" "}
|
|
{selectedRate?.public.localPrice.currency}/
|
|
{intl.formatMessage({
|
|
id: "night",
|
|
})}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
<div className={styles.imageAndModifyButtonContainer}>
|
|
{images?.[0]?.imageSizes?.tiny && (
|
|
<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>
|
|
)
|
|
}
|