feat: add multiroom signup

apps/scandic-web/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -2,16 +2,10 @@
 import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useEnterDetailsStore } from "@/stores/enter-details"
-import {
-  selectBookingProgress,
-  selectRoom,
-  selectRoomStatus,
-} from "@/stores/enter-details/helpers"
-
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Details/Room"
 import useStickyPosition from "@/hooks/useStickyPosition"
 
 import styles from "./sectionAccordion.module.css"
@@ -24,32 +18,27 @@ export default function SectionAccordion({
   header,
   label,
   step,
-  roomIndex,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
-  const roomStatus = useEnterDetailsStore((state) =>
-    selectRoomStatus(state, roomIndex)
-  )
-
   const stickyPosition = useStickyPosition({})
-  const setStep = useEnterDetailsStore((state) => state.actions.setStep)
-  const { bedType, breakfast } = useEnterDetailsStore((state) =>
-    selectRoom(state, roomIndex)
-  )
-  const { roomStatuses, currentRoomIndex } = useEnterDetailsStore((state) =>
-    selectBookingProgress(state)
-  )
+  const {
+    actions: { setStep },
+    currentStep,
+    isActiveRoom,
+    room: { bedType, breakfast },
+    steps,
+  } = useRoomContext()
 
   const [isComplete, setIsComplete] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
-  const isValid = roomStatus.steps[step]?.isValid ?? false
+  const isValid = steps[step]?.isValid ?? false
 
   const [title, setTitle] = useState(label)
 
   const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
   const breakfastTitle = intl.formatMessage({ id: "Breakfast buffet" })
 
-  // useScrollToActiveSection(step, steps, roomStatus.currentStep === step)
+  // useScrollToActiveSection(step, steps, currentStep === step)
 
   useEffect(() => {
     if (step === StepEnum.selectBed && bedType) {
@@ -72,14 +61,13 @@ export default function SectionAccordion({
   const accordionRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const shouldBeOpen =
-      roomStatus.currentStep === step && currentRoomIndex === roomIndex
-
+    const shouldBeOpen = currentStep === step && isActiveRoom
     setIsOpen(shouldBeOpen)
 
-    // Scroll to this section when it is opened, but wait for the accordion animations to
-    // finish, else the height calculations will not be correct and the scroll position
-    // will be off.
+    // Scroll to this section when it is opened,
+    // but wait for the accordion animations to finish,
+    // else the height calculations will not be correct and
+    // the scroll position will be off.
     if (shouldBeOpen) {
       const handleTransitionEnd = () => {
         if (accordionRef.current) {
@@ -103,26 +91,15 @@ export default function SectionAccordion({
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentRoomIndex, roomIndex, roomStatus.currentStep, setIsOpen, step])
+  }, [currentStep, isActiveRoom, setIsOpen, step])
 
-  function onModify() {
-    setStep(step, roomIndex)
+  function goToStep() {
+    setStep(step)
   }
 
   function close() {
     setIsOpen(false)
-
-    const nextRoom = roomStatuses.find((room) => !room.isComplete)
-    const nextStep = nextRoom
-      ? Object.values(nextRoom.steps).find((step) => !step.isValid)?.step
-      : null
-
-    if (nextRoom !== undefined && nextStep !== undefined) {
-      setStep(nextStep, roomStatuses.indexOf(nextRoom))
-    } else {
-      // Time for payment, collapse any open step
-      setStep(null)
-    }
+    goToStep()
   }
 
   const textColor =
@@ -143,7 +120,7 @@ export default function SectionAccordion({
       </div>
       <header className={styles.header}>
         <button
-          onClick={isOpen ? close : onModify}
+          onClick={isOpen ? close : goToStep}
           disabled={!isComplete}
           className={styles.modifyButton}
         >