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

fix: hide occupancy and roomSize if undefined

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-19 15:11:13 +01:00
parent d43c29e394
commit ef2860dd8e
2 changed files with 52 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -112,56 +112,61 @@ export default function RoomCard({
: "default", : "default",
}) })
console.log(occupancy)
return ( return (
<div className={classNames}> <div className={classNames}>
<div> <div>
{mainImage && ( <div className={styles.imageContainer}>
<div className={styles.imageContainer}> <div className={styles.chipContainer}>
<div className={styles.chipContainer}> {roomConfiguration.roomsLeft < 5 && (
{roomConfiguration.roomsLeft < 5 && ( <span className={styles.chip}>
<span className={styles.chip}> <Footnote
<Footnote color="burgundy"
color="burgundy" textTransform="uppercase"
textTransform="uppercase" >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
>{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote> </span>
</span>
)}
{roomConfiguration.features
.filter((feature) => selectedPackages.includes(feature.code))
.map((feature) => (
<span className={styles.chip} key={feature.code}>
{createElement(getIconForFeatureCode(feature.code), {
width: 16,
height: 16,
color: "burgundy",
})}
</span>
))}
</div>
{/*NOTE: images from the test API are hosted on test3.scandichotels.com,
which can't be accessed unless on Scandic's Wifi or using Citrix. */}
<ImageGallery
images={images}
title={roomConfiguration.roomType}
fill
/>
</div>
)}
<div className={styles.specification}>
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "booking.guests",
},
{ nrOfGuests: occupancy?.total }
)} )}
</Caption> {roomConfiguration.features
<Caption color="uiTextMediumContrast"> .filter((feature) => selectedPackages.includes(feature.code))
{roomSize?.min === roomSize?.max .map((feature) => (
? roomSize?.min <span className={styles.chip} key={feature.code}>
: `${roomSize?.min}-${roomSize?.max}`} {createElement(getIconForFeatureCode(feature.code), {
m² width: 16,
</Caption> height: 16,
color: "burgundy",
})}
</span>
))}
</div>
{/*NOTE: images from the test API are hosted on test3.scandichotels.com,
which can't be accessed unless on Scandic's Wifi or using Citrix. */}
<ImageGallery
images={images}
title={roomConfiguration.roomType}
fill
/>
</div>
<div className={styles.specification}>
{occupancy && (
<Caption color="uiTextMediumContrast" className={styles.guests}>
{intl.formatMessage(
{
id: "booking.guests",
},
{ nrOfGuests: occupancy?.total }
)}
</Caption>
)}
{roomSize && (
<Caption color="uiTextMediumContrast">
{roomSize.min === roomSize.max
? roomSize.min
: `${roomSize.min}-${roomSize.max}`}
m²
</Caption>
)}
<div className={styles.toggleSidePeek}> <div className={styles.toggleSidePeek}>
{roomConfiguration.roomTypeCode && ( {roomConfiguration.roomTypeCode && (
<ToggleSidePeek <ToggleSidePeek

1
components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
View File

@@ -7,6 +7,7 @@
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
position: relative; position: relative;
height: 100%; height: 100%;
min-height: 730px;
justify-content: space-between; justify-content: space-between;
} }