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

feat: booking confirmation page with hardcoded data

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-10-22 11:43:08 +02:00
parent 445bde8e2e
commit 2d23f9bbf3
42 changed files with 859 additions and 533 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.module.css Normal file
View File

@@ -0,0 +1,24 @@
.layout {
min-height: 100dvh;
background-color: var(--Scandic-Brand-Warm-White);
}
.content {
display: grid;
gap: var(--Spacing-x3) var(--Spacing-x9);
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
margin: var(--Spacing-x5) auto 0;
padding-top: var(--Spacing-x6);
/* simulates padding on viewport smaller than --max-width-navigation */
width: min(
calc(100dvw - (var(--Spacing-x2) * 2)),
var(--max-width-navigation)
);
}
.summary {
align-self: flex-start;
grid-column: 2 / 3;
grid-row: 1/-1;
}

55
app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/layout.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { redirect } from "next/navigation"
import {
getCreditCardsSafely,
getHotelData,
getProfileSafely,
} from "@/lib/trpc/memoizedRequests"
import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
import SidePeek from "@/components/HotelReservation/EnterDetails/SidePeek"
import Summary from "@/components/HotelReservation/EnterDetails/Summary"
import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import { setLang } from "@/i18n/serverContext"
import styles from "./layout.module.css"
import { StepEnum } from "@/types/components/enterDetails/step"
import type { LangParams, LayoutArgs } from "@/types/params"
function preload(id: string, lang: string) {
void getHotelData(id, lang)
void getProfileSafely()
void getCreditCardsSafely()
}
export default async function StepLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
setLang(params.lang)
preload("811", params.lang)
const hotel = await getHotelData("811", params.lang)
if (!hotel?.data) {
redirect(`/${params.lang}`)
}
return (
<EnterDetailsProvider step={params.step}>
<main className={styles.layout}>
<HotelSelectionHeader hotel={hotel.data.attributes} />
<div className={styles.content}>
<SelectedRoom />
{children}
<aside className={styles.summary}>
<Summary />
</aside>
</div>
<SidePeek hotel={hotel.data.attributes} />
</main>
</EnterDetailsProvider>
)
}

