diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx index cd058ea45..8f26dd7cc 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx @@ -42,9 +42,7 @@ export default async function MyPages({}: PageArgs<

{intl.formatMessage({ id: "No content published" })}

)} - - - + ) } diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx index e15460359..31535ae69 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/profile/page.tsx @@ -19,9 +19,7 @@ export default async function ProfilePage({}: PageArgs) { return ( <> - - - + ) } diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx index 07c704607..02127d34f 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx @@ -30,9 +30,7 @@ export default function HotelReservationPage({ params }: PageArgs) { return (
New booking flow! Please report errors/issues in Slack. - - - +
) } diff --git a/apps/scandic-web/app/[lang]/(live)/layout.tsx b/apps/scandic-web/app/[lang]/(live)/layout.tsx index 125656dbb..ba9500c8d 100644 --- a/apps/scandic-web/app/[lang]/(live)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(live)/layout.tsx @@ -14,7 +14,6 @@ import Header from "@/components/Header" import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner" import SitewideAlert from "@/components/SitewideAlert" import { ToastHandler } from "@/components/TempDesignSystem/Toasts" -import { preloadUserTracking } from "@/components/TrackingSDK" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import GTMScript from "@/components/TrackingSDK/GTMScript" import RouterTracking from "@/components/TrackingSDK/RouterTracking" @@ -31,7 +30,6 @@ export default async function RootLayout({ bookingwidget: React.ReactNode } >) { - preloadUserTracking() const { defaultLocale, locale, messages } = await getIntl() return ( diff --git a/apps/scandic-web/app/[lang]/(partner)/layout.tsx b/apps/scandic-web/app/[lang]/(partner)/layout.tsx index da9b4492a..c4aac69a4 100644 --- a/apps/scandic-web/app/[lang]/(partner)/layout.tsx +++ b/apps/scandic-web/app/[lang]/(partner)/layout.tsx @@ -11,7 +11,6 @@ import TokenRefresher from "@/components/Auth/TokenRefresher" import CookieBotConsent from "@/components/CookieBot" import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner" import { ToastHandler } from "@/components/TempDesignSystem/Toasts" -import { preloadUserTracking } from "@/components/TrackingSDK" import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript" import GTMScript from "@/components/TrackingSDK/GTMScript" import RouterTracking from "@/components/TrackingSDK/RouterTracking" @@ -28,7 +27,6 @@ export default async function RootLayout({ return null } - preloadUserTracking() const { defaultLocale, locale, messages } = await getIntl() return ( diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx index a240586eb..4e3adc600 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx @@ -90,9 +90,7 @@ export default async function DestinationCityPage({ /> - - - + ) } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx index 81f4958d7..2abb78874 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx @@ -76,9 +76,7 @@ export default async function DestinationCountryPage() { - - - + ) } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx index 416d6fd3e..edbee226e 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/index.tsx @@ -40,9 +40,7 @@ export default async function DestinationOverviewPage() { )} - - - + ) } diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx index efd063138..334b6b2f3 100644 --- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx +++ b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx @@ -50,9 +50,7 @@ export default async function LoyaltyPage() { ) : null} - - - + ) } diff --git a/apps/scandic-web/components/ContentType/StartPage/index.tsx b/apps/scandic-web/components/ContentType/StartPage/index.tsx index 9bbaf8c01..2051cb1ce 100644 --- a/apps/scandic-web/components/ContentType/StartPage/index.tsx +++ b/apps/scandic-web/components/ContentType/StartPage/index.tsx @@ -59,9 +59,7 @@ export default async function StartPage() { ) })} - - - + ) } diff --git a/apps/scandic-web/components/ContentType/StaticPages/index.tsx b/apps/scandic-web/components/ContentType/StaticPages/index.tsx index 689761952..886b4c500 100644 --- a/apps/scandic-web/components/ContentType/StaticPages/index.tsx +++ b/apps/scandic-web/components/ContentType/StaticPages/index.tsx @@ -78,9 +78,7 @@ export default function StaticPage({ ) : null} - - - + ) } diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx index 963689894..9a22391c3 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx @@ -112,7 +112,7 @@ export default function ReceiptRoom({
{intl.formatMessage({ id: "Breakfast buffet" })} - {booking.rateDefinition.breakfastIncluded ?? breakfastPkgIncluded ? ( + {(booking.rateDefinition.breakfastIncluded ?? breakfastPkgIncluded) ? ( {intl.formatMessage({ id: "Included" })} ) : null} {breakfastPkgSelected ? ( diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css index 7f145e167..1e0a6f4cd 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservationCardSkeleton.module.css @@ -53,9 +53,9 @@ var(--Spacing-x2); } - .img { - min-width: 306px; - } + .img { + min-width: 306px; + } .roomDetails { grid-template-columns: 1fr 1fr; } diff --git a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx index aa974eb37..2a6bef7f8 100644 --- a/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx +++ b/apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx @@ -159,13 +159,11 @@ export default async function BookingConfirmation({ - - - + ) } diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx index fac8bb5a5..1c3cb2eaa 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx @@ -155,12 +155,7 @@ export async function SelectHotelMapContainer({ cityCoordinates={cityCoordinates} bookingCode={bookingCode ?? ""} /> - - - + ) } diff --git a/apps/scandic-web/components/TrackingSDK/RouterTransition.tsx b/apps/scandic-web/components/TrackingSDK/RouterTransition.tsx index 2d397cd90..d6731a207 100644 --- a/apps/scandic-web/components/TrackingSDK/RouterTransition.tsx +++ b/apps/scandic-web/components/TrackingSDK/RouterTransition.tsx @@ -49,44 +49,65 @@ export default function RouterTransition({ useEffect(() => { if (!hasRun && !hasRunInitial.current) { - const handleLoad = () => { - const perfObserver = new PerformanceObserver((observedEntries) => { - const entry = observedEntries.getEntriesByType("navigation")[0] - - if (entry) { - const trackingData = { - ...pageData, - sessionId, - pathName, - pageLoadTime: entry.duration / 1000, - } - const pageObject = createSDKPageObject(trackingData) - trackPageView({ - event: "pageView", - pageInfo: pageObject, - userInfo: userData, - hotelInfo: hotelInfo, - paymentInfo, - }) - perfObserver.disconnect() - } - }) - perfObserver.observe({ - type: "navigation", - buffered: true, - }) - } - // If the page is already loaded, execute immediately - if (document.readyState === "complete") { - handleLoad() - } else { - // Otherwise wait for the load event - window.addEventListener("load", handleLoad) - return () => window.removeEventListener("load", handleLoad) - } - hasRunInitial.current = true setHasRun() + + const getPageLoadTime = () => { + return new Promise((resolve) => { + const observer = new PerformanceObserver((entries) => { + const navEntry = entries.getEntriesByType("navigation")[0] + if (navEntry) { + observer.disconnect() + resolve(navEntry.duration / 1000) + } + }) + observer.observe({ type: "navigation", buffered: true }) + }) + } + + const getLCPTime = () => { + return new Promise((resolve) => { + const observer = new PerformanceObserver((entries) => { + const lastEntry = entries.getEntries().pop() + if (lastEntry) { + observer.disconnect() + resolve(lastEntry.startTime / 1000) + } + }) + observer.observe({ type: "largest-contentful-paint", buffered: true }) + }) + } + + const trackPerformance = async () => { + const [pageLoadTime, lcpTime] = await Promise.all([ + getPageLoadTime(), + getLCPTime(), + ]) + + const trackingData = { + ...pageData, + sessionId, + pathName, + pageLoadTime, + lcpTime, + } + const pageObject = createSDKPageObject(trackingData) + + trackPageView({ + event: "pageView", + pageInfo: pageObject, + userInfo: userData, + hotelInfo, + paymentInfo, + }) + } + + if (document.readyState === "complete") { + trackPerformance() + } else { + window.addEventListener("load", trackPerformance) + return () => window.removeEventListener("load", trackPerformance) + } } }, [ pathName, diff --git a/apps/scandic-web/components/TrackingSDK/index.tsx b/apps/scandic-web/components/TrackingSDK/index.tsx index e9bcaa3a0..54928d99e 100644 --- a/apps/scandic-web/components/TrackingSDK/index.tsx +++ b/apps/scandic-web/components/TrackingSDK/index.tsx @@ -1,6 +1,7 @@ -import { getUserTracking } from "@/lib/trpc/memoizedRequests" +"use client" import RouterTransition from "@/components/TrackingSDK/RouterTransition" +import { trpc } from "@/lib/trpc/client" import type { TrackingSDKHotelInfo, @@ -8,11 +9,7 @@ import type { TrackingSDKPaymentInfo, } from "@/types/components/tracking" -export const preloadUserTracking = () => { - void getUserTracking() -} - -export default async function TrackingSDK({ +export default function TrackingSDK({ pageData, hotelInfo, paymentInfo, @@ -21,7 +18,12 @@ export default async function TrackingSDK({ hotelInfo?: TrackingSDKHotelInfo paymentInfo?: TrackingSDKPaymentInfo }) { - const userTrackingData = await getUserTracking() + const { data: userTrackingData, isPending } = + trpc.user.userTrackingInfo.useQuery() + + if (isPending || !userTrackingData) { + return null + } return ( - - - + ) } diff --git a/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx b/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx index 6ff95e6d3..f90be5914 100644 --- a/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx +++ b/apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx @@ -29,9 +29,7 @@ export default async function AboutScandicFriends() { - - - + ) } diff --git a/apps/scandic-web/lib/trpc/memoizedRequests/index.ts b/apps/scandic-web/lib/trpc/memoizedRequests/index.ts index 7127aa4cd..c724e9cd2 100644 --- a/apps/scandic-web/lib/trpc/memoizedRequests/index.ts +++ b/apps/scandic-web/lib/trpc/memoizedRequests/index.ts @@ -64,10 +64,6 @@ export const getMembershipCards = cache( } ) -export const getUserTracking = cache(async function getMemoizedUserTracking() { - return serverClient().user.tracking() -}) - export const getHotelsByCSFilter = cache(async function getMemoizedHotels( input: GetHotelsByCSFilterInput ) { diff --git a/apps/scandic-web/server/routers/user/query.ts b/apps/scandic-web/server/routers/user/query.ts index f5ed5fbc1..b2f4721b5 100644 --- a/apps/scandic-web/server/routers/user/query.ts +++ b/apps/scandic-web/server/routers/user/query.ts @@ -357,7 +357,7 @@ export const userQueryRouter = router({ const membershipLevel = getMembership(verifiedData.data.memberships) return membershipLevel }), - tracking: safeProtectedProcedure.query(async function ({ ctx }) { + userTrackingInfo: safeProtectedProcedure.query(async function ({ ctx }) { const notLoggedInUserTrackingData: TrackingSDKUserData = { loginStatus: "Non-logged in", } diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts index d883aab9e..891c7faa4 100644 --- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts +++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts @@ -16,4 +16,4 @@ export interface ConfirmationProps extends BookingConfirmation { export interface BookingConfirmationAlertsProps { booking: BookingConfirmationSchema -} \ No newline at end of file +} diff --git a/apps/scandic-web/types/components/tracking.ts b/apps/scandic-web/types/components/tracking.ts index 0570b4497..893898904 100644 --- a/apps/scandic-web/types/components/tracking.ts +++ b/apps/scandic-web/types/components/tracking.ts @@ -26,6 +26,7 @@ export type TrackingSDKPageData = { domain?: string siteSections: string pageLoadTime?: number // Page load time in seconds + lcpTime?: number // Largest contentful paint time in seconds sessionId?: string | null }