From f5e0214313501ca63223551d71487a63ca5b8f40 Mon Sep 17 00:00:00 2001 From: Arvid Norlin Date: Fri, 14 Feb 2025 10:05:58 +0000 Subject: [PATCH] Merged in feat/confirmation-page-initial-multiroom-display (pull request #1334) feat: initial display of linkedReservations on confirmation page * feat: initial display of linkedReservations on confirmation page * refactor: move notFound Approved-by: Tobias Johansson --- .../Confirmation/index.tsx | 6 +- .../Rooms/LinkedReservation/index.tsx | 98 +++++++++++++++++++ .../linkedReservation.module.css | 19 ++++ .../BookingConfirmation/Rooms/index.tsx | 22 +++-- .../BookingConfirmation/index.tsx | 5 +- .../HotelReservation/MyStay/MyStay/index.tsx | 2 +- server/routers/booking/output.ts | 2 +- .../bookingConfirmation.ts | 7 +- .../bookingConfirmation/rooms.ts | 14 ++- 9 files changed, 162 insertions(+), 13 deletions(-) create mode 100644 components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx create mode 100644 components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css diff --git a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx index 8bbdba39e..dffeb5b81 100644 --- a/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx @@ -43,7 +43,11 @@ export default function Confirmation({ })} /> )} - + diff --git a/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx new file mode 100644 index 000000000..55a1b1d64 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx @@ -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 ( +
+ + {intl.formatMessage( + { + id: "Room {roomIndex}", + }, + { + roomIndex: roomIndex + 2, + } + )} + +
    +
  • + + {intl.formatMessage({ id: "Booking number" })} + + {confirmationNumber} +
    • +
  • + + {intl.formatMessage({ id: "Check-in" })} + + + {intl.formatMessage( + { id: "{checkInDate} from {checkInTime}" }, + { + checkInDate: fromDate.format("ddd, D MMM"), + checkInTime: fromDate.format("HH:mm"), + } + )} + +
    • +
  • + + {intl.formatMessage({ id: "Check-out" })} + + + {intl.formatMessage( + { id: "{checkOutDate} from {checkOutTime}" }, + { + checkOutDate: toDate.format("ddd, D MMM"), + checkOutTime: toDate.format("HH:mm"), + } + )} + +
    • +
  • + + {intl.formatMessage({ id: "Adults" })} + + {adults} +
    • +
  • + + {intl.formatMessage({ id: "Children" })} + + {children} +
    • +
+
+ ) +} diff --git a/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css new file mode 100644 index 000000000..b97073c61 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/linkedReservation.module.css @@ -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); +} diff --git a/components/HotelReservation/BookingConfirmation/Rooms/index.tsx b/components/HotelReservation/BookingConfirmation/Rooms/index.tsx index 19954aec7..c6ee6e745 100644 --- a/components/HotelReservation/BookingConfirmation/Rooms/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Rooms/index.tsx @@ -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 (
- + + {linkedReservations?.map((reservation, idx) => ( + + ))}
) } diff --git a/components/HotelReservation/BookingConfirmation/index.tsx b/components/HotelReservation/BookingConfirmation/index.tsx index e2b3cab82..bc9337829 100644 --- a/components/HotelReservation/BookingConfirmation/index.tsx +++ b/components/HotelReservation/BookingConfirmation/index.tsx @@ -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) diff --git a/components/HotelReservation/MyStay/MyStay/index.tsx b/components/HotelReservation/MyStay/MyStay/index.tsx index 93d95df42..8471784de 100644 --- a/components/HotelReservation/MyStay/MyStay/index.tsx +++ b/components/HotelReservation/MyStay/MyStay/index.tsx @@ -19,7 +19,7 @@ export async function MyStay({ reservationId }: { reservationId: string }) {
- + {room && } diff --git a/server/routers/booking/output.ts b/server/routers/booking/output.ts index a0845d0c2..b5a23fb86 100644 --- a/server/routers/booking/output.ts +++ b/server/routers/booking/output.ts @@ -124,7 +124,7 @@ const rateDefinitionSchema = z.object({ title: z.string().nullable().default(""), }) -const linkedReservationsSchema = z.object({ +export const linkedReservationsSchema = z.object({ confirmationNumber: z.string().default(""), hotelId: z.string().default(""), checkinDate: z.string(), diff --git a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts index 73007a82d..e1817b3ee 100644 --- a/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts +++ b/types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts @@ -1,7 +1,12 @@ +import type { Room } from "@/types/hotel" import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation" export interface BookingConfirmationProps { confirmationNumber: string } -export interface ConfirmationProps extends BookingConfirmation {} +export interface ConfirmationProps extends BookingConfirmation { + room: Room & { + bedType: Room["roomTypes"][number] + } +} diff --git a/types/components/hotelReservation/bookingConfirmation/rooms.ts b/types/components/hotelReservation/bookingConfirmation/rooms.ts index 473bd18be..db49e6d3b 100644 --- a/types/components/hotelReservation/bookingConfirmation/rooms.ts +++ b/types/components/hotelReservation/bookingConfirmation/rooms.ts @@ -1,4 +1,16 @@ +import type { z } from "zod" + +import type { Room } from "@/types/hotel" import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation" +import type { linkedReservationsSchema } from "@/server/routers/booking/output" + +export interface LinkedReservationSchema + extends z.output {} export interface BookingConfirmationRoomsProps - extends Pick {} + extends Pick { + mainRoom: Room & { + bedType: Room["roomTypes"][number] + } + linkedReservations?: LinkedReservationSchema[] +}