web/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx

import { useIntl } from "react-intl"

import { customerService } from "@/constants/currentWebHrefs"

import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
import {
  CalendarIcon,
  ChevronRightIcon,
  CreditCard,
  CrossCircleOutlineIcon,
  DownloadIcon,
} from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

import AddToCalendarButton from "./Actions/AddToCalendarButton"

import styles from "./actionPanel.module.css"

import type { EventAttributes } from "ics"

import type { Hotel } from "@/types/hotel"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface ActionPanelProps {
  booking: BookingConfirmation["booking"]
  hotel: Hotel
  showCancelStayButton: boolean
  showGuaranteeButton: boolean
  onCancelClick: () => void
  onGuaranteeClick: () => void
}

export default function ActionPanel({
  booking,
  hotel,
  showCancelStayButton,
  showGuaranteeButton,
  onCancelClick,
  onGuaranteeClick,
}: ActionPanelProps) {
  const intl = useIntl()
  const lang = useLang()

  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 (
    <div className={styles.actionPanel}>
      <div className={styles.menu}>
        <Button
          variant="icon"
          onClick={() => {}}
          intent="text"
          className={styles.button}
        >
          {intl.formatMessage({ id: "Modify dates" })}
          <CalendarIcon width={24} height={24} color="burgundy" />
        </Button>
        {showGuaranteeButton && (
          <Button
            variant="icon"
            onClick={onGuaranteeClick}
            intent="text"
            className={styles.button}
          >
            {intl.formatMessage({ id: "Guarantee late arrival" })}
            <CreditCard width={24} height={24} color="burgundy" />
          </Button>
        )}
        <AddToCalendar
          checkInDate={booking.checkInDate}
          event={event}
          hotelName={hotel.name}
          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
        />
        <Button
          variant="icon"
          onClick={() => {}}
          intent="text"
          className={styles.button}
        >
          {intl.formatMessage({ id: "Download invoice" })}
          <DownloadIcon width={24} height={24} color="burgundy" />
        </Button>
        {showCancelStayButton && (
          <Button
            variant="icon"
            onClick={onCancelClick}
            intent="text"
            className={styles.button}
          >
            {intl.formatMessage({ id: "Cancel stay" })}
            <CrossCircleOutlineIcon width={24} height={24} color="burgundy" />
          </Button>
        )}
      </div>
      <div className={styles.info}>
        <div>
          <span className={styles.tag}>
            {intl.formatMessage({ id: "Reference number" })}
          </span>
          <Subtitle color="burgundy" textAlign="right">
            {booking.confirmationNumber}
          </Subtitle>
        </div>
        <div>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.name}
          </Body>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.address.streetAddress}
          </Body>
          <Body color="uiTextHighContrast" textAlign="right">
            {hotel.address.city}
          </Body>
          <Body color="uiTextHighContrast" asChild>
            <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
              {hotel.contactInformation.phoneNumber}
            </Link>
          </Body>
        </div>
        <Link
          href={customerService[lang]}
          variant="icon"
          className={styles.link}
        >
          <Caption color="burgundy">
            {intl.formatMessage({ id: "Customer support" })}
          </Caption>
          <ChevronRightIcon width={20} height={20} color="burgundy" />
        </Link>
      </div>
    </div>
  )
}