5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
137 lines
4.5 KiB
TypeScript
137 lines
4.5 KiB
TypeScript
import { useIntl } from "react-intl"
|
||
|
||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
|
||
|
||
import ImageGallery from "@/components/ImageGallery"
|
||
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
|
||
|
||
import { getBedIconName } from "./bedIcon"
|
||
import { FacilityIcon } from "./facilityIcon"
|
||
|
||
import styles from "./roomSidePeek.module.css"
|
||
|
||
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
||
import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"
|
||
|
||
export default function RoomSidePeek({
|
||
room,
|
||
activeSidePeek,
|
||
close,
|
||
}: RoomSidePeekProps) {
|
||
const intl = useIntl()
|
||
|
||
const roomSize = room.roomSize
|
||
const totalOccupancy = room.totalOccupancy
|
||
const roomDescription = room.descriptions.medium
|
||
const galleryImages = mapApiImagesToGalleryImages(room.images)
|
||
|
||
return (
|
||
<SidePeek
|
||
title={room.name}
|
||
isOpen={activeSidePeek === SidePeekEnum.roomDetails}
|
||
handleClose={close}
|
||
>
|
||
<div className={styles.wrapper}>
|
||
<div className={styles.mainContent}>
|
||
{totalOccupancy && (
|
||
<Caption color="uiTextMediumContrast">
|
||
{intl.formatMessage(
|
||
{
|
||
id: "Max. {max, plural, one {{range} guest} other {{range} guests}}",
|
||
},
|
||
{
|
||
max: totalOccupancy.max,
|
||
range: totalOccupancy.range,
|
||
}
|
||
)}
|
||
</Caption>
|
||
)}
|
||
{roomSize && (
|
||
<Caption color="uiTextMediumContrast">
|
||
{roomSize.min === roomSize.max
|
||
? intl.formatMessage(
|
||
{ id: "{roomSize} m²" },
|
||
{
|
||
roomSize: roomSize.min,
|
||
}
|
||
)
|
||
: intl.formatMessage(
|
||
{
|
||
id: "{roomSizeMin}–{roomSizeMax} m²",
|
||
},
|
||
{
|
||
roomSizeMin: roomSize.min,
|
||
roomSizeMax: roomSize.max,
|
||
}
|
||
)}
|
||
</Caption>
|
||
)}
|
||
<div className={styles.imageContainer}>
|
||
<ImageGallery
|
||
images={galleryImages}
|
||
title={room.name}
|
||
height={280}
|
||
/>
|
||
</div>
|
||
<Body color="uiTextHighContrast">{roomDescription}</Body>
|
||
</div>
|
||
<div className={styles.listContainer}>
|
||
<Subtitle type="two" color="uiTextHighContrast">
|
||
{intl.formatMessage({ id: "Room amenities" })}
|
||
</Subtitle>
|
||
<ul className={styles.facilityList}>
|
||
{room.roomFacilities
|
||
.sort((a, b) => a.sortOrder - b.sortOrder)
|
||
.map((facility) => {
|
||
const Icon = (
|
||
<FacilityIcon
|
||
name={facility.icon}
|
||
size={24}
|
||
color="Icon/Default"
|
||
/>
|
||
)
|
||
return (
|
||
<li key={facility.name}>
|
||
{Icon && Icon}
|
||
<Body
|
||
asChild
|
||
className={!Icon ? styles.noIcon : undefined}
|
||
color="uiTextMediumContrast"
|
||
>
|
||
<span>{facility.name}</span>
|
||
</Body>
|
||
</li>
|
||
)
|
||
})}
|
||
</ul>
|
||
</div>
|
||
<div className={styles.listContainer}>
|
||
<Subtitle type="two" color="uiTextHighContrast">
|
||
{intl.formatMessage({ id: "Bed options" })}
|
||
</Subtitle>
|
||
<Body color="grey">
|
||
{intl.formatMessage({ id: "Based on availability" })}
|
||
</Body>
|
||
<ul className={styles.bedOptions}>
|
||
{room.roomTypes.map((roomType) => {
|
||
const bedIcon = getBedIconName(roomType.mainBed.type)
|
||
return (
|
||
<li key={roomType.code}>
|
||
<MaterialIcon icon={bedIcon} color="Icon/Feedback/Neutral" />
|
||
<Body color="uiTextMediumContrast" asChild>
|
||
<span>{roomType.mainBed.description}</span>
|
||
</Body>
|
||
</li>
|
||
)
|
||
})}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</SidePeek>
|
||
)
|
||
}
|