Merged in fix/room-card (pull request #938)

Fix: hide occupancy and roomSize if undefined, and show placeholder image

Approved-by: Niclas Edenvin

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -60,7 +60,6 @@ export default function RoomCard({
 
   const getBreakfastMessage = (rate: RateDefinition | undefined) => {
     const breakfastIncluded = getRateDefinitionForRate(rate)?.breakfastIncluded
-
     switch (breakfastIncluded) {
       case true:
         return intl.formatMessage({ id: "Breakfast is included." })
@@ -83,7 +82,6 @@ export default function RoomCard({
   )
 
   const { roomSize, occupancy, images } = selectedRoom || {}
-  const mainImage = images?.[0]
 
   const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
   const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
@@ -115,7 +113,6 @@ export default function RoomCard({
   return (
     <div className={classNames}>
       <div>
-        {mainImage && (
         <div className={styles.imageContainer}>
           <div className={styles.chipContainer}>
             {roomConfiguration.roomsLeft < 5 && (
@@ -146,8 +143,9 @@ export default function RoomCard({
             fill
           />
         </div>
-        )}
+
         <div className={styles.specification}>
+          {occupancy && (
             <Caption color="uiTextMediumContrast" className={styles.guests}>
               {intl.formatMessage(
                 {
@@ -156,12 +154,15 @@ export default function RoomCard({
                 { nrOfGuests: occupancy?.total }
               )}
             </Caption>
+          )}
+          {roomSize && (
             <Caption color="uiTextMediumContrast">
-            {roomSize?.min === roomSize?.max
-              ? roomSize?.min
-              : `${roomSize?.min}-${roomSize?.max}`}
+              {roomSize.min === roomSize.max
+                ? roomSize.min
+                : `${roomSize.min}-${roomSize.max}`}
               m²
             </Caption>
+          )}
           <div className={styles.toggleSidePeek}>
             {roomConfiguration.roomTypeCode && (
               <ToggleSidePeek

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

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