Merged in fix/BOOK-130-filter-booking-code-count (pull request #2856)

fix(BOOK-130): update filter counts when using booking code

* fix(BOOK-130): update filter counts when using booking code

* fix(BOOK-130): change message


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -1,9 +1,14 @@
+import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import {
+  BookingCodeFilterEnum,
+  useBookingCodeFilterStore,
+} from "../../../../stores/bookingCode-filter"
 import FilterCheckbox from "./FilterCheckbox"
 
 import styles from "./filterContent.module.css"
@@ -26,6 +31,14 @@ export default function FilterContent({
   onFilteredCountChange = () => undefined,
 }: FilterContentProps) {
   const intl = useIntl()
+  const searchParams = useSearchParams()
+
+  const activeCodeFilter = useBookingCodeFilterStore(
+    (state) => state.activeCodeFilter
+  )
+  const bookingCode = searchParams.get("bookingCode")
+  const showOnlyBookingCodeRates =
+    activeCodeFilter === BookingCodeFilterEnum.Discounted && bookingCode
 
   const [filteredHotelIds, setFilteredHotelIds] = useState<string[]>([])
 
@@ -60,15 +73,23 @@ export default function FilterContent({
 
   function filterOutput(filters: HotelFilter[]) {
     return filters.map((filter) => {
-      const isDisabled = filteredHotelIds.length
-        ? !filter.hotelIds.some((hotelId) => filteredHotelIds.includes(hotelId))
-        : false
+      const relevantIds = showOnlyBookingCodeRates
+        ? filter.filteredIds
+        : filter.hotelIds
+
+      const isSelected = activeFilters.some((f) => f === filter.id.toString())
 
       const combinedFiltersCount = filteredHotelIds.filter((id) =>
-        filter.hotelIds.includes(id)
+        relevantIds.includes(id)
       ).length
 
-      const filterCount = filter.hotelIds.length
+      const filterCount = relevantIds.length
+
+      const isDisabled =
+        !isSelected &&
+        (filterCount === 0 ||
+          (filteredHotelIds.length > 0 &&
+            !relevantIds.some((id) => filteredHotelIds.includes(id))))
 
       return (
         <li key={filter.id} className={styles.filter}>

packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx

@@ -7,6 +7,7 @@ import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotel
 import { Alert } from "@scandic-hotels/design-system/Alert"
 
 import useLang from "../../hooks/useLang"
+import { useHotelFilterStore } from "../../stores/hotel-filters"
 
 import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
 
@@ -30,6 +31,26 @@ export default function NoAvailabilityAlert({
   const intl = useIntl()
   const lang = useLang()
 
+  const { resultCount, activeFilters } = useHotelFilterStore((state) => ({
+    resultCount: state.resultCount,
+    activeFilters: state.activeFilters,
+  }))
+
+  if (activeFilters.length > 0 && resultCount === 0) {
+    return (
+      <Alert
+        type={AlertTypeEnum.Info}
+        heading={intl.formatMessage({
+          defaultMessage: "No hotels match your filters",
+        })}
+        text={intl.formatMessage({
+          defaultMessage:
+            "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
+        })}
+      />
+    )
+  }
+
   if (bookingCode && isBookingCodeRateNotAvailable && hotelsLength > 0) {
     const bookingCodeText = intl.formatMessage(
       {

packages/booking-flow/lib/components/SelectHotel/helpers.ts

@@ -299,13 +299,14 @@ export function getFiltersFromHotels(
     return defaultFilters
   }
 
-  const filters = hotels.flatMap(({ hotel }) =>
+  const filters = hotels.flatMap(({ hotel, availability }) =>
     hotel.detailedFacilities.map(
       (facility) =>
         <HotelFilter>{
           ...facility,
           hotelId: hotel.operaId,
           hotelIds: [hotel.operaId],
+          filteredIds: availability.bookingCode ? [hotel.operaId] : [],
         }
     )
   )
@@ -317,9 +318,12 @@ export function getFiltersFromHotels(
 
       // List and include all hotel Ids having same filter / amenity
       if (filter) {
-        filter.hotelIds = filters
-          .filter((f) => f.id === filterId)
-          .map((f) => f.hotelId)
+        const matchingFilters = filters.filter((f) => f.id === filterId)
+
+        filter.hotelIds = matchingFilters.map((f) => f.hotelId)
+        filter.filteredIds = [
+          ...new Set(matchingFilters.flatMap((f) => f.filteredIds ?? [])),
+        ]
       }
       return filter
     })

packages/booking-flow/lib/types.ts

@@ -5,6 +5,7 @@ export type NextSearchParams = { [key: string]: string | string[] | undefined }
 export type HotelFilter = Hotel["detailedFacilities"][number] & {
   hotelId: string
   hotelIds: string[]
+  filteredIds: string[]
 }
 
 export type CategorizedHotelFilters = {