feat: adjust select rate ui to latest design

components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx

@@ -35,13 +35,17 @@ function getBreakfastMessage(
   memberBreakfastIncluded: boolean,
   hotelType: string | undefined,
   userIsLoggedIn: boolean,
-  msgs: Record<"included" | "noSelection" | "scandicgo" | "notIncluded", string>
+  msgs: Record<
+    "included" | "noSelection" | "scandicgo" | "notIncluded",
+    string
+  >,
+  roomNr: number
 ) {
   if (hotelType === HotelTypeEnum.ScandicGo) {
     return msgs.scandicgo
   }
 
-  if (userIsLoggedIn && memberBreakfastIncluded) {
+  if (userIsLoggedIn && memberBreakfastIncluded && roomNr === 1) {
     return msgs.included
   }
 
@@ -81,7 +85,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
     rateDefinitions: state.roomsAvailability?.rateDefinitions,
     roomCategories: state.roomCategories,
   }))
-  const { isMainRoom, selectedPackage, selectedRate } = useRoomContext()
+  const { isMainRoom, roomNr, selectedPackage, selectedRate } = useRoomContext()
 
   const classNames = cardVariants({
     availability:
@@ -105,7 +109,8 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
     roomConfiguration.breakfastIncludedInAllRatesMember,
     hotelType,
     isUserLoggedIn,
-    breakfastMessages
+    breakfastMessages,
+    roomNr
   )
 
   if (!rateDefinitions) {
@@ -124,7 +129,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
     )
   )
 
-  const { name, roomSize, totalOccupancy, images } = selectedRoom || {}
+  const { images, name, occupancy, roomSize } = selectedRoom || {}
   const galleryImages = mapApiImagesToGalleryImages(images || [])
 
   const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
@@ -203,86 +208,87 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
 
   return (
     <li className={classNames}>
-      <div>
-        <div className={styles.imageContainer}>
-          <div className={styles.chipContainer}>
-            {lessThanFiveRoomsLeft ? (
-              <span className={styles.chip}>
-                <Footnote color="burgundy" textTransform="uppercase">
-                  {intl.formatMessage(
-                    { id: "{amount, number} left" },
-                    { amount: roomConfiguration.roomsLeft }
-                  )}
-                </Footnote>
+      <div className={styles.imageContainer}>
+        <div className={styles.chipContainer}>
+          {lessThanFiveRoomsLeft ? (
+            <span className={styles.chip}>
+              <Footnote color="burgundy" textTransform="uppercase">
+                {intl.formatMessage(
+                  { id: "{amount, number} left" },
+                  { amount: roomConfiguration.roomsLeft }
+                )}
+              </Footnote>
+            </span>
+          ) : null}
+          {roomConfiguration.features
+            .filter((feature) => selectedPackage === feature.code)
+            .map((feature) => (
+              <span className={styles.chip} key={feature.code}>
+                {createElement(getIconForFeatureCode(feature.code), {
+                  color: "burgundy",
+                  height: 16,
+                  width: 16,
+                })}
               </span>
-            ) : null}
-            {roomConfiguration.features
-              .filter((feature) => selectedPackage === feature.code)
-              .map((feature) => (
-                <span className={styles.chip} key={feature.code}>
-                  {createElement(getIconForFeatureCode(feature.code), {
-                    color: "burgundy",
-                    height: 16,
-                    width: 16,
-                  })}
-                </span>
-              ))}
-          </div>
-          <ImageGallery
-            images={galleryImages}
-            title={roomConfiguration.roomType}
-            fill
-          />
+            ))}
         </div>
+        <ImageGallery
+          images={galleryImages}
+          title={roomConfiguration.roomType}
+          fill
+        />
+      </div>
 
-        <div className={styles.specification}>
-          {totalOccupancy && (
-            <Caption color="uiTextMediumContrast" className={styles.guests}>
-              {intl.formatMessage(
-                {
-                  id: "Max {max, plural, one {{range} guest} other {{range} guests}}",
-                },
-                { max: totalOccupancy.max, range: totalOccupancy.range }
-              )}
-            </Caption>
+      <div className={styles.specification}>
+        {occupancy && (
+          <Caption color="uiTextMediumContrast">
+            {occupancy.max === occupancy.min
+              ? intl.formatMessage(
+                  { id: "guests.plural" },
+                  { guests: occupancy.max }
+                )
+              : intl.formatMessage({ id: "guests.span" }, occupancy)}
+          </Caption>
+        )}
+        <RoomSize roomSize={roomSize} />
+        <div className={styles.toggleSidePeek}>
+          {roomConfiguration.roomTypeCode && (
+            <ToggleSidePeek
+              hotelId={hotelId.toString()}
+              roomTypeCode={roomConfiguration.roomTypeCode}
+              title={intl.formatMessage({ id: "Room details" })}
+            />
           )}
-          <RoomSize roomSize={roomSize} />
-          <div className={styles.toggleSidePeek}>
-            {roomConfiguration.roomTypeCode && (
-              <ToggleSidePeek
-                hotelId={hotelId.toString()}
-                roomTypeCode={roomConfiguration.roomTypeCode}
-              />
-            )}
-          </div>
         </div>
-        <div className={styles.roomDetails}>
-          <Subtitle className={styles.name} type="two">
-            {name}
-          </Subtitle>
-          {/* Out of scope for now
+      </div>
+      <div className={styles.roomDetails}>
+        <Subtitle className={styles.name} type="two">
+          {name}
+        </Subtitle>
+        {/* Out of scope for now
             <Body>{descriptions?.short}</Body>
             */}
-        </div>
       </div>
 
       <div className={styles.container}>
         {roomConfiguration.status === AvailabilityEnum.NotAvailable ? (
-          <div className={styles.noRoomsContainer}>
-            <div className={styles.noRooms}>
-              <ErrorCircleIcon color="red" width={16} />
-              <Caption color="uiTextHighContrast" type="bold">
-                {intl.formatMessage({
-                  id: "This room is not available",
-                })}
-              </Caption>
+          <>
+            {/** The empty div is used to allow for subgrid to align rows */}
+            <div></div>
+            <div className={styles.noRoomsContainer}>
+              <div className={styles.noRooms}>
+                <ErrorCircleIcon color="red" width={16} />
+                <Caption color="uiTextHighContrast" type="bold">
+                  {intl.formatMessage({
+                    id: "This room is not available",
+                  })}
+                </Caption>
+              </div>
             </div>
-          </div>
+          </>
         ) : (
           <>
-            <Caption color="uiTextHighContrast" type="bold">
-              {breakfastMessage}
-            </Caption>
+            <Caption color="uiTextHighContrast">{breakfastMessage}</Caption>
             {roomConfiguration.products.map((product) => {
               const rate = getRateInfo(product)
               const isSelectedRateCode =