feat(SW-344): Hotel list in mobile

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import HotelCardDialog from "../HotelCardDialog"
+import { getHotelPins } from "./utils"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+
+export default function HotelCardDialogListing({
+  hotels,
+  activeCard,
+}: {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+}) {
+  const hotelsPinData = getHotelPins(hotels)
+  const activeCardRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (activeCardRef.current) {
+      activeCardRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      })
+    }
+  }, [activeCard])
+
+  return (
+    <>
+      {hotelsPinData?.length &&
+        hotelsPinData.map((data) => {
+          const isActive = data.name === activeCard
+          return (
+            <div key={data.name} ref={isActive ? activeCardRef : null}>
+              <HotelCardDialog
+                data={data}
+                isOpen={!!activeCard}
+                handleClose={() => {}}
+              />
+            </div>
+          )
+        })}
+    </>
+  )
+}

components/HotelReservation/HotelCardDialogListing/utils.ts

@@ -0,0 +1,21 @@
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+
+export function getHotelPins(hotels: HotelData[]): HotelPin[] {
+  return hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    publicPrice: hotel.price?.regularAmount ?? null,
+    memberPrice: hotel.price?.memberAmount ?? null,
+    currency: hotel.price?.currency || null,
+    images: [
+      hotel.hotelData.hotelContent.images,
+      ...(hotel.hotelData.gallery?.heroImages ?? []),
+    ],
+    amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
+    ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
+  }))
+}