Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/loading-rooms-separately

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

@@ -54,9 +54,22 @@ export default function RoomCard({
       : undefined
   }
 
-  function getPriceInformationForRate(rate: RateDefinition | undefined) {
+  function getRateDefinitionForRate(rate: RateDefinition | undefined) {
     return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
-      ?.generalTerms
+  }
+
+  const getBreakfastMessage = (rate: RateDefinition | undefined) => {
+    const breakfastIncluded = getRateDefinitionForRate(rate)?.breakfastIncluded
+    switch (breakfastIncluded) {
+      case true:
+        return intl.formatMessage({ id: "Breakfast is included." })
+      case false:
+        return intl.formatMessage({ id: "Breakfast selection in next step." })
+      default:
+        return intl.formatMessage({
+          id: "Breakfast deal can be purchased at the hotel.",
+        })
+    }
   }
 
   const petRoomPackage =
@@ -69,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" })
@@ -101,53 +113,56 @@ export default function RoomCard({
   return (
     <div className={classNames}>
       <div>
-        {mainImage && (
-          <div className={styles.imageContainer}>
-            <div className={styles.chipContainer}>
-              {roomConfiguration.roomsLeft < 5 && (
-                <span className={styles.chip}>
-                  <Footnote
-                    color="burgundy"
-                    textTransform="uppercase"
-                  >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-                </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 }
+        <div className={styles.imageContainer}>
+          <div className={styles.chipContainer}>
+            {roomConfiguration.roomsLeft < 5 && (
+              <span className={styles.chip}>
+                <Footnote
+                  color="burgundy"
+                  textTransform="uppercase"
+                >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+              </span>
             )}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {roomSize?.min === roomSize?.max
-              ? roomSize?.min
-              : `${roomSize?.min}-${roomSize?.max}`}
-            m²
-          </Caption>
+            {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}>
+          {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
@@ -168,9 +183,7 @@ export default function RoomCard({
       </div>
       <div className={styles.container}>
         <Caption color="uiTextHighContrast" type="bold">
-          {intl.formatMessage({
-            id: "Breakfast selection in next step.",
-          })}
+          {getBreakfastMessage(rates.flexRate)}
         </Caption>
         {roomConfiguration.status === "NotAvailable" ? (
           <div className={styles.noRoomsContainer}>
@@ -192,7 +205,7 @@ export default function RoomCard({
                 value={key.toLowerCase()}
                 paymentTerm={key === "flexRate" ? payLater : payNow}
                 product={findProductForRate(rate)}
-                priceInformation={getPriceInformationForRate(rate)}
+                priceInformation={getRateDefinitionForRate(rate)?.generalTerms}
                 handleSelectRate={handleSelectRate}
                 roomType={roomConfiguration.roomType}
                 roomTypeCode={roomConfiguration.roomTypeCode}

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

@@ -7,23 +7,13 @@
   border: 1px solid var(--Base-Border-Subtle);
   position: relative;
   height: 100%;
+  min-height: 730px;
   justify-content: space-between;
 }
 
 .card.noAvailability {
   justify-content: flex-start;
-}
-
-.card.noAvailability:before {
-  background-color: rgba(0, 0, 0, 40%);
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 2;
+  opacity: 0.6;
 }
 
 .specification {