Merged in feat/LOY-495-Stays-Sidepeek-Scroll-to-Top (pull request #3279)

Feat/LOY-495 Scroll to Top Functionality in Previous Stays Sidepeek

* feat(LOY-495): enable scroll to top functionality for past stays sidepeek


Approved-by: Emma Zettervall
Approved-by: Matilda Landström

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

@@ -1,7 +1,10 @@
 "use client"
 
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { useScrollToTop } from "@scandic-hotels/common/hooks/useScrollToTop"
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -29,6 +32,25 @@ 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 { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
     trpc.user.stays.previous.useInfiniteQuery(
       {
@@ -64,7 +86,7 @@ export function PreviousStaysSidePeek({
       isOpen={isOpen}
       onClose={onClose}
     >
-      <div className={styles.content}>
+      <div ref={scrollContainerRef} className={styles.content}>
         {isLoading ? (
           <div className={styles.loadingContainer}>
             <LoadingSpinner />
@@ -96,6 +118,16 @@ export function PreviousStaysSidePeek({
             )}
           </>
         )}
+        {showBackToTop && !isLoading && (
+          <BackToTopButton
+            label={intl.formatMessage({
+              id: "common.backToTop",
+              defaultMessage: "Back to top",
+            })}
+            onPress={scrollToTop}
+            position="right"
+          />
+        )}
       </div>
     </SidePeekSelfControlled>
   )

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/previousStaysSidePeek.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x3);
+  position: relative;
 }
 
 .loadingContainer {