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

Merged master into fix/header-skeletons

Browse Source
This commit is contained in:
Linus Flood
2024-12-05 13:24:13 +00:00
parent 6047c5f5e8 ef1b17adfe
commit 6c8634ed10
54 changed files with 480 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.tsx
View File

@@ -1,20 +1,8 @@
import { Suspense } from "react"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import LoadingSpinner from "@/components/LoadingSpinner"
import Divider from "@/components/TempDesignSystem/Divider"
import BookingConfirmation from "@/components/HotelReservation/BookingConfirmation"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import type { LangParams, PageArgs } from "@/types/params"
export default async function BookingConfirmationPage({
@@ -22,29 +10,12 @@ export default async function BookingConfirmationPage({
searchParams,
}: PageArgs<LangParams, { confirmationNumber: string }>) {
setLang(params.lang)
void getBookingConfirmation(searchParams.confirmationNumber)
const bookingConfirmationPromise = getBookingConfirmation(
searchParams.confirmationNumber
)
return (
<main className={styles.main}>
<Suspense fallback={<LoadingSpinner fullPage />}>
<Header confirmationNumber={searchParams.confirmationNumber} />
<div className={styles.booking}>
<Rooms confirmationNumber={searchParams.confirmationNumber} />
<PaymentDetails
confirmationNumber={searchParams.confirmationNumber}
/>
<Divider color="primaryLightSubtle" />
<HotelDetails confirmationNumber={searchParams.confirmationNumber} />
<Promos />
<div className={styles.mobileReceipt}>
<Receipt confirmationNumber={searchParams.confirmationNumber} />
</div>
</div>
<aside className={styles.aside}>
<SidePanel variant="receipt">
<Receipt confirmationNumber={searchParams.confirmationNumber} />
</SidePanel>
</aside>
</Suspense>
</main>
<BookingConfirmation
bookingConfirmationPromise={bookingConfirmationPromise}
/>
)
}

80
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx Normal file
View File

@@ -0,0 +1,80 @@
import { meetingsAndConferences } from "@/constants/routes/hotelPageParams"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import SidePeek from "@/components/TempDesignSystem/SidePeek"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import styles from "./meetingsAndConferences.module.css"
import type { MeetingsAndConferencesSidePeekProps } from "@/types/components/hotelPage/sidepeek/meetingsAndConferences"
export default async function MeetingsAndConferencesSidePeek({
meetingFacilities,
descriptions,
link,
}: MeetingsAndConferencesSidePeekProps) {
const lang = getLang()
const intl = await getIntl()
const fallbackAlt = intl.formatMessage({ id: "Creative spaces for meetings" })
const primaryImage = meetingFacilities?.heroImages[0]?.imageSizes.medium
const primaryAltText =
meetingFacilities?.heroImages[0]?.metaData.altText || fallbackAlt
const secondaryImage = meetingFacilities?.heroImages[1]?.imageSizes.medium
const secondaryAltText =
meetingFacilities?.heroImages[1]?.metaData.altText || fallbackAlt
return (
<SidePeek
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
<div className={styles.wrapper}>
<Subtitle color="burgundy" asChild>
<Title level="h3">
{intl.formatMessage({ id: "Creative spaces for meetings" })}
</Title>
</Subtitle>
{primaryImage && (
<div className={secondaryImage ? styles.imageContainer : ""}>
<Image
src={primaryImage}
alt={primaryAltText}
height={300}
width={200}
className={styles.image}
/>
{secondaryImage && (
<Image
src={secondaryImage}
alt={secondaryAltText}
height={300}
width={200}
className={`${styles.image} ${styles.secondaryImage}`}
/>
)}
</div>
)}
{descriptions?.medium && (
<Body color="uiTextHighContrast">{descriptions.medium}</Body>
)}
{link && (
<div className={styles.buttonContainer}>
<Button fullWidth theme="base" intent="secondary" asChild>
<Link href={link} weight="bold" color="burgundy">
{intl.formatMessage({ id: "About meetings & conferences" })}
</Link>
</Button>
</div>
)}
</div>
</SidePeek>
)
}

44
components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css Normal file
View File

@@ -0,0 +1,44 @@
.wrapper {
display: grid;
gap: var(--Spacing-x3);
margin-bottom: calc(
var(--Spacing-x4) * 2 + 80px
); /* Creates space between the wrapper and buttonContainer */
}
.image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
}
.secondaryImage {
display: none;
}
.buttonContainer {
background-color: var(--Base-Background-Primary-Normal);
border-top: 1px solid var(--Base-Border-Subtle);
padding: var(--Spacing-x4) var(--Spacing-x2);
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
@media screen and (min-width: 768px) {
.imageContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x2);
}
.image {
height: 240px;
}
.secondaryImage {
display: block;
}
}

