web/packages/booking-flow/lib/components/BookingConfirmation/Header/index.tsx

"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

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 { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"
import type { EventAttributes } from "ics"
import type { MutableRefObject } from "react"

interface BookingConfirmationHeaderProps extends Pick<
  BookingConfirmation,
  "booking" | "hotel" | "url"
> {
  mainRef: MutableRefObject<HTMLElement | null>
}

export function Header({
  booking,
  hotel,
  url,
  // mainRef,
}: BookingConfirmationHeaderProps) {
  const intl = useIntl()

  const text = intl.formatMessage({
    id: "bookingConfirmation.thankYouMessage",
    defaultMessage:
      "Thank you for your booking! We look forward to welcoming you and hope you have a pleasant stay.",
  })

  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: url ?? undefined,
  }

  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
        <Typography variant="Title/md">
          <h2 className={styles.confirmTitle}>
            {intl.formatMessage({
              id: "bookingConfirmation.title",
              defaultMessage: "Booking confirmation",
            })}
          </h2>
        </Typography>
        <Typography variant="Title/md">
          <h2 className={styles.hotelTitle}>{hotel.name}</h2>
        </Typography>
      </hgroup>
      <Typography variant="Body/Paragraph/mdRegular" className={styles.body}>
        <p>{text}</p>
      </Typography>
      <div className={styles.actions}>
        <AddToCalendar
          checkInDate={booking.checkInDate}
          event={event}
          hotelName={hotel.name}
          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
        />
        <ManageBooking booking={booking} />
        {/* Download Invoice will be added later (currently available on My Stay) */}
        {/* <DownloadInvoice mainRef={mainRef} /> */}
      </div>
    </header>
  )
}