79
app/[lang]/(live)/(public)/hotelreservation/(standard)/[step]/page.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { notFound } from "next/navigation"
import {
getCreditCardsSafely,
getHotelData,
getProfileSafely,
} from "@/lib/trpc/memoizedRequests"
import BedType from "@/components/HotelReservation/EnterDetails/BedType"
import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
import Details from "@/components/HotelReservation/EnterDetails/Details"
import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
import Payment from "@/components/HotelReservation/EnterDetails/Payment"
import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
import { getIntl } from "@/i18n"
import { StepEnum } from "@/types/components/enterDetails/step"
import type { LangParams, PageArgs } from "@/types/params"
function isValidStep(step: string): step is StepEnum {
return Object.values(StepEnum).includes(step as StepEnum)
}
export default async function StepPage({
params,
}: PageArgs<LangParams & { step: StepEnum }>) {
const { step, lang } = params
const intl = await getIntl()
const hotel = await getHotelData("811", lang)
const user = await getProfileSafely()
const savedCreditCards = await getCreditCardsSafely()
if (!isValidStep(step) || !hotel) {
return notFound()
}
return (
<section>
<HistoryStateManager />
<SectionAccordion
header="Select bed"
step={StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
step={StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
step={StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
>
<Details user={user} />
</SectionAccordion>
<SectionAccordion
header="Payment"
step={StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
>
<Payment
hotelId={hotel.data.attributes.operaId}
otherPaymentOptions={
hotel.data.attributes.merchantInformationData
.alternatePaymentOptions
}
savedCreditCards={savedCreditCards}
/>
</SectionAccordion>
</section>
)
}

4
app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.module.css Normal file
View File

@@ -0,0 +1,4 @@
.layout {
min-height: 100dvh;
background-color: var(--Base-Background-Primary-Normal);
}

16
app/[lang]/(live)/(public)/hotelreservation/(standard)/layout.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { notFound } from "next/navigation"
import { env } from "@/env/server"
import styles from "./layout.module.css"
import { LangParams, LayoutArgs } from "@/types/params"
export default function HotelReservationLayout({
children,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
if (env.HIDE_FOR_NEXT_RELEASE) {
return notFound()
}
return <div className={styles.layout}>{children}</div>
}

8
app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { setLang } from "@/i18n/serverContext"
import type { LangParams, PageArgs } from "@/types/params"
export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
setLang(params.lang)
return null
}

6
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.module.css Normal file
View File

@@ -0,0 +1,6 @@
.main {
display: grid;
background-color: var(--Scandic-Brand-Warm-White);
min-height: 100dvh;
grid-template-columns: 420px 1fr;
}

58
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx Normal file
View File

@@ -0,0 +1,58 @@
import { env } from "@/env/server"
import {
fetchAvailableHotels,
getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import {
PointOfInterest,
PointOfInterestCategoryNameEnum,
PointOfInterestGroupEnum,
} from "@/types/hotel"
import { LangParams, PageArgs } from "@/types/params"
export default async function SelectHotelMapPage({
params,
}: PageArgs<LangParams, {}>) {
const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
setLang(params.lang)
const hotels = await fetchAvailableHotels({
cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
roomStayStartDate: "2024-11-02",
roomStayEndDate: "2024-11-03",
adults: 1,
})
const filters = getFiltersFromHotels(hotels)
// TODO: this is just a quick transformation to get something there. May need rework
const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
coordinates: {
lat: hotel.hotelData.location.latitude,
lng: hotel.hotelData.location.longitude,
},
name: hotel.hotelData.name,
distance: hotel.hotelData.location.distanceToCentre,
categoryName: PointOfInterestCategoryNameEnum.HOTEL,
group: PointOfInterestGroupEnum.LOCATION,
}))
return (
<main className={styles.main}>
<SelectHotelMap
apiKey={googleMapsApiKey}
// TODO: use correct coordinates. The city center?
coordinates={{ lat: 59.32, lng: 18.01 }}
pointsOfInterest={pointOfInterests}
mapId={googleMapId}
/>
</main>
)
}

26
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css Normal file
View File

@@ -0,0 +1,26 @@
.main {
display: flex;
gap: var(--Spacing-x4);
padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
background-color: var(--Scandic-Brand-Warm-White);
min-height: 100dvh;
flex-direction: column;
max-width: var(--max-width);
margin: 0 auto;
}
.section {
display: flex;
flex-direction: column;
}
.link {
display: flex;
padding: var(--Spacing-x2) var(--Spacing-x0);
}
@media (min-width: 768px) {
.main {
flex-direction: row;
}
}

63
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx Normal file
View File

@@ -0,0 +1,63 @@
import { selectHotelMap } from "@/constants/routes/hotelReservation"
import {
fetchAvailableHotels,
getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
import { ChevronRightIcon } from "@/components/Icons"
import StaticMap from "@/components/Maps/StaticMap"
import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import { LangParams, PageArgs } from "@/types/params"
export default async function SelectHotelPage({
params,
}: PageArgs<LangParams>) {
setLang(params.lang)
const tempSearchTerm = "Stockholm"
const intl = await getIntl()
const hotels = await fetchAvailableHotels({
cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
roomStayStartDate: "2024-11-02",
roomStayEndDate: "2024-11-03",
adults: 1,
})
const filterList = getFiltersFromHotels(hotels)
return (
<main className={styles.main}>
<section className={styles.section}>
<Link href={selectHotelMap[params.lang]} keepSearchParams>
<StaticMap
city={tempSearchTerm}
width={340}
height={180}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${tempSearchTerm} city center`}
/>
</Link>
<Link
className={styles.link}
color="burgundy"
href={selectHotelMap[params.lang]}
keepSearchParams
>
{intl.formatMessage({ id: "Show map" })}
<ChevronRightIcon color="burgundy" />
</Link>
<HotelFilter filters={filterList} />
</section>
<HotelCardListing hotelData={hotels} />
</main>
)
}

43
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts Normal file
View File

@@ -0,0 +1,43 @@
import { serverClient } from "@/lib/trpc/server"
import { getLang } from "@/i18n/serverContext"
import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
export async function fetchAvailableHotels(
input: AvailabilityInput
): Promise<HotelData[]> {
const availableHotels = await serverClient().hotel.availability.hotels(input)
if (!availableHotels) throw new Error()
const language = getLang()
const hotels = availableHotels.availability.map(async (hotel) => {
const hotelData = await serverClient().hotel.hotelData.get({
hotelId: hotel.hotelId.toString(),
language,
})
if (!hotelData) throw new Error()
return {
hotelData: hotelData.data.attributes,
price: hotel.bestPricePerNight,
}
})
return await Promise.all(hotels)
}
export function getFiltersFromHotels(hotels: HotelData[]) {
const filters = hotels.flatMap((hotel) => hotel.hotelData.detailedFacilities)
const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
const filterList: Filter[] = uniqueFilterIds
.map((filterId) => filters.find((filter) => filter.id === filterId))
.filter((filter): filter is Filter => filter !== undefined)
return filterList
}

24
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.module.css Normal file
View File

@@ -0,0 +1,24 @@
.page {
min-height: 100dvh;
padding-top: var(--Spacing-x6);
padding-left: var(--Spacing-x2);
padding-right: var(--Spacing-x2);
background-color: var(--Scandic-Brand-Warm-White);
}
.content {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--Spacing-x7);
padding: var(--Spacing-x2);
}
.main {
flex-grow: 1;
}
.summary {
max-width: 340px;
}

66
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
import HotelInfoCard from "@/components/HotelReservation/SelectRate/HotelInfoCard"
import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import getHotelReservationQueryParams from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import { LangParams, PageArgs } from "@/types/params"
export default async function SelectRatePage({
params,
searchParams,
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
setLang(params.lang)
const selecetRoomParams = new URLSearchParams(searchParams)
const selecetRoomParamsObject =
getHotelReservationQueryParams(selecetRoomParams)
const adults = selecetRoomParamsObject.room[0].adults // TODO: Handle multiple rooms
const children = selecetRoomParamsObject.room[0].child.length // TODO: Handle multiple rooms
const [hotelData, roomConfigurations, user] = await Promise.all([
serverClient().hotel.hotelData.get({
hotelId: searchParams.hotel,
language: params.lang,
include: ["RoomCategories"],
}),
serverClient().hotel.availability.rooms({
hotelId: parseInt(searchParams.hotel, 10),
roomStayStartDate: searchParams.fromDate,
roomStayEndDate: searchParams.toDate,
adults: adults,
children: children,
}),
getProfileSafely(),
])
if (!roomConfigurations) {
return "No rooms found" // TODO: Add a proper error message
}
if (!hotelData) {
return "No hotel data found" // TODO: Add a proper error message
}
const roomCategories = hotelData?.included
return (
<div>
<HotelInfoCard hotelData={hotelData} />
<div className={styles.content}>
<div className={styles.main}>
<RoomSelection
roomConfigurations={roomConfigurations}
roomCategories={roomCategories ?? []}
user={user}
/>
</div>
</div>
</div>
)
}