Merged in feat/sw-3489-route-change-component (pull request #2845)

feat(SW-3489): Add RouteChange component to partner-sas

* Add RouteChange component to partner-sas


Approved-by: Linus Flood

apps/partner-sas/app/[lang]/layout.tsx

@@ -22,6 +22,7 @@ import AdobeSDKScript from "@/components/AdobeSDKScript"
 import CookieBotConsent from "@/components/CookieBotConsent"
 import GTMScript from "@/components/GTMScript"
 import { RACRouterProvider } from "@/components/RACRouterProvider"
+import RouteChange from "@/components/RouteChange"
 import { SiteWideAlert } from "@/components/SitewideAlert"
 import TrpcProvider from "@/components/TrpcProvider"
 import { FontPreload } from "@/fonts/font-preloading"
@@ -94,11 +95,11 @@ export default async function RootLayout(props: RootLayoutProps) {
               messages={messages}
             >
               <NuqsAdapter>
-                {/* TODO handle onError */}
                 <TrpcProvider>
                   <RACRouterProvider>
                     <BookingFlowConfig config={bookingFlowConfig}>
                       <BookingFlowProviders>
+                        <RouteChange />
                         <SiteWideAlert />
                         <Header />
                         {props.bookingwidget}

apps/partner-sas/components/RouteChange.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { startTransition, useEffect } from "react"
+
+import { isSameBookingWidgetParams } from "@scandic-hotels/booking-flow/utils/isSameBooking"
+import useRouterTransitionStore from "@scandic-hotels/common/stores/router-transition"
+import useTrackingStore from "@scandic-hotels/common/stores/tracking"
+import { trackPageViewStart } from "@scandic-hotels/tracking/pageview"
+
+import useLang from "@/hooks/useLang"
+
+export default function RouteChange() {
+  const pathName = usePathname()
+  const searchParams = useSearchParams()
+  const currentLang = useLang()
+
+  const {
+    setInitialPageLoadTime,
+    updateRouteInfo,
+    hasPathOrLangChanged,
+    hasBookingFlowParamsChanged,
+  } = useTrackingStore()
+
+  const { startRouterTransition } = useRouterTransitionStore()
+
+  useEffect(() => {
+    if (pathName.includes("payment-callback")) {
+      return
+    }
+
+    if (hasPathOrLangChanged()) {
+      // Scroll to top on page load whenever page is navigated to new URL (page)
+      window.scrollTo({ top: 0, left: 0, behavior: "instant" })
+    }
+
+    updateRouteInfo(pathName, currentLang, searchParams)
+    if (
+      hasPathOrLangChanged() ||
+      hasBookingFlowParamsChanged(isSameBookingWidgetParams)
+    ) {
+      setInitialPageLoadTime(Date.now())
+      trackPageViewStart()
+      startTransition(() => {
+        startRouterTransition()
+      })
+    }
+  }, [
+    pathName,
+    searchParams,
+    currentLang,
+    updateRouteInfo,
+    hasPathOrLangChanged,
+    hasBookingFlowParamsChanged,
+    setInitialPageLoadTime,
+    startRouterTransition,
+  ])
+
+  return null
+}