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

This commit is contained in:
Arvid Norlin
2024-10-18 14:33:06 +02:00
parent f836695919
commit 3ea48b3846
2 changed files with 32 additions and 3 deletions

View File

@@ -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 && (