150 lines
4.7 KiB
TypeScript
150 lines
4.7 KiB
TypeScript
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"
|
|
|
|
export default function ActionPanel({
|
|
booking,
|
|
hotel,
|
|
showCancelButton,
|
|
onCancelClick,
|
|
}: {
|
|
booking: BookingConfirmation["booking"]
|
|
hotel: Hotel
|
|
showCancelButton: boolean
|
|
onCancelClick: () => void
|
|
}) {
|
|
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={onCancelClick}
|
|
intent="text"
|
|
className={styles.button}
|
|
>
|
|
{intl.formatMessage({ id: "Modify dates" })}
|
|
<CalendarIcon width={24} height={24} color="burgundy" />
|
|
</Button>
|
|
<Button
|
|
variant="icon"
|
|
onClick={onCancelClick}
|
|
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={onCancelClick}
|
|
intent="text"
|
|
className={styles.button}
|
|
>
|
|
{intl.formatMessage({ id: "Download invoice" })}
|
|
<DownloadIcon width={24} height={24} color="burgundy" />
|
|
</Button>
|
|
{showCancelButton && (
|
|
<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 className={styles.hotel}>
|
|
<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>
|
|
)
|
|
}
|