feat: make steps of enter details flow dynamic depending on data

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -2,7 +2,8 @@
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
 
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -10,12 +11,9 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./sectionAccordion.module.css"
 
-import {
-  StepEnum,
-  StepStoreKeys,
-} from "@/types/components/hotelReservation/enterDetails/step"
+import { StepStoreKeys } from "@/types/components/hotelReservation/enterDetails/step"
 import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
-import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+import { StepEnum } from "@/types/enums/step"
 
 export default function SectionAccordion({
   header,
@@ -24,12 +22,12 @@ export default function SectionAccordion({
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
-  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const currentStep = useStepsStore((state) => state.currentStep)
   const [isComplete, setIsComplete] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
-  const isValid = useEnterDetailsStore((state) => state.isValid[step])
-  const navigate = useEnterDetailsStore((state) => state.navigate)
-  const stepData = useEnterDetailsStore((state) => state.userData)
+  const isValid = useDetailsStore((state) => state.isValid[step])
+  const navigate = useStepsStore((state) => state.navigate)
+  const stepData = useDetailsStore((state) => state.data)
   const stepStoreKey = StepStoreKeys[step]
   const [title, setTitle] = useState(label)
 
@@ -39,9 +37,12 @@ export default function SectionAccordion({
       value && setTitle(value.description)
     }
     // If breakfast step, check if an option has been selected
-    if (step === StepEnum.breakfast && stepData.breakfast) {
+    if (
+      step === StepEnum.breakfast &&
+      (stepData.breakfast || stepData.breakfast === false)
+    ) {
       const value = stepData.breakfast
-      if (value === BreakfastPackageEnum.NO_BREAKFAST) {
+      if (value === false) {
         setTitle(intl.formatMessage({ id: "No breakfast" }))
       } else {
         setTitle(intl.formatMessage({ id: "Breakfast buffet" }))
@@ -94,7 +95,9 @@ export default function SectionAccordion({
             )}
           </button>
         </header>
-        <div className={styles.content}>{children}</div>
+        <div className={styles.content}>
+          <div className={styles.contentWrapper}>{children}</div>
+        </div>
       </div>
     </section>
   )

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -31,7 +31,6 @@
 
 .main {
   display: grid;
-  gap: var(--Spacing-x3);
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
@@ -80,6 +79,10 @@
   overflow: hidden;
 }
 
+.contentWrapper {
+  padding-top: var(--Spacing-x3);
+}
+
 @media screen and (min-width: 1367px) {
   .wrapper {
     gap: var(--Spacing-x3);
@@ -98,4 +101,4 @@
     content: "";
     border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   }
-}
+}