Merged in feat/SW-904-add-back-to-top-button (pull request #923)

Feat/SW-904 add back to top button on hotel list page

* feat(SW-904): Added back to top button

* fix: removed alert on hotel listing page

* Remove console.log


Approved-by: Niclas Edenvin

components/HotelReservation/HotelCardListing/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 import { useSearchParams } from "next/navigation"
-import { useMemo } from "react"
+import { useEffect, useMemo, useState } from "react"
+import { useIntl } from "react-intl"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
+
 import HotelCard from "../HotelCard"
 import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
 
@@ -22,9 +25,11 @@ export default function HotelCardListing({
   activeCard,
   onHotelCardHover,
 }: HotelCardListingProps) {
+  const intl = useIntl()
   const searchParams = useSearchParams()
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
+  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -82,6 +87,20 @@ export default function HotelCardListing({
     return filteredHotels
   }, [activeFilters, sortedHotels, setResultCount])
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const hasScrolledPast = window.scrollY > 490
+      setShowBackToTop(hasScrolledPast)
+    }
+
+    window.addEventListener("scroll", handleScroll, { passive: true })
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: "smooth" })
+  }
+
   return (
     <section className={styles.hotelCards}>
       {hotels?.length
@@ -95,6 +114,7 @@ export default function HotelCardListing({
             />
           ))
         : null}
+      {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
     </section>
   )
 }