Merged in feat/SW-1457-city-dynamic-map (pull request #1320)

feat(SW-1457): Added map and fetching hotels by cityIdentifier

* feat(SW-1457): Added map and fetching hotels by cityIdentifier


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx

@@ -0,0 +1,33 @@
+import { env } from "@/env/server"
+import { getHotelsByCityIdentifier } from "@/lib/trpc/memoizedRequests"
+
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import Map from "../../Map"
+
+import type { CityLocation } from "@/types/trpc/routers/hotel/locations"
+
+interface CityMapProps {
+  city: CityLocation
+  cityIdentifier: string
+}
+export function preloadHotels(cityIdentifier: string) {
+  void getHotelsByCityIdentifier(cityIdentifier)
+}
+export default async function CityMap({ city, cityIdentifier }: CityMapProps) {
+  const hotels = await getHotelsByCityIdentifier(cityIdentifier)
+
+  return (
+    <Map
+      hotels={hotels}
+      mapId={env.GOOGLE_DYNAMIC_MAP_ID}
+      apiKey={env.GOOGLE_STATIC_MAP_KEY}
+    >
+      <div>
+        <Title level="h2" as="h3">
+          {city.name}
+        </Title>
+      </div>
+    </Map>
+  )
+}

components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -16,6 +16,7 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
 import StaticMap from "../StaticMap"
 import TopImages from "../TopImages"
+import CityMap, { preloadHotels } from "./CityMap"
 
 import styles from "./destinationCityPage.module.css"
 
@@ -28,7 +29,7 @@ export default async function DestinationCityPage() {
     return null
   }
 
-  const { tracking, destinationCityPage, cityIdentifier } = pageData
+  const { tracking, destinationCityPage, cityIdentifier, city } = pageData
   const {
     blocks,
     images,
@@ -41,6 +42,8 @@ export default async function DestinationCityPage() {
     destination_settings,
   } = destinationCityPage
 
+  preloadHotels(cityIdentifier)
+
   return (
     <>
       <div className={styles.pageContainer}>
@@ -48,11 +51,7 @@ export default async function DestinationCityPage() {
           <Suspense fallback={<BreadcrumbsSkeleton />}>
             <Breadcrumbs variant={PageContentTypeEnum.destinationCityPage} />
           </Suspense>
-          {/* TODO: fetch translated city name from API when fetching hotel listing */}
-          <TopImages
-            images={images}
-            destinationName={destination_settings.city}
-          />
+          <TopImages images={images} destinationName={city.name} />
         </header>
         <main className={styles.mainContent}>
           <Suspense fallback={<HotelListingSkeleton />}>
@@ -78,6 +77,7 @@ export default async function DestinationCityPage() {
           </SidebarContentWrapper>
         </aside>
       </div>
+      <CityMap city={city} cityIdentifier={cityIdentifier} />
       <Suspense fallback={null}>
         <TrackingSDK pageData={tracking} />
       </Suspense>

components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/map.module.css

@@ -1,23 +0,0 @@
-.countryMap {
-  --destination-map-height: 100dvh;
-
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: var(--destination-map-height);
-  width: 100dvw;
-  z-index: var(--hotel-dynamic-map-z-index);
-  display: flex;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-.wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.closeButton {
-  pointer-events: initial;
-  box-shadow: var(--button-box-shadow);
-  gap: var(--Spacing-x-half);
-}

components/ContentType/DestinationPage/HotelListing/index.tsx

@@ -1,4 +1,4 @@
-import { getHotelListDataByCityIdentifier } from "@/lib/trpc/memoizedRequests"
+import { getHotelsByCityIdentifier } from "@/lib/trpc/memoizedRequests"
 
 import HotelListingClient from "./Client"
 
@@ -9,7 +9,7 @@ interface HotelListingProps {
 export default async function HotelListing({
   cityIdentifier,
 }: HotelListingProps) {
-  const hotels = await getHotelListDataByCityIdentifier(cityIdentifier)
+  const hotels = await getHotelsByCityIdentifier(cityIdentifier)
 
   if (!hotels.length) {
     return null

components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -49,14 +49,12 @@ export default function DynamicMap({
 
   function zoomIn() {
     const currentZoom = map && map.getZoom()
-    console.log(currentZoom)
     if (currentZoom) {
       map.setZoom(currentZoom + 1)
     }
   }
   function zoomOut() {
     const currentZoom = map && map.getZoom()
-    console.log(currentZoom)
     if (currentZoom) {
       map.setZoom(currentZoom - 1)
     }
@@ -65,6 +63,7 @@ export default function DynamicMap({
   const mapOptions: MapProps = {
     defaultCenter: markers[0].coordinates, // Default center will be overridden by the bounds
     minZoom: 3,
+    maxZoom: 18,
     defaultZoom: 8,
     disableDefaultUI: true,
     clickableIcons: false,