"use client" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import { useMyStayRoomDetailsStore } from "../../stores/myStayRoomDetailsStore" import PriceContainer from "../Pricecontainer" import styles from "../cancelStay.module.css" import type { CancelStayConfirmationProps, FormValues, } from "@/types/components/hotelReservation/myStay/cancelStay" export function CancelStayConfirmation({ hotel, booking, stayDetails, }: CancelStayConfirmationProps) { const intl = useIntl() const { getValues } = useFormContext() const { rooms: roomDetails } = useMyStayRoomDetailsStore() return ( <>

{intl.formatMessage( { id: "Are you sure you want to cancel your stay at {hotel} from {checkInDate} to {checkOutDate}? This can't be reversed.", }, { hotel: hotel.name, checkInDate: stayDetails.checkInDate, checkOutDate: stayDetails.checkOutDate, } )} {intl.formatMessage({ id: "No charges were made." })}

{booking.multiRoom && ( <> {intl.formatMessage({ id: "Select rooms" })}

{getValues("rooms").map((room, index) => { // Find room details from store by confirmationNumber const roomDetail = roomDetails.find( (detail) => detail.id === room.confirmationNumber ) return (

{intl.formatMessage( { id: "Room {roomIndex}" }, { roomIndex: index + 1, } )} {roomDetail && ( <> {roomDetail.roomName} )}

) })}

)} {getValues("rooms").some((room) => room.checked) && ( )} ) }