feat(SW-415): Added content from API

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

@@ -1,10 +1,14 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { RateDefinition } from "@/server/routers/hotels/output"
+
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
 import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
@@ -14,6 +18,7 @@ import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/ro
 export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
+  roomCategories,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -30,27 +35,34 @@ export default function RoomCard({
     (rate) => rate.cancellationRule === "CancellableBefore6PM"
   )
 
-  const saveProduct = saveRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public?.rateCode === saveRate.rateCode ||
-          product.productType.member?.rateCode === saveRate.rateCode
-      )
-    : undefined
-  const changeProduct = changeRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public?.rateCode === changeRate.rateCode ||
-          product.productType.member?.rateCode === changeRate.rateCode
-      )
-    : undefined
-  const flexProduct = flexRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public?.rateCode === flexRate.rateCode ||
-          product.productType.member?.rateCode === flexRate.rateCode
-      )
-    : undefined
+  const findProductForRate = (rate: RateDefinition | undefined) => {
+    return rate
+      ? roomConfiguration.products.find(
+          (product) =>
+            product.productType.public?.rateCode === rate.rateCode ||
+            product.productType.member?.rateCode === rate.rateCode
+        )
+      : undefined
+  }
+
+  const getPriceForRate = (
+    rate: typeof saveRate | typeof changeRate | typeof flexRate
+  ) => {
+    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
+      ?.generalTerms
+  }
+
+  const roomSize = roomCategories.find(
+    (category) => category.attributes.name === roomConfiguration.roomType
+  )?.attributes.roomSize
+
+  const occupancy = roomCategories.find(
+    (category) => category.attributes.name === roomConfiguration.roomType
+  )?.attributes.occupancy.total
+
+  const roomDescription = roomCategories.find(
+    (room) => room.attributes.name === roomConfiguration.roomType
+  )?.attributes.content.texts.descriptions.short
 
   return (
     <div className={styles.card}>
@@ -60,17 +72,14 @@ export default function RoomCard({
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Max {nrOfGuests} guests",
-                defaultMessage: "Max {nrOfGuests} guests",
+                id: "booking.guests",
               },
-              // TODO: Correct number
-              { nrOfGuests: 2 }
+              { nrOfGuests: occupancy }
             )}
           </Caption>
-          {
-            // Room size TBI
-          }
-          <Caption color="uiTextMediumContrast">11-13 m²</Caption>
+          <Caption color="uiTextMediumContrast">
+            {roomSize?.min}-{roomSize?.max} m²
+          </Caption>
           <Button
             intent="text"
             type="button"
@@ -83,44 +92,58 @@ export default function RoomCard({
           </Button>
         </div>
         <div className={styles.container}>
-          <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
-          </Subtitle>
-          <Caption>Room INFORMATION </Caption>
-
-          <Caption color="uiTextPlaceholder">
+          <div className={styles.roomDetails}>
+            <Subtitle className={styles.name} type="two">
+              {roomConfiguration.roomType}
+            </Subtitle>
+            <Body>{roomDescription}</Body>
+          </div>
+          <Caption color="uiTextHighContrast">
             {intl.formatMessage({
-              id: "Breakfast included",
+              id: "Breakfast selection in next step.",
             })}
           </Caption>
-
-          <FlexibilityOption
-            name={intl.formatMessage({ id: "Non-refundable" })}
-            value="non-refundable"
-            paymentTerm={intl.formatMessage({ id: "Pay now" })}
-            product={saveProduct}
-          />
-          <FlexibilityOption
-            name={intl.formatMessage({ id: "Free rebooking" })}
-            value="free-rebooking"
-            paymentTerm={intl.formatMessage({ id: "Pay now" })}
-            product={changeProduct}
-          />
-          <FlexibilityOption
-            name={intl.formatMessage({ id: "Free cancellation" })}
-            value="free-cancellation"
-            paymentTerm={intl.formatMessage({ id: "Pay later" })}
-            product={flexProduct}
-          />
+          <div>
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Non-refundable" })}
+              value="non-refundable"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(saveRate)}
+              priceInformation={getPriceForRate(saveRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free rebooking" })}
+              value="free-rebooking"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(changeRate)}
+              priceInformation={getPriceForRate(changeRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free cancellation" })}
+              value="free-cancellation"
+              paymentTerm={intl.formatMessage({ id: "Pay later" })}
+              product={findProductForRate(flexRate)}
+              priceInformation={getPriceForRate(flexRate)}
+            />
+          </div>
         </div>
       </div>
-      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt={intl.formatMessage({ id: "A photo of the room" })}
-        // TODO: Correct image URL
-        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
-      />
+
+      <div className={styles.imageContainer}>
+        <span className={styles.roomsLeft}>
+          <Footnote
+            color="burgundy"
+            textTransform="uppercase"
+          >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+        </span>
+        {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          alt={intl.formatMessage({ id: "A photo of the room" })}
+          // TODO: Correct image URL
+          src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
+        />
+      </div>
     </div>
   )
 }

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

@@ -5,12 +5,12 @@
   background-color: #fff;
   border-radius: var(--Corner-radius-Large);
   border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
 }
 
 .cardBody {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
 }
 
 .specification {
@@ -35,6 +35,12 @@
 
 .container {
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.roomDetails {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
@@ -50,3 +56,12 @@
   object-fit: cover;
   border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
 }
+
+.roomsLeft {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background-color: var(--Main-Grey-White);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
+}