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

Fix/SW-978 error page gdansk

Approved-by: Niclas Edenvin

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -14,6 +14,7 @@ import { setLang } from "@/i18n/serverContext"
 
 import { fetchAvailableHotels, getFiltersFromHotels } from "../../utils"
 
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
 
@@ -52,11 +53,15 @@ export default async function SelectHotelMapPage({
     children,
   })
 
-  const hotelPins = getHotelPins(hotels)
-  const filterList = getFiltersFromHotels(hotels)
+  const validHotels = hotels.filter(
+    (hotel): hotel is HotelData => hotel !== null
+  )
+
+  const hotelPins = getHotelPins(validHotels)
+  const filterList = getFiltersFromHotels(validHotels)
   const cityCoordinates = await getCityCoordinates({
     city: city.name,
-    hotel: { address: hotels[0].hotelData.address.streetAddress },
+    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
   })
 
   return (
@@ -65,7 +70,7 @@ export default async function SelectHotelMapPage({
         apiKey={googleMapsApiKey}
         hotelPins={hotelPins}
         mapId={googleMapId}
-        hotels={hotels}
+        hotels={validHotels}
         filterList={filterList}
         cityCoordinates={cityCoordinates}
       />

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -33,6 +33,7 @@ import { setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import { AlertTypeEnum } from "@/types/enums/alert"
 import { LangParams, PageArgs } from "@/types/params"
@@ -61,6 +62,14 @@ export default async function SelectHotelPage({
   const selectHotelParams = new URLSearchParams(searchParams)
   const selectHotelParamsObject =
     getHotelReservationQueryParams(selectHotelParams)
+
+  if (
+    !selectHotelParamsObject.room ||
+    selectHotelParamsObject.room.length === 0
+  ) {
+    return notFound()
+  }
+
   const adults = selectHotelParamsObject.room[0].adults // TODO: Handle multiple rooms
   const children = selectHotelParamsObject.room[0].child
     ? generateChildrenString(selectHotelParamsObject.room[0].child)
@@ -74,7 +83,11 @@ export default async function SelectHotelPage({
     children,
   })
 
-  const filterList = getFiltersFromHotels(hotels)
+  const validHotels = hotels.filter(
+    (hotel): hotel is HotelData => hotel !== null
+  )
+
+  const filterList = getFiltersFromHotels(validHotels)
   const breadcrumbs = [
     {
       title: intl.formatMessage({ id: "Home" }),
@@ -169,7 +182,7 @@ export default async function SelectHotelPage({
               })}
             />
           )}
-          <HotelCardListing hotelData={hotels} />
+          <HotelCardListing hotelData={validHotels} />
         </div>
       </main>
     </>

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -4,7 +4,10 @@ import { serverClient } from "@/lib/trpc/server"
 import { getLang } from "@/i18n/serverContext"
 
 import type { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type {
+  HotelData,
+  NullableHotelData,
+} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type {
   CategorizedFilters,
   Filter,
@@ -30,10 +33,10 @@ const hotelFacilitiesFilterNames = [
 
 export async function fetchAvailableHotels(
   input: AvailabilityInput
-): Promise<HotelData[]> {
+): Promise<NullableHotelData[]> {
   const availableHotels = await serverClient().hotel.availability.hotels(input)
 
-  if (!availableHotels) throw new Error()
+  if (!availableHotels) return []
 
   const language = getLang()
 
@@ -43,7 +46,7 @@ export async function fetchAvailableHotels(
       language,
     })
 
-    if (!hotelData) throw new Error()
+    if (!hotelData) return { hotelData: null, price: hotel.productType }
 
     return {
       hotelData: hotelData.data.attributes,
@@ -55,7 +58,13 @@ export async function fetchAvailableHotels(
 }
 
 export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
-  const filters = hotels.flatMap((hotel) => hotel.hotelData.detailedFacilities)
+  if (hotels.length === 0)
+    return { facilityFilters: [], surroundingsFilters: [] }
+
+  const filters = hotels.flatMap((hotel) => {
+    if (!hotel.hotelData) return []
+    return hotel.hotelData.detailedFacilities
+  })
 
   const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
   const filterList: Filter[] = uniqueFilterIds

app/[lang]/(live)/error.tsx

@@ -1,7 +1,12 @@
 "use client" // Error components must be Client Components
 
-import { useParams, usePathname } from "next/navigation"
-import { useEffect } from "react"
+import {
+  useParams,
+  usePathname,
+  useRouter,
+  useSearchParams,
+} from "next/navigation"
+import { startTransition, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { login } from "@/constants/routes/handleAuth"
@@ -15,11 +20,17 @@ import { LangParams } from "@/types/params"
 
 export default function Error({
   error,
+  reset,
 }: {
   error: Error & { digest?: string }
+  reset: () => void
 }) {
   const intl = useIntl()
   const params = useParams<LangParams>()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const currentSearchParamsRef = useRef<string>()
+  const isFirstLoadRef = useRef<boolean>(true)
 
   useEffect(() => {
     // Log the error to an error reporting service
@@ -31,6 +42,23 @@ export default function Error({
     }
   }, [error, params.lang])
 
+  useEffect(() => {
+    // This is to reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page
+    const currentSearchParams = searchParams.toString()
+
+    if (
+      currentSearchParamsRef.current !== currentSearchParams &&
+      !isFirstLoadRef.current
+    ) {
+      startTransition(() => {
+        reset()
+        router.refresh()
+      })
+    }
+    isFirstLoadRef.current = false
+    currentSearchParamsRef.current = currentSearchParams
+  }, [searchParams, reset, router])
+
   const pathname = usePathname()
   const lang = findLang(pathname)