chore: cleaning up select-rate

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

@@ -0,0 +1,83 @@
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+
+import SelectedRoomPanel from "./SelectedRoomPanel"
+import { roomSelectionPanelVariants } from "./variants"
+
+import styles from "./multiRoomWrapper.module.css"
+
+export default function MultiRoomWrapper({
+  children,
+  isMultiRoom,
+}: React.PropsWithChildren<{ isMultiRoom: boolean }>) {
+  const intl = useIntl()
+  const activeRoom = useRatesStore((state) => state.activeRoom)
+  const { bookingRoom, isActiveRoom, roomNr, selectedRate } = useRoomContext()
+
+  const onlyAdultsMsg = intl.formatMessage(
+    { id: "{adults} adults" },
+    { adults: bookingRoom.adults }
+  )
+  const adultsAndChildrenMsg = intl.formatMessage(
+    { id: "{adults} adults, {children} children" },
+    {
+      adults: bookingRoom.adults,
+      children: bookingRoom.childrenInRoom?.length,
+    }
+  )
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const SCROLL_OFFSET = 100
+      const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
+
+      const selectedRoom = roomElements[activeRoom]
+
+      if (selectedRoom) {
+        const elementPosition = selectedRoom.getBoundingClientRect().top
+        const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: "smooth",
+        })
+      }
+    })
+  }, [activeRoom])
+
+  if (isMultiRoom) {
+    const classNames = roomSelectionPanelVariants({
+      active: isActiveRoom,
+      selected: !!selectedRate && !isActiveRoom,
+    })
+    return (
+      <div className={styles.roomContainer}>
+        {selectedRate && !isActiveRoom ? null : (
+          <Subtitle className={styles.subtitle} color="uiTextHighContrast">
+            {intl.formatMessage(
+              { id: "Room {roomIndex}" },
+              { roomIndex: roomNr }
+            )}
+            ,{" "}
+            {bookingRoom.childrenInRoom?.length
+              ? adultsAndChildrenMsg
+              : onlyAdultsMsg}
+          </Subtitle>
+        )}
+        <div className={classNames}>
+          <div className={styles.roomPanel}>
+            <SelectedRoomPanel room={bookingRoom} />
+          </div>
+          <div className={styles.roomSelectionPanel}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}