From 96820ba89a7f42cfe45e4031f9b5bf8bcb9d5034 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 10 Jan 2025 12:01:42 +0100
Subject: [PATCH] feat(SW-1347): SidePeekProvider is now using '#s-' instead of
 '?s='

---
 .../HotelPage/AmenitiesList/index.tsx         |  2 +-
 .../CardGrid/ActivitiesCardGrid.tsx           |  4 +--
 .../HotelPage/IntroSection/index.tsx          |  2 +-
 .../HotelPage/Rooms/RoomCard/index.tsx        |  2 +-
 .../SidePeeks/SidePeekProvider/index.tsx      | 32 ++++++++-----------
 hooks/useHash.tsx                             | 17 ++--------
 utils/facilityCards.ts                        |  2 +-
 7 files changed, 22 insertions(+), 39 deletions(-)

diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx
index b55332f6a..fa0a42f41 100644
--- a/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/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}
diff --git a/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx b/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx
index a2fdbc391..d7a2540bf 100644
--- a/components/ContentType/HotelPage/Facilities/CardGrid/ActivitiesCardGrid.tsx
+++ b/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,
diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index b14866ea8..6dd2356ec 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/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" })}
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index 1d8214451..a1054e826 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/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>
diff --git a/components/SidePeeks/SidePeekProvider/index.tsx b/components/SidePeeks/SidePeekProvider/index.tsx
index dad577b55..43c6bdff3 100644
--- a/components/SidePeeks/SidePeekProvider/index.tsx
+++ b/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
diff --git a/hooks/useHash.tsx b/hooks/useHash.tsx
index 2c9c1d60c..5c0ab8e12 100644
--- a/hooks/useHash.tsx
+++ b/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)
 }
diff --git a/utils/facilityCards.ts b/utils/facilityCards.ts
index daf1e2219..05b2db653 100644
--- a/utils/facilityCards.ts
+++ b/utils/facilityCards.ts
@@ -42,7 +42,7 @@ function setCardProps(
     heading,
     scriptedTopTitle,
     secondaryButton: {
-      href: `?s=${href}`,
+      href: `#s-${href}`,
       title: buttonText,
       isExternal: false,
       scrollOnClick: false,