feat: booking confirmation page with hardcoded data
This commit is contained in:
Simon Emanuelsson
@@ -0,0 +1,279 @@
|
||||
import { dt } from "@/lib/dt"
|
||||
import { serverClient } from "@/lib/trpc/server"
|
||||
|
||||
import {
|
||||
CalendarIcon,
|
||||
DownloadIcon,
|
||||
ImageIcon,
|
||||
PrinterIcon,
|
||||
} from "@/components/Icons"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
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 Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
import Title from "@/components/TempDesignSystem/Text/Title"
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./page.module.css"
|
||||
|
||||
import type { LangParams, PageArgs } from "@/types/params"
|
||||
|
||||
export default async function BookingConfirmationPage({
|
||||
params,
|
||||
}: PageArgs<LangParams>) {
|
||||
const booking = await serverClient().booking.confirmation({
|
||||
confirmationNumber: "991697377",
|
||||
})
|
||||
|
||||
if (!booking) {
|
||||
return null
|
||||
}
|
||||
|
||||
const intl = await getIntl()
|
||||
const text = intl.formatMessage<React.ReactNode>(
|
||||
{ id: "booking.confirmation.text" },
|
||||
{
|
||||
emailLink: (str) => (
|
||||
<Link color="burgundy" href="#" textDecoration="underline">
|
||||
{str}
|
||||
</Link>
|
||||
),
|
||||
}
|
||||
)
|
||||
|
||||
const fromDate = dt(booking.temp.fromDate).locale(params.lang)
|
||||
const toDate = dt(booking.temp.toDate).locale(params.lang)
|
||||
const nights = intl.formatMessage(
|
||||
{ id: "booking.nights" },
|
||||
{
|
||||
totalNights: dt(toDate.format("YYYY-MM-DD")).diff(
|
||||
dt(fromDate.format("YYYY-MM-DD")),
|
||||
"days"
|
||||
),
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<header className={styles.header}>
|
||||
<hgroup className={styles.hgroup}>
|
||||
<Title
|
||||
as="h4"
|
||||
color="red"
|
||||
textAlign="center"
|
||||
textTransform="regular"
|
||||
type="h2"
|
||||
>
|
||||
{intl.formatMessage({ id: "booking.confirmation.title" })}
|
||||
</Title>
|
||||
<Title
|
||||
as="h4"
|
||||
color="burgundy"
|
||||
textAlign="center"
|
||||
textTransform="regular"
|
||||
type="h1"
|
||||
>
|
||||
{booking.hotel.name}
|
||||
</Title>
|
||||
</hgroup>
|
||||
<Body className={styles.body} textAlign="center">
|
||||
{text}
|
||||
</Body>
|
||||
</header>
|
||||
<section className={styles.section}>
|
||||
<div className={styles.booking}>
|
||||
<article className={styles.details}>
|
||||
<header>
|
||||
<Subtitle color="burgundy" type="two">
|
||||
{intl.formatMessage(
|
||||
{ id: "Reference #{bookingNr}" },
|
||||
{ bookingNr: "A92320VV" }
|
||||
)}
|
||||
</Subtitle>
|
||||
</header>
|
||||
<ul className={styles.list}>
|
||||
<li className={styles.listItem}>
|
||||
<Body>{intl.formatMessage({ id: "Check-in" })}</Body>
|
||||
<Body>
|
||||
{`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
|
||||
</Body>
|
||||
</li>
|
||||
<li className={styles.listItem}>
|
||||
<Body>{intl.formatMessage({ id: "Check-out" })}</Body>
|
||||
<Body>
|
||||
{`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
|
||||
</Body>
|
||||
</li>
|
||||
<li className={styles.listItem}>
|
||||
<Body>{intl.formatMessage({ id: "Breakfast" })}</Body>
|
||||
<Body>
|
||||
{booking.temp.breakfastFrom} - {booking.temp.breakfastTo}
|
||||
</Body>
|
||||
</li>
|
||||
<li className={styles.listItem}>
|
||||
<Body>{intl.formatMessage({ id: "Cancellation policy" })}</Body>
|
||||
<Body>
|
||||
{intl.formatMessage({ id: booking.temp.cancelPolicy })}
|
||||
</Body>
|
||||
</li>
|
||||
<li className={styles.listItem}>
|
||||
<Body>{intl.formatMessage({ id: "Rebooking" })}</Body>
|
||||
<Body>{`${intl.formatMessage({ id: "Free until" })} ${fromDate.subtract(3, "day").format("ddd, D MMM")}`}</Body>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<aside className={styles.tempImage}>
|
||||
<ImageIcon height={80} width={80} />
|
||||
</aside>
|
||||
<div className={styles.actions}>
|
||||
<Button
|
||||
intent="text"
|
||||
size="small"
|
||||
theme="base"
|
||||
variant="icon"
|
||||
wrapping
|
||||
>
|
||||
<CalendarIcon />
|
||||
{intl.formatMessage({ id: "Add to calendar" })}
|
||||
</Button>
|
||||
<Button
|
||||
intent="text"
|
||||
size="small"
|
||||
theme="base"
|
||||
variant="icon"
|
||||
wrapping
|
||||
>
|
||||
<PrinterIcon />
|
||||
{intl.formatMessage({ id: "Print confirmation" })}
|
||||
</Button>
|
||||
<Button
|
||||
intent="text"
|
||||
size="small"
|
||||
theme="base"
|
||||
variant="icon"
|
||||
wrapping
|
||||
>
|
||||
<DownloadIcon />
|
||||
{intl.formatMessage({ id: "Download invoice" })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.summary}>
|
||||
<div className={styles.guest}>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{intl.formatMessage({ id: "Guest" })}
|
||||
</Caption>
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{`${booking.guest.firstName} ${booking.guest.lastName}${booking.guest.memberbershipNumber ? ` (${intl.formatMessage({ id: "member no" })} ${booking.guest.memberbershipNumber})` : ""}`}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{booking.guest.email}</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{booking.guest.phoneNumber}
|
||||
</Body>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.hotel}>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{intl.formatMessage({ id: "Your hotel" })}
|
||||
</Caption>
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{booking.hotel.name}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{booking.hotel.email}</Body>
|
||||
<Body color="uiTextHighContrast">
|
||||
{booking.hotel.phoneNumber}
|
||||
</Body>
|
||||
</div>
|
||||
</div>
|
||||
<Divider className={styles.divider} color="primaryLightSubtle" />
|
||||
<div className={styles.receipt}>
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{`${booking.temp.room.type}, ${nights}`}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{booking.temp.room.price}</Body>
|
||||
</div>
|
||||
{booking.temp.packages.map((pkg) => (
|
||||
<div key={pkg.name}>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{pkg.name}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{pkg.price}</Body>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.total}>
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{intl.formatMessage({ id: "VAT" })}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{booking.temp.room.vat}</Body>
|
||||
</div>
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{intl.formatMessage({ id: "Total cost" })}
|
||||
</Body>
|
||||
<Body color="uiTextHighContrast">{booking.temp.total}</Body>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{`${intl.formatMessage({ id: "Approx." })} ${booking.temp.totalInEuro}`}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
<Divider className={styles.divider} color="primaryLightSubtle" />
|
||||
<div>
|
||||
<Body color="burgundy" textTransform="bold">
|
||||
{`${intl.formatMessage({ id: "Payment received" })} ${dt(booking.temp.payment).locale(params.lang).format("D MMM YYYY, h:mm z")}`}
|
||||
</Body>
|
||||
<Caption color="uiTextPlaceholder">
|
||||
{intl.formatMessage(
|
||||
{ id: "{card} ending with {cardno}" },
|
||||
{
|
||||
card: "Mastercard",
|
||||
cardno: "2202",
|
||||
}
|
||||
)}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
// const { email, hotel, stay, summary } = tempConfirmationData
|
||||
|
||||
// const confirmationNumber = useMemo(() => {
|
||||
// if (typeof window === "undefined") return ""
|
||||
|
||||
// const storedConfirmationNumber = sessionStorage.getItem(
|
||||
// BOOKING_CONFIRMATION_NUMBER
|
||||
// )
|
||||
// TODO: cleanup stored values
|
||||
// sessionStorage.removeItem(BOOKING_CONFIRMATION_NUMBER)
|
||||
// return storedConfirmationNumber
|
||||
// }, [])
|
||||
|
||||
// const bookingStatus = useHandleBookingStatus(
|
||||
// confirmationNumber,
|
||||
// BookingStatusEnum.BookingCompleted,
|
||||
// maxRetries,
|
||||
// retryInterval
|
||||
// )
|
||||
|
||||
// if (
|
||||
// confirmationNumber === null ||
|
||||
// bookingStatus.isError ||
|
||||
// (bookingStatus.isFetched && !bookingStatus.data)
|
||||
// ) {
|
||||
// // TODO: handle error
|
||||
// throw new Error("Error fetching booking status")
|
||||
// }
|
||||
|
||||
// if (
|
||||
// bookingStatus.data?.reservationStatus === BookingStatusEnum.BookingCompleted
|
||||
// ) {
|
||||
// return <LoadingSpinner />
|
||||
Reference in New Issue
Block a user