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,53 +113,56 @@ export default function RoomCard({
   return (
     <div className={classNames}>
       <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}>
             {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;
 }