diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx index e5b107781..024ab49c5 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/map/page.tsx @@ -1,4 +1,3 @@ -import { notFound } from "next/navigation" import { Suspense } from "react" import { SelectHotelMapContainer } from "@/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer" @@ -6,8 +5,6 @@ import { SelectHotelMapContainerSkeleton } from "@/components/HotelReservation/S import { MapContainer } from "@/components/MapContainer" import { setLang } from "@/i18n/serverContext" -import { getHotelSearchDetails } from "../../utils" - import styles from "./page.module.css" import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams" @@ -18,32 +15,15 @@ export default async function SelectHotelMapPage({ searchParams, }: PageArgs) { setLang(params.lang) - const searchDetails = await getHotelSearchDetails({ searchParams }) - if (!searchDetails) return notFound() - const { - city, - adultsInRoom, - childrenInRoomString, - childrenInRoom, - selectHotelParams, - } = searchDetails - - if (!city) return notFound() return (
} > - +
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx index a3a1071aa..b6f7bb4d9 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx @@ -1,12 +1,9 @@ -import { notFound } from "next/navigation" import { Suspense } from "react" import SelectHotel from "@/components/HotelReservation/SelectHotel" import { SelectHotelSkeleton } from "@/components/HotelReservation/SelectHotel/SelectHotelSkeleton" import { setLang } from "@/i18n/serverContext" -import { getHotelSearchDetails } from "../utils" - import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams" import type { LangParams, PageArgs } from "@/types/params" @@ -15,35 +12,18 @@ export default async function SelectHotelPage({ searchParams, }: PageArgs) { setLang(params.lang) - const searchDetails = await getHotelSearchDetails({ searchParams }) - if (!searchDetails) return notFound() - const { - city, - selectHotelParams, - adultsInRoom, - childrenInRoomString, - childrenInRoom, - } = searchDetails - if (!city) return notFound() - - const reservationParams = { - selectHotelParams, - adultsInRoom, - childrenInRoomString, - childrenInRoom, - } + const roomKey = Object.keys(searchParams) + .filter((key) => key.startsWith("room[")) + .map((key) => searchParams[key]) + .join("-") return ( } > - + ) } diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx index 2c192a937..825299649 100644 --- a/components/HotelReservation/HotelCardListing/index.tsx +++ b/components/HotelReservation/HotelCardListing/index.tsx @@ -38,10 +38,10 @@ export default function HotelCardListing({ [searchParams] ) - const sortedHotels = useMemo( - () => getSortedHotels({ hotels: hotelData, sortBy }), - [hotelData, sortBy] - ) + const sortedHotels = useMemo(() => { + if (!hotelData) return [] + return getSortedHotels({ hotels: hotelData, sortBy }) + }, [hotelData, sortBy]) const hotels = useMemo(() => { if (activeFilters.length === 0) return sortedHotels diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx index d11501aa5..f198fd595 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx @@ -1,4 +1,5 @@ import { differenceInCalendarDays, format, isWeekend } from "date-fns" +import { notFound } from "next/navigation" import { Suspense } from "react" import { env } from "@/env/server" @@ -8,6 +9,7 @@ import { fetchAvailableHotels, getFiltersFromHotels, } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils" +import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils" import TrackingSDK from "@/components/TrackingSDK" import { getLang } from "@/i18n/serverContext" import { safeTry } from "@/utils/safeTry" @@ -21,6 +23,7 @@ import type { NullableHotelData, } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps" import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map" +import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams" import { TrackingChannelEnum, type TrackingSDKHotelInfo, @@ -32,15 +35,32 @@ function isValidHotelData(hotel: NullableHotelData): hotel is HotelData { } export async function SelectHotelMapContainer({ - city, - selectHotelParams, - adultsInRoom, - childrenInRoom, - childrenInRoomString, + searchParams, }: SelectHotelMapContainerProps) { const lang = getLang() const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY + const getHotelSearchDetailsPromise = safeTry( + getHotelSearchDetails({ + searchParams: searchParams as SelectHotelSearchParams & { + [key: string]: string + }, + }) + ) + + const [searchDetails] = await getHotelSearchDetailsPromise + + if (!searchDetails) return notFound() + + const { + city, + selectHotelParams, + adultsInRoom, + childrenInRoom, + childrenInRoomString, + } = searchDetails + + if (!city) return notFound() const fetchAvailableHotelsPromise = safeTry( fetchAvailableHotels({ diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css index 7ad45c4fb..4ab136b3e 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css @@ -43,5 +43,6 @@ } .skeletonContainer { display: flex; + width: 360px; } } diff --git a/components/HotelReservation/SelectHotel/index.tsx b/components/HotelReservation/SelectHotel/index.tsx index 3f16d3353..c1f5ca417 100644 --- a/components/HotelReservation/SelectHotel/index.tsx +++ b/components/HotelReservation/SelectHotel/index.tsx @@ -1,4 +1,5 @@ import { differenceInCalendarDays, format, isWeekend } from "date-fns" +import { notFound } from "next/navigation" import { Suspense } from "react" import { @@ -10,6 +11,7 @@ import { fetchAvailableHotels, getFiltersFromHotels, } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils" +import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils" import { ChevronRightIcon } from "@/components/Icons" import StaticMap from "@/components/Maps/StaticMap" import Alert from "@/components/TempDesignSystem/Alert" @@ -33,6 +35,7 @@ import styles from "./selectHotel.module.css" import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums" import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps" import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel" +import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams" import { TrackingChannelEnum, type TrackingSDKHotelInfo, @@ -41,18 +44,32 @@ import { import { AlertTypeEnum } from "@/types/enums/alert" export default async function SelectHotel({ - city, params, - reservationParams, + searchParams, }: SelectHotelProps) { + const intl = await getIntl() + + const getHotelSearchDetailsPromise = safeTry( + getHotelSearchDetails({ + searchParams: searchParams as SelectHotelSearchParams & { + [key: string]: string + }, + }) + ) + + const [searchDetails] = await getHotelSearchDetailsPromise + + if (!searchDetails) return notFound() + const { + city, selectHotelParams, adultsInRoom, childrenInRoomString, childrenInRoom, - } = reservationParams + } = searchDetails - const intl = await getIntl() + if (!city) return notFound() const hotelsPromise = safeTry( fetchAvailableHotels({ @@ -76,7 +93,7 @@ export default async function SelectHotel({ [] const filterList = getFiltersFromHotels(validHotels) - const searchParams = convertObjToSearchParams(selectHotelParams) + const convertedSearchParams = convertObjToSearchParams(selectHotelParams) const breadcrumbs = [ { title: intl.formatMessage({ id: "Home" }), @@ -90,7 +107,7 @@ export default async function SelectHotel({ }, { title: intl.formatMessage({ id: "Select hotel" }), - href: `${selectHotel(params.lang)}/?${searchParams.toString()}`, + href: `${selectHotel(params.lang)}/?${convertedSearchParams}`, uid: "select-hotel", }, { diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts index 897234b0f..121d778ea 100644 --- a/types/components/hotelReservation/selectHotel/map.ts +++ b/types/components/hotelReservation/selectHotel/map.ts @@ -65,9 +65,5 @@ export interface HotelCardDialogListingProps { } export type SelectHotelMapContainerProps = { - city: Location - selectHotelParams: SelectHotelSearchParams - adultsInRoom: number - childrenInRoomString: string | undefined - childrenInRoom: Child[] | undefined + searchParams: SelectHotelSearchParams } diff --git a/types/components/hotelReservation/selectHotel/selectHotel.ts b/types/components/hotelReservation/selectHotel/selectHotel.ts index d2443b5e0..6ff8e05b8 100644 --- a/types/components/hotelReservation/selectHotel/selectHotel.ts +++ b/types/components/hotelReservation/selectHotel/selectHotel.ts @@ -1,7 +1,5 @@ import type { CheckInData, Hotel, ParkingData } from "@/types/hotel" -import type { Location } from "@/types/trpc/routers/hotel/locations" import type { Lang } from "@/constants/languages" -import type { Child } from "../selectRate/selectRate" import type { SelectHotelSearchParams } from "./selectHotelSearchParams" export enum AvailabilityEnum { @@ -41,14 +39,8 @@ export interface MeetingsAndConferencesProps { } export interface SelectHotelProps { - city: Location params: { lang: Lang } - reservationParams: { - selectHotelParams: SelectHotelSearchParams - adultsInRoom: number - childrenInRoomString: string | undefined - childrenInRoom: Child[] | undefined - } + searchParams: SelectHotelSearchParams }