1
components/ContentType/HotelPage/SidePeeks/index.ts
View File

@@ -1,5 +1,6 @@
export { default as AboutTheHotelSidePeek } from "./AboutTheHotel"
export { default as ActivitiesSidePeek } from "./Activities"
export { default as AmenitiesSidePeek } from "./Amenities"
export { default as MeetingsAndConferencesSidePeek } from "./MeetingsAndConferences"
export { default as RoomSidePeek } from "./Room"
export { default as WellnessAndExerciseSidePeek } from "./WellnessAndExercise"

17
components/ContentType/HotelPage/index.tsx
View File

@@ -1,9 +1,6 @@
import { notFound } from "next/navigation"
import {
meetingsAndConferences,
restaurantAndBar,
} from "@/constants/routes/hotelPageParams"
import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
import { env } from "@/env/server"
import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
@@ -30,6 +27,7 @@ import {
AboutTheHotelSidePeek,
ActivitiesSidePeek,
AmenitiesSidePeek,
MeetingsAndConferencesSidePeek,
RoomSidePeek,
WellnessAndExerciseSidePeek,
} from "./SidePeeks"
@@ -203,13 +201,10 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
{activitiesCard && (
<ActivitiesSidePeek contentPage={activitiesCard.contentPage} />
)}
<SidePeek
contentKey={meetingsAndConferences[lang]}
title={intl.formatMessage({ id: "Meetings & Conferences" })}
>
{/* TODO */}
Meetings & Conferences
</SidePeek>
<MeetingsAndConferencesSidePeek
meetingFacilities={conferencesAndMeetings}
descriptions={hotelContent.texts.meetingDescription}
/>
{roomCategories.map((room) => (
<RoomSidePeek key={room.name} room={room} />
))}

8
components/HotelReservation/BookingConfirmation/Header/Actions/DownloadInvoice.tsx
View File

