Merged in feature/select-room-ux-one-page (pull request #523)

This updates the select room page according to the new UX. It has different sections on the same page, but with specific URLs per section. Since neither UX, UI nor API is completely done both design and data structures are a bit temporary.

Approved-by: Simon.Emanuelsson

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

@@ -1,49 +1,92 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
 
 import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 
-export default async function RoomCard({ room }: RoomCardProps) {
-  const { formatMessage } = await getIntl()
+export default function RoomCard({
+  room,
+  nrOfAdults,
+  nrOfNights,
+  breakfastIncluded,
+}: RoomCardProps) {
+  const intl = useIntl()
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
-        <div>
-          <Title className={styles.name} as="h5" level="h3">
+        <div className={styles.specification}>
+          <Subtitle className={styles.name} type="two">
             {room.name}
-          </Title>
-          <div className={styles.nameInfo}>i</div>
+          </Subtitle>
+          <Caption>{room.size}</Caption>
+          <Button intent="text" type="button" size="small" theme="base">
+            {intl.formatMessage({ id: "See room details" })}
+          </Button>
+          <Caption>
+            {/*TODO: Handle pluralisation*/}
+            {intl.formatMessage(
+              {
+                id: "Nr night, nr adult",
+                defaultMessage:
+                  "{nights, number} night, {adults, number} adult",
+              },
+              { nights: nrOfNights, adults: nrOfAdults }
+            )}
+            {" | "}
+            {breakfastIncluded
+              ? intl.formatMessage({
+                  id: "Breakfast included",
+                })
+              : intl.formatMessage({
+                  id: "Breakfast excluded",
+                })}
+          </Caption>
         </div>
-        <Caption color="burgundy">{room.size}</Caption>
-        <Caption color="burgundy">{room.description}</Caption>
 
-        <Caption color="burgundy">
-          {/* TODO: Handle currency and this whole line of text in a better way through intl */}
-          {formatMessage({ id: "From" })}{" "}
-          <span className={styles.price}>{room.pricePerNight}</span>{" "}
-          {room.currency}/{formatMessage({ id: "night" })}
-        </Caption>
+        <FlexibilityOption
+          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}
+        />
+        <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}
+        />
+        <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}
+        />
 
         <Button
-          asChild
-          type="button"
+          type="submit"
           size="small"
           theme="primaryDark"
           className={styles.button}
         >
-          <label htmlFor={`room-${room.id}`}>
-            {formatMessage({ id: "Choose room" })}
-          </label>
+          {intl.formatMessage({ id: "Choose room" })}
         </Button>
       </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={formatMessage({ id: "A photo of the room" })}
+        alt={intl.formatMessage({ id: "A photo of the room" })}
         src={room.imageSrc}
       />
     </div>