diff --git a/components/ButtonLink/index.tsx b/components/ButtonLink/index.tsx new file mode 100644 index 000000000..73c33f1dd --- /dev/null +++ b/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 ( + + ) +} diff --git a/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx b/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx index ace622e7e..8e842507b 100644 --- a/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx +++ b/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 ? (
{bookTableUrl ? ( - + + {intl.formatMessage({ id: "Book a table online" })} + ) : null} {ctaUrl ? ( - + + {`${intl.formatMessage({ id: "Discover" })} ${name}`} + ) : null}
) : null} diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx index 43bb65c39..d198650b7 100644 --- a/components/TempDesignSystem/Link/index.tsx +++ b/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, diff --git a/components/TempDesignSystem/Link/link.ts b/components/TempDesignSystem/Link/link.ts index aec02ff3b..873aaedba 100644 --- a/components/TempDesignSystem/Link/link.ts +++ b/components/TempDesignSystem/Link/link.ts @@ -10,5 +10,6 @@ export interface LinkProps partialMatch?: boolean prefetch?: boolean trackingId?: string + trackingParams?: Record keepSearchParams?: boolean } diff --git a/server/routers/hotels/schemas/restaurants.ts b/server/routers/hotels/schemas/restaurants.ts index 658fb7fc5..f85b1fe37 100644 --- a/server/routers/hotels/schemas/restaurants.ts +++ b/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(), diff --git a/types/components/buttonLink.ts b/types/components/buttonLink.ts new file mode 100644 index 000000000..89c824dbe --- /dev/null +++ b/types/components/buttonLink.ts @@ -0,0 +1,9 @@ +import type { ButtonPropsSlot } from "@/components/TempDesignSystem/Button/button" + +export type ButtonLinkProps = React.PropsWithChildren & + Omit & + Pick, "onClick" | "target"> & { + href: string + trackingId?: string + trackingParams?: Record + } diff --git a/utils/tracking.ts b/utils/tracking.ts index 57145af06..8b3441e27 100644 --- a/utils/tracking.ts +++ b/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 +) { 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)