scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in SW-2591-test-confirmation-page-incorrect-side-peek-is-displayed-upon-tapping-the-view-room-details-link (pull request #2057)

Browse Source 
SW-2591 test confirmation page incorrect side peek is displayed upon tapping the view room details link
* fix(SW-2591): remove redundant div


Approved-by: Simon.Emanuelsson
This commit is contained in:
Bianca Widstam
2025-05-12 14:07:54 +00:00
parent 91f9cebadb
commit e78d9f2a86
12 changed files with 190 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
apps/scandic-web/components/SidePeeks/RoomSidePeek/index.tsx
View File

@@ -1,18 +1,6 @@
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
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 { RoomSidePeekContent } from "./RoomSidePeekContent"
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type { RoomSidePeekProps } from "@/types/components/sidePeeks/roomSidePeek"
@@ -22,129 +10,13 @@ export default function RoomSidePeek({
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(
{
defaultMessage:
"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(
{
defaultMessage: "{roomSize} m²",
},
{
roomSize: roomSize.min,
}
)
: intl.formatMessage(
{
defaultMessage: "{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({
defaultMessage: "Room amenities",
})}
</Subtitle>
<ul className={styles.facilityList}>
{room.roomFacilities
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
return (
<li key={facility.name}>
<FacilityIcon
name={facility.icon}
size={24}
color="Icon/Default"
/>
<Body asChild color="uiTextMediumContrast">
<span>
{facility.availableInAllRooms
? facility.name
: intl.formatMessage(
{
defaultMessage:
"{facility} (available in some rooms)",
},
{
facility: facility.name,
}
)}
</span>
</Body>
</li>
)
})}
</ul>
</div>
<div className={styles.listContainer}>
<Subtitle type="two" color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: "Bed options",
})}
</Subtitle>
<Body color="grey">
{intl.formatMessage({
defaultMessage: "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>
<RoomSidePeekContent room={room} />
</SidePeek>
)
}