Merged in feat/SW-1549-map-improvements (pull request #1783)

Feat/SW-1549 map improvements

* fix: imported new icon

* refactor: rename component and set map handling to 'greedy'

* fix: show cards for 3s after hover

* refactor: update styles and added HotelPin component

* fix: change from close to back icon

* refactor: update to only use 1 state value for active pin and card

* fix: add click handler when dialog is opened

* fix: performance fixes for the dialog carousel

* fix: added border

* fix: clear timeout on mouseenter

* fix: changed to absolute import

* fix: moved hover state into the store

* fix: renamed store actions


Approved-by: Michael Zetterberg

apps/scandic-web/stores/hotels-map.ts

@@ -1,15 +1,43 @@
 import { create } from "zustand"
 
 interface HotelsMapState {
-  activeHotelCard: string | null
-  activeHotelPin: string | null
-  setActiveHotelCard: (hotelCard: string | null) => void
-  setActiveHotelPin: (hotelPin: string | null) => void
+  activeHotel: string | null
+  hoveredHotel: string | null
+  hoverTimeout: number | null
+  activate: (hotel: string | null) => void
+  deactivate: () => void
+  engage: (hotel: string | null) => void
+  disengage: () => void
+  disengageAfterDelay: () => void
 }
 
-export const useHotelsMapStore = create<HotelsMapState>((set) => ({
-  activeHotelCard: null,
-  activeHotelPin: null,
-  setActiveHotelCard: (hotelCard) => set({ activeHotelCard: hotelCard }),
-  setActiveHotelPin: (hotelPin) => set({ activeHotelPin: hotelPin }),
+export const useHotelsMapStore = create<HotelsMapState>((set, get) => ({
+  activeHotel: null,
+  hoveredHotel: null,
+  hoverTimeout: null,
+  activate: (hotel) => set({ activeHotel: hotel }),
+  deactivate: () => set({ activeHotel: null }),
+  engage: (hotel) => {
+    const state = get()
+
+    if (state.hoverTimeout) {
+      window.clearTimeout(state.hoverTimeout)
+    }
+
+    if (hotel && state.activeHotel) {
+      set({ activeHotel: null })
+    }
+
+    set({ hoveredHotel: hotel })
+  },
+  disengage: () => {
+    set({ hoveredHotel: null })
+  },
+  disengageAfterDelay: () => {
+    const timeoutId = window.setTimeout(() => {
+      set({ hoveredHotel: null, activeHotel: null, hoverTimeout: null })
+    }, 3000)
+
+    set({ hoverTimeout: timeoutId })
+  },
 }))