feat(SW-1347): SidePeekProvider is now using '#s-' instead of '?s='

components/ContentType/HotelPage/AmenitiesList/index.tsx

@@ -43,7 +43,7 @@ export default async function AmenitiesList({
       </div>
       <Link
         scroll={false}
-        href={`?s=${amenities[lang]}`}
+        href={`#s-${amenities[lang]}`}
         color="burgundy"
         variant="icon"
         className={styles.showAllAmenities}

components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx

@@ -20,7 +20,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
     theme: hasImage ? "image" : "primaryDark",
     primaryButton: hasImage
       ? {
-          href: `?s=${activities[lang]}`,
+          href: `#s-${activities[lang]}`,
           title: activitiesCard.ctaText,
           isExternal: false,
           scrollOnClick: false,
@@ -29,7 +29,7 @@ export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
     secondaryButton: hasImage
       ? undefined
       : {
-          href: `?s=${activities[lang]}`,
+          href: `#s-${activities[lang]}`,
           title: activitiesCard.ctaText,
           isExternal: false,
           scrollOnClick: false,

components/ContentType/HotelPage/IntroSection/index.tsx

@@ -72,7 +72,7 @@ export default async function IntroSection({
           className={styles.introLink}
           color="burgundy"
           variant="icon"
-          href={`?s=${about[lang]}`}
+          href={`#s-${about[lang]}`}
           scroll={false}
         >
           {intl.formatMessage({ id: "Read more about the hotel" })}

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -55,7 +55,7 @@ export function RoomCard({ room }: RoomCardProps) {
           </Body>
         </div>
         <Button intent="text" type="button" size="medium" theme="base" asChild>
-          <Link scroll={false} href={`?s=${getRoomNameAsParam(name)}`}>
+          <Link scroll={false} href={`#s-${getRoomNameAsParam(name)}`}>
             {intl.formatMessage({ id: "See room details" })}
             <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
           </Link>

components/SidePeeks/SidePeekProvider/index.tsx

@@ -1,7 +1,9 @@
 "use client"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useRouter } from "next/navigation"
 import { createContext, useEffect, useState } from "react"
 
+import useHash from "@/hooks/useHash"
+
 interface ISidePeekContext {
   handleClose: (isOpen: boolean) => void
   activeSidePeek: string | null
@@ -9,28 +11,24 @@ interface ISidePeekContext {
 
 export const SidePeekContext = createContext<ISidePeekContext | null>(null)
 
-function SidePeekProvider({ children }: React.PropsWithChildren) {
+export default function SidePeekProvider({
+  children,
+}: React.PropsWithChildren) {
   const router = useRouter()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(() => {
-    const sidePeekParam = searchParams.get("s")
-    return sidePeekParam || null
-  })
+  const hash = useHash()
+  const [activeSidePeek, setActiveSidePeek] = useState<string | null>(null)
 
   useEffect(() => {
-    const sidePeekParam = searchParams.get("s")
-    if (sidePeekParam !== activeSidePeek) {
-      setActiveSidePeek(sidePeekParam)
+    if (hash?.startsWith("s-")) {
+      setActiveSidePeek(hash.slice(2))
+    } else {
+      setActiveSidePeek(null)
     }
-  }, [searchParams, activeSidePeek])
+  }, [hash, setActiveSidePeek])
 
   function handleClose(isOpen: boolean) {
     if (!isOpen) {
-      const nextSearchParams = new URLSearchParams(searchParams.toString())
-      nextSearchParams.delete("s")
-
-      router.push(`${pathname}?${nextSearchParams}`, { scroll: false })
+      router.push(window.location.pathname, { scroll: false })
       setActiveSidePeek(null)
     }
   }
@@ -41,5 +39,3 @@ function SidePeekProvider({ children }: React.PropsWithChildren) {
     </SidePeekContext.Provider>
   )
 }
-
-export default SidePeekProvider

hooks/useHash.tsx

@@ -8,21 +8,8 @@ export default function useHash() {
   const params = useParams()
 
   useEffect(() => {
-    const updateHash = () => {
-      const newHash = window.location.hash
-        ? window.location.hash.slice(1)
-        : undefined
-      setHash(newHash)
-    }
-
-    updateHash()
-
-    window.addEventListener("hashchange", updateHash)
-
-    return () => {
-      window.removeEventListener("hashchange", updateHash)
-    }
+    setHash(window.location.hash)
   }, [params])
 
-  return hash
+  return hash?.slice(1)
 }

utils/facilityCards.ts

@@ -42,7 +42,7 @@ function setCardProps(
     heading,
     scriptedTopTitle,
     secondaryButton: {
-      href: `?s=${href}`,
+      href: `#s-${href}`,
       title: buttonText,
       isExternal: false,
       scrollOnClick: false,