feat(SW-1730): add button to room sidepeek on hotelpage to select rate page for the hotel

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -1,5 +1,8 @@
 import Link from "next/link"
 
+import { selectRateWithParams } from "@/constants/routes/hotelReservation"
+import { dt } from "@/lib/dt"
+
 import ImageGallery from "@/components/ImageGallery"
 import { getBedIcon } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
 import { getFacilityIcon } from "@/components/SidePeeks/RoomSidePeek/facilityIcon"
@@ -9,6 +12,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { getRoomNameAsParam } from "../../utils"
@@ -17,15 +21,21 @@ import styles from "./room.module.css"
 
 import type { RoomSidePeekProps } from "@/types/components/hotelPage/sidepeek/room"
 
-export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
+export default async function RoomSidePeek({
+  hotelId,
+  room,
+}: RoomSidePeekProps) {
+  const lang = getLang()
   const intl = await getIntl()
   const { roomSize, totalOccupancy, descriptions, images } = room
   const roomDescription = descriptions.medium
-  // TODO: Not defined where this should lead.
-  const ctaUrl = ""
 
   const galleryImages = mapApiImagesToGalleryImages(images)
 
+  const fromdate = dt().format("YYYY-MM-DD")
+  const todate = dt().add(1, "day").format("YYYY-MM-DD")
+  const selectRateURL = selectRateWithParams(lang, hotelId, fromdate, todate)
+
   return (
     <SidePeek
       contentKey={`room-${getRoomNameAsParam(room.name)}`}
@@ -135,15 +145,13 @@ export default async function RoomSidePeek({ room }: RoomSidePeekProps) {
           </ul>
         </div>
       </div>
-      {ctaUrl && (
-        <div className={styles.buttonContainer}>
-          <Button fullWidth theme="base" intent="primary" asChild>
-            <Link href={ctaUrl}>
-              {intl.formatMessage({ id: "Select room" })}
-            </Link>
-          </Button>
-        </div>
-      )}
+      <div className={styles.buttonContainer}>
+        <Button theme="base" intent="primary" asChild>
+          <Link href={selectRateURL}>
+            {intl.formatMessage({ id: "Prices & availability" })}
+          </Link>
+        </Button>
+      </div>
     </SidePeek>
   )
 }

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -271,7 +271,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           />
         )}
         {roomCategories.map((room) => (
-          <RoomSidePeek key={room.name} room={room} />
+          <RoomSidePeek key={room.name} hotelId={hotelId} room={room} />
         ))}
       </SidePeeks>
       <Suspense fallback={null}>

apps/scandic-web/constants/routes/hotelReservation.js

@@ -44,6 +44,16 @@ export function selectRate(lang) {
   return `${hotelreservation(lang)}/select-rate`
 }
 
+/**
+ * @param {Lang} lang
+ * @param {string} hotelId
+ * @param {string} fromdate
+ * @param {string} todate
+ */
+export function selectRateWithParams(lang, hotelId, fromdate, todate) {
+  return `${hotelreservation(lang)}/select-rate?room%5B0%5D.adults=1&fromdate=${fromdate}&todate=${todate}&hotel=${hotelId}`
+}
+
 /**
  * @param {Lang} lang
  */

apps/scandic-web/types/components/hotelPage/sidepeek/room.ts

@@ -2,4 +2,5 @@ import type { Room } from "@/types/hotel"
 
 export interface RoomSidePeekProps {
   room: Room
+  hotelId: string
 }