fix: hide occupancy and roomSize if undefined

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

@@ -112,10 +112,11 @@ export default function RoomCard({
         : "default",
   })
 
+  console.log(occupancy)
+
   return (
     <div className={classNames}>
       <div>
-        {mainImage && (
         <div className={styles.imageContainer}>
           <div className={styles.chipContainer}>
             {roomConfiguration.roomsLeft < 5 && (
@@ -146,8 +147,9 @@ export default function RoomCard({
             fill
           />
         </div>
-        )}
+
         <div className={styles.specification}>
+          {occupancy && (
             <Caption color="uiTextMediumContrast" className={styles.guests}>
               {intl.formatMessage(
                 {
@@ -156,12 +158,15 @@ export default function RoomCard({
                 { nrOfGuests: occupancy?.total }
               )}
             </Caption>
+          )}
+          {roomSize && (
             <Caption color="uiTextMediumContrast">
-            {roomSize?.min === roomSize?.max
+              {roomSize.min === roomSize.max
-              ? roomSize?.min
+                ? roomSize.min
-              : `${roomSize?.min}-${roomSize?.max}`}
+                : `${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;
 }