chore: cleaning up select-rate

components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx

@@ -0,0 +1,69 @@
+"use client"
+import { useEffect } from "react"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import RoomProvider from "@/providers/RoomProvider"
+import { trackLowestRoomPrice } from "@/utils/tracking"
+
+import MultiRoomWrapper from "./MultiRoomWrapper"
+import RoomSelectionPanel from "./RoomSelectionPanel"
+
+import styles from "./rooms.module.css"
+
+export default function Rooms() {
+  const {
+    arrivalDate,
+    bookingRooms,
+    departureDate,
+    hotelId,
+    rooms,
+    visibleRooms,
+  } = useRatesStore((state) => ({
+    arrivalDate: state.booking.fromDate,
+    bookingRooms: state.booking.rooms,
+    departureDate: state.booking.toDate,
+    hotelId: state.booking.hotelId,
+    rooms: state.rooms,
+    visibleRooms: state.allRooms,
+  }))
+
+  useEffect(() => {
+    const pricesWithCurrencies = visibleRooms.flatMap((room) =>
+      room.products.map((product) => ({
+        price: product.productType.public.localPrice.pricePerNight,
+        currency: product.productType.public.localPrice.currency,
+      }))
+    )
+    const lowestPrice = pricesWithCurrencies.reduce(
+      (minPrice, { price }) => Math.min(minPrice, price),
+      Infinity
+    )
+
+    const currency = pricesWithCurrencies[0]?.currency
+
+    trackLowestRoomPrice({
+      hotelId,
+      arrivalDate,
+      departureDate,
+      lowestPrice: lowestPrice,
+      currency: currency,
+    })
+  }, [arrivalDate, departureDate, hotelId, visibleRooms])
+
+  return (
+    <div className={styles.content}>
+      {bookingRooms.map((room, idx) => (
+        <RoomProvider
+          key={`${room.rateCode}-${room.roomTypeCode}-${idx}`}
+          idx={idx}
+          room={rooms[idx]}
+        >
+          <MultiRoomWrapper isMultiRoom={bookingRooms.length > 1}>
+            <RoomSelectionPanel />
+          </MultiRoomWrapper>
+        </RoomProvider>
+      ))}
+    </div>
+  )
+}