Merged in fix/SW-2717-select-hotel-booking-codes- (pull request #2270)

fix: SW-2717 Updated filter display rules

* fix: SW-2717 Updated filter display rules

* fix: SW-2717 Fixed chip button trigger popover after next upgrade

* SW-2717 Optimised code


Approved-by: Erik Tiekstra

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}
       />

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -101,6 +101,7 @@ export default async function SelectHotelPage(
     <>
       <SelectHotel
         bookingCode={bookingCode}
+        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
         city={city}
         hotels={hotels}
         mapHref={mapHref}

apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import {
   Dialog,
   DialogTrigger,
@@ -27,6 +27,7 @@ import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"
 export default function BookingCodeFilter() {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
+  const [isDesktop, setIsDesktop] = useState(false)
   const activeCodeFilter = useBookingCodeFilterStore(
     (state) => state.activeCodeFilter
   )
@@ -52,6 +53,11 @@ export default function BookingCodeFilter() {
     setFilter(selectedFilter as BookingCodeFilterEnum)
   }
 
+  // To fix the hyderation error
+  useEffect(() => {
+    setIsDesktop(displayAsPopover)
+  }, [displayAsPopover])
+
   return (
     <div className={styles.bookingCodeFilter}>
       <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
@@ -67,7 +73,7 @@ export default function BookingCodeFilter() {
             color="CurrentColor"
           />
         </ChipButton>
-        {displayAsPopover ? (
+        {isDesktop ? (
           <Popover placement="bottom end" isNonModal>
             <Dialog className={styles.dialog}>
               {({ close }) => {

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -139,10 +139,6 @@ export default function SelectHotelContent({
     </Button>
   )
 
-  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 &&
+    bookingCode && isBookingCodeRateAvailable && !isSpecialRate
-    isBookingCodeRateAvailable &&
-    isRegularRateAvailable &&
-    !isSpecialRate
 
   return (
     <div className={styles.container}>

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
+  // Special rates (corporate cheque, voucher) will not have regular rate hotels availability
-    ? 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?.voucher
-      hotel.availability.productType?.redemptions
   )
 
   const filterList = getFiltersFromHotels(hotels)
 
-  const showBookingCodeFilter =
+  const showBookingCodeFilter = isBookingCodeRateAvailable && !isSpecialRate
-    isBookingCodeRateAvailable && isFullPriceHotelAvailable && !isSpecialRate
 
   return (
     <>

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);
   }
-}
+}

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"
             />
           </ChipButton>
-          {displayAsPopover ? (
+          {isDesktop ? (
-            <Popover placement="bottom end">
+            <Popover placement="bottom end" isNonModal>
               <Dialog className={styles.dialog}>
                 {({ close }) => {
                   function handleChangeFilterValue(value: string) {

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 (
     <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
       <ChipButton variant="Outlined">

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 (
     <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
       <ChipButton variant="Outlined">