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

Merged in feat/SW-1652-confirmation-page-multiroom (pull request #1404)

Browse Source 
feat(SW-1652): Fetching additional rooms on confirmation page

* feat(SW-1652): Fetching additional rooms on confirmation page


Approved-by: Tobias Johansson
This commit is contained in:
Arvid Norlin
2025-02-26 12:42:54 +00:00
parent a15936688b
commit d5e5b9a526
24 changed files with 606 additions and 425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/confirmation.module.css
View File

@@ -9,18 +9,6 @@
width: var(--max-width-page);
}
.booking {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
grid-area: booking;
padding-bottom: var(--Spacing-x9);
}
.aside {
display: none;
}
@media screen and (min-width: 1367px) {
.main {
grid-template-areas:
@@ -30,13 +18,4 @@
grid-template-rows: auto 1fr;
padding-top: var(--Spacing-x9);
}
.mobileReceipt {
display: none;
}
.aside {
display: grid;
grid-area: receipt;
}
}

71
apps/scandic-web/components/HotelReservation/BookingConfirmation/Confirmation/index.tsx
View File

@@ -1,88 +1,23 @@
"use client"
import { useSearchParams } from "next/navigation"
import { useRef } from "react"
import { useIntl } from "react-intl"
import { MEMBERSHIP_FAILED_ERROR } from "@/constants/booking"
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 Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./confirmation.module.css"
import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
import { AlertTypeEnum } from "@/types/enums/alert"
export default function Confirmation({
booking,
hotel,
room,
}: ConfirmationProps) {
const searchParams = useSearchParams()
const intl = useIntl()
children,
}: React.PropsWithChildren<ConfirmationProps>) {
const mainRef = useRef<HTMLElement | null>(null)
const membershipFailedError =
searchParams.get("errorCode") === MEMBERSHIP_FAILED_ERROR
const failedToVerifyMembership =
booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber
return (
<main className={styles.main} ref={mainRef}>
<Header booking={booking} hotel={hotel} mainRef={mainRef} />
<div className={styles.booking}>
{/* Customer has manually entered a membership number for which verification failed */}
{membershipFailedError && (
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Failed to verify membership",
})}
text={intl.formatMessage({
id: "The first or last name doesn't match the membership number you provided. Your booking(s) is confirmed but to get the membership attached you'll need to present your existing membership number upon check-in. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay, or we can assist upon arrival.",
})}
/>
)}
{/* For some other reason membership could not be verified */}
{!membershipFailedError && failedToVerifyMembership && (
<Alert
type={AlertTypeEnum.Info}
heading={intl.formatMessage({
id: "Failed to verify membership",
})}
text={intl.formatMessage({
id: "Your booking(s) is confirmed but we could not verify your membership. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay.",
})}
/>
)}
<Rooms
booking={booking}
mainRoom={room}
linkedReservations={booking.linkedReservations}
/>
<PaymentDetails booking={booking} />
<Divider color="primaryLightSubtle" />
<HotelDetails hotel={hotel} />
<Promos
confirmationNumber={booking.confirmationNumber}
hotelId={hotel.operaId}
lastName={booking.guest.lastName}
/>
<div className={styles.mobileReceipt}>
<Receipt booking={booking} hotel={hotel} room={room} />
</div>
</div>
<aside className={styles.aside}>
<SidePanel variant="receipt">
<Receipt booking={booking} hotel={hotel} room={room} />
</SidePanel>
</aside>
{children}
</main>
)
}