fix(SW-3189): Fixing hash navigation when query parameters exists on hotel pages

Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -2,7 +2,6 @@
 
 import { cx } from "class-variance-authority"
 import NextLink from "next/link"
-import { useRouter } from "next/navigation"
 import {
   useCallback,
   useEffect,
@@ -32,7 +31,6 @@ interface TabNavigationProps {
 
 export default function TabNavigation({ pageSections }: TabNavigationProps) {
   const [activeHash, setActiveHash] = useState<string>()
-  const router = useRouter()
   const tabNavigationRef = useRef<HTMLDivElement>(null)
   const tabRefs = useMemo(() => new Map<string, HTMLAnchorElement>(), [])
   const tabLinks = Object.values(pageSections).map(({ hash }) => hash)
@@ -85,10 +83,13 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
 
   useEffect(() => {
     if (activeSectionId) {
-      router.replace(`#${activeSectionId}`, { scroll: false })
+      const url = new URL(window.location.href)
+      url.hash = activeSectionId
+      window.history.replaceState(null, "", url.toString())
+
       setActiveHash(activeSectionId)
     }
-  }, [activeSectionId, router])
+  }, [activeSectionId])
 
   return (
     <div
@@ -122,10 +123,22 @@ export default function TabNavigation({ pageSections }: TabNavigationProps) {
                     tabRefs.set(hash, element)
                   }
                 }}
-                onClick={() => {
+                onClick={(e) => {
+                  // Prevent default anchor behavior as it doesn't work well with query params
+                  // and to ensure smooth scrolling works correctly
+                  e.preventDefault()
                   pauseScrollSpy()
                   setActiveHash(hash)
                   trackHotelTabClick(heading)
+                  const url = new URL(window.location.href)
+                  url.hash = hash
+                  window.history.pushState(null, "", url.toString())
+
+                  // Manually scroll to the element with that ID
+                  const element = document.getElementById(hash)
+                  if (element) {
+                    element.scrollIntoView({ behavior: "smooth" })
+                  }
                 }}
               >
                 {heading}