"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 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, roomDetails = [], }: CancelStayConfirmationProps) { const intl = useIntl() const { getValues } = useFormContext() 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" })} {index + 1} {roomDetail && ( <> {roomDetail.roomName} )}

) })}

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