Merged in fix/SW-1111-issues-with-map-select-hotel (pull request #1057)

Fix/SW-1111 issues with map select hotel Approved-by: Bianca Widstam
2024-12-10 12:40:13 +00:00
parent e885b76a12 ad0a6cea7b
commit 463354f10b
37 changed files with 508 additions and 260 deletions
--- a/.env.test
+++ b/.env.test
@@ -7,6 +7,7 @@ CMS_API_KEY="test"
 CMS_PREVIEW_TOKEN="test"
 CMS_PREVIEW_URL="test"
 CMS_URL="test"
+CMS_BRANCH="development"
 CURITY_CLIENT_ID_SERVICE="test"
 CURITY_CLIENT_SECRET_SERVICE="test"
 CURITY_CLIENT_ID_USER="test"
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/loading.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/loading.tsx
@@ -1,5 +0,0 @@
-import LoadingSpinner from "@/components/LoadingSpinner"
-
-export default function LoadingModal() {
-  return <LoadingSpinner />
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
@@ -1,79 +0,0 @@
-import { notFound } from "next/navigation"
-
-import { env } from "@/env/server"
-import { getCityCoordinates, getLocations } from "@/lib/trpc/memoizedRequests"
-
-import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
-import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
-import {
-  generateChildrenString,
-  getHotelReservationQueryParams,
-} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { MapModal } from "@/components/MapModal"
-import { setLang } from "@/i18n/serverContext"
-
-import { fetchAvailableHotels, getFiltersFromHotels } from "../../utils"
-
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function SelectHotelMapPage({
-  params,
-  searchParams,
-}: PageArgs<LangParams, SelectHotelSearchParams>) {
-  setLang(params.lang)
-  const locations = await getLocations()
-
-  if (!locations || "error" in locations) {
-    return null
-  }
-  const city = locations.data.find(
-    (location) =>
-      location.name.toLowerCase() === searchParams.city.toLowerCase()
-  )
-  if (!city) return notFound()
-
-  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
-  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
-
-  const selectHotelParams = new URLSearchParams(searchParams)
-  const selectHotelParamsObject =
-    getHotelReservationQueryParams(selectHotelParams)
-  const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
-  const children = selectHotelParamsObject.room[0].child
-    ? generateChildrenString(selectHotelParamsObject.room[0].child)
-    : undefined // TODO: Handle multiple rooms
-
-  const hotels = await fetchAvailableHotels({
-    cityId: city.id,
-    roomStayStartDate: searchParams.fromDate,
-    roomStayEndDate: searchParams.toDate,
-    adults,
-    children,
-  })
-
-  const validHotels = hotels.filter(
-    (hotel): hotel is HotelData => hotel !== null
-  )
-
-  const hotelPins = getHotelPins(validHotels)
-  const filterList = getFiltersFromHotels(validHotels)
-  const cityCoordinates = await getCityCoordinates({
-    city: city.name,
-    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
-  })
-
-  return (
-    <MapModal>
-      <SelectHotelMap
-        apiKey={googleMapsApiKey}
-        hotelPins={hotelPins}
-        mapId={googleMapId}
-        hotels={validHotels}
-        filterList={filterList}
-        cityCoordinates={cityCoordinates}
-      />
-    </MapModal>
-  )
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/default.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/default.tsx
@@ -1,3 +0,0 @@
-export default function Default() {
-  return null
-}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css
@@ -3,3 +3,9 @@
  background-color: var(--Base-Background-Primary-Normal);
  position: relative;
 }
+
+@media screen and (min-width: 768px) {
+  .layout {
+    z-index: 0;
+  }
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.tsx
@@ -4,14 +4,6 @@ import { LangParams, LayoutArgs } from "@/types/params"

 export default function HotelReservationLayout({
  children,
-  modal,
-}: React.PropsWithChildren<
-  LayoutArgs<LangParams> & { modal: React.ReactNode }
->) {
-  return (
-    <div className={styles.layout}>
-      {children}
-      {modal}
-    </div>
-  )
+}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+  return <div className={styles.layout}>{children}</div>
 }
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/loading.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/loading.tsx
@@ -0,0 +1,5 @@
+import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
+
+export default function Loading() {
+  return <SelectHotelMapContainerSkeleton />
+}
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx
@@ -1 +1,56 @@
-export { default } from "../@modal/(.)map/page"
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+
+import { getLocations } from "@/lib/trpc/memoizedRequests"
+
+import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer"
+import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton"
+import {
+  generateChildrenString,
+  getHotelReservationQueryParams,
+} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import { MapContainer } from "@/components/MapContainer"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./page.module.css"
+
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+  searchParams,
+}: PageArgs<LangParams, SelectHotelSearchParams>) {
+  setLang(params.lang)
+  const locations = await getLocations()
+
+  if (!locations || "error" in locations) {
+    return null
+  }
+  const city = locations.data.find(
+    (location) =>
+      location.name.toLowerCase() === searchParams.city.toLowerCase()
+  )
+  if (!city) return notFound()
+
+  const selectHotelParams = new URLSearchParams(searchParams)
+  const selectHotelParamsObject =
+    getHotelReservationQueryParams(selectHotelParams)
+  const adultsInRoom = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
+  const childrenInRoom = selectHotelParamsObject.room[0].child
+    ? generateChildrenString(selectHotelParamsObject.room[0].child)
+    : undefined // TODO: Handle multiple rooms
+
+  return (
+    <div className={styles.main}>
+      <MapContainer>
+        <SelectHotelMapContainer
+          city={city}
+          searchParams={searchParams}
+          adultsInRoom={adultsInRoom}
+          childrenInRoom={childrenInRoom}
+        />
+      </MapContainer>
+    </div>
+  )
+}
--- a/app/[lang]/(live)/layout.tsx
+++ b/app/[lang]/(live)/layout.tsx
@@ -3,7 +3,6 @@ import "@scandic-hotels/design-system/style.css"

 import Script from "next/script"

