155 lines
5.8 KiB
TypeScript
155 lines
5.8 KiB
TypeScript
import { profile } from "@/constants/routes/myPages"
|
|
import { dt } from "@/lib/dt"
|
|
import {
|
|
getBookingConfirmation,
|
|
getProfileSafely,
|
|
} from "@/lib/trpc/memoizedRequests"
|
|
|
|
import { CreditCardAddIcon, EditIcon, PersonIcon } from "@/components/Icons"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { getIntl } from "@/i18n"
|
|
import { getLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./summary.module.css"
|
|
|
|
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
|
|
|
|
export default async function Summary({
|
|
confirmationNumber,
|
|
}: BookingConfirmationProps) {
|
|
const intl = await getIntl()
|
|
const lang = getLang()
|
|
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
|
|
const user = await getProfileSafely()
|
|
const { firstName, lastName } = booking.guest
|
|
const membershipNumber = user?.membership?.membershipNumber
|
|
const totalNights = dt(booking.checkOutDate.setHours(0, 0, 0)).diff(
|
|
dt(booking.checkInDate.setHours(0, 0, 0)),
|
|
"days"
|
|
)
|
|
|
|
const breakfastPackage = booking.packages.find(
|
|
(pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
|
|
)
|
|
return (
|
|
<div className={styles.summary}>
|
|
<div className={styles.container}>
|
|
<div className={styles.textContainer}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Guest" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{`${firstName} ${lastName}`}</Body>
|
|
{membershipNumber ? (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "membership.no" },
|
|
{ membershipNumber }
|
|
)}
|
|
</Body>
|
|
) : null}
|
|
<Body color="uiTextHighContrast">{booking.guest.email}</Body>
|
|
<Body color="uiTextHighContrast">{booking.guest.phoneNumber}</Body>
|
|
</div>
|
|
{user ? (
|
|
<Link className={styles.link} href={profile[lang]} variant="icon">
|
|
<PersonIcon color="baseButtonTextOnFillNormal" />
|
|
<Caption color="burgundy" type="bold">
|
|
{intl.formatMessage({ id: "Go to profile" })}
|
|
</Caption>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.container}>
|
|
<div className={styles.textContainer}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Payment" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "guest.paid" },
|
|
{
|
|
amount: intl.formatNumber(booking.totalPrice),
|
|
currency: booking.currencyCode,
|
|
}
|
|
)}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">Date information N/A</Body>
|
|
<Body color="uiTextHighContrast">Card information N/A</Body>
|
|
</div>
|
|
{/* # href until more info */}
|
|
{user ? (
|
|
<Link className={styles.link} href="#" variant="icon">
|
|
<CreditCardAddIcon color="baseButtonTextOnFillNormal" />
|
|
<Caption color="burgundy" type="bold">
|
|
{intl.formatMessage({ id: "Save card to profile" })}
|
|
</Caption>
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.container}>
|
|
<div className={styles.textContainer}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Booking" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
N/A, {intl.formatMessage({ id: "booking.nights" }, { totalNights })}
|
|
,{" "}
|
|
{intl.formatMessage(
|
|
{ id: "booking.adults" },
|
|
{ totalAdults: booking.adults }
|
|
)}
|
|
</Body>
|
|
{breakfastPackage ? (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "Breakfast added" })}
|
|
</Body>
|
|
) : null}
|
|
<Body color="uiTextHighContrast">Bedtype N/A</Body>
|
|
</div>
|
|
{/* # href until more info */}
|
|
<Link className={styles.link} href="#" variant="icon">
|
|
<EditIcon color="baseButtonTextOnFillNormal" />
|
|
<Caption color="burgundy" type="bold">
|
|
{intl.formatMessage({ id: "Manage booking" })}
|
|
</Caption>
|
|
</Link>
|
|
</div>
|
|
<Divider color="primaryLightSubtle" />
|
|
<div className={styles.container}>
|
|
<div className={styles.textContainer}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Hotel" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{hotel.name}</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{hotel.contactInformation.phoneNumber}
|
|
</Body>
|
|
<Caption color="uiTextMediumContrast" className={styles.latLong}>
|
|
{`${intl.formatMessage({ id: "Longitude" }, { long: hotel.location.longitude })} ∙ ${intl.formatMessage({ id: "Latitude" }, { lat: hotel.location.latitude })}`}
|
|
</Caption>
|
|
</div>
|
|
<div className={styles.hotelLinks}>
|
|
<Link color="peach80" href={hotel.contactInformation.websiteUrl}>
|
|
{hotel.contactInformation.websiteUrl}
|
|
</Link>
|
|
<Link
|
|
color="peach80"
|
|
href={`mailto:${hotel.contactInformation.email}`}
|
|
>
|
|
{hotel.contactInformation.email}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|