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/Details/MemberPriceModal/index.tsx

@@ -3,6 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
+import { selectRoom } from "@/stores/enter-details/helpers"
 
 import { MagicWandIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
@@ -23,7 +24,8 @@ export default function MemberPriceModal({
   isOpen: boolean
   setIsOpen: Dispatch<SetStateAction<boolean>>
 }) {
-  const memberRate = useEnterDetailsStore((state) => state.roomRate.memberRate)
+  const room = useEnterDetailsStore(selectRoom)
+  const memberRate = room.roomRate.memberRate
   const intl = useIntl()
 
   const memberPrice = memberRate?.localPrice ?? memberRate?.requestedPrice

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -5,6 +5,10 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
+import {
+  selectBookingProgress,
+  selectRoom,
+} from "@/stores/enter-details/helpers"
 
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -26,15 +30,25 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/details"
 
 const formID = "enter-details"
-export default function Details({ user, memberPrice }: DetailsProps) {
+export default function Details({
+  user,
+  memberPrice,
+  roomIndex,
+}: DetailsProps & { roomIndex: number }) {
   const intl = useIntl()
   const [isMemberPriceModalOpen, setIsMemberPriceModalOpen] = useState(false)
 
-  const initialData = useEnterDetailsStore((state) => state.guest)
+  const { currentRoomIndex, canProceedToPayment, roomStatuses } =
+    useEnterDetailsStore(selectBookingProgress)
+  const room = useEnterDetailsStore((state) => selectRoom(state, roomIndex))
+  const initialData = room.guest
+
   const updateDetails = useEnterDetailsStore(
     (state) => state.actions.updateDetails
   )
 
+  const isPaymentNext = currentRoomIndex === roomStatuses.length - 1
+
   const methods = useForm<DetailsSchema>({
     criteriaMode: "all",
     mode: "all",
@@ -68,7 +82,7 @@ export default function Details({ user, memberPrice }: DetailsProps) {
     <FormProvider {...methods}>
       <form
         className={styles.form}
-        id={formID}
+        id={`${formID}-room-${roomIndex + 1}`}
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         {user ? null : (
@@ -127,13 +141,23 @@ export default function Details({ user, memberPrice }: DetailsProps) {
         </div>
         <footer className={styles.footer}>
           <Button
-            disabled={!methods.formState.isValid}
+            disabled={
+              !(
+                methods.formState.isValid ||
+                (isPaymentNext && canProceedToPayment)
+              )
+            }
             intent="secondary"
             size="small"
             theme="base"
             type="submit"
           >
-            {intl.formatMessage({ id: "Proceed to payment" })}
+            {isPaymentNext
+              ? intl.formatMessage({ id: "Proceed to payment method" })
+              : intl.formatMessage(
+                  { id: "Continue to room {nextRoomNumber}" },
+                  { nextRoomNumber: currentRoomIndex + 2 }
+                )}
           </Button>
         </footer>
         <MemberPriceModal