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}

components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx

@@ -6,7 +6,6 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
-import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { safeTry } from "@/utils/safeTry"
 import { isValidSession } from "@/utils/session"
@@ -15,11 +14,8 @@ import { generateChildrenString } from "../../utils"
 import { combineRoomAvailabilities } from "../utils"
 import Rooms from "."
 
-import styles from "./rooms.module.css"
-
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
-import { AlertTypeEnum } from "@/types/enums/alert"
 
 export async function RoomsContainer({
   adultArray,
@@ -89,19 +85,6 @@ export async function RoomsContainer({
     console.error("[RoomsContainer] unable to fetch packages")
   }
 
-  if (!roomsAvailability) {
-    return (
-      <div className={styles.hotelAlert}>
-        <Alert
-          type={AlertTypeEnum.Info}
-          text={intl.formatMessage({
-            id: "There are no rooms available that match your request",
-          })}
-        />
-      </div>
-    )
-  }
-
   if (!hotelData) {
     // TODO: Log hotel data error
     console.error("[RoomsContainer] unable to fetch hotel data")

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -106,7 +106,9 @@ export default function Rooms({
   )
 
   useEffect(() => {
-    setRoomsAvailability(roomsAvailability)
+    if (roomsAvailability) {
+      setRoomsAvailability(roomsAvailability)
+    }
     setVisibleRooms()
   }, [roomsAvailability, setRoomsAvailability, setVisibleRooms])
 
@@ -267,7 +269,7 @@ export default function Rooms({
         />
       )}
 
-      {rateSummary && (
+      {rateSummary && roomsAvailability && (
         <form
           method="GET"
           action={`details?${searchParams}`}

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -50,7 +50,7 @@
 }
 
 .hotelAlert {
-  max-width: var(--max-width-navigation);
+  width: 100%;
   margin: 0 auto;
   padding: var(--Spacing-x-one-and-half);
 }

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -19,7 +19,7 @@ export interface SelectRateProps {
   availablePackages: RoomPackages
   hotelType: string | undefined
   isUserLoggedIn: boolean
-  roomsAvailability: RoomsAvailability
+  roomsAvailability: RoomsAvailability | null
   roomCategories: Room[]
   vat: number
 }