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/SelectionCard/index.tsx

@@ -1,19 +1,21 @@
+"use client"
+import { useIntl } from "react-intl"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import styles from "./selectionCard.module.css"
 
 import { SelectionCardProps } from "@/types/components/hotelReservation/selectRate/selectionCard"
 
-export default async function SelectionCard({
+export default function SelectionCard({
   price,
   membersPrice,
   currency,
   title,
   subtext,
 }: SelectionCardProps) {
-  const { formatMessage } = await getIntl()
+  const intl = useIntl()
 
   return (
     <div className={styles.card}>
@@ -28,13 +30,13 @@ export default async function SelectionCard({
       <div>
         <Caption color="burgundy" className={styles.price}>
           {/* TODO: Handle currency and this whole line of text in a better way through intl */}
-          {price} {currency}/{formatMessage({ id: "night" })}
+          {price} {currency}/{intl.formatMessage({ id: "night" })}
         </Caption>
 
         <Caption color="burgundy" className={styles.membersPrice}>
           {/* TODO: Handle currency and this whole line of text in a better way through intl */}
-          {formatMessage({ id: "Members" })} {membersPrice} {currency}/
-          {formatMessage({ id: "night" })}
+          {intl.formatMessage({ id: "Members" })} {membersPrice} {currency}/
+          {intl.formatMessage({ id: "night" })}
         </Caption>
       </div>
     </div>