fix: SW-967 Alert showing no hotels with filters

components/HotelReservation/HotelCardListing/index.tsx

@@ -1,9 +1,11 @@
 "use client"
 import { useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useState } from "react"
+import { useIntl } from "react-intl"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 
+import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 
 import HotelCard from "../HotelCard"
@@ -17,6 +19,7 @@ import {
   type HotelData,
 } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
 export default function HotelCardListing({
   hotelData,
@@ -28,6 +31,7 @@ export default function HotelCardListing({
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
+  const intl = useIntl()
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -101,17 +105,23 @@ export default function HotelCardListing({
 
   return (
     <section className={styles.hotelCards}>
-      {hotels?.length
+      {hotels?.length ? (
-        ? hotels.map((hotel) => (
+        hotels.map((hotel) => (
-            <HotelCard
+          <HotelCard
-              key={hotel.hotelData.operaId}
+            key={hotel.hotelData.operaId}
-              hotel={hotel}
+            hotel={hotel}
-              type={type}
+            type={type}
-              state={hotel.hotelData.name === activeCard ? "active" : "default"}
+            state={hotel.hotelData.name === activeCard ? "active" : "default"}
-              onHotelCardHover={onHotelCardHover}
+            onHotelCardHover={onHotelCardHover}
-            />
+          />
-          ))
+        ))
-        : null}
+      ) : activeFilters ? (
+        <Alert
+          type={AlertTypeEnum.Info}
+          heading={intl.formatMessage({ id: "filters.nohotel.heading" })}
+          text={intl.formatMessage({ id: "filters.nohotel.text" })}
+        />
+      ) : null}
       {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
     </section>
   )

i18n/dictionaries/en.json

@@ -473,6 +473,8 @@
   "breakfast.price.free": "<strikethrough>{amount} {currency}</strikethrough> <free>0 {currency}</free>/night",
   "by": "by",
   "characters": "characters",
+  "filters.nohotel.heading": "No hotels match your filters",
+  "filters.nohotel.text": "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
   "from": "from",
   "guaranteeing": "guaranteeing",
   "guest": "guest",