From de2057b41c93d622fa5abdc5d9b3a67c88b67b5b Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 21 Nov 2024 11:11:31 +0100
Subject: [PATCH] fix: SW-967 Alert showing no hotels with filters

---
 .../HotelCardListing/index.tsx                | 32 ++++++++++++-------
 i18n/dictionaries/en.json                     |  2 ++
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index 6ceb9aa85..3e96a6cac 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/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.map((hotel) => (
-            <HotelCard
-              key={hotel.hotelData.operaId}
-              hotel={hotel}
-              type={type}
-              state={hotel.hotelData.name === activeCard ? "active" : "default"}
-              onHotelCardHover={onHotelCardHover}
-            />
-          ))
-        : null}
+      {hotels?.length ? (
+        hotels.map((hotel) => (
+          <HotelCard
+            key={hotel.hotelData.operaId}
+            hotel={hotel}
+            type={type}
+            state={hotel.hotelData.name === activeCard ? "active" : "default"}
+            onHotelCardHover={onHotelCardHover}
+          />
+        ))
+      ) : 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>
   )
diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json
index 950bbb36e..4abc07ea7 100644
--- a/i18n/dictionaries/en.json
+++ b/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",