Merged in chore/move-enter-details (pull request #2778)
Chore/move enter details Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
@@ -1,46 +0,0 @@
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3) var(--Spacing-x9);
|
||||
}
|
||||
|
||||
.content {
|
||||
width: var(--max-width-page);
|
||||
margin: var(--Spacing-x3) auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.container {
|
||||
grid-template-columns: 1fr 340px;
|
||||
grid-template-rows: auto 1fr;
|
||||
width: var(--max-width-page);
|
||||
margin: var(--Spacing-x5) auto 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin: var(--Spacing-x3) 0 0;
|
||||
}
|
||||
|
||||
.summary {
|
||||
position: static;
|
||||
display: grid;
|
||||
grid-column: 2/3;
|
||||
grid-row: 1/-1;
|
||||
z-index: unset;
|
||||
}
|
||||
}
|
||||
@@ -1,167 +1,12 @@
|
||||
import { cookies } from "next/headers"
|
||||
import { notFound } from "next/navigation"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import FnFNotAllowedAlert from "@scandic-hotels/booking-flow/components/FnFNotAllowedAlert"
|
||||
import { parseDetailsSearchParams } from "@scandic-hotels/booking-flow/utils/url"
|
||||
import { FamilyAndFriendsCodes } from "@scandic-hotels/common/constants/familyAndFriends"
|
||||
|
||||
import {
|
||||
getBreakfastPackages,
|
||||
getHotel,
|
||||
getProfileSafely,
|
||||
getSelectedRoomsAvailabilityEnterDetails,
|
||||
} from "@/lib/trpc/memoizedRequests"
|
||||
|
||||
import HotelHeader from "@/components/HotelReservation/EnterDetails/Header"
|
||||
import Payment from "@/components/HotelReservation/EnterDetails/Payment"
|
||||
import Multiroom from "@/components/HotelReservation/EnterDetails/Room/Multiroom"
|
||||
import RoomOne from "@/components/HotelReservation/EnterDetails/Room/One"
|
||||
import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
|
||||
import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
|
||||
import EnterDetailsTrackingWrapper from "@/components/HotelReservation/EnterDetails/Tracking"
|
||||
import RoomProvider from "@/providers/Details/RoomProvider"
|
||||
import EnterDetailsProvider from "@/providers/EnterDetailsProvider"
|
||||
|
||||
import styles from "./page.module.css"
|
||||
import { EnterDetailsPage as EnterDetailsPagePrimitive } from "@scandic-hotels/booking-flow/pages/EnterDetailsPage"
|
||||
|
||||
import type { LangParams, NextSearchParams, PageArgs } from "@/types/params"
|
||||
|
||||
export default async function DetailsPage(
|
||||
props: PageArgs<LangParams, NextSearchParams>
|
||||
) {
|
||||
const { lang } = await props.params
|
||||
const searchParams = await props.searchParams
|
||||
const params = await props.params
|
||||
|
||||
const { lang } = params
|
||||
|
||||
const selectRoomParams = new URLSearchParams(searchParams)
|
||||
|
||||
const booking = parseDetailsSearchParams(searchParams)
|
||||
|
||||
if (!booking) return notFound()
|
||||
|
||||
if (selectRoomParams.has("activeRoomIndex")) {
|
||||
selectRoomParams.delete("activeRoomIndex")
|
||||
}
|
||||
|
||||
if (
|
||||
booking.bookingCode &&
|
||||
FamilyAndFriendsCodes.includes(booking.bookingCode)
|
||||
) {
|
||||
const cookieStore = await cookies()
|
||||
const isInValidFNF = cookieStore.get("sc")?.value !== "1"
|
||||
|
||||
if (isInValidFNF) {
|
||||
return <FnFNotAllowedAlert />
|
||||
}
|
||||
}
|
||||
|
||||
const breakfastInput = {
|
||||
adults: 1,
|
||||
fromDate: booking.fromDate,
|
||||
hotelId: booking.hotelId,
|
||||
toDate: booking.toDate,
|
||||
}
|
||||
const hotelInput = {
|
||||
hotelId: booking.hotelId,
|
||||
// TODO: Remove this from input since it forces
|
||||
// waterfalls for no other reason than to
|
||||
// set merchantInformationData.alternatePaymentOptions
|
||||
// to an empty array
|
||||
isCardOnlyPayment: false,
|
||||
language: lang,
|
||||
}
|
||||
void getHotel(hotelInput)
|
||||
void getBreakfastPackages(breakfastInput)
|
||||
void getProfileSafely()
|
||||
|
||||
const rooms = await getSelectedRoomsAvailabilityEnterDetails({
|
||||
booking,
|
||||
lang,
|
||||
})
|
||||
|
||||
const hotelData = await getHotel(hotelInput)
|
||||
|
||||
if (!hotelData || !rooms.length) {
|
||||
return notFound()
|
||||
}
|
||||
|
||||
const breakfastPackages = await getBreakfastPackages(breakfastInput)
|
||||
const user = await getProfileSafely()
|
||||
|
||||
const isCardOnlyPayment = rooms.some((room) => room.mustBeGuaranteed)
|
||||
const { hotel } = hotelData
|
||||
// TODO: Temp fix to avoid waterfall fetch and moving this
|
||||
// logic from the route here for now
|
||||
if (isCardOnlyPayment) {
|
||||
hotel.merchantInformationData.alternatePaymentOptions = []
|
||||
}
|
||||
|
||||
const firstRoom = rooms[0]
|
||||
const multirooms = rooms.slice(1)
|
||||
|
||||
const { rateDefinition, rateDefinitionMember } = firstRoom.roomRate
|
||||
if (user && rateDefinitionMember) {
|
||||
const rateCode = selectRoomParams.get("room[0].ratecode")
|
||||
if (rateDefinitionMember.rateCode !== rateCode) {
|
||||
booking.rooms[0].rateCode = rateDefinitionMember.rateCode
|
||||
selectRoomParams.set("room[0].ratecode", rateDefinitionMember.rateCode)
|
||||
booking.rooms[0].counterRateCode = rateDefinition.rateCode
|
||||
selectRoomParams.set("room[0].counterratecode", rateDefinition.rateCode)
|
||||
}
|
||||
}
|
||||
|
||||
// attribute data-footer-spacing used to add spacing
|
||||
// beneath footer to be able to show entire footer upon
|
||||
// scrolling down to the bottom of the page
|
||||
return (
|
||||
<main data-footer-spacing>
|
||||
<EnterDetailsProvider
|
||||
booking={booking}
|
||||
breakfastPackages={breakfastPackages}
|
||||
lang={lang}
|
||||
rooms={rooms}
|
||||
searchParamsStr={selectRoomParams.toString()}
|
||||
user={user}
|
||||
vat={hotel.vat}
|
||||
roomCategories={hotelData.roomCategories}
|
||||
>
|
||||
<HotelHeader hotelData={hotelData} />
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
<RoomProvider idx={0} room={firstRoom}>
|
||||
<RoomOne user={user} />
|
||||
</RoomProvider>
|
||||
{multirooms.map((room, idx) => (
|
||||
// Need to start idx from 1 since first room is
|
||||
// rendered above
|
||||
<RoomProvider key={idx + 1} idx={idx + 1} room={room}>
|
||||
<Multiroom />
|
||||
</RoomProvider>
|
||||
))}
|
||||
<Suspense>
|
||||
<Payment
|
||||
otherPaymentOptions={
|
||||
hotel.merchantInformationData.alternatePaymentOptions
|
||||
}
|
||||
supportedCards={hotel.merchantInformationData.cards}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
<aside className={styles.summary}>
|
||||
<MobileSummary isUserLoggedIn={!!user} />
|
||||
<DesktopSummary isUserLoggedIn={!!user} />
|
||||
</aside>
|
||||
</div>
|
||||
<EnterDetailsTrackingWrapper
|
||||
booking={booking}
|
||||
hotel={hotel}
|
||||
isMember={!!user}
|
||||
lang={lang}
|
||||
rooms={rooms}
|
||||
/>
|
||||
</EnterDetailsProvider>
|
||||
</main>
|
||||
)
|
||||
return <EnterDetailsPagePrimitive lang={lang} searchParams={searchParams} />
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user