feat(SW-1111) Added Suspense on map

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -0,0 +1,77 @@
+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 { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
+
+function isHotelData(hotel: NullableHotelData): hotel is HotelData {
+  return hotel !== null && hotel !== undefined
+}
+
+type Props = {
+  city: Location
+  searchParams: SelectHotelSearchParams
+  adultsInRoom: number
+  childrenInRoom: string | undefined
+}
+
+export async function SelectHotelMapContainer({
+  city,
+  searchParams,
+  adultsInRoom,
+  childrenInRoom,
+}: Props) {
+  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, hotelsError] = await fetchAvailableHotelsPromise
+
+  if (hotelsError) {
+    // TODO: show proper error component
+    console.error("[SelectHotelMapContainer] unable to fetch hotels")
+    return null
+  }
+
+  const validHotels = hotels?.filter(isHotelData) || []
+
+  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}
+    />
+  )
+}

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

@@ -0,0 +1,34 @@
+.container {
+  max-width: var(--max-width);
+  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%;
+}
+
+.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;
+}
+
+@media (min-width: 768px) {
+  .skeletonContainer {
+    display: flex;
+  }
+}

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx

@@ -0,0 +1,23 @@
+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>
+  )
+}

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { APIProvider } from "@vis.gl/react-google-maps"
 import { useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useRef, useState } from "react"
@@ -95,6 +96,8 @@ export default function SelectHotelMap({
     [activeFilters, hotelPins]
   )
 
+  console.log("hotelPins", hotelPins)
+
   const closeButton = (
     <Button
       intent="inverted"

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -26,6 +26,7 @@ export default function Rooms({
   user,
   availablePackages,
 }: SelectRateProps) {
+  console.log("ROOMS PAGE")
   const visibleRooms: RoomConfiguration[] =
     filterDuplicateRoomTypesByLowestPrice(roomsAvailability.roomConfigurations)
   const [selectedRate, setSelectedRate] = useState<RateCode | undefined>(

components/MapContainer/index.tsx

@@ -21,6 +21,38 @@ export function MapContainer({ children }: { children: React.ReactNode }) {
     setMapTop(`${topPosition + scrollY}px`)
   }, [])
 
+  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,
   // just below the header and booking widget as these should stay visible.
   // When closing, the page should scroll back to the position it was before opening the map.