feat: SW-1588 No booking code search results UX

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useSearchParams } from "next/navigation"
 import { useSession } from "next-auth/react"
 import { createElement } from "react"
 import { useIntl } from "react-intl"
@@ -28,9 +29,11 @@ import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHote
 import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import { HotelTypeEnum } from "@/types/enums/hotelType"
-import type { Product, RateDefinition } from "@/types/trpc/routers/hotel/roomAvailability"
 import { RateTypeEnum } from "@/types/enums/rateType"
-import { useSearchParams } from "next/navigation"
+import type {
+  Product,
+  RateDefinition,
+} from "@/types/trpc/routers/hotel/roomAvailability"
 
 function getBreakfastMessage(
   publicBreakfastIncluded: boolean,
@@ -181,14 +184,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
   }
 
   function getRateInfo(product: Product) {
-    const rateDefinition = rateDefinitions?.filter((rateDefinition) => 
-      rateDefinition.rateCode === product.productType.public.rateCode
+    const rateDefinition = rateDefinitions?.filter(
+      (rateDefinition) =>
+        rateDefinition.rateCode === product.productType.public.rateCode
     )[0]
     if (
       !product.productType.public.rateCode &&
       !product.productType.member?.rateCode
     ) {
-      const possibleRate = getRate(product.productType.public.rate, rateDefinition)
+      const possibleRate = getRate(
+        product.productType.public.rate,
+        rateDefinition
+      )
       if (possibleRate) {
         return {
           ...possibleRate,

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/index.tsx

@@ -1,11 +1,12 @@
 "use client"
-import { useIntl } from "react-intl"
 import { useSearchParams } from "next/navigation"
+import { useIntl } from "react-intl"
 
 import { alternativeHotels } from "@/constants/routes/hotelReservation"
+import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 
-import Alert from "@/components/TempDesignSystem/Alert"
 import BookingCodeFilter from "@/components/HotelReservation/SelectHotel/BookingCodeFilter"
+import Alert from "@/components/TempDesignSystem/Alert"
 import { useRoomContext } from "@/contexts/Room"
 import useLang from "@/hooks/useLang"
 
@@ -16,9 +17,8 @@ import styles from "./roomSelectionPanel.module.css"
 
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { AlertTypeEnum } from "@/types/enums/alert"
-import { RateTypeEnum } from "@/types/enums/rateType"
-import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"
+import { RateTypeEnum } from "@/types/enums/rateType"
 
 export default function RoomSelectionPanel() {
   const { rooms } = useRoomContext()
@@ -29,45 +29,81 @@ export default function RoomSelectionPanel() {
   const noAvailableRooms = rooms.every(
     (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
   )
-  const activeCodeFilter = useBookingCodeFilterStore((state) => state.activeCodeFilter)
+  const activeCodeFilter = useBookingCodeFilterStore(
+    (state) => state.activeCodeFilter
+  )
 
-  let filteredRooms = rooms, isRegularRatesAvailableWithCode: boolean = false
+  let filteredRooms = rooms,
+    isRegularRatesAvailableWithCode: boolean = false,
+    noAvailabilityWithBookingCode: boolean = false
   if (bookingCode) {
-    isRegularRatesAvailableWithCode =
-      !!bookingCode ?
-        rooms?.some((room) => {
+    isRegularRatesAvailableWithCode = bookingCode
+      ? rooms?.some((room) => {
           return (
-            room.status === "Available" &&
+            room.status === AvailabilityEnum.Available &&
             room.products.some(
               (product) =>
                 product.productType.public.rateType === RateTypeEnum.Regular
             )
           )
         })
-        : false
+      : false
 
-    filteredRooms = !isRegularRatesAvailableWithCode || activeCodeFilter === BookingCodeFilterEnum.All
-      ? rooms : rooms.filter((room) => {
-        return room.products.every(
-          (product) =>
-            (activeCodeFilter === BookingCodeFilterEnum.Discounted &&
-              product.productType.public.rateType !== RateTypeEnum.Regular) ||
-            (activeCodeFilter === BookingCodeFilterEnum.Regular &&
-              product.productType.public.rateType === RateTypeEnum.Regular)
-        )
-      })
+    noAvailabilityWithBookingCode = bookingCode
+      ? !rooms?.some((room) => {
+          return (
+            room.status === AvailabilityEnum.Available &&
+            room.products.some(
+              (product) =>
+                product.productType.public.rateType !== RateTypeEnum.Regular
+            )
+          )
+        })
+      : false
+
+    filteredRooms =
+      noAvailabilityWithBookingCode ||
+      !isRegularRatesAvailableWithCode ||
+      activeCodeFilter === BookingCodeFilterEnum.All
+        ? rooms
+        : rooms.filter((room) => {
+            return (
+              room.status === AvailabilityEnum.Available &&
+              room.products.every(
+                (product) =>
+                  (activeCodeFilter === BookingCodeFilterEnum.Discounted &&
+                    product.productType.public.rateType !==
+                      RateTypeEnum.Regular) ||
+                  (activeCodeFilter === BookingCodeFilterEnum.Regular &&
+                    product.productType.public.rateType ===
+                      RateTypeEnum.Regular)
+              )
+            )
+          })
   }
 
   return (
     <>
-      {noAvailableRooms ? (
+      {noAvailableRooms ||
+      (bookingCode &&
+        isRegularRatesAvailableWithCode &&
+        noAvailabilityWithBookingCode) ? (
         <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.",
-            })}
+            text={
+              noAvailabilityWithBookingCode
+                ? intl.formatMessage(
+                    {
+                      id: "We found no available rooms using this booking code ({bookingCode}). See available rates below.",
+                    },
+                    { bookingCode }
+                  )
+                : intl.formatMessage({
+                    id: "There are no rooms available that match your request.",
+                  })
+            }
             link={{
               title: intl.formatMessage({ id: "See alternative hotels" }),
               url: `${alternativeHotels(lang)}`,
@@ -77,7 +113,11 @@ export default function RoomSelectionPanel() {
         </div>
       ) : null}
       <RoomTypeFilter />
-      {bookingCode && isRegularRatesAvailableWithCode ? <BookingCodeFilter /> : null}
+      {bookingCode &&
+      isRegularRatesAvailableWithCode &&
+      !noAvailabilityWithBookingCode ? (
+        <BookingCodeFilter />
+      ) : null}
       <ul className={styles.roomList}>
         {filteredRooms.map((roomConfiguration) => (
           <RoomCard