Merged in fix/BOOK-130-booking-code-filtering (pull request #2868)

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

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 ? (
     <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
-      <HotelCardDialogListing
-        hotels={hotels}
-        unfilteredHotelCount={unfilteredHotelCount}
-      />
+      <HotelCardDialogListing hotels={hotels} />
     </div>
   ) : (
     <div className={styles.hotelListing}>
       <HotelCardListing
         hotelData={hotels}
         type={HotelCardListingTypeEnum.MapListing}
-        unfilteredHotelCount={unfilteredHotelCount}
       />
     </div>
   )

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<HTMLDivElement | null>(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 (
     <div className={styles.container}>
@@ -233,10 +241,7 @@ export function SelectHotelMapContent({
             <RoomCardSkeleton />
           </div>
         ) : (
-          <HotelListing
-            hotels={visibleHotels}
-            unfilteredHotelCount={unfilteredHotelCount}
-          />
+          <HotelListing hotels={visibleHotels} />
         )}
         {showBackToTop && (
           <BackToTopButton