"use client" import { zodResolver } from "@hookform/resolvers/zod" import { useCallback, useEffect, useRef } from "react" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" import Body from "@scandic-hotels/design-system/Body" import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon" import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon" import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner" import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext" import { useEnterDetailsStore } from "../../../stores/enter-details" import { type BreakfastFormSchema, breakfastFormSchema } from "./schema" import styles from "./breakfast.module.css" export default function Breakfast() { const intl = useIntl() const formRef = useRef(null) const packages = useEnterDetailsStore((state) => state.breakfastPackages) const hotelId = useEnterDetailsStore((state) => state.booking.hotelId) const { addPreSubmitCallback } = useEnterDetailsStore((state) => ({ addPreSubmitCallback: state.actions.addPreSubmitCallback, })) const { actions: { updateBreakfast }, room, idx, } = useRoomContext() const hasChildrenInRoom = !!room.childrenInRoom?.length const totalPriceForNoBreakfast = 0 const breakfastSelection = room?.breakfast ? room.breakfast.code : room?.breakfast === false ? "false" : undefined const methods = useForm({ criteriaMode: "all", mode: "all", resolver: zodResolver(breakfastFormSchema), reValidateMode: "onChange", values: breakfastSelection ? { breakfast: breakfastSelection } : undefined, }) const onSubmit = useCallback( (values: BreakfastFormSchema) => { const pkg = packages.find((p) => p.code === values.breakfast) if (pkg) { updateBreakfast(pkg) } else { updateBreakfast(false) } trackBreakfastSelection({ breakfastPackage: pkg ?? packages[0], hotelId, units: pkg ? room.adults : 0, breakfastOption: pkg ? "breakfast buffet" : "no breakfast", }) }, [packages, hotelId, room.adults, updateBreakfast] ) useEffect(() => { async function callback() { const isValid = await methods.trigger() if (!isValid && methods.formState.errors.breakfast) { return formRef.current ?? undefined } return } addPreSubmitCallback(`${idx}-breakfast`, callback) }, [addPreSubmitCallback, methods, idx]) const selectedBreakfast = methods.watch("breakfast") const handleSubmit = methods.handleSubmit useEffect(() => { if (selectedBreakfast) { handleSubmit(onSubmit)() } }, [selectedBreakfast, handleSubmit, onSubmit]) return (

{hasChildrenInRoom ? ( {intl.formatMessage({ id: "enterDetails.breakfast.childrenFreeInfo", defaultMessage: "Children's breakfast is always free as part of the adult's breakfast.", })} ) : null} {methods.formState.errors.breakfast && (

)}

) }