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

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -5,8 +5,8 @@
 @media (min-width: 768px) {
   .hotelListing {
     display: block;
-    width: 420px;
-    padding: var(--Spacing-x3) var(--Spacing-x4);
+    width: 100%;
     overflow-y: auto;
+    padding-top: var(--Spacing-x2);
   }
 }

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -4,15 +4,19 @@ import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 
 import styles from "./hotelListing.module.css"
 
-import { HotelCardListingType } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-export default function HotelListing({ hotels }: HotelListingProps) {
+export default function HotelListing({
+  hotels,
+  cardState = "default",
+}: HotelListingProps) {
   return (
     <div className={styles.hotelListing}>
       <HotelCardListing
         hotelData={hotels}
-        type={HotelCardListingType.MapListing}
+        type={HotelCardListingTypeEnum.MapListing}
+        state={cardState}
       />
     </div>
   )

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}

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -23,16 +23,29 @@
   height: 44px;
 }
 
-.filterContainer .closeButton {
-  color: var(--UI-Text-High-Contrast);
+.backToTopButton {
+  display: none;
 }
 
 @media (min-width: 768px) {
   .closeButton {
     display: flex !important;
   }
-  .filterContainer {
-    display: none;
+  .filterContainerCloseButton {
+    display: none !important;
+  }
+  .backToTopButton {
+    position: fixed;
+    bottom: 24px;
+    left: 32px;
+    display: flex;
+  }
+  .listingContainer {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x3) var(--Spacing-x4);
+    overflow-y: auto;
+    min-width: 420px;
+    position: relative;
   }
   .container {
     display: flex;