From d4fe8baa49a6856de996ef1fba7a3b1f9c30d56e Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Tue, 18 Mar 2025 09:44:17 +0000
Subject: [PATCH] Merged in
 feat/SW-1899-destination-city-mobile-map-active-pins (pull request #1557)

feat(SW-1899): active hotel pin on carousel scroll

* feat(SW-1899): active hotel pin on carousel scroll


Approved-by: Erik Tiekstra
---
 apps/scandic-web/components/Carousel/index.tsx      | 13 +++++++++----
 apps/scandic-web/components/Carousel/types.ts       |  2 +-
 .../DestinationPage/HotelCardCarousel/index.tsx     | 13 ++++++++++++-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/scandic-web/components/Carousel/index.tsx b/apps/scandic-web/components/Carousel/index.tsx
index 0b0df6417..e59bc26ef 100644
--- a/apps/scandic-web/components/Carousel/index.tsx
+++ b/apps/scandic-web/components/Carousel/index.tsx
@@ -22,6 +22,7 @@ function Carousel({
   children,
   scrollToIdx = 0,
   align = "start",
+  onScrollSelect,
 }: CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
@@ -34,10 +35,14 @@ function Carousel({
   )
   const [selectedIndex, setSelectedIndex] = useState(scrollToIdx)
 
-  const onSelect = useCallback((api: CarouselApi) => {
-    if (!api) return
-    setSelectedIndex(api.selectedScrollSnap())
-  }, [])
+  const onSelect = useCallback(
+    (api: CarouselApi) => {
+      if (!api) return
+      setSelectedIndex(api.selectedScrollSnap())
+      onScrollSelect?.(api.selectedScrollSnap())
+    },
+    [onScrollSelect]
+  )
 
   function scrollPrev() {
     api?.scrollPrev()
diff --git a/apps/scandic-web/components/Carousel/types.ts b/apps/scandic-web/components/Carousel/types.ts
index c904c2d19..dc47249dc 100644
--- a/apps/scandic-web/components/Carousel/types.ts
+++ b/apps/scandic-web/components/Carousel/types.ts
@@ -16,7 +16,7 @@ export interface CarouselProps extends PropsWithChildren {
   plugins?: CarouselPlugin
   setApi?: (api: CarouselApi) => void
   className?: string
-  handleScrollSelected?: (idx: number) => void
+  onScrollSelect?: (idx: number) => void
   scrollToIdx?: number
   align?: "start" | "center"
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
index f3a06f58d..3ed9ee42e 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { cx } from "class-variance-authority"
+import { useCallback } from "react"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
@@ -18,18 +19,28 @@ interface MapCardCarouselProps {
 export default function HotelCardCarousel({
   visibleHotels,
 }: MapCardCarouselProps) {
-  const { activeHotel } = useDestinationPageHotelsMapStore()
+  const { activeHotel, setActiveHotel } = useDestinationPageHotelsMapStore()
 
   const selectedHotelIdx = visibleHotels.findIndex(
     ({ hotel }) => hotel.operaId === activeHotel
   )
 
+  const handleScrollSelect = useCallback(
+    (idx: number) => {
+      if (selectedHotelIdx !== -1) {
+        setActiveHotel(visibleHotels[idx]?.hotel.operaId)
+      }
+    },
+    [setActiveHotel, visibleHotels, selectedHotelIdx]
+  )
+
   return (
     <Carousel
       className={styles.carousel}
       scrollToIdx={selectedHotelIdx}
       align="center"
       opts={{ containScroll: false }}
+      onScrollSelect={handleScrollSelect}
     >
       <Carousel.Content className={styles.carouselContent}>
         {visibleHotels.map(({ hotel, url }) => (