feat(SW-2116): RefId instead of confirmationNumber
This commit is contained in:
Arvid Norlin
committed by
Michael Zetterberg
Michael Zetterberg
parent
7eeb0bbcac
commit
74d37dad93
@@ -0,0 +1 @@
|
||||
export { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"
|
||||
@@ -0,0 +1,45 @@
|
||||
.main {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
display: flex;
|
||||
padding: var(--Spacing-x5) var(--Spacing-x4);
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.addresses {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.rightColumn {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.addressMargin {
|
||||
margin-top: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.tertiary {
|
||||
color: var(--Text-Tertiary);
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: var(--Border-Divider-Accent);
|
||||
}
|
||||
|
||||
.form {
|
||||
max-width: 640px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: var(--Spacing-x5) 0;
|
||||
}
|
||||
|
||||
.logIn {
|
||||
padding: var(--Spacing-x9) var(--Spacing-x2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
align-items: center;
|
||||
color: var(--Scandic-Grey-100);
|
||||
}
|
||||
@@ -1,20 +1,177 @@
|
||||
import { cookies } from "next/headers"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { MyStaySkeleton } from "@/components/HotelReservation/MyStay/myStaySkeleton"
|
||||
import { Receipt } from "@/components/HotelReservation/MyStay/Receipt"
|
||||
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
import {
|
||||
getAncillaryPackages,
|
||||
getBookingConfirmation,
|
||||
getProfileSafely,
|
||||
} from "@/lib/trpc/memoizedRequests"
|
||||
|
||||
import AdditionalInfoForm from "@/components/HotelReservation/FindMyBooking/AdditionalInfoForm"
|
||||
import accessBooking, {
|
||||
ACCESS_GRANTED,
|
||||
ERROR_BAD_REQUEST,
|
||||
ERROR_UNAUTHORIZED,
|
||||
} from "@/components/HotelReservation/MyStay/accessBooking"
|
||||
import Footer from "@/components/HotelReservation/MyStay/Receipt/Footer"
|
||||
import Specification from "@/components/HotelReservation/MyStay/Receipt/Specification"
|
||||
import Total from "@/components/HotelReservation/MyStay/Receipt/Total"
|
||||
import { getIntl } from "@/i18n"
|
||||
import { parseRefId } from "@/utils/refId"
|
||||
|
||||
import styles from "./page.module.css"
|
||||
|
||||
import { CurrencyEnum } from "@/types/enums/currency"
|
||||
import type { LangParams, PageArgs } from "@/types/params"
|
||||
|
||||
export default async function ReceiptPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: PageArgs<LangParams, { RefId?: string }>) {
|
||||
if (!searchParams.RefId) {
|
||||
const refId = searchParams.RefId
|
||||
|
||||
if (!refId) {
|
||||
notFound()
|
||||
}
|
||||
return (
|
||||
<Suspense fallback={<MyStaySkeleton />}>
|
||||
<Receipt refId={searchParams.RefId} />
|
||||
</Suspense>
|
||||
|
||||
const { confirmationNumber, lastName } = parseRefId(refId)
|
||||
|
||||
const bookingConfirmation = await getBookingConfirmation(
|
||||
confirmationNumber,
|
||||
params.lang
|
||||
)
|
||||
|
||||
if (!bookingConfirmation) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const { booking, hotelData, room } = bookingConfirmation
|
||||
const { hotel } = hotelData
|
||||
|
||||
const intl = await getIntl()
|
||||
const user = await getProfileSafely()
|
||||
const bv = cookies().get("bv")?.value
|
||||
|
||||
const access = accessBooking(booking.guest, lastName, user, bv)
|
||||
|
||||
if (access === ACCESS_GRANTED) {
|
||||
const ancillaryPackages = await getAncillaryPackages({
|
||||
fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
|
||||
hotelId: hotel.operaId,
|
||||
toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
|
||||
})
|
||||
|
||||
const currency =
|
||||
booking.currencyCode !== CurrencyEnum.POINTS
|
||||
? booking.currencyCode
|
||||
: (booking.ancillaries.find((a) => a.currency !== CurrencyEnum.POINTS)
|
||||
?.currency ??
|
||||
booking.packages.find((p) => p.currency !== CurrencyEnum.POINTS)
|
||||
?.currency)
|
||||
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div>
|
||||
<ScandicLogoIcon width="89px" height="19px" color="Icon/Accent" />
|
||||
<div className={styles.addresses}>
|
||||
<div>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div>{hotel.name}</div>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div className={`${styles.tertiary} ${styles.addressMargin}`}>
|
||||
{hotel.contactInformation.email}
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div className={styles.tertiary}>
|
||||
{hotel.contactInformation.phoneNumber}
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.rightColumn}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
|
||||
</Typography>
|
||||
{booking.guest.membershipNumber && (
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
<div>{`${intl.formatMessage({
|
||||
defaultMessage: "Member",
|
||||
})} ${booking.guest.membershipNumber}`}</div>
|
||||
</Typography>
|
||||
)}
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div className={`${styles.tertiary} ${styles.addressMargin}`}>
|
||||
{booking.guest.email}
|
||||
</div>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<div className={styles.tertiary}>
|
||||
{booking.guest.phoneNumber}
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Total booking={booking} currency={currency} />
|
||||
<Specification
|
||||
ancillaryPackages={ancillaryPackages}
|
||||
booking={booking}
|
||||
currency={currency}
|
||||
/>
|
||||
|
||||
<hr className={styles.divider} />
|
||||
|
||||
<Footer booking={booking} room={room} />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
if (access === ERROR_BAD_REQUEST) {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.form}>
|
||||
<AdditionalInfoForm refId={refId} lastName={lastName} />
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
if (access === ERROR_UNAUTHORIZED) {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<div className={styles.logIn}>
|
||||
<Typography variant="Title/md">
|
||||
<h1>
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "You need to be logged in to view your booking",
|
||||
})}
|
||||
</h1>
|
||||
</Typography>
|
||||
<Typography variant="Body/Lead text">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage:
|
||||
"And you need to be logged in with the same member account that made the booking.",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
return notFound()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user