Merged in feat/SW-1522-select-rate-alternative-hotels (pull request #1312)

feat(SW-1522): add alternative hotel link on select rate if no availability and move alert

* feat(SW-1522): add alternative hotel link on select rate and move alert


Approved-by: Linus Flood

components/HotelReservation/SelectRate/RoomSelectionPanel/index.tsx

@@ -1,13 +1,22 @@
 import { useSearchParams } from "next/navigation"
 import { useMemo } from "react"
+import { useIntl } from "react-intl"
 
+import { alternativeHotels } from "@/constants/routes/hotelReservation"
 import { useRoomFilteringStore } from "@/stores/select-rate/room-filtering"
 
+import Alert from "@/components/TempDesignSystem/Alert"
+import useLang from "@/hooks/useLang"
+
 import RoomTypeFilter from "../RoomTypeFilter"
 import RoomTypeList from "../RoomTypeList"
 
+import styles from "../Rooms/rooms.module.css"
+
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { FilterValues } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomSelectionPanelProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
 export function RoomSelectionPanel({
   availablePackages,
@@ -18,6 +27,9 @@ export function RoomSelectionPanel({
   selectedPackages,
 }: RoomSelectionPanelProps) {
   const searchParams = useSearchParams()
+  const intl = useIntl()
+  const lang = useLang()
+
   const { getRooms } = useRoomFilteringStore()
 
   const rooms = getRooms(roomListIndex)
@@ -34,6 +46,25 @@ export function RoomSelectionPanel({
 
   return (
     <>
+      {rooms?.roomConfigurations.every(
+        (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
+      ) && (
+        <div className={styles.hotelAlert}>
+          <Alert
+            type={AlertTypeEnum.Info}
+            heading={intl.formatMessage({ id: "No availability" })}
+            text={intl.formatMessage({
+              id: "There are no rooms available that match your request.",
+            })}
+            link={{
+              title: intl.formatMessage({ id: "See alternative hotels" }),
+              url: `${alternativeHotels(lang)}`,
+              keepSearchParams: true,
+            }}
+          />
+        </div>
+      )}
+
       <RoomTypeFilter
         numberOfRooms={rooms?.roomConfigurations.length ?? 0}
         filterOptions={defaultPackages}