99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
"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<FormValues>()
|
|
const { rooms: roomDetails } = useMyStayRoomDetailsStore()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.modalText}>
|
|
<Body color="uiTextHighContrast">
|
|
{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,
|
|
}
|
|
)}
|
|
</Body>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "No charges were made." })}
|
|
</Caption>
|
|
</div>
|
|
{booking.multiRoom && (
|
|
<>
|
|
<Body color="uiTextHighContrast" textTransform="bold">
|
|
{intl.formatMessage({ id: "Select rooms" })}
|
|
</Body>
|
|
|
|
<div className={styles.rooms}>
|
|
{getValues("rooms").map((room, index) => {
|
|
// Find room details from store by confirmationNumber
|
|
const roomDetail = roomDetails.find(
|
|
(detail) => detail.id === room.confirmationNumber
|
|
)
|
|
|
|
return (
|
|
<div key={room.id} className={styles.roomContainer}>
|
|
<Checkbox
|
|
name={`rooms.${index}.checked`}
|
|
registerOptions={{
|
|
disabled: !roomDetail?.isCancelable,
|
|
}}
|
|
>
|
|
<div className={styles.roomInfo}>
|
|
<Caption color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{
|
|
roomIndex: index + 1,
|
|
}
|
|
)}
|
|
</Caption>
|
|
{roomDetail && (
|
|
<>
|
|
<Body color="uiTextHighContrast">
|
|
{roomDetail.roomName}
|
|
</Body>
|
|
</>
|
|
)}
|
|
</div>
|
|
</Checkbox>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
{getValues("rooms").some((room) => room.checked) && (
|
|
<PriceContainer booking={booking} stayDetails={stayDetails} />
|
|
)}
|
|
</>
|
|
)
|
|
}
|