Merged in fix/SW-3026-prod---users-are-not-focused-on- (pull request #2379)

fix: SW-3026 Fixed scroll issue

* fix: SW-3026 Fixed scroll issue

* fix: SW-3026 Moved to global solution for scroll to top after page navigation


Approved-by: Tobias Johansson
Approved-by: Linus Flood

apps/scandic-web/app/[lang]/(live)/layout.tsx

@@ -17,11 +17,11 @@ import Footer from "@/components/Footer"
 import Header from "@/components/Header"
 import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
 import { RACRouterProvider } from "@/components/RACRouterProvider"
+import RouteChange from "@/components/RouteChange"
 import SitewideAlert from "@/components/SitewideAlert"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
-import RouterTracking from "@/components/TrackingSDK/RouterTracking"
 import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
@@ -74,7 +74,7 @@ export default async function RootLayout(
             >
               <TrpcProvider>
                 <RACRouterProvider>
-                  <RouterTracking />
+                  <RouteChange />
                   <SitewideAlert />
                   <Header />
                   {bookingwidget}

apps/scandic-web/app/[lang]/(live-current)/layout.tsx

@@ -14,8 +14,8 @@ import CookieBotConsent from "@/components/CookieBot"
 import AdobeScript from "@/components/Current/AdobeScript"
 import Footer from "@/components/Current/Footer"
 import LangPopup from "@/components/Current/LangPopup"
+import RouteChange from "@/components/RouteChange"
 import SkipToMainContent from "@/components/SkipToMainContent"
-import RouterTracking from "@/components/TrackingSDK/RouterTracking"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
@@ -70,7 +70,7 @@ export default async function RootLayout(
           locale={params.lang}
           messages={messages}
         >
-          <RouterTracking />
+          <RouteChange />
           {header}
           {children}
           <Footer />

apps/scandic-web/app/[lang]/(no-layout)/layout.tsx

@@ -14,10 +14,10 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import { SessionRefresher } from "@/components/Auth/TokenRefresher"
 import CookieBotConsent from "@/components/CookieBot"
 import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
+import RouteChange from "@/components/RouteChange"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
-import RouterTracking from "@/components/TrackingSDK/RouterTracking"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
 import { setLang } from "@/i18n/serverContext"
@@ -61,7 +61,7 @@ export default async function RootLayout(
             messages={messages}
           >
             <TrpcProvider>
-              <RouterTracking />
+              <RouteChange />
               {children}
               <ToastHandler />
               <SessionRefresher />

apps/scandic-web/app/[lang]/(partner)/layout.tsx

@@ -14,10 +14,10 @@ import TrpcProvider from "@/lib/trpc/Provider"
 import TokenRefresher from "@/components/Auth/TokenRefresher"
 import CookieBotConsent from "@/components/CookieBot"
 import StorageCleaner from "@/components/HotelReservation/EnterDetails/StorageCleaner"
+import RouteChange from "@/components/RouteChange"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
-import RouterTracking from "@/components/TrackingSDK/RouterTracking"
 import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
@@ -66,7 +66,7 @@ export default async function RootLayout(
           messages={messages}
         >
           <TrpcProvider>
-            <RouterTracking />
+            <RouteChange />
             {children}
             <ToastHandler />
             <TokenRefresher />

apps/scandic-web/app/[lang]/webview/layout.tsx

@@ -9,10 +9,10 @@ import { Lang } from "@scandic-hotels/common/constants/language"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
+import RouteChange from "@/components/RouteChange"
 import { ToastHandler } from "@/components/TempDesignSystem/Toasts"
 import AdobeSDKScript from "@/components/TrackingSDK/AdobeSDKScript"
 import GTMScript from "@/components/TrackingSDK/GTMScript"
-import RouterTracking from "@/components/TrackingSDK/RouterTracking"
 import { FontPreload } from "@/fonts/font-preloading"
 import { getMessages } from "@/i18n"
 import ClientIntlProvider from "@/i18n/Provider"
@@ -57,7 +57,7 @@ export default async function RootLayout(
           messages={messages}
         >
           <TrpcProvider>
-            <RouterTracking />
+            <RouteChange />
             {children}
             <ToastHandler />
           </TrpcProvider>

apps/scandic-web/components/RouteChange.tsx

@@ -9,7 +9,7 @@ import useTrackingStore from "@/stores/tracking"
 import useLang from "@/hooks/useLang"
 import { trackPageViewStart } from "@/utils/tracking"
 
-export default function RouterTracking() {
+export default function RouteChange() {
   const pathName = usePathname()
   const searchParams = useSearchParams()
   const currentLang = useLang()
@@ -28,6 +28,11 @@ export default function RouterTracking() {
       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()) {
       setInitialPageLoadTime(Date.now())