Merged in fix/SW-3117-filter-select-hotel (pull request #2475)

Fix/SW-3117 filter select hotel

* fix(SW-3117): default hotel count fix

* fix(SW-3117): default hotel count for mobile


Approved-by: Tobias Johansson
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -3,6 +3,7 @@
 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 "../HotelCardDialog/ListingHotelCardDialog"
@@ -14,6 +15,7 @@ import type { HotelCardDialogListingProps } from "@/types/components/hotelReserv
 
 export default function HotelCardDialogListing({
   hotels,
+  unfilteredHotelCount,
 }: HotelCardDialogListingProps) {
   const intl = useIntl()
   const isRedemption = hotels?.find(
@@ -31,6 +33,7 @@ export default function HotelCardDialogListing({
   const isScrollingRef = useRef<boolean>(false)
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const { activeHotel, activate, deactivate } = useHotelsMapStore()
+  const setResultCount = useHotelFilterStore((state) => state.setResultCount)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -118,6 +121,10 @@ export default function HotelCardDialogListing({
     }
   }, [dialogRef, activeHotel, deactivate])
 
+  useEffect(() => {
+    setResultCount(hotels.length, unfilteredHotelCount)
+  }, [hotels, setResultCount, unfilteredHotelCount])
+
   return (
     <div className={styles.hotelCardDialogListing} ref={dialogRef}>
       {hotelsPinData?.map((data) => {

apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx

@@ -102,7 +102,7 @@ export default function HotelCardListing({
   }, [activeHotel, type])
 
   useEffect(() => {
-    setResultCount(hotels.length, unfilteredHotelCount ?? hotels.length)
+    setResultCount(hotels.length, unfilteredHotelCount)
   }, [hotels, setResultCount, unfilteredHotelCount])
 
   function isHotelActiveInMapView(hotelName: string): boolean {

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

@@ -21,7 +21,10 @@ export default function HotelListing({
 
   return isMobile ? (
     <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
-      <HotelCardDialogListing hotels={hotels} />
+      <HotelCardDialogListing
+        hotels={hotels}
+        unfilteredHotelCount={unfilteredHotelCount}
+      />
     </div>
   ) : (
     <div className={styles.hotelListing}>

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

@@ -121,7 +121,11 @@ export default async function SelectHotel({
             bookingCode={bookingCode}
             isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
           />
-          <HotelCardListing hotelData={hotels} isAlternative={isAlternative} />
+          <HotelCardListing
+            hotelData={hotels}
+            isAlternative={isAlternative}
+            unfilteredHotelCount={hotels.length}
+          />
         </div>
       </main>
     </>