Merged in feat/enter-details-multiroom (pull request #1280)

feat(SW-1259): Enter details multiroom

* refactor: remove per-step URLs

* WIP: map multiroom data

* fix: lint errors in details page

* fix: made useEnterDetailsStore tests pass

* fix: WIP refactor enter details store

* fix: WIP enter details store update

* fix: added room index to select correct room

* fix: added logic for navigating between steps and rooms

* fix: update summary to work with store changes

* fix: added room and total price calculation

* fix: removed unused code and added test for breakfast included

* refactor: move store selectors into helpers

* refactor: session storage state for multiroom booking

* feat: update enter details accordion navigation

* fix: added room index to each form component so they select correct room

* fix: added unique id to input to handle case when multiple inputs have same name

* fix: update payment step with store changes

* fix: rebase issues

* fix: now you should only be able to go to a step if previous room is completed

* refactor: cleanup

* fix: if no availability just skip that room for now

* fix: add select-rate Summary and adjust typings


Approved-by: Arvid Norlin

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -18,7 +18,8 @@ import type { SelectedRoomProps } from "@/types/components/hotelReservation/ente
 
 export default function SelectedRoom({
   hotelId,
-  room,
+  roomType,
+  roomTypeCode,
   rateDescription,
 }: SelectedRoomProps) {
   const intl = useIntl()
@@ -50,7 +51,7 @@ export default function SelectedRoom({
             {intl.formatMessage<React.ReactNode>(
               { id: "{roomType} <rate>{rateDescription}</rate>" },
               {
-                roomType: room.roomType,
+                roomType: roomType,
                 rateDescription,
                 rate: (str) => {
                   return <span className={styles.rate}>{str}</span>
@@ -70,12 +71,9 @@ export default function SelectedRoom({
             {intl.formatMessage({ id: "Change room" })}{" "}
           </Link>
         </div>
-        {room?.roomTypeCode && (
+        {roomTypeCode && (
           <div className={styles.details}>
-            <ToggleSidePeek
-              hotelId={hotelId}
-              roomTypeCode={room.roomTypeCode}
-            />
+            <ToggleSidePeek hotelId={hotelId} roomTypeCode={roomTypeCode} />
           </div>
         )}
       </div>

components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -65,7 +65,6 @@
 @media screen and (min-width: 768px) {
   .wrapper {
     gap: var(--Spacing-x3);
-    padding-top: var(--Spacing-x3);
   }
 
   .iconWrapper {