From aa99a5d4f6e7d0675a797e55289fbc1bb93b18ec Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Wed, 24 Sep 2025 08:50:30 +0000 Subject: [PATCH] Merged in fix/BOOK-130-filter-booking-code-count (pull request #2856) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../Filters/FilterContent/index.tsx | 31 ++++++++++++++++--- .../SelectHotel/NoAvailabilityAlert.tsx | 21 +++++++++++++ .../lib/components/SelectHotel/helpers.ts | 12 ++++--- packages/booking-flow/lib/types.ts | 1 + 4 files changed, 56 insertions(+), 9 deletions(-) diff --git a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx index e1c3b0555..81c0de520 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx +++ b/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([]) @@ -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 (
  • diff --git a/packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx b/packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx index 97cc4ee5d..8334df98a 100644 --- a/packages/booking-flow/lib/components/SelectHotel/NoAvailabilityAlert.tsx +++ b/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 ( + + ) + } + if (bookingCode && isBookingCodeRateNotAvailable && hotelsLength > 0) { const bookingCodeText = intl.formatMessage( { diff --git a/packages/booking-flow/lib/components/SelectHotel/helpers.ts b/packages/booking-flow/lib/components/SelectHotel/helpers.ts index 95292c45f..ec13b922b 100644 --- a/packages/booking-flow/lib/components/SelectHotel/helpers.ts +++ b/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) => { ...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 }) diff --git a/packages/booking-flow/lib/types.ts b/packages/booking-flow/lib/types.ts index c03c87e1a..738bd24f6 100644 --- a/packages/booking-flow/lib/types.ts +++ b/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 = {