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

feat(SW-2532): update room sidepeek amenities

Browse Source
This commit is contained in:
Matilda Landström
2025-04-29 10:20:47 +02:00
committed by Michael Zetterberg
parent 0cd2e9c89f
commit f0dbf294d8
3 changed files with 43 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
View File

@@ -104,25 +104,32 @@ export default async function RoomSidePeek({
</Typography>
<ul className={styles.facilityList}>
{room.roomFacilities
.filter((facility) => !!facility.isUniqueSellingPoint)
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = (
<FacilityIcon
name={facility.icon}
size={24}
color="Icon/Default"
/>
)
const facilityName = facility.availableInAllRooms
? facility.name
: intl.formatMessage(
{
defaultMessage: "{facility} (available in some rooms)",
},
{
facility: facility.name,
}
)
return (
<li className={styles.listItem} key={facility.name}>
{Icon && Icon}
<FacilityIcon
name={facility.icon}
size={24}
color="Icon/Default"
/>
<Typography
variant="Body/Paragraph/mdRegular"
className={cx(styles.iconText, {
[styles.noIcon]: !Icon,
})}
className={styles.iconText}
>
<span>{facility.name}</span>
<span>{facilityName}</span>
</Typography>
</li>
)

4
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
View File

@@ -45,10 +45,6 @@
justify-content: flex-start;
}
.noIcon {
margin-left: var(--Spacing-x4);
}
.buttonContainer {
background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle);

33
apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx
View File

@@ -19,7 +19,8 @@ export default function RoomDetails({
}: RoomDetailsProps) {
const intl = useIntl()
const sortedFacilities = roomFacilities
const filteredSortedFacilities = roomFacilities
.filter((facility) => !!facility.isUniqueSellingPoint)
.sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => {
const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
@@ -45,14 +46,28 @@ export default function RoomDetails({
</p>
</Typography>
<ul className={styles.facilityList}>
{sortedFacilities.map(({ name, Icon }) => (
<li key={name}>
{Icon && Icon}
<Typography variant="Body/Paragraph/mdRegular">
<span className={styles.listText}>{name}</span>
</Typography>
</li>
))}
{filteredSortedFacilities.map(
({ name, Icon, availableInAllRooms }) => (
<li key={name}>
{Icon}
<Typography variant="Body/Paragraph/mdRegular">
<span className={styles.listText}>
{availableInAllRooms
? name
: intl.formatMessage(
{
defaultMessage:
"{facility} (available in some rooms)",
},
{
facility: name,
}
)}
</span>
</Typography>
</li>
)
)}
</ul>
</div>
<div className={styles.listContainer}>