diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx
new file mode 100644
index 000000000..81bd09a80
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/PricesAndAvailabilityButton/index.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { selectRateWithParams } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { dt } from "@scandic-hotels/common/dt"
+
+import ButtonLink from "@/components/ButtonLink"
+import useLang from "@/hooks/useLang"
+import { trackPricesAndAvailabilityClick } from "@/utils/tracking/hotelPage"
+
+import type { PricesAndAvailabilityProps } from "@/types/components/hotelPage/sidepeek/room"
+
+export default function PricesAndAvailabilityButton({
+ room,
+ hotelId,
+ label,
+}: PricesAndAvailabilityProps) {
+ const lang = useLang()
+ const fromdate = dt().format("YYYY-MM-DD")
+ const todate = dt().add(1, "day").format("YYYY-MM-DD")
+ const selectRateURL = selectRateWithParams(lang, hotelId, fromdate, todate)
+
+ const { name, roomTypes } = room
+
+ return (
+ {
+ trackPricesAndAvailabilityClick(
+ name,
+ hotelId,
+ roomTypes.map((type) => type.code).join(",") ?? ""
+ )
+ }}
+ >
+ {label}
+
+ )
+}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
index 2ad34d1a7..af685c605 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
@@ -1,17 +1,12 @@
-import Link from "next/link"
-
-import { selectRateWithParams } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import { dt } from "@scandic-hotels/common/dt"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import SidePeek from "@scandic-hotels/design-system/SidePeek"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ImageGallery from "@/components/ImageGallery"
import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getRoomNameAsParam } from "../../utils"
+import PricesAndAvailabilityButton from "./PricesAndAvailabilityButton"
import RoomFacilities from "./RoomFacilities"
import RoomTypes from "./RoomTypes"
@@ -23,7 +18,6 @@ export default async function RoomSidePeek({
hotelId,
room,
}: RoomSidePeekProps) {
- const lang = await getLang()
const intl = await getIntl()
const {
roomSize,
@@ -38,10 +32,6 @@ export default async function RoomSidePeek({
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 (
-
+
)
diff --git a/apps/scandic-web/types/components/hotelPage/sidepeek/room.ts b/apps/scandic-web/types/components/hotelPage/sidepeek/room.ts
index f314fab74..8dbe6b822 100644
--- a/apps/scandic-web/types/components/hotelPage/sidepeek/room.ts
+++ b/apps/scandic-web/types/components/hotelPage/sidepeek/room.ts
@@ -4,3 +4,7 @@ export interface RoomSidePeekProps {
room: Room
hotelId: string
}
+
+export interface PricesAndAvailabilityProps extends RoomSidePeekProps {
+ label: string
+}
diff --git a/apps/scandic-web/utils/tracking/hotelPage.ts b/apps/scandic-web/utils/tracking/hotelPage.ts
index 8f265c758..affa8c3ac 100644
--- a/apps/scandic-web/utils/tracking/hotelPage.ts
+++ b/apps/scandic-web/utils/tracking/hotelPage.ts
@@ -18,3 +18,21 @@ export function trackHotelTabClick(name: string) {
},
})
}
+
+export function trackPricesAndAvailabilityClick(
+ name: string,
+ hotelId: string,
+ roomTypeCode: string
+) {
+ trackEvent({
+ event: "priceAndAvailability",
+ cta: {
+ name: "Price and Availability",
+ },
+ hotelInfo: {
+ hotelId,
+ roomTypeName: name,
+ roomTypeCode: roomTypeCode,
+ },
+ })
+}