From 7f3fd0c7a6e6826da13709843ed5160d3f98a605 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Fri, 26 Sep 2025 08:03:25 +0000 Subject: [PATCH] Merged in fix/BOOK-130-booking-code-filtering (pull request #2868) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(BOOK-130): update booking code filtering on map view and filter and sort modal * fix(BOOK-130): update booking code filtering on map view and filter and sort modal * fix(BOOK-130): change name of filteredIds * fix(BOOK-130): add initial value reduce Approved-by: Joakim Jäderberg Approved-by: Anton Gunnarsson --- .../HotelCardDialogListing/index.tsx | 8 ---- .../lib/components/HotelCardListing/index.tsx | 12 ++++-- .../Filters/FilterAndSortModal/index.tsx | 7 ++-- .../Filters/FilterContent/index.tsx | 40 ++++++++++--------- .../SelectHotelMap/HotelListing/index.tsx | 12 +----- .../SelectHotelMapContent/index.tsx | 17 +++++--- .../lib/components/SelectHotel/helpers.ts | 14 +++++-- .../lib/components/SelectHotel/index.tsx | 10 ++--- .../lib/pages/AlternativeHotelsMapPage.tsx | 2 +- .../lib/pages/SelectHotelMapPage.tsx | 2 +- packages/booking-flow/lib/types.ts | 2 +- 11 files changed, 63 insertions(+), 63 deletions(-) diff --git a/packages/booking-flow/lib/components/HotelCardDialogListing/index.tsx b/packages/booking-flow/lib/components/HotelCardDialogListing/index.tsx index 83a7d5b2c..3eb857d93 100644 --- a/packages/booking-flow/lib/components/HotelCardDialogListing/index.tsx +++ b/packages/booking-flow/lib/components/HotelCardDialogListing/index.tsx @@ -3,7 +3,6 @@ import { useCallback, useEffect, useRef } from "react" import { useIntl } from "react-intl" -import { useHotelFilterStore } from "../../stores/hotel-filters" import { useHotelsMapStore } from "../../stores/hotels-map" import ListingHotelCardDialog from "../ListingHotelCardDialog" import { getHotelPins } from "./utils" @@ -14,12 +13,10 @@ import type { HotelResponse } from "../SelectHotel/helpers" interface HotelCardDialogListingProps { hotels: HotelResponse[] - unfilteredHotelCount: number } export default function HotelCardDialogListing({ hotels, - unfilteredHotelCount, }: HotelCardDialogListingProps) { const intl = useIntl() const isRedemption = hotels?.find( @@ -37,7 +34,6 @@ export default function HotelCardDialogListing({ const isScrollingRef = useRef(false) const debounceTimerRef = useRef | null>(null) const { activeHotel, activate, deactivate } = useHotelsMapStore() - const setResultCount = useHotelFilterStore((state) => state.setResultCount) const handleIntersection = useCallback( (entries: IntersectionObserverEntry[]) => { @@ -125,10 +121,6 @@ export default function HotelCardDialogListing({ } }, [dialogRef, activeHotel, deactivate]) - useEffect(() => { - setResultCount(hotels.length, unfilteredHotelCount) - }, [hotels, setResultCount, unfilteredHotelCount]) - return (
{hotelsPinData?.map((data) => { diff --git a/packages/booking-flow/lib/components/HotelCardListing/index.tsx b/packages/booking-flow/lib/components/HotelCardListing/index.tsx index 3b0fd5c21..951a3db11 100644 --- a/packages/booking-flow/lib/components/HotelCardListing/index.tsx +++ b/packages/booking-flow/lib/components/HotelCardListing/index.tsx @@ -38,14 +38,12 @@ export enum HotelCardListingTypeEnum { type HotelCardListingProps = { hotelData: HotelResponse[] - unfilteredHotelCount: number type?: HotelCardListingTypeEnum isAlternative?: boolean } export default function HotelCardListing({ hotelData, - unfilteredHotelCount, type = HotelCardListingTypeEnum.PageListing, isAlternative, }: HotelCardListingProps) { @@ -82,6 +80,10 @@ export default function HotelCardListing({ isBookingCodeRateAvailable && activeCodeFilter === BookingCodeFilterEnum.Discounted + const unfilteredHotelCount = showOnlyBookingCodeRates + ? hotelData.filter((hotel) => hotel.availability.bookingCode).length + : hotelData.length + const hotels = useMemo(() => { const sortedHotels = getSortedHotels({ hotels: hotelData, @@ -124,8 +126,10 @@ export default function HotelCardListing({ }, [activeHotel, type]) useEffect(() => { - setResultCount(hotels.length, unfilteredHotelCount) - }, [hotels, setResultCount, unfilteredHotelCount]) + if (type === HotelCardListingTypeEnum.PageListing) { + setResultCount(hotels.length, unfilteredHotelCount) + } + }, [hotels, setResultCount, type, unfilteredHotelCount]) function isHotelActiveInMapView(hotelName: string): boolean { return ( diff --git a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx index 42294ada9..02be8f3ec 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterAndSortModal/index.tsx @@ -227,9 +227,10 @@ export default function FilterAndSortModal({ defaultMessage: "See results ({ count })", }, { - count: filteredCount - ? filteredCount - : unfilteredResultCount, + count: + selectedFilters.length > 0 + ? filteredCount + : unfilteredResultCount, } )}

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 81c0de520..22bc99ae4 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx @@ -43,25 +43,29 @@ export default function FilterContent({ const [filteredHotelIds, setFilteredHotelIds] = useState([]) useEffect(() => { - if (activeFilters.length) { - const allFilters = [ - ...filters.facilityFilters, - ...filters.surroundingsFilters, - ] - setFilteredHotelIds( - allFilters + const allFilters = [ + ...filters.facilityFilters, + ...filters.surroundingsFilters, + ] + + const selectedFilters = activeFilters.length + ? allFilters .filter((f) => activeFilters.includes(f.id.toString())) - .map((f) => f.hotelIds) - .reduce((accumulatedHotelIds, currentHotelIds) => - accumulatedHotelIds.filter((hotelId) => - currentHotelIds.includes(hotelId) - ) + .map((f) => + showOnlyBookingCodeRates ? f.bookingCodeFilteredIds : f.hotelIds ) - ) - } else { - setFilteredHotelIds([]) - } - }, [filters, activeFilters, setFilteredHotelIds]) + : [] + + const filteredIds = selectedFilters.reduce( + (accumulatedHotelIds, currentHotelIds) => + accumulatedHotelIds.filter((hotelId) => + currentHotelIds.includes(hotelId) + ), + selectedFilters[0] || [] + ) + + setFilteredHotelIds(filteredIds) + }, [filters, activeFilters, setFilteredHotelIds, showOnlyBookingCodeRates]) useEffect(() => { onFilteredCountChange(filteredHotelIds.length) @@ -74,7 +78,7 @@ export default function FilterContent({ function filterOutput(filters: HotelFilter[]) { return filters.map((filter) => { const relevantIds = showOnlyBookingCodeRates - ? filter.filteredIds + ? filter.bookingCodeFilteredIds : filter.hotelIds const isSelected = activeFilters.some((f) => f === filter.id.toString()) diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/index.tsx b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/index.tsx index deda4c6b6..65f646d31 100644 --- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/HotelListing/index.tsx @@ -14,29 +14,21 @@ import type { HotelResponse } from "../../helpers" interface HotelListingProps { hotels: HotelResponse[] - unfilteredHotelCount: number } -export default function HotelListing({ - hotels, - unfilteredHotelCount, -}: HotelListingProps) { +export default function HotelListing({ hotels }: HotelListingProps) { const { activeHotel } = useHotelsMapStore() const isMobile = useMediaQuery("(max-width: 899px)") return isMobile ? (
- +
) : (
) diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index 16d227d39..86de56e39 100644 --- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -1,7 +1,7 @@ "use client" import { useMap } from "@vis.gl/react-google-maps" -import { useCallback, useMemo, useRef, useState } from "react" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" import { useIntl } from "react-intl" import { useMediaQuery } from "usehooks-ts" @@ -75,6 +75,8 @@ export function SelectHotelMapContent({ const listingContainerRef = useRef(null) const activeFilters = useHotelFilterStore((state) => state.activeFilters) + const setResultCount = useHotelFilterStore((state) => state.setResultCount) + const hotelMapStore = useHotelsMapStore() const { showBackToTop, scrollToTop } = useScrollToTop({ @@ -193,7 +195,13 @@ export function SelectHotelMapContent({ const showBookingCodeFilter = bookingCode && isBookingCodeRateAvailable && !isSpecialRate - const unfilteredHotelCount = hotelPins.length + const unfilteredHotelCount = showOnlyBookingCodeRates + ? hotelPins.filter((hotel) => hotel.bookingCode).length + : hotelPins.length + + useEffect(() => { + setResultCount(hotels.length, unfilteredHotelCount) + }, [hotels, setResultCount, unfilteredHotelCount]) return (
@@ -233,10 +241,7 @@ export function SelectHotelMapContent({
) : ( - + )} {showBackToTop && ( f.id === filterId) filter.hotelIds = matchingFilters.map((f) => f.hotelId) - filter.filteredIds = [ - ...new Set(matchingFilters.flatMap((f) => f.filteredIds ?? [])), + filter.bookingCodeFilteredIds = [ + ...new Set( + matchingFilters.flatMap((f) => f.bookingCodeFilteredIds ?? []) + ), ] } return filter diff --git a/packages/booking-flow/lib/components/SelectHotel/index.tsx b/packages/booking-flow/lib/components/SelectHotel/index.tsx index b8465aa2d..84e018cf4 100644 --- a/packages/booking-flow/lib/components/SelectHotel/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/index.tsx @@ -57,10 +57,10 @@ export async function SelectHotel({ hotel.availability.productType?.voucher ) - const filterList = getFiltersFromHotels(hotels) - const showBookingCodeFilter = isBookingCodeRateAvailable && !isSpecialRate + const filterList = getFiltersFromHotels(hotels, showBookingCodeFilter) + return ( <>
@@ -127,11 +127,7 @@ export async function SelectHotel({ bookingCode={bookingCode} isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable} /> - +
diff --git a/packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx b/packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx index 09b569b57..4679e1610 100644 --- a/packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx +++ b/packages/booking-flow/lib/pages/AlternativeHotelsMapPage.tsx @@ -104,7 +104,7 @@ export async function AlternativeHotelsMapPage({ isRedemptionAvailable: isRedemptionAvailability, }) - const filterList = getFiltersFromHotels(hotels) + const filterList = getFiltersFromHotels(hotels, isBookingCodeRateAvailable) return ( diff --git a/packages/booking-flow/lib/pages/SelectHotelMapPage.tsx b/packages/booking-flow/lib/pages/SelectHotelMapPage.tsx index b92b5db2f..66b09addb 100644 --- a/packages/booking-flow/lib/pages/SelectHotelMapPage.tsx +++ b/packages/booking-flow/lib/pages/SelectHotelMapPage.tsx @@ -105,7 +105,7 @@ export async function SelectHotelMapPage({ isRedemptionAvailable: isRedemptionAvailability, }) - const filterList = getFiltersFromHotels(hotels) + const filterList = getFiltersFromHotels(hotels, isBookingCodeRateAvailable) const suspenseKey = stringify(searchParams) diff --git a/packages/booking-flow/lib/types.ts b/packages/booking-flow/lib/types.ts index 738bd24f6..2127c1858 100644 --- a/packages/booking-flow/lib/types.ts +++ b/packages/booking-flow/lib/types.ts @@ -5,7 +5,7 @@ export type NextSearchParams = { [key: string]: string | string[] | undefined } export type HotelFilter = Hotel["detailedFacilities"][number] & { hotelId: string hotelIds: string[] - filteredIds: string[] + bookingCodeFilteredIds: string[] } export type CategorizedHotelFilters = {