feat: add multiroom signup

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

@@ -5,38 +5,36 @@ import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
-import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
+import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { CheckIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 
 import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./selectedRoom.module.css"
 
-import type { SelectedRoomProps } from "@/types/components/hotelReservation/enterDetails/room"
-
-export default function SelectedRoom({
-  hotelId,
-  roomType,
-  roomTypeCode,
-  rateDescription,
-  roomIndex,
-  searchParamsStr,
-}: SelectedRoomProps) {
+export default function SelectedRoom() {
   const intl = useIntl()
   const lang = useLang()
   const router = useRouter()
   const [isPending, startTransition] = useTransition()
-  const { modifyRate } = useRateSelectionStore()
+  const { room, roomNr } = useRoomContext()
+  const { hotelId, searchParamsStr } = useEnterDetailsStore((state) => ({
+    hotelId: state.booking.hotelId,
+    searchParamsStr: state.searchParamString,
+  }))
 
   function changeRoom() {
-    modifyRate(roomIndex)
+    const searchParams = new URLSearchParams(searchParamsStr)
+    // rooms are index based, thus need for subtraction
+    searchParams.set("modifyRateIndex", `${roomNr - 1}`)
     startTransition(() => {
-      router.push(`${selectRate(lang)}?${searchParamsStr}`)
+      router.push(`${selectRate(lang)}?${searchParams.toString()}`)
     })
   }
 
@@ -66,8 +64,8 @@ export default function SelectedRoom({
             {intl.formatMessage(
               { id: "{roomType} <rate>{rateDescription}</rate>" },
               {
-                roomType: roomType,
-                rateDescription,
+                roomType: room.roomType,
+                rateDescription: room.cancellationText,
                 rate: (str) => {
                   return <span className={styles.rate}>{str}</span>
                 },
@@ -85,12 +83,12 @@ export default function SelectedRoom({
             {intl.formatMessage({ id: "Change room" })}
           </Button>
         </div>
-        {roomTypeCode && (
+        {room.roomTypeCode && (
           <div className={styles.details}>
             <ToggleSidePeek
               hotelId={hotelId}
-              roomTypeCode={roomTypeCode}
               intent="text"
+              roomTypeCode={room.roomTypeCode}
             />
           </div>
         )}