"use client" import { useIntl } from "react-intl" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import Title from "@/components/TempDesignSystem/Text/Title" import AddToCalendar from "../../AddToCalendar" import AddToCalendarButton from "./Actions/AddToCalendarButton" import DownloadInvoice from "./Actions/DownloadInvoice" import { generateDateTime } from "./Actions/helpers" import ManageBooking from "./Actions/ManageBooking" import styles from "./header.module.css" import type { EventAttributes } from "ics" import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header" export default function Header({ booking, hotel, mainRef, }: BookingConfirmationHeaderProps) { const intl = useIntl() const text = intl.formatMessage( { id: "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please contact us.", }, { emailLink: (str) => ( {str} ), } ) const event: EventAttributes = { busyStatus: "FREE", categories: ["booking", "hotel", "stay"], created: generateDateTime(booking.createDateTime), description: hotel.hotelContent.texts.descriptions.medium, end: generateDateTime(booking.checkOutDate), endInputType: "utc", geo: { lat: hotel.location.latitude, lon: hotel.location.longitude, }, location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`, start: generateDateTime(booking.checkInDate), startInputType: "utc", status: "CONFIRMED", title: hotel.name, url: hotel.contactInformation.websiteUrl, } return (
{intl.formatMessage({ id: "Booking confirmation" })} {hotel.name}
{intl.formatMessage( { id: "Reservation number {value}" }, { value: booking.confirmationNumber, } )} {text}
} />
) }