diff --git a/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx b/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
new file mode 100644
index 000000000..0a6913dec
--- /dev/null
+++ b/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
@@ -0,0 +1,44 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import { HotelCardSkeleton } from "../HotelCard/HotelCardSkeleton"
+
+import styles from "./selectHotel.module.css"
+
+type Props = {
+ count?: number
+}
+
+export function SelectHotelSkeleton({ count = 4 }: Props) {
+ return (
+
+
+
+
+
+ {Array.from({ length: count }).map((_, index) => (
+
+ ))}
+
+
+
+ )
+}
diff --git a/components/HotelReservation/SelectHotel/index.tsx b/components/HotelReservation/SelectHotel/index.tsx
new file mode 100644
index 000000000..2795d0c00
--- /dev/null
+++ b/components/HotelReservation/SelectHotel/index.tsx
@@ -0,0 +1,158 @@
+import {
+ selectHotel,
+ selectHotelMap,
+} from "@/constants/routes/hotelReservation"
+
+import {
+ fetchAvailableHotels,
+ getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
+import { ChevronRightIcon } from "@/components/Icons"
+import StaticMap from "@/components/Maps/StaticMap"
+import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+import { safeTry } from "@/utils/safeTry"
+
+import HotelCardListing from "../HotelCardListing"
+import HotelCount from "./HotelCount"
+import HotelFilter from "./HotelFilter"
+import HotelSorter from "./HotelSorter"
+import MobileMapButtonContainer from "./MobileMapButtonContainer"
+
+import styles from "./selectHotel.module.css"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default async function SelectHotel({
+ city,
+ params,
+ reservationParams,
+}: SelectHotelProps) {
+ const { selectHotelParams, searchParams, adultsParams, childrenParams } =
+ reservationParams
+
+ const intl = await getIntl()
+
+ const hotelsPromise = safeTry(
+ fetchAvailableHotels({
+ cityId: city.id,
+ roomStayStartDate: searchParams.fromDate,
+ roomStayEndDate: searchParams.toDate,
+ adults: adultsParams,
+ children: childrenParams?.toString(),
+ })
+ )
+
+ const [hotels] = await hotelsPromise
+
+ const isCityWithCountry = (city: any): city is { country: string } =>
+ "country" in city
+
+ const validHotels =
+ hotels?.filter((hotel): hotel is HotelData => hotel !== null) || []
+
+ const filterList = getFiltersFromHotels(validHotels)
+ const breadcrumbs = [
+ {
+ title: intl.formatMessage({ id: "Home" }),
+ href: `/${params.lang}`,
+ uid: "home-page",
+ },
+ {
+ title: intl.formatMessage({ id: "Hotel reservation" }),
+ href: `/${params.lang}/hotelreservation`,
+ uid: "hotel-reservation",
+ },
+ {
+ title: intl.formatMessage({ id: "Select hotel" }),
+ href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+ uid: "select-hotel",
+ },
+ {
+ title: city.name,
+ uid: city.id,
+ },
+ ]
+
+ const isAllUnavailable = hotels?.every((hotel) => hotel.price === undefined)
+
+ return (
+ <>
+
+
+
+
+ {city.name}
+
+
+
+
+
+
+
+
+ {hotels && hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
+
+
+
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ {isAllUnavailable && (
+
+ )}
+
+
+
+ )
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css b/components/HotelReservation/SelectHotel/selectHotel.module.css
similarity index 84%
rename from app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
rename to components/HotelReservation/SelectHotel/selectHotel.module.css
index 052d9ee6b..a51fc9bd3 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
+++ b/components/HotelReservation/SelectHotel/selectHotel.module.css
@@ -7,6 +7,7 @@
max-width: var(--max-width);
margin: 0 auto;
}
+
.header {
display: flex;
flex-direction: column;
@@ -34,6 +35,10 @@
flex-direction: column;
}
+.sideBarItem {
+ display: none;
+}
+
.link {
display: none;
}
@@ -59,6 +64,10 @@
display: none;
}
+.skeletonContainer .title {
+ margin-bottom: var(--Spacing-x3);
+}
+
@media (min-width: 768px) {
.main {
padding: var(--Spacing-x5);
@@ -92,6 +101,9 @@
.sideBar {
max-width: 340px;
}
+ .sideBarItem {
+ display: block;
+ }
.filter {
display: block;
}
@@ -114,4 +126,14 @@
.buttonContainer {
display: none;
}
+ .skeletonContainer .title {
+ margin-bottom: 0;
+ }
+ .skeletonContainer .sideBar {
+ gap: var(--Spacing-x3);
+ }
+ .skeletonContainer .breadcrumbs {
+ margin: 0 auto;
+ max-width: var(--max-width-navigation);
+ }
}
diff --git a/types/components/hotelReservation/selectHotel/selectHotel.ts b/types/components/hotelReservation/selectHotel/selectHotel.ts
index d5f8807bd..016645813 100644
--- a/types/components/hotelReservation/selectHotel/selectHotel.ts
+++ b/types/components/hotelReservation/selectHotel/selectHotel.ts
@@ -1,4 +1,8 @@
-import { CheckInData, Hotel, ParkingData } from "@/types/hotel"
+import { Lang } from "@/constants/languages"
+
+import type { CheckInData, Hotel, ParkingData } from "@/types/hotel"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
+import type { SelectHotelSearchParams } from "./selectHotelSearchParams"
export enum AvailabilityEnum {
Available = "Available",
@@ -35,3 +39,16 @@ export interface CheckInCheckOutProps {
export interface MeetingsAndConferencesProps {
meetingDescription: string
}
+
+export interface SelectHotelProps {
+ city: Location
+ params: {
+ lang: Lang
+ }
+ reservationParams: {
+ selectHotelParams: URLSearchParams
+ searchParams: SelectHotelSearchParams
+ adultsParams: number
+ childrenParams: string | undefined
+ }
+}