feat(sw-343): fixed map page (without modal)

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -11,6 +11,7 @@ import { setLang } from "@/i18n/serverContext"
 import {
   fetchAvailableHotels,
   generateChildrenString,
+  getCentralCoordinates,
   getPointOfInterests,
 } from "../../utils"
 
@@ -54,17 +55,7 @@ export default async function SelectHotelMapPage({
 
   const pointOfInterests = getPointOfInterests(hotels)
 
-  const centralCoordinates = pointOfInterests.reduce(
+  const centralCoordinates = getCentralCoordinates(pointOfInterests)
-    (acc, poi) => {
-      acc.lat += poi.coordinates.lat
-      acc.lng += poi.coordinates.lng
-      return acc
-    },
-    { lat: 0, lng: 0 }
-  )
-
-  centralCoordinates.lat /= pointOfInterests.length
-  centralCoordinates.lng /= pointOfInterests.length
 
   return (
     <MapModal>
@@ -73,6 +64,7 @@ export default async function SelectHotelMapPage({
         coordinates={centralCoordinates}
         pointsOfInterest={pointOfInterests}
         mapId={googleMapId}
+        isModal={true}
       />
     </MapModal>
   )

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx

@@ -6,6 +6,7 @@ import { getLocations } from "@/lib/trpc/memoizedRequests"
 import {
   fetchAvailableHotels,
   generateChildrenString,
+  getCentralCoordinates,
   getFiltersFromHotels,
   getPointOfInterests,
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
@@ -55,15 +56,16 @@ export default async function SelectHotelMapPage({
   const filters = getFiltersFromHotels(hotels)
 
   const pointOfInterests = getPointOfInterests(hotels)
+  const centralCoordinates = getCentralCoordinates(pointOfInterests)
 
   return (
     <main className={styles.main}>
       <SelectHotelMap
         apiKey={googleMapsApiKey}
-        // TODO: use correct coordinates. The city center?
+        coordinates={centralCoordinates}
-        coordinates={{ lat: 59.32, lng: 18.01 }}
         pointsOfInterest={pointOfInterests}
         mapId={googleMapId}
+        isModal={false}
       />
     </main>
   )

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -78,3 +78,19 @@ export function getPointOfInterests(hotels: HotelData[]): PointOfInterest[] {
     group: PointOfInterestGroupEnum.LOCATION,
   }))
 }
+
+export function getCentralCoordinates(pointOfInterests: PointOfInterest[]) {
+  const centralCoordinates = pointOfInterests.reduce(
+    (acc, poi) => {
+      acc.lat += poi.coordinates.lat
+      acc.lng += poi.coordinates.lng
+      return acc
+    },
+    { lat: 0, lng: 0 }
+  )
+
+  centralCoordinates.lat /= pointOfInterests.length
+  centralCoordinates.lng /= pointOfInterests.length
+
+  return centralCoordinates
+}

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -9,7 +9,6 @@ import { selectHotel } from "@/constants/routes/hotelReservation"
 import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"
 
 import HotelListing from "./HotelListing"
@@ -23,23 +22,30 @@ export default function SelectHotelMap({
   coordinates,
   pointsOfInterest,
   mapId,
+  isModal,
 }: SelectHotelMapProps) {
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
   const [activePoi, setActivePoi] = useState<string | null>(null)
 
-  function onDismiss() {
+  function handleModalDismiss() {
     router.back()
   }
 
+  function handlePageRedirect() {
+    router.push(
+      `${selectHotel[lang]}?${new URLSearchParams(window.location.search)}`
+    )
+  }
+
   const closeButton = (
     <Button
       intent="inverted"
       size="small"
       theme="base"
       className={styles.closeButton}
-      onClick={onDismiss}
+      onClick={isModal ? handleModalDismiss : handlePageRedirect}
     >
       <CloseIcon color="burgundy" />
       {intl.formatMessage({ id: "Close the map" })}
@@ -47,28 +53,30 @@ export default function SelectHotelMap({
   )
   return (
     <APIProvider apiKey={apiKey}>
-      <div className={styles.filterContainer}>
+      <div className={styles.container}>
-        <Button
+        <div className={styles.filterContainer}>
-          intent="text"
+          <Button
-          size="small"
+            intent="text"
-          variant="icon"
+            size="small"
-          wrapping
+            variant="icon"
-          onClick={onDismiss}
+            wrapping
-        >
+            onClick={isModal ? handleModalDismiss : handlePageRedirect}
-          <CloseLargeIcon />
+          >
-        </Button>
+            <CloseLargeIcon />
-        <span>Filter and sort</span>
+          </Button>
-        {/* TODO: Add filter and sort button */}
+          <span>Filter and sort</span>
+          {/* TODO: Add filter and sort button */}
+        </div>
+        <HotelListing />
+        <InteractiveMap
+          closeButton={closeButton}
+          coordinates={coordinates}
+          pointsOfInterest={pointsOfInterest}
+          activePoi={activePoi}
+          onActivePoiChange={setActivePoi}
+          mapId={mapId}
+        />
       </div>
-      <HotelListing />
-      <InteractiveMap
-        closeButton={closeButton}
-        coordinates={coordinates}
-        pointsOfInterest={pointsOfInterest}
-        activePoi={activePoi}
-        onActivePoiChange={setActivePoi}
-        mapId={mapId}
-      />
     </APIProvider>
   )
 }

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

@@ -5,6 +5,10 @@
   display: none !important;
 }
 
+.container {
+  height: 100%;
+}
+
 .filterContainer {
   display: flex;
   justify-content: space-between;
@@ -16,6 +20,7 @@
   z-index: 10;
   background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: 0 var(--Spacing-x2);
+  height: 44px;
 }
 
 .filterContainer .closeButton {

types/components/hotelReservation/selectHotel/map.ts

@@ -12,4 +12,5 @@ export interface SelectHotelMapProps {
   coordinates: Coordinates
   pointsOfInterest: PointOfInterest[]
   mapId: string
+  isModal: boolean
 }