feat(SW-453): Fixed new filter buttons and updated price in summary

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

@@ -1,5 +1,6 @@
 "use client"
 
+import { createElement } from "react"
 import { useIntl } from "react-intl"
 
 import { RateDefinition } from "@/server/routers/hotels/output"
@@ -12,6 +13,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import ImageGallery from "../../ImageGallery"
 import RoomSidePeek from "../RoomSidePeek"
+import { getIconForFeatureCode } from "../../utils"
 
 import styles from "./roomCard.module.css"
 
@@ -47,16 +49,16 @@ export default function RoomCard({
       : undefined
   }
 
-  function getPriceForRate(
+  function getPriceInformationForRate(
     rate: typeof saveRate | typeof changeRate | typeof flexRate
   ) {
     return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
       ?.generalTerms
   }
+
   const selectedRoom = roomCategories.find(
     (room) => room.name === roomConfiguration.roomType
   )
-
   const roomSize = selectedRoom?.roomSize
   const occupancy = selectedRoom?.occupancy.total
   const roomDescription = selectedRoom?.descriptions.short
@@ -68,7 +70,6 @@ export default function RoomCard({
       <div className={styles.cardBody}>
         <div className={styles.specification}>
           <Caption color="uiTextMediumContrast" className={styles.guests}>
-            {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
                 id: "booking.guests",
@@ -105,44 +106,58 @@ export default function RoomCard({
               value="non-refundable"
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(saveRate)}
-              priceInformation={getPriceForRate(saveRate)}
+              priceInformation={getPriceInformationForRate(saveRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
               roomTypeCode={roomConfiguration.roomTypeCode}
+              features={roomConfiguration.features}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free rebooking" })}
               value="free-rebooking"
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(changeRate)}
-              priceInformation={getPriceForRate(changeRate)}
+              priceInformation={getPriceInformationForRate(changeRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
               roomTypeCode={roomConfiguration.roomTypeCode}
+              features={roomConfiguration.features}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free cancellation" })}
               value="free-cancellation"
               paymentTerm={intl.formatMessage({ id: "Pay later" })}
               product={findProductForRate(flexRate)}
-              priceInformation={getPriceForRate(flexRate)}
+              priceInformation={getPriceInformationForRate(flexRate)}
               handleSelectRate={handleSelectRate}
               roomType={roomConfiguration.roomType}
               roomTypeCode={roomConfiguration.roomTypeCode}
+              features={roomConfiguration.features}
             />
           </div>
         </div>
       </div>
       {mainImage && (
         <div className={styles.imageContainer}>
-          {roomConfiguration.roomsLeft < 5 && (
-            <span className={styles.roomsLeft}>
-              <Footnote
-                color="burgundy"
-                textTransform="uppercase"
-              >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
-            </span>
-          )}
+          <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.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. */}
           {images && (