feat(SW-392): Added book a table link click

components/ButtonLink/index.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import NextLink from "next/link"
+
+import Button from "@/components/TempDesignSystem/Button"
+import { trackClick } from "@/utils/tracking"
+
+import type { ButtonLinkProps } from "@/types/components/buttonLink"
+
+export default function ButtonLink({
+  children,
+  href,
+  target,
+  trackingId,
+  trackingParams,
+  onClick,
+  ...buttonProps
+}: ButtonLinkProps) {
+  return (
+    <Button {...buttonProps} asChild>
+      <NextLink
+        href={href}
+        target={target}
+        onClick={(e) => {
+          if (onClick) {
+            onClick(e)
+          }
+          if (trackingId) {
+            trackClick(trackingId, trackingParams)
+          }
+        }}
+      >
+        {children}
+      </NextLink>
+    </Button>
+  )
+}

components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,8 +1,6 @@
-import NextLink from "next/link"
-
+import ButtonLink from "@/components/ButtonLink"
 import { OpenInNewSmallIcon } from "@/components/Icons"
 import Image from "@/components/Image"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
@@ -18,7 +16,7 @@ export default async function RestaurantBarItem({
 }: RestaurantBarItemProps) {
   const intl = await getIntl()
   const { name, openingDetails, menus } = restaurant
-  const { images, bookTableUrl } = restaurant.content
+  const { bookTableUrl, images } = restaurant.content
   const visibleImages = restaurant.content.images.slice(0, 2)
   const imageWidth = images.length === 2 ? 240 : 496
 
@@ -86,18 +84,22 @@ export default async function RestaurantBarItem({
       {bookTableUrl || ctaUrl ? (
         <div className={styles.ctaWrapper}>
           {bookTableUrl ? (
-            <Button fullWidth theme="base" intent="primary" asChild>
-              <NextLink href={bookTableUrl} target="_blank">
-                {intl.formatMessage({ id: "Book a table online" })}
-              </NextLink>
-            </Button>
+            <ButtonLink
+              fullWidth
+              theme="base"
+              intent="primary"
+              href={bookTableUrl}
+              target="_blank"
+              trackingId="book a table"
+              trackingParams={{ restaurantName: name }}
+            >
+              {intl.formatMessage({ id: "Book a table online" })}
+            </ButtonLink>
           ) : null}
           {ctaUrl ? (
-            <Button fullWidth theme="base" intent="secondary" asChild>
-              <NextLink href={ctaUrl}>
-                {`${intl.formatMessage({ id: "Discover" })} ${name}`}
-              </NextLink>
-            </Button>
+            <ButtonLink fullWidth theme="base" intent="secondary" href={ctaUrl}>
+              {`${intl.formatMessage({ id: "Discover" })} ${name}`}
+            </ButtonLink>
           ) : null}
         </div>
       ) : null}

components/TempDesignSystem/Link/index.tsx

@@ -23,6 +23,7 @@ export default function Link({
   variant,
   weight,
   trackingId,
+  trackingParams,
   onClick,
   /**
    * Decides if the link should include the current search params in the URL
@@ -60,9 +61,9 @@ export default function Link({
 
   const trackClickById = useCallback(() => {
     if (trackingId) {
-      trackClick(trackingId)
+      trackClick(trackingId, trackingParams)
     }
-  }, [trackingId])
+  }, [trackingId, trackingParams])
 
   const linkProps = {
     href: fullUrl,

components/TempDesignSystem/Link/link.ts

@@ -10,5 +10,6 @@ export interface LinkProps
   partialMatch?: boolean
   prefetch?: boolean
   trackingId?: string
+  trackingParams?: Record<string, string>
   keepSearchParams?: boolean
 }

server/routers/hotels/schemas/restaurants.ts

@@ -36,7 +36,7 @@ const restaurantOpeningDetailSchema = z.object({
 export const restaurantSchema = z
   .object({
     attributes: z.object({
-      name: z.string().optional(),
+      name: z.string(),
       isPublished: z.boolean().default(false),
       email: z.string().optional(),
       phoneNumber: z.string().optional(),

types/components/buttonLink.ts

@@ -0,0 +1,9 @@
+import type { ButtonPropsSlot } from "@/components/TempDesignSystem/Button/button"
+
+export type ButtonLinkProps = React.PropsWithChildren &
+  Omit<ButtonPropsSlot, "asChild"> &
+  Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target"> & {
+    href: string
+    trackingId?: string
+    trackingParams?: Record<string, string>
+  }

utils/tracking.ts

@@ -5,10 +5,14 @@ import type {
   TrackingSDKData,
 } from "@/types/components/tracking"
 
-export function trackClick(name: string) {
+export function trackClick(
+  name: string,
+  additionalParams?: Record<string, string>
+) {
   pushToDataLayer({
     event: "linkClick",
     cta: {
+      ...additionalParams,
       name,
     },
   })
@@ -56,7 +60,7 @@ export function trackHotelMapClick() {
   const event = {
     event: "map click",
     map: {
-      action: "map click – open/explore mearby",
+      action: "map click - open/explore mearby",
     },
   }
   pushToDataLayer(event)