feat(SW-340): Added scroll to top button

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { APIProvider } from "@vis.gl/react-google-maps"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
@@ -30,6 +30,29 @@ export default function SelectHotelMap({
   const lang = useLang()
   const intl = useIntl()
   const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
+  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
+
+  useEffect(() => {
+    const hotelListingElement = document.querySelector(
+      `.${styles.listingContainer}`
+    )
+    if (!hotelListingElement) return
+
+    const handleScroll = () => {
+      const hasScrolledPast = hotelListingElement.scrollTop > 490
+      setShowBackToTop(hasScrolledPast)
+    }
+
+    hotelListingElement.addEventListener("scroll", handleScroll)
+    return () => hotelListingElement.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  function scrollToTop() {
+    const hotelListingElement = document.querySelector(
+      `.${styles.listingContainer}`
+    )
+    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
+  }
 
   function handleModalDismiss() {
     router.back()
@@ -54,25 +77,41 @@ export default function SelectHotelMap({
   return (
     <APIProvider apiKey={apiKey}>
       <div className={styles.container}>
-        <div className={styles.filterContainer}>
-          <Button
-            intent="text"
-            size="small"
-            variant="icon"
-            wrapping
-            onClick={isModal ? handleModalDismiss : handlePageRedirect}
-          >
-            <CloseLargeIcon />
-          </Button>
-          <span>Filter and sort</span>
-          {/* TODO: Add filter and sort button */}
+        <div className={styles.listingContainer}>
+          <div className={styles.filterContainer}>
+            <Button
+              intent="text"
+              size="small"
+              variant="icon"
+              wrapping
+              onClick={isModal ? handleModalDismiss : handlePageRedirect}
+              className={styles.filterContainerCloseButton}
+            >
+              <CloseLargeIcon />
+            </Button>
+            <span>Filter and sort</span>
+            {/* TODO: Add filter and sort button */}
+          </div>
+          <HotelListing
+            hotels={hotels}
+            cardState={activeHotelPin ? "active" : "default"}
+          />
+          {showBackToTop && (
+            <Button
+              intent="inverted"
+              size="small"
+              theme="base"
+              className={styles.backToTopButton}
+              onClick={scrollToTop}
+            >
+              {intl.formatMessage({ id: "Back to top" })}
+            </Button>
+          )}
         </div>
-        <HotelListing hotels={hotels} />
         <InteractiveMap
           closeButton={closeButton}
           coordinates={coordinates}
           hotelPins={hotelPins}
-          hotels={hotels}
           activeHotelPin={activeHotelPin}
           onActiveHotelPinChange={setActiveHotelPin}
           mapId={mapId}