SW-454 Use the API on select room page

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

@@ -11,20 +11,54 @@ import styles from "./roomCard.module.css"
 import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
 export default function RoomCard({
-  room,
-  nrOfAdults,
-  nrOfNights,
-  breakfastIncluded,
+  rateDefinitions,
+  roomConfiguration,
 }: RoomCardProps) {
   const intl = useIntl()
+
+  const saveRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "NonCancellable"
+  )
+  const changeRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (rate) => rate.cancellationRule === "Modifiable"
+  )
+  const flexRate = rateDefinitions.find(
+    // TODO: Update string when API has decided
+    (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
+
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
         <div className={styles.specification}>
           <Subtitle className={styles.name} type="two">
-            {room.name}
+            {roomConfiguration.roomType}
           </Subtitle>
-          <Caption>{room.size}</Caption>
+          <Caption>Room size TBI</Caption>
           <Button intent="text" type="button" size="small" theme="base">
             {intl.formatMessage({ id: "See room details" })}
           </Button>
@@ -32,20 +66,15 @@ export default function RoomCard({
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Nr night, nr adult",
-                defaultMessage:
-                  "{nights, number} night, {adults, number} adult",
+                id: "Max {nrOfGuests} guests",
+                defaultMessage: "Max {nrOfGuests} guests",
               },
-              { nights: nrOfNights, adults: nrOfAdults }
+              // TODO: Correct number
+              { nrOfGuests: 2 }
             )}
-            {" | "}
-            {breakfastIncluded
-              ? intl.formatMessage({
-                  id: "Breakfast included",
-                })
-              : intl.formatMessage({
-                  id: "Breakfast excluded",
-                })}
+            {intl.formatMessage({
+              id: "Breakfast included",
+            })}
           </Caption>
         </div>
 
@@ -53,25 +82,19 @@ export default function RoomCard({
           name={intl.formatMessage({ id: "Non-refundable" })}
           value="non-refundable"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.nonRefundable.standard}
-          memberPrice={room.prices.nonRefundable.member}
-          currency={room.prices.currency}
+          product={saveProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free rebooking" })}
           value="free-rebooking"
           paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          standardPrice={room.prices.freeRebooking.standard}
-          memberPrice={room.prices.freeRebooking.member}
-          currency={room.prices.currency}
+          product={changeProduct}
         />
         <FlexibilityOption
           name={intl.formatMessage({ id: "Free cancellation" })}
           value="free-cancellation"
           paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          standardPrice={room.prices.freeCancellation.standard}
-          memberPrice={room.prices.freeCancellation.member}
-          currency={room.prices.currency}
+          product={flexProduct}
         />
 
         <Button
@@ -87,7 +110,8 @@ export default function RoomCard({
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt={intl.formatMessage({ id: "A photo of the room" })}
-        src={room.imageSrc}
+        // TODO: Correct image URL
+        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
       />
     </div>
   )