From 3ea48b3846d4971e8e2f580781e3b4b0a274260d Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 18 Oct 2024 14:33:06 +0200
Subject: [PATCH] fix: make Bed and Breakfast Accordion texts dynamic based on
 selection

---
 .../EnterDetails/SectionAccordion/index.tsx   | 28 +++++++++++++++++--
 .../hotelReservation/enterDetails/step.ts     |  7 +++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx b/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
index a508974c5..05a2f038e 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/index.tsx
+++ b/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 && (
diff --git a/types/components/hotelReservation/enterDetails/step.ts b/types/components/hotelReservation/enterDetails/step.ts
index e52d3c856..45de5a009 100644
--- a/types/components/hotelReservation/enterDetails/step.ts
+++ b/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,
+}