fix: make Bed and Breakfast Accordion texts dynamic based on selection

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -11,7 +11,12 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./sectionAccordion.module.css"
 
+import {
+  StepEnum,
+  StepStoreKeys,
+} from "@/types/components/hotelReservation/enterDetails/step"
 import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
 export default function SectionAccordion({
   header,
@@ -23,9 +28,27 @@ export default function SectionAccordion({
   const currentStep = useEnterDetailsStore((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 stepStoreKey = StepStoreKeys[step]
+  const [title, setTitle] = useState(label)
+
+  useEffect(() => {
+    if (step === StepEnum.selectBed) {
+      const value = stepData.bedType
+      value && setTitle(value)
+    }
+    // If breakfast step, check if an option has been selected
+    if (step === StepEnum.breakfast && stepData.breakfast) {
+      const value = stepData.breakfast
+      if (value === BreakfastPackageEnum.NO_BREAKFAST) {
+        setTitle(intl.formatMessage({ id: "No breakfast" }))
+      } else {
+        setTitle(intl.formatMessage({ id: "Breakfast buffet" }))
+      }
+    }
+  }, [stepData, stepStoreKey, step, intl])
 
   useEffect(() => {
     // We need to set the state on mount because of hydration errors
@@ -39,7 +62,6 @@ export default function SectionAccordion({
   function onModify() {
     navigate(step)
   }
-
   return (
     <section className={styles.wrapper} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
@@ -65,7 +87,7 @@ export default function SectionAccordion({
               className={styles.selection}
               color="uiTextHighContrast"
             >
-              {label}
+              {title}
             </Subtitle>
           </div>
           {isComplete && !isOpen && (

types/components/hotelReservation/enterDetails/step.ts

@@ -4,3 +4,10 @@ export enum StepEnum {
   details = "details",
   payment = "payment",
 }
+
+export const StepStoreKeys: Record<StepEnum, "bedType" | "breakfast" | null> = {
+  "select-bed": "bedType",
+  breakfast: "breakfast",
+  details: null,
+  payment: null,
+}