cf3268bda3
fix(SW-910): handle MembershipFailedError * fix(SW-910): handle MembershipFailedError Approved-by: Tobias Johansson
89 lines
3.9 KiB
TypeScript
89 lines
3.9 KiB
TypeScript
"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()
|
|
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>
|
|
</main>
|
|
)
|
|
}
|