@@ -1,14 +1,18 @@
"use client"
import { useIntl } from "react-intl"
import { useReactToPrint } from "react-to-print"
import { DownloadIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
export default function DownloadInvoice() {
import type { DownloadInvoiceProps } from "@/types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice"
export default function DownloadInvoice({ mainRef }: DownloadInvoiceProps) {
const intl = useIntl()
const reactToPrintFn = useReactToPrint({ contentRef: mainRef })
function downloadBooking() {
window.print()
reactToPrintFn()
}
return (

19
components/HotelReservation/BookingConfirmation/Header/index.tsx
View File

@@ -1,9 +1,9 @@
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
"use client"
import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import AddToCalendar from "./Actions/AddToCalendar"
import DownloadInvoice from "./Actions/DownloadInvoice"
@@ -14,13 +14,14 @@ import styles from "./header.module.css"
import type { EventAttributes } from "ics"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationHeaderProps } from "@/types/components/hotelReservation/bookingConfirmation/header"
export default async function Header({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
export default function Header({
booking,
hotel,
mainRef,
}: BookingConfirmationHeaderProps) {
const intl = useIntl()
const text = intl.formatMessage<React.ReactNode>(
{ id: "booking.confirmation.text" },
@@ -70,7 +71,7 @@ export default async function Header({
hotelName={hotel.name}
/>
<ManageBooking />
<DownloadInvoice />
<DownloadInvoice mainRef={mainRef} />
</div>
</header>
)

15
components/HotelReservation/BookingConfirmation/HotelDetails/index.tsx
View File

@@ -1,20 +1,19 @@
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
"use client"
import { useIntl } from "react-intl"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { Toast } from "@/components/TempDesignSystem/Toasts"
import { getIntl } from "@/i18n"
import styles from "./hotelDetails.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationHotelDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/hotelDetails"
export default async function HotelDetails({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { hotel } = await getBookingConfirmation(confirmationNumber)
export default function HotelDetails({
hotel,
}: BookingConfirmationHotelDetailsProps) {
const intl = useIntl()
return (
<div className={styles.container}>
<div className={styles.details}>

20
components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx
View File

@@ -1,23 +1,23 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { CreditCardAddIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import useLang from "@/hooks/useLang"
import styles from "./paymentDetails.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationPaymentDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/paymentDetails"
export default async function PaymentDetails({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const lang = getLang()
const { booking } = await getBookingConfirmation(confirmationNumber)
export default function PaymentDetails({
booking,
}: BookingConfirmationPaymentDetailsProps) {
const intl = useIntl()
const lang = useLang()
return (
<div className={styles.details}>
<Subtitle color="uiTextHighContrast" type="two">

7
components/HotelReservation/BookingConfirmation/Promos/index.tsx
View File

@@ -1,11 +1,12 @@
import { getIntl } from "@/i18n"
"use client"
import { useIntl } from "react-intl"
import Promo from "./Promo"
import styles from "./promos.module.css"
export default async function Promos() {
const intl = await getIntl()
export default function Promos() {
const intl = useIntl()
return (
<div className={styles.promos}>
<Promo

29
components/HotelReservation/BookingConfirmation/Receipt/index.tsx
View File

@@ -1,6 +1,6 @@
"use client"
import { notFound } from "next/navigation"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { useIntl } from "react-intl"
import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
@@ -9,21 +9,20 @@ 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 { getIntl } from "@/i18n"
import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
import styles from "./receipt.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default async function Receipt({
confirmationNumber,
}: BookingConfirmationProps) {
const intl = await getIntl()
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
if (!roomAndBed) {
export default function Receipt({
booking,
hotel,
room,
}: BookingConfirmationReceiptProps) {
const intl = useIntl()
if (!room) {
return notFound()
}
@@ -38,7 +37,7 @@ export default async function Receipt({
<Subtitle type="two">{intl.formatMessage({ id: "Summary" })}</Subtitle>
<article className={styles.room}>
<header className={styles.roomHeader}>
<Body color="uiTextHighContrast">{roomAndBed.name}</Body>
<Body color="uiTextHighContrast">{room.name}</Body>
{booking.rateDefinition.isMemberRate ? (
<div className={styles.memberPrice}>
<Body color="uiTextPlaceholder">
@@ -82,9 +81,7 @@ export default async function Receipt({
</Link>
</header>
<div className={styles.entry}>
<Body color="uiTextHighContrast">
{roomAndBed.bedType.description}
</Body>
<Body color="uiTextHighContrast">{room.bedType.description}</Body>
<Body color="uiTextHighContrast">
{intl.formatNumber(0, {
currency: booking.currencyCode,

14
components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx
View File

@@ -1,3 +1,6 @@
"use client"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import {
@@ -10,16 +13,15 @@ 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 { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import useLang from "@/hooks/useLang"
import styles from "./room.module.css"
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/room"
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
export default async function Room({ booking, img, roomName }: RoomProps) {
const intl = await getIntl()
const lang = getLang()
export default function Room({ booking, img, roomName }: RoomProps) {
const intl = useIntl()
const lang = useLang()
const fromDate = dt(booking.checkInDate).locale(lang)
const toDate = dt(booking.checkOutDate).locale(lang)

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

@@ -1,30 +1,23 @@
"use client"
import { notFound } from "next/navigation"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import { getBookedHotelRoom } from "@/utils/getBookedHotelRoom"
import Room from "./Room"
import styles from "./rooms.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import type { BookingConfirmationRoomsProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms"
export default async function Rooms({
confirmationNumber,
}: BookingConfirmationProps) {
const { booking, hotel } = await getBookingConfirmation(confirmationNumber)
const roomAndBed = getBookedHotelRoom(hotel, booking.roomTypeCode ?? "")
if (!roomAndBed) {
export default function Rooms({
booking,
room,
}: BookingConfirmationRoomsProps) {
if (!room) {
return notFound()
}
return (
<section className={styles.rooms}>
<Room
booking={booking}
img={roomAndBed.images[0]}
roomName={roomAndBed.name}
/>
<Room booking={booking} img={room.images[0]} roomName={room.name} />
</section>
)
}

2
app/[lang]/(live)/(public)/hotelreservation/(confirmation)/booking-confirmation/page.module.css → components/HotelReservation/BookingConfirmation/confirmation.module.css
View File

@@ -39,4 +39,4 @@
display: grid;
grid-area: receipt;
}
}
}

57
components/HotelReservation/BookingConfirmation/index.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client"
import { use, useRef } from "react"
import Header from "@/components/HotelReservation/BookingConfirmation/Header"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./confirmation.module.css"
import type { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default function BookingConfirmation({
bookingConfirmationPromise,
}: BookingConfirmationProps) {
const bookingConfirmation = use(bookingConfirmationPromise)
const mainRef = useRef<HTMLElement | null>(null)
return (
<main className={styles.main} ref={mainRef}>
<Header
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
mainRef={mainRef}
/>
<div className={styles.booking}>
<Rooms
booking={bookingConfirmation.booking}
room={bookingConfirmation.room}
/>
<PaymentDetails booking={bookingConfirmation.booking} />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={bookingConfirmation.hotel} />
<Promos />
<div className={styles.mobileReceipt}>
<Receipt
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
room={bookingConfirmation.room}
/>
</div>
</div>
<aside className={styles.aside}>
<SidePanel variant="receipt">
<Receipt
booking={bookingConfirmation.booking}
hotel={bookingConfirmation.hotel}
room={bookingConfirmation.room}
/>
</SidePanel>
</aside>
</main>
)
}

25
components/HotelReservation/Contact/contact.module.css
View File

@@ -4,6 +4,7 @@
grid-template-rows: auto;
gap: var(--Spacing-x2);
font-family: var(--typography-Body-Regular-fontFamily);
margin-bottom: var(--Spacing-x3);
}
.address,
@@ -20,6 +21,7 @@
list-style-type: none;
display: flex;
flex-direction: column;
min-width: 0;
}
.soMeIcons {
@@ -28,6 +30,19 @@
}
.ecoLabel {
width: 38px;
height: auto;
}
.ecoLabel img {
width: 100%;
height: auto;
flex-shrink: 0;
grid-column: 1 / 3;
grid-row: 4 / 4;
}
.ecoContainer {
display: flex;
align-items: center;
column-gap: var(--Spacing-x-one-and-half);
@@ -38,10 +53,6 @@
margin-bottom: var(--Spacing-x1);
}
.ecoLabel img {
flex-shrink: 0;
}
.ecoLabelText {
display: flex;
color: var(--UI-Text-Medium-contrast);
@@ -49,8 +60,8 @@
justify-content: center;
}
.googleMaps {
text-decoration: none;
.link {
text-decoration: underline;
font-family: var(--typography-Body-Regular-fontFamily);
color: var(--Base-Text-Medium-contrast);
color: var(--Base-Text-High-contrast);
}

47
components/HotelReservation/Contact/index.tsx
View File

@@ -24,31 +24,27 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold">
{intl.formatMessage({ id: "Address" })}
</Body>
<Body>
{`${hotel.address.streetAddress}, ${hotel.address.city}`}
</Body>
<Body>{`${hotel.address.streetAddress}, `}</Body>
<Body>{hotel.address.city}</Body>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({ id: "Driving directions" })}
</Body>
<a
<Link
href={`https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`}
className={styles.googleMaps}
target="_blank"
>
Google Maps
</a>
<span className={styles.link}>Google Maps</span>
</Link>
</li>
<li>
<Body textTransform="bold">
{intl.formatMessage({ id: "Contact us" })}
</Body>
<Link
href={`tel:${hotel.contactInformation.phoneNumber}`}
color="peach80"
>
{hotel.contactInformation.phoneNumber}
<Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
<span className={styles.link}>
{hotel.contactInformation.phoneNumber}
</span>
</Link>
</li>
<li>
@@ -76,23 +72,24 @@ export default function Contact({ hotel }: ContactProps) {
<Body textTransform="bold">
{intl.formatMessage({ id: "Email" })}
</Body>
<Link
href={`mailto:${hotel.contactInformation.email}`}
color="peach80"
>
{hotel.contactInformation.email}
<Link href={`mailto:${hotel.contactInformation.email}`}>
<span className={styles.link}>
{hotel.contactInformation.email}
</span>
</Link>
</li>
</ul>
</address>
{hotel.hotelFacts.ecoLabels?.nordicEcoLabel ? (
<div className={styles.ecoLabel}>
<Image
height={38}
width={43}
alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
<div className={styles.ecoContainer}>
<div className={styles.ecoLabel}>
<Image
height={38}
width={38}
alt={intl.formatMessage({ id: "Nordic Swan Ecolabel" })}
src={`/_static/img/icons/swan-eco/swan_eco_dark_${lang}.png`}
/>
</div>
<div className={styles.ecoLabelText}>
<span>{intl.formatMessage({ id: "Nordic Swan Ecolabel" })}</span>
<span>

7
components/ImageGallery/index.tsx
View File

@@ -6,7 +6,8 @@ import { useIntl } from "react-intl"
import { GalleryIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Caption from "../TempDesignSystem/Text/Caption"
import styles from "./imageGallery.module.css"
@@ -44,9 +45,9 @@ function ImageGallery({
/>
<div className={styles.imageCount}>
<GalleryIcon color="white" />
<Footnote color="white" type="label">
<Caption color="white" type="label">
{images.length}
</Footnote>
</Caption>
</div>
</div>
<Lightbox

1
components/Lightbox/Lightbox.module.css
View File

@@ -122,6 +122,7 @@
grid-template-columns: 1fr 1fr;
gap: var(--Spacing-x1);
max-height: none;
padding: var(--Spacing-x3) 0;
}
.thumbnailContainer {

1
components/SidePeeks/HotelSidePeek/Accordions/Accessibility.tsx
View File

@@ -14,6 +14,7 @@ export default function Accessibility({
<AccordionItem
title={intl.formatMessage({ id: "Accessibility" })}
icon={IconName.Accessibility}
variant="sidepeek"
>
<Body>{accessibilityElevatorPitchText}</Body>
</AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/CheckInCheckOut.tsx
View File

@@ -13,6 +13,7 @@ export default function CheckinCheckOut({ checkin }: CheckInCheckOutProps) {
<AccordionItem
title={intl.formatMessage({ id: "Check-in/Check-out" })}
icon={IconName.Calendar}
variant="sidepeek"
>
<Body textTransform="bold">{intl.formatMessage({ id: "Hours" })}</Body>
<Body>{`${intl.formatMessage({ id: "Check in from" })}: ${checkin.checkInTime}`}</Body>

1
components/SidePeeks/HotelSidePeek/Accordions/MeetingsAndConferences.tsx
View File

@@ -14,6 +14,7 @@ export default function MeetingsAndConferences({
<AccordionItem
title={intl.formatMessage({ id: "Meetings & Conferences" })}
icon={IconName.Business}
variant="sidepeek"
>
<Body>{meetingDescription}</Body>
</AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/Parking.tsx
View File

@@ -16,6 +16,7 @@ export default function Parking({ parking }: ParkingProps) {
title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking}
className={styles.parking}
variant="sidepeek"
>
{parking.map((p) => (
<div key={p.name}>

1
components/SidePeeks/HotelSidePeek/Accordions/Restaurant.tsx
View File

@@ -15,6 +15,7 @@ export default function Restaurant({
<AccordionItem
title={intl.formatMessage({ id: "Restaurant" }, { count: 1 })}
icon={IconName.Restaurant}
variant="sidepeek"
>
<Body>{restaurantsContentDescriptionMedium}</Body>
</AccordionItem>

1
components/SidePeeks/HotelSidePeek/Accordions/sidePeekAccordion.module.css
View File

@@ -10,6 +10,7 @@
align-items: center;
gap: var(--Spacing-x1);
padding-left: var(--Spacing-x1);
justify-items: flex-start;
}
.list li svg {

23
components/SidePeeks/HotelSidePeek/hotelSidePeek.module.css
View File

@@ -9,13 +9,24 @@
gap: var(--Spacing-x2);
}
.amenity {
font-family: var(--typography-Body-Regular-fontFamily);
border-bottom: 1px solid var(--Base-Border-Subtle);
/* padding set to align with AccordionItem which has a different composition */
padding: calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half))
var(--Spacing-x3);
.content:last-child {
gap: 0;
}
.content > p {
margin-bottom: var(--Spacing-x-one-and-half);
}
.content > ul > li:first-child {
border-top: 1px solid var(--Base-Border-Subtle);
}
.amenity > p {
border-top: 1px solid var(--Base-Border-Subtle);
padding: calc(var(--Spacing-x-one-and-half) + var(--Spacing-x1))
var(--Spacing-x1);
display: flex;
align-items: center;
gap: var(--Spacing-x1);
}

19
components/SidePeeks/HotelSidePeek/index.tsx
View File

@@ -71,24 +71,21 @@ export default function HotelSidePeek({
}
/>
)}
</Accordion>
<div className={styles.amenity}>
{amenitiesList.map((amenity) => {
const Icon = mapFacilityToIcon(amenity.id)
return (
<div key={amenity.id} className={styles.amenity}>
<Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
{Icon && (
<Icon width={24} height={24} color="uiTextMediumContrast" />
<Icon width={24} height={24} color="uiTextHighContrast" />
)}
<Body
asChild
className={!Icon ? styles.noIcon : undefined}
color="uiTextMediumContrast"
>
<span>{amenity.name}</span>
</Body>
</div>
{amenity.name}
</Subtitle>
)
})}
</Accordion>
</div>
{/* TODO: handle linking to Hotel Page */}
{/* {showCTA && (
<Button theme="base" intent="secondary" size="large">

11
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -6,6 +6,10 @@
padding: var(--Spacing-x1);
}
.accordionItem.sidepeek {
padding: var(--Spacing-x1) 0;
}
.summary {
position: relative;
display: flex;
@@ -18,7 +22,7 @@
font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s;
}
.summary:hover {
.summary.card:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
border-radius: var(--Corner-radius-Medium);
}
.accordionItem.sidepeek .summary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
align-items: center;
}
.title {
flex-grow: 1;
}

22
components/TempDesignSystem/Accordion/AccordionItem/index.tsx
View File

@@ -50,16 +50,10 @@ export default function AccordionItem({
<li className={accordionItemVariants({ className, variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}>
{IconComp && <IconComp className={styles.icon} color="burgundy" />}
{variant === "card" ? (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
) : (
{IconComp && (
<IconComp className={styles.icon} color="baseTextHighcontrast" />
)}
{variant === "sidepeek" ? (
<Subtitle
className={styles.title}
type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
>
{title}
</Subtitle>
) : (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
)}
<ChevronDownIcon
className={styles.chevron}

1
components/TempDesignSystem/Accordion/AccordionItem/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,

1
components/TempDesignSystem/Accordion/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,

1
i18n/dictionaries/da.json
View File

@@ -95,6 +95,7 @@
"Could not find requested resource": "Kunne ikke finde den anmodede ressource",
"Country": "Land",
"Country code": "Landekode",
"Creative spaces for meetings": "Kreative rum til møder",
"Credit card": "Kreditkort",
"Credit card deleted successfully": "Kreditkort blev slettet",
"Currency Code": "DKK",

1
i18n/dictionaries/de.json
View File

@@ -95,6 +95,7 @@
"Could not find requested resource": "Die angeforderte Ressource konnte nicht gefunden werden.",
"Country": "Land",
"Country code": "Landesvorwahl",
"Creative spaces for meetings": "Kreative Räume für Meetings",
"Credit card": "Kreditkarte",
"Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
"Currency Code": "EUR",

1
i18n/dictionaries/en.json
View File

@@ -103,6 +103,7 @@
"Could not find requested resource": "Could not find requested resource",
"Country": "Country",
"Country code": "Country code",
"Creative spaces for meetings": "Creative spaces for meetings",
"Credit card": "Credit card",
"Credit card deleted successfully": "Credit card deleted successfully",
"Currency Code": "EUR",

1
i18n/dictionaries/fi.json
View File

@@ -95,6 +95,7 @@
"Could not find requested resource": "Pyydettyä resurssia ei löytynyt",
"Country": "Maa",
"Country code": "Maatunnus",
"Creative spaces for meetings": "Luovia tiloja kokouksille",
"Credit card": "Luottokortti",
"Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
"Currency Code": "EUR",

1
i18n/dictionaries/no.json
View File

@@ -95,6 +95,7 @@
"Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
"Country": "Land",
"Country code": "Landskode",
"Creative spaces for meetings": "Kreative rom for møter",
"Credit card deleted successfully": "Kredittkort slettet",
"Currency Code": "NOK",
"Current password": "Nåværende passord",

1
i18n/dictionaries/sv.json
View File

@@ -95,6 +95,7 @@
"Could not find requested resource": "Det gick inte att hitta den begärda resursen",
"Country": "Land",
"Country code": "Landskod",
"Creative spaces for meetings": "Kreativa utrymmen för möten",
"Credit card deleted successfully": "Kreditkort har tagits bort",
"Currency Code": "SEK",
"Current password": "Nuvarande lösenord",

9
package-lock.json generated
View File

@@ -54,6 +54,7 @@
"react-hook-form": "^7.51.2",
"react-international-phone": "^4.2.6",
"react-intl": "^6.6.8",
"react-to-print": "^3.0.2",
"server-only": "^0.0.1",
"sonner": "^1.7.0",
"superjson": "^2.2.1",
@@ -17417,6 +17418,14 @@
}
}
},
"node_modules/react-to-print": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-3.0.2.tgz",
"integrity": "sha512-FS/Z4LLq0bgWaxd7obygFQ8yRFdKW74iE8fIVjFFsPJWIXmuL8CIO+4me1Hj44lrlxQ00gscSNb3BRM8olbwXg==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ~19"
}
},
"node_modules/readable-stream": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",

1
package.json
View File

@@ -69,6 +69,7 @@
"react-hook-form": "^7.51.2",
"react-international-phone": "^4.2.6",
"react-intl": "^6.6.8",
"react-to-print": "^3.0.2",
"server-only": "^0.0.1",
"sonner": "^1.7.0",
"superjson": "^2.2.1",

2
server/routers/booking/query.ts
View File

@@ -8,6 +8,7 @@ import { router, serviceProcedure } from "@/server/trpc"
import { getHotelData } from "../hotels/query"
import { bookingConfirmationInput, getBookingStatusInput } from "./input"
import { bookingConfirmationSchema, createBookingSchema } from "./output"
import { getBookedHotelRoom } from "./utils"
const meter = metrics.getMeter("trpc.booking")
const getBookingConfirmationCounter = meter.createCounter(
@@ -144,6 +145,7 @@ export const bookingQueryRouter = router({
...hotelData.data.attributes,
included: hotelData.included,
},
room: getBookedHotelRoom(hotelData.included, booking.data.roomTypeCode),
}
}),
status: serviceProcedure.input(getBookingStatusInput).query(async function ({

27
server/routers/booking/utils.ts Normal file
View File

@@ -0,0 +1,27 @@
import { RoomData } from "@/types/hotel"
import { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export function getBookedHotelRoom(
rooms: RoomData[] | undefined,
roomTypeCode: BookingConfirmation["booking"]["roomTypeCode"]
) {
if (!rooms?.length || !roomTypeCode) {
return null
}
const room = rooms?.find((r) => {
return r.roomTypes.find((roomType) => roomType.code === roomTypeCode)
})
if (!room) {
return null
}
const bedType = room.roomTypes.find(
(roomType) => roomType.code === roomTypeCode
)
if (!bedType) {
return null
}
return {
...room,
bedType,
}
}

11
server/routers/contentstack/reward/query.ts
View File

@@ -238,15 +238,18 @@ export const rewardQueryRouter = router({
const nextCursor =
limit + cursor < rewardIds.length ? limit + cursor : undefined
const surprisesIds = validatedApiRewards.data
const wrappedSurprisesIds = validatedApiRewards.data
.filter(
({ type, rewardType }) =>
type === "coupon" && rewardType === "Surprise"
(reward) =>
reward.type === "coupon" &&
reward.rewardType === "Surprise" &&
"coupon" in reward &&
reward.coupon?.some(({ unwrapped }) => !unwrapped)
)
.map(({ rewardId }) => rewardId)
const rewards = cmsRewards.filter(
(reward) => !surprisesIds.includes(reward.reward_id)
(reward) => !wrappedSurprisesIds.includes(reward.reward_id)
)
getCurrentRewardSuccessCounter.add(1)

7
types/components/hotelPage/sidepeek/meetingsAndConferences.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { Hotel } from "@/types/hotel"
export type MeetingsAndConferencesSidePeekProps = {
meetingFacilities: Hotel["conferencesAndMeetings"]
descriptions: Hotel["hotelContent"]["texts"]["meetingDescription"]
link?: string
}

5
types/components/hotelReservation/bookingConfirmation/actions/downloadInvoice.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { MutableRefObject } from "react"
export interface DownloadInvoiceProps {
mainRef: MutableRefObject<HTMLElement | null>
}

4
types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts
View File

@@ -1,3 +1,5 @@
import type { RouterOutput } from "@/lib/trpc/client"
export interface BookingConfirmationProps {
confirmationNumber: string
bookingConfirmationPromise: Promise<RouterOutput["booking"]["confirmation"]>
}

8
types/components/hotelReservation/bookingConfirmation/header.ts Normal file
View File

@@ -0,0 +1,8 @@
import type { MutableRefObject } from "react"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface BookingConfirmationHeaderProps
extends Pick<BookingConfirmation, "booking" | "hotel"> {
mainRef: MutableRefObject<HTMLElement | null>
}

5
types/components/hotelReservation/bookingConfirmation/hotelDetails.ts Normal file
View File

@@ -0,0 +1,5 @@
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface BookingConfirmationHotelDetailsProps {
hotel: BookingConfirmation["hotel"]
}

4
types/components/hotelReservation/bookingConfirmation/paymentDetails.ts Normal file
View File

@@ -0,0 +1,4 @@
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface BookingConfirmationPaymentDetailsProps
extends Pick<BookingConfirmation, "booking"> {}

3
types/components/hotelReservation/bookingConfirmation/receipt.ts Normal file
View File

@@ -0,0 +1,3 @@
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface BookingConfirmationReceiptProps extends BookingConfirmation {}

11
types/components/hotelReservation/bookingConfirmation/room.ts
View File

@@ -1,11 +0,0 @@
import { RouterOutput } from "@/lib/trpc/client"
export interface RoomProps {
booking: RouterOutput["booking"]["confirmation"]["booking"]
img: NonNullable<
RouterOutput["booking"]["confirmation"]["hotel"]["included"]
>[number]["images"][number]
roomName: NonNullable<
RouterOutput["booking"]["confirmation"]["hotel"]["included"]
>[number]["name"]
}

4
types/components/hotelReservation/bookingConfirmation/rooms.ts Normal file
View File

@@ -0,0 +1,4 @@
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface BookingConfirmationRoomsProps
extends Pick<BookingConfirmation, "booking" | "room"> {}

7
types/components/hotelReservation/bookingConfirmation/rooms/room.ts Normal file
View File

@@ -0,0 +1,7 @@
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
export interface RoomProps {
booking: BookingConfirmation["booking"]
img: NonNullable<BookingConfirmation["room"]>["images"][number]
roomName: NonNullable<BookingConfirmation["room"]>["name"]
}

19
types/trpc/routers/booking/confirmation.ts Normal file
View File

@@ -0,0 +1,19 @@
import { z } from "zod"
import { bookingConfirmationSchema } from "@/server/routers/booking/output"
import { Hotel, RoomData } from "@/types/hotel"
export interface BookingConfirmationSchema
extends z.output<typeof bookingConfirmationSchema> {}
export interface BookingConfirmation {
booking: BookingConfirmationSchema
hotel: Hotel & {
included?: RoomData[]
}
room:
| (RoomData & {
bedType: RoomData["roomTypes"][number]
})
| null
}

23
utils/getBookedHotelRoom.ts
View File

@@ -1,23 +0,0 @@
import type { RouterOutput } from "@/lib/trpc/client"
export function getBookedHotelRoom(
hotel: RouterOutput["booking"]["confirmation"]["hotel"],
roomTypeCode: string
) {
const room = hotel.included?.find((include) => {
return include.roomTypes.find((roomType) => roomType.code === roomTypeCode)
})
if (!room) {
return null
}
const bedType = room.roomTypes.find(
(roomType) => roomType.code === roomTypeCode
)
if (!bedType) {
return null
}
return {
...room,
bedType,
}
}