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

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

@@ -45,10 +45,6 @@
justify-content: flex-start; justify-content: flex-start;
} }
.noIcon {
margin-left: var(--Spacing-x4);
}
.buttonContainer { .buttonContainer {
background-color: var(--Base-Background-Primary-Normal); background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle); 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) { }: RoomDetailsProps) {
const intl = useIntl() const intl = useIntl()
const sortedFacilities = roomFacilities const filteredSortedFacilities = roomFacilities
.filter((facility) => !!facility.isUniqueSellingPoint)
.sort((a, b) => a.sortOrder - b.sortOrder) .sort((a, b) => a.sortOrder - b.sortOrder)
.map((facility) => { .map((facility) => {
const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" /> const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
@@ -45,14 +46,28 @@ export default function RoomDetails({
</p> </p>
</Typography> </Typography>
<ul className={styles.facilityList}> <ul className={styles.facilityList}>
{sortedFacilities.map(({ name, Icon }) => ( {filteredSortedFacilities.map(
<li key={name}> ({ name, Icon, availableInAllRooms }) => (
{Icon && Icon} <li key={name}>
<Typography variant="Body/Paragraph/mdRegular"> {Icon}
<span className={styles.listText}>{name}</span> <Typography variant="Body/Paragraph/mdRegular">
</Typography> <span className={styles.listText}>
</li> {availableInAllRooms
))} ? name
: intl.formatMessage(
{
defaultMessage:
"{facility} (available in some rooms)",
},
{
facility: name,
}
)}
</span>
</Typography>
</li>
)
)}
</ul> </ul>
</div> </div>
<div className={styles.listContainer}> <div className={styles.listContainer}>