118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import { serverClient } from "@/lib/trpc/server"
|
|
import { notFound } from "@/server/errors/next"
|
|
|
|
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 { getLang, setLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./page.module.css"
|
|
|
|
import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
|
|
import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
|
|
import { LangParams, PageArgs } from "@/types/params"
|
|
|
|
async function getAvailableHotels({
|
|
cityId,
|
|
roomStayStartDate,
|
|
roomStayEndDate,
|
|
adults,
|
|
}: AvailabilityInput): Promise<HotelData[] | null> {
|
|
const getAvailableHotels = await serverClient().hotel.availability.get({
|
|
cityId: cityId,
|
|
roomStayStartDate: roomStayStartDate,
|
|
roomStayEndDate: roomStayEndDate,
|
|
adults: adults,
|
|
})
|
|
|
|
if (!getAvailableHotels) return null
|
|
|
|
const { availability } = getAvailableHotels
|
|
|
|
const hotels = availability.map(async (hotel) => {
|
|
const hotelData = await serverClient().hotel.hotelData.get({
|
|
hotelId: hotel.hotelId.toString(),
|
|
language: getLang(),
|
|
})
|
|
|
|
return {
|
|
hotelData: hotelData?.data.attributes,
|
|
price: hotel.bestPricePerNight,
|
|
}
|
|
})
|
|
|
|
return await Promise.all(hotels)
|
|
}
|
|
|
|
export default async function SelectHotelPage({
|
|
params,
|
|
}: PageArgs<LangParams>) {
|
|
setLang(params.lang)
|
|
|
|
const tempSearchTerm = "Stockholm"
|
|
const intl = await getIntl()
|
|
|
|
const hotels = await getAvailableHotels({
|
|
cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
|
|
roomStayStartDate: "2024-11-02",
|
|
roomStayEndDate: "2024-11-03",
|
|
adults: 1,
|
|
})
|
|
|
|
if (!hotels) return null
|
|
if (hotels.some((item) => item?.hotelData === undefined)) return notFound()
|
|
|
|
const filters = hotels.flatMap((data) => data.hotelData?.detailedFacilities)
|
|
|
|
const filterId = [...new Set(filters.map((data) => data?.id))]
|
|
const filterList: {
|
|
name: string
|
|
id: number
|
|
applyToAllHotels: boolean
|
|
public: boolean
|
|
icon: string
|
|
sortOrder: number
|
|
code?: string
|
|
iconName?: string
|
|
}[] = filterId
|
|
.map((data) => filters.find((find) => find?.id === data))
|
|
.filter(
|
|
(
|
|
filter
|
|
): filter is {
|
|
name: string
|
|
id: number
|
|
applyToAllHotels: boolean
|
|
public: boolean
|
|
icon: string
|
|
sortOrder: number
|
|
code?: string
|
|
iconName?: string
|
|
} => filter !== undefined
|
|
)
|
|
|
|
return (
|
|
<main className={styles.main}>
|
|
<section className={styles.section}>
|
|
<StaticMap
|
|
city={tempSearchTerm}
|
|
width={340}
|
|
height={180}
|
|
zoomLevel={11}
|
|
mapType="roadmap"
|
|
altText={`Map of ${tempSearchTerm} city center`}
|
|
/>
|
|
<Link className={styles.link} color="burgundy" href="#">
|
|
{intl.formatMessage({ id: "Show map" })}
|
|
<ChevronRightIcon color="burgundy" />
|
|
</Link>
|
|
<HotelFilter filters={filterList} />
|
|
</section>
|
|
<HotelCardListing hotelData={hotels} />
|
|
</main>
|
|
)
|
|
}
|