From 9a398feb52c5340be67a449b93ad7d2cf602d909 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Mon, 21 Oct 2024 14:43:37 +0200
Subject: [PATCH] feat(SW-552): add fitbounds

---
 .../Map/DynamicMap/Sidebar/index.tsx          | 26 +++++++++++++------
 .../HotelPage/Map/DynamicMap/index.tsx        |  1 +
 types/components/hotelPage/map/sidebar.ts     |  2 ++
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index b48da7863..3beb1413a 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
@@ -12,12 +12,14 @@ import Title from "@/components/TempDesignSystem/Text/Title"
 import styles from "./sidebar.module.css"
 
 import type { SidebarProps } from "@/types/components/hotelPage/map/sidebar"
+import { Coordinates } from "@/types/components/maps/coordinates"
 
 export default function Sidebar({
   activePoi,
   hotelName,
   pointsOfInterest,
   onActivePoiChange,
+  coordinates,
 }: SidebarProps) {
   const intl = useIntl()
   const map = useMap()
@@ -32,14 +34,22 @@ export default function Sidebar({
     setIsFullScreenSidebar((prev) => !prev)
   }
 
-  const handlePoiClick = useCallback(
-    (poiName: string, coordinates: { lat: number; lng: number }) => {
-      onActivePoiChange(activePoi === poiName ? null : poiName)
-      map?.panTo(coordinates)
-      toggleFullScreenSidebar()
-    },
-    [activePoi, onActivePoiChange, map]
-  )
+  function moveToPoi(poiCoordinates: Coordinates) {
+    if (map) {
+      const bounds = new google.maps.LatLngBounds()
+      bounds.extend(new google.maps.LatLng(coordinates.lat, coordinates.lng))
+      bounds.extend(
+        new google.maps.LatLng(poiCoordinates.lat, poiCoordinates.lng)
+      )
+      map.fitBounds(bounds)
+    }
+  }
+
+  function handlePoiClick(poiName: string, coordinates: Coordinates) {
+    onActivePoiChange(activePoi === poiName ? null : poiName)
+    moveToPoi(coordinates)
+    toggleFullScreenSidebar()
+  }
 
   return (
     <aside
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
index 2af575a69..f539d7614 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+++ b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
@@ -83,6 +83,7 @@ export default function DynamicMap({
             hotelName={hotelName}
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={setActivePoi}
+            coordinates={coordinates}
           />
           <InteractiveMap
             closeButton={closeButton}
diff --git a/types/components/hotelPage/map/sidebar.ts b/types/components/hotelPage/map/sidebar.ts
index 6bde9f7dc..5fd700d4a 100644
--- a/types/components/hotelPage/map/sidebar.ts
+++ b/types/components/hotelPage/map/sidebar.ts
@@ -1,8 +1,10 @@
 import type { PointOfInterest } from "@/types/hotel"
+import type { Coordinates } from "../../maps/coordinates"
 
 export interface SidebarProps {
   hotelName: string
   pointsOfInterest: PointOfInterest[]
   activePoi: PointOfInterest["name"] | null
   onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
+  coordinates: Coordinates
 }