-import { env } from "@/env/server"
 import TrpcProvider from "@/lib/trpc/Provider"

 import TokenRefresher from "@/components/Auth/TokenRefresher"
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/List/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/SearchList/List/index.tsx
@@ -23,7 +23,7 @@ export default function List({
          getItemProps={getItemProps}
          highlightedIndex={highlightedIndex}
          index={initialIndex + index}
-          key={location.id}
+          key={location.id + index}
          location={location}
        />
      ))}
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -26,6 +26,7 @@ import type { SearchProps } from "@/types/components/search"
 import type { Location } from "@/types/trpc/routers/hotel/locations"

 const name = "search"
+
 export default function Search({ locations }: SearchProps) {
  const { register, setValue, trigger, unregister } =
    useFormContext<BookingWidgetSchema>()
@@ -166,7 +167,6 @@ export default function Search({ locations }: SearchProps) {
      onInputValueChange={(inputValue) => dispatchInputValue(inputValue)}
    >
      {({
-        closeMenu,
        getInputProps,
        getItemProps,
        getLabelProps,
@@ -207,9 +207,6 @@ export default function Search({ locations }: SearchProps) {
                    id: "Destinations & hotels",
                  }),
                  ...register(name, {
-                    onBlur: function () {
-                      closeMenu()
-                    },
                    onChange: handleOnChange,
                  }),
                  type: "search",
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -4,7 +4,8 @@ import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"
-import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
+import { selectRate } from "@/constants/routes/hotelReservation"
+import { useHotelsMapStore } from "@/stores/hotels-map"

 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
@@ -32,26 +33,27 @@ function HotelCard({
  hotel,
  type = HotelCardListingTypeEnum.PageListing,
  state = "default",
-  onHotelCardHover,
 }: HotelCardProps) {
  const params = useParams()
  const lang = params.lang as Lang
  const intl = useIntl()
+  const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()

  const { hotelData } = hotel
  const { price } = hotel

  const handleMouseEnter = useCallback(() => {
-    if (onHotelCardHover && hotelData) {
-      onHotelCardHover(hotelData.name)
+    if (hotelData) {
+      setActiveHotelPin(hotelData.name)
    }
-  }, [onHotelCardHover, hotelData])
+  }, [setActiveHotelPin, hotelData])

  const handleMouseLeave = useCallback(() => {
-    if (onHotelCardHover) {
-      onHotelCardHover(null)
+    if (hotelData) {
+      setActiveHotelPin(null)
+      setActiveHotelCard(null)
    }
-  }, [onHotelCardHover])
+  }, [setActiveHotelPin, hotelData, setActiveHotelCard])

  if (!hotel || !hotelData) return null

@@ -96,15 +98,21 @@ function HotelCard({
                  {hotelData.address.streetAddress}, {hotelData.address.city}
                </Caption>
              </address>
-              <Link
-                className={styles.addressMobile}
-                href={`${selectHotelMap(lang)}?selectedHotel=${hotelData.name}`}
-                keepSearchParams
-              >
-                <Caption color="baseTextMediumContrast" type="underline">
+              <Caption color="baseTextMediumContrast" type="underline" asChild>
+                <Link
+                  href={`https://www.google.com/maps/dir/?api=1&destination=${hotelData.location.latitude},${hotelData.location.longitude}`}
+                  className={styles.googleMaps}
+                  target="_blank"
+                  aria-label={intl.formatMessage({
+                    id: "Driving directions",
+                  })}
+                  title={intl.formatMessage({
+                    id: "Driving directions",
+                  })}
+                >
                  {hotelData.address.streetAddress}, {hotelData.address.city}
-                </Caption>
-              </Link>
+                </Link>
+              </Caption>
              <div>
                <Divider variant="vertical" color="subtle" />
              </div>
--- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
+++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
@@ -106,8 +106,7 @@
 }

@media (min-width: 768px) {
-  .facilities,
-  .memberPrice {
+  .facilities {
    display: none;
  }
  .dialog {
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -103,12 +103,14 @@ export default function HotelCardDialog({
                  <Caption type="bold">
                    {intl.formatMessage({ id: "From" })}
                  </Caption>
-                  <Subtitle type="two">
-                    {publicPrice} {currency}
-                    <Body asChild>
-                      <span>/{intl.formatMessage({ id: "night" })}</span>
-                    </Body>
-                  </Subtitle>
+                  {publicPrice && (
+                    <Subtitle type="two">
+                      {publicPrice} {currency}
+                      <Body asChild>
+                        <span>/{intl.formatMessage({ id: "night" })}</span>
+                      </Body>
+                    </Subtitle>
+                  )}
                  {memberPrice && (
                    <Subtitle
                      type="two"
--- a/components/HotelReservation/HotelCardDialogListing/index.tsx
+++ b/components/HotelReservation/HotelCardDialogListing/index.tsx
@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef } from "react"
 import { useMediaQuery } from "usehooks-ts"

+import { useHotelsMapStore } from "@/stores/hotels-map"
+
 import useClickOutside from "@/hooks/useClickOutside"

 import HotelCardDialog from "../HotelCardDialog"
@@ -14,18 +16,21 @@ import type { HotelCardDialogListingProps } from "@/types/components/hotelReserv

 export default function HotelCardDialogListing({
  hotels,
-  activeCard,
-  onActiveCardChange,
 }: HotelCardDialogListingProps) {
  const hotelsPinData = hotels ? getHotelPins(hotels) : []
  const activeCardRef = useRef<HTMLDivElement | null>(null)
  const observerRef = useRef<IntersectionObserver | null>(null)
  const dialogRef = useRef<HTMLDivElement>(null)
  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
+    useHotelsMapStore()

-  useClickOutside(dialogRef, !!activeCard && isMobile, () => {
-    onActiveCardChange(null)
-  })
+  function handleClose() {
+    setActiveHotelCard(null)
+    setActiveHotelPin(null)
+  }
+
+  useClickOutside(dialogRef, !!activeHotelCard && isMobile, handleClose)

  const handleIntersection = useCallback(
    (entries: IntersectionObserverEntry[]) => {
@@ -33,12 +38,12 @@ export default function HotelCardDialogListing({
        if (entry.isIntersecting) {
          const cardName = entry.target.getAttribute("data-name")
          if (cardName) {
-            onActiveCardChange(cardName)
+            setActiveHotelCard(cardName)
          }
        }
      })
    },
-    [onActiveCardChange]
+    [setActiveHotelCard]
  )

  useEffect(() => {
@@ -73,13 +78,13 @@ export default function HotelCardDialogListing({
        elements.forEach((el) => observerRef.current?.observe(el))
      }, 1000)
    }
-  }, [activeCard])
+  }, [activeHotelCard])

  return (
    <div className={styles.hotelCardDialogListing} ref={dialogRef}>
      {!!hotelsPinData?.length &&
        hotelsPinData.map((data) => {
-          const isActive = data.name === activeCard
+          const isActive = data.name === activeHotelCard
          return (
            <div
              key={data.name}
@@ -88,8 +93,8 @@ export default function HotelCardDialogListing({
            >
              <HotelCardDialog
                data={data}
-                isOpen={!!activeCard}
-                handleClose={() => onActiveCardChange(null)}
+                isOpen={!!activeHotelCard}
+                handleClose={handleClose}
              />
            </div>
          )
--- a/components/HotelReservation/HotelCardDialogListing/utils.ts
+++ b/components/HotelReservation/HotelCardDialogListing/utils.ts
@@ -12,7 +12,10 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
    name: hotel.hotelData.name,
    publicPrice: hotel.price?.public?.localPrice.pricePerNight ?? null,
    memberPrice: hotel.price?.member?.localPrice.pricePerNight ?? null,
-    currency: hotel.price?.public?.localPrice.currency || null,
+    currency:
+      hotel.price?.public?.localPrice.currency ||
+      hotel.price?.member?.localPrice.currency ||
+      null,
    images: [
      hotel.hotelData.hotelContent.images,
      ...(hotel.hotelData.gallery?.heroImages ?? []),
@@ -25,5 +28,8 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
      .slice(0, 3),
    ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
    operaId: hotel.hotelData.operaId,
+    facilityIds: hotel.hotelData.detailedFacilities.map(
+      (facility) => facility.id
+    ),
  }))
 }
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/components/HotelReservation/HotelCardListing/index.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"

 import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"

 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
@@ -24,14 +25,13 @@ import { AlertTypeEnum } from "@/types/enums/alert"
 export default function HotelCardListing({
  hotelData,
  type = HotelCardListingTypeEnum.PageListing,
-  activeCard,
-  onHotelCardHover,
 }: HotelCardListingProps) {
  const searchParams = useSearchParams()
  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
  const intl = useIntl()
+  const { activeHotelCard } = useHotelsMapStore()

  const sortBy = useMemo(
    () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -111,13 +111,16 @@ export default function HotelCardListing({
        hotels.map((hotel) => (
          <div
            key={hotel.hotelData.operaId}
-            data-active={hotel.hotelData.name === activeCard ? "true" : "false"}
+            data-active={
+              hotel.hotelData.name === activeHotelCard ? "true" : "false"
+            }
          >
            <HotelCard
              hotel={hotel}
              type={type}
-              state={hotel.hotelData.name === activeCard ? "active" : "default"}
-              onHotelCardHover={onHotelCardHover}
+              state={
+                hotel.hotelData.name === activeHotelCard ? "active" : "default"
+              }
            />
          </div>
        ))
@@ -128,7 +131,9 @@ export default function HotelCardListing({
          text={intl.formatMessage({ id: "filters.nohotel.text" })}
        />
      ) : null}
-      {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
+      {showBackToTop && (
+        <BackToTopButton position="right" onClick={scrollToTop} />
+      )}
    </section>
  )
 }
--- a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
+++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
@@ -1,5 +1,10 @@
 "use client"

+import {
+  usePathname,
+  useSearchParams,
+} from "next/dist/client/components/navigation"
+import { useCallback, useState } from "react"
 import {
  Dialog as AriaDialog,
  DialogTrigger,
@@ -13,25 +18,69 @@ import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { CloseLargeIcon, FilterIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
+import Select from "@/components/TempDesignSystem/Select"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"

 import HotelFilter from "../HotelFilter"
-import HotelSorter from "../HotelSorter"
+import { DEFAULT_SORT } from "../HotelSorter"

 import styles from "./filterAndSortModal.module.css"

 import type { FilterAndSortModalProps } from "@/types/components/hotelReservation/selectHotel/filterAndSortModal"
+import {
+  type SortItem,
+  SortOrder,
+} from "@/types/components/hotelReservation/selectHotel/hotelSorter"

 export default function FilterAndSortModal({
  filters,
 }: FilterAndSortModalProps) {
  const intl = useIntl()
  useInitializeFiltersFromUrl()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
  const resultCount = useHotelFilterStore((state) => state.resultCount)
  const setFilters = useHotelFilterStore((state) => state.setFilters)
  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const [sort, setSort] = useState(searchParams.get("sort") ?? DEFAULT_SORT)
+
+  const sortItems: SortItem[] = [
+    {
+      label: intl.formatMessage({ id: "Distance to city centre" }),
+      value: SortOrder.Distance,
+    },
+    { label: intl.formatMessage({ id: "Name" }), value: SortOrder.Name },
+    { label: intl.formatMessage({ id: "Price" }), value: SortOrder.Price },
+    {
+      label: intl.formatMessage({ id: "TripAdvisor rating" }),
+      value: SortOrder.TripAdvisorRating,
+    },
+  ]
+
+  const handleSortSelect = useCallback((value: string | number) => {
+    setSort(value.toString())
+  }, [])
+
+  const handleApplyFiltersAndSorting = useCallback(
+    (close: () => void) => {
+      if (sort === searchParams.get("sort")) {
+        close()
+      }
+
+      const newSearchParams = new URLSearchParams(searchParams)
+      newSearchParams.set("sort", sort)
+
+      window.history.replaceState(
+        null,
+        "",
+        `${pathname}?${newSearchParams.toString()}`
+      )
+      close()
+    },
+    [pathname, searchParams, sort]
+  )

  return (
    <>
@@ -65,7 +114,16 @@ export default function FilterAndSortModal({
                    </Subtitle>
                  </header>
                  <div className={styles.sorter}>
-                    <HotelSorter />
+                    <Select
+                      items={sortItems}
+                      defaultSelectedKey={
+                        searchParams.get("sort") ?? DEFAULT_SORT
+                      }
+                      label={intl.formatMessage({ id: "Sort by" })}
+                      name="sort"
+                      showRadioButton
+                      onSelect={handleSortSelect}
+                    />
                  </div>
                  <div className={styles.divider}>
                    <Divider color="subtle" />
@@ -78,7 +136,7 @@ export default function FilterAndSortModal({
                      intent="primary"
                      size="medium"
                      theme="base"
-                      onClick={close}
+                      onClick={() => handleApplyFiltersAndSorting(close)}
                    >
                      {intl.formatMessage(
                        { id: "See results" },
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -1,5 +1,7 @@
 "use client"

+import { useHotelsMapStore } from "@/stores/hotels-map"
+
 import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"

@@ -8,27 +10,18 @@ import styles from "./hotelListing.module.css"
 import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"

-export default function HotelListing({
-  hotels,
-  activeHotelPin,
-  setActiveHotelPin,
-}: HotelListingProps) {
+export default function HotelListing({ hotels }: HotelListingProps) {
+  const { activeHotelPin } = useHotelsMapStore()
  return (
    <>
      <div className={styles.hotelListing}>
        <HotelCardListing
          hotelData={hotels}
          type={HotelCardListingTypeEnum.MapListing}
-          activeCard={activeHotelPin}
-          onHotelCardHover={setActiveHotelPin}
        />
      </div>
      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
-        <HotelCardDialogListing
-          hotels={hotels}
-          activeCard={activeHotelPin}
-          onActiveCardChange={setActiveHotelPin}
-        />
+        <HotelCardDialogListing hotels={hotels} />
      </div>
    </>
  )
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
@@ -0,0 +1,63 @@
+import { env } from "@/env/server"
+import { getCityCoordinates } from "@/lib/trpc/memoizedRequests"
+
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import { safeTry } from "@/utils/safeTry"
+
+import { getHotelPins } from "../../HotelCardDialogListing/utils"
+import SelectHotelMap from "."
+
+import type {
+  HotelData,
+  NullableHotelData,
+} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+function isValidHotelData(hotel: NullableHotelData): hotel is HotelData {
+  return hotel !== null && hotel !== undefined
+}
+
+export async function SelectHotelMapContainer({
+  city,
+  searchParams,
+  adultsInRoom,
+  childrenInRoom,
+}: SelectHotelMapContainerProps) {
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+
+  const fetchAvailableHotelsPromise = safeTry(
+    fetchAvailableHotels({
+      cityId: city.id,
+      roomStayStartDate: searchParams.fromDate,
+      roomStayEndDate: searchParams.toDate,
+      adults: adultsInRoom,
+      children: childrenInRoom,
+    })
+  )
+
+  const [hotels] = await fetchAvailableHotelsPromise
+
+  const validHotels = hotels?.filter(isValidHotelData) || []
+
+  const hotelPins = getHotelPins(validHotels)
+  const filterList = getFiltersFromHotels(validHotels)
+  const cityCoordinates = await getCityCoordinates({
+    city: city.name,
+    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
+  })
+
+  return (
+    <SelectHotelMap
+      apiKey={googleMapsApiKey}
+      hotelPins={hotelPins}
+      mapId={googleMapId}
+      hotels={validHotels}
+      filterList={filterList}
+      cityCoordinates={cityCoordinates}
+    />
+  )
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css
@@ -0,0 +1,47 @@
+.container {
+  max-width: var(--max-width);
+  height: 100vh;
+  display: flex;
+  width: 100%;
+}
+
+.listingContainer {
+  display: none;
+}
+
+.skeletonContainer {
+  display: none;
+  overflow: hidden;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-top: 20px;
+  gap: var(--Spacing-x2);
+  padding-top: var(--Spacing-x6);
+  height: 100%;
+}
+
+.skeletonItem {
+  width: 440px;
+}
+
+.mapContainer {
+  flex: 1;
+}
+
+@media (min-width: 768px) {
+  .container {
+    height: 100%;
+  }
+  .listingContainer {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x3) var(--Spacing-x4);
+    overflow-y: auto;
+    max-width: 505px;
+    position: relative;
+    height: 100%;
+    display: block;
+  }
+  .skeletonContainer {
+    display: flex;
+  }
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx
@@ -0,0 +1,28 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import { RoomCardSkeleton } from "../../SelectRate/RoomSelection/RoomCard/RoomCardSkeleton"
+
+import styles from "./SelectHotelMapContainerSkeleton.module.css"
+
+type Props = {
+  count?: number
+}
+
+export async function SelectHotelMapContainerSkeleton({ count = 2 }: Props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.listingContainer}>
+        <div className={styles.skeletonContainer}>
+          {Array.from({ length: count }).map((_, index) => (
+            <div key={index} className={styles.skeletonItem}>
+              <RoomCardSkeleton />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className={styles.mapContainer}>
+        <SkeletonShimmer width={"100%"} height="100%" />
+      </div>
+    </div>
+  )
+}
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -1,16 +1,19 @@
 "use client"
+
 import { APIProvider } from "@vis.gl/react-google-maps"
-import { useRouter, useSearchParams } from "next/navigation"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"

 import { selectHotel } from "@/constants/routes/hotelReservation"
+import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"

 import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"

 import FilterAndSortModal from "../FilterAndSortModal"
@@ -28,17 +31,13 @@ export default function SelectHotelMap({
  filterList,
  cityCoordinates,
 }: SelectHotelMapProps) {
-  const searchParams = useSearchParams()
-  const router = useRouter()
  const lang = useLang()
  const intl = useIntl()
  const isAboveMobile = useMediaQuery("(min-width: 768px)")
-  const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
  const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
  const listingContainerRef = useRef<HTMLDivElement | null>(null)
-
-  const selectHotelParams = new URLSearchParams(searchParams.toString())
-  const selectedHotel = selectHotelParams.get("selectedHotel")
+  const activeFilters = useHotelFilterStore((state) => state.activeFilters)
+  const { activeHotelCard, activeHotelPin } = useHotelsMapStore()

  const coordinates = isAboveMobile
    ? cityCoordinates
@@ -52,13 +51,7 @@ export default function SelectHotelMap({
        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
      }
    }
-  }, [activeHotelPin])
-
-  useEffect(() => {
-    if (selectedHotel) {
-      setActiveHotelPin(selectedHotel)
-    }
-  }, [selectedHotel])
+  }, [activeHotelCard, activeHotelPin])

  useEffect(() => {
    const hotelListingElement = document.querySelector(
@@ -82,9 +75,15 @@ export default function SelectHotelMap({
    hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
  }

-  function handlePageRedirect() {
-    router.push(`${selectHotel(lang)}?${searchParams.toString()}`)
-  }
+  const filteredHotelPins = useMemo(
+    () =>
+      hotelPins.filter((hotel) =>
+        activeFilters.every((filterId) =>
+          hotel.facilityIds.includes(Number(filterId))
+        )
+      ),
+    [activeFilters, hotelPins]
+  )

  const closeButton = (
    <Button
@@ -92,10 +91,12 @@ export default function SelectHotelMap({
      size="small"
      theme="base"
      className={styles.closeButton}
-      onClick={handlePageRedirect}
+      asChild
    >
-      <CloseIcon color="burgundy" />
-      {intl.formatMessage({ id: "Close the map" })}
+      <Link href={selectHotel(lang)} keepSearchParams>
+        <CloseIcon color="burgundy" />
+        {intl.formatMessage({ id: "Close the map" })}
+      </Link>
    </Button>
  )
  return (
@@ -108,26 +109,24 @@ export default function SelectHotelMap({
              size="small"
              variant="icon"
              wrapping
-              onClick={handlePageRedirect}
              className={styles.filterContainerCloseButton}
+              asChild
            >
-              <CloseLargeIcon />
+              <Link href={selectHotel(lang)} keepSearchParams>
+                <CloseLargeIcon />
+              </Link>
            </Button>
            <FilterAndSortModal filters={filterList} />
          </div>
-          <HotelListing
-            hotels={hotels}
-            activeHotelPin={activeHotelPin}
-            setActiveHotelPin={setActiveHotelPin}
-          />
-          {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
+          <HotelListing hotels={hotels} />
+          {showBackToTop && (
+            <BackToTopButton position="left" onClick={scrollToTop} />
+          )}
        </div>
        <InteractiveMap
          closeButton={closeButton}
          coordinates={coordinates}
-          hotelPins={hotelPins}
-          activeHotelPin={activeHotelPin}
-          onActiveHotelPinChange={setActiveHotelPin}
+          hotelPins={filteredHotelPins}
          mapId={mapId}
        />
      </div>
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css
@@ -14,10 +14,6 @@
  justify-content: space-between;
  align-items: center;
  position: relative;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10;
  background-color: var(--Base-Surface-Secondary-light-Normal);
  padding: 0 var(--Spacing-x2);
  height: 44px;
@@ -49,5 +45,6 @@
  .filterContainer {
    justify-content: flex-end;
    padding: 0 0 var(--Spacing-x1);
+    position: static;
  }
 }
--- a/components/MapContainer/index.tsx
+++ b/components/MapContainer/index.tsx
@@ -1,35 +1,58 @@
 "use client"

-import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
-import { Dialog, Modal } from "react-aria-components"

 import { debounce } from "@/utils/debounce"

 import styles from "./mapModal.module.css"

-export function MapModal({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
+export function MapContainer({ children }: { children: React.ReactNode }) {
  const [mapHeight, setMapHeight] = useState("0px")
  const [mapTop, setMapTop] = useState("0px")
-  const [isOpen, setIsOpen] = useState(true)
+  const [mapZIndex, setMapZIndex] = useState(0)
  const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)

  const rootDiv = useRef<HTMLDivElement | null>(null)

-  const handleOnOpenChange = (open: boolean) => {
-    setIsOpen(open)
-    if (!open) {
-      router.back()
-    }
-  }
-
  // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
  const handleMapHeight = useCallback(() => {
    const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
    const scrollY = window.scrollY
    setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
    setMapTop(`${topPosition + scrollY}px`)
+    setMapZIndex(11)
+  }, [])
+
+  useEffect(() => {
+    const originalOverflowY = document.body.style.overflowY
+
+    // Function to enforce overflowY to hidden
+    const enforceOverflowHidden = () => {
+      if (document.body.style.overflowY !== "hidden") {
+        document.body.style.overflowY = "hidden"
+      }
+    }
+
+    // Set overflowY to hidden initially
+    enforceOverflowHidden()
+
+    // Create a MutationObserver to watch for changes to the style attribute
+    const observer = new MutationObserver(() => {
+      enforceOverflowHidden()
+    })
+
+    // Observe changes to the style attribute of the body
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["style"],
+    })
+
+    return () => {
+      // Disconnect the observer on cleanup
+      observer.disconnect()
+      // Restore the original overflowY style
+      document.body.style.overflowY = originalOverflowY
+    }
  }, [])

  // Making sure the map is always opened at the top of the page,
@@ -66,19 +89,18 @@ export function MapModal({ children }: { children: React.ReactNode }) {

  return (
    <div className={styles.wrapper} ref={rootDiv}>
-      <Modal isOpen={isOpen} onOpenChange={handleOnOpenChange}>
-        <Dialog
-          style={
-            {
-              "--hotel-map-height": mapHeight,
-              "--hotel-map-top": mapTop,
-            } as React.CSSProperties
-          }
-          className={styles.dynamicMap}
-        >
-          {children}
-        </Dialog>
-      </Modal>
+      <div
+        style={
+          {
+            "--hotel-map-height": mapHeight,
+            "--hotel-map-top": mapTop,
+            "--hotel-dynamic-map-z-index": mapZIndex,
+          } as React.CSSProperties
+        }
+        className={styles.dynamicMap}
+      >
+        {children}
+      </div>
    </div>
  )
 }
--- a/components/MapContainer/mapModal.module.css
+++ b/components/MapContainer/mapModal.module.css
@@ -1,7 +1,8 @@
 .dynamicMap {
  --hotel-map-height: 100dvh;
-  --hotel-map-top: 0px;
-  position: absolute;
+  --hotel-map-top: 145px;
+  --hotel-dynamic-map-z-index: 2;
+  position: fixed;
  top: var(--hotel-map-top);
  left: 0;
  height: var(--hotel-map-height);
@@ -15,4 +16,6 @@
  position: absolute;
  top: 0;
  left: 0;
+  height: 100vh;
+  right: 0;
 }
--- a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
@@ -2,7 +2,9 @@ import {
  AdvancedMarker,
  AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { memo, useCallback, useState } from "react"
+import { useCallback, useState } from "react"
+
+import { useHotelsMapStore } from "@/stores/hotels-map"

 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -13,38 +15,39 @@ import styles from "./hotelListingMapContent.module.css"

 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"

-function HotelListingMapContent({
-  activeHotelPin,
-  hotelPins,
-  onActiveHotelPinChange,
-}: HotelListingMapContentProps) {
+function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
  const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
+  const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } =
+    useHotelsMapStore()

  const toggleActiveHotelPin = useCallback(
    (pinName: string | null) => {
-      if (onActiveHotelPinChange) {
+      if (setActiveHotelPin) {
        const newActivePin = activeHotelPin === pinName ? null : pinName
-        onActiveHotelPinChange(newActivePin)
+        setActiveHotelPin(newActivePin)
+        setActiveHotelCard(newActivePin)
        if (newActivePin === null) {
          setHoveredHotelPin(null)
+          setActiveHotelCard(null)
        }
      }
    },
-    [activeHotelPin, onActiveHotelPinChange]
+    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
  )

  const handleHover = useCallback(
    (pinName: string | null) => {
      if (pinName !== null && activeHotelPin !== pinName) {
        setHoveredHotelPin(pinName)
-        if (activeHotelPin && onActiveHotelPinChange) {
-          onActiveHotelPinChange(null)
+        if (activeHotelPin && setActiveHotelPin) {
+          setActiveHotelPin(null)
+          setActiveHotelCard(null)
        }
      } else if (pinName === null) {
        setHoveredHotelPin(null)
      }
    },
-    [activeHotelPin, onActiveHotelPinChange]
+    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
  )

  return (
@@ -84,6 +87,7 @@ function HotelListingMapContent({
                  color={isActiveOrHovered ? "burgundy" : "white"}
                />
              </span>
+
              <Body
                asChild
                color={isActiveOrHovered ? "white" : "baseTextHighContrast"}
@@ -100,4 +104,4 @@ function HotelListingMapContent({
  )
 }

-export default memo(HotelListingMapContent)
+export default HotelListingMapContent
--- a/components/Maps/InteractiveMap/index.tsx
+++ b/components/Maps/InteractiveMap/index.tsx
@@ -17,11 +17,9 @@ export default function InteractiveMap({
  pointsOfInterest,
  activePoi,
  hotelPins,
-  activeHotelPin,
  mapId,
  closeButton,
  onActivePoiChange,
-  onActiveHotelPinChange,
 }: InteractiveMapProps) {
  const intl = useIntl()
  const map = useMap()
@@ -50,13 +48,7 @@ export default function InteractiveMap({
  return (
    <div className={styles.mapContainer}>
      <Map {...mapOptions}>
-        {hotelPins && (
-          <HotelListingMapContent
-            activeHotelPin={activeHotelPin}
-            hotelPins={hotelPins}
-            onActiveHotelPinChange={onActiveHotelPinChange}
-          />
-        )}
+        {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
        {pointsOfInterest && (
          <HotelMapContent
            coordinates={coordinates}
--- a/components/SitewideAlert/sitewideAlert.module.css
+++ b/components/SitewideAlert/sitewideAlert.module.css
@@ -1,5 +1,7 @@
 .sitewideAlert {
  width: 100%;
+  z-index: var(--header-z-index);
+  position: relative;
 }

 .alarm {
--- a/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
+++ b/components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
@@ -5,7 +5,6 @@
  align-items: flex-end;
  position: fixed;
  bottom: 20px;
-  right: 20px;
  z-index: 1000;
  background-color: var(--Base-Surface-Primary-light-Normal);
  color: var(--Base-Button-Secondary-On-Fill-Normal);
@@ -28,6 +27,14 @@
  display: none;
 }

+.left {
+  left: 32px;
+}
+
+.right {
+  right: 32px;
+}
+
@media (min-width: 768px) {
  .backToTopButtonText {
    display: initial;
--- a/components/TempDesignSystem/BackToTopButton/index.tsx
+++ b/components/TempDesignSystem/BackToTopButton/index.tsx
@@ -5,12 +5,23 @@ import { useIntl } from "react-intl"

 import { ArrowUpIcon } from "@/components/Icons"

+import { backToTopButtonVariants } from "./variants"
+
 import styles from "./backToTopButton.module.css"

-export function BackToTopButton({ onClick }: { onClick: () => void }) {
+export function BackToTopButton({
+  onClick,
+  position,
+}: {
+  onClick: () => void
+  position: "left" | "right"
+}) {
  const intl = useIntl()
  return (
-    <ButtonRAC className={styles.backToTopButton} onPress={onClick}>
+    <ButtonRAC
+      className={backToTopButtonVariants({ position })}
+      onPress={onClick}
+    >
      <ArrowUpIcon color="burgundy" />
      <span className={styles.backToTopButtonText}>
        {intl.formatMessage({ id: "Back to top" })}
--- a/components/TempDesignSystem/BackToTopButton/variants.ts
+++ b/components/TempDesignSystem/BackToTopButton/variants.ts
@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./backToTopButton.module.css"
+
+export const backToTopButtonVariants = cva(styles.backToTopButton, {
+  variants: {
+    position: {
+      left: styles.left,
+      right: styles.right,
+    },
+  },
+  defaultVariants: {
+    position: "right",
+  },
+})
--- a/stores/hotels-map.ts
+++ b/stores/hotels-map.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand"
+
+interface HotelsMapState {
+  activeHotelCard: string | null
+  activeHotelPin: string | null
+  setActiveHotelCard: (hotelCard: string | null) => void
+  setActiveHotelPin: (hotelPin: string | null) => void
+}
+
+export const useHotelsMapStore = create<HotelsMapState>((set) => ({
+  activeHotelCard: null,
+  activeHotelPin: null,
+  setActiveHotelCard: (hotelCard) => set({ activeHotelCard: hotelCard }),
+  setActiveHotelPin: (hotelPin) => set({ activeHotelPin: hotelPin }),
+}))
--- a/types/components/hotelPage/map/interactiveMap.ts
+++ b/types/components/hotelPage/map/interactiveMap.ts
@@ -11,9 +11,7 @@ export interface InteractiveMapProps {
  pointsOfInterest?: PointOfInterest[]
  activePoi?: PointOfInterest["name"] | null
  hotelPins?: HotelPin[]
-  activeHotelPin?: HotelPin["name"] | null
  mapId: string
  closeButton: ReactElement
  onActivePoiChange?: (poi: PointOfInterest["name"] | null) => void
-  onActiveHotelPinChange?: (hotelPin: HotelPin["name"] | null) => void
 }
--- a/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts
@@ -10,8 +10,6 @@ export enum HotelCardListingTypeEnum {
 export type HotelCardListingProps = {
  hotelData: HotelData[]
  type?: HotelCardListingTypeEnum
-  activeCard?: string | null
-  onHotelCardHover?: (hotelName: string | null) => void
 }

 export type HotelData = {
--- a/types/components/hotelReservation/selectHotel/hotelCardProps.ts
+++ b/types/components/hotelReservation/selectHotel/hotelCardProps.ts
@@ -7,5 +7,4 @@ export type HotelCardProps = {
  hotel: HotelData
  type?: HotelCardListingTypeEnum
  state?: "default" | "active"
-  onHotelCardHover?: (hotelName: string | null) => void
 }
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -7,13 +7,13 @@ import {

 import { HotelData } from "./hotelCardListingProps"
 import { CategorizedFilters, Filter } from "./hotelFilters"
+import { SelectHotelSearchParams } from "./selectHotelSearchParams"

 import type { Coordinates } from "@/types/components/maps/coordinates"
+import type { Location } from "@/types/trpc/routers/hotel/locations"

 export interface HotelListingProps {
  hotels: HotelData[]
-  activeHotelPin?: string | null
-  setActiveHotelPin: (hotelName: string | null) => void
 }

 export interface SelectHotelMapProps {
@@ -41,12 +41,11 @@ export type HotelPin = {
  amenities: Filter[]
  ratings: number | null
  operaId: string
+  facilityIds: number[]
 }

 export interface HotelListingMapContentProps {
-  activeHotelPin?: HotelPin["name"] | null
  hotelPins: HotelPin[]
-  onActiveHotelPinChange?: (pinName: string | null) => void
 }

 export interface HotelCardDialogProps {
@@ -57,6 +56,11 @@ export interface HotelCardDialogProps {

 export interface HotelCardDialogListingProps {
  hotels: HotelData[] | null
-  activeCard: string | null | undefined
-  onActiveCardChange: (hotelName: string | null) => void
+}
+
+export type SelectHotelMapContainerProps = {
+  city: Location
+  searchParams: SelectHotelSearchParams
+  adultsInRoom: number
+  childrenInRoom: string | undefined
 }