145 lines
4.8 KiB
TypeScript
145 lines
4.8 KiB
TypeScript
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
|
|
import BookingCodeFilter from "@/components/HotelReservation/SelectHotel/BookingCodeFilter"
|
|
import HotelCount from "@/components/HotelReservation/SelectHotel/HotelCount"
|
|
import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
|
|
import HotelSorter from "@/components/HotelReservation/SelectHotel/HotelSorter"
|
|
import MobileMapButtonContainer from "@/components/HotelReservation/SelectHotel/MobileMapButtonContainer"
|
|
import NoAvailabilityAlert from "@/components/HotelReservation/SelectHotel/NoAvailabilityAlert"
|
|
import StaticMap from "@/components/Maps/StaticMap"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import { getFiltersFromHotels, type HotelResponse } from "./helpers"
|
|
|
|
import styles from "./selectHotel.module.css"
|
|
|
|
import type { Location } from "@/types/trpc/routers/hotel/locations"
|
|
|
|
interface SelectHotelProps {
|
|
isAlternative?: boolean
|
|
bookingCode?: string
|
|
city: Location
|
|
hotels: HotelResponse[]
|
|
mapHref: string
|
|
title: string
|
|
}
|
|
|
|
export default async function SelectHotel({
|
|
bookingCode,
|
|
city,
|
|
hotels,
|
|
isAlternative = false,
|
|
mapHref,
|
|
title,
|
|
}: SelectHotelProps) {
|
|
const intl = await getIntl()
|
|
|
|
const isAllUnavailable = !hotels.length
|
|
const isCityWithCountry = (city: any): city is { country: string } =>
|
|
"country" in city
|
|
|
|
const isBookingCodeRateAvailable = bookingCode
|
|
? hotels.some(
|
|
(hotel) =>
|
|
hotel.availability.bookingCode &&
|
|
hotel.availability.status === "Available"
|
|
)
|
|
: false
|
|
|
|
const isFullPriceHotelAvailable = bookingCode
|
|
? hotels?.some(
|
|
(hotel) =>
|
|
!hotel.availability.bookingCode &&
|
|
hotel.availability.status === "Available"
|
|
)
|
|
: false
|
|
|
|
// Special rates (corporate cheque, voucher and reward nights) will not have regular rate hotels availability
|
|
const isSpecialRate = hotels.some(
|
|
(hotel) =>
|
|
hotel.availability.productType?.bonusCheque ||
|
|
hotel.availability.productType?.voucher ||
|
|
hotel.availability.productType?.redemptions
|
|
)
|
|
|
|
const filterList = getFiltersFromHotels(hotels)
|
|
|
|
const showBookingCodeFilter =
|
|
isBookingCodeRateAvailable && isFullPriceHotelAvailable && !isSpecialRate
|
|
|
|
return (
|
|
<>
|
|
<header className={styles.header}>
|
|
<div className={styles.headerContent}>
|
|
<div className={styles.title}>
|
|
<div className={styles.cityInformation}>
|
|
<Subtitle>{title}</Subtitle>
|
|
<HotelCount />
|
|
</div>
|
|
<div className={styles.sorter}>
|
|
<HotelSorter discreet />
|
|
</div>
|
|
</div>
|
|
<MobileMapButtonContainer filters={filterList} />
|
|
</div>
|
|
</header>
|
|
<main className={styles.main}>
|
|
{showBookingCodeFilter ? <BookingCodeFilter /> : null}
|
|
<div className={styles.sideBar}>
|
|
{hotels.length ? (
|
|
<Link className={styles.link} href={mapHref} keepSearchParams>
|
|
<div className={styles.mapContainer}>
|
|
<StaticMap
|
|
city={city.name}
|
|
country={isCityWithCountry(city) ? city.country : undefined}
|
|
width={340}
|
|
height={180}
|
|
zoomLevel={11}
|
|
mapType="roadmap"
|
|
altText={`Map of ${city.name} city center`}
|
|
/>
|
|
<div className={styles.linkText}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "See map",
|
|
})}
|
|
<MaterialIcon
|
|
icon="chevron_right"
|
|
size={20}
|
|
color="CurrentColor"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<div className={styles.mapContainer}>
|
|
<StaticMap
|
|
city={city.name}
|
|
width={340}
|
|
height={180}
|
|
zoomLevel={11}
|
|
mapType="roadmap"
|
|
altText={`Map of ${city.name} city center`}
|
|
/>
|
|
</div>
|
|
)}
|
|
<HotelFilter filters={filterList} className={styles.filter} />
|
|
</div>
|
|
<div className={styles.hotelList}>
|
|
<NoAvailabilityAlert
|
|
hotelsLength={hotels.length}
|
|
isAlternative={isAlternative}
|
|
isAllUnavailable={isAllUnavailable}
|
|
operaId={hotels?.[0]?.hotel.operaId}
|
|
bookingCode={bookingCode}
|
|
isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
|
|
/>
|
|
<HotelCardListing hotelData={hotels} />
|
|
</div>
|
|
</main>
|
|
</>
|
|
)
|
|
}
|