diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx index b29ce22c0..8d075b715 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/alternative-hotels/page.tsx @@ -124,6 +124,7 @@ export default async function AlternativeHotelsPage( city={city} hotels={hotels} isAlternative={!!isAlternativeFor} + isBookingCodeRateAvailable={isBookingCodeRateAvailable} mapHref={mapHref} title={title} /> diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx index 531a91c21..bf864e907 100644 --- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx @@ -101,6 +101,7 @@ export default async function SelectHotelPage( <> state.activeCodeFilter ) @@ -52,6 +53,11 @@ export default function BookingCodeFilter() { setFilter(selectedFilter as BookingCodeFilterEnum) } + // To fix the hyderation error + useEffect(() => { + setIsDesktop(displayAsPopover) + }, [displayAsPopover]) + return (
@@ -67,7 +73,7 @@ export default function BookingCodeFilter() { color="CurrentColor" /> - {displayAsPopover ? ( + {isDesktop ? ( {({ close }) => { diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index e948fb9a1..2041c26ec 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -139,10 +139,6 @@ export default function SelectHotelContent({ ) - const isRegularRateAvailable = bookingCode - ? hotels.some((hotel) => !hotel.availability.bookingCode) - : false - const isSpecialRate = bookingCode ? hotels.some( (hotel) => @@ -152,10 +148,7 @@ export default function SelectHotelContent({ : false const showBookingCodeFilter = - bookingCode && - isBookingCodeRateAvailable && - isRegularRateAvailable && - !isSpecialRate + bookingCode && isBookingCodeRateAvailable && !isSpecialRate return (
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx index 716e57a26..2e219e0e6 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx @@ -23,6 +23,7 @@ interface SelectHotelProps { bookingCode?: string city: Location hotels: HotelResponse[] + isBookingCodeRateAvailable?: boolean mapHref: string title: string } @@ -32,43 +33,28 @@ export default async function SelectHotel({ city, hotels, isAlternative = false, + isBookingCodeRateAvailable = false, mapHref, title, }: SelectHotelProps) { const intl = await getIntl() - const isAllUnavailable = !hotels.length + const isAllUnavailable = hotels.every( + (hotel) => hotel.availability.status !== "Available" + ) 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 + // Special rates (corporate cheque, voucher) will not have regular rate hotels availability const isSpecialRate = hotels.some( (hotel) => hotel.availability.productType?.bonusCheque || - hotel.availability.productType?.voucher || - hotel.availability.productType?.redemptions + hotel.availability.productType?.voucher ) const filterList = getFiltersFromHotels(hotels) - const showBookingCodeFilter = - isBookingCodeRateAvailable && isFullPriceHotelAvailable && !isSpecialRate + const showBookingCodeFilter = isBookingCodeRateAvailable && !isSpecialRate return ( <> diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css index 27c85f3f9..b9eb32c4d 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css @@ -1,7 +1,7 @@ .main { display: flex; background-color: var(--Scandic-Brand-Warm-White); - min-height: 100dvh; + min-height: min(100dvh, 750px); flex-direction: column; max-width: var(--max-width-page); margin: 0 auto; @@ -141,4 +141,4 @@ .skeletonContainer .sideBar { gap: var(--Spacing-x3); } -} \ No newline at end of file +} diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx index d33bef46e..56eaaf857 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx @@ -1,6 +1,6 @@ "use client" -import { useState } from "react" +import { useEffect, useState } from "react" import { Dialog, DialogTrigger, @@ -33,6 +33,7 @@ export default function BookingCodeFilter() { const intl = useIntl() const lang = useLang() const [isOpen, setIsOpen] = useState(false) + const [isDesktop, setIsDesktop] = useState(false) const displayAsPopover = useMediaQuery("(min-width: 768px)") const utils = trpc.useUtils() const { @@ -95,6 +96,11 @@ export default function BookingCodeFilter() { }) ) + // To fix the hyderation error + useEffect(() => { + setIsDesktop(displayAsPopover) + }, [displayAsPopover]) + if (hideFilter || !booking.bookingCode) { return null } @@ -115,8 +121,8 @@ export default function BookingCodeFilter() { color="CurrentColor" /> - {displayAsPopover ? ( - + {isDesktop ? ( + {({ close }) => { function handleChangeFilterValue(value: string) { diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx index 8119b0c39..81f8b16a4 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx @@ -19,6 +19,7 @@ import styles from "./roomPackageFilter.module.css" export default function RoomPackageFilterModal() { const intl = useIntl() const [isOpen, setIsOpen] = useState(false) + return ( diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx index ee275a08d..ba62a44f5 100644 --- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx @@ -12,6 +12,7 @@ import styles from "./roomPackageFilter.module.css" export default function RoomPackageFilterPopover() { const intl = useIntl() const [isOpen, setIsOpen] = useState(false) + return (