Merged in feat/SW-1889 (pull request #1670)

Feat/SW-1889

* fix: remove download invoice from confirmation page

* feat: remove EnterDetails Accordions


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Multiroom.tsx

@@ -7,7 +7,7 @@ import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details/Multiroom"
 import Header from "@/components/HotelReservation/EnterDetails/Room/Header"
-import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import Section from "@/components/HotelReservation/EnterDetails/Section"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -16,12 +16,31 @@ import { StepEnum } from "@/types/enums/step"
 
 export default function Multiroom() {
   const intl = useIntl()
-  const { room, roomNr } = useRoomContext()
-  const breakfastPackages = useEnterDetailsStore(
-    (state) => state.breakfastPackages
-  )
+  const { idx, room, roomNr, steps } = useRoomContext()
+  const { breakfastPackages, rooms } = useEnterDetailsStore((state) => ({
+    breakfastPackages: state.breakfastPackages,
+    rooms: state.rooms,
+  }))
+
   const showBreakfastStep =
     !room.breakfastIncluded && !!breakfastPackages?.length
+
+  const arePreviousRoomsValid = rooms.slice(0, idx).every((r) => r.isComplete)
+
+  const isBreakfastStepValid = showBreakfastStep
+    ? steps[StepEnum.breakfast]?.isValid
+    : true
+
+  const isBreakfastDisabled = !(
+    arePreviousRoomsValid && steps[StepEnum.selectBed].isValid
+  )
+
+  const isDetailsDisabled = !(
+    arePreviousRoomsValid &&
+    steps[StepEnum.selectBed].isValid &&
+    isBreakfastStepValid
+  )
+
   return (
     <section>
       <Header>
@@ -38,34 +57,37 @@ export default function Multiroom() {
       <SelectedRoom />
 
       {room.bedTypes ? (
-        <SectionAccordion
+        <Section
           header={intl.formatMessage({ id: "Select bed" })}
           label={intl.formatMessage({ id: "Request bedtype" })}
           step={StepEnum.selectBed}
+          disabled={!arePreviousRoomsValid}
         >
           <BedType />
-        </SectionAccordion>
+        </Section>
       ) : null}
 
       {showBreakfastStep ? (
-        <SectionAccordion
+        <Section
           header={intl.formatMessage({ id: "Food options" })}
           label={intl.formatMessage({
             id: "Select breakfast options",
           })}
           step={StepEnum.breakfast}
+          disabled={isBreakfastDisabled}
         >
           <Breakfast />
-        </SectionAccordion>
+        </Section>
       ) : null}
 
-      <SectionAccordion
+      <Section
         header={intl.formatMessage({ id: "Details" })}
         step={StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
+        disabled={isDetailsDisabled}
       >
         <Details />
-      </SectionAccordion>
+      </Section>
     </section>
   )
 }

apps/scandic-web/components/HotelReservation/EnterDetails/Room/One.tsx

@@ -7,7 +7,7 @@ import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details/RoomOne"
 import Header from "@/components/HotelReservation/EnterDetails/Room/Header"
-import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+import Section from "@/components/HotelReservation/EnterDetails/Section"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -17,13 +17,12 @@ import type { SafeUser } from "@/types/user"
 
 export default function RoomOne({ user }: { user: SafeUser }) {
   const intl = useIntl()
-  const { room } = useRoomContext()
-  const { breakfastPackages, rooms } = useEnterDetailsStore((state) => ({
+  const { room, steps } = useRoomContext()
+  const { breakfastPackages, isMultiroom } = useEnterDetailsStore((state) => ({
     breakfastPackages: state.breakfastPackages,
-    rooms: state.rooms,
+    isMultiroom: state.rooms.length > 1,
   }))
 
-  const isMultiroom = rooms.length > 1
   const showBreakfastStep =
     !room.breakfastIncluded && !!breakfastPackages?.length
   return (
@@ -44,34 +43,41 @@ export default function RoomOne({ user }: { user: SafeUser }) {
       <SelectedRoom />
 
       {room.bedTypes ? (
-        <SectionAccordion
+        <Section
           header={intl.formatMessage({ id: "Select bed" })}
           label={intl.formatMessage({ id: "Request bedtype" })}
           step={StepEnum.selectBed}
         >
           <BedType />
-        </SectionAccordion>
+        </Section>
       ) : null}
 
       {showBreakfastStep ? (
-        <SectionAccordion
+        <Section
           header={intl.formatMessage({ id: "Food options" })}
           label={intl.formatMessage({
             id: "Select breakfast options",
           })}
           step={StepEnum.breakfast}
+          disabled={!steps[StepEnum.selectBed].isValid}
         >
           <Breakfast />
-        </SectionAccordion>
+        </Section>
       ) : null}
 
-      <SectionAccordion
+      <Section
         header={intl.formatMessage({ id: "Details" })}
         step={StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
+        disabled={
+          !(
+            steps[StepEnum.selectBed].isValid &&
+            steps[StepEnum.breakfast]?.isValid !== false
+          )
+        }
       >
         <Details user={user} />
-      </SectionAccordion>
+      </Section>
     </section>
   )
 }