feat(SW-340): Hover actions

components/HotelReservation/HotelCard/index.tsx

@@ -24,6 +24,7 @@ export default function HotelCard({
   hotel,
   type = HotelCardListingTypeEnum.PageListing,
   state = "default",
+  onHotelCardHover,
 }: HotelCardProps) {
   const intl = useIntl()
 
@@ -37,8 +38,25 @@ export default function HotelCard({
     state,
   })
 
+  const handleMouseEnter = () => {
+    console.log("handleMouseEnter", hotelData.name)
+    if (onHotelCardHover) {
+      console.log("onHotelCardHover", hotelData.name)
+      onHotelCardHover(hotelData.name)
+    }
+  }
+  const handleMouseLeave = () => {
+    if (onHotelCardHover) {
+      onHotelCardHover(null)
+    }
+  }
+
   return (
-    <article className={classNames}>
+    <article
+      className={classNames}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
       <section className={styles.imageContainer}>
         {hotelData.gallery && (
           <ImageGallery

components/HotelReservation/HotelCardListing/index.tsx

@@ -16,7 +16,8 @@ import {
 export default function HotelCardListing({
   hotelData,
   type = HotelCardListingTypeEnum.PageListing,
-  state = "default",
+  activeCard,
+  onHotelCardHover,
 }: HotelCardListingProps) {
   const searchParams = useSearchParams()
 
@@ -41,7 +42,8 @@ export default function HotelCardListing({
             key={hotel.hotelData.name}
             hotel={hotel}
             type={type}
-            state={state}
+            state={hotel.hotelData.name === activeCard ? "active" : "default"}
+            onHotelCardHover={onHotelCardHover}
           />
         ))
       ) : (

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -9,14 +9,16 @@ import type { HotelListingProps } from "@/types/components/hotelReservation/sele
 
 export default function HotelListing({
   hotels,
-  cardState = "default",
+  activeHotelPin,
+  onHotelCardHover,
 }: HotelListingProps) {
   return (
     <div className={styles.hotelListing}>
       <HotelCardListing
         hotelData={hotels}
         type={HotelCardListingTypeEnum.MapListing}
-        state={cardState}
+        activeCard={activeHotelPin}
+        onHotelCardHover={onHotelCardHover}
       />
     </div>
   )

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -94,7 +94,8 @@ export default function SelectHotelMap({
           </div>
           <HotelListing
             hotels={hotels}
-            cardState={activeHotelPin ? "active" : "default"}
+            activeHotelPin={activeHotelPin}
+            onHotelCardHover={setActiveHotelPin}
           />
           {showBackToTop && (
             <Button

types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -10,7 +10,8 @@ export enum HotelCardListingTypeEnum {
 export type HotelCardListingProps = {
   hotelData: HotelData[]
   type?: HotelCardListingTypeEnum
-  state?: "default" | "active"
+  activeCard?: string | null
+  onHotelCardHover?: (hotelName: string | null) => void
 }
 
 export type HotelData = {

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -7,4 +7,5 @@ export type HotelCardProps = {
   hotel: HotelData
   type?: HotelCardListingTypeEnum
   state?: "default" | "active"
+  onHotelCardHover?: (hotelName: string | null) => void
 }

types/components/hotelReservation/selectHotel/map.ts

@@ -12,10 +12,8 @@ import type { Coordinates } from "@/types/components/maps/coordinates"
 
 export interface HotelListingProps {
   hotels: HotelData[]
-  cardState?: "default" | "active"
+  activeHotelPin?: string | null
-  // pointsOfInterest: PointOfInterest[]
+  onHotelCardHover?: (hotelName: string | null) => void
-  // activePoi: PointOfInterest["name"] | null
-  // onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
 }
 
 export interface SelectHotelMapProps {