Merged in feat/SW-3042-tracking-hotel-page-btn-prices- (pull request #2590)

feat(SW-3042): Added tracking for prices and availability button

* feat(SW-3042): Added tracking for prices and availability button


Approved-by: Anton Gunnarsson

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 (
+    <ButtonLink
+      href={selectRateURL}
+      onClick={() => {
+        trackPricesAndAvailabilityClick(
+          name,
+          hotelId,
+          roomTypes.map((type) => type.code).join(",") ?? ""
+        )
+      }}
+    >
+      {label}
+    </ButtonLink>
+  )
+}

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 (
     <SidePeek
       contentKey={`room-${getRoomNameAsParam(name)}`}
@@ -108,13 +98,13 @@ export default async function RoomSidePeek({
         </div>
       </div>
       <div className={styles.buttonContainer}>
-        <Button theme="base" intent="primary" asChild>
+        <PricesAndAvailabilityButton
-          <Link href={selectRateURL}>
+          hotelId={hotelId}
-            {intl.formatMessage({
+          label={intl.formatMessage({
-              defaultMessage: "Prices & availability",
+            defaultMessage: "Prices & availability",
-            })}
+          })}
-          </Link>
+          room={room}
-        </Button>
+        />
       </div>
     </SidePeek>
   )

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
+}

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,
+    },
+  })
+}