scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/confirmation-page-initial-multiroom-display (pull request #1334)

Browse Source 
feat: initial display of linkedReservations on confirmation page

* feat: initial display of linkedReservations on confirmation page

* refactor: move notFound


Approved-by: Tobias Johansson
This commit is contained in:
Arvid Norlin
2025-02-14 10:05:58 +00:00
parent 3044bc87d1
commit f5e0214313
9 changed files with 162 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/HotelReservation/BookingConfirmation/Confirmation/index.tsx
View File

@@ -43,7 +43,11 @@ export default function Confirmation({
})}
/>
)}
<Rooms booking={booking} room={room} />
<Rooms
booking={booking}
mainRoom={room}
linkedReservations={booking.linkedReservations}
/>
<PaymentDetails booking={booking} />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={hotel} />

98
components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx Normal file
View File

@@ -0,0 +1,98 @@
"use client "
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import styles from "./linkedReservation.module.css"
import type { LinkedReservationSchema } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
interface LinkedReservationProps {
linkedReservation: LinkedReservationSchema
roomIndex: number
}
export function LinkedReservation({
linkedReservation,
roomIndex,
}: LinkedReservationProps) {
const intl = useIntl()
const lang = useLang()
const {
checkinDate,
checkoutDate,
confirmationNumber,
roomTypeCode,
adults,
children,
} = linkedReservation
const fromDate = dt(checkinDate).locale(lang)
const toDate = dt(checkoutDate).locale(lang)
return (
<div className={styles.reservation}>
<Subtitle color="uiTextHighContrast" type="two">
{intl.formatMessage(
{
id: "Room {roomIndex}",
},
{
roomIndex: roomIndex + 2,
}
)}
</Subtitle>
<ul className={styles.details}>
<li className={styles.listItem}>
<Body color="uiTextPlaceholder">
{intl.formatMessage({ id: "Booking number" })}
</Body>
<Body color="uiTextHighContrast">{confirmationNumber}</Body>
</li>
<li className={styles.listItem}>
<Body color="uiTextPlaceholder">
{intl.formatMessage({ id: "Check-in" })}
</Body>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "{checkInDate} from {checkInTime}" },
{
checkInDate: fromDate.format("ddd, D MMM"),
checkInTime: fromDate.format("HH:mm"),
}
)}
</Body>
</li>
<li className={styles.listItem}>
<Body color="uiTextPlaceholder">
{intl.formatMessage({ id: "Check-out" })}
</Body>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "{checkOutDate} from {checkOutTime}" },
{
checkOutDate: toDate.format("ddd, D MMM"),
checkOutTime: toDate.format("HH:mm"),
}
)}
</Body>
</li>
<li className={styles.listItem}>
<Body color="uiTextPlaceholder">
{intl.formatMessage({ id: "Adults" })}
</Body>
<Body color="uiTextHighContrast">{adults}</Body>
</li>
<li className={styles.listItem}>
<Body color="uiTextPlaceholder">
{intl.formatMessage({ id: "Children" })}
</Body>
<Body color="uiTextHighContrast">{children}</Body>
</li>
</ul>
</div>
)
}

19
components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css Normal file
View File

@@ -0,0 +1,19 @@
.reservation {
background-color: var(--Base-Background-Primary-Normal);
border-radius: var(--Corner-radius-Large);
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x3)
var(--Spacing-x2);
}
.details {
display: grid;
gap: var(--Spacing-x-half) var(--Spacing-x3);
list-style: none;
}
.listItem {
display: flex;
gap: var(--Spacing-x1);
}

22
components/HotelReservation/BookingConfirmation/Rooms/index.tsx
View File

@@ -1,7 +1,6 @@
"use client"
import { notFound } from "next/navigation"
import { LinkedReservation } from "./LinkedReservation"
import Room from "./Room"
import styles from "./rooms.module.css"
@@ -10,14 +9,23 @@ import type { BookingConfirmationRoomsProps } from "@/types/components/hotelRese
export default function Rooms({
booking,
room,
mainRoom,
linkedReservations,
}: BookingConfirmationRoomsProps) {
if (!room) {
return notFound()
}
return (
<section className={styles.rooms}>
<Room booking={booking} img={room.images[0]} roomName={room.name} />
<Room
booking={booking}
img={mainRoom.images[0]}
roomName={mainRoom.name}
/>
{linkedReservations?.map((reservation, idx) => (
<LinkedReservation
key={reservation.confirmationNumber}
linkedReservation={reservation}
roomIndex={idx}
/>
))}
</section>
)
}

5
components/HotelReservation/BookingConfirmation/index.tsx
View File

@@ -1,4 +1,5 @@
import { differenceInCalendarDays, format, isWeekend } from "date-fns"
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
@@ -24,7 +25,9 @@ export default async function BookingConfirmation({
const lang = getLang()
const { booking, hotel, room } =
await getBookingConfirmation(confirmationNumber)
if (!room) {
return notFound()
}
const arrivalDate = new Date(booking.checkInDate)
const departureDate = new Date(booking.checkOutDate)

2
components/HotelReservation/MyStay/MyStay/index.tsx
View File

@@ -19,7 +19,7 @@ export async function MyStay({ reservationId }: { reservationId: string }) {
<main className={styles.main}>
<Header booking={booking} hotel={hotel} />
<BookingActions />
<Rooms booking={booking} room={room} />
{room && <Rooms booking={booking} mainRoom={room} />}
<Ancillaries />
<Divider color="primaryLightSubtle" />
<PaymentDetails booking={booking} />