Merged in fix/SW-978-error-page-gdansk (pull request #1002)

Fix/SW-978 error page gdansk

Approved-by: Niclas Edenvin

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)
@@ -77,7 +77,7 @@ export default function HotelCardDialogListing({
 
   return (
     <div className={styles.hotelCardDialogListing} ref={dialogRef}>
-      {hotelsPinData?.length &&
+      {!!hotelsPinData?.length &&
         hotelsPinData.map((data) => {
           const isActive = data.name === activeCard
           return (

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,

components/Maps/StaticMap/index.tsx

@@ -5,6 +5,25 @@ import { getUrlWithSignature } from "@/utils/map"
 
 import { StaticMapProps } from "@/types/components/maps/staticMap"
 
+function getCenter({
+  coordinates,
+  city,
+  country,
+}: {
+  coordinates?: { lat: number; lng: number }
+  city?: string
+  country?: string
+}): string | undefined {
+  switch (true) {
+    case !!coordinates:
+      return `${coordinates.lat},${coordinates.lng}`
+    case !!country:
+      return `${city}, ${country}`
+    default:
+      return city
+  }
+}
+
 export default function StaticMap({
   city,
   country,
@@ -19,9 +38,7 @@ export default function StaticMap({
   const key = env.GOOGLE_STATIC_MAP_KEY
   const secret = env.GOOGLE_STATIC_MAP_SIGNATURE_SECRET
   const baseUrl = "https://maps.googleapis.com/maps/api/staticmap"
-  const center = coordinates
-    ? `${coordinates.lat},${coordinates.lng}`
-    : `${city}, ${country}`
+  const center = getCenter({ coordinates, city, country })
 
   if (!center) {
     return null