fix(SW-978) Checks for null data on hotels

components/HotelReservation/HotelCard/index.tsx

@@ -41,18 +41,11 @@ function HotelCard({
   const { hotelData } = hotel
   const { price } = hotel
 
-  const amenities = hotelData.detailedFacilities.slice(0, 5)
-
-  const classNames = hotelCardVariants({
-    type,
-    state,
-  })
-
   const handleMouseEnter = useCallback(() => {
-    if (onHotelCardHover) {
+    if (onHotelCardHover && hotelData) {
       onHotelCardHover(hotelData.name)
     }
-  }, [onHotelCardHover, hotelData.name])
+  }, [onHotelCardHover, hotelData])
 
   const handleMouseLeave = useCallback(() => {
     if (onHotelCardHover) {
@@ -60,6 +53,15 @@ function HotelCard({
     }
   }, [onHotelCardHover])
 
+  if (!hotel || !hotelData) return null
+
+  const amenities = hotelData.detailedFacilities.slice(0, 5)
+
+  const classNames = hotelCardVariants({
+    type,
+    state,
+  })
+
   return (
     <article
       className={classNames}
@@ -82,8 +84,8 @@ function HotelCard({
         <section className={styles.hotelInformation}>
           <div className={styles.titleContainer}>
             <HotelLogo
-              hotelId={hotel.hotelData.operaId}
-              hotelType={hotel.hotelData.hotelType}
+              hotelId={hotelData.operaId}
+              hotelType={hotelData.hotelType}
             />
             <Subtitle textTransform="capitalize" color="uiTextHighContrast">
               {hotelData.name}

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -17,7 +17,7 @@ export default function HotelCardDialogListing({
   activeCard,
   onActiveCardChange,
 }: HotelCardDialogListingProps) {
-  const hotelsPinData = getHotelPins(hotels)
+  const hotelsPinData = hotels ? getHotelPins(hotels) : []
   const activeCardRef = useRef<HTMLDivElement | null>(null)
   const observerRef = useRef<IntersectionObserver | null>(null)
   const dialogRef = useRef<HTMLDivElement>(null)

components/HotelReservation/HotelCardDialogListing/utils.ts

@@ -2,6 +2,8 @@ import type { HotelData } from "@/types/components/hotelReservation/selectHotel/
 import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
 
 export function getHotelPins(hotels: HotelData[]): HotelPin[] {
+  if (hotels.length === 0) return []
+
   return hotels.map((hotel) => ({
     coordinates: {
       lat: hotel.hotelData.location.latitude,