feat(SW-864): add to calendar functionality

This commit is contained in:
Simon Emanuelsson
2024-11-28 14:22:31 +01:00
parent f896f8df76
commit 33de623f41
14 changed files with 233 additions and 47 deletions

View File

@@ -5,17 +5,22 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import Actions from "./Actions"
import AddToCalendar from "./Actions/AddToCalendar"
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 { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default async function Header({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { hotel } = await getBookingConfirmation(confirmationNumber)
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
const text = intl.formatMessage<React.ReactNode>(
{ id: "booking.confirmation.text" },
@@ -28,6 +33,25 @@ export default async function Header({
}
)
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 (
<header className={styles.header}>
<hgroup className={styles.hgroup}>
@@ -39,7 +63,15 @@ export default async function Header({
</Title>
</hgroup>
<Body className={styles.body}>{text}</Body>
<Actions />
<div className={styles.actions}>
<AddToCalendar
checkInDate={booking.checkInDate}
event={event}
hotelName={hotel.name}
/>
<ManageBooking />
<DownloadInvoice />
</div>
</header>
)
}