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/components/HotelReservation/HotelCard/index.tsx

@@ -2,7 +2,7 @@
 
 import { useParams } from "next/dist/client/components/navigation"
 import { useRouter, useSearchParams } from "next/navigation"
-import { memo, useCallback } from "react"
+import { memo } from "react"
 import { useIntl } from "react-intl"
 
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
@@ -53,16 +53,7 @@ function HotelCard({
 
   const lang = params.lang as Lang
   const intl = useIntl()
-  const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()
-
-  const handleMouseEnter = useCallback(() => {
-    setActiveHotelPin(hotel.name)
-  }, [setActiveHotelPin, hotel])
-
-  const handleMouseLeave = useCallback(() => {
-    setActiveHotelPin(null)
-    setActiveHotelCard(null)
-  }, [setActiveHotelPin, setActiveHotelCard])
+  const { activate, engage, disengageAfterDelay } = useHotelsMapStore()
 
   const amenities = hotel.detailedFacilities.slice(0, 5)
   const router = useRouter()
@@ -73,8 +64,7 @@ function HotelCard({
 
   const handleAddressClick = (event: React.MouseEvent) => {
     event.preventDefault()
-    setActiveHotelPin(hotel.name)
-    setActiveHotelCard(hotel.name)
+    activate(hotel.name)
     router.push(`${selectHotelMap(lang)}?${searchParams.toString()}`)
   }
 
@@ -95,8 +85,8 @@ function HotelCard({
   return (
     <article
       className={classNames}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      onMouseEnter={() => engage(hotel.name)}
+      onMouseLeave={() => disengageAfterDelay()}
     >
       <div>
         <div className={styles.imageContainer}>