Merged in refactor/LOY-495-hook-for-sidepeek-scrolling (pull request #3297)

refactor(LOY-495): create useSidePeekScrollToTop hook

* refactor(LOY-495): create useSidePeekScrollToTop hook

* fix(LOY-495):  Read ref fresh each time


Approved-by: Emma Zettervall

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/index.tsx

@@ -1,9 +1,8 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
+import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
 import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
@@ -32,24 +31,8 @@ export function PreviousStaysSidePeek({
   const intl = useIntl()
   const lang = useLang()
 
-  const [scrollContainer, setScrollContainer] = useState<HTMLElement | null>(
-    null
-  )
-
-  const scrollContainerRef = (node: HTMLDivElement | null) => {
-    const parent = node?.parentElement
-    // SidePeekSelfControlled renders children twice: in the modal & in an sr-only SEO wrapper.
-    // We filter out the SEO wrapper to get the actual scrollable container.
-    if (parent && !parent.classList.contains("sr-only")) {
-      setScrollContainer(parent)
-    }
-  }
-
-  const { showBackToTop, scrollToTop } = useScrollToTop({
-    threshold: 200,
-    element: scrollContainer,
-    refScrollable: true,
-  })
+  const { scrollContainerRef, showBackToTop, scrollToTop } =
+    useSidePeekScrollToTop()
 
   const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(